fix(core): Calendar fix visual gaps in range (#8961)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-mobile/components/mobile-calendar-sheet/mobile-calendar-sheet.style.less

@@ -1,131 +1,84 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-@itemSize: 2.75rem;
-@accent: var(--tui-text-action);
-@faded: var(--tui-background-base-alt);
-
-.picker(@itemSize);
+.date-picker();
 
 :host {
+    display: block;
     inline-size: 20.75rem;
     // TODO: investigate problem in mobile calendar
     /* stylelint-disable-next-line */
     max-inline-size: 100vw;
 
     &._ios {
         inline-size: 22.625rem;
+
+        .t-row {
+            block-size: 3.125rem;
+            font-size: 1.0625rem;
+        }
+
+        .t-cell[data-range='start'],
+        .t-cell[data-range='end'],
+        .t-cell[data-range='active'] {
+            font-weight: 600;
+        }
     }
 }
 
 .t-row {
     block-size: 3rem;
-    justify-content: flex-start;
+    justify-content: space-between !important;
+    font-family: inherit;
+    font-size: 1.125rem;
+    padding: 0.125rem;
+    box-sizing: border-box;
 
-    &:first-child {
-        justify-content: flex-end;
+    &:first-child .t-cell:not(.t-cell_empty) ~ .t-cell_empty,
+    &:last-child .t-cell_empty {
+        display: none;
     }
 
-    :host._ios & {
-        block-size: 3.125rem;
+    &:last-child .t-cell:not(.t-cell_empty) ~ .t-cell_empty {
+        display: flex;
     }
 }
 
 .t-cell {
-    block-size: @itemSize;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
     border-radius: 100%;
     overflow: hidden;
-    margin-right: 0.25rem;
-
-    &:last-child,
-    :host._ios &:last-child {
-        margin-right: 0;
-    }
+    mask: none;
+    border: none;
+    text-decoration: none;
 
-    &::before {
-        // TODO: investigate problem in mobile calendar
-        /* stylelint-disable-next-line */
-        right: -100vw;
+    &_empty {
+        visibility: hidden;
     }
 
-    &:first-child::before {
-        // TODO: investigate problem in mobile calendar
-        /* stylelint-disable-next-line */
-        left: -100vw;
-    }
-
-    &_today::after {
-        block-size: 0.375rem;
-        inline-size: 0.375rem;
-        background-color: @accent;
-    }
-
-    &_interval {
-        &::before {
-            background-color: @faded;
+    &_today {
+        &::after {
+            content: '•';
+            text-align: center;
+            line-height: 4rem;
+            font-size: 1.5rem;
+            color: var(--tui-text-action);
         }
 
-        &:last-child:first-child::before {
-            // TODO: investigate problem in mobile calendar
-            /* stylelint-disable-next-line */
-            right: -100vw;
+        &[data-range='start']::after,
+        &[data-range='end']::after,
+        &[data-range='active']::after {
+            color: inherit;
         }
     }
 
-    &_disabled {
-        opacity: var(--tui-disabled-opacity);
-    }
-
-    &[data-range='single'],
     &[data-range='start'],
-    &[data-range='end'] {
-        border-radius: 100%;
-        background-color: @accent;
-        color: var(--tui-text-primary-on-accent-2);
+    &[data-range='end'],
+    &[data-range='active'] {
         font-weight: 500;
-
-        &::after {
-            background-color: var(--tui-background-base);
-        }
-
-        :host._ios & {
-            font-weight: 600;
-        }
-    }
-
-    &[data-range='start']::before {
-        left: 50%;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    &[data-range='end']:not(:first-child)::before {
-        left: 50%;
-        background: var(--tui-background-base);
-        border-radius: 0;
-    }
-
-    &[data-range='end']:first-child::before {
-        right: 50%;
-        background-color: @faded;
-    }
-
-    :host._ios & {
-        margin-right: 0.5625rem;
-
-        &::before {
-            border-radius: 0.5rem;
-        }
-    }
-}
-
-@media screen and (max-width: 22.4375rem) {
-    .t-cell,
-    :host._ios .t-cell {
-        margin-right: 0.125rem;
     }
 
-    .t-cell:last-child,
-    :host._ios .t-cell:last-child {
-        margin-right: 0;
+    &::after {
+        mask: none;
     }
 }

projects/addon-mobile/components/mobile-calendar-sheet/mobile-calendar-sheet.template.html

@@ -4,6 +4,10 @@
         automation-id="tui-primitive-calendar-mobile__row"
         class="t-row"
     >
+        <div
+            *tuiRepeatTimes="let index of 7 - (sheet[rowIndex]?.length ?? 0)"
+            class="t-cell t-cell_empty"
+        ></div>
         <ng-container *tuiRepeatTimes="let colIndex of sheet[rowIndex]?.length ?? 0">
             <div
                 *ngIf="sheet[rowIndex]?.[colIndex] as item"
@@ -12,12 +16,15 @@
                 class="t-cell"
                 [attr.data-range]="getItemRange(item)"
                 [class.t-cell_disabled]="disabledItemHandler(item)"
-                [class.t-cell_interval]="itemIsInterval(item)"
                 [class.t-cell_today]="itemIsToday(item)"
                 (click)="onItemClick(item)"
             >
                 {{ item.day }}
             </div>
         </ng-container>
+        <div
+            *tuiRepeatTimes="let index of 7 - (sheet[rowIndex]?.length ?? 0)"
+            class="t-cell t-cell_empty"
+        ></div>
     </div>
 </ng-container>

projects/addon-mobile/components/mobile-calendar/mobile-calendar.style.less

@@ -207,13 +207,7 @@
 
 .t-calendar {
     margin: 0 auto;
-    font-family: inherit;
-    font-size: 1.125rem;
     transition: opacity 0.2s;
-
-    :host._ios & {
-        font-size: 1.0625rem;
-    }
 }
 
 .t-week,

projects/core/components/calendar/calendar-sheet.component.ts

@@ -14,10 +14,9 @@ import {TuiLet} from '@taiga-ui/cdk/directives/let';
 import {TuiRepeatTimes} from '@taiga-ui/cdk/directives/repeat-times';
 import {TuiMapperPipe} from '@taiga-ui/cdk/pipes/mapper';
 import type {TuiBooleanHandler, TuiHandler} from '@taiga-ui/cdk/types';
-import {tuiNullableSame} from '@taiga-ui/cdk/utils/miscellaneous';
+import {tuiNullableSame, tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiCalendarSheetPipe, TuiOrderWeekDaysPipe} from '@taiga-ui/core/pipes';
 import {TUI_DAY_TYPE_HANDLER, TUI_SHORT_WEEK_DAYS} from '@taiga-ui/core/tokens';
-import type {TuiRangeState} from '@taiga-ui/core/types';
 
 export type TuiMarkerHandler = TuiHandler<TuiDay, [] | [string, string] | [string]>;
 
@@ -37,7 +36,7 @@ export type TuiMarkerHandler = TuiHandler<TuiDay, [] | [string, string] | [strin
     styleUrls: ['./calendar-sheet.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[class._single]': 'isSingleDayRange',
+        '[class._picking]': 'isSingleDayRange',
     },
 })
 export class TuiCalendarSheet {
@@ -94,46 +93,32 @@ export class TuiCalendarSheet {
         this.updateHoveredItem(item || null);
     }
 
-    public getItemRange(item: TuiDay): TuiRangeState | null {
+    public getItemRange(item: TuiDay): 'active' | 'end' | 'middle' | 'start' | null {
         const {value, hoveredItem} = this;
 
-        if (!value) {
-            return null;
+        if (value instanceof TuiDay) {
+            return value.daySame(item) ? 'active' : null;
         }
 
-        if (value instanceof TuiDay) {
-            return value.daySame(item) ? 'single' : null;
+        if (!value || !(value instanceof TuiDayRange)) {
+            return value?.find((day) => day.daySame(item)) ? 'active' : null;
         }
 
-        if (!(value instanceof TuiDayRange)) {
-            return value.find((day) => day.daySame(item)) ? 'single' : null;
+        const range = this.getRange(value, hoveredItem);
+
+        if (value.isSingleDay && range.isSingleDay && value.from.daySame(item)) {
+            return 'active';
         }
 
-        if (
-            (value.from.daySame(item) && !value.isSingleDay) ||
-            (hoveredItem?.dayAfter(value.from) &&
-                value.from.daySame(item) &&
-                value.isSingleDay) ||
-            (hoveredItem?.daySame(item) &&
-                hoveredItem.dayBefore(value.from) &&
-                value.isSingleDay)
-        ) {
+        if (range.from.daySame(item)) {
             return 'start';
         }
 
-        if (
-            (value.to.daySame(item) && !value.isSingleDay) ||
-            (hoveredItem?.dayBefore(value.from) &&
-                value.from.daySame(item) &&
-                value.isSingleDay) ||
-            (hoveredItem?.daySame(item) &&
-                hoveredItem.dayAfter(value.from) &&
-                value.isSingleDay)
-        ) {
+        if (range.to.daySame(item)) {
             return 'end';
         }
 
-        return value.isSingleDay && value.from.daySame(item) ? 'single' : null;
+        return range.from.dayBefore(item) && range.to.dayAfter(item) ? 'middle' : null;
     }
 
     protected get isSingleDayRange(): boolean {
@@ -143,10 +128,10 @@ export class TuiCalendarSheet {
     protected readonly toMarkers = (
         day: TuiDay,
         today: boolean,
-        inRange: boolean,
+        range: string | null,
         markerHandler: TuiMarkerHandler | null,
     ): [string, string] | [string] | null => {
-        if (today || inRange) {
+        if (today || ['active', 'end', 'start'].includes(range || '')) {
             return null;
         }
 
@@ -167,6 +152,13 @@ export class TuiCalendarSheet {
         this.dayClick.emit(item);
     }
 
+    @tuiPure
+    private getRange(value: TuiDayRange, hoveredItem: TuiDay | null): TuiDayRange {
+        return value.isSingleDay
+            ? TuiDayRange.sort(value.from, hoveredItem ?? value.to)
+            : value;
+    }
+
     private updateHoveredItem(day: TuiDay | null): void {
         if (tuiNullableSame(this.hoveredItem, day, (a, b) => a.daySame(b))) {
             return;

projects/core/components/calendar/calendar-sheet.style.less

@@ -1,11 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-@itemSize: 2.25rem;
+.date-picker();
 
-.picker(@itemSize);
-
-:host {
-    inline-size: @itemSize * 7;
+.t-cell {
+    inline-size: 2.25rem;
 }
 
 [data-type='weekday'] {
@@ -30,16 +28,13 @@
     }
 }
 
-.t-item {
-    display: flex;
-    flex-direction: column;
-}
-
-.t-item_unavailable {
+.t-cell_unavailable {
     opacity: var(--tui-disabled-opacity);
 }
 
 .t-dots {
+    position: absolute;
+    bottom: 0;
     display: flex;
     justify-content: center;
     margin-top: -0.5rem;