UNPKG

ngx-month-picker-range

Version:

Esta libreria fue generada con [Angular CLI](https://github.com/angular/angular-cli) version 8.2.9.

1 lines 14.5 kB
{"__symbolic":"module","version":4,"metadata":{"NgxMonthPickerService":{"__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":{"ɵprov":{}}},"NgxMonthPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ngx-month-picker","template":"\n <div class=\"calendar-widget\" #select>\n <div [ngClass]=\"inputContainerClass\" (click)=\"onShowCalendar($event)\" role=\"listbox\" #calendarInputContainer [title]=\"valueText\">\n <span [ngClass]=\"inputValueClass\">{{valueText}}</span>\n </div>\n <div [ngClass]=\"calendarContainerClass\" #calendarUI style=\"display: none;\">\n <div class=\"outerCard\">\n <div class=\"topPanel\">\n <button class=\"prevYearButton\" (click)=\"decrementYear()\">\n <i class=\"arrow arrow-left\"></i>\n </button>\n <span class=\"yearLabel\">{{ years[currentYearIndex] }}</span>\n <button class=\"nextYearButton\" (click)=\"incrementYear()\">\n <i class=\"arrow arrow-right\"></i>\n </button>\n </div>\n <div class=\"contentPanel\" #calendarContent>\n <div (click)=\"onClick(i)\" *ngFor=\"let month of monthDataSlice; let i = index\" [ngClass]=\"[monthItemClass, \n (rangeIndexes[0]===globalIndexOffset+i || rangeIndexes[1]===globalIndexOffset+i) ? edgeClass: '', \n (currentYearIndex===0? i > 11:(i < 6 || i > 17)) ? notYearClass : '']\">\n <div [id]=\"i\" class=\"monthItemHighlight\" [ngClass]=\"[ month.isInRange ? inRangeClass : '', \n month.isLowerEdge ? lowerEdgeClass : '', month.isUpperEdge ? upperEdgeClass : '' ]\">\n {{ month.monthName }}\n </div>\n </div>\n </div>\n <div class=\"footerPanel\">\n <a id=\"cleanBtn\" href=\"javascript:void(0)\" [ngClass]=\"cleanBtnClass\" (click)=\"clearData()\">\n Limpiar\n </a>\n <a id=\"acceptBtn\" href=\"javascript:void(0)\" [ngClass]=\"acceptBtnClass\" (click)=\"emitData()\">\n Aceptar\n </a>\n </div>\n </div>\n </div>\n</div>\n ","styles":["\n .calendar-ui {\n z-index: 1003;\n width: 350px;\n background-color: white;\n}\n\n.calendar-input-container {\n background: #F5F5F6 !important;\n border: solid 1px #C2D1D9 !important;\n color: #A8B0BA !important;\n font-family: \"open_sansitalic\", sans-serif !important;\n line-height: 17px;\n min-height: 48px;\n display: flex;\n align-items: center;\n border-radius: 3px;\n width: 100%;\n font-size: 16px;\n letter-spacing: 0;\n}\n\n.calendar-input-value {\n padding-left: 10px;\n padding-right: 10px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.outerCard {\n touch-action: none;\n overflow: hidden;\n width: inherit;\n /*height: 350px;*/\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n\n.topPanel {\n width: inherit;\n height: 44px;\n text-align: center;\n line-height: 64px;\n}\n\n.prevYearButton {\n float: left;\n}\n\n.nextYearButton {\n float: right;\n}\n\nbutton {\n width: 64px;\n height: 64px;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\nbutton:focus {\n outline: 0;\n}\n\ni {\n border: solid black;\n border-width: 0 3px 3px 0;\n display: inline-block;\n padding: 6px;\n}\n\n.arrow-right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n}\n\n.arrow-left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n}\n\n.topPanel.yearLabel {\n display: inline-block;\n margin: 0 auto;\n}\n\n.contentPanel {\n padding: 32px 6px;\n}\n\n.footerPanel {\n display: flex;\n}\n\n.monthItem {\n display: inline-block;\n height: 54px;\n width: 54px;\n cursor: pointer;\n text-align: center;\n line-height: 54px;\n margin-top: 1px;\n margin-bottom: 1px;\n}\n\n.monthItem:hover {\n border-radius: 100%;\n background-color: #F5F5F6;\n color: #A8B0BA;\n}\n\n.isEdge {\n border-radius: 100%;\n background-color: #1474a4;\n color: white;\n}\n\n.inRange {\n background-color: #1474a4;\n opacity: 0.5;\n color: white;\n}\n\n.isLowerEdge {\n background-color: none;\n background: linear-gradient(to right, transparent 50%, #1474a4 50%);\n}\n\n.isUpperEdge {\n background-color: none;\n background: linear-gradient(to right, #1474a4 50%, transparent 50%);\n}\n\n.notCurrentYear {\n color: #c4cbd6;\n}\n\n.clean-btn {\n text-decoration: none;\n width: 50%;\n display: inline-block;\n font-weight: 400;\n color: #A8B0BA;\n background-color: #F5F5F6;\n text-align: center;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: .375rem .75rem;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.accept-btn {\n text-decoration: none;\n width: 50%;\n display: inline-block;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: .375rem .75rem;\n font-size: 1rem;\n line-height: 1.5;\n color: white;\n background-color: #1474a4;\n}\n "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":218,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxMonthPickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":223,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxMonthPickerComponent"},"multi":true}]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":231,"character":3},"arguments":["placeholder"]}]}],"isRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":232,"character":3},"arguments":["required"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":233,"character":3},"arguments":["disabled"]}]}],"isReadOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":3},"arguments":["readonly"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":3},"arguments":["mode"]}]}],"firstYear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":237,"character":3},"arguments":["firstYear"]}]}],"lastYear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":238,"character":3},"arguments":["lastYear"]}]}],"inputContainerClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":240,"character":3},"arguments":["inputContainerClass"]}]}],"inputValueClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":241,"character":3},"arguments":["inputValueClass"]}]}],"calendarContainerClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":242,"character":3},"arguments":["inputValueClass"]}]}],"monthItemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":243,"character":3},"arguments":["monthItemClass"]}]}],"edgeClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":244,"character":3},"arguments":["edgeClass"]}]}],"notYearClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":245,"character":3},"arguments":["notYearClass"]}]}],"inRangeClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":246,"character":3},"arguments":["inRangeClass"]}]}],"lowerEdgeClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":247,"character":3},"arguments":["lowerEdgeClass"]}]}],"upperEdgeClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":248,"character":3},"arguments":["upperEdgeClass"]}]}],"cleanBtnClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":249,"character":3},"arguments":["cleanBtnClass"]}]}],"acceptBtnClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":250,"character":3},"arguments":["acceptBtnClass"]}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":252,"character":3},"arguments":["locale"]}]}],"calendarInputContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":254,"character":3},"arguments":["calendarInputContainer",{"static":false}]}]}],"calendarUI":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":255,"character":3},"arguments":["calendarUI",{"static":false}]}]}],"calendarContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":256,"character":3},"arguments":["calendarContent",{"static":false}]}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":257,"character":3},"arguments":["select",{"static":false}]}]}],"monthRangeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":270,"character":3}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":272,"character":3},"arguments":["tabindex"]}]}],"blurHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":274,"character":3},"arguments":["blur"]}]}],"focusHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":281,"character":3},"arguments":["focus"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":328,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":328,"character":55},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":328,"character":88}]}],"ngOnInit":[{"__symbolic":"method"}],"initCalendar":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onShowCalendar":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"appendOverlay":[{"__symbolic":"method"}],"restoreOverlayAppend":[{"__symbolic":"method"}],"alignOverlay":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"paintRange":[{"__symbolic":"method"}],"emitData":[{"__symbolic":"method"}],"sliceDataIntoView":[{"__symbolic":"method"}],"incrementYear":[{"__symbolic":"method"}],"decrementYear":[{"__symbolic":"method"}],"initRangeIndexes":[{"__symbolic":"method"}],"initMonthsData":[{"__symbolic":"method"}],"initYearLabels":[{"__symbolic":"method"}],"initMonthLabels":[{"__symbolic":"method"}],"initViewSlices":[{"__symbolic":"method"}],"clearData":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"updateChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"setReadOnlyState":[{"__symbolic":"method"}]}},"NgxMonthPickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxMonthPickerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxMonthPickerComponent"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":12,"character":12}]}]}],"members":{}}},"origins":{"NgxMonthPickerService":"./lib/ngx-month-picker.service","NgxMonthPickerComponent":"./lib/ngx-month-picker.component","NgxMonthPickerModule":"./lib/ngx-month-picker.module"},"importAs":"ngx-month-picker-range"}