date-picker-custom/date-picker-custom.metadata.json

A simple customizable date picker for Angular

{"__symbolic":"module","version":4,"metadata":{"DatePickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"arrangeDates":[{"__symbolic":"method"}],"monthToName":[{"__symbolic":"method"}],"nameToMonth":[{"__symbolic":"method"}],"getMap":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"date-picker","template":"<main class='calendar-box' [ngClass]=\"themeColor\">\r\n    <div class='calendar-box-heading-bar'>\r\n        <div class=\"calendar-box-heading-bar-prev\" \r\n            (click)=\"monthYearPrev()\">\r\n            < \r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-month\" \r\n            (click)=\"toggleDayMonthYear('month')\"\r\n            *ngIf='showDateBox && showDay'>\r\n            {{monthDayMap[selectedMonth].month}} - {{selectedYear}}\r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-month\" \r\n            (click)=\"toggleDayMonthYear('year')\"\r\n            *ngIf='showMonthBox && showMonth'>\r\n            {{selectedYear}}\r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-month\"\r\n            *ngIf='showYearBox'>\r\n            {{years[0]}}-{{years[11]}}\r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-next\" \r\n            (click)=\"monthYearNext()\">\r\n            >\r\n        </div>\r\n    </div>\r\n    <div class='calendar-box-days' *ngIf='showDateBox && showDay'>\r\n        <div class='calendar-box-days-name' \r\n            *ngFor=\"let day of ['S', 'M', 'T', 'W', 'T', 'F', 'S']\">\r\n            {{day}}\r\n        </div>\r\n        <div class='calendar-box-days-day' \r\n            *ngFor=\"let day of monthDayMap[selectedMonth].days\"\r\n            (click)='selectDay(day)' \r\n            [class.zero]='day === 0' \r\n            [class.selected]='highlightCurrentDate(day)'>\r\n            {{day}}\r\n        </div>\r\n    </div>\r\n    <div class='calendar-box-months-years' *ngIf='showMonthBox && showMonth'>\r\n        <div class='calendar-box-months-years-month-year' \r\n            *ngFor=\"let month of monthDayMap\"\r\n            (click)='selectMonth(month.month)' \r\n            [class.selected]='highlightCurrentMonth(month.month)'>\r\n            {{month.month.slice(0,3)}}\r\n        </div>\r\n    </div>\r\n    <div class='calendar-box-months-years' *ngIf='showYearBox && showYear'>\r\n        <div class='calendar-box-months-years-month-year' \r\n            *ngFor=\"let year of years\" \r\n            (click)='selectYear(year)'\r\n            [class.selected]='highlightCurrentYear(year)'>\r\n            {{year}}\r\n        </div>\r\n    </div>\r\n</main>","styles":[".calendar-box-heading-bar{cursor:pointer;display:flex}.calendar-box-heading-bar>*{padding:5px;transition:.2s ease-in-out}.theme-default .calendar-box-heading-bar>:hover{background-color:rgba(235,235,235,.377)}.theme-default .calendar-box-heading-bar>:active{background-color:rgba(158,158,158,.377);transition:.2s ease-in-out}.theme-red .calendar-box-heading-bar>:hover{background-color:rgba(255,208,208,.327)}.theme-red .calendar-box-heading-bar>:active{background-color:rgba(255,55,55,.327);transition:.2s ease-in-out}.theme-green .calendar-box-heading-bar>:hover{background-color:rgba(204,255,153,.534)}.theme-green .calendar-box-heading-bar>:active{background-color:rgba(128,255,0,.534);transition:.2s ease-in-out}.theme-yellow .calendar-box-heading-bar>:hover{background-color:rgba(255,255,168,.327)}.theme-yellow .calendar-box-heading-bar>:active{background-color:rgba(255,255,15,.327);transition:.2s ease-in-out}.theme-blue .calendar-box-heading-bar>:hover{background-color:rgba(168,213,255,.327)}.theme-blue .calendar-box-heading-bar>:active{background-color:rgba(15,139,255,.327);transition:.2s ease-in-out}.calendar-box-heading-bar-prev{width:10%;font-weight:700;font-size:18px;text-align:center}.theme-default .calendar-box-heading-bar-prev{border:1.5px solid rgba(82,82,82,.377);color:rgba(82,82,82,.377)}.theme-red .calendar-box-heading-bar-prev{border:1.5px solid rgba(157,0,0,.327);color:rgba(157,0,0,.327)}.theme-green .calendar-box-heading-bar-prev{border:1.5px solid rgba(51,102,0,.534);color:rgba(51,102,0,.534)}.theme-yellow .calendar-box-heading-bar-prev{border:1.5px solid rgba(117,117,0,.327);color:rgba(117,117,0,.327)}.theme-blue .calendar-box-heading-bar-prev{border:1.5px solid rgba(0,60,117,.327);color:rgba(0,60,117,.327)}.calendar-box-heading-bar-month{flex:1 1 auto;text-align:center}.calendar-box-heading-bar-next{width:10%;font-weight:700;font-size:18px;text-align:center}.theme-default .calendar-box-heading-bar-next{border:1.5px solid rgba(82,82,82,.377);color:rgba(82,82,82,.377)}.theme-red .calendar-box-heading-bar-next{border:1.5px solid rgba(157,0,0,.327);color:rgba(157,0,0,.327)}.theme-green .calendar-box-heading-bar-next{border:1.5px solid rgba(51,102,0,.534);color:rgba(51,102,0,.534)}.theme-yellow .calendar-box-heading-bar-next{border:1.5px solid rgba(117,117,0,.327);color:rgba(117,117,0,.327)}.theme-blue .calendar-box-heading-bar-next{border:1.5px solid rgba(0,60,117,.327);color:rgba(0,60,117,.327)}.calendar-box-days{height:200px;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}.calendar-box-days-name{height:100%;width:100%;align-self:center;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:100;cursor:default;color:#979797;border-bottom:.05px solid #c7c7c7}.calendar-box-days-day{height:100%;width:100%;cursor:pointer;align-self:center;display:flex;align-items:center;justify-content:center;font-size:13px}.theme-default .calendar-box-days-day:hover{background-color:rgba(235,235,235,.377)}.theme-default .calendar-box-days-day:active{background-color:rgba(158,158,158,.377);transition:.2s ease-in-out}.theme-red .calendar-box-days-day:hover{background-color:rgba(255,208,208,.327)}.theme-red .calendar-box-days-day:active{background-color:rgba(255,55,55,.327);transition:.2s ease-in-out}.theme-green .calendar-box-days-day:hover{background-color:rgba(204,255,153,.534)}.theme-green .calendar-box-days-day:active{background-color:rgba(128,255,0,.534);transition:.2s ease-in-out}.theme-yellow .calendar-box-days-day:hover{background-color:rgba(255,255,168,.327)}.theme-yellow .calendar-box-days-day:active{background-color:rgba(255,255,15,.327);transition:.2s ease-in-out}.theme-blue .calendar-box-days-day:hover{background-color:rgba(168,213,255,.327)}.theme-blue .calendar-box-days-day:active{background-color:rgba(15,139,255,.327);transition:.2s ease-in-out}.theme-default .calendar-box-days-day.selected{background-color:rgba(158,158,158,.377)}.theme-red .calendar-box-days-day.selected{background-color:rgba(255,55,55,.327)}.theme-green .calendar-box-days-day.selected{background-color:rgba(128,255,0,.534)}.theme-yellow .calendar-box-days-day.selected{background-color:rgba(255,255,15,.327)}.theme-blue .calendar-box-days-day.selected{background-color:rgba(15,139,255,.327)}.calendar-box-days-day.zero{visibility:hidden!important}*{padding:0;margin:0;font-family:\"Segoe UI\",sans-serif,\"Helvetica Neue\"}.calendar-box-months-years{height:200px;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}.calendar-box-months-years-month-year{height:100%;width:100%;cursor:pointer;align-self:center;display:flex;align-items:center;justify-content:center;font-size:13px}.theme-default .calendar-box-months-years-month-year:hover{background-color:rgba(235,235,235,.377)}.theme-default .calendar-box-months-years-month-year:active{background-color:rgba(158,158,158,.377);transition:.2s ease-in-out}.theme-red .calendar-box-months-years-month-year:hover{background-color:rgba(255,208,208,.327)}.theme-red .calendar-box-months-years-month-year:active{background-color:rgba(255,55,55,.327);transition:.2s ease-in-out}.theme-green .calendar-box-months-years-month-year:hover{background-color:rgba(204,255,153,.534)}.theme-green .calendar-box-months-years-month-year:active{background-color:rgba(128,255,0,.534);transition:.2s ease-in-out}.theme-yellow .calendar-box-months-years-month-year:hover{background-color:rgba(255,255,168,.327)}.theme-yellow .calendar-box-months-years-month-year:active{background-color:rgba(255,255,15,.327);transition:.2s ease-in-out}.theme-blue .calendar-box-months-years-month-year:hover{background-color:rgba(168,213,255,.327)}.theme-blue .calendar-box-months-years-month-year:active{background-color:rgba(15,139,255,.327);transition:.2s ease-in-out}.theme-default .calendar-box-months-years-month-year.selected{background-color:rgba(158,158,158,.377)}.theme-red .calendar-box-months-years-month-year.selected{background-color:rgba(255,55,55,.327)}.theme-green .calendar-box-months-years-month-year.selected{background-color:rgba(128,255,0,.534)}.theme-yellow .calendar-box-months-years-month-year.selected{background-color:rgba(255,255,15,.327)}.theme-blue .calendar-box-months-years-month-year.selected{background-color:rgba(15,139,255,.327)}.calendar-box{transition:.2s ease-in-out;position:relative;box-shadow:0 1.1px 2.1px -2px rgba(0,0,0,.1),0 4px 17px -8px rgba(0,0,0,.3);width:220px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]}]}],"members":{"showDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3},"arguments":["showDay"]}]}],"showMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3},"arguments":["showMonth"]}]}],"showYear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3},"arguments":["showYear"]}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["theme"]}]}],"finalDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3},"arguments":["date"]}]}],"finalDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3},"arguments":["day"]}]}],"finalMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3},"arguments":["month"]}]}],"finalMonthName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3},"arguments":["month_name"]}]}],"finalYear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3},"arguments":["year"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DatePickerService"}]}],"ngOnInit":[{"__symbolic":"method"}],"monthYearPrev":[{"__symbolic":"method"}],"monthYearNext":[{"__symbolic":"method"}],"selectDay":[{"__symbolic":"method"}],"selectMonth":[{"__symbolic":"method"}],"selectYear":[{"__symbolic":"method"}],"toggleDayMonthYear":[{"__symbolic":"method"}],"highlightCurrentDate":[{"__symbolic":"method"}],"highlightCurrentMonth":[{"__symbolic":"method"}],"highlightCurrentYear":[{"__symbolic":"method"}],"emitOutput":[{"__symbolic":"method"}]}},"DatePickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DatePickerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"DatePickerComponent"}]}]}],"members":{}}},"origins":{"DatePickerService":"./lib/custom-date-picker.service","DatePickerComponent":"./lib/date-picker/date-picker.component","DatePickerModule":"./lib/custom-date-picker.module"},"importAs":"date-picker-custom"}