fix(kit): InputYear fix dropdown paddings (#6431)

taiga-family · Jan 11, 2024 · ee8316f · ee8316f
1 parent a13e88a
commit ee8316f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/projects/kit/components/input-year/input-year.module.ts b/projects/kit/components/input-year/input-year.module.ts
@@ -1,10 +1,10 @@
 import {NgModule} from '@angular/core';
 import {MaskitoModule} from '@maskito/angular';
-import {TuiPreventDefaultModule} from '@taiga-ui/cdk';
 import {
     TuiHostedDropdownModule,
     TuiPrimitiveTextfieldModule,
     TuiPrimitiveYearPickerModule,
+    TuiScrollbarModule,
     TuiTextfieldComponent,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
@@ -19,7 +19,7 @@ import {TuiInputYearDirective} from './input-year.directive';
         TuiHostedDropdownModule,
         TuiPrimitiveTextfieldModule,
         TuiPrimitiveYearPickerModule,
-        TuiPreventDefaultModule,
+        TuiScrollbarModule,
         TuiTextfieldControllerModule,
         TuiToYearPipeModule,
     ],

diff --git a/projects/kit/components/input-year/input-year.style.less b/projects/kit/components/input-year/input-year.style.less
@@ -11,6 +11,16 @@
     border-radius: inherit;
 }
 
+.t-container {
+    width: 15.75rem;
+    padding: 1rem 1.125rem;
+}
+
+.t-scrollbar {
+    height: 18.25rem;
+    width: 16.875rem;
+}
+
 .t-textfield {
     border-radius: inherit;
     text-align: inherit;

diff --git a/projects/kit/components/input-year/input-year.template.html b/projects/kit/components/input-year/input-year.template.html
@@ -28,14 +28,18 @@
     </tui-primitive-textfield>
 
     <ng-template #dropdown>
-        <tui-primitive-year-picker
-            tuiPreventDefault="mousedown"
-            [disabledItemHandler]="disabledItemHandler"
-            [initialItem]="value || initialItem | tuiToYear"
-            [max]="computedMax | tuiToYear"
-            [min]="computedMin | tuiToYear"
-            [value]="value === null ? null : (value | tuiToYear)"
-            (yearClick)="onYearClick($event)"
-        ></tui-primitive-year-picker>
+        <div class="t-container">
+            <tui-scrollbar class="t-scrollbar">
+                <tui-primitive-year-picker
+                    [disabledItemHandler]="disabledItemHandler"
+                    [initialItem]="value || initialItem | tuiToYear"
+                    [max]="computedMax | tuiToYear"
+                    [min]="computedMin | tuiToYear"
+                    [value]="value === null ? null : (value | tuiToYear)"
+                    (mousedown.prevent.silent)="(0)"
+                    (yearClick)="onYearClick($event)"
+                ></tui-primitive-year-picker>
+            </tui-scrollbar>
+        </div>
     </ng-template>
 </tui-hosted-dropdown>
diff --git a/...cts/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts b/...cts/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts
@@ -56,7 +56,7 @@ describe('PrimitiveRangeCalendar component', () => {
         });
 
         it('Returns min when initialized with default less than min', () => {
-            const minDate = new TuiDay(2024, 1, 1);
+            const minDate = TuiDay.currentLocal().append({month: 2});
 
             component.min = minDate;
             component.ngOnInit();
@@ -90,7 +90,7 @@ describe('PrimitiveRangeCalendar component', () => {
         });
 
         it('Returns min when initialized with default less than min', () => {
-            const minDate = new TuiDay(2024, 1, 1);
+            const minDate = TuiDay.currentLocal().append({month: 2});
 
             component.min = minDate;
             component.ngOnInit();