@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
|
@@ -1935,6 +1935,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
1935
1935
|
type: Output
|
|
1936
1936
|
}] } });
|
|
1937
1937
|
|
|
1938
|
+
const opacityAnimation = trigger('opacityAnimation', [
|
|
1939
|
+
transition(':enter', [style({ opacity: 0 }), animate('0.4s ease-in-out', style({ opacity: 1 }))])
|
|
1940
|
+
]);
|
|
1941
|
+
|
|
1938
1942
|
class OptionalDisableContainerComponent {
|
|
1939
1943
|
constructor() {
|
|
1940
1944
|
this.disabled = false;
|
|
@@ -1960,7 +1964,6 @@ class CalendarComponent {
|
|
|
1960
1964
|
showFooter: true,
|
|
1961
1965
|
};
|
|
1962
1966
|
this.position = 'bottom';
|
|
1963
|
-
this._dateSelected = new Date();
|
|
1964
1967
|
this.dateSelectedChange = new EventEmitter();
|
|
1965
1968
|
this.typeDate = 'datetime-local';
|
|
1966
1969
|
this.noMargin = false;
|
|
@@ -1992,6 +1995,9 @@ class CalendarComponent {
|
|
|
1992
1995
|
return this._dateSelected;
|
|
1993
1996
|
}
|
|
1994
1997
|
set calendarMinutes(calendarMinutes) {
|
|
1998
|
+
if (!this.dateSelected) {
|
|
1999
|
+
this.dateSelected = new Date();
|
|
2000
|
+
}
|
|
1995
2001
|
const minutes = this.formatTime(calendarMinutes, 0, 59);
|
|
1996
2002
|
this.dateSelected.setMinutes(minutes);
|
|
1997
2003
|
this.dateSelected = this.dateSelected; // trigger change detection
|
|
@@ -1999,9 +2005,13 @@ class CalendarComponent {
|
|
|
1999
2005
|
this.triggerDateSelectedChange();
|
|
2000
2006
|
}
|
|
2001
2007
|
get calendarMinutes() {
|
|
2002
|
-
|
|
2008
|
+
var _a;
|
|
2009
|
+
return this.datePipe.transform((_a = this.dateSelected) !== null && _a !== void 0 ? _a : new Date(), 'mm');
|
|
2003
2010
|
}
|
|
2004
2011
|
set calendarHours(calendarHours) {
|
|
2012
|
+
if (!this.dateSelected) {
|
|
2013
|
+
this.dateSelected = new Date();
|
|
2014
|
+
}
|
|
2005
2015
|
const hours = this.formatTime(calendarHours, 0, 23);
|
|
2006
2016
|
this.dateSelected.setHours(hours);
|
|
2007
2017
|
this.dateSelected = this.dateSelected; // trigger change detection
|
|
@@ -2009,7 +2019,8 @@ class CalendarComponent {
|
|
|
2009
2019
|
this.triggerDateSelectedChange();
|
|
2010
2020
|
}
|
|
2011
2021
|
get calendarHours() {
|
|
2012
|
-
|
|
2022
|
+
var _a;
|
|
2023
|
+
return this.datePipe.transform((_a = this.dateSelected) !== null && _a !== void 0 ? _a : new Date(), 'HH');
|
|
2013
2024
|
}
|
|
2014
2025
|
ngOnChanges(changes) {
|
|
2015
2026
|
if (changes.label || changes.type) {
|
|
@@ -2020,6 +2031,9 @@ class CalendarComponent {
|
|
|
2020
2031
|
if (this.disabled) {
|
|
2021
2032
|
return;
|
|
2022
2033
|
}
|
|
2034
|
+
if (!this.dateSelected) {
|
|
2035
|
+
this.dateSelected = new Date();
|
|
2036
|
+
}
|
|
2023
2037
|
selectedDates.startDate.setHours(this.dateSelected.getHours());
|
|
2024
2038
|
selectedDates.startDate.setMinutes(this.dateSelected.getMinutes());
|
|
2025
2039
|
this.dateSelected = selectedDates.startDate;
|
|
@@ -2121,7 +2135,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
2121
2135
|
multi: true
|
|
2122
2136
|
},
|
|
2123
2137
|
DatePipe
|
|
2124
|
-
], 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' }}
|
|
2138
|
+
], 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 });
|
|
2125
2139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
2126
2140
|
type: Component,
|
|
2127
2141
|
args: [{ selector: 'wac-calendar', providers: [
|
|
@@ -2131,7 +2145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
|
|
|
2131
2145
|
multi: true
|
|
2132
2146
|
},
|
|
2133
2147
|
DatePipe
|
|
2134
|
-
], 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' }}
|
|
2148
|
+
], 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" }]
|
|
2135
2149
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { minutes: [{
|
|
2136
2150
|
type: ViewChild,
|
|
2137
2151
|
args: ['minutes']
|