diff --git a/apps/doc/src/app/components/input/carousel/carousel-example.component.html b/apps/doc/src/app/components/input/carousel/carousel-example.component.html index 2381057434..277d8ad0c2 100644 --- a/apps/doc/src/app/components/input/carousel/carousel-example.component.html +++ b/apps/doc/src/app/components/input/carousel/carousel-example.component.html @@ -1,23 +1,32 @@ - + - + - + + + + + diff --git a/apps/doc/src/app/components/input/carousel/carousel-example.component.ts b/apps/doc/src/app/components/input/carousel/carousel-example.component.ts index a16f829107..dc208dd63e 100644 --- a/apps/doc/src/app/components/input/carousel/carousel-example.component.ts +++ b/apps/doc/src/app/components/input/carousel/carousel-example.component.ts @@ -25,14 +25,17 @@ export class PrizmCarouselExampleComponent { public required = false; carouselContent = new PrizmCarouselArrayContent([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item, el) => item === el); lightMode = false; + public readonly zyfraCarouselBasicExample: TuiDocExample = { TypeScript: import('!!raw-loader!./examples/carousel-basic-example/carousel-basic-example.component.ts'), HTML: import('!!raw-loader!./examples/carousel-basic-example/carousel-basic-example.component.html'), }; + public readonly zyfraCarouselLightExample: TuiDocExample = { TypeScript: import('!!raw-loader!./examples/carousel-light-example/carousel-light-example.component.ts'), HTML: import('!!raw-loader!./examples/carousel-light-example/carousel-light-example.component.html'), }; + public readonly zyfraCarouselArrayofObjectsExample: TuiDocExample = { TypeScript: import( '!!raw-loader!./examples/carousel-array-of-objects-example/carousel-array-of-objects-example.component.ts' @@ -52,5 +55,11 @@ export class PrizmCarouselExampleComponent { PIPE: import('!!raw-loader!./examples/carousel-year-month-example/month.pipe.ts'), }; + public readonly carouselAsInputExample: TuiDocExample = { + Module: import('!!raw-loader!./examples/input-as-carousel/input-as-carousel.module.ts'), + Component: import('!!raw-loader!./examples/input-as-carousel/input-as-carousel.component.ts'), + HTML: import('!!raw-loader!./examples/input-as-carousel/input-as-carousel.component.html'), + }; + readonly setupModule: RawLoaderContent = import('!!raw-loader!./examples/setup-module.md'); } diff --git a/apps/doc/src/app/components/input/carousel/carousel-example.module.ts b/apps/doc/src/app/components/input/carousel/carousel-example.module.ts index 30ad1c1d71..5443e84707 100644 --- a/apps/doc/src/app/components/input/carousel/carousel-example.module.ts +++ b/apps/doc/src/app/components/input/carousel/carousel-example.module.ts @@ -11,6 +11,7 @@ import { PrizmCarouselLightExampleComponent } from './examples/carousel-light-ex import { PrizmCarouselArrayOfObjectsExampleComponent } from './examples/carousel-array-of-objects-example/carousel-array-of-objects-example.component'; import { PrizmCarouselYearMonthExampleComponent } from './examples/carousel-year-month-example/carousel-year-month-example.component'; import { PrizmMonthExamplePipe } from './examples/carousel-year-month-example/month.pipe'; +import { PrizmInputAsCarouselExampleModule } from './examples/input-as-carousel/input-as-carousel.module'; @NgModule({ imports: [ @@ -20,6 +21,7 @@ import { PrizmMonthExamplePipe } from './examples/carousel-year-month-example/mo ReactiveFormsModule, FormsModule, PrizmCarouselModule, + PrizmInputAsCarouselExampleModule, ], declarations: [ PrizmCarouselExampleComponent, diff --git a/apps/doc/src/app/components/input/carousel/examples/carousel-year-month-example/carousel-year-month-example.component.ts b/apps/doc/src/app/components/input/carousel/examples/carousel-year-month-example/carousel-year-month-example.component.ts index cfe4cdd0fc..9677a487f9 100644 --- a/apps/doc/src/app/components/input/carousel/examples/carousel-year-month-example/carousel-year-month-example.component.ts +++ b/apps/doc/src/app/components/input/carousel/examples/carousel-year-month-example/carousel-year-month-example.component.ts @@ -1,5 +1,5 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { PrizmCarouselYearMonth, PrizmCarouselPrizmCarouselYearMonthValue } from '@prizm-ui/components'; +import { PrizmCarouselYearMonth, PrizmCarouselYearMonthValue } from '@prizm-ui/components'; @Component({ selector: 'prizm-carousel-year-month-example', @@ -9,7 +9,7 @@ import { PrizmCarouselYearMonth, PrizmCarouselPrizmCarouselYearMonthValue } from }) export class PrizmCarouselYearMonthExampleComponent { carouselContent = new PrizmCarouselYearMonth(); - currentValue: PrizmCarouselPrizmCarouselYearMonthValue; + currentValue: PrizmCarouselYearMonthValue; constructor() { const currentDate = new Date(); diff --git a/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.html b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.html new file mode 100644 index 0000000000..e214b49361 --- /dev/null +++ b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.html @@ -0,0 +1,15 @@ + + + + + diff --git a/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.less b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.ts b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.ts new file mode 100644 index 0000000000..a85394aa6b --- /dev/null +++ b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.ts @@ -0,0 +1,32 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + selector: 'prizm-input-as-carousel-example', + templateUrl: './input-as-carousel.component.html', + styleUrls: ['./input-as-carousel.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PrizmCarouselInputAsCarouselExampleComponent { + currentIndex = 2; + carouselData = ['prizm1', 'prizm2', 'prizm3', 'prizm4', 'prizm5']; + + public prev(): void { + if (this.currentIndex === 0) { + this.currentIndex = this.carouselData.length - 1; + } else { + this.currentIndex--; + } + } + + public next(): void { + if (this.currentIndex === this.carouselData.length - 1) { + this.currentIndex = 0; + } else { + this.currentIndex++; + } + } + + public setValue(value: string): void { + this.carouselData[this.currentIndex] = value; + } +} diff --git a/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.module.ts b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.module.ts new file mode 100644 index 0000000000..9c9662c565 --- /dev/null +++ b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { PrizmInputCommonModule, PrizmInputTextModule } from '@prizm-ui/components'; +import { PrizmCarouselInputAsCarouselExampleComponent } from './input-as-carousel.component'; + +@NgModule({ + imports: [PrizmInputCommonModule, PrizmInputTextModule], + declarations: [PrizmCarouselInputAsCarouselExampleComponent], + exports: [PrizmCarouselInputAsCarouselExampleComponent], +}) +export class PrizmInputAsCarouselExampleModule {} diff --git a/apps/doc/src/app/components/splitter/examples/size-setting/size-setting.component.html b/apps/doc/src/app/components/splitter/examples/size-setting/size-setting.component.html index 154471e4ae..651e81eba4 100644 --- a/apps/doc/src/app/components/splitter/examples/size-setting/size-setting.component.html +++ b/apps/doc/src/app/components/splitter/examples/size-setting/size-setting.component.html @@ -59,4 +59,8 @@ + + diff --git a/libs/components/src/lib/components/input/carousel/carousel-content/carousel-year-month.class.ts b/libs/components/src/lib/components/input/carousel/carousel-content/carousel-year-month.class.ts index ee8d382813..2044b00550 100644 --- a/libs/components/src/lib/components/input/carousel/carousel-content/carousel-year-month.class.ts +++ b/libs/components/src/lib/components/input/carousel/carousel-content/carousel-year-month.class.ts @@ -1,17 +1,14 @@ import { prizmDefaultCarouselControlsState, PrizmCarouselContent } from './carousel-content.interface'; -export type PrizmCarouselPrizmCarouselYearMonthValue = { year: number; month: number }; +export type PrizmCarouselYearMonthValue = { year: number; month: number }; export class PrizmCarouselYearMonth implements PrizmCarouselContent { - currentValue: PrizmCarouselPrizmCarouselYearMonthValue = undefined; + currentValue: PrizmCarouselYearMonthValue = undefined; - public min: PrizmCarouselPrizmCarouselYearMonthValue = { month: 1, year: Number.NEGATIVE_INFINITY }; - public max: PrizmCarouselPrizmCarouselYearMonthValue = { month: 12, year: Number.POSITIVE_INFINITY }; + public min: PrizmCarouselYearMonthValue = { month: 1, year: Number.NEGATIVE_INFINITY }; + public max: PrizmCarouselYearMonthValue = { month: 12, year: Number.POSITIVE_INFINITY }; - constructor( - min?: PrizmCarouselPrizmCarouselYearMonthValue, - max?: PrizmCarouselPrizmCarouselYearMonthValue - ) { + constructor(min?: PrizmCarouselYearMonthValue, max?: PrizmCarouselYearMonthValue) { if (min) { this.min = min; } @@ -23,7 +20,7 @@ export class PrizmCarouselYearMonth implements PrizmCarouselContent { public controlsState = { ...prizmDefaultCarouselControlsState }; - public setCurrentValue(element: PrizmCarouselPrizmCarouselYearMonthValue): void { + public setCurrentValue(element: PrizmCarouselYearMonthValue): void { this.currentValue = element; this.updateControlsState(); } @@ -106,8 +103,8 @@ export class PrizmCarouselYearMonth implements PrizmCarouselContent { } private compare( - value1: PrizmCarouselPrizmCarouselYearMonthValue, - value2: PrizmCarouselPrizmCarouselYearMonthValue + value1: PrizmCarouselYearMonthValue, + value2: PrizmCarouselYearMonthValue ): 'lt' | 'eq' | 'gt' { if (value1.year < value2.year) { return 'lt';