@wizishop/angular-components 14.3.16 → 14.3.17

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.
@@ -1777,23 +1777,68 @@ class CalendarComponent {
1777
1777
  displayMode: 'inline',
1778
1778
  showHeader: false,
1779
1779
  showFooter: true,
1780
- showButton: true
1781
1780
  };
1782
1781
  this.position = 'bottom';
1783
- this.dateSelected = new Date();
1784
- this.typeDate = 'datetime-local';
1782
+ this._dateSelected = new Date(); // todo only change it when setted to a new value, add dateSelectedChange
1783
+ this.dateSelectedChange = new EventEmitter();
1784
+ this.typeDate = 'datetime-local'; // todo check why it is broken
1785
1785
  this.noMargin = false;
1786
+ this.disabled = false;
1786
1787
  this.selected = new EventEmitter();
1787
1788
  this.changeData = new EventEmitter();
1788
1789
  this.open = false;
1789
1790
  this.startLabel = '';
1790
1791
  this.endLabel = '';
1792
+ // ControlValueAccessor methods
1793
+ this.onChange = () => { };
1794
+ this.onTouch = () => { };
1791
1795
  }
1792
- changeDate(event) {
1793
- this.currentDate = new Date(new Date(event.startDate).setHours(0, 0, 0, 0));
1794
- this.dateSelected = new Date(new Date(new Date(event.startDate).setHours(0, 0, 0, 0)).getTime() +
1795
- parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1796
- parseInt(this.currentMinutes, 0) * 60000);
1796
+ set dateSelected(dateSelected) {
1797
+ if (this.disabled) {
1798
+ return;
1799
+ }
1800
+ this._dateSelected = dateSelected;
1801
+ this.setCalendarDate();
1802
+ }
1803
+ get dateSelected() {
1804
+ return this._dateSelected;
1805
+ }
1806
+ ngOnInit() {
1807
+ this.setCalendarLabel();
1808
+ this.setCalendarDate();
1809
+ }
1810
+ ngOnChanges(changes) {
1811
+ if (changes.label || changes.type) {
1812
+ this.setCalendarLabel();
1813
+ }
1814
+ if (changes.typeDate) {
1815
+ this.typeDateChange();
1816
+ }
1817
+ }
1818
+ writeValue(date) {
1819
+ this.dateSelected = date;
1820
+ }
1821
+ registerOnChange(fn) {
1822
+ this.onChange = fn;
1823
+ }
1824
+ registerOnTouched(fn) {
1825
+ this.onTouch = fn;
1826
+ }
1827
+ setDisabledState(isDisabled) {
1828
+ this.disabled = isDisabled;
1829
+ }
1830
+ onChangeDate(selectedDates) {
1831
+ if (this.disabled) {
1832
+ return;
1833
+ }
1834
+ this.currentDate = new Date(new Date(selectedDates.startDate).setHours(0, 0, 0, 0));
1835
+ this.setDateSelected();
1836
+ }
1837
+ setDateSelected() {
1838
+ const dateData = this.getDateData();
1839
+ this.dateSelected = typeof this.dateSelected === 'string' ? dateData.toString() : dateData;
1840
+ this.onChange(this.dateSelected);
1841
+ this.dateSelectedChange.emit(this.dateSelected);
1797
1842
  this.triggerChange({
1798
1843
  startDate: this.dateSelected,
1799
1844
  endDate: this.dateSelected
@@ -1811,8 +1856,28 @@ class CalendarComponent {
1811
1856
  else {
1812
1857
  this.open = !this.open;
1813
1858
  }
1859
+ this.onTouch();
1814
1860
  }
1815
- ngOnInit() {
1861
+ setCalendarDate() {
1862
+ let selectedDate = this.dateSelected;
1863
+ if (typeof selectedDate === 'string') {
1864
+ selectedDate = new Date(selectedDate);
1865
+ }
1866
+ this.currentHours = selectedDate.getHours() < 10 ? '0' + selectedDate.getHours() : selectedDate.getHours();
1867
+ this.currentMinutes = selectedDate.getMinutes() < 10 ? '0' + selectedDate.getMinutes() : selectedDate.getMinutes();
1868
+ this.currentDate = new Date(selectedDate.setHours(0, 0, 0, 0));
1869
+ if (this.typeDate === 'date') {
1870
+ this.currentHours = '00';
1871
+ this.currentMinutes = '00';
1872
+ }
1873
+ }
1874
+ typeDateChange() {
1875
+ if (this.typeDate === 'date') {
1876
+ this.currentHours = '00';
1877
+ this.currentMinutes = '00';
1878
+ }
1879
+ }
1880
+ setCalendarLabel() {
1816
1881
  if (this.type === 'edit' && this.label) {
1817
1882
  const splitLabel = this.label.split('{x}');
1818
1883
  if (splitLabel.length > 1) {
@@ -1823,17 +1888,6 @@ class CalendarComponent {
1823
1888
  this.startLabel = this.label;
1824
1889
  }
1825
1890
  }
1826
- this.currentHours =
1827
- new Date(this.dateSelected).getHours() < 10 ? '0' + new Date(this.dateSelected).getHours() : new Date(this.dateSelected).getHours();
1828
- this.currentMinutes =
1829
- new Date(this.dateSelected).getMinutes() < 10
1830
- ? '0' + new Date(this.dateSelected).getMinutes()
1831
- : new Date(this.dateSelected).getMinutes();
1832
- this.currentDate = new Date(this.dateSelected).setHours(0, 0, 0, 0);
1833
- if (this.typeDate === 'date') {
1834
- this.currentHours = '00';
1835
- this.currentMinutes = '00';
1836
- }
1837
1891
  }
1838
1892
  verifKeyup(events) {
1839
1893
  events.target.value = events.target.value.replace(/\D+/g, '');
@@ -1841,26 +1895,12 @@ class CalendarComponent {
1841
1895
  verifHours(events) {
1842
1896
  const value = parseInt(events.target.value, 0);
1843
1897
  events.target.value = this.currentHours = value < 24 ? (value < 10 ? '0' + value : value) : 23;
1844
- const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1845
- parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1846
- parseInt(this.currentMinutes, 0) * 60000);
1847
- this.dateSelected = dateData;
1848
- this.triggerChange({
1849
- startDate: dateData,
1850
- endDate: dateData
1851
- });
1898
+ this.setDateSelected();
1852
1899
  }
1853
1900
  verifMinutes(events) {
1854
1901
  const value = parseInt(events.target.value, 0);
1855
1902
  events.target.value = this.currentMinutes = value < 60 ? (value < 10 ? '0' + value : value) : 59;
1856
- const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1857
- parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1858
- parseInt(this.currentMinutes, 0) * 60000);
1859
- this.dateSelected = dateData;
1860
- this.triggerChange({
1861
- startDate: dateData,
1862
- endDate: dateData
1863
- });
1903
+ this.setDateSelected();
1864
1904
  }
1865
1905
  addHours(target) {
1866
1906
  target.value = this.currentHours =
@@ -1871,14 +1911,7 @@ class CalendarComponent {
1871
1911
  : parseInt(target.value, 0) < 10
1872
1912
  ? '0' + parseInt(target.value, 0)
1873
1913
  : parseInt(target.value, 0);
1874
- const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1875
- parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1876
- parseInt(this.currentMinutes, 0) * 60000);
1877
- this.dateSelected = dateData;
1878
- this.triggerChange({
1879
- startDate: dateData,
1880
- endDate: dateData
1881
- });
1914
+ this.setDateSelected();
1882
1915
  }
1883
1916
  removeHours(target) {
1884
1917
  target.value = this.currentHours =
@@ -1889,14 +1922,7 @@ class CalendarComponent {
1889
1922
  : parseInt(target.value, 0) < 10
1890
1923
  ? '0' + parseInt(target.value, 0)
1891
1924
  : parseInt(target.value, 0);
1892
- const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1893
- parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1894
- parseInt(this.currentMinutes, 0) * 60000);
1895
- this.dateSelected = dateData;
1896
- this.triggerChange({
1897
- startDate: dateData,
1898
- endDate: dateData
1899
- });
1925
+ this.setDateSelected();
1900
1926
  }
1901
1927
  addMinutes(target) {
1902
1928
  target.value = this.currentMinutes =
@@ -1907,14 +1933,7 @@ class CalendarComponent {
1907
1933
  : parseInt(target.value, 0) < 10
1908
1934
  ? '0' + parseInt(target.value, 0)
1909
1935
  : parseInt(target.value, 0);
1910
- const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1911
- parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1912
- parseInt(this.currentMinutes, 0) * 60000);
1913
- this.dateSelected = dateData;
1914
- this.triggerChange({
1915
- startDate: dateData,
1916
- endDate: dateData
1917
- });
1936
+ this.setDateSelected();
1918
1937
  }
1919
1938
  removeMinutes(target) {
1920
1939
  target.value = this.currentMinutes =
@@ -1925,21 +1944,31 @@ class CalendarComponent {
1925
1944
  : parseInt(target.value, 0) < 10
1926
1945
  ? '0' + parseInt(target.value, 0)
1927
1946
  : parseInt(target.value, 0);
1928
- const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1947
+ this.setDateSelected();
1948
+ }
1949
+ getDateData() {
1950
+ return new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
1929
1951
  parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
1930
1952
  parseInt(this.currentMinutes, 0) * 60000);
1931
- this.dateSelected = dateData;
1932
- this.triggerChange({
1933
- startDate: dateData,
1934
- endDate: dateData
1935
- });
1936
1953
  }
1937
1954
  }
1938
1955
  CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1939
- CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", type: "type", options: "options", position: "position", dateSelected: "dateSelected", typeDate: "typeDate", noMargin: "noMargin" }, outputs: { selected: "selected", changeData: "changeData" }, ngImport: i0, template: "<div\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\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\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\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' }}\n </div>\n <div class=\"wac-calendar__wrapper__input__time\">\n {{ dateSelected | date: 'HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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)=\"changeDate($event)\" [options]=\"options\">\n <input [nwbDatepickerStart]=\"datePicker\" type=\"date\" [value]=\"dateSelected\" />\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)=\"addHours(hours)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\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\" value=\"{{ currentHours }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\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\" value=\"{{ currentMinutes }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\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: "component", type: i1$2.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i1$2.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
1956
+ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", type: "type", options: "options", position: "position", dateSelected: "dateSelected", typeDate: "typeDate", noMargin: "noMargin", disabled: "disabled" }, outputs: { dateSelectedChange: "dateSelectedChange", selected: "selected", changeData: "changeData" }, providers: [
1957
+ {
1958
+ provide: NG_VALUE_ACCESSOR,
1959
+ useExisting: CalendarComponent,
1960
+ multi: true
1961
+ }
1962
+ ], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\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\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\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' }}\n </div>\n <div class=\"wac-calendar__wrapper__input__time\">\n {{ dateSelected | date: 'HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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=\"date\" [value]=\"dateSelected.toString()\" />\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)=\"addHours(hours)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\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\" [value]=\"currentHours\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\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\" [value]=\"currentMinutes\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\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: "component", type: i1$2.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i1$2.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
1940
1963
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, decorators: [{
1941
1964
  type: Component,
1942
- args: [{ selector: 'wac-calendar', template: "<div\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\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\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\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' }}\n </div>\n <div class=\"wac-calendar__wrapper__input__time\">\n {{ dateSelected | date: 'HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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)=\"changeDate($event)\" [options]=\"options\">\n <input [nwbDatepickerStart]=\"datePicker\" type=\"date\" [value]=\"dateSelected\" />\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)=\"addHours(hours)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\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\" value=\"{{ currentHours }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\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\" value=\"{{ currentMinutes }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
1965
+ args: [{ selector: 'wac-calendar', providers: [
1966
+ {
1967
+ provide: NG_VALUE_ACCESSOR,
1968
+ useExisting: CalendarComponent,
1969
+ multi: true
1970
+ }
1971
+ ], template: "<div\n class=\"wac-calendar\"\n [ngClass]=\"{\n 'wac-calendar--input': type === 'input',\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\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\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' }}\n </div>\n <div class=\"wac-calendar__wrapper__input__time\">\n {{ dateSelected | date: 'HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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 {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\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=\"date\" [value]=\"dateSelected.toString()\" />\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)=\"addHours(hours)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\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\" [value]=\"currentHours\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\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\" [value]=\"currentMinutes\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n </div>\n <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n <i class=\"fas fa-plus\"></i>\n </button>\n <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n <i class=\"fas fa-minus\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
1943
1972
  }], ctorParameters: function () { return []; }, propDecorators: { label: [{
1944
1973
  type: Input
1945
1974
  }], type: [{
@@ -1950,10 +1979,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
1950
1979
  type: Input
1951
1980
  }], dateSelected: [{
1952
1981
  type: Input
1982
+ }], dateSelectedChange: [{
1983
+ type: Output
1953
1984
  }], typeDate: [{
1954
1985
  type: Input
1955
1986
  }], noMargin: [{
1956
1987
  type: Input
1988
+ }], disabled: [{
1989
+ type: Input
1957
1990
  }], selected: [{
1958
1991
  type: Output
1959
1992
  }], changeData: [{