docs (components/input) input as carousel example

apps/doc/src/app/components/input/carousel/carousel-example.component.html

@@ -1,23 +1,32 @@
 <prizm-doc-page header="Carousel" type="components">
   <ng-template prizmDocPageTab>
-    <prizm-doc-example heading="Basic example" [content]="zyfraCarouselBasicExample">
+    <prizm-doc-example heading="Basic example" [content]="zyfraCarouselBasicExample" id="basic">
       <prizm-carousel-basic-example></prizm-carousel-basic-example>
     </prizm-doc-example>
 
-    <prizm-doc-example heading="Carousel light example" [content]="zyfraCarouselLightExample">
+    <prizm-doc-example heading="Carousel light example" [content]="zyfraCarouselLightExample" id="light">
       <prizm-carousel-light-example></prizm-carousel-light-example>
     </prizm-doc-example>
 
     <prizm-doc-example
       heading="Carousel array of objects example"
       [content]="zyfraCarouselArrayofObjectsExample"
+      id="objects-array"
     >
       <prizm-carousel-array-of-objects-example></prizm-carousel-array-of-objects-example>
     </prizm-doc-example>
 
-    <prizm-doc-example heading="Carousel select month example" [content]="zyfraCarouselYearMonthExample">
+    <prizm-doc-example
+      heading="Carousel select month example"
+      [content]="zyfraCarouselYearMonthExample"
+      id="select-month"
+    >
       <prizm-carousel-year-month-example></prizm-carousel-year-month-example>
     </prizm-doc-example>
+
+    <prizm-doc-example heading="Input carousel" [content]="carouselAsInputExample" id="input-carousel">
+      <prizm-input-as-carousel-example></prizm-input-as-carousel-example>
+    </prizm-doc-example>
   </ng-template>
 
   <ng-template prizmDocPageTab prizmDocHost>

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');
 }

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,

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();

apps/doc/src/app/components/input/carousel/examples/input-as-carousel/input-as-carousel.component.html

@@ -0,0 +1,15 @@
+<prizm-input-layout [label]="'Инпут как карусель'" [size]="'l'" [outer]="true" [position]="'center'">
+  <button
+    prizmInputIconButton="chevrons-left"
+    [interactive]="true"
+    prizm-input-left
+    (click)="prev()"
+  ></button>
+  <input prizmInput #input [value]="carouselData[currentIndex]" (valueChanged)="setValue($event)" />
+  <button
+    prizmInputIconButton="chevrons-right"
+    [interactive]="true"
+    prizm-input-right
+    (click)="next()"
+  ></button>
+</prizm-input-layout>

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;
+  }
+}

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 {}

apps/doc/src/app/components/splitter/examples/size-setting/size-setting.component.html

@@ -59,4 +59,8 @@
   <button (click)="setAreasSize([100, null, null, null])" prizmButton appearance="secondary" size="xl">
     setAreasSize([100, null, null, null])
   </button>
+
+  <button (click)="setAreasSize([100, 0, 0, 0])" prizmButton appearance="secondary" size="xl">
+    setAreasSize([100, 0, 0, 0])
+  </button>
 </div>

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';