@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
32 lines (28 loc) • 14.3 kB
JavaScript
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, Component, ChangeDetectionStrategy } from '@angular/core';
import { TuiRipple } from '@taiga-ui/addon-mobile/directives';
import { TuiLet } from '@taiga-ui/cdk/directives/let';
import { TuiRepeatTimes } from '@taiga-ui/cdk/directives/repeat-times';
import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
import { TuiCalendarSheet } from '@taiga-ui/core/components/calendar';
import { TuiCalendarSheetPipe } from '@taiga-ui/core/pipes/calendar-sheet';
class TuiMobileCalendarSheet extends TuiCalendarSheet {
constructor() {
super(...arguments);
this.isIOS = inject(TUI_IS_IOS);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendarSheet, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMobileCalendarSheet, isStandalone: true, selector: "tui-mobile-calendar-sheet", host: { properties: { "class._ios": "isIOS" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *tuiLet=\"month | tuiCalendarSheet as sheet\">\n <div\n *tuiRepeatTimes=\"let rowIndex of sheet.length\"\n automation-id=\"tui-primitive-calendar-mobile__row\"\n class=\"t-row\"\n >\n <div\n *tuiRepeatTimes=\"let index of 7 - (sheet[rowIndex]?.length ?? 0)\"\n class=\"t-cell t-cell_empty\"\n ></div>\n <ng-container *tuiRepeatTimes=\"let colIndex of sheet[rowIndex]?.length ?? 0\">\n <div\n *ngIf=\"sheet[rowIndex]?.[colIndex] as item\"\n automation-id=\"tui-primitive-calendar-mobile__cell\"\n tuiRipple\n class=\"t-cell\"\n [attr.data-range]=\"getItemRange(item)\"\n [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n [class.t-cell_today]=\"itemIsToday(item)\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.day }}\n </div>\n </ng-container>\n <div\n *tuiRepeatTimes=\"let index of 7 - (sheet[rowIndex]?.length ?? 0)\"\n class=\"t-cell t-cell_empty\"\n ></div>\n </div>\n</ng-container>\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-text-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;-webkit-mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem));mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;top:0;left:0;bottom:0;right:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);-webkit-mask:none;mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;inline-size:20.75rem;max-inline-size:100vw}:host._ios{inline-size:22.625rem}:host._ios .t-row{block-size:3.125rem;font-size:1.0625rem}:host._ios .t-cell[data-range=start],:host._ios .t-cell[data-range=end],:host._ios .t-cell[data-range=active]{font-weight:600}.t-row{block-size:3rem;justify-content:space-between!important;font-family:inherit;font-size:1.125rem;padding:.125rem;box-sizing:border-box}.t-row:first-child .t-cell:not(.t-cell_empty)~.t-cell_empty,.t-row:last-child .t-cell_empty{display:none}.t-row:last-child .t-cell:not(.t-cell_empty)~.t-cell_empty{display:flex}.t-cell{inline-size:2.5rem;block-size:2.5rem;border-radius:100%;overflow:hidden;-webkit-mask:none;mask:none;border:none;text-decoration:none}.t-cell_empty{visibility:hidden}.t-cell_today:after{content:\"\\2022\";text-align:center;line-height:4rem;font-size:1.5rem;color:var(--tui-text-action)}.t-cell_today[data-range=start]:after,.t-cell_today[data-range=end]:after,.t-cell_today[data-range=active]:after{color:inherit}.t-cell[data-range=start],.t-cell[data-range=end],.t-cell[data-range=active]{font-weight:500}.t-cell:after{-webkit-mask:none;mask:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TuiCalendarSheetPipe, name: "tuiCalendarSheet" }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendarSheet, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-mobile-calendar-sheet', imports: [NgIf, TuiCalendarSheetPipe, TuiLet, TuiRepeatTimes, TuiRipple], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class._ios]': 'isIOS',
}, template: "<ng-container *tuiLet=\"month | tuiCalendarSheet as sheet\">\n <div\n *tuiRepeatTimes=\"let rowIndex of sheet.length\"\n automation-id=\"tui-primitive-calendar-mobile__row\"\n class=\"t-row\"\n >\n <div\n *tuiRepeatTimes=\"let index of 7 - (sheet[rowIndex]?.length ?? 0)\"\n class=\"t-cell t-cell_empty\"\n ></div>\n <ng-container *tuiRepeatTimes=\"let colIndex of sheet[rowIndex]?.length ?? 0\">\n <div\n *ngIf=\"sheet[rowIndex]?.[colIndex] as item\"\n automation-id=\"tui-primitive-calendar-mobile__cell\"\n tuiRipple\n class=\"t-cell\"\n [attr.data-range]=\"getItemRange(item)\"\n [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n [class.t-cell_today]=\"itemIsToday(item)\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.day }}\n </div>\n </ng-container>\n <div\n *tuiRepeatTimes=\"let index of 7 - (sheet[rowIndex]?.length ?? 0)\"\n class=\"t-cell t-cell_empty\"\n ></div>\n </div>\n</ng-container>\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-text-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;-webkit-mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem));mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;top:0;left:0;bottom:0;right:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);-webkit-mask:none;mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;inline-size:20.75rem;max-inline-size:100vw}:host._ios{inline-size:22.625rem}:host._ios .t-row{block-size:3.125rem;font-size:1.0625rem}:host._ios .t-cell[data-range=start],:host._ios .t-cell[data-range=end],:host._ios .t-cell[data-range=active]{font-weight:600}.t-row{block-size:3rem;justify-content:space-between!important;font-family:inherit;font-size:1.125rem;padding:.125rem;box-sizing:border-box}.t-row:first-child .t-cell:not(.t-cell_empty)~.t-cell_empty,.t-row:last-child .t-cell_empty{display:none}.t-row:last-child .t-cell:not(.t-cell_empty)~.t-cell_empty{display:flex}.t-cell{inline-size:2.5rem;block-size:2.5rem;border-radius:100%;overflow:hidden;-webkit-mask:none;mask:none;border:none;text-decoration:none}.t-cell_empty{visibility:hidden}.t-cell_today:after{content:\"\\2022\";text-align:center;line-height:4rem;font-size:1.5rem;color:var(--tui-text-action)}.t-cell_today[data-range=start]:after,.t-cell_today[data-range=end]:after,.t-cell_today[data-range=active]:after{color:inherit}.t-cell[data-range=start],.t-cell[data-range=end],.t-cell[data-range=active]{font-weight:500}.t-cell:after{-webkit-mask:none;mask:none}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiMobileCalendarSheet };
//# sourceMappingURL=taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs.map