@jermeo/ionic4-datepicker/jermeo-ionic4-datepicker.metadata.json

ionic4-datepicker inspired by rajeshwar patlolla ionic1 datepicker

{"__symbolic":"module","version":4,"metadata":{"Ionic4DatepickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":12,"character":11},"useExisting":{"__symbolic":"reference","name":"Ionic4DatepickerComponent"},"multi":true},"Ionic4DatepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"li-ionic4-datepicker","providers":[{"__symbolic":"reference","name":"CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR"}],"template":"<input type=\"text\" class=\"li-dp-input\" (focus)=\"$event.preventDefault()\" (click)=\"openDatePicker(value)\" readonly\n    [(ngModel)]=\"value\" start />","styles":[":host input{font-size:16px;margin:6px 0;border:0;border-bottom:1px solid #ccc;width:100%;padding:12px}@media (min-width:768px){:host input{font-size:18px}}:host input.has-focus,:host input:focus{outline:0;box-shadow:unset}"]}]}],"members":{"inputDateConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ionic/angular","name":"ModalController","line":36,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":15},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":38,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"onChangeValue":[{"__symbolic":"method"}],"openDatePicker":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}},"Ionic4DatepickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":4},{"__symbolic":"reference","module":"@ionic/angular","name":"IonicModule","line":12,"character":4}],"declarations":[{"__symbolic":"reference","name":"Ionic4DatepickerComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"Ionic4DatepickerModalComponent"}],"exports":[{"__symbolic":"reference","name":"Ionic4DatepickerComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"Ionic4DatepickerModalComponent"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":24,"character":4}],"entryComponents":[{"__symbolic":"reference","name":"Ionic4DatepickerModalComponent"}],"providers":[]}]}],"members":{}},"Ionic4DatepickerModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"li-ionic4-datepicker-modal","template":"<ion-header [hidden]=\"!mainObj?.showHeader\">\n  <ion-toolbar (click)=\"changeToDateList()\" class=\"ion-no-padding\">\n    <ion-title>\n      <h1 *ngIf=\"mainObj?.titleLabel\">{{mainObj?.titleLabel}}</h1>\n      <span *ngIf=\"mainObj?.showDateInTitle\">{{selectedDateString}}</span>\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content forceOverscroll=\"false\" class=\"ionic_datepicker_modal_content\">\n  <ion-grid class=\"dp-month-year-container\" [ngClass]=\"isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'\">\n    <ion-row>\n      <ion-col size=\"1.5\" class=\"dp-left-right-arrow\" (click)=\"prevMonth()\">\n        <ion-button [ngClass]=\"{'pointer_events_none':((firstDayEpoch - 86400000) < fromDate)}\">\n          <ion-icon *ngIf=\"!mainObj?.arrowNextPrev?.prevArrowSrc\" name=\"arrow-back\"></ion-icon>\n          <ion-icon *ngIf=\"mainObj?.arrowNextPrev?.prevArrowSrc\" src=\"{{mainObj?.arrowNextPrev?.prevArrowSrc}}\"></ion-icon>\n        </ion-button>\n      </ion-col>\n      <ion-col size=\"9\">\n        <ion-grid>\n          <ion-row>\n            <ion-col class=\"dp-select-month-year\" size=\"5.5\" class=\"ion-no-padding\" (click)=\"selectMonthYear(true)\">\n              <ion-button class=\"dp-buttons\">\n                {{ data.currentMonth }}\n                <ion-icon name=\"md-arrow-dropdown\" class=\"dp-down-arrow\"></ion-icon>\n              </ion-button>\n            </ion-col>\n            <ion-col size=\"1\"></ion-col>\n            <ion-col class=\"dp-select-month-year\" size=\"5.5\" class=\"ion-no-padding\" (click)=\"selectMonthYear(false)\">\n              <ion-button class=\"dp-buttons\">\n                {{ data.currentYear }}\n                <ion-icon name=\"md-arrow-dropdown\" class=\"dp-down-arrow\"></ion-icon>\n              </ion-button>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-col>\n      <ion-col size=\"1.5\" class=\"dp-left-right-arrow\" (click)=\"nextMonth()\">\n        <ion-button [ngClass]=\"{'pointer_events_none':((lastDayEpoch + 86400000)> toDate)}\">\n          <ion-icon *ngIf=\"!mainObj?.arrowNextPrev?.nextArrowSrc\" name=\"arrow-forward\"></ion-icon>\n          <ion-icon *ngIf=\"mainObj?.arrowNextPrev?.nextArrowSrc\" src=\"{{mainObj?.arrowNextPrev?.nextArrowSrc}}\"></ion-icon>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n    <ion-row>\n      <ion-col>\n        <ion-grid class=\"dp-weeks-container\" *ngIf=\"daysList\" [ngClass]=\"isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'\">\n          <ion-row class=\" dp-weeks-name\">\n            <ion-col *ngFor=\"let weekName of mainObj?.weeksList; let i = index\">\n              <!-- <div class=\"weeks\">{{weekName}} {{i}}</div> -->\n              <div class=\"weeks\" *ngIf=\"mainObj?.mondayFirst\"\n              [style.color]=\"mainObj?.isSundayHighlighted && i === 6 ? mainObj?.isSundayHighlighted.fontColor : ''\">\n               {{weekName}}</div>\n              <div class=\"weeks\" *ngIf=\"!mainObj?.mondayFirst\"\n              [style.color]=\"mainObj?.isSundayHighlighted && i === 0 ? mainObj?.isSundayHighlighted.fontColor : ''\">\n               {{weekName}}</div>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngFor=\"let row of rows;\" class=\"dp-days-list\">\n            <ion-col *ngFor=\"let col of cols; let i = index ;\" (click)=\"dateSelected(daysList[row + i])\"\n              [style.background-color]=\"(daysList[row + i]?.color) ? (daysList[row + i]?.color) : ''\"\n              [style.border-radius]=\"(daysList[row + i]?.color) ? '4px' : ''\" class=\"ion-no-padding\" [ngClass]=\"{\n                'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),\n                'dp-today' : (daysList[row + i]?.epoch == today),\n                'disabled' : (daysList[row + i]?.disabled)}\">\n              <div class=\"days\" [style.color]=\"(daysList[row + i]?.fontColor) ? (daysList[row + i]?.fontColor) : ''\">\n                {{daysList[row + col]?.date}}\n              </div>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n  <ion-list class=\"dp-month-year-scroll-container\" [ngClass]=\"isMonthYearSelectorOpen ? 'dp-virual-scroller-show' : 'dp-virual-scroller-hide'\">\n    <ion-item *ngFor=\"let monthYear of scrollingMonthOrYearArray;let i=index;\" id=\"{{i +'list'}}\" (click)=\"onChangeMonthYear(monthYear)\">\n      <ion-label [ngClass]=\"selectedYearOrMonth === monthYear ? 'dp-selected' : ''\">{{ monthYear }}</ion-label>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n<ion-footer [hidden]=\"!mainObj?.showFooter\">\n  <ion-toolbar class=\"ion-no-padding\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\" [ngClass]=\"mainObj?.btnCloseSetInReverse ? 'dp-btn-set-close-in-reverse' : ''\">\n        <ion-col class=\"ion-no-padding\">\n          <ion-button class=\"ion-button\" expand=\"{{mainObj?.btnProperties?.expand}}\" fill=\"{{mainObj?.btnProperties?.fill}}\"\n            size=\"{{mainObj?.btnProperties?.size}}\" color=\"{{mainObj?.btnProperties?.color}}\" disabled=\"{{mainObj?.btnProperties?.disabled}}\"\n            strong=\"{{mainObj?.btnProperties?.strong}}\" (click)=\"closeIonicDatePickerModal()\">\n            {{mainObj?.closeLabel}}\n          </ion-button>\n        </ion-col>\n        <ion-col class=\"ion-no-padding\" *ngIf=\"mainObj?.showTodayButton\">\n          <ion-button class=\"ion-button\" expand=\"{{mainObj?.btnProperties?.expand}}\" fill=\"{{mainObj?.btnProperties?.fill}}\"\n            size=\"{{mainObj?.btnProperties?.size}}\" color=\"{{mainObj?.btnProperties?.color}}\" disabled=\"{{mainObj?.btnProperties?.disabled}}\"\n            strong=\"{{mainObj?.btnProperties?.strong}}\" (click)=\"setIonicDatePickerTodayDate()\">\n            {{mainObj?.todayLabel}}\n          </ion-button>\n        </ion-col>\n        <ion-col class=\"ion-no-padding\" *ngIf=\"!mainObj?.closeOnSelect\">\n          <ion-button class=\"ion-button\" expand=\"{{mainObj?.btnProperties?.expand}}\"\n            fill=\"{{mainObj?.btnProperties?.fill}}\" size=\"{{mainObj?.btnProperties?.size}}\"\n            color=\"{{mainObj?.btnProperties?.color}}\"\n            disabled=\"{{mainObj?.btnProperties?.disabled || !isSelectedDateFound}}\"\n            strong=\"{{mainObj?.btnProperties?.strong}}\" (click)=\"setIonicDatePickerDate()\">\n            {{mainObj?.setLabel}}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-toolbar>\n</ion-footer>","styles":[":host .no-scroll{--overflow:hidden}:host ion-header{height:60px}:host ion-header ion-toolbar{--background:var(--ion-color-primary);-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;color:var(--ion-color-primary-contrast);min-height:60px}:host ion-header ion-toolbar ion-title{font-size:20px;font-weight:700;text-align:center;padding:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;cursor:pointer}:host ion-header ion-toolbar ion-title h1{font-size:14px;margin:0 0 4px}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid{width:100%}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year{border-bottom:1.5px solid;border-bottom-color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year .dp-buttons{width:100%;height:40px;margin:0;padding:0;color:var(--ion-color-primary);--background:transparent;--box-shadow:none}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year .dp-buttons.activated{--background-activated:transparent;--color-activated:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container ion-col ion-grid .dp-select-month-year .dp-down-arrow{position:absolute;width:16px;right:0;top:10px;color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container .dp-left-right-arrow ion-button{--background:transparent;--background-hover:transparent;--box-shadow:0;color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-container .dp-left-right-arrow ion-button:focus{outline:0}:host .ionic_datepicker_modal_content .dp-month-year-container .dp-left-right-arrow ion-button.activated{--ion-color-primary-shade:transparent;--ion-color-primary-contrast:var(--ion-color-primary-tint)}:host .ionic_datepicker_modal_content .dp-weeks-container{margin:4px 0}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-weeks-name ion-col{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-weeks-name ion-col .weeks{width:14%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;font-weight:700}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-days-list ion-col{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;padding:10px;cursor:pointer}:host .ionic_datepicker_modal_content .dp-weeks-container .dp-days-list ion-col .days{width:14%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}:host .ionic_datepicker_modal_content .dp-selecteddate{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast);border-radius:4px;font-weight:500}:host .ionic_datepicker_modal_content .dp-today{border-radius:4px;font-weight:500;border:1px solid;border-color:var(--ion-color-primary)}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container{position:absolute;top:0;bottom:0;left:0;right:0;margin:0;overflow-y:scroll}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container ion-item{--padding-start:0;--inner-padding-end:0;--inner-border-width:0;cursor:pointer}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container ion-item ion-label{text-align:center;margin:0;font-size:16px}:host .ionic_datepicker_modal_content .dp-month-year-scroll-container ion-item ion-label.dp-selected{color:var(--ion-color-primary);font-size:20px;font-weight:500}:host .disabled{color:#aaa}:host .dp-virual-scroller-show{-webkit-transition:opacity .3s ease-in;transition:opacity .3s ease-in;opacity:1;visibility:visible}:host .dp-virual-scroller-hide{opacity:0;visibility:hidden;height:auto}:host ion-footer{height:55px}:host ion-footer ion-toolbar{height:100%;--border-width:0;--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px}:host ion-footer ion-toolbar .toolbar-container{height:100%}:host ion-footer ion-toolbar .dp-btn-set-close-in-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}:host ion-footer ion-toolbar ion-button{--border-radius:0;height:55px;margin:0}:host ion-footer ion-toolbar ion-button:focus{outline:0}:host ion-footer ion-toolbar ion-button.activated{--background-activated:var(--ion-color-primary-tint);--color-activated:var(--ion-color-primary-contrast)}"]}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":[{"__symbolic":"reference","module":"@ionic/angular","name":"IonContent","line":14,"character":13},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ionic/angular","name":"NavParams","line":61,"character":23},{"__symbolic":"reference","module":"@ionic/angular","name":"ModalController","line":62,"character":23},{"__symbolic":"reference","name":"Ionic4DatepickerService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"resetHMSM":[{"__symbolic":"method"}],"changeToDateList":[{"__symbolic":"method"}],"selectMonthYear":[{"__symbolic":"method"}],"onChangeMonthYear":[{"__symbolic":"method"}],"prevMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"changeDaySelected":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"setIonicDatePickerTodayDate":[{"__symbolic":"method"}],"setIonicDatePickerDate":[{"__symbolic":"method"}],"setDisabledDates":[{"__symbolic":"method"}],"setHightlightedDates":[{"__symbolic":"method"}],"refreshDateList":[{"__symbolic":"method"}],"setInitialObj":[{"__symbolic":"method"}],"closeModal":[{"__symbolic":"method"}],"closeIonicDatePickerModal":[{"__symbolic":"method"}],"getYearsList":[{"__symbolic":"method"}],"initDatePicker":[{"__symbolic":"method"}],"initDatePickerObj":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[liIonic4Datepicker]","exportAs":"liIonic4Datepicker","providers":[{"__symbolic":"reference","module":"@angular/forms","name":"NgModel","line":11,"character":14}]}]}],"members":{"inputDateConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3},"arguments":["liIonic4Datepicker"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ionic/angular","name":"ModalController","line":22,"character":23},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel","line":23,"character":20},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":24,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":25,"character":15},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":26,"character":22},{"__symbolic":"reference","name":"Ionic4DatepickerService"}]}],"ngOnInit":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":86,"character":3},"arguments":["ionFocus"]}]}],"openDatePicker":[{"__symbolic":"method"}]}}},"origins":{"Ionic4DatepickerService":"./lib/ionic4-datepicker.service","CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR":"./lib/ionic4-datepicker.component","Ionic4DatepickerComponent":"./lib/ionic4-datepicker.component","Ionic4DatepickerModule":"./lib/ionic4-datepicker.module","Ionic4DatepickerModalComponent":"./lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component","ɵa":"./lib/li-ionic4-datepicker.directive"},"importAs":"@jermeo/ionic4-datepicker"}