-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: (Core) introduce new Carousel component (#3551)
* refactor * fix:added test cases carousel service * carousel service addeed with rtl * fix:swiping, looping working fix: duplicate code removed * fix:cards used in example unnecessary changes removed error removed * fix:looped carousel bug * fix:multiple item swipe in one time * fix:Internet explorer width height handling * addressed deno's comments * AfterViewChecked added * fix:taborder handling with visibility
- Loading branch information
1 parent
0e1321f
commit 2c625cb
Showing
38 changed files
with
2,587 additions
and
267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
apps/docs/src/app/core/component-docs/carousel/carousel-docs.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <fd-docs-section-title id="carousel-default-example" componentName="carousel"> | ||
| Carousel with one active item | ||
| </fd-docs-section-title> | ||
| <description> | ||
| By default fd-carousel displays one active item and others remains hidden. Pagination container appears on bottom | ||
| with dot indicators with active dot to show active item. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-one-active-item></fd-carousel-one-active-item> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselSingle"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-multi-item-active" componentName="carousel"> | ||
| Carousel with vertical direction | ||
| </fd-docs-section-title> | ||
| <description> | ||
| carousel movement is possible in vertical direction as well. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-vertical-direction></fd-carousel-vertical-direction> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselVertical"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-multi-item-active" componentName="carousel"> | ||
| Carousel with multiple active item | ||
| </fd-docs-section-title> | ||
| <description> | ||
| Carousel can display multiple active item at a time as well. On left navigation button click, right most item hides | ||
| and a new item is shown on left side. On right navigation button click, left most item hides and a new item is shown | ||
| on right side. <code>visibleSlidesCount</code> property is used to set, how many item will be active at a time. Ex. | ||
| <code>visibleSlidesCount=3</code>. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-multiple-active-item></fd-carousel-multiple-active-item> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselMultiItem"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-no-page-indicator" componentName="carousel"> | ||
| Carousel with no page indicator | ||
| </fd-docs-section-title> | ||
| <description> | ||
| Page indicator is optional in carousel. It has option to hide page indicator by setting | ||
| <code>pageIndicator=false</code>. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-no-page-indicator></fd-carousel-no-page-indicator> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselNoIndicator"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-hidden-navigation" componentName="carousel"> | ||
| Carousel with hidden navigation buttons | ||
| </fd-docs-section-title> | ||
| <description> | ||
| In Mobile display, navigation buttons are not required for carousel. Navigation will be done by swiping the active | ||
| item, either left side or right side. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-hidden-navigation></fd-carousel-hidden-navigation> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselHiddenNavigation"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-content-navigation" componentName="carousel"> | ||
| Carousel with navigation inside content area | ||
| </fd-docs-section-title> | ||
| <description> | ||
| Navigation buttons can be placed in page indicator as well as inside content area.By default navigation button is | ||
| placed inside page indicator container. For placing navigation button | ||
| inside content area use <code>navigatorInPageIndicator=false</code>. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-content-navigation></fd-carousel-content-navigation> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselContentNavigator"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-looped-navigation" componentName="carousel"> | ||
| Carousel with looped navigation | ||
| </fd-docs-section-title> | ||
| <description> | ||
| Carousel item navigation can be looped by setting <code>loop=true</code>. By default <code>loop</code> | ||
| is false and looping is not enabled on carousel. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-looped-navigation></fd-carousel-looped-navigation> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselLoopedNavigation"></code-example> | ||
|
|
||
| <fd-docs-section-title id="carousel-error-message" componentName="carousel"> | ||
| Carousel error message when no item is loaded | ||
| </fd-docs-section-title> | ||
| <description> | ||
| Error message can be displayed as carousel content when loading item is not successful. | ||
| </description> | ||
| <component-example> | ||
| <fd-carousel-error-message></fd-carousel-error-message> | ||
| </component-example> | ||
| <code-example [exampleFiles]="carouselErrorMessage"></code-example> |
144 changes: 144 additions & 0 deletions
144
apps/docs/src/app/core/component-docs/carousel/carousel-docs.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import { Component } from '@angular/core'; | ||
| import * as carouselOneActiveItemTs from '!raw-loader!./examples/carousel-one-active-item.component.ts'; | ||
| import * as carouselOneActiveItemHtml from '!raw-loader!./examples/carousel-one-active-item.component.html'; | ||
| import * as carouselVerticalTs from '!raw-loader!./examples/carousel-vertical-direction.component.ts'; | ||
| import * as carouselVerticalHtml from '!raw-loader!./examples/carousel-vertical-direction.component.html'; | ||
| import * as carouselMultipleActiveItemTs from '!raw-loader!./examples/carousel-multiple-active-item.component.ts'; | ||
| import * as carouselMultipleActiveItemHtml from '!raw-loader!./examples/carousel-multiple-active-item.component.html'; | ||
| import * as carouselNoIndicatorTs from '!raw-loader!./examples/carousel-no-page-indicator.component.ts'; | ||
| import * as carouselNoIndicatorHtml from '!raw-loader!./examples/carousel-no-page-indicator.component.html'; | ||
| import * as carouselHiddenNavigationTs from '!raw-loader!./examples/carousel-hidden-navigation.component.ts'; | ||
| import * as carouselHiddenNavigationHtml from '!raw-loader!./examples/carousel-hidden-navigation.component.html'; | ||
| import * as carouselContentNavigatorTs from '!raw-loader!./examples/carousel-content-navigation.component.ts'; | ||
| import * as carouselContentNavigatorHtml from '!raw-loader!./examples/carousel-content-navigation.component.html'; | ||
| import * as carouselLoopedNavigationTs from '!raw-loader!./examples/carousel-looped-navigation.component.ts'; | ||
| import * as carouselLoopedNavigationHtml from '!raw-loader!./examples/carousel-looped-navigation.component.html'; | ||
| import * as carouselErrorMessageTs from '!raw-loader!./examples/carousel-error-message.component.ts'; | ||
| import * as carouselErrorMessageHtml from '!raw-loader!./examples/carousel-error-message.component.html'; | ||
| import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-input', | ||
| templateUrl: './carousel-docs.component.html' | ||
| }) | ||
| export class CarouselDocsComponent { | ||
| carouselSingle: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-one-active-item', | ||
| component: 'CarouselOneActiveItemComponent', | ||
| code: carouselOneActiveItemHtml | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-one-active-item', | ||
| component: 'CarouselOneActiveItemComponent', | ||
| code: carouselOneActiveItemTs | ||
| } | ||
| ]; | ||
|
|
||
| carouselVertical: ExampleFile[] = [ | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-vertical-direction', | ||
| component: 'CarouselVerticalDirectionComponent', | ||
| code: carouselVerticalHtml | ||
| }, | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-vertical-direction', | ||
| component: 'CarouselVerticalDirectionComponent', | ||
| code: carouselVerticalTs | ||
| } | ||
| ]; | ||
|
|
||
| carouselMultiItem: ExampleFile[] = [ | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-multiple-active-item', | ||
| component: 'CarouselMultipleActiveItemComponent', | ||
| code: carouselMultipleActiveItemTs | ||
| }, | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-multiple-active-item', | ||
| component: 'CarouselMultipleActiveItemComponent', | ||
| code: carouselMultipleActiveItemHtml | ||
| } | ||
| ]; | ||
|
|
||
| carouselNoIndicator: ExampleFile[] = [ | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-no-page-indicator', | ||
| component: 'CarouselNoPageIndicatorComponent', | ||
| code: carouselNoIndicatorTs | ||
| }, | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-no-page-indicator', | ||
| component: 'CarouselNoPageIndicatorComponent', | ||
| code: carouselNoIndicatorHtml | ||
| } | ||
| ]; | ||
|
|
||
| carouselHiddenNavigation: ExampleFile[] = [ | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-hidden-navigation', | ||
| component: 'CarouselHiddenNavigationComponent', | ||
| code: carouselHiddenNavigationTs | ||
| }, | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-hidden-navigation', | ||
| component: 'CarouselHiddenNavigationComponent', | ||
| code: carouselHiddenNavigationHtml | ||
| } | ||
| ]; | ||
|
|
||
| carouselContentNavigator: ExampleFile[] = [ | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-content-navigation', | ||
| component: 'CarouselContentNavigationComponent', | ||
| code: carouselContentNavigatorTs | ||
| }, | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-content-navigation', | ||
| component: 'CarouselContentNavigationComponent', | ||
| code: carouselContentNavigatorHtml | ||
| } | ||
| ]; | ||
|
|
||
| carouselLoopedNavigation: ExampleFile[] = [ | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-looped-navigation', | ||
| component: 'CarouselLoopedNavigationComponent', | ||
| code: carouselLoopedNavigationTs | ||
| }, | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-looped-navigation', | ||
| component: 'CarouselLoopedNavigationComponent', | ||
| code: carouselLoopedNavigationHtml | ||
| } | ||
| ]; | ||
|
|
||
| carouselErrorMessage: ExampleFile[] = [ | ||
| { | ||
| language: 'typescript', | ||
| fileName: 'carousel-error-message', | ||
| component: 'CarouselErrorMessageComponent', | ||
| code: carouselErrorMessageTs | ||
| }, | ||
| { | ||
| language: 'html', | ||
| fileName: 'carousel-error-message', | ||
| component: 'CarouselErrorMessageComponent', | ||
| code: carouselErrorMessageHtml | ||
| } | ||
| ]; | ||
| } |
52 changes: 52 additions & 0 deletions
52
apps/docs/src/app/core/component-docs/carousel/carousel-docs.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { RouterModule, Routes } from '@angular/router'; | ||
| import { CarouselModule, CardModule, ListModule, TableModule } from '@fundamental-ngx/core'; | ||
| import { SharedDocumentationPageModule } from '../../../documentation/shared-documentation-page.module'; | ||
| import { ApiComponent } from '../../../documentation/core-helpers/api/api.component'; | ||
| import { API_FILES } from '../../api-files'; | ||
| import { CarouselHeaderComponent } from './carousel-header/carousel-header.component'; | ||
| import { CarouselDocsComponent } from './carousel-docs.component'; | ||
| import { CarouselOneActiveItemComponent } from './examples/carousel-one-active-item.component'; | ||
| import { CarouselVerticalDirectionComponent } from './examples/carousel-vertical-direction.component'; | ||
| import { CarouselNoPageIndicatorComponent } from './examples/carousel-no-page-indicator.component'; | ||
| import { CarouselMultipleActiveItemComponent } from './examples/carousel-multiple-active-item.component'; | ||
| import { CarouselHiddenNavigationComponent } from './examples/carousel-hidden-navigation.component'; | ||
| import { CarouselContentNavigationComponent } from './examples/carousel-content-navigation.component'; | ||
| import { CarouselLoopedNavigationComponent } from './examples/carousel-looped-navigation.component'; | ||
| import { CarouselErrorMessageComponent } from './examples/carousel-error-message.component'; | ||
|
|
||
| const routes: Routes = [ | ||
| { | ||
| path: '', | ||
| component: CarouselHeaderComponent, | ||
| children: [ | ||
| { path: '', component: CarouselDocsComponent }, | ||
| { path: 'api', component: ApiComponent, data: { content: API_FILES.carousel } } | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| RouterModule.forChild(routes), | ||
| SharedDocumentationPageModule, | ||
| CarouselModule, | ||
| CardModule, | ||
| ListModule, | ||
| TableModule | ||
| ], | ||
| exports: [RouterModule], | ||
| declarations: [ | ||
| CarouselDocsComponent, | ||
| CarouselHeaderComponent, | ||
| CarouselOneActiveItemComponent, | ||
| CarouselVerticalDirectionComponent, | ||
| CarouselMultipleActiveItemComponent, | ||
| CarouselNoPageIndicatorComponent, | ||
| CarouselHiddenNavigationComponent, | ||
| CarouselContentNavigationComponent, | ||
| CarouselLoopedNavigationComponent, | ||
| CarouselErrorMessageComponent | ||
| ] | ||
| }) | ||
| export class CarouselDocsModule {} |
10 changes: 10 additions & 0 deletions
10
.../docs/src/app/core/component-docs/carousel/carousel-header/carousel-header.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <header>Carousel</header> | ||
| <description> | ||
| The carousel allows the user to browse through a set of items. It can display one or several items at a time. From | ||
| the displayed item or items, the user can navigate to either the next or the previous item. Optionally, a paging | ||
| indicator displays the user’s current position inside the set of items. | ||
| </description> | ||
| <import module="CarouselModule"></import> | ||
|
|
||
| <fd-header-tabs></fd-header-tabs> | ||
| <router-outlet></router-outlet> |
7 changes: 7 additions & 0 deletions
7
apps/docs/src/app/core/component-docs/carousel/carousel-header/carousel-header.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-carousel-header', | ||
| templateUrl: './carousel-header.component.html' | ||
| }) | ||
| export class CarouselHeaderComponent {} |
39 changes: 39 additions & 0 deletions
39
.../src/app/core/component-docs/carousel/examples/carousel-content-navigation.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <div style="display: flex; justify-content: center;"> | ||
| <fd-carousel [navigatorInPageIndicator]="false" carouselIndicatorsOrientation="top" width="500px"> | ||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/1" alt="first image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/2" alt="second image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/3" alt="third image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/4" alt="forth image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/5" alt="fifth image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/6" alt="sixth image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/7" alt="seventh image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/nature/8" alt="eight image"> | ||
| </fd-carousel-item> | ||
|
|
||
| <fd-carousel-item> | ||
| <img src="http://placeimg.com/500/500/sports/1" alt="ninth image"> | ||
| </fd-carousel-item> | ||
| </fd-carousel> | ||
| </div> |
9 changes: 9 additions & 0 deletions
9
...cs/src/app/core/component-docs/carousel/examples/carousel-content-navigation.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-carousel-content-navigation', | ||
| templateUrl: './carousel-content-navigation.component.html', | ||
| styles: ['fd-carousel:focus {outline: 1px dotted}', 'img {pointer-events: none;}'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class CarouselContentNavigationComponent {} |
10 changes: 10 additions & 0 deletions
10
.../docs/src/app/core/component-docs/carousel/examples/carousel-error-message.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div style="display: flex; justify-content: center;"> | ||
| <fd-carousel width="500px" height="400px"> | ||
| <div style="width: 100%; display: flex; flex-direction: column;"> | ||
| <div style="align-self: center;"> | ||
| <i class="sap-icon--document"></i> | ||
| </div> | ||
| <div style="align-self: center;">Items could not be loaded</div> | ||
| </div> | ||
| </fd-carousel> | ||
| </div> |
9 changes: 9 additions & 0 deletions
9
apps/docs/src/app/core/component-docs/carousel/examples/carousel-error-message.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'fd-carousel-error-message', | ||
| templateUrl: './carousel-error-message.component.html', | ||
| styles: ['fd-carousel:focus {outline: 1px dotted}', 'img {pointer-events: none;}'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class CarouselErrorMessageComponent {} |
Oops, something went wrong.