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