@wizishop/angular-components 14.4.22 → 14.4.23
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 +129 -129
- package/assets/i18n/en.json +1 -1
- package/assets/i18n/fr.json +1 -1
- package/esm2020/lib/animations/show/opacity.animation.mjs +5 -0
- package/esm2020/lib/components/calendar/calendar.component.mjs +16 -6
- package/fesm2015/wizishop-angular-components.mjs +19 -5
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +17 -5
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/animations/show/opacity.animation.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-angular-components-14.4.23.tgz +0 -0
- package/wizishop-angular-components-14.4.22.tgz +0 -0
|
@@ -1927,6 +1927,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
1927
1927
|
type: Output
|
|
1928
1928
|
}] } });
|
|
1929
1929
|
|
|
1930
|
+
const opacityAnimation = trigger('opacityAnimation', [
|
|
1931
|
+
transition(':enter', [style({ opacity: 0 }), animate('0.4s ease-in-out', style({ opacity: 1 }))])
|
|
1932
|
+
]);
|
|
1933
|
+
|
|
1930
1934
|
class OptionalDisableContainerComponent {
|
|
1931
1935
|
constructor() {
|
|
1932
1936
|
this.disabled = false;
|
|
@@ -1952,7 +1956,6 @@ class CalendarComponent {
|
|
|
1952
1956
|
showFooter: true,
|
|
1953
1957
|
};
|
|
1954
1958
|
this.position = 'bottom';
|
|
1955
|
-
this._dateSelected = new Date();
|
|
1956
1959
|
this.dateSelectedChange = new EventEmitter();
|
|
1957
1960
|
this.typeDate = 'datetime-local';
|
|
1958
1961
|
this.noMargin = false;
|
|
@@ -1984,6 +1987,9 @@ class CalendarComponent {
|
|
|
1984
1987
|
return this._dateSelected;
|
|
1985
1988
|
}
|
|
1986
1989
|
set calendarMinutes(calendarMinutes) {
|
|
1990
|
+
if (!this.dateSelected) {
|
|
1991
|
+
this.dateSelected = new Date();
|
|
1992
|
+
}
|
|
1987
1993
|
const minutes = this.formatTime(calendarMinutes, 0, 59);
|
|
1988
1994
|
this.dateSelected.setMinutes(minutes);
|
|
1989
1995
|
this.dateSelected = this.dateSelected; // trigger change detection
|
|
@@ -1991,9 +1997,12 @@ class CalendarComponent {
|
|
|
1991
1997
|
this.triggerDateSelectedChange();
|
|
1992
1998
|
}
|
|
1993
1999
|
get calendarMinutes() {
|
|
1994
|
-
return this.datePipe.transform(this.dateSelected, 'mm');
|
|
2000
|
+
return this.datePipe.transform(this.dateSelected ?? new Date(), 'mm');
|
|
1995
2001
|
}
|
|
1996
2002
|
set calendarHours(calendarHours) {
|
|
2003
|
+
if (!this.dateSelected) {
|
|
2004
|
+
this.dateSelected = new Date();
|
|
2005
|
+
}
|
|
1997
2006
|
const hours = this.formatTime(calendarHours, 0, 23);
|
|
1998
2007
|
this.dateSelected.setHours(hours);
|
|
1999
2008
|
this.dateSelected = this.dateSelected; // trigger change detection
|
|
@@ -2001,7 +2010,7 @@ class CalendarComponent {
|
|
|
2001
2010
|
this.triggerDateSelectedChange();
|
|
2002
2011
|
}
|
|
2003
2012
|
get calendarHours() {
|
|
2004
|
-
return this.datePipe.transform(this.dateSelected, 'HH');
|
|
2013
|
+
return this.datePipe.transform(this.dateSelected ?? new Date(), 'HH');
|
|
2005
2014
|
}
|
|
2006
2015
|
ngOnChanges(changes) {
|
|
2007
2016
|
if (changes.label || changes.type) {
|
|
@@ -2012,6 +2021,9 @@ class CalendarComponent {
|
|
|
2012
2021
|
if (this.disabled) {
|
|
2013
2022
|
return;
|
|
2014
2023
|
}
|
|
2024
|
+
if (!this.dateSelected) {
|
|
2025
|
+
this.dateSelected = new Date();
|
|
2026
|
+
}
|
|
2015
2027
|
selectedDates.startDate.setHours(this.dateSelected.getHours());
|
|
2016
2028
|
selectedDates.startDate.setMinutes(this.dateSelected.getMinutes());
|
|
2017
2029
|
this.dateSelected = selectedDates.startDate;
|
|
@@ -2113,7 +2125,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
2113
2125
|
multi: true
|
|
2114
2126
|
},
|
|
2115
2127
|
DatePipe
|
|
2116
|
-
], 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\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\n 'wac-calendar--onlyDate': typeDate === 'date',\n 'wac-calendar--edit': type === 'edit',\n 'wac-calendar--select': type === 'select',\n 'wac-calendar--no-margin': noMargin,\n 'wac-calendar--open': open\n }\"\n [zIndexToggle]=\"open\"\n>\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n <wac-optional-disable-container [disabled]=\"disabled\">\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n <div class=\"wac-calendar__wrapper\">\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__input__icon\">\n <i class=\"far fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__input__date\">\n {{ dateSelected | date: 'dd/MM/yyyy' }}
|
|
2128
|
+
], 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\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\n 'wac-calendar--onlyDate': typeDate === 'date',\n 'wac-calendar--edit': type === 'edit',\n 'wac-calendar--select': type === 'select',\n 'wac-calendar--no-margin': noMargin,\n 'wac-calendar--open': open\n }\"\n [zIndexToggle]=\"open\"\n>\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n <wac-optional-disable-container [disabled]=\"disabled\">\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n <div class=\"wac-calendar__wrapper\">\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__input__icon\">\n <i class=\"far fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__input__date\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy'}}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\n </div>\n <div class=\"wac-calendar__wrapper__input__time\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'HH:mm' }}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\n </div>\n </div>\n <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n <i class=\"fal fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__editInPlace__date\">\n <div class=\"wac-calendar__wrapper__input__time\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\n </div>\n </div>\n </div>\n <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__select__icon\">\n <i class=\"fal fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__select__date\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\n </div>\n </div>\n </div>\n <div\n class=\"wac-calendar__absolute\"\n [ngClass]=\"{\n top: position === 'top',\n bottom: position === 'bottom',\n left: position === 'left',\n right: position === 'right',\n 'right-top': position === 'right-top',\n 'right-bottom': position === 'right-bottom',\n 'left-top': position === 'left-top',\n 'left-bottom': position === 'left-bottom',\n 'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n }\"\n >\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\n </nwb-date-picker>\n <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n <div class=\"wac-calendar__absolute__time__wrapper\">\n <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours($event)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours($event)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\n </div>\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes($event)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes($event)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </wac-optional-disable-container>\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\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 });
|
|
2117
2129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
2118
2130
|
type: Component,
|
|
2119
2131
|
args: [{ selector: 'wac-calendar', providers: [
|
|
@@ -2123,7 +2135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
2123
2135
|
multi: true
|
|
2124
2136
|
},
|
|
2125
2137
|
DatePipe
|
|
2126
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\n 'wac-calendar--onlyDate': typeDate === 'date',\n 'wac-calendar--edit': type === 'edit',\n 'wac-calendar--select': type === 'select',\n 'wac-calendar--no-margin': noMargin,\n 'wac-calendar--open': open\n }\"\n [zIndexToggle]=\"open\"\n>\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n <wac-optional-disable-container [disabled]=\"disabled\">\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n <div class=\"wac-calendar__wrapper\">\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__input__icon\">\n <i class=\"far fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__input__date\">\n {{ dateSelected | date: 'dd/MM/yyyy' }}
|
|
2138
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [opacityAnimation], template: "<div\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\n 'wac-calendar--onlyDate': typeDate === 'date',\n 'wac-calendar--edit': type === 'edit',\n 'wac-calendar--select': type === 'select',\n 'wac-calendar--no-margin': noMargin,\n 'wac-calendar--open': open\n }\"\n [zIndexToggle]=\"open\"\n>\n <p [class]=\"'wac-calendar__label' + (boldLabel ? ' bold' : '')\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n <wac-optional-disable-container [disabled]=\"disabled\">\n <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n <div class=\"wac-calendar__wrapper\">\n <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__input__icon\">\n <i class=\"far fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__input__date\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy'}}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/mm/yyyy' | translate }}</span>\n </div>\n <div class=\"wac-calendar__wrapper__input__time\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'HH:mm' }}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.HH:mm' | translate }}</span>\n </div>\n </div>\n <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n <i class=\"fal fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__editInPlace__date\">\n <div class=\"wac-calendar__wrapper__input__time\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\n </div>\n </div>\n </div>\n <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n <div class=\"wac-calendar__wrapper__select__icon\">\n <i class=\"fal fa-calendar-alt\"></i>\n </div>\n <div class=\"wac-calendar__wrapper__select__date\">\n <span *ngIf=\"dateSelected\" @opacityAnimation>{{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}</span>\n <span *ngIf=\"!dateSelected\" @opacityAnimation>{{ 'wac.Date.PlaceHolder.dd/MM/yyyy_HH:mm' | translate }}</span>\n </div>\n </div>\n </div>\n <div\n class=\"wac-calendar__absolute\"\n [ngClass]=\"{\n top: position === 'top',\n bottom: position === 'bottom',\n left: position === 'left',\n right: position === 'right',\n 'right-top': position === 'right-top',\n 'right-bottom': position === 'right-bottom',\n 'left-top': position === 'left-top',\n 'left-bottom': position === 'left-bottom',\n 'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n }\"\n >\n <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n <input [nwbDatepickerStart]=\"datePicker\" type=\"text\" [nwbDateType]=\"'date'\" [value]=\"dateSelected?.toISOString()\" />\n </nwb-date-picker>\n <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n <div class=\"wac-calendar__absolute__time__wrapper\">\n <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"incrementHours($event)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"decrementHours($event)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n <input #hours type=\"text\" [(ngModel)]=\"calendarHours\" [wacOnlyNumber]=\"true\"/>\n </div>\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n <input #minutes type=\"text\" [(ngModel)]=\"calendarMinutes\" [wacOnlyNumber]=\"true\"/>\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"incrementMinutes($event)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"decrementsMinutes($event)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </wac-optional-disable-container>\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
|
|
2127
2139
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { minutes: [{
|
|
2128
2140
|
type: ViewChild,
|
|
2129
2141
|
args: ['minutes']
|