angular2-material-datepicker
Version:
A minimalist datepicker library for Angular 2
1 lines • 13.8 kB
JSON
{"__symbolic":"module","version":1,"metadata":{"DatepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"material-datepicker","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["calendarAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[180,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(105%)","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-130%)","offset":0.51}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[180,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-105%)","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(130%)","offset":0.51}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)","offset":1}]}]]}]}]]}]]}],"styles":[".datepicker {\n position: relative;\n display: inline-block;\n color: #2b2b2b;\n font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Calibri', 'Roboto';\n }\n\n .datepicker__calendar {\n position: absolute;\n overflow: hidden;\n z-index: 1000;\n top: 1.9em;\n left: 0;\n height: 24.25em;\n width: 20.5em;\n font-size: 14px;\n background-color: #ffffff;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n cursor: default;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .datepicker__calendar__cancel {\n position: absolute;\n bottom: 1em;\n left: 1.8em;\n color: #d8d8d8;\n cursor: pointer;\n -webkit-transition: 0.37s;\n transition: 0.37s;\n }\n\n .datepicker__calendar__cancel:hover {\n color: #b1b1b1;\n }\n\n .datepicker__calendar__content {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-flow: wrap;\n flex-flow: wrap;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin-top: 0.2em;\n }\n\n .datepicker__calendar__label {\n display: inline-block;\n width: 2.2em;\n height: 2.2em;\n margin: 0.2em;\n line-height: 2.2em;\n text-align: center;\n color: #d8d8d8;\n }\n\n .datepicker__calendar__month {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-flow: wrap;\n flex-flow: wrap;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n\n .datepicker__calendar__month__day {\n display: inline-block;\n width: 2.2em;\n height: 2.2em;\n margin: 0.2em;\n border-radius: 2.2em;\n line-height: 2.2em;\n text-align: center;\n -webkit-transition: 0.37s;\n transition: 0.37s;\n }\n\n .datepicker__calendar__nav {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 3em;\n background-color: #fff;\n border-bottom: 1px solid #e8e8e8;\n }\n\n .datepicker__calendar__nav__arrow {\n width: 0.8em;\n height: 0.8em;\n cursor: pointer;\n -webkit-transition: 0.37s;\n transition: 0.37s;\n }\n\n .datepicker__calendar__nav__arrow:hover {\n -webkit-transform: scale(1.05);\n transform: scale(1.05);\n }\n\n .datepicker__calendar__nav__chevron {\n fill: #bbbbbb;\n -webkit-transition: 0.37s;\n transition: 0.37s;\n }\n\n .datepicker__calendar__nav__chevron:hover {\n fill: #2b2b2b;\n }\n\n .datepicker__calendar__nav__header {\n width: 11em;\n margin: 0 1em;\n text-align: center;\n }\n\n .datepicker__input {\n outline: none;\n border-radius: 0.1rem;\n padding: .2em .6em;\n font-size: 14px;\n }\n "],"template":"\n <div\n class=\"datepicker\"\n [ngStyle]=\"{'font-family': fontFamily}\"\n >\n <input\n [disabled]=\"disabled\"\n class=\"datepicker__input\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{'color': altInputStyle ? colors['white'] : colors['black'],\n 'background-color': altInputStyle ? accentColor : colors['white'],\n 'border': altInputStyle ? '' : '1px solid #dadada'}\"\n (click)=\"onInputClick()\"\n [(ngModel)]=\"inputText\"\n readonly=\"true\"\n >\n <div\n class=\"datepicker__calendar\"\n *ngIf=\"showCalendar\"\n >\n <div class=\"datepicker__calendar__nav\">\n <div\n class=\"datepicker__calendar__nav__arrow\"\n (click)=\"onArrowLeftClick()\"\n >\n <svg class=\"datepicker__calendar__nav__chevron\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\">\n <g>\n <path d=\"M39.7,7.1c0.5,0.5,0.5,1.2,0,1.7L29,19.6c-0.5,0.5-1.2,1.2-1.7,1.7L16.5,32.1c-0.5,0.5-1.2,0.5-1.7,0l-2.3-2.3\n c-0.5-0.5-1.2-1.2-1.7-1.7l-2.3-2.3c-0.5-0.5-0.5-1.2,0-1.7l10.8-10.8c0.5-0.5,1.2-1.2,1.7-1.7L31.7,0.8c0.5-0.5,1.2-0.5,1.7,0\n l2.3,2.3c0.5,0.5,1.2,1.2,1.7,1.7L39.7,7.1z\"/>\n </g>\n <g>\n <path d=\"M33.4,49c-0.5,0.5-1.2,0.5-1.7,0L20.9,38.2c-0.5-0.5-1.2-1.2-1.7-1.7L8.4,25.7c-0.5-0.5-0.5-1.2,0-1.7l2.3-2.3\n c0.5-0.5,1.2-1.2,1.7-1.7l2.3-2.3c0.5-0.5,1.2-0.5,1.7,0l10.8,10.8c0.5,0.5,1.2,1.2,1.7,1.7l10.8,10.8c0.5,0.5,0.5,1.2,0,1.7\n L37.4,45c-0.5,0.5-1.2,1.2-1.7,1.7L33.4,49z\"/>\n </g>\n </svg>\n </div>\n <div class=\"datepicker__calendar__nav__header\">\n {{ currentMonth }} {{ currentYear }}\n </div>\n <div\n class=\"datepicker__calendar__nav__arrow\"\n (click)=\"onArrowRightClick()\"\n >\n <svg class=\"datepicker__calendar__nav__chevron\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\">\n <g>\n <path d=\"M8.4,7.1c-0.5,0.5-0.5,1.2,0,1.7l10.8,10.8c0.5,0.5,1.2,1.2,1.7,1.7l10.8,10.8c0.5,0.5,1.2,0.5,1.7,0l2.3-2.3\n c0.5-0.5,1.2-1.2,1.7-1.7l2.3-2.3c0.5-0.5,0.5-1.2,0-1.7L29,13.2c-0.5-0.5-1.2-1.2-1.7-1.7L16.5,0.8c-0.5-0.5-1.2-0.5-1.7,0\n l-2.3,2.3c-0.5,0.5-1.2,1.2-1.7,1.7L8.4,7.1z\"/>\n </g>\n <g>\n <path d=\"M14.8,49c0.5,0.5,1.2,0.5,1.7,0l10.8-10.8c0.5-0.5,1.2-1.2,1.7-1.7l10.8-10.8c0.5-0.5,0.5-1.2,0-1.7l-2.3-2.3\n c-0.5-0.5-1.2-1.2-1.7-1.7l-2.3-2.3c-0.5-0.5-1.2-0.5-1.7,0L20.9,28.5c-0.5,0.5-1.2,1.2-1.7,1.7L8.4,40.9c-0.5,0.5-0.5,1.2,0,1.7\n l2.3,2.3c0.5,0.5,1.2,1.2,1.7,1.7L14.8,49z\"/>\n </g>\n </svg>\n </div>\n </div>\n <div\n class=\"datepicker__calendar__content\"\n >\n <div\n class=\"datepicker__calendar__label\"\n *ngFor=\"let day of dayNames\"\n >\n {{ day }}\n </div>\n <div\n [@calendarAnimation]=\"animate\"\n class=\"datepicker__calendar__month\"\n >\n <div\n *ngFor=\"let day of calendarDays\"\n class=\"datepicker__calendar__month__day\"\n [ngStyle]=\"{'cursor': day == 0 ? 'initial' : 'pointer',\n 'background-color': getDayBackgroundColor(day),\n 'color': isHoveredDay(day) ? accentColor : getDayFontColor(day),\n 'pointer-events': day == 0 ? 'none' : ''\n }\"\n (click)=\"onSelectDay(day)\"\n (mouseenter)=\"hoveredDay = day\"\n (mouseleave)=\"hoveredDay = null\"\n >\n <span *ngIf=\"day != 0\">\n {{ day.getDate() }}\n </span>\n </div>\n </div>\n <div\n class=\"datepicker__calendar__cancel\"\n (click)=\"onCancel()\"\n >\n Cancel\n </div>\n </div>\n </div>\n </div>\n "}]}],"members":{"dateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"date":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"accentColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"altInputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontFamily":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rangeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rangeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showCalendar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"calendarDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"currentMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayNames":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hoveredDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"closeCalendar":[{"__symbolic":"method"}],"setCurrentValues":[{"__symbolic":"method"}],"setDate":[{"__symbolic":"method"}],"setCurrentMonth":[{"__symbolic":"method"}],"setHoveredDay":[{"__symbolic":"method"}],"removeHoveredDay":[{"__symbolic":"method"}],"setInputText":[{"__symbolic":"method"}],"onArrowLeftClick":[{"__symbolic":"method"}],"onArrowRightClick":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onInputClick":[{"__symbolic":"method"}],"onSelectDay":[{"__symbolic":"method"}],"handleGlobalClick":[{"__symbolic":"method"}],"getDayBackgroundColor":[{"__symbolic":"method"}],"getDayFontColor":[{"__symbolic":"method"}],"isChosenDay":[{"__symbolic":"method"}],"isCurrentDay":[{"__symbolic":"method"}],"isHoveredDay":[{"__symbolic":"method"}],"triggerAnimation":[{"__symbolic":"method"}]}}}}