From 830cbc6a51ec8e95993e20a2a6864c89776c2a49 Mon Sep 17 00:00:00 2001 From: Konstantin Skok Date: Tue, 31 Jan 2023 18:03:08 +0300 Subject: [PATCH 1/3] docs (components/input) input as carousel example fix --- .../carousel/carousel-example.component.html | 4 +++ .../carousel/carousel-example.component.ts | 9 ++++++ .../input/carousel/carousel-example.module.ts | 2 ++ .../input-as-carousel.component.html | 15 +++++++++ .../input-as-carousel.component.less | 0 .../input-as-carousel.component.ts | 32 +++++++++++++++++++ .../input-as-carousel.module.ts | 11 +++++++ 7 files changed, 73 insertions(+) create mode 100644 apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.html create mode 100644 apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.less create mode 100644 apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.ts create mode 100644 apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.module.ts 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..07fe31671d 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 @@ -18,6 +18,10 @@ + + + + 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/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..8fd18dc059 --- /dev/null +++ b/apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.module.ts @@ -0,0 +1,11 @@ +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 {} + From 71fba7f07632aa8e68c60c866de4ee6932f12d97 Mon Sep 17 00:00:00 2001 From: Konstantin Skok Date: Tue, 31 Jan 2023 18:05:03 +0300 Subject: [PATCH 2/3] docs (components/splitter) Update set sizing example --- .../input-as-carousel.module.ts | 21 +++++++++---------- .../size-setting/size-setting.component.html | 4 ++++ 2 files changed, 14 insertions(+), 11 deletions(-) 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 index 8fd18dc059..9c9662c565 100644 --- 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 @@ -1,11 +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 {} - +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 @@ + + From 1d091475551edc17d8e83e7e659a27bf13e3cff2 Mon Sep 17 00:00:00 2001 From: Konstantin Skok Date: Wed, 1 Feb 2023 18:35:42 +0300 Subject: [PATCH 3/3] refactor (components/carousel) change type PrizmCarouselYearMonthValue -> PrizmCarouselYearMonthValue --- .../carousel/carousel-example.component.html | 13 +++++++++---- .../carousel-year-month-example.component.ts | 4 ++-- .../carousel-year-month.class.ts | 19 ++++++++----------- 3 files changed, 19 insertions(+), 17 deletions(-) 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 07fe31671d..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,25 +1,30 @@ - + - + - + - + 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/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';