@tetacom/ng-components 1.1.6 → 1.1.8
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-picker.d.ts +9 -8
- package/component/date-picker/date-range/date-range.component.d.ts +10 -9
- package/esm2022/component/accordion/accordion-head/accordion-head.component.mjs +3 -3
- package/esm2022/component/avatar/avatar/avatar.component.mjs +3 -3
- package/esm2022/component/date-picker/base-picker.mjs +21 -15
- package/esm2022/component/date-picker/date-picker/date-calendar/date-calendar.component.mjs +3 -3
- package/esm2022/component/date-picker/date-picker/date-picker.component.mjs +3 -3
- package/esm2022/component/date-picker/date-range/date-range.component.mjs +41 -30
- package/esm2022/component/date-picker/date-range/range-calendar/range-calendar.component.mjs +3 -3
- package/esm2022/component/date-picker/month-picker/month-picker.component.mjs +3 -3
- package/esm2022/component/expand-card/expand-card/expand-card.component.mjs +3 -3
- package/esm2022/component/expand-card/expand-item/expand-item.component.mjs +3 -3
- package/esm2022/component/expand-panel/expand-panel/expand-panel.component.mjs +3 -3
- package/esm2022/component/file-upload/file-upload-area/file-upload-area.component.mjs +3 -3
- package/esm2022/component/icon/icon/icon.component.mjs +2 -2
- package/esm2022/component/input/text-field/text-field.component.mjs +3 -3
- package/esm2022/component/modal/dialog/dialog.component.mjs +2 -2
- package/esm2022/component/resize-panel/resize-panel/resize-panel.component.mjs +3 -3
- package/esm2022/component/select/select/select.component.mjs +3 -3
- package/esm2022/component/table/head-cell-dropdown/head-cell-dropdown.component.mjs +3 -3
- package/esm2022/component/table/table-head/filter-dropdown-tab/filter-dropdown-tab.component.mjs +3 -3
- package/esm2022/component/theme-switch/theme-switch/theme-switch.component.mjs +3 -3
- package/esm2022/directive/scrollable/scrollable/scrollable.component.mjs +5 -3
- package/fesm2022/tetacom-ng-components.mjs +89 -70
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/input.scss +2 -1
|
@@ -123,7 +123,7 @@ var TetaSize;
|
|
|
123
123
|
class IconComponent {
|
|
124
124
|
name;
|
|
125
125
|
size = TetaSize.M;
|
|
126
|
-
palette
|
|
126
|
+
palette;
|
|
127
127
|
class;
|
|
128
128
|
get getClass() {
|
|
129
129
|
const result = [this.class, 'icon'];
|
|
@@ -178,11 +178,11 @@ class AccordionHeadComponent {
|
|
|
178
178
|
ngOnInit() {
|
|
179
179
|
}
|
|
180
180
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AccordionHeadComponent, deps: [{ token: AccordionItemComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
181
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: { showToggle: "showToggle" }, host: { listeners: { "click": "toggle()" }, properties: { "class.accordion-head": "this.accordionHeadClass", "class.accordion-head_open": "this.open", "class.accordion-head_disabled": "this.disabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"
|
|
181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: { showToggle: "showToggle" }, host: { listeners: { "click": "toggle()" }, properties: { "class.accordion-head": "this.accordionHeadClass", "class.accordion-head_open": "this.open", "class.accordion-head_disabled": "this.disabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n</div>\n\n", styles: [""], 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 });
|
|
182
182
|
}
|
|
183
183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AccordionHeadComponent, decorators: [{
|
|
184
184
|
type: Component,
|
|
185
|
-
args: [{ selector: 'teta-accordion-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"
|
|
185
|
+
args: [{ selector: 'teta-accordion-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n</div>\n\n" }]
|
|
186
186
|
}], ctorParameters: function () { return [{ type: AccordionItemComponent, decorators: [{
|
|
187
187
|
type: Host
|
|
188
188
|
}, {
|
|
@@ -396,11 +396,11 @@ class AvatarComponent {
|
|
|
396
396
|
ngOnInit() {
|
|
397
397
|
}
|
|
398
398
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
399
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", 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\"
|
|
399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", 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_round{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 });
|
|
400
400
|
}
|
|
401
401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
402
402
|
type: Component,
|
|
403
|
-
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\"
|
|
403
|
+
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_round{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"] }]
|
|
404
404
|
}], ctorParameters: function () { return []; }, propDecorators: { photo: [{
|
|
405
405
|
type: Input
|
|
406
406
|
}], name: [{
|
|
@@ -984,11 +984,11 @@ class MonthPickerComponent {
|
|
|
984
984
|
});
|
|
985
985
|
}
|
|
986
986
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { locale: "locale", selectedMonth: "selectedMonth", viewType: "viewType", currentYear: "currentYear", localeMoths: "localeMoths" }, outputs: { selectMonth: "selectMonth", changeYear: "changeYear" }, ngImport: i0, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n <div class=\"row align-center justify-content-between font-button-2\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"pickYear(currentYear-1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\"></teta-icon>\n </teta-button>\n <p>{{currentYear}}</p>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"pickYear(currentYear+1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\"></teta-icon>\n </teta-button>\n </div>\n <div class=\"datepicker-month font-body-3 color-text-90\"\n style=\"width: 100%\">\n <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n <p>\n {{month.name}}\n </p>\n </div>\n </div>\n </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { locale: "locale", selectedMonth: "selectedMonth", viewType: "viewType", currentYear: "currentYear", localeMoths: "localeMoths" }, outputs: { selectMonth: "selectMonth", changeYear: "changeYear" }, ngImport: i0, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n <div class=\"row align-center justify-content-between font-button-2\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"pickYear(currentYear-1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <p>{{currentYear}}</p>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"pickYear(currentYear+1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div class=\"datepicker-month font-body-3 color-text-90\"\n style=\"width: 100%\">\n <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n <p>\n {{month.name}}\n </p>\n </div>\n </div>\n </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
988
988
|
}
|
|
989
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: MonthPickerComponent, decorators: [{
|
|
990
990
|
type: Component,
|
|
991
|
-
args: [{ selector: 'teta-month-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n <div class=\"row align-center justify-content-between font-button-2\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"pickYear(currentYear-1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\"></teta-icon>\n </teta-button>\n <p>{{currentYear}}</p>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"pickYear(currentYear+1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\"></teta-icon>\n </teta-button>\n </div>\n <div class=\"datepicker-month font-body-3 color-text-90\"\n style=\"width: 100%\">\n <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n <p>\n {{month.name}}\n </p>\n </div>\n </div>\n </div>\n</div>\n\n\n" }]
|
|
991
|
+
args: [{ selector: 'teta-month-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n <div class=\"row align-center justify-content-between font-button-2\">\n <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n (click)=\"pickYear(currentYear-1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n <p>{{currentYear}}</p>\n <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n (click)=\"pickYear(currentYear+1)\"\n palette=\"text\"\n view=\"ghost\">\n <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n </teta-button>\n </div>\n <div class=\"datepicker-month font-body-3 color-text-90\"\n style=\"width: 100%\">\n <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n <p>\n {{month.name}}\n </p>\n </div>\n </div>\n </div>\n</div>\n\n\n" }]
|
|
992
992
|
}], ctorParameters: function () { return []; }, propDecorators: { locale: [{
|
|
993
993
|
type: Input
|
|
994
994
|
}], selectedMonth: [{
|
|
@@ -1100,11 +1100,11 @@ class DateCalendarComponent extends BaseCalendar {
|
|
|
1100
1100
|
});
|
|
1101
1101
|
}
|
|
1102
1102
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DateCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", 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\"></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\"></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 });
|
|
1103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", 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 });
|
|
1104
1104
|
}
|
|
1105
1105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DateCalendarComponent, decorators: [{
|
|
1106
1106
|
type: Component,
|
|
1107
|
-
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\"></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\"></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"] }]
|
|
1107
|
+
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"] }]
|
|
1108
1108
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedDate: [{
|
|
1109
1109
|
type: Input
|
|
1110
1110
|
}], locale: [{
|
|
@@ -1170,10 +1170,11 @@ class BasePicker {
|
|
|
1170
1170
|
val.splice(i, 1, value[i]);
|
|
1171
1171
|
}
|
|
1172
1172
|
this.placeholder = val.join('');
|
|
1173
|
-
this._cdr.detectChanges();
|
|
1174
1173
|
}
|
|
1175
1174
|
openChange(e) {
|
|
1176
|
-
|
|
1175
|
+
if (!e) {
|
|
1176
|
+
this.onBlur();
|
|
1177
|
+
}
|
|
1177
1178
|
this.open = e;
|
|
1178
1179
|
}
|
|
1179
1180
|
checkNull() {
|
|
@@ -1195,12 +1196,17 @@ class BasePicker {
|
|
|
1195
1196
|
this.open = false;
|
|
1196
1197
|
}
|
|
1197
1198
|
emitValue(value) {
|
|
1198
|
-
this.
|
|
1199
|
-
|
|
1200
|
-
|
|
1199
|
+
if (this.isValueChange(value)) {
|
|
1200
|
+
this.date = value;
|
|
1201
|
+
this.selectDate.emit(value);
|
|
1202
|
+
this.onChange(value);
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1205
|
+
isValueChange(value) {
|
|
1206
|
+
return new Date(value).getTime() !== new Date(this.date).getTime();
|
|
1201
1207
|
}
|
|
1202
1208
|
checkEnter(e) {
|
|
1203
|
-
if (e.key ===
|
|
1209
|
+
if (e.key === 'Enter') {
|
|
1204
1210
|
this.inputText = e.target.value;
|
|
1205
1211
|
this.onBlur();
|
|
1206
1212
|
}
|
|
@@ -1217,15 +1223,15 @@ class BasePicker {
|
|
|
1217
1223
|
}
|
|
1218
1224
|
getDateFromStr(str, separator = '.') {
|
|
1219
1225
|
const date = str?.split(separator);
|
|
1220
|
-
const day = this.isAvailableLength(
|
|
1221
|
-
const month = this.isAvailableLength(
|
|
1222
|
-
const year = this.isAvailableLength(
|
|
1226
|
+
const day = this.isAvailableLength(date?.[0], 2) ? Number(date[0]) : null;
|
|
1227
|
+
const month = this.isAvailableLength(date?.[1], 2) ? Number(date[1]) : null;
|
|
1228
|
+
const year = this.isAvailableLength(date?.[2], 4) ? Number(date[2]) : null;
|
|
1223
1229
|
return { day, month, year };
|
|
1224
1230
|
}
|
|
1225
1231
|
getTimeFromStr(str, separator = ':') {
|
|
1226
1232
|
const time = str?.trim().split(separator);
|
|
1227
|
-
const hours = this.isAvailableLength(
|
|
1228
|
-
const mins = this.isAvailableLength(
|
|
1233
|
+
const hours = this.isAvailableLength(time?.[0], 2) ? Number(time[0]) : null;
|
|
1234
|
+
const mins = this.isAvailableLength(time?.[1], 2) ? Number(time[1]) : null;
|
|
1229
1235
|
return { hours, mins };
|
|
1230
1236
|
}
|
|
1231
1237
|
focus() {
|
|
@@ -1241,8 +1247,8 @@ class BasePicker {
|
|
|
1241
1247
|
});
|
|
1242
1248
|
}
|
|
1243
1249
|
getAvailableDate(min, max, date) {
|
|
1244
|
-
let minDate = dayjs(new Date(min)).startOf(
|
|
1245
|
-
let maxDate = dayjs(new Date(max)).endOf(
|
|
1250
|
+
let minDate = dayjs(new Date(min)).startOf('day').toDate();
|
|
1251
|
+
let maxDate = dayjs(new Date(max)).endOf('day').toDate();
|
|
1246
1252
|
if (min && minDate.getTime() >= new Date(date).getTime()) {
|
|
1247
1253
|
return new Date();
|
|
1248
1254
|
}
|
|
@@ -2362,11 +2368,11 @@ class DatePickerComponent extends BasePicker {
|
|
|
2362
2368
|
}
|
|
2363
2369
|
}
|
|
2364
2370
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
2365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DatePickerComponent, selector: "teta-date-picker", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\"\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\"\n [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <teta-date-calendar [isDateNull]=\"date===null\" [open]=\"open\" [max]=\"maxDate\" [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event)\"\n [selectedDate]=\"data.selectedDate\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-date-calendar>\n </ng-container>\n\n </div>\n</teta-dropdown>\n", styles: [""], 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: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "locale", "open", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DatePickerComponent, selector: "teta-date-picker", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\"\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\"\n [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <teta-date-calendar [isDateNull]=\"date===null\" [open]=\"open\" [max]=\"maxDate\" [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event)\"\n [selectedDate]=\"data.selectedDate\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-date-calendar>\n </ng-container>\n\n </div>\n</teta-dropdown>\n", styles: [""], 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: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "locale", "open", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2366
2372
|
}
|
|
2367
2373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2368
2374
|
type: Component,
|
|
2369
|
-
args: [{ selector: 'teta-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\"\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\"\n [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <teta-date-calendar [isDateNull]=\"date===null\" [open]=\"open\" [max]=\"maxDate\" [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event)\"\n [selectedDate]=\"data.selectedDate\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-date-calendar>\n </ng-container>\n\n </div>\n</teta-dropdown>\n" }]
|
|
2375
|
+
args: [{ selector: 'teta-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\"\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\"\n [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <teta-date-calendar [isDateNull]=\"date===null\" [open]=\"open\" [max]=\"maxDate\" [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event)\"\n [selectedDate]=\"data.selectedDate\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-date-calendar>\n </ng-container>\n\n </div>\n</teta-dropdown>\n" }]
|
|
2370
2376
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }]; }, propDecorators: { date: [{
|
|
2371
2377
|
type: Input
|
|
2372
2378
|
}], locale: [{
|
|
@@ -2789,7 +2795,7 @@ class TextFieldComponent {
|
|
|
2789
2795
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
2790
2796
|
multi: true,
|
|
2791
2797
|
},
|
|
2792
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n #input\n [ngModel]=\"value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart\"\n [tetaOnlyNumber]=\"onlyNumber\"\n (ngModelChange)=\"value = $event; onChange($event);\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngClass]=\"{'color-text-40':disabled}\"\n (focus)='inputFocused = true'\n (blur)=\"inputFocused = false;emitBlur()\"\n (keydown)=\"keyPress($event)\"\n autocomplete=\"off\"\n type=\"text\"\n/>\n<teta-icon\n *ngIf=\"value && !disabled\"\n class=\"close-icon\"\n [name]=\"'closeCircle'\"\n (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], 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: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2798
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\" [palette]=\"'text'\"></teta-icon>\n<input\n #input\n [ngModel]=\"value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart\"\n [tetaOnlyNumber]=\"onlyNumber\"\n (ngModelChange)=\"value = $event; onChange($event);\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngClass]=\"{'color-text-40':disabled}\"\n (focus)='inputFocused = true'\n (blur)=\"inputFocused = false;emitBlur()\"\n (keydown)=\"keyPress($event)\"\n autocomplete=\"off\"\n type=\"text\"\n/>\n<teta-icon\n *ngIf=\"value && !disabled\"\n class=\"close-icon\"\n [name]=\"'closeCircle'\"\n [palette]=\"'text'\"\n (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], 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: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2793
2799
|
}
|
|
2794
2800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
2795
2801
|
type: Component,
|
|
@@ -2799,7 +2805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
|
|
|
2799
2805
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
2800
2806
|
multi: true,
|
|
2801
2807
|
},
|
|
2802
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n #input\n [ngModel]=\"value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart\"\n [tetaOnlyNumber]=\"onlyNumber\"\n (ngModelChange)=\"value = $event; onChange($event);\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngClass]=\"{'color-text-40':disabled}\"\n (focus)='inputFocused = true'\n (blur)=\"inputFocused = false;emitBlur()\"\n (keydown)=\"keyPress($event)\"\n autocomplete=\"off\"\n type=\"text\"\n/>\n<teta-icon\n *ngIf=\"value && !disabled\"\n class=\"close-icon\"\n [name]=\"'closeCircle'\"\n (click)=\"value = ''; onChange('');\"\n></teta-icon>\n" }]
|
|
2808
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\" [palette]=\"'text'\"></teta-icon>\n<input\n #input\n [ngModel]=\"value | tetaNumber : !onlyNumber ? null : inputFocused ? 1000 : decimalPart\"\n [tetaOnlyNumber]=\"onlyNumber\"\n (ngModelChange)=\"value = $event; onChange($event);\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngClass]=\"{'color-text-40':disabled}\"\n (focus)='inputFocused = true'\n (blur)=\"inputFocused = false;emitBlur()\"\n (keydown)=\"keyPress($event)\"\n autocomplete=\"off\"\n type=\"text\"\n/>\n<teta-icon\n *ngIf=\"value && !disabled\"\n class=\"close-icon\"\n [name]=\"'closeCircle'\"\n [palette]=\"'text'\"\n (click)=\"value = ''; onChange('');\"\n></teta-icon>\n" }]
|
|
2803
2809
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
|
|
2804
2810
|
type: Input
|
|
2805
2811
|
}], leftIconName: [{
|
|
@@ -3155,11 +3161,11 @@ class RangeCalendarComponent extends BaseCalendar {
|
|
|
3155
3161
|
}
|
|
3156
3162
|
}
|
|
3157
3163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: RangeCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", 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\"></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\"></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\"></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\"></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 });
|
|
3164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", 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 });
|
|
3159
3165
|
}
|
|
3160
3166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: RangeCalendarComponent, decorators: [{
|
|
3161
3167
|
type: Component,
|
|
3162
|
-
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\"></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\"></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\"></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\"></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"] }]
|
|
3168
|
+
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"] }]
|
|
3163
3169
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { locale: [{
|
|
3164
3170
|
type: Input
|
|
3165
3171
|
}], open: [{
|
|
@@ -3215,16 +3221,15 @@ class DateRangeComponent extends BasePicker {
|
|
|
3215
3221
|
this._cdr = _cdr;
|
|
3216
3222
|
this._elementRef = _elementRef;
|
|
3217
3223
|
this.datePipe = datePipe;
|
|
3218
|
-
console.log('dateRange', datePipe);
|
|
3219
3224
|
}
|
|
3220
3225
|
changeSelectedDate(date, selectedDate) {
|
|
3221
3226
|
if (selectedDate.from) {
|
|
3222
3227
|
const from = new Date(Math.min(new Date(selectedDate.from).getTime(), date.getTime()));
|
|
3223
3228
|
const to = new Date(Math.max(new Date(selectedDate.from).getTime(), date.getTime()));
|
|
3224
3229
|
this.setDate({ from, to });
|
|
3225
|
-
this.emitValue({ from, to });
|
|
3226
3230
|
this.selectedDate.next({ from: null, to: null });
|
|
3227
3231
|
this.open = false;
|
|
3232
|
+
this._cdr.detectChanges();
|
|
3228
3233
|
}
|
|
3229
3234
|
else {
|
|
3230
3235
|
this.setDate({ from: date, to: null });
|
|
@@ -3235,12 +3240,20 @@ class DateRangeComponent extends BasePicker {
|
|
|
3235
3240
|
if (this.allowNull) {
|
|
3236
3241
|
return null;
|
|
3237
3242
|
}
|
|
3238
|
-
return this.datePipe.transform(new Date(), 'dd.MM.yyyy') +
|
|
3243
|
+
return (this.datePipe.transform(new Date(), 'dd.MM.yyyy') +
|
|
3244
|
+
' - ' +
|
|
3245
|
+
this.datePipe.transform(new Date(), 'dd.MM.yyyy'));
|
|
3239
3246
|
}
|
|
3240
3247
|
prepareInput() {
|
|
3241
|
-
let str = this.getLocaleString(this.date.from) +
|
|
3248
|
+
let str = this.getLocaleString(this.date.from) +
|
|
3249
|
+
' - ' +
|
|
3250
|
+
this.getLocaleString(this.date.to);
|
|
3242
3251
|
if (!this.date?.from) {
|
|
3243
|
-
str = this.allowNull
|
|
3252
|
+
str = this.allowNull
|
|
3253
|
+
? ''
|
|
3254
|
+
: this.getLocaleString(new Date()) +
|
|
3255
|
+
' - ' +
|
|
3256
|
+
this.getLocaleString(new Date());
|
|
3244
3257
|
}
|
|
3245
3258
|
let option = {
|
|
3246
3259
|
mode: 'dd/mm/yyyy',
|
|
@@ -3291,23 +3304,25 @@ class DateRangeComponent extends BasePicker {
|
|
|
3291
3304
|
this.changePlaceholder('');
|
|
3292
3305
|
this.selectedDate.next({
|
|
3293
3306
|
from: range?.from || null,
|
|
3294
|
-
to: range?.to || null
|
|
3307
|
+
to: range?.to || null,
|
|
3295
3308
|
});
|
|
3296
3309
|
}
|
|
3297
3310
|
else {
|
|
3298
|
-
|
|
3299
|
-
|
|
3311
|
+
const from = this.getLocaleString(range.from);
|
|
3312
|
+
const to = range.from && !range.to ? '' : this.getLocaleString(range.to);
|
|
3313
|
+
this.inputText = from + ' - ' + to;
|
|
3314
|
+
this.changePlaceholder(from + ' - ' + to);
|
|
3300
3315
|
}
|
|
3301
3316
|
}
|
|
3302
3317
|
writeValue(obj) {
|
|
3303
3318
|
if (obj?.from) {
|
|
3304
3319
|
this.date = {
|
|
3305
3320
|
from: new Date(obj.from),
|
|
3306
|
-
to: new Date(obj.to)
|
|
3321
|
+
to: new Date(obj.to),
|
|
3307
3322
|
};
|
|
3308
3323
|
this.setDate({
|
|
3309
3324
|
from: new Date(obj.from),
|
|
3310
|
-
to: new Date(obj.to)
|
|
3325
|
+
to: new Date(obj.to),
|
|
3311
3326
|
});
|
|
3312
3327
|
}
|
|
3313
3328
|
else {
|
|
@@ -3315,41 +3330,43 @@ class DateRangeComponent extends BasePicker {
|
|
|
3315
3330
|
}
|
|
3316
3331
|
this.selectedDate.next({
|
|
3317
3332
|
from: null,
|
|
3318
|
-
to: null
|
|
3333
|
+
to: null,
|
|
3319
3334
|
});
|
|
3320
3335
|
}
|
|
3336
|
+
isValueChange(value) {
|
|
3337
|
+
return !(new Date(value.from).getTime() === new Date(this.date.from).getTime() &&
|
|
3338
|
+
new Date(value.to).getTime() === new Date(this.date.to).getTime());
|
|
3339
|
+
}
|
|
3321
3340
|
registerOnChange(fn) {
|
|
3322
3341
|
this.onChange = fn;
|
|
3323
3342
|
}
|
|
3324
|
-
registerOnTouched(fn) {
|
|
3325
|
-
}
|
|
3343
|
+
registerOnTouched(fn) { }
|
|
3326
3344
|
ngOnInit() {
|
|
3327
3345
|
if (this.date?.from) {
|
|
3328
3346
|
this.setDate({
|
|
3329
3347
|
from: this.allowNull ? null : new Date(this.date?.from),
|
|
3330
|
-
to: this.allowNull ? null : new Date(this.date?.to)
|
|
3348
|
+
to: this.allowNull ? null : new Date(this.date?.to),
|
|
3331
3349
|
});
|
|
3332
3350
|
}
|
|
3333
3351
|
else {
|
|
3334
3352
|
this.setDate({
|
|
3335
3353
|
from: this.allowNull ? null : new Date(),
|
|
3336
|
-
to: this.allowNull ? null : new Date()
|
|
3354
|
+
to: this.allowNull ? null : new Date(),
|
|
3337
3355
|
});
|
|
3338
3356
|
}
|
|
3339
3357
|
this.selectedDate.next({
|
|
3340
3358
|
from: null,
|
|
3341
|
-
to: null
|
|
3359
|
+
to: null,
|
|
3342
3360
|
});
|
|
3343
3361
|
this.prepareInput();
|
|
3344
3362
|
}
|
|
3345
|
-
onChange(date) {
|
|
3346
|
-
}
|
|
3363
|
+
onChange(date) { }
|
|
3347
3364
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
3348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DateRangeComponent, selector: "teta-date-range", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull" }, outputs: { selectDate: "selectDate" }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <div class=\"row\">\n <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n [max]=\"maxDate\"\n [allowNull]=\"allowNull\"\n [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n [selectedDate]=\"data.selectedDate\"\n [date]=\"date\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n </div>\n </ng-container>\n </div>\n</teta-dropdown>\n", styles: [""], 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: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DateRangeComponent, selector: "teta-date-range", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull" }, outputs: { selectDate: "selectDate" }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <div class=\"row\">\n <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n [max]=\"maxDate\"\n [allowNull]=\"allowNull\"\n [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n [selectedDate]=\"data.selectedDate\"\n [date]=\"date\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n </div>\n </ng-container>\n </div>\n</teta-dropdown>\n", styles: [""], 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: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3349
3366
|
}
|
|
3350
3367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
3351
3368
|
type: Component,
|
|
3352
|
-
args: [{ selector: 'teta-date-range', providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <div class=\"row\">\n <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n [max]=\"maxDate\"\n [allowNull]=\"allowNull\"\n [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n [selectedDate]=\"data.selectedDate\"\n [date]=\"date\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n </div>\n </ng-container>\n </div>\n</teta-dropdown>\n" }]
|
|
3369
|
+
args: [{ selector: 'teta-date-range', providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n <div tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_'+viewType\">\n <div class=\"row position-relative font-body-3 align-center\">\n <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\">\n <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"open\">\n <div class=\"row\">\n <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n [max]=\"maxDate\"\n [allowNull]=\"allowNull\"\n [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n [selectedDate]=\"data.selectedDate\"\n [date]=\"date\"\n [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n </div>\n </ng-container>\n </div>\n</teta-dropdown>\n" }]
|
|
3353
3370
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.DatePipe }]; }, propDecorators: { date: [{
|
|
3354
3371
|
type: Input
|
|
3355
3372
|
}], locale: [{
|
|
@@ -3619,11 +3636,11 @@ class ExpandCardComponent {
|
|
|
3619
3636
|
this.openChange.emit(this.open);
|
|
3620
3637
|
}
|
|
3621
3638
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ExpandCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ExpandCardComponent, selector: "teta-expand-card", inputs: { open: "open", showCross: "showCross" }, outputs: { openChange: "openChange", crossClick: "crossClick" }, exportAs: ["expand-card"], ngImport: i0, template: "<teta-toolbar class=\"justify-content-between align-center\">\n <ng-content select=\"head\"></ng-content>\n <div class=\"row gap align-center\">\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n </button>\n <ng-container *ngIf=\"showCross\">\n <teta-delimiter [palette]=\"'text'\" class='height-4'></teta-delimiter>\n <button type=\"button\" teta-button (click)=\"crossClick.emit($event)\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"'closeBig'\"></teta-icon>\n </button>\n </ng-container>\n </div>\n</teta-toolbar>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{border:solid 1px var(--color-text-5);border-radius:4px;animation:append-animate .5s linear;transition:order 5s ease-in}.content{padding:0 12px 12px;animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { 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: DelimiterComponent, selector: "teta-delimiter", inputs: ["direction", "palette", "height", "verticalMargin", "horizontalMargin", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3639
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ExpandCardComponent, selector: "teta-expand-card", inputs: { open: "open", showCross: "showCross" }, outputs: { openChange: "openChange", crossClick: "crossClick" }, exportAs: ["expand-card"], ngImport: i0, template: "<teta-toolbar class=\"justify-content-between align-center\">\n <ng-content select=\"head\"></ng-content>\n <div class=\"row gap align-center\">\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n </button>\n <ng-container *ngIf=\"showCross\">\n <teta-delimiter [palette]=\"'text'\" class='height-4'></teta-delimiter>\n <button type=\"button\" teta-button (click)=\"crossClick.emit($event)\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"'closeBig'\" [palette]=\"'text'\"></teta-icon>\n </button>\n </ng-container>\n </div>\n</teta-toolbar>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{border:solid 1px var(--color-text-5);border-radius:4px;animation:append-animate .5s linear;transition:order 5s ease-in}.content{padding:0 12px 12px;animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { 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: DelimiterComponent, selector: "teta-delimiter", inputs: ["direction", "palette", "height", "verticalMargin", "horizontalMargin", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3623
3640
|
}
|
|
3624
3641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ExpandCardComponent, decorators: [{
|
|
3625
3642
|
type: Component,
|
|
3626
|
-
args: [{ selector: 'teta-expand-card', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'expand-card', template: "<teta-toolbar class=\"justify-content-between align-center\">\n <ng-content select=\"head\"></ng-content>\n <div class=\"row gap align-center\">\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n </button>\n <ng-container *ngIf=\"showCross\">\n <teta-delimiter [palette]=\"'text'\" class='height-4'></teta-delimiter>\n <button type=\"button\" teta-button (click)=\"crossClick.emit($event)\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"'closeBig'\"></teta-icon>\n </button>\n </ng-container>\n </div>\n</teta-toolbar>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{border:solid 1px var(--color-text-5);border-radius:4px;animation:append-animate .5s linear;transition:order 5s ease-in}.content{padding:0 12px 12px;animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
3643
|
+
args: [{ selector: 'teta-expand-card', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'expand-card', template: "<teta-toolbar class=\"justify-content-between align-center\">\n <ng-content select=\"head\"></ng-content>\n <div class=\"row gap align-center\">\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n </button>\n <ng-container *ngIf=\"showCross\">\n <teta-delimiter [palette]=\"'text'\" class='height-4'></teta-delimiter>\n <button type=\"button\" teta-button (click)=\"crossClick.emit($event)\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"'closeBig'\" [palette]=\"'text'\"></teta-icon>\n </button>\n </ng-container>\n </div>\n</teta-toolbar>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{border:solid 1px var(--color-text-5);border-radius:4px;animation:append-animate .5s linear;transition:order 5s ease-in}.content{padding:0 12px 12px;animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
3627
3644
|
}], ctorParameters: function () { return []; }, propDecorators: { open: [{
|
|
3628
3645
|
type: Input
|
|
3629
3646
|
}], openChange: [{
|
|
@@ -3662,11 +3679,11 @@ class ExpandItemComponent {
|
|
|
3662
3679
|
this.openChange.emit(this.open);
|
|
3663
3680
|
}
|
|
3664
3681
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ExpandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3665
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ExpandItemComponent, selector: "teta-expand-item", inputs: { open: "open" }, outputs: { openChange: "openChange" }, exportAs: ["expand-item"], ngImport: i0, template: "<div class=\"row align-center gap color-text-50 height-6\">\n <div class=\"font-overline form-group-title-text\">\n <ng-content select=\"head\"></ng-content>\n </div>\n <div class=\"form-group-title-line\"></div>\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n </button>\n</div>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{animation:append-animate .5s linear;transition:order 5s ease-in;display:flex;flex-direction:column;gap:12px}.content{animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3682
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ExpandItemComponent, selector: "teta-expand-item", inputs: { open: "open" }, outputs: { openChange: "openChange" }, exportAs: ["expand-item"], ngImport: i0, template: "<div class=\"row align-center gap color-text-50 height-6\">\n <div class=\"font-overline form-group-title-text\">\n <ng-content select=\"head\"></ng-content>\n </div>\n <div class=\"form-group-title-line\"></div>\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n </button>\n</div>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{animation:append-animate .5s linear;transition:order 5s ease-in;display:flex;flex-direction:column;gap:12px}.content{animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3666
3683
|
}
|
|
3667
3684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ExpandItemComponent, decorators: [{
|
|
3668
3685
|
type: Component,
|
|
3669
|
-
args: [{ selector: 'teta-expand-item', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'expand-item', template: "<div class=\"row align-center gap color-text-50 height-6\">\n <div class=\"font-overline form-group-title-text\">\n <ng-content select=\"head\"></ng-content>\n </div>\n <div class=\"form-group-title-line\"></div>\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n </button>\n</div>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{animation:append-animate .5s linear;transition:order 5s ease-in;display:flex;flex-direction:column;gap:12px}.content{animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
3686
|
+
args: [{ selector: 'teta-expand-item', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'expand-item', template: "<div class=\"row align-center gap color-text-50 height-6\">\n <div class=\"font-overline form-group-title-text\">\n <ng-content select=\"head\"></ng-content>\n </div>\n <div class=\"form-group-title-line\"></div>\n <button type=\"button\" teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n </button>\n</div>\n<div class=\"content\" *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{animation:append-animate .5s linear;transition:order 5s ease-in;display:flex;flex-direction:column;gap:12px}.content{animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
3670
3687
|
}], ctorParameters: function () { return []; }, propDecorators: { open: [{
|
|
3671
3688
|
type: Input
|
|
3672
3689
|
}], openChange: [{
|
|
@@ -3776,11 +3793,11 @@ class ExpandPanelComponent {
|
|
|
3776
3793
|
this.openChange.emit(this.open);
|
|
3777
3794
|
}
|
|
3778
3795
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ExpandPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3779
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ExpandPanelComponent, selector: "teta-expand-panel", inputs: { placeholder: "placeholder", open: "open", cookieName: "cookieName", direction: "direction" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "content", first: true, predicate: ExpandPanelContentDirective, descendants: true }, { propertyName: "head", first: true, predicate: ExpandPanelHeadDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"open\">\n <teta-toolbar\n style=\"display: flex\"\n [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n <button\n teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"closePanel()\"\n >\n <teta-icon [name]=\"direction === 'right' ? 'arrowRightKey' : 'arrowLeftKey'\"></teta-icon>\n </button>\n <span class=\"font-title-2\" style=\"display: contents\"><ng-container\n *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n </teta-toolbar>\n <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n <button\n teta-button\n style=\"\n transform-origin: 0 0;\n transform: rotate(-90deg) translateX(-100%);\n margin: 8px;\n \"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"openPanel()\"\n >\n <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n <teta-icon [name]=\"direction === 'right' ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n </button>\n </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3796
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ExpandPanelComponent, selector: "teta-expand-panel", inputs: { placeholder: "placeholder", open: "open", cookieName: "cookieName", direction: "direction" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "content", first: true, predicate: ExpandPanelContentDirective, descendants: true }, { propertyName: "head", first: true, predicate: ExpandPanelHeadDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"open\">\n <teta-toolbar\n style=\"display: flex\"\n [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n <button\n teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"closePanel()\"\n >\n <teta-icon [palette]=\"'text'\" [name]=\"direction === 'right' ? 'arrowRightKey' : 'arrowLeftKey'\"></teta-icon>\n </button>\n <span class=\"font-title-2\" style=\"display: contents\"><ng-container\n *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n </teta-toolbar>\n <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n <button\n teta-button\n style=\"\n transform-origin: 0 0;\n transform: rotate(-90deg) translateX(-100%);\n margin: 8px;\n \"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"openPanel()\"\n >\n <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n <teta-icon [name]=\"direction === 'right' ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n </button>\n </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3780
3797
|
}
|
|
3781
3798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ExpandPanelComponent, decorators: [{
|
|
3782
3799
|
type: Component,
|
|
3783
|
-
args: [{ selector: 'teta-expand-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"open\">\n <teta-toolbar\n style=\"display: flex\"\n [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n <button\n teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"closePanel()\"\n >\n <teta-icon [name]=\"direction === 'right' ? 'arrowRightKey' : 'arrowLeftKey'\"></teta-icon>\n </button>\n <span class=\"font-title-2\" style=\"display: contents\"><ng-container\n *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n </teta-toolbar>\n <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n <button\n teta-button\n style=\"\n transform-origin: 0 0;\n transform: rotate(-90deg) translateX(-100%);\n margin: 8px;\n \"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"openPanel()\"\n >\n <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n <teta-icon [name]=\"direction === 'right' ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n </button>\n </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"] }]
|
|
3800
|
+
args: [{ selector: 'teta-expand-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"open\">\n <teta-toolbar\n style=\"display: flex\"\n [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n <button\n teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"closePanel()\"\n >\n <teta-icon [palette]=\"'text'\" [name]=\"direction === 'right' ? 'arrowRightKey' : 'arrowLeftKey'\"></teta-icon>\n </button>\n <span class=\"font-title-2\" style=\"display: contents\"><ng-container\n *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n </teta-toolbar>\n <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n <button\n teta-button\n style=\"\n transform-origin: 0 0;\n transform: rotate(-90deg) translateX(-100%);\n margin: 8px;\n \"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n (click)=\"openPanel()\"\n >\n <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n <teta-icon [name]=\"direction === 'right' ? 'arrowUpKey' : 'arrowDownKey'\" [palette]=\"'text'\"></teta-icon>\n </button>\n </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"] }]
|
|
3784
3801
|
}], ctorParameters: function () { return []; }, propDecorators: { content: [{
|
|
3785
3802
|
type: ContentChild,
|
|
3786
3803
|
args: [ExpandPanelContentDirective, { static: false }]
|
|
@@ -3881,11 +3898,11 @@ class FileUploadAreaComponent {
|
|
|
3881
3898
|
event.stopPropagation();
|
|
3882
3899
|
}
|
|
3883
3900
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FileUploadAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FileUploadAreaComponent, selector: "teta-file-upload-area", inputs: { multiple: "multiple", disabled: "disabled", accept: "accept" }, outputs: { upload: "upload" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class.file-upload": "this.fileUpload", "class.file-upload_active": "this.fileUploadActive" } }, queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["buttonTemplate"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n <input #fileUpload\n id=\"upload-input\"\n class=\"file-upload-input\"\n type=\"file\"\n name=\"fileUpload\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? 'multiple' : null\"\n [disabled]=\"disabled\"\n (change)=\"fileChanged($event)\"/>\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate || defaultTemplate\"\n ></ng-container>\n</label>\n<ng-template #defaultTemplate>\n <teta-button [palette]=\"'primary'\" type=\"button\">\n <teta-icon [name]=\"'search'\"></teta-icon>\n {{'common.browse' | transloco}}\n </teta-button>\n</ng-template>\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3901
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FileUploadAreaComponent, selector: "teta-file-upload-area", inputs: { multiple: "multiple", disabled: "disabled", accept: "accept" }, outputs: { upload: "upload" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class.file-upload": "this.fileUpload", "class.file-upload_active": "this.fileUploadActive" } }, queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["buttonTemplate"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n <input #fileUpload\n id=\"upload-input\"\n class=\"file-upload-input\"\n type=\"file\"\n name=\"fileUpload\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? 'multiple' : null\"\n [disabled]=\"disabled\"\n (change)=\"fileChanged($event)\"/>\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate || defaultTemplate\"\n ></ng-container>\n</label>\n<ng-template #defaultTemplate>\n <teta-button [palette]=\"'primary'\" type=\"button\">\n <teta-icon [name]=\"'search'\" [palette]=\"'white'\"></teta-icon>\n {{'common.browse' | transloco}}\n </teta-button>\n</ng-template>\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3885
3902
|
}
|
|
3886
3903
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FileUploadAreaComponent, decorators: [{
|
|
3887
3904
|
type: Component,
|
|
3888
|
-
args: [{ selector: 'teta-file-upload-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n <input #fileUpload\n id=\"upload-input\"\n class=\"file-upload-input\"\n type=\"file\"\n name=\"fileUpload\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? 'multiple' : null\"\n [disabled]=\"disabled\"\n (change)=\"fileChanged($event)\"/>\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate || defaultTemplate\"\n ></ng-container>\n</label>\n<ng-template #defaultTemplate>\n <teta-button [palette]=\"'primary'\" type=\"button\">\n <teta-icon [name]=\"'search'\"></teta-icon>\n {{'common.browse' | transloco}}\n </teta-button>\n</ng-template>\n", styles: [":host{display:flex}\n"] }]
|
|
3905
|
+
args: [{ selector: 'teta-file-upload-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n <input #fileUpload\n id=\"upload-input\"\n class=\"file-upload-input\"\n type=\"file\"\n name=\"fileUpload\"\n [attr.accept]=\"accept\"\n [attr.multiple]=\"multiple ? 'multiple' : null\"\n [disabled]=\"disabled\"\n (change)=\"fileChanged($event)\"/>\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate || defaultTemplate\"\n ></ng-container>\n</label>\n<ng-template #defaultTemplate>\n <teta-button [palette]=\"'primary'\" type=\"button\">\n <teta-icon [name]=\"'search'\" [palette]=\"'white'\"></teta-icon>\n {{'common.browse' | transloco}}\n </teta-button>\n</ng-template>\n", styles: [":host{display:flex}\n"] }]
|
|
3889
3906
|
}], ctorParameters: function () { return []; }, propDecorators: { fileUpload: [{
|
|
3890
3907
|
type: HostBinding,
|
|
3891
3908
|
args: ['class.file-upload']
|
|
@@ -4377,13 +4394,15 @@ class ScrollableComponent {
|
|
|
4377
4394
|
}
|
|
4378
4395
|
scrollVertical(event) {
|
|
4379
4396
|
this._container.nativeElement.scrollTop = event.target.scrollTop;
|
|
4397
|
+
// event.scrollLeft = this._container.nativeElement.scrollLeft;
|
|
4380
4398
|
// this._elementRef.nativeElement.dispatchEvent(event);
|
|
4381
|
-
this.scroll.emit(event);
|
|
4399
|
+
// this.scroll.emit(event);
|
|
4382
4400
|
}
|
|
4383
4401
|
scrollHorizontal(event) {
|
|
4384
4402
|
this._container.nativeElement.scrollLeft = event.target.scrollLeft;
|
|
4403
|
+
// event.scrollTop = this._container.nativeElement.scrollTop;
|
|
4385
4404
|
// this._elementRef.nativeElement.dispatchEvent(event);
|
|
4386
|
-
this.scroll.emit(event);
|
|
4405
|
+
// this.scroll.emit(event);
|
|
4387
4406
|
}
|
|
4388
4407
|
ngOnInit() {
|
|
4389
4408
|
this._container = this._scrollableWrapper;
|
|
@@ -5392,7 +5411,7 @@ class SelectComponent {
|
|
|
5392
5411
|
useExisting: forwardRef(() => SelectComponent),
|
|
5393
5412
|
multi: true,
|
|
5394
5413
|
},
|
|
5395
|
-
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container *tetaLet=\"locale | async as loc\">\n <teta-dropdown [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\">\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n <teta-icon *ngIf=\"icon\" [name]=\"icon\" class=\"margin-right-1\"></teta-icon>\n <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0)&&!multiple\">\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\"></teta-icon>\n </div>\n <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-body row_auto\"\n (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"searchRef\">\n <div class=\"select-search padding-h-2\">\n <teta-text-field [ngModel]=\"searchText\"\n [class]=\"'select_'+viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf=\"visibleOptions?.length;else notFound \">\n <ng-container *ngIf=\"!multiple && allowNull\">\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)=\"clear()\">\n {{loc.notSelected}}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n </ng-container>\n <teta-scrollable *ngIf=\"virtual; else default\" class=\"column column_auto padding-h-2\">\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]=\"40\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\">\n <div [class]=\"'select-list-item select-list-item_interactive justify-content-between select_'+viewType\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n [class.select-list-item_active]=\"itemSelected(option)\"\n [tetaHighlight]=\"searchText\"\n (click)=\"clickOption(option, $event)\">\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </div>\n <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'text'\"\n class=\"margin-left-2\"></teta-icon>\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n <ng-template #default>\n <teta-scrollable class=\"column column_auto padding-h-2\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"select-list\">\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *ngFor=\"let option of visibleOptions\"\n [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n [class.select-list-item]=\"multiple\"\n (click)=\"clickOption(option, $event)\">\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </span>\n <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </div>\n </teta-scrollable>\n </ng-template>\n </ng-container>\n <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n <div *ngFor=\"let item of value\" class=\"tag\">\n {{getText(item)}}\n <teta-icon class=\"cursor-pointer\" [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n </div>\n </div>\n </div>\n </teta-dropdown>\n <ng-template #notFound>\n <p\n class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">{{notFoundText || loc.notFound}}</p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{getText(option)}}\n </ng-template>\n <ng-template #valueDefault let-value>\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n {{loc.selected + ' ' + value?.length}}\n </div>\n <ng-container *ngIf=\"!multiple\">\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n </ng-container>\n </ng-template>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5414
|
+
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container *tetaLet=\"locale | async as loc\">\n <teta-dropdown [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\">\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n <teta-icon *ngIf=\"icon\" [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0)&&!multiple\">\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-body row_auto\"\n (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"searchRef\">\n <div class=\"select-search padding-h-2\">\n <teta-text-field [ngModel]=\"searchText\"\n [class]=\"'select_'+viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf=\"visibleOptions?.length;else notFound \">\n <ng-container *ngIf=\"!multiple && allowNull\">\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)=\"clear()\">\n {{loc.notSelected}}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n </ng-container>\n <teta-scrollable *ngIf=\"virtual; else default\" class=\"column column_auto padding-h-2\">\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]=\"40\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\">\n <div [class]=\"'select-list-item select-list-item_interactive justify-content-between select_'+viewType\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n [class.select-list-item_active]=\"itemSelected(option)\"\n [tetaHighlight]=\"searchText\"\n (click)=\"clickOption(option, $event)\">\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </div>\n <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'text'\"\n class=\"margin-left-2\"></teta-icon>\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n <ng-template #default>\n <teta-scrollable class=\"column column_auto padding-h-2\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"select-list\">\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *ngFor=\"let option of visibleOptions\"\n [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n [class.select-list-item]=\"multiple\"\n (click)=\"clickOption(option, $event)\">\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </span>\n <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </div>\n </teta-scrollable>\n </ng-template>\n </ng-container>\n <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n <div *ngFor=\"let item of value\" class=\"tag\">\n {{getText(item)}}\n <teta-icon class=\"cursor-pointer\" [palette]=\"'text'\" [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n </div>\n </div>\n </div>\n </teta-dropdown>\n <ng-template #notFound>\n <p\n class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">{{notFoundText || loc.notFound}}</p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{getText(option)}}\n </ng-template>\n <ng-template #valueDefault let-value>\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n {{loc.selected + ' ' + value?.length}}\n </div>\n <ng-container *ngIf=\"!multiple\">\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n </ng-container>\n </ng-template>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5396
5415
|
}
|
|
5397
5416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SelectComponent, decorators: [{
|
|
5398
5417
|
type: Component,
|
|
@@ -5402,7 +5421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
|
|
|
5402
5421
|
useExisting: forwardRef(() => SelectComponent),
|
|
5403
5422
|
multi: true,
|
|
5404
5423
|
},
|
|
5405
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet=\"locale | async as loc\">\n <teta-dropdown [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\">\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n <teta-icon *ngIf=\"icon\" [name]=\"icon\" class=\"margin-right-1\"></teta-icon>\n <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0)&&!multiple\">\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\"></teta-icon>\n </div>\n <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-body row_auto\"\n (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"searchRef\">\n <div class=\"select-search padding-h-2\">\n <teta-text-field [ngModel]=\"searchText\"\n [class]=\"'select_'+viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf=\"visibleOptions?.length;else notFound \">\n <ng-container *ngIf=\"!multiple && allowNull\">\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)=\"clear()\">\n {{loc.notSelected}}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n </ng-container>\n <teta-scrollable *ngIf=\"virtual; else default\" class=\"column column_auto padding-h-2\">\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]=\"40\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\">\n <div [class]=\"'select-list-item select-list-item_interactive justify-content-between select_'+viewType\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n [class.select-list-item_active]=\"itemSelected(option)\"\n [tetaHighlight]=\"searchText\"\n (click)=\"clickOption(option, $event)\">\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </div>\n <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'text'\"\n class=\"margin-left-2\"></teta-icon>\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n <ng-template #default>\n <teta-scrollable class=\"column column_auto padding-h-2\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"select-list\">\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *ngFor=\"let option of visibleOptions\"\n [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n [class.select-list-item]=\"multiple\"\n (click)=\"clickOption(option, $event)\">\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </span>\n <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </div>\n </teta-scrollable>\n </ng-template>\n </ng-container>\n <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n <div *ngFor=\"let item of value\" class=\"tag\">\n {{getText(item)}}\n <teta-icon class=\"cursor-pointer\" [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n </div>\n </div>\n </div>\n </teta-dropdown>\n <ng-template #notFound>\n <p\n class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">{{notFoundText || loc.notFound}}</p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{getText(option)}}\n </ng-template>\n <ng-template #valueDefault let-value>\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n {{loc.selected + ' ' + value?.length}}\n </div>\n <ng-container *ngIf=\"!multiple\">\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n </ng-container>\n </ng-template>\n</ng-container>\n\n" }]
|
|
5424
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet=\"locale | async as loc\">\n <teta-dropdown [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\">\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n <teta-icon *ngIf=\"icon\" [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0)&&!multiple\">\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-body row_auto\"\n (click)=\"$event.preventDefault()\">\n <ng-container *ngIf=\"searchRef\">\n <div class=\"select-search padding-h-2\">\n <teta-text-field [ngModel]=\"searchText\"\n [class]=\"'select_'+viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf=\"visibleOptions?.length;else notFound \">\n <ng-container *ngIf=\"!multiple && allowNull\">\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)=\"clear()\">\n {{loc.notSelected}}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n </ng-container>\n <teta-scrollable *ngIf=\"virtual; else default\" class=\"column column_auto padding-h-2\">\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]=\"40\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\">\n <div [class]=\"'select-list-item select-list-item_interactive justify-content-between select_'+viewType\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n [class.select-list-item_active]=\"itemSelected(option)\"\n [tetaHighlight]=\"searchText\"\n (click)=\"clickOption(option, $event)\">\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </div>\n <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'text'\"\n class=\"margin-left-2\"></teta-icon>\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n <ng-template #default>\n <teta-scrollable class=\"column column_auto padding-h-2\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"select-list\">\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *ngFor=\"let option of visibleOptions\"\n [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n [class.select-list-item]=\"multiple\"\n (click)=\"clickOption(option, $event)\">\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n </ng-container>\n </span>\n <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </div>\n </teta-scrollable>\n </ng-template>\n </ng-container>\n <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n <div *ngFor=\"let item of value\" class=\"tag\">\n {{getText(item)}}\n <teta-icon class=\"cursor-pointer\" [palette]=\"'text'\" [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n </div>\n </div>\n </div>\n </teta-dropdown>\n <ng-template #notFound>\n <p\n class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">{{notFoundText || loc.notFound}}</p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{getText(option)}}\n </ng-template>\n <ng-template #valueDefault let-value>\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n {{loc.selected + ' ' + value?.length}}\n </div>\n <ng-container *ngIf=\"!multiple\">\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n </ng-container>\n </ng-template>\n</ng-container>\n\n" }]
|
|
5406
5425
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TetaConfigService }]; }, propDecorators: { multiple: [{
|
|
5407
5426
|
type: HostBinding,
|
|
5408
5427
|
args: ['class.select_multiple']
|
|
@@ -6291,11 +6310,11 @@ class DialogComponent {
|
|
|
6291
6310
|
}
|
|
6292
6311
|
ngOnInit() { }
|
|
6293
6312
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DialogComponent, deps: [{ token: CurrentModal }, { token: DynamicData }], target: i0.ɵɵFactoryTarget.Component });
|
|
6294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DialogComponent, selector: "teta-dialog", inputs: { message: "message", buttonText: "buttonText", buttonIcon: "buttonIcon", buttonPalette: "buttonPalette", showCancelButton: "showCancelButton" }, ngImport: i0, template: "<div class=\"padding-2 font-body-2\">\n {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n <button teta-button\n *ngIf=\"showCancelButton\"\n (click)=\"cancel()\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n {{'common.cancel' | transloco}}\n </button>\n\n <button teta-button\n (click)=\"ok()\"\n [square]=\"!buttonText?.length\"\n [palette]=\"buttonPalette\">\n <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:
|
|
6313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DialogComponent, selector: "teta-dialog", inputs: { message: "message", buttonText: "buttonText", buttonIcon: "buttonIcon", buttonPalette: "buttonPalette", showCancelButton: "showCancelButton" }, ngImport: i0, template: "<div class=\"padding-2 font-body-2\">\n {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n <button teta-button\n *ngIf=\"showCancelButton\"\n (click)=\"cancel()\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n {{'common.cancel' | transloco}}\n </button>\n\n <button teta-button\n (click)=\"ok()\"\n [square]=\"!buttonText?.length\"\n [palette]=\"buttonPalette\">\n <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:300px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { 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: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
|
|
6295
6314
|
}
|
|
6296
6315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DialogComponent, decorators: [{
|
|
6297
6316
|
type: Component,
|
|
6298
|
-
args: [{ selector: 'teta-dialog', template: "<div class=\"padding-2 font-body-2\">\n {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n <button teta-button\n *ngIf=\"showCancelButton\"\n (click)=\"cancel()\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n {{'common.cancel' | transloco}}\n </button>\n\n <button teta-button\n (click)=\"ok()\"\n [square]=\"!buttonText?.length\"\n [palette]=\"buttonPalette\">\n <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:
|
|
6317
|
+
args: [{ selector: 'teta-dialog', template: "<div class=\"padding-2 font-body-2\">\n {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n <button teta-button\n *ngIf=\"showCancelButton\"\n (click)=\"cancel()\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n {{'common.cancel' | transloco}}\n </button>\n\n <button teta-button\n (click)=\"ok()\"\n [square]=\"!buttonText?.length\"\n [palette]=\"buttonPalette\">\n <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:300px}\n"] }]
|
|
6299
6318
|
}], ctorParameters: function () { return [{ type: CurrentModal }, { type: DynamicData }]; }, propDecorators: { message: [{
|
|
6300
6319
|
type: Input
|
|
6301
6320
|
}], buttonText: [{
|
|
@@ -9455,11 +9474,11 @@ class HeadCellDropdownComponent {
|
|
|
9455
9474
|
return index;
|
|
9456
9475
|
}
|
|
9457
9476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9458
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "<teta-tabs class=\"column_auto\" *ngIf=\"dropDownOpen\">\n <ng-container *ngFor=\"let tab of tabTemplates; trackBy: trackIndex\">\n <teta-tab *ngIf=\"tab.showTab(column)\">\n <ng-template tetaTabTitle>\n <ng-container *ngIf=\"tab.icon\">\n <teta-icon [name]=\"tab.icon\"></teta-icon>\n </ng-container>\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"tab.template; context: {\n column: column,\n columns: columns,\n data: data,\n state: state,\n close: closeDropdown\n }\"></ng-container>\n </ng-template>\n </teta-tab>\n </ng-container>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", data: "data", tabTemplates: "tabTemplates", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange" }, ngImport: i0, template: "<teta-tabs class=\"column_auto\" *ngIf=\"dropDownOpen\">\n <ng-container *ngFor=\"let tab of tabTemplates; trackBy: trackIndex\">\n <teta-tab *ngIf=\"tab.showTab(column)\">\n <ng-template tetaTabTitle>\n <ng-container *ngIf=\"tab.icon\">\n <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n </ng-container>\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"tab.template; context: {\n column: column,\n columns: columns,\n data: data,\n state: state,\n close: closeDropdown\n }\"></ng-container>\n </ng-template>\n </teta-tab>\n </ng-container>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: TabContentDirective, selector: "[tetaTabContent]" }, { kind: "directive", type: TabTitleDirective, selector: "[tetaTabTitle]" }, { kind: "component", type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { kind: "component", type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9459
9478
|
}
|
|
9460
9479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
|
|
9461
9480
|
type: Component,
|
|
9462
|
-
args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\" *ngIf=\"dropDownOpen\">\n <ng-container *ngFor=\"let tab of tabTemplates; trackBy: trackIndex\">\n <teta-tab *ngIf=\"tab.showTab(column)\">\n <ng-template tetaTabTitle>\n <ng-container *ngIf=\"tab.icon\">\n <teta-icon [name]=\"tab.icon\"></teta-icon>\n </ng-container>\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"tab.template; context: {\n column: column,\n columns: columns,\n data: data,\n state: state,\n close: closeDropdown\n }\"></ng-container>\n </ng-template>\n </teta-tab>\n </ng-container>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"] }]
|
|
9481
|
+
args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\" *ngIf=\"dropDownOpen\">\n <ng-container *ngFor=\"let tab of tabTemplates; trackBy: trackIndex\">\n <teta-tab *ngIf=\"tab.showTab(column)\">\n <ng-template tetaTabTitle>\n <ng-container *ngIf=\"tab.icon\">\n <teta-icon [name]=\"tab.icon\" [palette]=\"'text'\"></teta-icon>\n </ng-container>\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"tab.template; context: {\n column: column,\n columns: columns,\n data: data,\n state: state,\n close: closeDropdown\n }\"></ng-container>\n </ng-template>\n </teta-tab>\n </ng-container>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;min-width:250px}\n"] }]
|
|
9463
9482
|
}], ctorParameters: function () { return [{ type: TableService }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
|
|
9464
9483
|
type: Input
|
|
9465
9484
|
}], column: [{
|
|
@@ -9611,11 +9630,11 @@ class FilterDropdownTabComponent {
|
|
|
9611
9630
|
ngOnInit() {
|
|
9612
9631
|
}
|
|
9613
9632
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FilterDropdownTabComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9614
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: { columns: "columns", column: "column", state: "state", data: "data", close: "close" }, host: { listeners: { "keydown.enter": "enter()" } }, ngImport: i0, template: "<ng-container *ngIf=\"locale | async as loc\">\n <teta-filter-host [column]=\"column\"\n [data]=\"data\"\n [state]=\"state\"\n *ngIf=\"filterOptions | async as options\"\n [filterOptions]=\"options[column.name]\"></teta-filter-host>\n <teta-toolbar class=\"justify-content-between\">\n <button type=\"button\" teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n {{loc.clear}}\n </button>\n <button type=\"button\" teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n <teta-icon [name]=\"'tick'\"></teta-icon>\n {{loc.apply}}\n </button>\n </teta-toolbar>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilterHostComponent, selector: "teta-filter-host", inputs: ["column", "state", "data", "filterOptions"], outputs: ["filterChanged"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: { columns: "columns", column: "column", state: "state", data: "data", close: "close" }, host: { listeners: { "keydown.enter": "enter()" } }, ngImport: i0, template: "<ng-container *ngIf=\"locale | async as loc\">\n <teta-filter-host [column]=\"column\"\n [data]=\"data\"\n [state]=\"state\"\n *ngIf=\"filterOptions | async as options\"\n [filterOptions]=\"options[column.name]\"></teta-filter-host>\n <teta-toolbar class=\"justify-content-between\">\n <button type=\"button\" teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n {{loc.clear}}\n </button>\n <button type=\"button\" teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n <teta-icon [name]=\"'tick'\" [palette]=\"'white'\"></teta-icon>\n {{loc.apply}}\n </button>\n </teta-toolbar>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilterHostComponent, selector: "teta-filter-host", inputs: ["column", "state", "data", "filterOptions"], outputs: ["filterChanged"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9615
9634
|
}
|
|
9616
9635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FilterDropdownTabComponent, decorators: [{
|
|
9617
9636
|
type: Component,
|
|
9618
|
-
args: [{ selector: 'teta-filter-dropdown-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"locale | async as loc\">\n <teta-filter-host [column]=\"column\"\n [data]=\"data\"\n [state]=\"state\"\n *ngIf=\"filterOptions | async as options\"\n [filterOptions]=\"options[column.name]\"></teta-filter-host>\n <teta-toolbar class=\"justify-content-between\">\n <button type=\"button\" teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n {{loc.clear}}\n </button>\n <button type=\"button\" teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n <teta-icon [name]=\"'tick'\"></teta-icon>\n {{loc.apply}}\n </button>\n </teta-toolbar>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0}\n"] }]
|
|
9637
|
+
args: [{ selector: 'teta-filter-dropdown-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"locale | async as loc\">\n <teta-filter-host [column]=\"column\"\n [data]=\"data\"\n [state]=\"state\"\n *ngIf=\"filterOptions | async as options\"\n [filterOptions]=\"options[column.name]\"></teta-filter-host>\n <teta-toolbar class=\"justify-content-between\">\n <button type=\"button\" teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n {{loc.clear}}\n </button>\n <button type=\"button\" teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n <teta-icon [name]=\"'tick'\" [palette]=\"'white'\"></teta-icon>\n {{loc.apply}}\n </button>\n </teta-toolbar>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0}\n"] }]
|
|
9619
9638
|
}], ctorParameters: function () { return [{ type: TableService }, { type: TetaConfigService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
|
|
9620
9639
|
type: Input
|
|
9621
9640
|
}], column: [{
|
|
@@ -11946,11 +11965,11 @@ class ThemeSwitchComponent {
|
|
|
11946
11965
|
this._svc.switchTheme();
|
|
11947
11966
|
}
|
|
11948
11967
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ThemeSwitchComponent, deps: [{ token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component });
|
|
11949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ThemeSwitchComponent, selector: "teta-theme-switch", inputs: { palette: "palette", view: "view" }, ngImport: i0, template: "<button type=\"button\" teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n <teta-icon [name]=\"'lamp'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11968
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ThemeSwitchComponent, selector: "teta-theme-switch", inputs: { palette: "palette", view: "view" }, ngImport: i0, template: "<button type=\"button\" teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n <teta-icon [name]=\"'lamp'\" [palette]=\"'text'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11950
11969
|
}
|
|
11951
11970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ThemeSwitchComponent, decorators: [{
|
|
11952
11971
|
type: Component,
|
|
11953
|
-
args: [{ selector: 'teta-theme-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n <teta-icon [name]=\"'lamp'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
|
|
11972
|
+
args: [{ selector: 'teta-theme-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n <teta-icon [name]=\"'lamp'\" [palette]=\"'text'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
|
|
11954
11973
|
}], ctorParameters: function () { return [{ type: ThemeSwitchService }]; }, propDecorators: { palette: [{
|
|
11955
11974
|
type: Input
|
|
11956
11975
|
}], view: [{
|
|
@@ -12395,11 +12414,11 @@ class ResizePanelComponent {
|
|
|
12395
12414
|
}
|
|
12396
12415
|
}
|
|
12397
12416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ResizePanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
12398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { size: "size", direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n [style.width.px]=\"direction === 'vertical' ? size : ''\"\n [style.height.px]=\"direction === 'horizontal' ? size : ''\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd($event)\"\n [tetaResizeDrag]=\"direction\"\n [ngClass]=\"getClassName()\">\n <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { size: "size", direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n [style.width.px]=\"direction === 'vertical' ? size : ''\"\n [style.height.px]=\"direction === 'horizontal' ? size : ''\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd($event)\"\n [tetaResizeDrag]=\"direction\"\n [ngClass]=\"getClassName()\">\n <teta-icon [name]=\"icon\" [palette]=\"'text'\"></teta-icon>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12399
12418
|
}
|
|
12400
12419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ResizePanelComponent, decorators: [{
|
|
12401
12420
|
type: Component,
|
|
12402
|
-
args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n [style.width.px]=\"direction === 'vertical' ? size : ''\"\n [style.height.px]=\"direction === 'horizontal' ? size : ''\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd($event)\"\n [tetaResizeDrag]=\"direction\"\n [ngClass]=\"getClassName()\">\n <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n" }]
|
|
12421
|
+
args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n [style.width.px]=\"direction === 'vertical' ? size : ''\"\n [style.height.px]=\"direction === 'horizontal' ? size : ''\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd($event)\"\n [tetaResizeDrag]=\"direction\"\n [ngClass]=\"getClassName()\">\n <teta-icon [name]=\"icon\" [palette]=\"'text'\"></teta-icon>\n</div>\n" }]
|
|
12403
12422
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
12404
12423
|
type: Inject,
|
|
12405
12424
|
args: [DOCUMENT]
|