From 3f1f4c558bea6645d282763b9da8c52af8abdb9c Mon Sep 17 00:00:00 2001 From: Denis Strigo Date: Mon, 19 Nov 2018 16:57:35 +0200 Subject: [PATCH] feat: add a bunch of new Nebular demos (#1911) --- package.json | 2 +- src/app/@theme/theme.module.ts | 43 +++ .../bootstrap/bootstrap-routing.module.ts | 33 ++ .../pages/bootstrap/bootstrap.component.ts | 10 + src/app/pages/bootstrap/bootstrap.module.ts | 36 ++ .../block-level-buttons.component.html | 0 .../block-level-buttons.component.ts | 0 .../button-groups.component.html | 0 .../button-groups.component.scss | 0 .../button-groups/button-groups.component.ts | 0 .../buttons/buttons.component.html | 2 - .../buttons/buttons.component.scss | 0 .../buttons/buttons.component.ts | 0 .../buttons/buttons.module.ts | 4 - .../default-buttons.component.html | 0 .../default-buttons.component.scss | 0 .../default-buttons.component.ts | 0 .../dropdown-button.component.html | 0 .../dropdown-button.component.scss | 0 .../dropdown-button.component.ts | 0 .../hero-buttons/hero-buttons.component.html | 0 .../hero-buttons/hero-buttons.component.scss | 0 .../hero-buttons/hero-buttons.component.ts | 0 .../icon-buttons/icon-buttons.component.html | 0 .../icon-buttons/icon-buttons.component.scss | 0 .../icon-buttons/icon-buttons.component.ts | 0 .../shape-buttons.component.html | 0 .../shape-buttons.component.scss | 0 .../shape-buttons/shape-buttons.component.ts | 0 .../size-buttons/size-buttons.component.html | 0 .../size-buttons/size-buttons.component.scss | 0 .../size-buttons/size-buttons.component.ts | 0 .../form-inputs/form-inputs.component.html | 235 ++++++++++++ .../form-inputs/form-inputs.component.scss | 130 +++++++ .../form-inputs/form-inputs.component.ts | 12 + .../modals/modal/modal.component.html | 0 .../modals/modal/modal.component.ts | 0 .../modals/modals.component.html | 0 .../modals/modals.component.scss | 0 .../modals/modals.component.ts | 0 .../components/components-routing.module.ts | 32 -- src/app/pages/components/components.module.ts | 20 - .../notifications/notifications.component.ts | 78 ---- src/app/pages/dashboard/dashboard.module.ts | 1 - .../accordion/accordion.component.html | 82 ++++ .../accordion/accordion.component.scss | 18 + .../accordion/accordion.component.ts | 15 + .../alert/alert.component.html | 46 +++ .../extra-components/alert/alert.component.ts | 9 + .../calendar-kit/calendar-kit.component.html | 12 + .../calendar-kit/calendar-kit.component.scss | 13 + .../calendar-kit/calendar-kit.component.ts | 13 + .../month-cell/month-cell.component.html | 7 + .../month-cell/month-cell.component.scss | 5 + .../month-cell/month-cell.component.ts | 27 ++ .../calendar/calendar.component.html | 23 ++ .../calendar/calendar.component.scss | 19 + .../calendar/calendar.component.ts | 32 ++ .../calendar/day-cell/day-cell.component.html | 4 + .../calendar/day-cell/day-cell.component.scss | 10 + .../calendar/day-cell/day-cell.component.ts | 11 + .../extra-components/chat/bot-replies.ts | 190 ++++++++++ .../extra-components/chat/chat.component.html | 39 ++ .../extra-components/chat/chat.component.scss | 59 +++ .../extra-components/chat/chat.component.ts | 44 +++ .../extra-components/chat/chat.service.ts | 42 +++ .../pages/extra-components/chat/messages.ts | 85 +++++ .../extra-components-routing.module.ts | 98 +++++ .../extra-components.component.ts} | 2 +- .../extra-components.module.ts | 91 +++++ .../nebular-form-inputs.component.html | 3 + .../nebular-form-inputs.component.scss | 11 + .../nebular-form-inputs.component.ts | 10 + .../nebular-select.component.html | 344 +++++++++++++++++ .../nebular-select.component.scss | 15 + .../nebular-select.component.ts | 12 + .../infinite-list.component.html | 36 ++ .../infinite-list.component.scss | 11 + .../infinite-list/infinite-list.component.ts | 41 ++ .../news-post-placeholder.component.html | 3 + .../news-post-placeholder.component.scss | 25 ++ .../news-post-placeholder.component.ts | 12 + .../news-post/news-post.component.html | 5 + .../news-post/news-post.component.ts | 12 + .../extra-components/list/fruits-list.ts | 13 + .../extra-components/list/list.component.html | 26 ++ .../extra-components/list/list.component.scss | 13 + .../extra-components/list/list.component.ts | 19 + .../interactive-progress-bar.component.html | 14 + .../interactive-progress-bar.component.scss | 12 + .../interactive-progress-bar.component.ts | 27 ++ .../progress-bar/progress-bar.component.html | 35 ++ .../progress-bar/progress-bar.component.scss | 7 + .../progress-bar/progress-bar.component.ts | 10 + .../extra-components/services/news.service.ts | 30 ++ .../spinner-color.component.html | 41 ++ .../spinner-color/spinner-color.component.ts | 9 + .../spinner-in-buttons.component.html | 39 ++ .../spinner-in-buttons.component.scss | 12 + .../spinner-in-buttons.component.ts | 25 ++ .../spinner-in-tabs.component.html | 20 + .../spinner-in-tabs.component.scss | 7 + .../spinner-in-tabs.component.ts | 17 + .../spinner-sizes.component.html | 41 ++ .../spinner-sizes/spinner-sizes.component.ts | 9 + .../spinner/spinner.component.html | 14 + .../spinner/spinner.component.scss | 11 + .../spinner/spinner.component.ts | 17 + .../stepper/stepper.component.html | 143 +++++++ .../stepper/stepper.component.scss | 12 + .../stepper/stepper.component.ts | 43 +++ .../tabs/tabs.component.html | 0 .../tabs/tabs.component.scss | 0 .../tabs/tabs.component.ts | 4 +- .../tree/tree.component.html | 0 .../tree/tree.component.scss | 0 .../tree/tree.component.ts | 0 .../action-groups.component.html | 0 .../action-groups.component.scss | 0 .../action-groups/action-groups.component.ts | 0 .../button-elements.component.html | 17 + .../button-elements.component.scss | 15 + .../button-elements.component.ts | 12 + .../forms/buttons/buttons.component.html | 16 + .../forms/buttons/buttons.component.scss | 103 +++++ .../pages/forms/buttons/buttons.component.ts | 9 + src/app/pages/forms/buttons/buttons.module.ts | 38 ++ .../default-buttons.component.html | 44 +++ .../default-buttons.component.scss | 130 +++++++ .../default-buttons.component.ts | 47 +++ .../hero-buttons/hero-buttons.component.html | 72 ++++ .../hero-buttons/hero-buttons.component.scss | 144 +++++++ .../hero-buttons/hero-buttons.component.ts | 166 +++++++++ .../labeled-actions-group.component.html | 0 .../labeled-actions-group.component.scss | 0 .../labeled-actions-group.component.ts | 0 .../outline-buttons.component.html | 45 +++ .../outline-buttons.component.scss | 130 +++++++ .../outline-buttons.component.ts | 47 +++ .../shape-buttons.component.html | 43 +++ .../shape-buttons.component.scss | 30 ++ .../shape-buttons/shape-buttons.component.ts | 9 + .../size-buttons/size-buttons.component.html | 50 +++ .../size-buttons/size-buttons.component.scss | 26 ++ .../size-buttons/size-buttons.component.ts | 9 + .../datepicker/datepicker.component.html | 32 ++ .../datepicker/datepicker.component.scss | 12 + .../forms/datepicker/datepicker.component.ts | 18 + .../form-inputs/form-inputs.component.html | 211 +++-------- .../form-inputs/form-inputs.component.ts | 1 + src/app/pages/forms/forms-routing.module.ts | 32 +- src/app/pages/forms/forms.module.ts | 2 + .../dialog-name-prompt.component.html | 10 + .../dialog-name-prompt.component.scss | 11 + .../dialog-name-prompt.component.ts | 20 + .../dialog/dialog.component.html | 70 ++++ .../dialog/dialog.component.scss | 42 +++ .../modal-overlays/dialog/dialog.component.ts | 62 +++ .../showcase-dialog.component.html | 14 + .../showcase-dialog.component.scss | 8 + .../showcase-dialog.component.ts | 18 + .../modal-overlays-routing.module.ts | 44 +++ .../modal-overlays.component.ts | 11 + .../modal-overlays/modal-overlays.module.ts | 73 ++++ .../popovers/popover-examples.component.ts | 0 .../popovers/popovers.component.html | 0 .../popovers/popovers.component.scss | 0 .../popovers/popovers.component.ts | 0 .../toastr/toastr.component.html} | 34 +- .../toastr/toastr.component.scss} | 0 .../modal-overlays/toastr/toastr.component.ts | 84 +++++ .../tooltip/tooltip.component.html | 37 ++ .../tooltip/tooltip.component.scss | 7 + .../tooltip/tooltip.component.ts | 10 + .../window-form/window-form.component.scss | 12 + .../window-form/window-form.component.ts | 22 ++ .../window/window.component.html | 31 ++ .../window/window.component.scss | 38 ++ .../modal-overlays/window/window.component.ts | 43 +++ src/app/pages/pages-menu.ts | 125 +++++-- src/app/pages/pages-routing.module.ts | 10 +- .../ui-features/icons/icons.component.ts | 2 +- .../ui-features/ui-features-routing.module.ts | 29 +- .../pages/ui-features/ui-features.module.ts | 25 -- src/assets/data/news.json | 352 ++++++++++++++++++ 185 files changed, 5176 insertions(+), 422 deletions(-) create mode 100644 src/app/pages/bootstrap/bootstrap-routing.module.ts create mode 100644 src/app/pages/bootstrap/bootstrap.component.ts create mode 100644 src/app/pages/bootstrap/bootstrap.module.ts rename src/app/pages/{ui-features => bootstrap}/buttons/block-level-buttons/block-level-buttons.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/block-level-buttons/block-level-buttons.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/button-groups/button-groups.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/button-groups/button-groups.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/button-groups/button-groups.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/buttons.component.html (86%) rename src/app/pages/{ui-features => bootstrap}/buttons/buttons.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/buttons.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/buttons.module.ts (83%) rename src/app/pages/{ui-features => bootstrap}/buttons/default-buttons/default-buttons.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/default-buttons/default-buttons.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/default-buttons/default-buttons.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/dropdown-buttons/dropdown-button.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/dropdown-buttons/dropdown-button.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/dropdown-buttons/dropdown-button.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/hero-buttons/hero-buttons.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/hero-buttons/hero-buttons.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/hero-buttons/hero-buttons.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/icon-buttons/icon-buttons.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/icon-buttons/icon-buttons.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/icon-buttons/icon-buttons.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/shape-buttons/shape-buttons.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/shape-buttons/shape-buttons.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/shape-buttons/shape-buttons.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/size-buttons/size-buttons.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/size-buttons/size-buttons.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/buttons/size-buttons/size-buttons.component.ts (100%) create mode 100644 src/app/pages/bootstrap/form-inputs/form-inputs.component.html create mode 100644 src/app/pages/bootstrap/form-inputs/form-inputs.component.scss create mode 100644 src/app/pages/bootstrap/form-inputs/form-inputs.component.ts rename src/app/pages/{ui-features => bootstrap}/modals/modal/modal.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/modals/modal/modal.component.ts (100%) rename src/app/pages/{ui-features => bootstrap}/modals/modals.component.html (100%) rename src/app/pages/{ui-features => bootstrap}/modals/modals.component.scss (100%) rename src/app/pages/{ui-features => bootstrap}/modals/modals.component.ts (100%) delete mode 100644 src/app/pages/components/components-routing.module.ts delete mode 100644 src/app/pages/components/components.module.ts delete mode 100644 src/app/pages/components/notifications/notifications.component.ts create mode 100644 src/app/pages/extra-components/accordion/accordion.component.html create mode 100644 src/app/pages/extra-components/accordion/accordion.component.scss create mode 100644 src/app/pages/extra-components/accordion/accordion.component.ts create mode 100644 src/app/pages/extra-components/alert/alert.component.html create mode 100644 src/app/pages/extra-components/alert/alert.component.ts create mode 100644 src/app/pages/extra-components/calendar-kit/calendar-kit.component.html create mode 100644 src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss create mode 100644 src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts create mode 100644 src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html create mode 100644 src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss create mode 100644 src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts create mode 100644 src/app/pages/extra-components/calendar/calendar.component.html create mode 100644 src/app/pages/extra-components/calendar/calendar.component.scss create mode 100644 src/app/pages/extra-components/calendar/calendar.component.ts create mode 100644 src/app/pages/extra-components/calendar/day-cell/day-cell.component.html create mode 100644 src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss create mode 100644 src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts create mode 100644 src/app/pages/extra-components/chat/bot-replies.ts create mode 100644 src/app/pages/extra-components/chat/chat.component.html create mode 100644 src/app/pages/extra-components/chat/chat.component.scss create mode 100644 src/app/pages/extra-components/chat/chat.component.ts create mode 100644 src/app/pages/extra-components/chat/chat.service.ts create mode 100644 src/app/pages/extra-components/chat/messages.ts create mode 100644 src/app/pages/extra-components/extra-components-routing.module.ts rename src/app/pages/{components/components.component.ts => extra-components/extra-components.component.ts} (78%) create mode 100644 src/app/pages/extra-components/extra-components.module.ts create mode 100644 src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html create mode 100644 src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss create mode 100644 src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts create mode 100644 src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html create mode 100644 src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss create mode 100644 src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts create mode 100644 src/app/pages/extra-components/infinite-list/infinite-list.component.html create mode 100644 src/app/pages/extra-components/infinite-list/infinite-list.component.scss create mode 100644 src/app/pages/extra-components/infinite-list/infinite-list.component.ts create mode 100644 src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html create mode 100644 src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss create mode 100644 src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts create mode 100644 src/app/pages/extra-components/infinite-list/news-post/news-post.component.html create mode 100644 src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts create mode 100644 src/app/pages/extra-components/list/fruits-list.ts create mode 100644 src/app/pages/extra-components/list/list.component.html create mode 100644 src/app/pages/extra-components/list/list.component.scss create mode 100644 src/app/pages/extra-components/list/list.component.ts create mode 100644 src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html create mode 100644 src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss create mode 100644 src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts create mode 100644 src/app/pages/extra-components/progress-bar/progress-bar.component.html create mode 100644 src/app/pages/extra-components/progress-bar/progress-bar.component.scss create mode 100644 src/app/pages/extra-components/progress-bar/progress-bar.component.ts create mode 100644 src/app/pages/extra-components/services/news.service.ts create mode 100644 src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html create mode 100644 src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts create mode 100644 src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html create mode 100644 src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss create mode 100644 src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts create mode 100644 src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html create mode 100644 src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss create mode 100644 src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts create mode 100644 src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html create mode 100644 src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts create mode 100644 src/app/pages/extra-components/spinner/spinner.component.html create mode 100644 src/app/pages/extra-components/spinner/spinner.component.scss create mode 100644 src/app/pages/extra-components/spinner/spinner.component.ts create mode 100644 src/app/pages/extra-components/stepper/stepper.component.html create mode 100644 src/app/pages/extra-components/stepper/stepper.component.scss create mode 100644 src/app/pages/extra-components/stepper/stepper.component.ts rename src/app/pages/{ui-features => extra-components}/tabs/tabs.component.html (100%) rename src/app/pages/{ui-features => extra-components}/tabs/tabs.component.scss (100%) rename src/app/pages/{ui-features => extra-components}/tabs/tabs.component.ts (91%) rename src/app/pages/{components => extra-components}/tree/tree.component.html (100%) rename src/app/pages/{components => extra-components}/tree/tree.component.scss (100%) rename src/app/pages/{components => extra-components}/tree/tree.component.ts (100%) rename src/app/pages/{ui-features => forms}/buttons/action-groups/action-groups.component.html (100%) rename src/app/pages/{ui-features => forms}/buttons/action-groups/action-groups.component.scss (100%) rename src/app/pages/{ui-features => forms}/buttons/action-groups/action-groups.component.ts (100%) create mode 100644 src/app/pages/forms/buttons/button-elements/button-elements.component.html create mode 100644 src/app/pages/forms/buttons/button-elements/button-elements.component.scss create mode 100644 src/app/pages/forms/buttons/button-elements/button-elements.component.ts create mode 100644 src/app/pages/forms/buttons/buttons.component.html create mode 100644 src/app/pages/forms/buttons/buttons.component.scss create mode 100644 src/app/pages/forms/buttons/buttons.component.ts create mode 100644 src/app/pages/forms/buttons/buttons.module.ts create mode 100644 src/app/pages/forms/buttons/default-buttons/default-buttons.component.html create mode 100644 src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss create mode 100644 src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts create mode 100644 src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html create mode 100644 src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss create mode 100644 src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts rename src/app/pages/{ui-features => forms}/buttons/labeled-actions-group/labeled-actions-group.component.html (100%) rename src/app/pages/{ui-features => forms}/buttons/labeled-actions-group/labeled-actions-group.component.scss (100%) rename src/app/pages/{ui-features => forms}/buttons/labeled-actions-group/labeled-actions-group.component.ts (100%) create mode 100644 src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html create mode 100644 src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss create mode 100644 src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts create mode 100644 src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html create mode 100644 src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss create mode 100644 src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts create mode 100644 src/app/pages/forms/buttons/size-buttons/size-buttons.component.html create mode 100644 src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss create mode 100644 src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts create mode 100644 src/app/pages/forms/datepicker/datepicker.component.html create mode 100644 src/app/pages/forms/datepicker/datepicker.component.scss create mode 100644 src/app/pages/forms/datepicker/datepicker.component.ts create mode 100644 src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html create mode 100644 src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss create mode 100644 src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts create mode 100644 src/app/pages/modal-overlays/dialog/dialog.component.html create mode 100644 src/app/pages/modal-overlays/dialog/dialog.component.scss create mode 100644 src/app/pages/modal-overlays/dialog/dialog.component.ts create mode 100644 src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html create mode 100644 src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss create mode 100644 src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts create mode 100644 src/app/pages/modal-overlays/modal-overlays-routing.module.ts create mode 100644 src/app/pages/modal-overlays/modal-overlays.component.ts create mode 100644 src/app/pages/modal-overlays/modal-overlays.module.ts rename src/app/pages/{ui-features => modal-overlays}/popovers/popover-examples.component.ts (100%) rename src/app/pages/{ui-features => modal-overlays}/popovers/popovers.component.html (100%) rename src/app/pages/{ui-features => modal-overlays}/popovers/popovers.component.scss (100%) rename src/app/pages/{ui-features => modal-overlays}/popovers/popovers.component.ts (100%) rename src/app/pages/{components/notifications/notifications.component.html => modal-overlays/toastr/toastr.component.html} (59%) rename src/app/pages/{components/notifications/notifications.component.scss => modal-overlays/toastr/toastr.component.scss} (100%) create mode 100644 src/app/pages/modal-overlays/toastr/toastr.component.ts create mode 100644 src/app/pages/modal-overlays/tooltip/tooltip.component.html create mode 100644 src/app/pages/modal-overlays/tooltip/tooltip.component.scss create mode 100644 src/app/pages/modal-overlays/tooltip/tooltip.component.ts create mode 100644 src/app/pages/modal-overlays/window/window-form/window-form.component.scss create mode 100644 src/app/pages/modal-overlays/window/window-form/window-form.component.ts create mode 100644 src/app/pages/modal-overlays/window/window.component.html create mode 100644 src/app/pages/modal-overlays/window/window.component.scss create mode 100644 src/app/pages/modal-overlays/window/window.component.ts create mode 100644 src/assets/data/news.json diff --git a/package.json b/package.json index aafbaf51..6e802b6f 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "intl": "1.2.5", "ionicons": "2.0.1", "leaflet": "1.2.0", - "nebular-icons": "1.0.9", + "nebular-icons": "1.1.0", "ng2-ckeditor": "^1.2.2", "ng2-completer": "2.0.8", "ng2-smart-table": "1.3.5", diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 84ce3ac6..2da490ef 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -18,6 +18,24 @@ import { NbPopoverModule, NbContextMenuModule, NbProgressBarModule, + NbCalendarModule, + NbCalendarRangeModule, + NbStepperModule, + NbButtonModule, + NbInputModule, + NbAccordionModule, + NbDatepickerModule, + NbDialogModule, + NbWindowModule, + NbListModule, + NbToastrModule, + NbAlertModule, + NbSpinnerModule, + NbRadioModule, + NbSelectModule, + NbChatModule, + NbTooltipModule, + NbCalendarKitModule, } from '@nebular/theme'; import { NbSecurityModule } from '@nebular/security'; @@ -68,6 +86,24 @@ const NB_MODULES = [ NgbModule, NbSecurityModule, // *nbIsGranted directive, NbProgressBarModule, + NbCalendarModule, + NbCalendarRangeModule, + NbStepperModule, + NbButtonModule, + NbListModule, + NbToastrModule, + NbInputModule, + NbAccordionModule, + NbDatepickerModule, + NbDialogModule, + NbWindowModule, + NbAlertModule, + NbSpinnerModule, + NbRadioModule, + NbSelectModule, + NbChatModule, + NbTooltipModule, + NbCalendarKitModule, ]; const COMPONENTS = [ @@ -107,6 +143,13 @@ const NB_THEME_PROVIDERS = [ ).providers, ...NbSidebarModule.forRoot().providers, ...NbMenuModule.forRoot().providers, + ...NbDatepickerModule.forRoot().providers, + ...NbDialogModule.forRoot().providers, + ...NbWindowModule.forRoot().providers, + ...NbToastrModule.forRoot().providers, + ...NbChatModule.forRoot({ + messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY', + }).providers, ]; @NgModule({ diff --git a/src/app/pages/bootstrap/bootstrap-routing.module.ts b/src/app/pages/bootstrap/bootstrap-routing.module.ts new file mode 100644 index 00000000..b7aa642b --- /dev/null +++ b/src/app/pages/bootstrap/bootstrap-routing.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { BootstrapComponent } from './bootstrap.component'; +import { ModalsComponent } from './modals/modals.component'; +import { ButtonsComponent } from './buttons/buttons.component'; +import { FormInputsComponent } from './form-inputs/form-inputs.component'; + + +const routes: Routes = [{ + path: '', + component: BootstrapComponent, + children: [ + { + path: 'inputs', + component: FormInputsComponent, + }, + { + path: 'buttons', + component: ButtonsComponent, + }, + { + path: 'modal', + component: ModalsComponent, + }, + ], +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class BootstrapRoutingModule { } diff --git a/src/app/pages/bootstrap/bootstrap.component.ts b/src/app/pages/bootstrap/bootstrap.component.ts new file mode 100644 index 00000000..339c7823 --- /dev/null +++ b/src/app/pages/bootstrap/bootstrap.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-bootstrap', + template: ` + + `, +}) +export class BootstrapComponent { +} diff --git a/src/app/pages/bootstrap/bootstrap.module.ts b/src/app/pages/bootstrap/bootstrap.module.ts new file mode 100644 index 00000000..361d00a7 --- /dev/null +++ b/src/app/pages/bootstrap/bootstrap.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; + +import { ThemeModule } from '../../@theme/theme.module'; + +import { BootstrapRoutingModule } from './bootstrap-routing.module'; +import { ModalsComponent } from './modals/modals.component'; +import { ModalComponent } from './modals/modal/modal.component'; +import { BootstrapComponent } from './bootstrap.component'; +import { ButtonsModule } from './buttons/buttons.module'; +import { FormInputsComponent } from './form-inputs/form-inputs.component'; + +const COMPONENTS = [ + BootstrapComponent, + ModalsComponent, + ModalComponent, + FormInputsComponent, +]; + +const ENTRY_COMPONENTS = [ + ModalComponent, +]; + +@NgModule({ + imports: [ + ThemeModule, + BootstrapRoutingModule, + ButtonsModule, + ], + declarations: [ + ...COMPONENTS, + ], + entryComponents: [ + ...ENTRY_COMPONENTS, + ], +}) +export class BootstrapModule { } diff --git a/src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html b/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html rename to src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html diff --git a/src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.ts b/src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.ts rename to src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/button-groups/button-groups.component.html rename to src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss rename to src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts b/src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts rename to src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/bootstrap/buttons/buttons.component.html similarity index 86% rename from src/app/pages/ui-features/buttons/buttons.component.html rename to src/app/pages/bootstrap/buttons/buttons.component.html index 336e89f1..9a8d7ebd 100644 --- a/src/app/pages/ui-features/buttons/buttons.component.html +++ b/src/app/pages/bootstrap/buttons/buttons.component.html @@ -4,8 +4,6 @@
- -
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/bootstrap/buttons/buttons.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/buttons.component.scss rename to src/app/pages/bootstrap/buttons/buttons.component.scss diff --git a/src/app/pages/ui-features/buttons/buttons.component.ts b/src/app/pages/bootstrap/buttons/buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/buttons.component.ts rename to src/app/pages/bootstrap/buttons/buttons.component.ts diff --git a/src/app/pages/ui-features/buttons/buttons.module.ts b/src/app/pages/bootstrap/buttons/buttons.module.ts similarity index 83% rename from src/app/pages/ui-features/buttons/buttons.module.ts rename to src/app/pages/bootstrap/buttons/buttons.module.ts index ba34dc54..a5693007 100644 --- a/src/app/pages/ui-features/buttons/buttons.module.ts +++ b/src/app/pages/bootstrap/buttons/buttons.module.ts @@ -6,12 +6,10 @@ import { HeroButtonComponent } from './hero-buttons/hero-buttons.component'; import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component'; import { SizeButtonsComponent } from './size-buttons/size-buttons.component'; import { ButtonsComponent } from './buttons.component'; -import { ActionGroupsComponent } from './action-groups/action-groups.component'; import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component'; import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component'; import { ButtonGroupsComponent } from './button-groups/button-groups.component'; import { IconButtonsComponent } from './icon-buttons/icon-buttons.component'; -import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component'; const components = [ ButtonsComponent, @@ -19,12 +17,10 @@ const components = [ HeroButtonComponent, ShapeButtonsComponent, SizeButtonsComponent, - ActionGroupsComponent, DropdownButtonsComponent, BlockLevelButtonsComponent, ButtonGroupsComponent, IconButtonsComponent, - LabeledActionsGroupComponent, ]; @NgModule({ diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html rename to src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss rename to src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts b/src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts rename to src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts diff --git a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.html rename to src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html diff --git a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss rename to src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss diff --git a/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.ts b/src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.ts rename to src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html rename to src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss rename to src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts rename to src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html rename to src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss rename to src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts b/src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts rename to src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts diff --git a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html rename to src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html diff --git a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss rename to src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss diff --git a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.ts b/src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.ts rename to src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html rename to src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss rename to src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.ts b/src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.ts rename to src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts diff --git a/src/app/pages/bootstrap/form-inputs/form-inputs.component.html b/src/app/pages/bootstrap/form-inputs/form-inputs.component.html new file mode 100644 index 00000000..6331c2b7 --- /dev/null +++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.html @@ -0,0 +1,235 @@ +
+
+ + Default Inputs + +
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ + A block of help text that breaks into a new line and may extend beyond one line. + +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + + + Input Groups + +
+ @ + +
+ +
+ + + + + + + +
+
+ + + + +
+
+
+ +
    +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • + +
  • Separated link
    • +
+
+ +
+ + + + + Selects + +
+ + +
+
+ + +
+ + +
+ +
+ + Input Styles + +
+ +
+
+ +
+
+ +
+ + + + + Validation States + +
+ +
+
+ +
+
+ +
+
+ Checkbox with Success + Checkbox with Warning + Checkbox with Danger +
+
+ +
+
+ +
+
+ +
+ + + + + Checkboxes & Radios + +
+
+ Checkbox 1 + Checkbox 2 + +
+ + +
+
+
+ + + +
+
+ Disabled Checkbox + +
+
+ + + + + + Rating +
+ + + + + + + + + {{ starRate }} +
+
+ + + + + + + + + {{ heartRate }} +
+ + +
+
diff --git a/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss b/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss new file mode 100644 index 00000000..763b31ae --- /dev/null +++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.scss @@ -0,0 +1,130 @@ +@import '../../../@theme/styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + + nb-card-body { + overflow: visible; + } + + .input-group { + margin-bottom: 1rem; + } + + .validation-checkboxes { + display: flex; + justify-content: space-between; + + .custom-control { + margin-left: 1rem; + } + } + + .demo-checkboxes { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + } + + .demo-radio { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + } + + .demo-disabled-checkbox-radio { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + } + + .demo-checkboxes-radio { + display: flex; + justify-content: space-between; + } + + .demo-rating { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + + .star { + font-size: 1.5rem; + color: nb-theme(color-fg); + } + + .filled { + color: nb-theme(color-fg); + } + + // TODO: Replace with the card header styles mixin + .rating-header { + line-height: 2rem; + font-size: 1.25rem; + font-family: nb-theme(font-secondary); + font-weight: nb-theme(font-weight-bolder); + color: nb-theme(color-fg-heading); + } + + .current-rate { + font-size: 1.5rem; + @include nb-ltr(padding-left, 1rem); + @include nb-rtl(padding-right, 1rem); + color: nb-theme(color-fg-heading); + } + + .full-name-inputs { + display: flex; + } + + .input-group.has-person-icon { + position: relative; + + .form-control { + + padding-left: 3rem; + } + + &::before { + content: '\F47D'; + font-family: 'Ionicons'; + font-size: 2rem; + position: absolute; + z-index: 100; + left: 1rem; + top: 0.25rem; + } + } + + .dropdown { + min-width: 7rem; + } + + .dropdown-menu { + width: auto; + } + + .form-group label { + padding: 0 0 0.75rem; + } + + ngb-rating { + outline: none; + } + + ngb-rating i { + color: nb-theme(color-success); + @include nb-for-theme(cosmic) { + color: nb-theme(color-primary); + } + } + + @include media-breakpoint-down(xs) { + button:not(.btn-icon) { + padding: 0.75rem 1rem; + font-size: 0.75rem; + } + } +} diff --git a/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts b/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts new file mode 100644 index 00000000..6299738f --- /dev/null +++ b/src/app/pages/bootstrap/form-inputs/form-inputs.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-form-inputs', + styleUrls: ['./form-inputs.component.scss'], + templateUrl: './form-inputs.component.html', +}) +export class FormInputsComponent { + + starRate = 2; + heartRate = 4; +} diff --git a/src/app/pages/ui-features/modals/modal/modal.component.html b/src/app/pages/bootstrap/modals/modal/modal.component.html similarity index 100% rename from src/app/pages/ui-features/modals/modal/modal.component.html rename to src/app/pages/bootstrap/modals/modal/modal.component.html diff --git a/src/app/pages/ui-features/modals/modal/modal.component.ts b/src/app/pages/bootstrap/modals/modal/modal.component.ts similarity index 100% rename from src/app/pages/ui-features/modals/modal/modal.component.ts rename to src/app/pages/bootstrap/modals/modal/modal.component.ts diff --git a/src/app/pages/ui-features/modals/modals.component.html b/src/app/pages/bootstrap/modals/modals.component.html similarity index 100% rename from src/app/pages/ui-features/modals/modals.component.html rename to src/app/pages/bootstrap/modals/modals.component.html diff --git a/src/app/pages/ui-features/modals/modals.component.scss b/src/app/pages/bootstrap/modals/modals.component.scss similarity index 100% rename from src/app/pages/ui-features/modals/modals.component.scss rename to src/app/pages/bootstrap/modals/modals.component.scss diff --git a/src/app/pages/ui-features/modals/modals.component.ts b/src/app/pages/bootstrap/modals/modals.component.ts similarity index 100% rename from src/app/pages/ui-features/modals/modals.component.ts rename to src/app/pages/bootstrap/modals/modals.component.ts diff --git a/src/app/pages/components/components-routing.module.ts b/src/app/pages/components/components-routing.module.ts deleted file mode 100644 index 655666d8..00000000 --- a/src/app/pages/components/components-routing.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { ComponentsComponent } from './components.component'; -import { TreeComponent } from './tree/tree.component'; -import { NotificationsComponent } from './notifications/notifications.component'; - -const routes: Routes = [{ - path: '', - component: ComponentsComponent, - children: [ - { - path: 'tree', - component: TreeComponent, - }, { - path: 'notifications', - component: NotificationsComponent, - }, - ], -}]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class ComponentsRoutingModule { } - -export const routedComponents = [ - ComponentsComponent, - TreeComponent, - NotificationsComponent, -]; diff --git a/src/app/pages/components/components.module.ts b/src/app/pages/components/components.module.ts deleted file mode 100644 index ea38db9e..00000000 --- a/src/app/pages/components/components.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { TreeModule } from 'angular-tree-component'; -import { ToasterModule } from 'angular2-toaster'; - -import { ThemeModule } from '../../@theme/theme.module'; -import { ComponentsRoutingModule, routedComponents } from './components-routing.module'; - -@NgModule({ - imports: [ - ThemeModule, - ComponentsRoutingModule, - TreeModule, - ToasterModule.forRoot(), - ], - declarations: [ - ...routedComponents, - ], -}) -export class ComponentsModule { } diff --git a/src/app/pages/components/notifications/notifications.component.ts b/src/app/pages/components/notifications/notifications.component.ts deleted file mode 100644 index 7df98b97..00000000 --- a/src/app/pages/components/notifications/notifications.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Component } from '@angular/core'; -import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster'; - -import 'style-loader!angular2-toaster/toaster.css'; - -@Component({ - selector: 'ngx-notifications', - styleUrls: ['./notifications.component.scss'], - templateUrl: './notifications.component.html', -}) -export class NotificationsComponent { - constructor(private toasterService: ToasterService) {} - - config: ToasterConfig; - - position = 'toast-top-right'; - animationType = 'fade'; - title = 'HI there!'; - content = `I'm cool toaster!`; - timeout = 5000; - toastsLimit = 5; - type = 'default'; - - isNewestOnTop = true; - isHideOnClick = true; - isDuplicatesPrevented = false; - isCloseButton = true; - - types: string[] = ['default', 'info', 'success', 'warning', 'error']; - animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp']; - positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center', - 'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center']; - - quotes = [ - { title: null, body: 'We rock at Angular' }, - { title: null, body: 'Titles are not always needed' }, - { title: null, body: 'Toastr rock!' }, - { title: 'What about nice html?', body: 'Sure you can!' }, - ]; - - makeToast() { - this.showToast(this.type, this.title, this.content); - } - - openRandomToast () { - const typeIndex = Math.floor(Math.random() * this.types.length); - const quoteIndex = Math.floor(Math.random() * this.quotes.length); - const type = this.types[typeIndex]; - const quote = this.quotes[quoteIndex]; - - this.showToast(type, quote.title, quote.body); - } - - private showToast(type: string, title: string, body: string) { - this.config = new ToasterConfig({ - positionClass: this.position, - timeout: this.timeout, - newestOnTop: this.isNewestOnTop, - tapToDismiss: this.isHideOnClick, - preventDuplicates: this.isDuplicatesPrevented, - animation: this.animationType, - limit: this.toastsLimit, - }); - const toast: Toast = { - type: type, - title: title, - body: body, - timeout: this.timeout, - showCloseButton: this.isCloseButton, - bodyOutputType: BodyOutputType.TrustedHtml, - }; - this.toasterService.popAsync(toast); - } - - clearToasts() { - this.toasterService.clear(); - } -} diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index 09d220f0..2ffdd614 100644 --- a/src/app/pages/dashboard/dashboard.module.ts +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -21,7 +21,6 @@ import { PlayerComponent } from './rooms/player/player.component'; import { TrafficComponent } from './traffic/traffic.component'; import { TrafficChartComponent } from './traffic/traffic-chart.component'; - @NgModule({ imports: [ ThemeModule, diff --git a/src/app/pages/extra-components/accordion/accordion.component.html b/src/app/pages/extra-components/accordion/accordion.component.html new file mode 100644 index 00000000..180e3aba --- /dev/null +++ b/src/app/pages/extra-components/accordion/accordion.component.html @@ -0,0 +1,82 @@ +
+
+ + Toggle Accordion By Button + + + + + + + + + Product Details + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Reviews + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Edit + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + +
+ +
+ + + + Product Details + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Reviews + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Edit + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + +
+
diff --git a/src/app/pages/extra-components/accordion/accordion.component.scss b/src/app/pages/extra-components/accordion/accordion.component.scss new file mode 100644 index 00000000..9edaf6d1 --- /dev/null +++ b/src/app/pages/extra-components/accordion/accordion.component.scss @@ -0,0 +1,18 @@ +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .accordion-container { + nb-card { + margin-bottom: 1rem; + } + } + + @include media-breakpoint-down(md) { + .accordion-container { + margin-bottom: 3rem; + } + } +} diff --git a/src/app/pages/extra-components/accordion/accordion.component.ts b/src/app/pages/extra-components/accordion/accordion.component.ts new file mode 100644 index 00000000..e7aa4a10 --- /dev/null +++ b/src/app/pages/extra-components/accordion/accordion.component.ts @@ -0,0 +1,15 @@ +import { Component, ViewChild } from '@angular/core'; + +@Component({ + selector: 'ngx-accordion', + templateUrl: 'accordion.component.html', + styleUrls: ['accordion.component.scss'], +}) +export class AccordionComponent { + + @ViewChild('item') accordion; + + toggle() { + this.accordion.toggle(); + } +} diff --git a/src/app/pages/extra-components/alert/alert.component.html b/src/app/pages/extra-components/alert/alert.component.html new file mode 100644 index 00000000..83e6c80f --- /dev/null +++ b/src/app/pages/extra-components/alert/alert.component.html @@ -0,0 +1,46 @@ +
+
+ + Colored Alert + + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + + +
+ +
+ + Outline Alert + + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + + +
+ +
+ + Accent Alert + + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + + +
+
diff --git a/src/app/pages/extra-components/alert/alert.component.ts b/src/app/pages/extra-components/alert/alert.component.ts new file mode 100644 index 00000000..120ba6d3 --- /dev/null +++ b/src/app/pages/extra-components/alert/alert.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-alert', + templateUrl: 'alert.component.html', +}) +export class AlertComponent { + +} diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.html b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.html new file mode 100644 index 00000000..2e0cb17c --- /dev/null +++ b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.html @@ -0,0 +1,12 @@ + + +

NbCalendarKitModule is a module that contains multiple useful components for building custom calendars. + So if you think our calendars is not enough powerful for you just use calendar-kit and build your own calendar!

+ + + + + diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss new file mode 100644 index 00000000..beb36ccb --- /dev/null +++ b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss @@ -0,0 +1,13 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-card-header { + display: flex; + justify-content: center; + text-align: center; + + p { + width: 80%; + } + } +} diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts new file mode 100644 index 00000000..acfb9c26 --- /dev/null +++ b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { CalendarKitMonthCellComponent } from './month-cell/month-cell.component'; + +@Component({ + selector: 'ngx-calendar-kit', + templateUrl: 'calendar-kit.component.html', + styleUrls: ['calendar-kit.component.scss'], + entryComponents: [CalendarKitMonthCellComponent], +}) +export class CalendarKitFullCalendarShowcaseComponent { + month = new Date(); + monthCellComponent = CalendarKitMonthCellComponent; +} diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html new file mode 100644 index 00000000..1545e6db --- /dev/null +++ b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.html @@ -0,0 +1,7 @@ +

{{ title }}

+ + diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss new file mode 100644 index 00000000..21a02e7f --- /dev/null +++ b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss @@ -0,0 +1,5 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + padding: 1rem; +} diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts new file mode 100644 index 00000000..b0f3c225 --- /dev/null +++ b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.ts @@ -0,0 +1,27 @@ +import { Component, EventEmitter } from '@angular/core'; +import { + NbCalendarCell, + NbCalendarDayPickerComponent, + NbCalendarMonthModelService, + NbDateService, +} from '@nebular/theme'; +import { TranslationWidth } from '@angular/common'; + +@Component({ + selector: 'ngx-calendar-kit-month-cell', + styleUrls: ['month-cell.component.scss'], + templateUrl: 'month-cell.component.html', +}) +export class CalendarKitMonthCellComponent extends NbCalendarDayPickerComponent + implements NbCalendarCell { + select: EventEmitter = new EventEmitter(); + selectedValue: Date; + + constructor(private dateService: NbDateService, monthModel: NbCalendarMonthModelService) { + super(monthModel); + } + + get title() { + return this.dateService.getMonthName(this.date, TranslationWidth.Wide); + } +} diff --git a/src/app/pages/extra-components/calendar/calendar.component.html b/src/app/pages/extra-components/calendar/calendar.component.html new file mode 100644 index 00000000..28ded2bb --- /dev/null +++ b/src/app/pages/extra-components/calendar/calendar.component.html @@ -0,0 +1,23 @@ +
+
+

+ Selected date: {{ date | date }} +

+ +
+
+

+ Selected range: {{ range.start | date }} - {{ range.end | date }} +

+ +
+
+

+ Selected date: {{ date2 | date }} +

+ +
+
diff --git a/src/app/pages/extra-components/calendar/calendar.component.scss b/src/app/pages/extra-components/calendar/calendar.component.scss new file mode 100644 index 00000000..9b4a04ea --- /dev/null +++ b/src/app/pages/extra-components/calendar/calendar.component.scss @@ -0,0 +1,19 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .calendars-container { + margin-top: 2rem; + } + + h2 { + font-size: nb-theme(font-size-xlg); + text-align: center; + } + + .nebular-calendar { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 3rem; + } +} diff --git a/src/app/pages/extra-components/calendar/calendar.component.ts b/src/app/pages/extra-components/calendar/calendar.component.ts new file mode 100644 index 00000000..67e1c8bb --- /dev/null +++ b/src/app/pages/extra-components/calendar/calendar.component.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; +import { NbCalendarRange, NbDateService } from '@nebular/theme'; +import { DayCellComponent } from './day-cell/day-cell.component'; + +@Component({ + selector: 'ngx-calendar', + templateUrl: 'calendar.component.html', + styleUrls: ['calendar.component.scss'], + entryComponents: [DayCellComponent], +}) +export class CalendarComponent { + + date = new Date(); + date2 = new Date(); + range: NbCalendarRange; + dayCellComponent = DayCellComponent; + + constructor(protected dateService: NbDateService) { + this.range = { + start: this.dateService.addDay(this.monthStart, 3), + end: this.dateService.addDay(this.monthEnd, -3), + }; + } + + get monthStart(): Date { + return this.dateService.getMonthStart(new Date()); + } + + get monthEnd(): Date { + return this.dateService.getMonthEnd(new Date()); + } +} diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html new file mode 100644 index 00000000..8bd3809c --- /dev/null +++ b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.html @@ -0,0 +1,4 @@ +
+
{{ day }}
+ {{ (day + 100) * day }}$ +
diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss new file mode 100644 index 00000000..61449068 --- /dev/null +++ b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss @@ -0,0 +1,10 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + text-align: center; + + span { + font-size: 75%; + opacity: 0.75; + } +} diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts new file mode 100644 index 00000000..d6d821b3 --- /dev/null +++ b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { NbCalendarDayCellComponent } from '@nebular/theme'; + +@Component({ + selector: 'ngx-day-cell', + templateUrl: 'day-cell.component.html', + styleUrls: ['day-cell.component.scss'], + host: { '(click)': 'onClick()', 'class': 'day-cell' }, +}) +export class DayCellComponent extends NbCalendarDayCellComponent { +} diff --git a/src/app/pages/extra-components/chat/bot-replies.ts b/src/app/pages/extra-components/chat/bot-replies.ts new file mode 100644 index 00000000..23d8cd17 --- /dev/null +++ b/src/app/pages/extra-components/chat/bot-replies.ts @@ -0,0 +1,190 @@ +const botAvatar: string = 'https://i.ytimg.com/vi/Erqi5ckVoEo/hqdefault.jpg'; + +export const gifsLinks: string[] = [ + 'https://media.tenor.com/images/ac287fd06319e47b1533737662d5bfe8/tenor.gif', + 'https://i.gifer.com/no.gif', + 'https://techcrunch.com/wp-content/uploads/2015/08/safe_image.gif', + 'http://www.reactiongifs.com/r/wnd1.gif', +]; +export const imageLinks: string[] = [ + 'https://picsum.photos/320/240/?image=357', + 'https://picsum.photos/320/240/?image=556', + 'https://picsum.photos/320/240/?image=339', + 'https://picsum.photos/320/240/?image=387', + 'https://picsum.photos/320/240/?image=30', + 'https://picsum.photos/320/240/?image=271', +]; +const fileLink: string = 'http://google.com'; + +export const botReplies = [ + { + regExp: /([H,h]ey)|([H,h]i)/g, + answerArray: ['Hello!', 'Yes?', 'Yes, milord?', 'What can I do for you?'], + type: 'text', + reply: { + text: '', + reply: false, + date: new Date(), + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([H,h]elp)/g, + answerArray: [`No problem! Try sending a message containing word "hey", "image", + "gif", "file", "map", "quote", "file group" to see different message components`], + type: 'text', + reply: { + text: '', + reply: false, + date: new Date(), + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([I,i]mage)|(IMAGE)|([P,p]ic)|(Picture)/g, + answerArray: ['Hey look at this!', 'Ready to work', 'Yes, master.'], + type: 'pic', + reply: { + text: '', + reply: false, + date: new Date(), + type: 'file', + files: [ + { + url: '', + type: 'image/jpeg', + }, + ], + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([G,g]if)|(GIF)/g, + type: 'gif', + answerArray: ['No problem', 'Well done', 'You got it man'], + reply: { + text: '', + reply: false, + date: new Date(), + type: 'file', + files: [ + { + url: '', + type: 'image/gif', + }, + ], + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([F,f]ile group)|(FILE)/g, + type: 'group', + answerArray: ['Take it!', 'Job Done.', 'As you wish'], + reply: { + text: '', + reply: false, + date: new Date(), + type: 'file', + files: [ + { + url: fileLink, + icon: 'nb-compose', + }, + { + url: '', + type: 'image/gif', + }, + { + url: '', + type: 'image/jpeg', + }, + ], + icon: 'nb-compose', + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([F,f]ile)|(FILE)/g, + type: 'file', + answerArray: ['Take it!', 'Job Done.', 'As you wish'], + reply: { + text: '', + reply: false, + date: new Date(), + type: 'file', + files: [ + { + url: fileLink, + icon: 'nb-compose', + }, + ], + icon: 'nb-compose', + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([M,m]ap)|(MAP)/g, + type: 'map', + answerArray: ['Done.', 'My sight is yours.', 'I shall be your eyes.'], + reply: { + text: '', + reply: false, + date: new Date(), + type: 'map', + latitude: 53.914321, + longitude: 27.5998355, + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /([Q,q]uote)|(QUOTE)/g, + type: 'quote', + answerArray: ['Quoted!', 'Say no more.', 'I gladly obey.'], + reply: { + text: '', + reply: false, + date: new Date(), + type: 'quote', + quote: '', + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, + { + regExp: /(.*)/g, + answerArray: ['Hello there! Try typing "help"'], + type: 'text', + reply: { + text: '', + reply: false, + date: new Date(), + user: { + name: 'Bot', + avatar: botAvatar, + }, + }, + }, +]; diff --git a/src/app/pages/extra-components/chat/chat.component.html b/src/app/pages/extra-components/chat/chat.component.html new file mode 100644 index 00000000..a6baa5e9 --- /dev/null +++ b/src/app/pages/extra-components/chat/chat.component.html @@ -0,0 +1,39 @@ + + +

Here's a complete example build in a bot-like app. Type help to be able to receive different message types. + Enjoy the conversation and the beautiful UI.

+ + +
+
+ + + + + + +
+
+
+

Main features:

+
    +
  • different message types support (text, image, file, file group, map, etc)
    • +
  • drag & drop for images and files with preview
    • +
  • different UI styles
    • +
  • custom action buttons (coming soon)
    • +
+
+
+
+ + diff --git a/src/app/pages/extra-components/chat/chat.component.scss b/src/app/pages/extra-components/chat/chat.component.scss new file mode 100644 index 00000000..fff34685 --- /dev/null +++ b/src/app/pages/extra-components/chat/chat.component.scss @@ -0,0 +1,59 @@ +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + /deep/ nb-layout-column { + justify-content: center; + display: flex; + } + + nb-chat { + margin: 3rem auto 0; + width: 500px; + + } + + .chat-container { + margin-bottom: 2rem; + font-size: nb-theme(font-size-xlg); + + li { + padding-top: 1rem; + } + } + + .chart-description { + font-size: nb-theme(font-size-xlg); + text-align: center; + margin: 0 auto; + width: 52%; + } + + .chart-features { + margin-top: 2.75rem; + } + + @include media-breakpoint-down(xxl) { + nb-chat { + width: 400px; + } + } + + @include media-breakpoint-down(md) { + nb-chat { + width: 400px; + } + + .chart-description { + width: 90%; + } + } + + @include media-breakpoint-down(is) { + nb-chat { + width: 300px; + } + } +} diff --git a/src/app/pages/extra-components/chat/chat.component.ts b/src/app/pages/extra-components/chat/chat.component.ts new file mode 100644 index 00000000..fef91c6d --- /dev/null +++ b/src/app/pages/extra-components/chat/chat.component.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +import { ChatService } from './chat.service'; + +@Component({ + selector: 'ngx-chat', + templateUrl: 'chat.component.html', + styleUrls: ['chat.component.scss'], + providers: [ ChatService ], +}) +export class ChatComponent { + + messages: any[]; + + constructor(protected chatService: ChatService) { + this.messages = this.chatService.loadMessages(); + } + + sendMessage(event: any) { + const files = !event.files ? [] : event.files.map((file) => { + return { + url: file.src, + type: file.type, + icon: 'nb-compose', + }; + }); + + this.messages.push({ + text: event.message, + date: new Date(), + reply: true, + type: files.length ? 'file' : 'text', + files: files, + user: { + name: 'Jonh Doe', + avatar: 'https://i.gifer.com/no.gif', + }, + }); + const botReply = this.chatService.reply(event.message); + if (botReply) { + setTimeout(() => { this.messages.push(botReply); }, 500); + } + } +} diff --git a/src/app/pages/extra-components/chat/chat.service.ts b/src/app/pages/extra-components/chat/chat.service.ts new file mode 100644 index 00000000..493b4f4a --- /dev/null +++ b/src/app/pages/extra-components/chat/chat.service.ts @@ -0,0 +1,42 @@ +import { Injectable } from '@angular/core'; + +import { messages } from './messages'; +import { botReplies, gifsLinks, imageLinks } from './bot-replies'; + +@Injectable() +export class ChatService { + + + loadMessages() { + return messages; + } + + loadBotReplies() { + return botReplies; + } + + reply(message: string) { + const botReply: any = this.loadBotReplies() + .find((reply: any) => message.search(reply.regExp) !== -1); + + if (botReply.reply.type === 'quote') { + botReply.reply.quote = message; + } + + if (botReply.type === 'gif') { + botReply.reply.files[0].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)]; + } + + if (botReply.type === 'pic') { + botReply.reply.files[0].url = imageLinks[Math.floor(Math.random() * imageLinks.length)]; + } + + if (botReply.type === 'group') { + botReply.reply.files[1].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)]; + botReply.reply.files[2].url = imageLinks[Math.floor(Math.random() * imageLinks.length)]; + } + + botReply.reply.text = botReply.answerArray[Math.floor(Math.random() * botReply.answerArray.length)]; + return { ...botReply.reply }; + } +} diff --git a/src/app/pages/extra-components/chat/messages.ts b/src/app/pages/extra-components/chat/messages.ts new file mode 100644 index 00000000..14f9cd08 --- /dev/null +++ b/src/app/pages/extra-components/chat/messages.ts @@ -0,0 +1,85 @@ +export const messages = [ + { + text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + reply: false, + date: new Date(), + user: { + name: 'John Doe', + avatar: 'https://i.gifer.com/no.gif', + }, + }, + { + text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + reply: true, + date: new Date(), + user: { + name: 'John Doe', + avatar: 'https://i.gifer.com/no.gif', + }, + }, + { + text: 'Hello, how are you?', + reply: false, + date: new Date(), + user: { + name: 'John Doe', + avatar: '', + }, + }, + { + text: 'Hey looks at that pic I just found!', + reply: false, + date: new Date(), + type: 'file', + files: [ + { + url: 'https://i.gifer.com/no.gif', + type: 'image/jpeg', + icon: false, + }, + ], + user: { + name: 'John Doe', + avatar: '', + }, + }, + { + text: 'What do you mean by that?', + reply: false, + date: new Date(), + type: 'quote', + quote: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + user: { + name: 'John Doe', + avatar: '', + }, + }, + { + text: 'Attached is an archive I mentioned', + reply: true, + date: new Date(), + type: 'file', + files: [ + { + url: 'https://i.gifer.com/no.gif', + icon: 'nb-compose', + }, + ], + user: { + name: 'John Doe', + avatar: '', + }, + }, + { + text: 'Meet me there', + reply: false, + date: new Date(), + type: 'map', + latitude: 40.714728, + longitude: -73.998672, + user: { + name: 'John Doe', + avatar: '', + }, + }, +]; diff --git a/src/app/pages/extra-components/extra-components-routing.module.ts b/src/app/pages/extra-components/extra-components-routing.module.ts new file mode 100644 index 00000000..afefc4f6 --- /dev/null +++ b/src/app/pages/extra-components/extra-components-routing.module.ts @@ -0,0 +1,98 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ExtraComponentsComponent } from './extra-components.component'; +import { TreeComponent } from './tree/tree.component'; +import { AlertComponent } from './alert/alert.component'; +import { ProgressBarComponent } from './progress-bar/progress-bar.component'; +import { SpinnerComponent } from './spinner/spinner.component'; +import { CalendarComponent } from './calendar/calendar.component'; +import { ChatComponent } from './chat/chat.component'; +import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component'; +import { AccordionComponent } from './accordion/accordion.component'; +import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component'; +import { InfiniteListComponent } from './infinite-list/infinite-list.component'; +import { ListComponent } from './list/list.component'; +import { StepperComponent } from './stepper/stepper.component'; +import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component'; + +const routes: Routes = [{ + path: '', + component: ExtraComponentsComponent, + children: [ + { + path: 'calendar', + component: CalendarComponent, + }, + { + path: 'stepper', + component: StepperComponent, + }, + { + path: 'list', + component: ListComponent, + }, + { + path: 'infinite-list', + component: InfiniteListComponent, + }, + { + path: 'form-inputs', + component: NebularFormInputsComponent, + }, + { + path: 'accordion', + component: AccordionComponent, + }, + { + path: 'progress-bar', + component: ProgressBarComponent, + }, + { + path: 'spinner', + component: SpinnerComponent, + }, + { + path: 'alert', + component: AlertComponent, + }, + { + path: 'tree', + component: TreeComponent, + }, + { + path: 'tabs', + component: TabsComponent, + children: [ + { + path: '', + redirectTo: 'tab1', + pathMatch: 'full', + }, + { + path: 'tab1', + component: Tab1Component, + }, + { + path: 'tab2', + component: Tab2Component, + }, + ], + }, + { + path: 'calendar-kit', + component: CalendarKitFullCalendarShowcaseComponent, + }, + { + path: 'chat', + component: ChatComponent, + }, + ], +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ExtraComponentsRoutingModule { +} diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/extra-components/extra-components.component.ts similarity index 78% rename from src/app/pages/components/components.component.ts rename to src/app/pages/extra-components/extra-components.component.ts index 061d994f..f132ff83 100644 --- a/src/app/pages/components/components.component.ts +++ b/src/app/pages/extra-components/extra-components.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; `, }) -export class ComponentsComponent { +export class ExtraComponentsComponent { } diff --git a/src/app/pages/extra-components/extra-components.module.ts b/src/app/pages/extra-components/extra-components.module.ts new file mode 100644 index 00000000..dc1b10d5 --- /dev/null +++ b/src/app/pages/extra-components/extra-components.module.ts @@ -0,0 +1,91 @@ +import { NgModule } from '@angular/core'; + +import { TreeModule } from 'angular-tree-component'; +import { ToasterModule } from 'angular2-toaster'; + +import { ThemeModule } from '../../@theme/theme.module'; +import { ExtraComponentsRoutingModule } from './extra-components-routing.module'; + +// components +import { ExtraComponentsComponent } from './extra-components.component'; +import { TreeComponent } from './tree/tree.component'; +import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component'; +import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component'; +import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component'; +import { SpinnerColorComponent } from './spinner/spinner-color/spinner-color.component'; +import { SpinnerComponent } from './spinner/spinner.component'; +import { + InteractiveProgressBarComponent, +} from './progress-bar/interactive-progress-bar/interactive-progress-bar.component'; +import { ProgressBarComponent } from './progress-bar/progress-bar.component'; +import { AlertComponent } from './alert/alert.component'; +import { ChatComponent } from './chat/chat.component'; +import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component'; +import { CalendarComponent } from './calendar/calendar.component'; +import { DayCellComponent } from './calendar/day-cell/day-cell.component'; +import { StepperComponent } from './stepper/stepper.component'; +import { ListComponent } from './list/list.component'; +import { InfiniteListComponent } from './infinite-list/infinite-list.component'; +import { NewsPostComponent } from './infinite-list/news-post/news-post.component'; +import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component'; +import { AccordionComponent } from './accordion/accordion.component'; +import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component'; +import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component'; +import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component'; +import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component'; + +// service +import { NewsService } from './services/news.service'; + +const COMPONENTS = [ + ExtraComponentsComponent, + TreeComponent, + AlertComponent, + ProgressBarComponent, + InteractiveProgressBarComponent, + SpinnerComponent, + SpinnerColorComponent, + SpinnerSizesComponent, + SpinnerInButtonsComponent, + SpinnerInTabsComponent, + CalendarComponent, + DayCellComponent, + ChatComponent, + TabsComponent, + Tab1Component, + Tab2Component, + StepperComponent, + ListComponent, + InfiniteListComponent, + NewsPostComponent, + NewsPostPlaceholderComponent, + AccordionComponent, + NebularFormInputsComponent, + NebularSelectComponent, + CalendarKitFullCalendarShowcaseComponent, + CalendarKitMonthCellComponent, +]; + +const SERVICES = [ + NewsService, +]; + +const MODULES = [ + ThemeModule, + ExtraComponentsRoutingModule, + TreeModule, + ToasterModule.forRoot(), +]; + +@NgModule({ + imports: [ + ...MODULES, + ], + declarations: [ + ...COMPONENTS, + ], + providers: [ + ...SERVICES, + ], +}) +export class ExtraComponentsModule { } diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html new file mode 100644 index 00000000..601251c1 --- /dev/null +++ b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss new file mode 100644 index 00000000..ca85fb92 --- /dev/null +++ b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss @@ -0,0 +1,11 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .inputs-group-margin-bottom { + margin-bottom: 2rem; + + &:last-child { + margin: 0; + } + } +} diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts new file mode 100644 index 00000000..d9757c11 --- /dev/null +++ b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-nebular-form-inputs', + templateUrl: 'nebular-form-inputs.component.html', + styleUrls: ['nebular-form-inputs.component.scss'], +}) +export class NebularFormInputsComponent { + +} diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html new file mode 100644 index 00000000..487a96b2 --- /dev/null +++ b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html @@ -0,0 +1,344 @@ +
+
+ + Select + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Multiple Select + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Cleanable + + + Clean + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Placeholder + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Custom Label + + + + Selected: {{ selectedItem }} + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Select Groups + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 21 + Option 22 + Option 23 + Option 24 + + + + Option 31 + Option 32 + Option 33 + Option 34 + + + + +
+ +
+ + Disabled Select + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 21 + Option 22 + Option 23 + Option 24 + + + + Option 31 + Option 32 + Option 33 + Option 34 + + + + + +
+ +
+ + Select Shapes + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Select Sizes + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ +
+ + Select Statuses + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ + +
+ + Outline Select + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+ + +
+ + Select Colors + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + +
+
diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss new file mode 100644 index 00000000..43809838 --- /dev/null +++ b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss @@ -0,0 +1,15 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-select { + display: block; + width: 15rem; + } + + .select-group { + nb-select { + margin-right: 0.75rem; + margin-bottom: 1rem; + } + } +} diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts new file mode 100644 index 00000000..41cd29f6 --- /dev/null +++ b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-nebular-select', + templateUrl: 'nebular-select.component.html', + styleUrls: ['nebular-select.component.scss'], +}) +export class NebularSelectComponent { + + commonSelectedItem = '2'; + selectedItem; +} diff --git a/src/app/pages/extra-components/infinite-list/infinite-list.component.html b/src/app/pages/extra-components/infinite-list/infinite-list.component.html new file mode 100644 index 00000000..340275d4 --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/infinite-list.component.html @@ -0,0 +1,36 @@ +
+
+ + Own Scroll + + + + + + + + + +
+ +
+ + Window Scroll + + + + + + + + + +
+
diff --git a/src/app/pages/extra-components/infinite-list/infinite-list.component.scss b/src/app/pages/extra-components/infinite-list/infinite-list.component.scss new file mode 100644 index 00000000..ebc87160 --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/infinite-list.component.scss @@ -0,0 +1,11 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .infinite-cards { + nb-card { + &.own-scroll { + height: 50vh; + } + } + } +} diff --git a/src/app/pages/extra-components/infinite-list/infinite-list.component.ts b/src/app/pages/extra-components/infinite-list/infinite-list.component.ts new file mode 100644 index 00000000..fc9de880 --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/infinite-list.component.ts @@ -0,0 +1,41 @@ +import { Component } from '@angular/core'; +import { NewsService } from '../services/news.service'; + +@Component({ + selector: 'ngx-infinite-list', + templateUrl: 'infinite-list.component.html', + styleUrls: ['infinite-list.component.scss'], +}) +export class InfiniteListComponent { + + + firstCard = { + news: [], + placeholders: [], + loading: false, + pageToLoadNext: 1, + }; + secondCard = { + news: [], + placeholders: [], + loading: false, + pageToLoadNext: 1, + }; + pageSize = 10; + + constructor(private newsService: NewsService) {} + + loadNext(cardData) { + if (cardData.loading) { return; } + + cardData.loading = true; + cardData.placeholders = new Array(this.pageSize); + this.newsService.load(cardData.pageToLoadNext, this.pageSize) + .subscribe(nextNews => { + cardData.placeholders = []; + cardData.news.push(...nextNews); + cardData.loading = false; + cardData.pageToLoadNext++; + }); + } +} diff --git a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html new file mode 100644 index 00000000..47a3b304 --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss new file mode 100644 index 00000000..7179965a --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss @@ -0,0 +1,25 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + display: block; + + .title-placeholder { + height: 1.8rem; + margin-bottom: 0.5rem; + width: 80%; + } + + .text-placeholder { + height: 4rem; + margin-bottom: 1rem; + } + + .link-placeholder { + height: 1.25rem; + width: 5rem; + } + + [class$='placeholder'] { + background: rgba(nb-theme(layout-bg), 0.6); + } +} diff --git a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts new file mode 100644 index 00000000..cd6fbb3d --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts @@ -0,0 +1,12 @@ +import { Component, HostBinding } from '@angular/core'; + +@Component({ + selector: 'ngx-news-post-placeholder', + templateUrl: 'news-post-placeholder.component.html', + styleUrls: ['news-post-placeholder.component.scss'], +}) +export class NewsPostPlaceholderComponent { + + @HostBinding('attr.aria-label') + label = 'Loading'; +} diff --git a/src/app/pages/extra-components/infinite-list/news-post/news-post.component.html b/src/app/pages/extra-components/infinite-list/news-post/news-post.component.html new file mode 100644 index 00000000..af5449da --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/news-post/news-post.component.html @@ -0,0 +1,5 @@ + diff --git a/src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts b/src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts new file mode 100644 index 00000000..800f61b4 --- /dev/null +++ b/src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; + +import { NewsPost } from '../../services/news.service'; + +@Component({ + selector: 'ngx-news-post', + templateUrl: 'news-post.component.html', +}) +export class NewsPostComponent { + + @Input() post: NewsPost; +} diff --git a/src/app/pages/extra-components/list/fruits-list.ts b/src/app/pages/extra-components/list/fruits-list.ts new file mode 100644 index 00000000..7bae676a --- /dev/null +++ b/src/app/pages/extra-components/list/fruits-list.ts @@ -0,0 +1,13 @@ +export const fruits: string[] = [ + 'Lemons', + 'Raspberries', + 'Strawberries', + 'Blackberries', + 'Kiwis', + 'Grapefruit', + 'Avocado', + 'Watermelon', + 'Cantaloupe', + 'Oranges', + 'Peaches', +]; diff --git a/src/app/pages/extra-components/list/list.component.html b/src/app/pages/extra-components/list/list.component.html new file mode 100644 index 00000000..a11abe3c --- /dev/null +++ b/src/app/pages/extra-components/list/list.component.html @@ -0,0 +1,26 @@ +
+
+ + Some Fruits + + + + {{ fruit }} + + + + +
+ +
+ + Users + + + + + + + +
+
diff --git a/src/app/pages/extra-components/list/list.component.scss b/src/app/pages/extra-components/list/list.component.scss new file mode 100644 index 00000000..683ca368 --- /dev/null +++ b/src/app/pages/extra-components/list/list.component.scss @@ -0,0 +1,13 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .list-card { + nb-card-header { + border-bottom: none; + } + + nb-card-body { + padding: 0; + } + } +} diff --git a/src/app/pages/extra-components/list/list.component.ts b/src/app/pages/extra-components/list/list.component.ts new file mode 100644 index 00000000..8e5b29be --- /dev/null +++ b/src/app/pages/extra-components/list/list.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { fruits } from './fruits-list'; + +@Component({ + selector: 'ngx-list', + templateUrl: 'list.component.html', + styleUrls: ['list.component.scss'], +}) +export class ListComponent { + fruits = fruits; + + users: { name: string, title: string }[] = [ + { name: 'Carla Espinosa', title: 'Nurse' }, + { name: 'Bob Kelso', title: 'Doctor of Medicine' }, + { name: 'Janitor', title: 'Janitor' }, + { name: 'Perry Cox', title: 'Doctor of Medicine' }, + { name: 'Ben Sullivan', title: 'Carpenter and photographer' }, + ]; +} diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html new file mode 100644 index 00000000..11c26e51 --- /dev/null +++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.html @@ -0,0 +1,14 @@ + + Progress Bar Interactive + +
+ + + + + + + +
+ + diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss new file mode 100644 index 00000000..7d6cf13b --- /dev/null +++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss @@ -0,0 +1,12 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + .container { + display: flex; + align-items: center; + } + + nb-progress-bar { + flex: 1; + } +} diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts new file mode 100644 index 00000000..fc39042e --- /dev/null +++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-interactive-progress-bar', + templateUrl: 'interactive-progress-bar.component.html', + styleUrls: ['interactive-progress-bar.component.scss'], +}) +export class InteractiveProgressBarComponent { + + value = 25; + + setValue(newValue) { + this.value = Math.min(Math.max(newValue, 0), 100); + } + + get status(){ + if (this.value <= 25) { + return 'danger'; + } else if (this.value <= 50) { + return 'warning'; + } else if (this.value <= 75) { + return 'info'; + } else { + return 'success'; + } + } +} diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.html b/src/app/pages/extra-components/progress-bar/progress-bar.component.html new file mode 100644 index 00000000..2c06ec66 --- /dev/null +++ b/src/app/pages/extra-components/progress-bar/progress-bar.component.html @@ -0,0 +1,35 @@ +
+
+ + Progress Bar Status + + primary + info + success + warning + danger + + + +
+
+ + Progress Bar Size + + xs + sm + none + lg + xlg + + + + + Progress Bar Value + + + Custom value + + +
+
diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/progress-bar.component.scss new file mode 100644 index 00000000..3fdcd622 --- /dev/null +++ b/src/app/pages/extra-components/progress-bar/progress-bar.component.scss @@ -0,0 +1,7 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-progress-bar ~ nb-progress-bar { + margin-top: 1rem; + } +} diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.ts b/src/app/pages/extra-components/progress-bar/progress-bar.component.ts new file mode 100644 index 00000000..03f4fe6e --- /dev/null +++ b/src/app/pages/extra-components/progress-bar/progress-bar.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-progress-bar', + templateUrl: 'progress-bar.component.html', + styleUrls: ['progress-bar.component.scss'], +}) +export class ProgressBarComponent { + +} diff --git a/src/app/pages/extra-components/services/news.service.ts b/src/app/pages/extra-components/services/news.service.ts new file mode 100644 index 00000000..0ec96c5f --- /dev/null +++ b/src/app/pages/extra-components/services/news.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { delay, map } from 'rxjs/operators'; + +const TOTAL_PAGES = 7; + +export class NewsPost { + title: string; + link: string; + creator: string; + text: string; +} + +@Injectable() +export class NewsService { + + constructor(private http: HttpClient) {} + + load(page: number, pageSize: number): Observable { + const startIndex = ((page - 1) % TOTAL_PAGES) * pageSize; + + return this.http + .get('assets/data/news.json') + .pipe( + map(news => news.splice(startIndex, pageSize)), + delay(1500), + ); + } +} diff --git a/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html b/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html new file mode 100644 index 00000000..0996f840 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.html @@ -0,0 +1,41 @@ + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + diff --git a/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts b/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts new file mode 100644 index 00000000..b2faf323 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-color/spinner-color.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-spinner-color', + templateUrl: 'spinner-color.component.html', +}) + +export class SpinnerColorComponent { +} diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html new file mode 100644 index 00000000..58d137ce --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html @@ -0,0 +1,39 @@ + + Button With Spinner + +
+
+ + + + + +
+
+ + + + + +
+
+ + diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss new file mode 100644 index 00000000..f43d9b81 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss @@ -0,0 +1,12 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + button { + margin: 1rem; + } + + .size-medium-group { + margin-top: 2rem; + border-top: 1px solid nb-theme(separator); + } +} diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts new file mode 100644 index 00000000..5c84dc14 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-spinner-in-buttons', + templateUrl: 'spinner-in-buttons.component.html', + styleUrls: ['spinner-in-buttons.component.scss'], +}) + +export class SpinnerInButtonsComponent { + + loadingLargeGroup = false; + loadingMediumGroup = false; + + toggleLoadingLargeGroupAnimation() { + this.loadingLargeGroup = true; + + setTimeout(() => this.loadingLargeGroup = false, 3000); + } + + toggleLoadingMediumGroupAnimation() { + this.loadingMediumGroup = true; + + setTimeout(() => this.loadingMediumGroup = false, 3000); + } +} diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html new file mode 100644 index 00000000..bb9a73c7 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html @@ -0,0 +1,20 @@ + + + + +

+ A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object. +

+ + + +

+ Nebular's primary goal is to assemble together and connect the most awesome features and libraries + creating an efficient ecosystem to speed up and simplify the development. +

+ + + + + diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss new file mode 100644 index 00000000..17bf08e4 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss @@ -0,0 +1,7 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-tab { + padding: 1.25rem; + } +} diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts new file mode 100644 index 00000000..c9eb751f --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-spinner-in-tabs', + templateUrl: 'spinner-in-tabs.component.html', + styleUrls: ['spinner-in-tabs.component.scss'], +}) + +export class SpinnerInTabsComponent { + + loading = false; + + toggleLoadingAnimation() { + this.loading = true; + setTimeout(() => this.loading = false, 1000); + } +} diff --git a/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html b/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html new file mode 100644 index 00000000..ad2099fc --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.html @@ -0,0 +1,41 @@ + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + + + + + Some card content. + + diff --git a/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts b/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts new file mode 100644 index 00000000..fb968dcb --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-sizes/spinner-sizes.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-spinner-sizes', + templateUrl: 'spinner-sizes.component.html', +}) + +export class SpinnerSizesComponent { +} diff --git a/src/app/pages/extra-components/spinner/spinner.component.html b/src/app/pages/extra-components/spinner/spinner.component.html new file mode 100644 index 00000000..bd06ec5c --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner.component.html @@ -0,0 +1,14 @@ +
+
+ +
+
+ +
+
+ +
+
+ +
+
diff --git a/src/app/pages/extra-components/spinner/spinner.component.scss b/src/app/pages/extra-components/spinner/spinner.component.scss new file mode 100644 index 00000000..0ffe71f9 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner.component.scss @@ -0,0 +1,11 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + button { + margin: 1rem; + } + + /deep/ nb-spinner { + z-index: 999; + } +} diff --git a/src/app/pages/extra-components/spinner/spinner.component.ts b/src/app/pages/extra-components/spinner/spinner.component.ts new file mode 100644 index 00000000..95b183a5 --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-spinner', + templateUrl: 'spinner.component.html', + styleUrls: ['spinner.component.scss'], +}) + +export class SpinnerComponent { + + loading = false; + + toggleLoadingAnimation() { + this.loading = true; + setTimeout(() => this.loading = false, 3000); + } +} diff --git a/src/app/pages/extra-components/stepper/stepper.component.html b/src/app/pages/extra-components/stepper/stepper.component.html new file mode 100644 index 00000000..86e0116c --- /dev/null +++ b/src/app/pages/extra-components/stepper/stepper.component.html @@ -0,0 +1,143 @@ + + + + + First step +

Step content #1

+ + + + + Second step +

Step content #2

+ + + + +

Step content #3

+ + + + + Fourth step +

Step content #4

+ + + + + + + +
+
+ + + + +
+

+ Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle, + my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang. +

+
+ +
+ +
+ + +
+

+ Pellentesque we gonna chung tortor. + Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor. + Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor. +

+
+ +
+ + +
+ + +
+

+ Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot. +

+
+ +
+ + +
+ + +
+

Wizard completed!

+ +
+ + + + +
+ +
+ + + + +

Step content #1

+

+ Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, + sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis + viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel + placerat quis, lobortis in ligula. +

+ + + + +

Step content #2

+

+ Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam + sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui + eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. +

+ + + + +

Step content #3

+

+ Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, + sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis + viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel + placerat quis, lobortis in ligula. +

+

+ Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam + sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui + eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. +

+ + + + +

Step content #4

+

+ Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, + sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis + viverra ex. +

+ + + + + + +
+
diff --git a/src/app/pages/extra-components/stepper/stepper.component.scss b/src/app/pages/extra-components/stepper/stepper.component.scss new file mode 100644 index 00000000..e596439d --- /dev/null +++ b/src/app/pages/extra-components/stepper/stepper.component.scss @@ -0,0 +1,12 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + /deep/ nb-stepper .step-content { + text-align: center; + + button { + cursor: pointer; + margin: 0.5rem; + } + } +} diff --git a/src/app/pages/extra-components/stepper/stepper.component.ts b/src/app/pages/extra-components/stepper/stepper.component.ts new file mode 100644 index 00000000..c9a7212c --- /dev/null +++ b/src/app/pages/extra-components/stepper/stepper.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'ngx-stepper', + templateUrl: 'stepper.component.html', + styleUrls: ['stepper.component.scss'], +}) +export class StepperComponent implements OnInit { + + firstForm: FormGroup; + secondForm: FormGroup; + thirdForm: FormGroup; + + constructor(private fb: FormBuilder) { + } + + ngOnInit() { + this.firstForm = this.fb.group({ + firstCtrl: ['', Validators.required], + }); + + this.secondForm = this.fb.group({ + secondCtrl: ['', Validators.required], + }); + + this.thirdForm = this.fb.group({ + thirdCtrl: ['', Validators.required], + }); + } + + onFirstSubmit() { + this.firstForm.markAsDirty(); + } + + onSecondSubmit() { + this.secondForm.markAsDirty(); + } + + onThirdSubmit() { + this.thirdForm.markAsDirty(); + } +} diff --git a/src/app/pages/ui-features/tabs/tabs.component.html b/src/app/pages/extra-components/tabs/tabs.component.html similarity index 100% rename from src/app/pages/ui-features/tabs/tabs.component.html rename to src/app/pages/extra-components/tabs/tabs.component.html diff --git a/src/app/pages/ui-features/tabs/tabs.component.scss b/src/app/pages/extra-components/tabs/tabs.component.scss similarity index 100% rename from src/app/pages/ui-features/tabs/tabs.component.scss rename to src/app/pages/extra-components/tabs/tabs.component.scss diff --git a/src/app/pages/ui-features/tabs/tabs.component.ts b/src/app/pages/extra-components/tabs/tabs.component.ts similarity index 91% rename from src/app/pages/ui-features/tabs/tabs.component.ts rename to src/app/pages/extra-components/tabs/tabs.component.ts index 9f60d3f5..edb783ff 100644 --- a/src/app/pages/ui-features/tabs/tabs.component.ts +++ b/src/app/pages/extra-components/tabs/tabs.component.ts @@ -32,11 +32,11 @@ export class TabsComponent { tabs: any[] = [ { title: 'Route tab #1', - route: '/pages/ui-features/tabs/tab1', + route: '/pages/extra-components/tabs/tab1', }, { title: 'Route tab #2', - route: '/pages/ui-features/tabs/tab2', + route: '/pages/extra-components/tabs/tab2', }, ]; diff --git a/src/app/pages/components/tree/tree.component.html b/src/app/pages/extra-components/tree/tree.component.html similarity index 100% rename from src/app/pages/components/tree/tree.component.html rename to src/app/pages/extra-components/tree/tree.component.html diff --git a/src/app/pages/components/tree/tree.component.scss b/src/app/pages/extra-components/tree/tree.component.scss similarity index 100% rename from src/app/pages/components/tree/tree.component.scss rename to src/app/pages/extra-components/tree/tree.component.scss diff --git a/src/app/pages/components/tree/tree.component.ts b/src/app/pages/extra-components/tree/tree.component.ts similarity index 100% rename from src/app/pages/components/tree/tree.component.ts rename to src/app/pages/extra-components/tree/tree.component.ts diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.html b/src/app/pages/forms/buttons/action-groups/action-groups.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/action-groups/action-groups.component.html rename to src/app/pages/forms/buttons/action-groups/action-groups.component.html diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss b/src/app/pages/forms/buttons/action-groups/action-groups.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss rename to src/app/pages/forms/buttons/action-groups/action-groups.component.scss diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts b/src/app/pages/forms/buttons/action-groups/action-groups.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts rename to src/app/pages/forms/buttons/action-groups/action-groups.component.ts diff --git a/src/app/pages/forms/buttons/button-elements/button-elements.component.html b/src/app/pages/forms/buttons/button-elements/button-elements.component.html new file mode 100644 index 00000000..e8c50a73 --- /dev/null +++ b/src/app/pages/forms/buttons/button-elements/button-elements.component.html @@ -0,0 +1,17 @@ + + Button Elements + +
+ +
+
+ +
+
+ +
+
+ Link +
+ + diff --git a/src/app/pages/forms/buttons/button-elements/button-elements.component.scss b/src/app/pages/forms/buttons/button-elements/button-elements.component.scss new file mode 100644 index 00000000..4a83e353 --- /dev/null +++ b/src/app/pages/forms/buttons/button-elements/button-elements.component.scss @@ -0,0 +1,15 @@ +@import '../../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; + +@include nb-install-component() { + + nb-card-body { + padding: 0 1.25rem 1.25rem 0; + display: flex; + flex-wrap: wrap; + } + + .button-container { + margin: 1.25rem 0 0 1.25rem; + } +} diff --git a/src/app/pages/forms/buttons/button-elements/button-elements.component.ts b/src/app/pages/forms/buttons/button-elements/button-elements.component.ts new file mode 100644 index 00000000..cb92b2e8 --- /dev/null +++ b/src/app/pages/forms/buttons/button-elements/button-elements.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-button-elements', + styleUrls: ['./button-elements.component.scss'], + templateUrl: './button-elements.component.html', +}) +export class ButtonElementsComponent { + + onClick() { + } +} diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html new file mode 100644 index 00000000..88199290 --- /dev/null +++ b/src/app/pages/forms/buttons/buttons.component.html @@ -0,0 +1,16 @@ +
+
+ + + +
+
+ + + +
+
+ + +
+
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss new file mode 100644 index 00000000..c972d13f --- /dev/null +++ b/src/app/pages/forms/buttons/buttons.component.scss @@ -0,0 +1,103 @@ +@import '../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + /deep/ { + $button-size: 50px; + + .container-title { + color: nb-theme(color-fg); + font-family: nb-theme(font-secondary); + margin-bottom: 0.5rem; + } + + .header { + color: nb-theme(color-fg-header); + font-size: 0.875rem; + } + + .subheader { + font-size: 0.75rem; + font-weight: nb-theme(font-weight-light); + color: nb-theme(color-fg); + } + + .btn-demo { + width: 180px; + } + + .state-container { + display: flex; + + &:not(:last-child) { + margin-bottom: 1rem; + } + + .state-value { + width: $button-size; + height: $button-size; + border-radius: nb-theme(btn-border-radius); + + @include nb-for-theme(corporate) { + border-radius: nb-theme(btn-semi-round-border-radius); + } + } + + .state-details { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 1rem; + margin-right: 1rem; + height: $button-size; + } + } + + .example-container { + @include nb-ltr(padding-right, 0); + @include nb-rtl(padding-left, 0); + } + + .example-container .container-btn { + margin-bottom: 1.5rem; + } + + .block-level-buttons .btn-group { + margin-bottom: 1rem; + } + } + + @include media-breakpoint-down(is) { + ngx-default-buttons /deep/ nb-card-header { + flex-direction: column; + align-items: left; + + span { + margin-bottom: 1rem; + } + } + } + + @include media-breakpoint-down(xs) { + + /deep/.icon-buttons .icon-button-examples { + button { + @include nb-ltr(margin-right, 1rem); + @include nb-rtl(margin-left, 1rem); + } + } + + ngx-default-buttons /deep/ nb-card-header { + flex-direction: column; + margin-bottom: 0.5rem; + } + + ngx-block-level-buttons /deep/ { + .btn-primary { + padding: 0.75rem 1rem; + } + } + } +} diff --git a/src/app/pages/forms/buttons/buttons.component.ts b/src/app/pages/forms/buttons/buttons.component.ts new file mode 100644 index 00000000..c632c869 --- /dev/null +++ b/src/app/pages/forms/buttons/buttons.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-buttons', + styleUrls: ['./buttons.component.scss'], + templateUrl: './buttons.component.html', +}) +export class ButtonsComponent { +} diff --git a/src/app/pages/forms/buttons/buttons.module.ts b/src/app/pages/forms/buttons/buttons.module.ts new file mode 100644 index 00000000..c1bc5488 --- /dev/null +++ b/src/app/pages/forms/buttons/buttons.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core'; + +import { ThemeModule } from '../../../@theme/theme.module'; +import { DefaultButtonsComponent } from './default-buttons/default-buttons.component'; +import { HeroButtonComponent } from './hero-buttons/hero-buttons.component'; +import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component'; +import { SizeButtonsComponent } from './size-buttons/size-buttons.component'; +import { ButtonsComponent } from './buttons.component'; +import { ActionGroupsComponent } from './action-groups/action-groups.component'; +import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component'; +import { OutlineButtonsComponent } from './outline-buttons/outline-buttons.component'; +import { ButtonElementsComponent } from './button-elements/button-elements.component'; + +const components = [ + ButtonsComponent, + DefaultButtonsComponent, + OutlineButtonsComponent, + HeroButtonComponent, + ShapeButtonsComponent, + SizeButtonsComponent, + ActionGroupsComponent, + LabeledActionsGroupComponent, + ButtonElementsComponent, +]; + +@NgModule({ + imports: [ + ThemeModule, + ], + exports: [ + ...components, + ], + declarations: [ + ...components, + ], + providers: [], +}) +export class ButtonsModule { } diff --git a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.html b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.html new file mode 100644 index 00000000..022e624d --- /dev/null +++ b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.html @@ -0,0 +1,44 @@ + + + Default Buttons + + +
+
+
+ {{ b.containerTitle }} +
+
+ +
+
+
+
+
+ Default + {{ b.default }} +
+
+
+
+
+ Hover + 14% white +
+
+
+
+
+ Active + 14% black +
+
+
+
+
+ + diff --git a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss new file mode 100644 index 00000000..5ed3e93e --- /dev/null +++ b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss @@ -0,0 +1,130 @@ +@import '../../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + + nb-card-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + nb-card-body { + padding-bottom: 0; + } + + .example-container { + margin-bottom: 1.5rem; + } + + .primary-container { + .original { + background-color: nb-theme(btn-primary-bg); + } + .hover { + @include btn-primary-hover(); + } + .active { + @include btn-primary-active(); + } + } + + .primary-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-primary-bg); + } + + .success-container { + .original { + background-color: nb-theme(btn-success-bg); + } + .hover { + @include btn-success-hover(); + } + .active { + @include btn-success-active(); + } + } + + .success-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-success-bg); + } + + .warning-container { + .original { + background-color: nb-theme(btn-warning-bg); + } + .hover { + @include btn-warning-hover(); + } + .active { + @include btn-warning-active(); + } + } + + .warning-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-warning-bg); + } + + .info-container { + .original { + background-color: nb-theme(btn-info-bg); + } + .hover { + @include btn-info-hover(); + } + .active { + @include btn-info-active(); + } + } + + .info-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-info-bg); + } + + .danger-container { + .original { + background-color: nb-theme(btn-danger-bg); + } + .hover { + @include btn-danger-hover(); + } + .active { + @include btn-danger-active(); + } + } + + .danger-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-danger-bg); + } + + .secondary-container { + .original { + border: 2px solid nb-theme(btn-secondary-border); + } + .hover { + @include btn-secondary-hover(); + } + .active { + @include btn-secondary-active(); + } + } + + .secondary-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-secondary-border); + } + + @include media-breakpoint-up(xxl) { + .example-container { + flex: 0 0 20%; + max-width: 20%; + } + } +} diff --git a/src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts new file mode 100644 index 00000000..3a20485b --- /dev/null +++ b/src/app/pages/forms/buttons/default-buttons/default-buttons.component.ts @@ -0,0 +1,47 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-default-buttons', + styleUrls: ['./default-buttons.component.scss'], + templateUrl: './default-buttons.component.html', +}) +export class DefaultButtonsComponent { + + buttons = [ + { + status: 'primary', + container: 'primary-container', + containerTitle: 'Primary Button', + title: 'Primary', + default: '#7659ff', + }, + { + status: 'warning', + container: 'warning-container', + containerTitle: 'Warning Button', + title: 'Warning', + default: '#ffcb17', + }, + { + status: 'success', + container: 'success-container', + containerTitle: 'Success Button', + title: 'Success', + default: '#00d977', + }, + { + status: 'info', + container: 'info-container', + containerTitle: 'Info Button', + title: 'Info', + default: '#0088ff', + }, + { + status: 'danger', + container: 'danger-container', + containerTitle: 'Danger Button', + title: 'Danger', + default: '#ff386a', + }, + ]; +} diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html new file mode 100644 index 00000000..6d38ba52 --- /dev/null +++ b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.html @@ -0,0 +1,72 @@ + + Hero Buttons + +
+
+
+ {{ hb.title }} +
+
+ +
+
+
+
+
+ Border + {{ hb[themeName].border }} +
+
+
+
+
+ Color + {{ hb[themeName].color }} +
+
+
+
+
+ Linear Gradient + {{ hb[themeName].gradientLeft }} + {{ hb[themeName].gradientRight }} +
+
+
+
+
+ Bevel + 0 3px 0 0 + {{ hb[themeName].bevel }} +
+
+ No Bevel +
+
+
+
+
+ Shadow + 0 4px 10px 0 + {{ hb[themeName].shadow }} +
+
+ No Shadow +
+
+
+
+
+ Glow + {{ hb[themeName].glow.params }} + {{ hb[themeName].glow.color }} +
+
+ No Glow +
+
+
+
+
+ + diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss new file mode 100644 index 00000000..3ec8f283 --- /dev/null +++ b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss @@ -0,0 +1,144 @@ +@import '../../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + + nb-card-body { + padding-bottom: 0; + } + + .none { + position: relative; + transform: rotate(45deg); + + &::before, &::after { + position: absolute; + content: ''; + background: nb-theme(form-control-border-color); + } + + &::before { + left: 50%; + top: 10%; + transform: translateX(-50%); + width: 1px; + height: 80%; + } + + &::after { + top: 50%; + left: 10%; + transform: translateY(-50%); + height: 1px; + width: 80%; + } + } + + .shadow { + box-shadow: nb-theme(btn-hero-shadow); + } + + .primary-container { + .color { + background-color: nb-theme(color-primary); + } + .gradient { + @include btn-hero-primary-gradient(); + } + .glow { + box-shadow: btn-hero-primary-glow(); + } + .bevel { + box-shadow: btn-hero-primary-bevel(); + } + } + + .warning-container { + .color { + background-color: nb-theme(color-warning); + } + .gradient { + @include btn-hero-warning-gradient(); + } + .glow { + box-shadow: btn-hero-warning-glow(); + } + .bevel { + box-shadow: btn-hero-warning-bevel(); + } + } + + .success-container { + .color { + background-color: nb-theme(color-success); + } + .gradient { + @include btn-hero-success-gradient(); + } + .glow { + box-shadow: btn-hero-success-glow(); + } + .bevel { + box-shadow: btn-hero-success-bevel(); + } + } + + .info-container { + .color { + background-color: nb-theme(color-info); + } + .gradient { + @include btn-hero-info-gradient(); + } + .glow { + box-shadow: btn-hero-info-glow(); + } + .bevel { + box-shadow: btn-hero-info-bevel(); + } + } + + .danger-container { + .color { + background-color: nb-theme(color-danger); + } + .gradient { + @include btn-hero-danger-gradient(); + } + .glow { + box-shadow: btn-hero-danger-glow(); + } + .bevel { + box-shadow: btn-hero-danger-bevel(); + } + } + + .secondary-container { + .color { + background-color: nb-theme(btn-secondary-bg); + } + .border { + color: nb-theme(btn-secondary-color); + border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border); + } + .glow { + box-shadow: btn-hero-secondary-glow(); + } + .bevel { + box-shadow: btn-hero-secondary-bevel(); + } + } + + .example-container { + margin-bottom: 1.5rem; + } + + @include media-breakpoint-up(xxl) { + .example-container { + flex: 0 0 20%; + max-width: 20%; + } + } +} diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts new file mode 100644 index 00000000..19a0c268 --- /dev/null +++ b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.ts @@ -0,0 +1,166 @@ +import { Component, OnDestroy } from '@angular/core'; +import { NbThemeService } from '@nebular/theme'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'ngx-hero-buttons', + styleUrls: ['./hero-buttons.component.scss'], + templateUrl: './hero-buttons.component.html', +}) +export class HeroButtonComponent implements OnDestroy { + + themeName = 'default'; + settings: Array; + themeSubscription: Subscription; + + constructor(private themeService: NbThemeService) { + this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => { + this.themeName = theme.name; + this.init(theme.variables); + }); + } + + init(colors: any) { + this.settings = [ + { + status: 'primary', + container: 'primary-container', + title: 'Primary Button', + buttonTitle: 'Primary', + default: { + gradientLeft: `adjust-hue(${colors.primary}, 20deg)`, + gradientRight: colors.primary, + }, + corporate: { + color: colors.primary, + glow: { + params: '0 0 20px 0', + color: 'rgba (115, 161, 255, 0.5)', + }, + }, + cosmic: { + gradientLeft: `adjust-hue(${colors.primary}, 20deg)`, + gradientRight: colors.primary, + bevel: `shade(${colors.primary}, 14%)`, + shadow: 'rgba (6, 7, 64, 0.5)', + glow: { + params: '0 2px 12px 0', + color: `adjust-hue(${colors.primary}, 10deg)`, + }, + }, + }, + { + status: 'warning', + container: 'warning-container', + title: 'Warning Button', + buttonTitle: 'Warning', + default: { + gradientLeft: `adjust-hue(${colors.warning}, 10deg)`, + gradientRight: colors.warning, + }, + corporate: { + color: colors.warning, + glow: { + params: '0 0 20px 0', + color: 'rgba (256, 163, 107, 0.5)', + }, + }, + cosmic: { + gradientLeft: `adjust-hue(${colors.warning}, 10deg)`, + gradientRight: colors.warning, + bevel: `shade(${colors.warning}, 14%)`, + shadow: 'rgba (33, 7, 77, 0.5)', + glow: { + params: '0 2px 12px 0', + color: `adjust-hue(${colors.warning}, 5deg)`, + }, + }, + }, + { + status: 'success', + container: 'success-container', + title: 'Success Button', + buttonTitle: 'Success', + default: { + gradientLeft: `adjust-hue(${colors.success}, 20deg)`, + gradientRight: colors.success, + }, + corporate: { + color: colors.success, + glow: { + params: '0 0 20px 0', + color: 'rgba (93, 207, 227, 0.5)', + }, + }, + cosmic: { + gradientLeft: `adjust-hue(${colors.success}, 20deg)`, + gradientRight: colors.success, + bevel: `shade(${colors.success}, 14%)`, + shadow: 'rgba (33, 7, 77, 0.5)', + glow: { + params: '0 2px 12px 0', + color: `adjust-hue(${colors.success}, 10deg)`, + }, + }, + }, + { + status: 'info', + container: 'info-container', + title: 'Info Button', + buttonTitle: 'Info', + default: { + gradientLeft: `adjust-hue(${colors.info}, -10deg)`, + gradientRight: colors.info, + }, + corporate: { + color: colors.info, + glow: { + params: '0 0 20px 0', + color: 'rgba (186, 127, 236, 0.5)', + }, + }, + cosmic: { + gradientLeft: `adjust-hue(${colors.info}, -10deg)`, + gradientRight: colors.info, + bevel: `shade(${colors.info}, 14%)`, + shadow: 'rgba (33, 7, 77, 0.5)', + glow: { + params: '0 2px 12px 0', + color: `adjust-hue(${colors.info}, -5deg)`, + }, + }, + }, + { + status: 'danger', + container: 'danger-container', + title: 'Danger Button', + buttonTitle: 'Danger', + default: { + gradientLeft: `adjust-hue(${colors.danger}, -20deg)`, + gradientRight: colors.danger, + }, + corporate: { + color: colors.danger, + glow: { + params: '0 0 20px 0', + color: 'rgba (255, 107, 131, 0.5)', + }, + }, + cosmic: { + gradientLeft: `adjust-hue(${colors.danger}, -20deg)`, + gradientRight: colors.danger, + bevel: `shade(${colors.danger}, 14%)`, + shadow: 'rgba (33, 7, 77, 0.5)', + glow: { + params: '0 2px 12px 0', + color: `adjust-hue(${colors.danger}, -10deg)`, + }, + }, + }, + ]; + } + + ngOnDestroy() { + this.themeSubscription.unsubscribe(); + } +} diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html similarity index 100% rename from src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html rename to src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.html diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss similarity index 100% rename from src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss rename to src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.scss diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.ts b/src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts similarity index 100% rename from src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.ts rename to src/app/pages/forms/buttons/labeled-actions-group/labeled-actions-group.component.ts diff --git a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html new file mode 100644 index 00000000..2b031f4b --- /dev/null +++ b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.html @@ -0,0 +1,45 @@ + + + Default Buttons + + +
+
+
+ {{ b.containerTitle }} +
+
+ +
+
+
+
+
+ Default + {{ b.default }} +
+
+
+
+
+ Hover + 14% white +
+
+
+
+
+ Active + 14% black +
+
+
+
+
+ + diff --git a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss new file mode 100644 index 00000000..5ed3e93e --- /dev/null +++ b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss @@ -0,0 +1,130 @@ +@import '../../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + + nb-card-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + nb-card-body { + padding-bottom: 0; + } + + .example-container { + margin-bottom: 1.5rem; + } + + .primary-container { + .original { + background-color: nb-theme(btn-primary-bg); + } + .hover { + @include btn-primary-hover(); + } + .active { + @include btn-primary-active(); + } + } + + .primary-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-primary-bg); + } + + .success-container { + .original { + background-color: nb-theme(btn-success-bg); + } + .hover { + @include btn-success-hover(); + } + .active { + @include btn-success-active(); + } + } + + .success-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-success-bg); + } + + .warning-container { + .original { + background-color: nb-theme(btn-warning-bg); + } + .hover { + @include btn-warning-hover(); + } + .active { + @include btn-warning-active(); + } + } + + .warning-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-warning-bg); + } + + .info-container { + .original { + background-color: nb-theme(btn-info-bg); + } + .hover { + @include btn-info-hover(); + } + .active { + @include btn-info-active(); + } + } + + .info-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-info-bg); + } + + .danger-container { + .original { + background-color: nb-theme(btn-danger-bg); + } + .hover { + @include btn-danger-hover(); + } + .active { + @include btn-danger-active(); + } + } + + .danger-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-danger-bg); + } + + .secondary-container { + .original { + border: 2px solid nb-theme(btn-secondary-border); + } + .hover { + @include btn-secondary-hover(); + } + .active { + @include btn-secondary-active(); + } + } + + .secondary-container.outline .original { + background-color: transparent; + border: 2px solid nb-theme(btn-secondary-border); + } + + @include media-breakpoint-up(xxl) { + .example-container { + flex: 0 0 20%; + max-width: 20%; + } + } +} diff --git a/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts new file mode 100644 index 00000000..9b16982d --- /dev/null +++ b/src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.ts @@ -0,0 +1,47 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-outline-buttons', + styleUrls: ['./outline-buttons.component.scss'], + templateUrl: './outline-buttons.component.html', +}) +export class OutlineButtonsComponent { + + buttons = [ + { + status: 'primary', + container: 'primary-container outline', + containerTitle: 'Primary Button', + title: 'Primary', + default: '#7659ff', + }, + { + status: 'warning', + container: 'warning-container outline', + containerTitle: 'Warning Button', + title: 'Warning', + default: '#ffcb17', + }, + { + status: 'success', + container: 'success-container outline', + containerTitle: 'Success Button', + title: 'Success', + default: '#00d977', + }, + { + status: 'info', + container: 'info-container', + containerTitle: 'Info Button', + title: 'Info', + default: '#0088ff', + }, + { + status: 'danger', + container: 'danger-container outline', + containerTitle: 'Danger Button', + title: 'Danger', + default: '#ff386a', + }, + ]; +} diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html new file mode 100644 index 00000000..880da474 --- /dev/null +++ b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.html @@ -0,0 +1,43 @@ + + Button Shapes + +
+
+ Rectangle Button +
+
+ Border radius: + 4px +
+
+ +
+
+ +
+
+ Semi-round Button +
+
+ Border radius: + 12px +
+
+ +
+
+ +
+
+ Rounded Button +
+
+ Border radius: + round +
+
+ +
+
+ + diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss new file mode 100644 index 00000000..996e6821 --- /dev/null +++ b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.scss @@ -0,0 +1,30 @@ +@import '../../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; + +@include nb-install-component() { + + nb-card-body { + padding: 0 0 29px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .shape-container { + margin: 1.25rem 1.25rem 0; + } + + .container-title { + margin-bottom: 0.25rem; + } + + .subheader { + margin-bottom: 1rem; + font-size: 0.875rem; + + span:nth-child(2) { + color: nb-theme(color-fg-heading); + font-weight: nb-theme(font-weight-bold); + } + } +} diff --git a/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts new file mode 100644 index 00000000..dde928d8 --- /dev/null +++ b/src/app/pages/forms/buttons/shape-buttons/shape-buttons.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-shape-buttons', + styleUrls: ['./shape-buttons.component.scss'], + templateUrl: './shape-buttons.component.html', +}) +export class ShapeButtonsComponent { +} diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.html b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.html new file mode 100644 index 00000000..c7699695 --- /dev/null +++ b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.html @@ -0,0 +1,50 @@ + + Button Sizes + + +
+
+ Large Button +
+
+ 0.875rem 1.75rem +
+
+ +
+
+
+
+ Medium Button +
+
+ 0.75rem 1.5rem +
+
+ +
+
+
+
+ Small Button +
+
+ 0.675rem 1.5rem +
+
+ +
+
+
+
+ X-Small Button +
+
+ 0.5rem 1.25rem +
+
+ +
+
+ + diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss new file mode 100644 index 00000000..67d7ae28 --- /dev/null +++ b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.scss @@ -0,0 +1,26 @@ +@import '../../../../@theme/styles/themes'; +@import '~@nebular/bootstrap/styles/buttons'; + +@include nb-install-component() { + + nb-card-body { + padding: 0 1.25rem 1.25rem 0; + display: flex; + flex-wrap: wrap; + } + + .container-title { + margin-bottom: 0.25rem; + } + + .size-container { + margin: 1.25rem 0 0 1.25rem; + } + + .subheader { + margin-bottom: 0.75rem; + font-size: 0.875rem; + font-weight: nb-theme(font-weight-bolder); + color: nb-theme(color-fg-heading); + } +} diff --git a/src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts new file mode 100644 index 00000000..bdc9bb33 --- /dev/null +++ b/src/app/pages/forms/buttons/size-buttons/size-buttons.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-size-buttons', + styleUrls: ['./size-buttons.component.scss'], + templateUrl: './size-buttons.component.html', +}) +export class SizeButtonsComponent { +} diff --git a/src/app/pages/forms/datepicker/datepicker.component.html b/src/app/pages/forms/datepicker/datepicker.component.html new file mode 100644 index 00000000..bf7f738e --- /dev/null +++ b/src/app/pages/forms/datepicker/datepicker.component.html @@ -0,0 +1,32 @@ +
+
+ + Common Datepicker + + + + + +
+ +
+ + Datepicker With Rang + + + + + +
+
+ + Datepicker With Disabled Min Max Values + + + + + +
+
diff --git a/src/app/pages/forms/datepicker/datepicker.component.scss b/src/app/pages/forms/datepicker/datepicker.component.scss new file mode 100644 index 00000000..96f55076 --- /dev/null +++ b/src/app/pages/forms/datepicker/datepicker.component.scss @@ -0,0 +1,12 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-card-body { + display: flex; + justify-content: space-between; + + input { + width: 100%; + } + } +} diff --git a/src/app/pages/forms/datepicker/datepicker.component.ts b/src/app/pages/forms/datepicker/datepicker.component.ts new file mode 100644 index 00000000..79ddec0b --- /dev/null +++ b/src/app/pages/forms/datepicker/datepicker.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { NbDateService } from '@nebular/theme'; + +@Component({ + selector: 'ngx-datepicker', + templateUrl: 'datepicker.component.html', + styleUrls: ['datepicker.component.scss'], +}) +export class DatepickerComponent { + + min: Date; + max: Date; + + constructor(protected dateService: NbDateService) { + this.min = this.dateService.addDay(this.dateService.today(), -5); + this.max = this.dateService.addDay(this.dateService.today(), 5); + } +} diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html index 6331c2b7..b81ce934 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.html +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -4,161 +4,71 @@ Default Inputs
- +
- +
- +
- +
-
- -
-
- - A block of help text that breaks into a new line and may extend beyond one line. - +
+
- +
- + +
+
+ +
+
+
- +
- +
- - - - - Input Groups - -
- @ - -
- -
- - - - - - - -
-
- - - - -
-
-
- -
    -
  • Action
    • -
  • Another action
    • -
  • Something else here
    • - -
  • Separated link
    • -
-
- -
- - - - - Selects - -
- - -
-
- - +
+
- - Input Styles - -
- -
-
- -
-
- -
- - - Validation States
- +
- +
- + +
+
+
Checkbox with Success Checkbox with Warning Checkbox with Danger
-
- -
-
- -
-
- -
@@ -169,67 +79,34 @@
Checkbox 1 Checkbox 2 - -
- - -
- - - + + + Radio 1 + + + Radio 2 + + + Radio 3 + +
Disabled Checkbox - + + + Disabled Radio + +
- - - - Rating -
- - - - - - - - - {{ starRate }} -
-
- - - - - - - - - {{ heartRate }} -
- -
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts index 6299738f..4ec7045a 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.ts +++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts @@ -9,4 +9,5 @@ export class FormInputsComponent { starRate = 2; heartRate = 4; + radioGroupValue = 'This is value 2'; } diff --git a/src/app/pages/forms/forms-routing.module.ts b/src/app/pages/forms/forms-routing.module.ts index 2ce66ace..a3ec784d 100644 --- a/src/app/pages/forms/forms-routing.module.ts +++ b/src/app/pages/forms/forms-routing.module.ts @@ -4,17 +4,34 @@ import { Routes, RouterModule } from '@angular/router'; import { FormsComponent } from './forms.component'; import { FormInputsComponent } from './form-inputs/form-inputs.component'; import { FormLayoutsComponent } from './form-layouts/form-layouts.component'; +import { DatepickerComponent } from './datepicker/datepicker.component'; +import { ButtonsComponent } from './buttons/buttons.component'; const routes: Routes = [{ path: '', component: FormsComponent, - children: [{ - path: 'inputs', - component: FormInputsComponent, - }, { - path: 'layouts', - component: FormLayoutsComponent, - }], + children: [ + { + path: 'inputs', + component: FormInputsComponent, + }, + { + path: 'layouts', + component: FormLayoutsComponent, + }, + { + path: 'layouts', + component: FormLayoutsComponent, + }, + { + path: 'buttons', + component: ButtonsComponent, + }, + { + path: 'datepicker', + component: DatepickerComponent, + }, + ], }]; @NgModule({ @@ -33,4 +50,5 @@ export const routedComponents = [ FormsComponent, FormInputsComponent, FormLayoutsComponent, + DatepickerComponent, ]; diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts index f0a2f4eb..fec35e01 100644 --- a/src/app/pages/forms/forms.module.ts +++ b/src/app/pages/forms/forms.module.ts @@ -2,11 +2,13 @@ import { NgModule } from '@angular/core'; import { ThemeModule } from '../../@theme/theme.module'; import { FormsRoutingModule, routedComponents } from './forms-routing.module'; +import { ButtonsModule } from './buttons/buttons.module'; @NgModule({ imports: [ ThemeModule, FormsRoutingModule, + ButtonsModule, ], declarations: [ ...routedComponents, diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html new file mode 100644 index 00000000..403d906b --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html @@ -0,0 +1,10 @@ + + Enter your name + + + + + + + + diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss new file mode 100644 index 00000000..f5a38612 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss @@ -0,0 +1,11 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + input { + width: 100%; + } + + .btn-success { + margin-left: 1rem; + } +} diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts new file mode 100644 index 00000000..5450b9d8 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; +import { NbDialogRef } from '@nebular/theme'; + +@Component({ + selector: 'ngx-dialog-name-prompt', + templateUrl: 'dialog-name-prompt.component.html', + styleUrls: ['dialog-name-prompt.component.scss'], +}) +export class DialogNamePromptComponent { + + constructor(protected ref: NbDialogRef) {} + + cancel() { + this.ref.close(); + } + + submit(name) { + this.ref.close(name); + } +} diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.html b/src/app/pages/modal-overlays/dialog/dialog.component.html new file mode 100644 index 00000000..655d03ae --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog.component.html @@ -0,0 +1,70 @@ +
+
+ + Open Dialog + + + + + + +
+ +
+ + Open Without Backdrop + + + + + + +
+ +
+ + Open Without Esc Close + + + + + + +
+ +
+ + Open Without Backdrop Click + + + + + + +
+ +
+ + Return Result From Dialog + + +
+

Names:

+
    +
  • {{ name }}
    • +
+ + +
+
+ + + + Template Dialog + {{ data }} + + + + + + diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.scss b/src/app/pages/modal-overlays/dialog/dialog.component.scss new file mode 100644 index 00000000..3941f022 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog.component.scss @@ -0,0 +1,42 @@ +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-card-body { + display: block; + + button { + width: 100%; + margin-bottom: 2rem; + display: block; + + &:last-child { + margin-bottom: 0; + } + } + } + + .result-from-dialog { + flex-direction: column; + } + + .form-input-card { + nb-card-body { + display: block; + } + } + + @include media-breakpoint-down(lg) { + button { + padding: 0.8rem; + } + } + + @include media-breakpoint-down(is) { + button { + padding: 0.75rem; + } + } +} diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.ts b/src/app/pages/modal-overlays/dialog/dialog.component.ts new file mode 100644 index 00000000..21044a06 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog.component.ts @@ -0,0 +1,62 @@ +import { Component, TemplateRef } from '@angular/core'; +import { NbDialogService } from '@nebular/theme'; +import { ShowcaseDialogComponent } from './showcase-dialog/showcase-dialog.component'; +import { DialogNamePromptComponent } from './dialog-name-prompt/dialog-name-prompt.component'; + +@Component({ + selector: 'ngx-dialog', + templateUrl: 'dialog.component.html', + styleUrls: ['dialog.component.scss'], +}) +export class DialogComponent { + + names: string[] = []; + + constructor(private dialogService: NbDialogService) {} + + open() { + this.dialogService.open(ShowcaseDialogComponent, { + context: { + title: 'This is a title passed to the dialog component', + }, + }); + } + + open2(dialog: TemplateRef) { + this.dialogService.open( + dialog, + { context: 'this is some additional data passed to dialog' }); + } + + open3() { + this.dialogService.open(DialogNamePromptComponent) + .onClose.subscribe(name => name && this.names.push(name)); + } + + openWithoutBackdrop(dialog: TemplateRef) { + this.dialogService.open( + dialog, + { + context: 'this is some additional data passed to dialog', + hasBackdrop: false, + }); + } + + openWithoutBackdropClick(dialog: TemplateRef) { + this.dialogService.open( + dialog, + { + context: 'this is some additional data passed to dialog', + closeOnBackdropClick: false, + }); + } + + openWithoutEscClose(dialog: TemplateRef) { + this.dialogService.open( + dialog, + { + context: 'this is some additional data passed to dialog', + closeOnEsc: false, + }); + } +} diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html new file mode 100644 index 00000000..4cd3db63 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html @@ -0,0 +1,14 @@ + + {{ title }} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt. + Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum. + Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci. + Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec + iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus, + in aliquet massa aliquet et. + + + + + diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss new file mode 100644 index 00000000..e6546040 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss @@ -0,0 +1,8 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-card { + max-width: 600px; + max-height: 500px; + } +} diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts new file mode 100644 index 00000000..1f40db2c --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.ts @@ -0,0 +1,18 @@ +import { Component, Input } from '@angular/core'; +import { NbDialogRef } from '@nebular/theme'; + +@Component({ + selector: 'ngx-showcase-dialog', + templateUrl: 'showcase-dialog.component.html', + styleUrls: ['showcase-dialog.component.scss'], +}) +export class ShowcaseDialogComponent { + + @Input() title: string; + + constructor(protected ref: NbDialogRef) {} + + dismiss() { + this.ref.close(); + } +} diff --git a/src/app/pages/modal-overlays/modal-overlays-routing.module.ts b/src/app/pages/modal-overlays/modal-overlays-routing.module.ts new file mode 100644 index 00000000..9e4eba3c --- /dev/null +++ b/src/app/pages/modal-overlays/modal-overlays-routing.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { ModalOverlaysComponent } from './modal-overlays.component'; +import { DialogComponent } from './dialog/dialog.component'; +import { WindowComponent } from './window/window.component'; +import { PopoversComponent } from './popovers/popovers.component'; +import { ToastrComponent } from './toastr/toastr.component'; +import { TooltipComponent } from './tooltip/tooltip.component'; + +const routes: Routes = [{ + path: '', + component: ModalOverlaysComponent, + children: [ + { + path: 'dialog', + component: DialogComponent, + }, + { + path: 'window', + component: WindowComponent, + }, + { + path: 'popover', + component: PopoversComponent, + }, + { + path: 'tooltip', + component: TooltipComponent, + }, + { + path: 'toastr', + component: ToastrComponent, + }, + ], +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ModalOverlaysRoutingModule { +} + + diff --git a/src/app/pages/modal-overlays/modal-overlays.component.ts b/src/app/pages/modal-overlays/modal-overlays.component.ts new file mode 100644 index 00000000..7511f40e --- /dev/null +++ b/src/app/pages/modal-overlays/modal-overlays.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-modal-overlays', + template: ` + + `, +}) + +export class ModalOverlaysComponent { +} diff --git a/src/app/pages/modal-overlays/modal-overlays.module.ts b/src/app/pages/modal-overlays/modal-overlays.module.ts new file mode 100644 index 00000000..2a0e582a --- /dev/null +++ b/src/app/pages/modal-overlays/modal-overlays.module.ts @@ -0,0 +1,73 @@ +import { NgModule } from '@angular/core'; + +// modules +import { ThemeModule } from '../../@theme/theme.module'; +import { ModalOverlaysRoutingModule } from './modal-overlays-routing.module'; + +// components +import { ModalOverlaysComponent } from './modal-overlays.component'; +import { DialogComponent } from './dialog/dialog.component'; +import { ShowcaseDialogComponent } from './dialog/showcase-dialog/showcase-dialog.component'; +import { NbDialogModule, NbWindowModule } from '@nebular/theme'; +import { DialogNamePromptComponent } from './dialog/dialog-name-prompt/dialog-name-prompt.component'; +import { WindowComponent } from './window/window.component'; +import { WindowFormComponent } from './window/window-form/window-form.component'; +import { ToastrComponent } from './toastr/toastr.component'; +import { PopoversComponent } from './popovers/popovers.component'; +import { + NgxPopoverCardComponent, NgxPopoverFormComponent, + NgxPopoverTabsComponent, +} from './popovers/popover-examples.component'; +import { TooltipComponent } from './tooltip/tooltip.component'; + + +const COMPONENTS = [ + ModalOverlaysComponent, + ToastrComponent, + DialogComponent, + ShowcaseDialogComponent, + DialogNamePromptComponent, + WindowComponent, + WindowFormComponent, + PopoversComponent, + NgxPopoverCardComponent, + NgxPopoverFormComponent, + NgxPopoverTabsComponent, + TooltipComponent, +]; + +const ENTRY_COMPONENTS = [ + ShowcaseDialogComponent, + DialogNamePromptComponent, + WindowFormComponent, + NgxPopoverCardComponent, + NgxPopoverFormComponent, + NgxPopoverTabsComponent, +]; + +const MODULES = [ + ThemeModule, + ModalOverlaysRoutingModule, + NbDialogModule.forChild(), + NbWindowModule.forChild(), +]; + +const SERVICES = [ +]; + +@NgModule({ + imports: [ + ...MODULES, + ], + declarations: [ + ...COMPONENTS, + ], + providers: [ + ...SERVICES, + ], + entryComponents: [ + ...ENTRY_COMPONENTS, + ], +}) +export class ModalOverlaysModule { +} diff --git a/src/app/pages/ui-features/popovers/popover-examples.component.ts b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts similarity index 100% rename from src/app/pages/ui-features/popovers/popover-examples.component.ts rename to src/app/pages/modal-overlays/popovers/popover-examples.component.ts diff --git a/src/app/pages/ui-features/popovers/popovers.component.html b/src/app/pages/modal-overlays/popovers/popovers.component.html similarity index 100% rename from src/app/pages/ui-features/popovers/popovers.component.html rename to src/app/pages/modal-overlays/popovers/popovers.component.html diff --git a/src/app/pages/ui-features/popovers/popovers.component.scss b/src/app/pages/modal-overlays/popovers/popovers.component.scss similarity index 100% rename from src/app/pages/ui-features/popovers/popovers.component.scss rename to src/app/pages/modal-overlays/popovers/popovers.component.scss diff --git a/src/app/pages/ui-features/popovers/popovers.component.ts b/src/app/pages/modal-overlays/popovers/popovers.component.ts similarity index 100% rename from src/app/pages/ui-features/popovers/popovers.component.ts rename to src/app/pages/modal-overlays/popovers/popovers.component.ts diff --git a/src/app/pages/components/notifications/notifications.component.html b/src/app/pages/modal-overlays/toastr/toastr.component.html similarity index 59% rename from src/app/pages/components/notifications/notifications.component.html rename to src/app/pages/modal-overlays/toastr/toastr.component.html index 72563448..c264a345 100644 --- a/src/app/pages/components/notifications/notifications.component.html +++ b/src/app/pages/modal-overlays/toastr/toastr.component.html @@ -3,7 +3,6 @@ Toaster configuration -
@@ -20,19 +19,6 @@
-
- -
- -
    -
  • - {{ at }} -
    • -
-
-
@@ -45,31 +31,26 @@
- +
-
- - -
    -
  • {{ t }}
    • +
  • {{ t }}
- -
Newest on top
-
Hide on click
-
Prevent arising of duplicate toast
-
Close button
+ +
Hide on click
+
Prevent arising of duplicate toast
+
Show toast with icon
@@ -77,6 +58,5 @@ - diff --git a/src/app/pages/components/notifications/notifications.component.scss b/src/app/pages/modal-overlays/toastr/toastr.component.scss similarity index 100% rename from src/app/pages/components/notifications/notifications.component.scss rename to src/app/pages/modal-overlays/toastr/toastr.component.scss diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.ts b/src/app/pages/modal-overlays/toastr/toastr.component.ts new file mode 100644 index 00000000..04f79016 --- /dev/null +++ b/src/app/pages/modal-overlays/toastr/toastr.component.ts @@ -0,0 +1,84 @@ +import { Component } from '@angular/core'; +import { ToasterConfig } from 'angular2-toaster'; + +import 'style-loader!angular2-toaster/toaster.css'; +import { NbGlobalLogicalPosition, NbGlobalPhysicalPosition, NbGlobalPosition, NbToastrService } from '@nebular/theme'; +import { NbToastStatus } from '@nebular/theme/components/toastr/model'; + +@Component({ + selector: 'ngx-toastr', + styleUrls: ['./toastr.component.scss'], + templateUrl: './toastr.component.html', +}) +export class ToastrComponent { + constructor(private toastrService: NbToastrService) {} + + config: ToasterConfig; + + index = 1; + destroyByClick = true; + duration = 2000; + hasIcon = true; + position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT; + preventDuplicates = false; + status: NbToastStatus = NbToastStatus.SUCCESS; + + title = 'HI there!'; + content = `I'm cool toaster!`; + + types: NbToastStatus[] = [ + NbToastStatus.DEFAULT, + NbToastStatus.DANGER, + NbToastStatus.INFO, + NbToastStatus.PRIMARY, + NbToastStatus.SUCCESS, + NbToastStatus.WARNING, + ]; + positions: string[] = [ + NbGlobalPhysicalPosition.TOP_RIGHT, + NbGlobalPhysicalPosition.TOP_LEFT, + NbGlobalPhysicalPosition.BOTTOM_LEFT, + NbGlobalPhysicalPosition.BOTTOM_RIGHT, + NbGlobalLogicalPosition.TOP_END, + NbGlobalLogicalPosition.TOP_START, + NbGlobalLogicalPosition.BOTTOM_END, + NbGlobalLogicalPosition.BOTTOM_START, + ]; + + quotes = [ + { title: null, body: 'We rock at Angular' }, + { title: null, body: 'Titles are not always needed' }, + { title: null, body: 'Toastr rock!' }, + ]; + + makeToast() { + this.showToast(this.status, this.title, this.content); + } + + openRandomToast () { + const typeIndex = Math.floor(Math.random() * this.types.length); + const quoteIndex = Math.floor(Math.random() * this.quotes.length); + const type: NbToastStatus = this.types[typeIndex]; + const quote = this.quotes[quoteIndex]; + + this.showToast(type, quote.title, quote.body); + } + + private showToast(type: NbToastStatus, title: string, body: string) { + const config = { + status: type, + destroyByClick: this.destroyByClick, + duration: this.duration, + hasIcon: this.hasIcon, + position: this.position, + preventDuplicates: this.preventDuplicates, + }; + const titleContent = title ? `. ${title}` : ''; + + this.index += 1; + this.toastrService.show( + body, + `Toast ${this.index}${titleContent}`, + config); + } +} diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.html b/src/app/pages/modal-overlays/tooltip/tooltip.component.html new file mode 100644 index 00000000..a9f234ea --- /dev/null +++ b/src/app/pages/modal-overlays/tooltip/tooltip.component.html @@ -0,0 +1,37 @@ +
+
+ + Tooltip With Icon + + + + + +
+ +
+ + Tooltip Placements + + + + + + + +
+ +
+ + Colored Tooltips + + + + + + + + + +
+
diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.scss b/src/app/pages/modal-overlays/tooltip/tooltip.component.scss new file mode 100644 index 00000000..74aaf7a5 --- /dev/null +++ b/src/app/pages/modal-overlays/tooltip/tooltip.component.scss @@ -0,0 +1,7 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + button { + margin: 0.5rem; + } +} diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.ts b/src/app/pages/modal-overlays/tooltip/tooltip.component.ts new file mode 100644 index 00000000..e1ed8223 --- /dev/null +++ b/src/app/pages/modal-overlays/tooltip/tooltip.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-tooltip', + templateUrl: 'tooltip.component.html', + styleUrls: ['tooltip.component.scss'], +}) +export class TooltipComponent { + +} diff --git a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss new file mode 100644 index 00000000..61a70207 --- /dev/null +++ b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss @@ -0,0 +1,12 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + /deep/ .form { + display: flex; + flex-direction: column; + + .text-label { + margin-top: 1.5rem; + } + } +} diff --git a/src/app/pages/modal-overlays/window/window-form/window-form.component.ts b/src/app/pages/modal-overlays/window/window-form/window-form.component.ts new file mode 100644 index 00000000..a2b4cdda --- /dev/null +++ b/src/app/pages/modal-overlays/window/window-form/window-form.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { NbWindowRef } from '@nebular/theme'; + +@Component({ + template: ` +
+ + + + + +
+ `, + styleUrls: ['window-form.component.scss'], +}) +export class WindowFormComponent { + constructor(public windowRef: NbWindowRef) {} + + close() { + this.windowRef.close(); + } +} diff --git a/src/app/pages/modal-overlays/window/window.component.html b/src/app/pages/modal-overlays/window/window.component.html new file mode 100644 index 00000000..fcefecc4 --- /dev/null +++ b/src/app/pages/modal-overlays/window/window.component.html @@ -0,0 +1,31 @@ +
+
+ + Window Form + + + + + + +
+ +
+ + Window Without Backdrop + + + + + + +
+
+ + +

Here is the text provided via config: "{{ data.title }}"

+ + + + Disabled close on escape click. + diff --git a/src/app/pages/modal-overlays/window/window.component.scss b/src/app/pages/modal-overlays/window/window.component.scss new file mode 100644 index 00000000..1d412141 --- /dev/null +++ b/src/app/pages/modal-overlays/window/window.component.scss @@ -0,0 +1,38 @@ +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + button + button { + margin-left: 2rem; + } + + @include media-breakpoint-down(xxl) { + nb-card-body { + display: flex; + } + + button { + flex: 1; + padding: 0.8rem; + } + } + + @include media-breakpoint-down(is) { + nb-card-body { + display: block; + } + + button { + + button { + margin-left: 0; + } + + width: 100%; + display: block; + margin-bottom: 2rem; + padding: 0.75rem; + } + } +} diff --git a/src/app/pages/modal-overlays/window/window.component.ts b/src/app/pages/modal-overlays/window/window.component.ts new file mode 100644 index 00000000..71665f73 --- /dev/null +++ b/src/app/pages/modal-overlays/window/window.component.ts @@ -0,0 +1,43 @@ +import { Component, TemplateRef, ViewChild } from '@angular/core'; +import { NbWindowService } from '@nebular/theme'; +import { WindowFormComponent } from './window-form/window-form.component'; + +@Component({ + selector: 'ngx-window', + templateUrl: 'window.component.html', + styleUrls: ['window.component.scss'], +}) +export class WindowComponent { + + @ViewChild('contentTemplate') contentTemplate: TemplateRef; + @ViewChild('disabledEsc', { read: TemplateRef }) disabledEscTemplate: TemplateRef; + + constructor(private windowService: NbWindowService) {} + + openWindow(contentTemplate) { + this.windowService.open( + contentTemplate, + { + title: 'Window content from template', + context: { + text: 'some text to pass into template', + }, + }, + ); + } + + openWindowForm() { + this.windowService.open(WindowFormComponent, { title: `Window` }); + } + + openWindowWithoutBackdrop() { + this.windowService.open( + this.disabledEscTemplate, + { + title: 'Window without backdrop', + hasBackdrop: false, + closeOnEsc: false, + }, + ); + } +} diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index f29914c8..0ad3d86a 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -17,41 +17,56 @@ export const MENU_ITEMS: NbMenuItem[] = [ group: true, }, { - title: 'UI Features', - icon: 'nb-keypad', - link: '/pages/ui-features', + title: 'Extra Components', + icon: 'nb-star', children: [ { - title: 'Buttons', - link: '/pages/ui-features/buttons', + title: 'Calendar', + link: '/pages/extra-components/calendar', }, { - title: 'Grid', - link: '/pages/ui-features/grid', + title: 'Stepper', + link: '/pages/extra-components/stepper', }, { - title: 'Icons', - link: '/pages/ui-features/icons', + title: 'List', + link: '/pages/extra-components/list', }, { - title: 'Modals', - link: '/pages/ui-features/modals', + title: 'Infinite List', + link: '/pages/extra-components/infinite-list', }, { - title: 'Popovers', - link: '/pages/ui-features/popovers', + title: 'Accordion', + link: '/pages/extra-components/accordion', }, { - title: 'Typography', - link: '/pages/ui-features/typography', + title: 'Progress Bar', + link: '/pages/extra-components/progress-bar', }, { - title: 'Animated Searches', - link: '/pages/ui-features/search-fields', + title: 'Spinner', + link: '/pages/extra-components/spinner', + }, + { + title: 'Alert', + link: '/pages/extra-components/alert', + }, + { + title: 'Tree', + link: '/pages/extra-components/tree', }, { title: 'Tabs', - link: '/pages/ui-features/tabs', + link: '/pages/extra-components/tabs', + }, + { + title: 'Calendar Kit', + link: '/pages/extra-components/calendar-kit', + }, + { + title: 'Chat', + link: '/pages/extra-components/chat', }, ], }, @@ -67,18 +82,80 @@ export const MENU_ITEMS: NbMenuItem[] = [ title: 'Form Layouts', link: '/pages/forms/layouts', }, + { + title: 'Buttons', + link: '/pages/forms/buttons', + }, + { + title: 'Datepicker', + link: '/pages/forms/datepicker', + }, ], }, { - title: 'Components', + title: 'UI Features', + icon: 'nb-keypad', + link: '/pages/ui-features', + children: [ + { + title: 'Grid', + link: '/pages/ui-features/grid', + }, + { + title: 'Icons', + link: '/pages/ui-features/icons', + }, + { + title: 'Typography', + link: '/pages/ui-features/typography', + }, + { + title: 'Animated Searches', + link: '/pages/ui-features/search-fields', + }, + ], + }, + { + title: 'Modal & Overlays', + icon: 'nb-layout-default', + children: [ + { + title: 'Dialog', + link: '/pages/modal-overlays/dialog', + }, + { + title: 'Window', + link: '/pages/modal-overlays/window', + }, + { + title: 'Popover', + link: '/pages/modal-overlays/popover', + }, + { + title: 'Toastr', + link: '/pages/modal-overlays/toastr', + }, + { + title: 'Tooltip', + link: '/pages/modal-overlays/tooltip', + }, + ], + }, + { + title: 'Bootstrap', icon: 'nb-gear', children: [ { - title: 'Tree', - link: '/pages/components/tree', - }, { - title: 'Notifications', - link: '/pages/components/notifications', + title: 'Form Inputs', + link: '/pages/bootstrap/inputs', + }, + { + title: 'Buttons', + link: '/pages/bootstrap/buttons', + }, + { + title: 'Modal', + link: '/pages/bootstrap/modal', }, ], }, diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index de93b990..613a5fca 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -19,8 +19,14 @@ const routes: Routes = [{ path: 'ui-features', loadChildren: './ui-features/ui-features.module#UiFeaturesModule', }, { - path: 'components', - loadChildren: './components/components.module#ComponentsModule', + path: 'modal-overlays', + loadChildren: './modal-overlays/modal-overlays.module#ModalOverlaysModule', + }, { + path: 'extra-components', + loadChildren: './extra-components/extra-components.module#ExtraComponentsModule', + }, { + path: 'bootstrap', + loadChildren: './bootstrap/bootstrap.module#BootstrapModule', }, { path: 'maps', loadChildren: './maps/maps.module#MapsModule', diff --git a/src/app/pages/ui-features/icons/icons.component.ts b/src/app/pages/ui-features/icons/icons.component.ts index bd631ba7..89ed70c9 100644 --- a/src/app/pages/ui-features/icons/icons.component.ts +++ b/src/app/pages/ui-features/icons/icons.component.ts @@ -27,7 +27,7 @@ export class IconsComponent { 'nb-skip-backward-outline', 'nb-skip-forward', 'nb-skip-forward-outline', 'nb-snowy-circled', 'nb-square', 'nb-square-outline', 'nb-star', 'nb-sunny', 'nb-sunny-circled', 'nb-tables', 'nb-title', 'nb-trash', 'nb-volume-high', 'nb-volume-mute', 'nb-drop', 'nb-drops', 'nb-info', 'nb-expand', 'nb-collapse', - 'nb-e-commerce'], + 'nb-e-commerce', 'nb-danger', 'nb-checkmark-circle', 'nb-help'], ionicons: [ 'ion-ionic', 'ion-arrow-right-b', 'ion-arrow-down-b', 'ion-arrow-left-b', 'ion-arrow-up-c', 'ion-arrow-right-c', diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts index e4717e0d..912fb5d0 100644 --- a/src/app/pages/ui-features/ui-features-routing.module.ts +++ b/src/app/pages/ui-features/ui-features-routing.module.ts @@ -2,53 +2,26 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { UiFeaturesComponent } from './ui-features.component'; -import { ButtonsComponent } from './buttons/buttons.component'; import { GridComponent } from './grid/grid.component'; import { IconsComponent } from './icons/icons.component'; -import { ModalsComponent } from './modals/modals.component'; import { TypographyComponent } from './typography/typography.component'; -import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component'; import { SearchComponent } from './search-fields/search-fields.component'; -import { PopoversComponent } from './popovers/popovers.component'; const routes: Routes = [{ path: '', component: UiFeaturesComponent, - children: [{ - path: 'buttons', - component: ButtonsComponent, - }, { + children: [ { path: 'grid', component: GridComponent, }, { path: 'icons', component: IconsComponent, - }, { - path: 'modals', - component: ModalsComponent, - }, { - path: 'popovers', - component: PopoversComponent, }, { path: 'typography', component: TypographyComponent, }, { path: 'search-fields', component: SearchComponent, - }, { - path: 'tabs', - component: TabsComponent, - children: [{ - path: '', - redirectTo: 'tab1', - pathMatch: 'full', - }, { - path: 'tab1', - component: Tab1Component, - }, { - path: 'tab2', - component: Tab2Component, - }], }], }]; diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts index facb28d0..16ee1b88 100644 --- a/src/app/pages/ui-features/ui-features.module.ts +++ b/src/app/pages/ui-features/ui-features.module.ts @@ -1,53 +1,28 @@ import { NgModule } from '@angular/core'; import { ThemeModule } from '../../@theme/theme.module'; -import { ButtonsModule } from './buttons/buttons.module'; import { UiFeaturesRoutingModule } from './ui-features-routing.module'; import { UiFeaturesComponent } from './ui-features.component'; import { GridComponent } from './grid/grid.component'; -import { ModalsComponent } from './modals/modals.component'; import { IconsComponent } from './icons/icons.component'; -import { ModalComponent } from './modals/modal/modal.component'; import { TypographyComponent } from './typography/typography.component'; -import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component'; import { SearchComponent } from './search-fields/search-fields.component'; -import { PopoversComponent } from './popovers/popovers.component'; -import { - NgxPopoverCardComponent, NgxPopoverFormComponent, - NgxPopoverTabsComponent, -} from './popovers/popover-examples.component'; const components = [ UiFeaturesComponent, GridComponent, - ModalsComponent, IconsComponent, - ModalComponent, TypographyComponent, - TabsComponent, - Tab1Component, - Tab2Component, SearchComponent, - PopoversComponent, - NgxPopoverCardComponent, - NgxPopoverFormComponent, - NgxPopoverTabsComponent, ]; @NgModule({ imports: [ ThemeModule, UiFeaturesRoutingModule, - ButtonsModule, ], declarations: [ ...components, ], - entryComponents: [ - ModalComponent, - NgxPopoverCardComponent, - NgxPopoverFormComponent, - NgxPopoverTabsComponent, - ], }) export class UiFeaturesModule { } diff --git a/src/assets/data/news.json b/src/assets/data/news.json new file mode 100644 index 00000000..919b28de --- /dev/null +++ b/src/assets/data/news.json @@ -0,0 +1,352 @@ +[ + { + "title": "Fan of Angular-In-Depth and my writings? Support us on Twitter!", + "link": "https://blog.angularindepth.com/fan-of-angular-in-depth-and-my-writings-support-us-on-twitter-e3bfcbabb4b1", + "text": "A few weeks ago I ran a poll on Twitter to understand why Angular account has 280k followers on Twitter while Angular-In-Depth has only a fraction of that on Medium (11k). The poll showed that 50% of those who responded don’t use Medium, 17% find stories too complicated, 27% have no time to read and there are people (7%) who find stories not interesting." + }, + { + "title": "Boosting performance of Angular applications with manual change detection", + "link": "https://blog.angularindepth.com/boosting-performance-of-angular-applications-with-manual-change-detection-42cb396110fb", + "text": "Angular uses NgZone/Zone.js to know when to trigger UI update (change detection) when our app data state changes. It brilliantly utilized the events emitted by Zone.js when async operations are performed to detect when to run a change detection cycle." + }, + { + "title": "Learn how Angular Elements transmits Component’s @Outputs outside Angular", + "link": "https://blog.angularindepth.com/how-angular-elements-uses-custom-events-mechanism-to-transmit-components-outputs-outside-angular-7b469386f6e2", + "text": "In our last article we described how Angular Elements works under the hood. We identified that Angular Elements is a bridge to connect Custom Elements to Angular Components." + }, + { + "title": "Angular CDK Tables", + "link": "https://blog.angularindepth.com/angular-cdk-tables-1537774d7c99", + "text": "In this article: Angular CDK Tables, Bootstrap 4 with Angular CDK Tables, Client Side searching/paging/sorting." + }, + { + "title": "One-way template expression binding mechanism in Angular", + "link": "https://blog.angularindepth.com/becoming-an-angular-environmentalist-45a48f7c20d8", + "text": "Angular is the most popular and widely used JavaScript framework after React.js. It abstracts many complexities away from developers to enable them to develop apps with ease." + }, + { + "title": "The Extensive Guide to Creating Streams in RxJS", + "link": "https://blog.angularindepth.com/how-to-unit-test-angular-components-with-fake-ngrx-teststore-f0500cc5fc26", + "text": "For most developers the first contact with RxJS is established by libraries, like Angular. Some functions return streams and to make use of them the focus naturally is on operators." + }, + { + "title": "RxJS: Avoiding Unbound Methods", + "link": "https://blog.angularindepth.com/rxjs-avoiding-unbound-methods-fcf2648a805", + "text": "When unbound methods are passed to RxJS, they will be invoked with an unexpected context for this. If the method implementations don’t use this, they will behave as you would expect." + }, + { + "title": "Angular Elements: how does this magic work under the hood?", + "link": "https://blog.angularindepth.com/angular-elements-how-does-this-magic-work-under-the-hood-3684a0b2be95", + "text": "The Angular Elements project is generating lots of hype in the community right now, and rightly so! Angular Elements provides a wealth of awesome features out of the box." + }, + { + "title": "RxJS: Testing with Fake Time", + "link": "https://blog.angularindepth.com/rxjs-testing-with-fake-time-94114271eed2", + "text": "Angular, Jasmine, Jest and Sinon.JS all provide APIs for running tests with fake time. Their APIs differ, but they are broadly similar. Running tests with fake time avoids having to wait for actual time to elapse and it also makes the tests much simpler, as they run synchronously. So what does this have to do with RxJS?" + }, + { + "title": "How do CDK Portals work?", + "link": "https://blog.angularindepth.com/how-do-cdk-portals-work-7c097c14a494", + "text": "In the last article we were exploring how to leverage the Angular Material CDK portals for placing some piece of template from a component to some other location within our app. CDK portals make this a no-brainer. Wondering how they work? In this article we dive deeper to uncover how its internals work and how we could simply implement it by ourselves." + }, + { + "title": "How I test my NgRx selectors", + "link": "https://blog.angularindepth.com/how-i-test-my-ngrx-selectors-c50b1dc556bc", + "text": "In this post I’m going to show you how I test my selectors by putting the selectors from a previous post “Clean NgRx reducers using Immer”, where we created a small shopping cart application, under test. In the application there is a collection of products (the catalog) and the cart items, together they form the state of the application." + }, + { + "title": "Angular 5 or Angular 6? Yes please!", + "link": "https://blog.angularindepth.com/angular-5-or-angular-6-yes-please-d71b08b5e59b", + "text": "And, I’m glad you asked: YES, you should move all your projects to Angular 6 now or sooner! But … and it is a big but. Like me, you may be in the situation where you are working on multiple projects and many of them are going to be stuck in Angular 5 for a while. So, you need to support a development environment where you can work on and even create new Angular applications in both Angular 5 and Angular 6." + }, + { + "title": "Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime", + "link": "https://blog.angularindepth.com/total-guide-to-dynamic-angular-animations-that-can-be-toggled-at-runtime-be5bb6778a0a", + "text": "From route transitions to small details like feedback when clicking on a button or displaying a tooltip, animations give your project that nice sleek look. Well crafted animations communicate that you or your organization care enough to put effort into details and create best possible experience for your users." + }, + { + "title": "RxJS: How to Observe an Object", + "link": "https://blog.angularindepth.com/rxjs-how-to-observe-an-object-20c47cf51571", + "text": "A while ago, John Lindquist published a package named rx-handler. With it, you can create event handler functions that are also observables. When it was published, I noticed a few queries about whether something similar could be done with Angular’s Input properties — so that they, too, could be treated as observables." + }, + { + "title": "A curious case of the @Host decorator and Element Injectors in Angular", + "link": "https://blog.angularindepth.com/a-curios-case-of-the-host-decorator-and-element-injectors-in-angular-582562abcf0a", + "text": "As you know, Angular’s dependency injection mechanism includes a bunch of decorators like @Optional and @Self which impact the way dependencies are resolved. And while most of them are pretty straightforward and self-explanatory, the @Host decorator has puzzled me for a long time." + }, + { + "title": "Simple state mutations in NGXS with Immer", + "link": "https://blog.angularindepth.com/simple-state-mutations-in-ngxs-with-immer-48b908874a5e", + "text": "NGXS is a state management pattern + library for Angular. Just like Redux and NgRx it’s modeled after the CQRS pattern. NGXS uses TypeScript functionality to its fullest extent and because of this it may feel more Angular-y." + }, + { + "title": "Upgrading a project without CLI to Angular 6", + "link": "https://blog.angularindepth.com/upgrading-a-project-without-cli-to-angular-6-b07b105adc02", + "text": "In the following article, I’m going to describe the challenging process of updating an Angular application with custom Webpack configuration, which our team had to pull through 3 weeks ago. I guess our experience would be useful for those who use Angular with acustom Webpack config. For others, it is an illustration of where modern front-end could lead us and how to live with that." + }, + { + "title": "Power of RxJS when using exponential backoff", + "link": "https://blog.angularindepth.com/power-of-rxjs-when-using-exponential-backoff-a4b8bde276b0", + "text": "Most of the modern-day Angular web apps make Ajax requests to the servers. These requests involve multiple network components (such as routers, switches, etc) as well as servers’ state and everything has to go just right for them to succeed. However, sometimes it doesn’t." + }, + { + "title": "Clean NgRx reducers using Immer", + "link": "https://blog.angularindepth.com/clean-ngrx-reducers-using-immer-7fe4a0d43508", + "text": "This weeks post is inspired by another great This Dot Media event and the topic this time was state management. There was a small segment about Immer which I found interesting (video is linked at the bottom of this post), so I decided to give it a shot with NgRx." + }, + { + "title": "The Angular Library Series - Creating a Library with the Angular CLI", + "link": "https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5", + "text": "Angular 6 was just released. Many of the improvements were to the Angular CLI. The one I have really been looking forward to is the integration of the Angular CLI with ng-packagr to generate and build Angular libraries. ng-packagr is a fantastic tool created by David Herges that transpiles your library to the Angular Package Format." + }, + { + "title": "RxJS: Avoiding takeUntil Leaks", + "link": "https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef", + "text": "Using the takeUntil operator to automatically unsubscribe from an observable is a mechanism that’s explained in Ben Lesh’s Don’t Unsubscribe article. It’s also the basis of a generally-accepted pattern for unsubscribing upon an Angular component’s destruction." + }, + { + "title": "Use ", + "link": "https://blog.angularindepth.com/use-ng-template-c72852c37fba", + "text": "Render Props have been making waves in the React community recently, but the corresponding pattern in the Angular world hasn’t been getting nearly as much press. I’ve written before that TemplateRefs are Angular’s Render Props and I hope to give you a good simple example of that here." + }, + { + "title": "RxJS: Improving the Static pipe Function", + "link": "https://blog.angularindepth.com/rxjs-improving-the-static-pipe-function-81146fbb14b6", + "text": "My previous article looked at using the static pipe function to compose reusable combinations of operators. Most of the time, the pipe function’s TypeScript overload signatures will infer the desired type for the returned function. However, sometimes it’s desirable to have a generic type inferred and the current overload signatures will not do that." + }, + { + "title": "Angular Ivy change detection execution: are you prepared?", + "link": "https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c", + "text": "While new Ivy renderer is not feature completely yet, many people wonder how it will work and what changes it prepares for us. In this article I am going to visualize Ivy change detection mechanism, show some things I am really excited about and also build simple app based on instructions, similar to angular Ivy instructions, from scratch." + }, + { + "title": "Ivy engine in Angular: first in-depth look at compilation, runtime and change detection", + "link": "https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd", + "text": "I usually finish my talks with the philosophical phrase that nothing stays the same. And as you probably know it’s more then true with Angular. The current rendering engine is being rewritten with the new much enhanced version called Ivy. The current status of Ivy can be tracked here." + }, + { + "title": "RxJS: Combining Operators", + "link": "https://blog.angularindepth.com/rxjs-combining-operators-397bad0628d0", + "text": "In version 5.5, pipeable operators were added to RxJS. And in version 6, their non-pipeable namesakes were removed. Pipeable operators have numerous advantages. The most obvious is that they are easier to write. A less obvious advantage is that they can be composed into reusable combinations." + }, + { + "title": "A modern solution to lazy loading images using Intersection Observer", + "link": "https://blog.angularindepth.com/a-modern-solution-to-lazy-loading-using-intersection-observer-9280c149bbc", + "text": "Performance of a web application has become a key factor in deciding conversion rates for e-commerce websites. The faster a page loads, the better the conversion rate. According to the recent mobile page speed benchmarks released by Google, the bounce probability increases as page load time increases." + }, + { + "title": "Working with DOM in Angular: unexpected consequences and optimization techniques", + "link": "https://blog.angularindepth.com/working-with-dom-in-angular-unexpected-consequences-and-optimization-techniques-682ac09f6866", + "text": "I recently gave a talk on advanced DOM manipulations in Angular in a form of a workshop at NgConf. I went from the basics like using template references and DOM queries to access DOM elements to using a view container to render templates and components dynamically." + }, + { + "title": "The benefits of application state normalization in Angular", + "link": "https://blog.angularindepth.com/the-benefits-of-application-state-normalization-in-angular-f93392ca9f44", + "text": "Imagine we have a recursive data structure in the store, let us say, information about a product’s category in an e-commerce application. Category is the classification of which type of product it is. For example, Mobile Phones category can have subcategories such as Google, Apple, Samsung and so on and each subcategory can in turn have further subcategories..." + }, + { + "title": "RxJS: TSLint Rules for Version 6", + "link": "https://blog.angularindepth.com/rxjs-tslint-rules-for-version-6-d10e2482292d", + "text": "Earlier this week, RxJS version 6 was released and, with its release, managing RxJS imports has become much, much easier. Last year, I wrote a bunch of TSLint rules for managing RxJS imports. They’re distributed in the rxjs-tslint-rules package." + }, + { + "title": "Angular Universal & Firebase functions: The missing guide", + "link": "https://blog.angularindepth.com/angular-5-universal-firebase-4c85a7d00862", + "text": "Lucky you, I’ve written this simplified guide to configure Angular 5 Universal in your Angular project. Moreover, I’m gonna give you also a bonus track on how to run Universal in a serverless environment like Firebase Cloud Functions." + }, + { + "title": "Angular and Internet Explorer", + "link": "https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9", + "text": "You installed the Angular CLI and used it to generate your new application. But, when you try to view it in Internet Explorer (IE), you see nothing. Now what? The bad news: Angular CLI applications require a few more steps in order to support Internet Explorer." + }, + { + "title": "Gestures in an Angular Application", + "link": "https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0", + "text": "In this post I will attempt to explain how to use hammerjs gesture recognizers provided by the @angular/platform-browser package. I’ll be referencing @angular/platform-browser@5.2.0 within my code samples, but there are some changes coming to 6.0.0 that will be discussed later." + }, + { + "title": "Deploy an Angular Application to IIS", + "link": "https://blog.angularindepth.com/deploy-an-angular-application-to-iis-60a0897742e7", + "text": "The Angular Router is a fantastic module for Single Page Apps. However, to deploy it in a Production scenario you will typically need to do some configuration to make it work. This article details the steps necessary to deploy an Angular Router application anywhere on Internet Information Services (IIS)." + }, + { + "title": "Super Charging an Angular CLI App", + "link": "https://blog.angularindepth.com/super-charging-an-angular-cli-app-fc496a6c100", + "text": "A standard Angular CLI application comes with a terrific set of of tooling to prepare you to get developing quickly. However, there’s a few additional steps you should take to really prepare your project for success. In this article I’ll break down all the additional features you can add to your project without ejecting (exporting the WebPack Config)." + }, + { + "title": "What you always wanted to know about Angular Dependency Injection tree", + "link": "https://blog.angularindepth.com/angular-dependency-injection-and-tree-shakeable-tokens-4588a8f70d5d", + "text": "If you didn’t dive deep into angular dependency injection mechanism, your mental model should be that in angular application we have some root injector with all merged providers, every component has its own injector and lazy loaded module introduces new injector." + }, + { + "title": "RxJS: When to Use switchMap", + "link": "https://blog.angularindepth.com/when-to-use-switchmap-dfe84ac5a1ff", + "text": "In a response to RxJS: Avoiding switchMap-Related Bugs, Martin Hochel mentioned a classic use case for switchMap. For the use case to which he referred, switchMap is not only valid; it’s optimal. And it’s worth looking at why." + }, + { + "title": "RxJS: Understanding Expand", + "link": "https://blog.angularindepth.com/rxjs-understanding-expand-a5f8b41a3602", + "text": "RxJS has a lot of operators. Lots and lots of them. It takes time to learn what they all do and how they can be used. Some operators are straightforward; others, less so. One operator that developers often find confusing is expand." + }, + { + "title": "RxJS: Composing Subscriptions", + "link": "https://blog.angularindepth.com/rxjs-composing-subscriptions-b53ab22f1fd5", + "text": "RxJS code involves making subscriptions to observables. Lots of subscriptions. If each subscription is assigned to its own variable or property, the situation can be difficult to manage." + }, + { + "title": "Handle Template Reference Variables with Directives", + "link": "https://blog.angularindepth.com/handle-template-reference-variables-with-directives-223081bc70c2", + "text": "I’ve been using template reference variables pretty liberally in my examples so far, and it’s high time I dive in a bit into how to use them to reference specific directives." + }, + { + "title": "Avoid Namespace Clashes with Directives", + "link": "https://blog.angularindepth.com/avoid-namespace-clashes-with-directives-1f00d62de445", + "text": "Not only can the selector for a directive clash with another directive, but Inputs and Outputs for those directives can clash with each other. When they have the same name, Angular doesn’t complain — it just applies the logic to both directives. In some cases, this is exactly what we want. However, sometimes it can cause unexpected behavior." + }, + { + "title": "Dynamically Loading Components with Angular CLI", + "link": "https://blog.angularindepth.com/dynamically-loading-components-with-angular-cli-92a3c69bcd28", + "text": "When moving from a multi-page application to a SPA, one of the problems that presents itself is the payload size upon initial load. By default, in an Angular application everything is bundled into one payload, which means as the application grows, so does the time that it takes to load." + }, + { + "title": "Insider’s guide into interceptors and HttpClient mechanics in Angular", + "link": "https://blog.angularindepth.com/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular-103fbdb397bf", + "text": "You probably know that Angular introduced a new powerful HTTP client in version 4.3. One of its major features was request interception — the ability to declare interceptors which sit in between your application and the backend." + }, + { + "title": "Enhance Components with Directives", + "link": "https://blog.angularindepth.com/enhance-components-with-directives-58f16c4ca1f", + "text": "One element of part 4 of Kent C. Dodds’ series that I didn’t touch on in the previous article is the fact that the withToggle higher order component is able to pull common logic out of the , , and components. There wasn’t very much logic happening in those components in the last article, but what if there were?" + }, + { + "title": "Communicate Between Components Using Dependency Injection", + "link": "https://blog.angularindepth.com/communicate-between-components-using-dependency-injection-d7280567faa7", + "text": "There is another problem we’ve found with our component. We can’t have more than one or component in the same and a that is inside of another custom component won’t be picked up by the @ContentChild decorator." + }, + { + "title": "Build a Toggle Component", + "link": "https://blog.angularindepth.com/build-a-toggle-component-6e8f44889c2c", + "text": "Just like in Kent C. Dodds’ Advanced React Component Patterns, we will use a relatively simple component to illustrate these patterns. The component is responsible for managing a singleboolean property: on." + }, + { + "title": "Introducing Advanced Angular Component Patterns", + "link": "https://blog.angularindepth.com/introducing-advanced-angular-component-patterns-13e102e6bbfc", + "text": "This series of posts is my small attempt to broaden my own view by providing a translation of Kent C. Dodds’ Advanced React Patterns in Angular. My goal is to foster learning and sharing rather than criticism." + }, + { + "title": "Top 10 Angular articles in 2017 from Angular-In-Depth you really want to read", + "link": "https://blog.angularindepth.com/top-10-angular-articles-in-2017-from-angularindepth-you-really-want-to-read-153ae6e497d4", + "text": "Almost one year ago I started Angular-In-Depth medium publication with the goal to become the largest and most technical Angular publication on medium. I was lucky to get on board very talented and knowledgeable guys Uri Shaked, Nicholas Jamieson and Chaz Gatian." + }, + { + "title": "Practical RxJS In The Wild 🦁— Requests with concatMap() vs mergeMap() vs forkJoin() 🥊", + "link": "https://blog.angularindepth.com/practical-rxjs-in-the-wild-requests-with-concatmap-vs-mergemap-vs-forkjoin-11e5b2efe293", + "text": "I would like to share with you experience acquired by working on a yet another Hacker News client (code name HAKAFAKA 😂 still in alpha). I have been on the road for couple months now and realized that a small coding project wouldn’t hurt." + }, + { + "title": "He who thinks change detection is depth-first and he who thinks it’s breadth-first are both usually right", + "link": "https://blog.angularindepth.com/he-who-thinks-change-detection-is-depth-first-and-he-who-thinks-its-breadth-first-are-both-usually-8b6bf24a63e6", + "text": "I was once asked if change detection in Angular is depth or breadth first. This basically means whether Angular first checks siblings of the current component (breadth-first) or its children (depth-first). I hadn’t given any prior thought to this question so I just went with my gut and the knowledge of internals." + }, + { + "title": "Learn to combine RxJs sequences with super intuitive interactive diagrams", + "link": "https://blog.angularindepth.com/learn-to-combine-rxjs-sequences-with-super-intuitive-interactive-diagrams-20fce8e6511", + "text": "When working on a sufficiently complex application you usually have data coming from more than one data source. It can be some multiple external data points like Firebase or several UI widgets interacting with a user. Sequence composition is a technique that enables you to create complex queries." + }, + { + "title": "React Call Return in Angular", + "link": "https://blog.angularindepth.com/react-call-return-in-angular-32a1c9751d6", + "text": "This article continues in the theme of taking React articles and reimagining them in Angular. See TemplateRefs are Angular’s Render Props and Content Directives Are Angular’s Prop Getters." + }, + { + "title": "Do you really know what unidirectional data flow means in Angular", + "link": "https://blog.angularindepth.com/do-you-really-know-what-unidirectional-data-flow-means-in-angular-a6f55cefdc63", + "text": "Most architectural patterns are not easy to grasp especially when the information that describes them is scarce. One of such patterns in Angular is unidirectional data flow. There’s no clear explanation of what that means in the official documentation and it’s only briefly mentioned in the expression guidelines and template statements sections." + }, + { + "title": "How to Reduce Action Boilerplate", + "link": "https://blog.angularindepth.com/how-to-reduce-action-boilerplate-90dc3d389e2b", + "text": "I use Redux for my application development and, to take advantage of RxJS, I use NgRx in Angular projects and redux-observable in React projects. I also use TypeScript." + }, + { + "title": "These 5 articles will make you an Angular Change Detection expert", + "link": "https://blog.angularindepth.com/these-5-articles-will-make-you-an-angular-change-detection-expert-ed530d28930", + "text": "In the last 8 months I’ve spent most of my free time reverse-engineering Angular. The topic that fascinated me the most was change detection. I’d argue that it’s the most important part of the framework since it’s responsible for the “visible” job like DOM updates, input bindings and query list updates." + }, + { + "title": "Angular CDK Portals", + "link": "https://blog.angularindepth.com/angular-cdk-portals-b02f66dd020c", + "text": "The @angular/cdk contains a concept called portals. In this post I’ll attempt to explain the concepts of a Portal, and when they should be applied. The example code in this post is referencing @angular/cdk@2.0.0-beta.12." + }, + { + "title": "Content Directives Are Angular’s Prop Getters", + "link": "https://blog.angularindepth.com/content-directives-are-angulars-prop-getters-360fdae60576", + "text": "Kent C. Dodds wrote a piece about using prop getters in React. Along with render props (see TemplateRefs Are Angular’s Render Props), prop getters allow component library authors to give users as much control of the rendering as possible — the component only needs to do its job." + }, + { + "title": "Using TransferState API in an Angular v5 Universal App", + "link": "https://blog.angularindepth.com/using-transferstate-api-in-an-angular-5-universal-app-130f3ada9e5b", + "text": "You can get a more up-to-date version at https://leanpub.com/angular-universal. Let’s illustrate this article with a concrete example. We have a weather app, displaying a list of cities in its sidebar. When you click on a city name, the app displays the current weather in this city." + }, + { + "title": "Do you still think that NgZone (zone.js) is required for change detection in Angular?", + "link": "https://blog.angularindepth.com/do-you-still-think-that-ngzone-zone-js-is-required-for-change-detection-in-angular-16f7a575afef", + "text": "Most articles I have seen strongly associate Zone(zone.js) and NgZone with change detection in Angular. And although they are definitely related, technically they are not part of one whole. Yes, Zone and NgZone is used to automatically trigger change detection as a result of async operations." + }, + { + "title": "As busy as a bee — lazy loading in the Angular CLI", + "link": "https://blog.angularindepth.com/as-busy-as-a-bee-lazy-loading-in-the-angular-cli-d2812141637f", + "text": "Angular has a programmatic API for lazy loading NgModule’s. In the Angular CLI, it has a direct dependency upon webpack’s underlying toolchain for chunk splitting and lazy loading. It’s thus (almost) impossible to use it outside of an ordinary router set-up. Custom lazy loading strategies need to use SystemJS." + }, + { + "title": "TemplateRefs are Angular’s Render Props", + "link": "https://blog.angularindepth.com/templaterefs-are-angulars-render-props-a2b97cbcc362", + "text": "As a developer that spends most of my time building Angular apps, I still love reading about what the React community is doing. We’re generally solving the same problems and innovation in one community can be leveraged in another." + }, + { + "title": "RxJS: How to Use Lettable Operators with Promises", + "link": "https://blog.angularindepth.com/rxjs-how-to-use-lettable-operators-and-promises-2e717313bf76", + "text": "Converting observables to promises is an antipattern. Unless you are integrating observables with a promise-based API, there is no reason to convert an observable into a promise." + }, + { + "title": "RxJS: Pipelining Lettable Operators", + "link": "https://blog.angularindepth.com/rxjs-pipelining-lettable-operators-f92f6843d817", + "text": "Earlier this week, a TC39 proposal for a pipeline operator moved to stage-1. If the proposal is eventually accepted and included in the ECMAScript standard — it has a long way to go — it will offer a new syntax for lettable operators." + }, + { + "title": "I reverse-engineered Zones (zone.js) and here is what I’ve found", + "link": "https://blog.angularindepth.com/i-reverse-engineered-zones-zone-js-and-here-is-what-ive-found-1f48dc87659b", + "text": "Zones is a new mechanism that helps developers work with multiple logically-connected async operations. Zones work by associating each async operation with a zone." + }, + { + "title": "RxJS: Understanding Lettable Operators", + "link": "https://blog.angularindepth.com/rxjs-understanding-lettable-operators-fe74dda186d3", + "text": "Lettable operators offer a new way of composing observable chains and they have advantages for both application developers and library authors. Let’s look briefly at the existing composition mechanisms in RxJS and then look at lettable operators in more detail." + }, + { + "title": "The essential difference between Constructor and ngOnInit in Angular", + "link": "https://blog.angularindepth.com/the-essential-difference-between-constructor-and-ngoninit-in-angular-c9930c209a42", + "text": "One of the most popular Angular questions on stackoverflow is Difference between Constructor and ngOnInit with over 100k views. I gave my answer to this question there but also decided to expand on it in this article." + }, + { + "title": "RxJS: How to Use refCount", + "link": "https://blog.angularindepth.com/rxjs-how-to-use-refcount-73a0c6619a4e", + "text": "My previous article — Understanding the publish and share Operators — looked only briefly at the refCount method. Let’s look at it more closely here." + }, + { + "title": "The essential difference between pure and impure pipes in Angular and why that matters", + "link": "https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068", + "text": "When writing a custom pipe in Angular you can specify whether you define a pure or an impure pipe. Angular has a pretty good documentation on pipes that you can find here. But as it often happens with documentation the clearly reasoning for division is missing." + }, + { + "title": "RxJS: Understanding the publish and share Operators", + "link": "https://blog.angularindepth.com/rxjs-understanding-the-publish-and-share-operators-16ea2f446635", + "text": "I’m often asked questions that relate to the publish operator: What’s the difference between publish and share? How do I import the refCount operator? When should I use an AsyncSubject? Let’s answer these questions — and more — by starting with the basics." + }, + { + "title": "If you think `ngDoCheck` means your component is being checked — read this article", + "link": "https://blog.angularindepth.com/if-you-think-ngdocheck-means-your-component-is-being-checked-read-this-article-36ce63a3f3e5", + "text": "There’s one question that comes up again and again on stackoverflow. The question is about ngDoCheck lifecycle hook that is triggered for a component that implements OnPush change detection strategy." + } +]