@wizishop/angular-components 15.1.139 → 15.1.141
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/angular-components.scss +1463 -1433
- package/esm2020/lib/components/calendar/calendar.component.mjs +29 -5
- package/fesm2015/wizishop-angular-components.mjs +28 -4
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +28 -4
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/components/calendar/calendar.component.d.ts +5 -1
- package/package.json +1 -1
- package/wizishop-angular-components-15.1.141.tgz +0 -0
- package/wizishop-angular-components-15.1.139.tgz +0 -0
|
@@ -2645,6 +2645,15 @@ class CalendarComponent {
|
|
|
2645
2645
|
get dateSelected() {
|
|
2646
2646
|
return this._dateSelected;
|
|
2647
2647
|
}
|
|
2648
|
+
set dateSelectedEnd(dateSelected) {
|
|
2649
|
+
if (this.disabled) {
|
|
2650
|
+
return;
|
|
2651
|
+
}
|
|
2652
|
+
this._dateSelectedEnd = new Date(dateSelected); // trigger change detection for pure pipe
|
|
2653
|
+
}
|
|
2654
|
+
get dateSelectedEnd() {
|
|
2655
|
+
return this._dateSelectedEnd;
|
|
2656
|
+
}
|
|
2648
2657
|
set calendarMinutes(calendarMinutes) {
|
|
2649
2658
|
if (!this.dateSelected) {
|
|
2650
2659
|
this.dateSelected = new Date();
|
|
@@ -2675,6 +2684,7 @@ class CalendarComponent {
|
|
|
2675
2684
|
this.datePipe = datePipe;
|
|
2676
2685
|
this.boldLabel = false; // todo remove when label will be a ng-content
|
|
2677
2686
|
this.type = 'input';
|
|
2687
|
+
this.isRange = false;
|
|
2678
2688
|
this._options = {
|
|
2679
2689
|
displayMode: 'inline',
|
|
2680
2690
|
showHeader: false,
|
|
@@ -2708,6 +2718,15 @@ class CalendarComponent {
|
|
|
2708
2718
|
selectedDates.startDate.setHours(this.dateSelected.getHours());
|
|
2709
2719
|
selectedDates.startDate.setMinutes(this.dateSelected.getMinutes());
|
|
2710
2720
|
this.dateSelected = selectedDates.startDate;
|
|
2721
|
+
if (selectedDates.endDate && this.isRange) {
|
|
2722
|
+
selectedDates.endDate.setMinutes(this.dateSelectedEnd.getMinutes());
|
|
2723
|
+
selectedDates.endDate.setMinutes(this.dateSelectedEnd.getMinutes());
|
|
2724
|
+
this.dateSelectedEnd = selectedDates.endDate;
|
|
2725
|
+
}
|
|
2726
|
+
else {
|
|
2727
|
+
selectedDates.endDate = this.dateSelected;
|
|
2728
|
+
this.dateSelectedEnd = this.dateSelected;
|
|
2729
|
+
}
|
|
2711
2730
|
this.triggerDateSelectedChange();
|
|
2712
2731
|
}
|
|
2713
2732
|
triggerDateSelectedChange() {
|
|
@@ -2715,10 +2734,11 @@ class CalendarComponent {
|
|
|
2715
2734
|
this.dateSelectedChange.emit(this.dateSelected);
|
|
2716
2735
|
this.triggerChange({
|
|
2717
2736
|
startDate: this.dateSelected,
|
|
2718
|
-
endDate: this.
|
|
2737
|
+
endDate: this.dateSelectedEnd
|
|
2719
2738
|
});
|
|
2720
2739
|
}
|
|
2721
2740
|
triggerChange(event) {
|
|
2741
|
+
console.log(event);
|
|
2722
2742
|
this.changeData.emit(event);
|
|
2723
2743
|
}
|
|
2724
2744
|
openCalendar(value = null) {
|
|
@@ -2799,14 +2819,14 @@ class CalendarComponent {
|
|
|
2799
2819
|
}
|
|
2800
2820
|
}
|
|
2801
2821
|
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: CalendarComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
2802
|
-
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", boldLabel: "boldLabel", type: "type", options: "options", position: "position", dateSelected: "dateSelected", typeDate: "typeDate", noMargin: "noMargin", disabled: "disabled" }, outputs: { dateSelectedChange: "dateSelectedChange", changeData: "changeData" }, providers: [
|
|
2822
|
+
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", boldLabel: "boldLabel", type: "type", isRange: "isRange", options: "options", position: "position", dateSelected: "dateSelected", dateSelectedEnd: "dateSelectedEnd", typeDate: "typeDate", noMargin: "noMargin", disabled: "disabled" }, outputs: { dateSelectedChange: "dateSelectedChange", changeData: "changeData" }, providers: [
|
|
2803
2823
|
{
|
|
2804
2824
|
provide: NG_VALUE_ACCESSOR,
|
|
2805
2825
|
useExisting: CalendarComponent,
|
|
2806
2826
|
multi: true
|
|
2807
2827
|
},
|
|
2808
2828
|
DatePipe
|
|
2809
|
-
], viewQueries: [{ propertyName: "minutes", first: true, predicate: ["minutes"], descendants: true }, { propertyName: "hours", first: true, predicate: ["hours"], descendants: true }, { propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"wac-calendar\"\r\n [ngClass]=\"{\r\n 'wac-calendar--input': type === 'input',\r\n 'wac-calendar--onlyDate': typeDate === 'date',\r\n 'wac-calendar--edit': type === 'edit',\r\n 'wac-calendar--select': type === 'select',\r\n 'wac-calendar--no-margin': noMargin,\r\n 'wac-calendar--open': open\r\n }\"\r\n [zIndexToggle]=\"open\"\r\n>\r\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\r\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\r\n <wac-optional-disable-container [disabled]=\"disabled\">\r\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\r\n <div class=\"wac-calendar__wrapper\">\r\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__input__icon\">\r\n <i class=\"far fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy'}}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__editInPlace__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace__date\">\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__select__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"wac-calendar__absolute\"\r\n [ngClass]=\"{\r\n top: position === 'top',\r\n bottom: position === 'bottom',\r\n left: position === 'left',\r\n right: position === 'right',\r\n 'right-top': position === 'right-top',\r\n 'right-bottom': position === 'right-bottom',\r\n 'left-top': position === 'left-top',\r\n 'left-bottom': position === 'left-bottom',\r\n 'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\r\n }\"\r\n >\r\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\r\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\r\n </nwb-date-picker>\r\n <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\r\n <div class=\"wac-calendar__absolute__time__wrapper\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\r\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours($event)\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours($event)\">\r\n <i class=\"fas fa-minus\"></i>\r\n </button>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\r\n <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\r\n <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\r\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes($event)\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes($event)\">\r\n <i class=\"fas fa-minus\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </wac-optional-disable-container>\r\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i3.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: i3.NwbDatePickerInputDateTypeDirective, selector: "input[nwbDateType]", inputs: ["nwbDateType"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[wacOnlyNumber]", inputs: ["wacOnlyNumber"] }, { kind: "component", type: OptionalDisableContainerComponent, selector: "wac-optional-disable-container", inputs: ["disabled"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [opacityAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2829
|
+
], viewQueries: [{ propertyName: "minutes", first: true, predicate: ["minutes"], descendants: true }, { propertyName: "hours", first: true, predicate: ["hours"], descendants: true }, { propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"wac-calendar\"\r\n [ngClass]=\"{\r\n 'wac-calendar--input': type === 'input',\r\n 'wac-calendar--onlyDate': typeDate === 'date',\r\n 'wac-calendar--edit': type === 'edit',\r\n 'wac-calendar--select': type === 'select',\r\n 'wac-calendar--no-margin': noMargin,\r\n 'wac-calendar--open': open,\r\n 'wac-calendar--range': isRange\r\n }\"\r\n [zIndexToggle]=\"open\"\r\n>\r\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\r\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\r\n <wac-optional-disable-container [disabled]=\"disabled\">\r\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\r\n <div class=\"wac-calendar__wrapper\">\r\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__input__icon\">\r\n <i class=\"far fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy'}}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\r\n </div>\r\n <ng-container *ngIf=\"isRange\">\r\n <div class=\"wac-calendar__wrapper__input__separator\"><i class=\"fa-solid fa-chevron-right\"></i></div>\r\n <div class=\"wac-calendar__wrapper__input__date\">\r\n <span *ngIf=\"dateSelectedEnd\" @opacityAnimation>{{ dateSelectedEnd | date: 'dd/MM/yyyy'}}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelectedEnd\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelectedEnd\" @opacityAnimation>{{ dateSelectedEnd | date: 'HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelectedEnd\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__editInPlace__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace__date\">\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__select__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"wac-calendar__absolute\"\r\n [ngClass]=\"{\r\n top: position === 'top',\r\n bottom: position === 'bottom',\r\n left: position === 'left',\r\n right: position === 'right',\r\n 'right-top': position === 'right-top',\r\n 'right-bottom': position === 'right-bottom',\r\n 'left-top': position === 'left-top',\r\n 'left-bottom': position === 'left-bottom',\r\n 'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\r\n }\"\r\n >\r\n\r\n <!-- Solo nwbDatePicker -->\r\n <ng-container *ngIf=\"!isRange\">\r\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\r\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\r\n </nwb-date-picker>\r\n </ng-container>\r\n\r\n <!-- Range nwbDatePicker -->\r\n <ng-container *ngIf=\"isRange\">\r\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\r\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\r\n <input [nwbDatepickerEnd]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelectedEnd?.toISOString()\" />\r\n </nwb-date-picker>\r\n </ng-container>\r\n <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\r\n <div class=\"wac-calendar__absolute__time__wrapper\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\r\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours($event)\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours($event)\">\r\n <i class=\"fas fa-minus\"></i>\r\n </button>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\r\n <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\r\n <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\r\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes($event)\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes($event)\">\r\n <i class=\"fas fa-minus\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </wac-optional-disable-container>\r\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i3.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: i3.NwbDatePickerInputEndDirective, selector: "input[nwbDatepickerEnd]", inputs: ["nwbDatepickerEnd", "nwbDateType"] }, { kind: "directive", type: i3.NwbDatePickerInputDateTypeDirective, selector: "input[nwbDateType]", inputs: ["nwbDateType"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[wacOnlyNumber]", inputs: ["wacOnlyNumber"] }, { kind: "component", type: OptionalDisableContainerComponent, selector: "wac-optional-disable-container", inputs: ["disabled"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [opacityAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2810
2830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
2811
2831
|
type: Component,
|
|
2812
2832
|
args: [{ selector: 'wac-calendar', providers: [
|
|
@@ -2816,7 +2836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
2816
2836
|
multi: true
|
|
2817
2837
|
},
|
|
2818
2838
|
DatePipe
|
|
2819
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [opacityAnimation], template: "<div\r\n class=\"wac-calendar\"\r\n [ngClass]=\"{\r\n 'wac-calendar--input': type === 'input',\r\n 'wac-calendar--onlyDate': typeDate === 'date',\r\n 'wac-calendar--edit': type === 'edit',\r\n 'wac-calendar--select': type === 'select',\r\n 'wac-calendar--no-margin': noMargin,\r\n 'wac-calendar--open': open\r\n }\"\r\n [zIndexToggle]=\"open\"\r\n>\r\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\r\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\r\n <wac-optional-disable-container [disabled]=\"disabled\">\r\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\r\n <div class=\"wac-calendar__wrapper\">\r\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__input__icon\">\r\n <i class=\"far fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy'}}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__editInPlace__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace__date\">\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__select__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"wac-calendar__absolute\"\r\n [ngClass]=\"{\r\n top: position === 'top',\r\n bottom: position === 'bottom',\r\n left: position === 'left',\r\n right: position === 'right',\r\n 'right-top': position === 'right-top',\r\n 'right-bottom': position === 'right-bottom',\r\n 'left-top': position === 'left-top',\r\n 'left-bottom': position === 'left-bottom',\r\n 'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\r\n }\"\r\n >\r\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\r\n
|
|
2839
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [opacityAnimation], template: "<div\r\n class=\"wac-calendar\"\r\n [ngClass]=\"{\r\n 'wac-calendar--input': type === 'input',\r\n 'wac-calendar--onlyDate': typeDate === 'date',\r\n 'wac-calendar--edit': type === 'edit',\r\n 'wac-calendar--select': type === 'select',\r\n 'wac-calendar--no-margin': noMargin,\r\n 'wac-calendar--open': open,\r\n 'wac-calendar--range': isRange\r\n }\"\r\n [zIndexToggle]=\"open\"\r\n>\r\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\r\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\r\n <wac-optional-disable-container [disabled]=\"disabled\">\r\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\r\n <div class=\"wac-calendar__wrapper\">\r\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__input__icon\">\r\n <i class=\"far fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy'}}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\r\n </div>\r\n <ng-container *ngIf=\"isRange\">\r\n <div class=\"wac-calendar__wrapper__input__separator\"><i class=\"fa-solid fa-chevron-right\"></i></div>\r\n <div class=\"wac-calendar__wrapper__input__date\">\r\n <span *ngIf=\"dateSelectedEnd\" @opacityAnimation>{{ dateSelectedEnd | date: 'dd/MM/yyyy'}}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelectedEnd\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelectedEnd\" @opacityAnimation>{{ dateSelectedEnd | date: 'HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelectedEnd\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__editInPlace__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__editInPlace__date\">\r\n <div class=\"wac-calendar__wrapper__input__time\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\r\n <div class=\"wac-calendar__wrapper__select__icon\">\r\n <i class=\"fal fa-calendar-alt\"></i>\r\n </div>\r\n <div class=\"wac-calendar__wrapper__select__date\">\r\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\r\n <span class=\"placeholder-date\" *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"wac-calendar__absolute\"\r\n [ngClass]=\"{\r\n top: position === 'top',\r\n bottom: position === 'bottom',\r\n left: position === 'left',\r\n right: position === 'right',\r\n 'right-top': position === 'right-top',\r\n 'right-bottom': position === 'right-bottom',\r\n 'left-top': position === 'left-top',\r\n 'left-bottom': position === 'left-bottom',\r\n 'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\r\n }\"\r\n >\r\n\r\n <!-- Solo nwbDatePicker -->\r\n <ng-container *ngIf=\"!isRange\">\r\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\r\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\r\n </nwb-date-picker>\r\n </ng-container>\r\n\r\n <!-- Range nwbDatePicker -->\r\n <ng-container *ngIf=\"isRange\">\r\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\r\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\r\n <input [nwbDatepickerEnd]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelectedEnd?.toISOString()\" />\r\n </nwb-date-picker>\r\n </ng-container>\r\n <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\r\n <div class=\"wac-calendar__absolute__time__wrapper\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\r\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours($event)\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours($event)\">\r\n <i class=\"fas fa-minus\"></i>\r\n </button>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\r\n <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\r\n </div>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\r\n <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\r\n </div>\r\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\r\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes($event)\">\r\n <i class=\"fas fa-plus\"></i>\r\n </button>\r\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes($event)\">\r\n <i class=\"fas fa-minus\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </wac-optional-disable-container>\r\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\r\n</div>\r\n" }]
|
|
2820
2840
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { minutes: [{
|
|
2821
2841
|
type: ViewChild,
|
|
2822
2842
|
args: ['minutes']
|
|
@@ -2832,12 +2852,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
2832
2852
|
type: Input
|
|
2833
2853
|
}], type: [{
|
|
2834
2854
|
type: Input
|
|
2855
|
+
}], isRange: [{
|
|
2856
|
+
type: Input
|
|
2835
2857
|
}], options: [{
|
|
2836
2858
|
type: Input
|
|
2837
2859
|
}], position: [{
|
|
2838
2860
|
type: Input
|
|
2839
2861
|
}], dateSelected: [{
|
|
2840
2862
|
type: Input
|
|
2863
|
+
}], dateSelectedEnd: [{
|
|
2864
|
+
type: Input
|
|
2841
2865
|
}], dateSelectedChange: [{
|
|
2842
2866
|
type: Output
|
|
2843
2867
|
}], typeDate: [{
|