@tetacom/ng-components 1.1.29 → 1.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/component/date-picker/base-calendar.d.ts +1 -0
- package/docs/accordionDocs.mdx +118 -0
- package/docs/avatarDocs.mdx +99 -0
- package/docs/badgeDocs.mdx +24 -0
- package/docs/buttonDocs.mdx +120 -0
- package/docs/chartDocs.mdx +153 -0
- package/docs/checkboxDocs.mdx +108 -0
- package/docs/chipDocs.mdx +17 -0
- package/docs/datePickerDocs.mdx +230 -0
- package/docs/delimiterDocs.mdx +96 -0
- package/docs/dropdownDocs.mdx +143 -0
- package/docs/expandCardlDocs.mdx +56 -0
- package/docs/expandPanelDocs.mdx +105 -0
- package/docs/fileAreaDocs.mdx +74 -0
- package/docs/iconDocs.mdx +89 -0
- package/docs/inputDocs.mdx +92 -0
- package/docs/listDocs.mdx +17 -0
- package/docs/messageDocs.mdx +69 -0
- package/docs/modalDocs.mdx +63 -0
- package/docs/progressBarDocs.mdx +74 -0
- package/docs/propertyGridDocs.mdx +135 -0
- package/docs/radioDocs.mdx +106 -0
- package/docs/resizePanelDocs.mdx +86 -0
- package/docs/selectDocs.mdx +240 -0
- package/docs/switchDocs.mdx +103 -0
- package/docs/tableDocs.mdx +266 -0
- package/docs/tabsDocs.mdx +145 -0
- package/docs/tagDocs.mdx +19 -0
- package/docs/threeDocs.mdx +65 -0
- package/docs/toggleDocs.mdx +54 -0
- package/docs/toolbarDocs.mdx +16 -0
- package/docs/treeDocs.mdx +107 -0
- package/esm2022/common/model/view-type.model.mjs +1 -1
- package/esm2022/component/avatar/avatar/avatar.component.mjs +2 -2
- package/esm2022/component/date-picker/base-calendar.mjs +13 -1
- package/esm2022/component/date-picker/date-picker/date-calendar/date-calendar.component.mjs +3 -3
- package/esm2022/component/date-picker/date-range/range-calendar/range-calendar.component.mjs +3 -3
- package/esm2022/component/icon/icon/icon.component.mjs +3 -3
- package/fesm2022/tetacom-ng-components.mjs +20 -8
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -134,11 +134,11 @@ class IconComponent {
|
|
|
134
134
|
return `#${this.name}`;
|
|
135
135
|
}
|
|
136
136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: IconComponent, selector: "teta-icon", inputs: { name: "name", size: "size", palette: "palette", class: "class" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<svg class=\"icon__image\">\n <use [attr.xlink:href]=\"getName()\"></use>\n</svg>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: IconComponent, selector: "teta-icon", inputs: { name: "name", size: "size", palette: "palette", class: "class" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<svg class=\"icon__image\" style=\"width: 100%;height: 100%\">\n <use [attr.xlink:href]=\"getName()\"></use>\n</svg>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
138
138
|
}
|
|
139
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IconComponent, decorators: [{
|
|
140
140
|
type: Component,
|
|
141
|
-
args: [{ selector: 'teta-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"icon__image\">\n <use [attr.xlink:href]=\"getName()\"></use>\n</svg>\n" }]
|
|
141
|
+
args: [{ selector: 'teta-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"icon__image\" style=\"width: 100%;height: 100%\">\n <use [attr.xlink:href]=\"getName()\"></use>\n</svg>\n" }]
|
|
142
142
|
}], propDecorators: { name: [{
|
|
143
143
|
type: Input
|
|
144
144
|
}], size: [{
|
|
@@ -392,11 +392,11 @@ class AvatarComponent {
|
|
|
392
392
|
ngOnInit() {
|
|
393
393
|
}
|
|
394
394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: AvatarComponent, selector: "teta-avatar", inputs: { photo: "photo", name: "name", id: "id", viewType: "viewType", size: "size" }, host: { properties: { "class": "this.avatar" } }, ngImport: i0, template: "<div [class]=\"avatar\">\n <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n <ng-template #withoutPhoto>\n <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n class=\"column align-center justify-content-center position-relative\">\n <ng-container *ngIf=\"name;else withoutName\">\n <p>{{name}}</p>\n </ng-container>\n <ng-template #withoutName>\n <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n name=\"photoCamera\"></teta-icon>\n </ng-template>\n <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n </div>\n </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle)
|
|
395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: AvatarComponent, selector: "teta-avatar", inputs: { photo: "photo", name: "name", id: "id", viewType: "viewType", size: "size" }, host: { properties: { "class": "this.avatar" } }, ngImport: i0, template: "<div [class]=\"avatar\">\n <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n <ng-template #withoutPhoto>\n <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n class=\"column align-center justify-content-center position-relative\">\n <ng-container *ngIf=\"name;else withoutName\">\n <p>{{name}}</p>\n </ng-container>\n <ng-template #withoutName>\n <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n name=\"photoCamera\"></teta-icon>\n </ng-template>\n <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n </div>\n </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle)}.avatar_rounded{border-radius:var(--radius-base-round)}.avatar-size-24{height:24px;width:24px;font-size:11px}.avatar-size-24 img,.avatar-size-24 div{height:24px;width:24px}.avatar-size-28{height:28px;width:28px;font-size:11px}.avatar-size-28 img,.avatar-size-28 div{height:28px;width:28px}.avatar-size-32{height:32px;width:32px;font-size:11px}.avatar-size-32 img,.avatar-size-32 div{height:32px;width:32px}.avatar-size-44{height:44px;width:44px;font-size:14px}.avatar-size-44 img,.avatar-size-44 div{height:44px;width:44px}.avatar-size-64{height:64px;width:64px;font-size:16px}.avatar-size-64 img,.avatar-size-64 div{height:64px;width:64px}.avatar-size-128{height:128px;width:128px;font-size:28px}.avatar-size-128 img,.avatar-size-128 div{height:128px;width:128px}.avatar-size-200{height:200px;width:200px;font-size:35px}.avatar-size-200 img,.avatar-size-200 div{height:200px;width:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
396
396
|
}
|
|
397
397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
398
398
|
type: Component,
|
|
399
|
-
args: [{ selector: 'teta-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"avatar\">\n <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n <ng-template #withoutPhoto>\n <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n class=\"column align-center justify-content-center position-relative\">\n <ng-container *ngIf=\"name;else withoutName\">\n <p>{{name}}</p>\n </ng-container>\n <ng-template #withoutName>\n <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n name=\"photoCamera\"></teta-icon>\n </ng-template>\n <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n </div>\n </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle)
|
|
399
|
+
args: [{ selector: 'teta-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"avatar\">\n <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n <ng-template #withoutPhoto>\n <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n class=\"column align-center justify-content-center position-relative\">\n <ng-container *ngIf=\"name;else withoutName\">\n <p>{{name}}</p>\n </ng-container>\n <ng-template #withoutName>\n <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n name=\"photoCamera\"></teta-icon>\n </ng-template>\n <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n </div>\n </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle)}.avatar_rounded{border-radius:var(--radius-base-round)}.avatar-size-24{height:24px;width:24px;font-size:11px}.avatar-size-24 img,.avatar-size-24 div{height:24px;width:24px}.avatar-size-28{height:28px;width:28px;font-size:11px}.avatar-size-28 img,.avatar-size-28 div{height:28px;width:28px}.avatar-size-32{height:32px;width:32px;font-size:11px}.avatar-size-32 img,.avatar-size-32 div{height:32px;width:32px}.avatar-size-44{height:44px;width:44px;font-size:14px}.avatar-size-44 img,.avatar-size-44 div{height:44px;width:44px}.avatar-size-64{height:64px;width:64px;font-size:16px}.avatar-size-64 img,.avatar-size-64 div{height:64px;width:64px}.avatar-size-128{height:128px;width:128px;font-size:28px}.avatar-size-128 img,.avatar-size-128 div{height:128px;width:128px}.avatar-size-200{height:200px;width:200px;font-size:35px}.avatar-size-200 img,.avatar-size-200 div{height:200px;width:200px}\n"] }]
|
|
400
400
|
}], ctorParameters: function () { return []; }, propDecorators: { photo: [{
|
|
401
401
|
type: Input
|
|
402
402
|
}], name: [{
|
|
@@ -2561,6 +2561,18 @@ class BaseCalendar {
|
|
|
2561
2561
|
selectDate(date) {
|
|
2562
2562
|
this.setDate.emit(date);
|
|
2563
2563
|
}
|
|
2564
|
+
scrollMonth = (e, month, year) => {
|
|
2565
|
+
const delta = e?.deltaY ?? e;
|
|
2566
|
+
if (e instanceof WheelEvent) {
|
|
2567
|
+
e.preventDefault();
|
|
2568
|
+
}
|
|
2569
|
+
if (delta > 0) {
|
|
2570
|
+
this.changeMonth(month - 1, year);
|
|
2571
|
+
}
|
|
2572
|
+
else {
|
|
2573
|
+
this.changeMonth(month + 1, year);
|
|
2574
|
+
}
|
|
2575
|
+
};
|
|
2564
2576
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseCalendar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2565
2577
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: BaseCalendar, selector: "ng-component", usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2566
2578
|
}
|
|
@@ -2846,11 +2858,11 @@ class DateCalendarComponent extends BaseCalendar {
|
|
|
2846
2858
|
});
|
|
2847
2859
|
}
|
|
2848
2860
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: { selectedDate: "selectedDate", locale: "locale", open: "open", viewType: "viewType", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { setDate: "setDate" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"padding-h-3 padding-v-2\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 \">\n <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar\"></teta-day-picker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["locale", "selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2861
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: { selectedDate: "selectedDate", locale: "locale", open: "open", viewType: "viewType", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { setDate: "setDate" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"padding-h-3 padding-v-2\" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 \">\n <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar\"></teta-day-picker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["locale", "selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2850
2862
|
}
|
|
2851
2863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateCalendarComponent, decorators: [{
|
|
2852
2864
|
type: Component,
|
|
2853
|
-
args: [{ selector: 'teta-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"padding-h-3 padding-v-2\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 \">\n <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar\"></teta-day-picker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
|
|
2865
|
+
args: [{ selector: 'teta-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"padding-h-3 padding-v-2\" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 \">\n <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar\"></teta-day-picker>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
|
|
2854
2866
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedDate: [{
|
|
2855
2867
|
type: Input
|
|
2856
2868
|
}], locale: [{
|
|
@@ -3339,11 +3351,11 @@ class RangeCalendarComponent extends BaseCalendar {
|
|
|
3339
3351
|
}
|
|
3340
3352
|
}
|
|
3341
3353
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RangeCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: { locale: "locale", open: "open", date: "date", viewType: "viewType", allowNull: "allowNull", selectedDate: "selectedDate", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { hoveredDateChange: "hoveredDateChange", setDate: "setDate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"row \">\n <div class=\"padding-h-3 padding-v-2\">\n <div class=\"row align-center justify-content-between\">\n <teta-button\n [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p> {{getMothName(data.currentMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n </div>\n </div>\n <div class=\"padding-h-3 padding-v-2\"\n *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n </div>\n <teta-button [square]=\"true\"\n [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n </div>\n </div>\n </div>\n\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["locale", "selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3354
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: { locale: "locale", open: "open", date: "date", viewType: "viewType", allowNull: "allowNull", selectedDate: "selectedDate", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { hoveredDateChange: "hoveredDateChange", setDate: "setDate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"row \" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n <div class=\"padding-h-3 padding-v-2\">\n <div class=\"row align-center justify-content-between\">\n <teta-button\n [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p> {{getMothName(data.currentMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n </div>\n </div>\n <div class=\"padding-h-3 padding-v-2\"\n *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n </div>\n <teta-button [square]=\"true\"\n [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n </div>\n </div>\n </div>\n\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["locale", "selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3343
3355
|
}
|
|
3344
3356
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RangeCalendarComponent, decorators: [{
|
|
3345
3357
|
type: Component,
|
|
3346
|
-
args: [{ selector: 'teta-range-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"row \">\n <div class=\"padding-h-3 padding-v-2\">\n <div class=\"row align-center justify-content-between\">\n <teta-button\n [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p> {{getMothName(data.currentMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n </div>\n </div>\n <div class=\"padding-h-3 padding-v-2\"\n *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n </div>\n <teta-button [square]=\"true\"\n [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n </div>\n </div>\n </div>\n\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
|
|
3358
|
+
args: [{ selector: 'teta-range-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n class=\"datepicker-content overflow-y-auto\"\n>\n <ng-container *ngIf=\"data.selectedPicker==='day'\">\n <div class=\"row \" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n <div class=\"padding-h-3 padding-v-2\">\n <div class=\"row align-center justify-content-between\">\n <teta-button\n [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p> {{getMothName(data.currentMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n </div>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n </div>\n </div>\n <div class=\"padding-h-3 padding-v-2\"\n *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n <div class=\"row align-center justify-content-between\">\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n </div>\n <teta-button [square]=\"true\"\n [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div>\n <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n </div>\n </div>\n </div>\n\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='month'\">\n <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n </ng-container>\n <ng-container *ngIf=\"data.selectedPicker==='year'\">\n <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n [selectedYear]=\"data.currentYear\"></teta-year-picker>\n </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
|
|
3347
3359
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { locale: [{
|
|
3348
3360
|
type: Input
|
|
3349
3361
|
}], open: [{
|