ic-datepicker.metadata.json

{"__symbolic":"module","version":3,"metadata":{"IcDatepickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"IcDatepickerComponent"}],"exports":[{"__symbolic":"reference","name":"IcDatepickerComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"IcDatepickerModule"},"providers":[{"__symbolic":"reference","name":"IcDatepickerService"}]}}}},"IcDatepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ic-datepicker","template":"<div [class.ic-open]=\"datepickerIsOpen\" class=\"ic-datepicker-container\"> <div (click)=\"closeDatepicker()\" class=\"ic-datepicker-underlay\">&nbsp;</div> <!-- Datepicker toggle --> <div (click)=\"toggleDatepicker()\"> <ng-container *ngTemplateOutlet=\"inputTemplate ? inputTemplate : defaultInput; context: templateContext\" ></ng-container> </div> <!-- Datepicker popup --> <div [style.display]=\"datepickerIsOpen ? 'block' : 'none'\" [ngClass]=\"mergedOptions.position\" class=\"ic-datepicker\"> <div [style.display]=\"yearSelectMode ? 'none' : 'flex'\" class=\"ic-datepicker-header-bar\"> <button (click)=\"showMonth('previous')\" [style.visibility]=\"previousMonthToggleActive ? 'visible' : 'hidden'\" type=\"button\" class=\"cell action previous-month\" > <i [ngClass]=\"mergedOptions.icons.previousMonth.classes\"> {{ mergedOptions.icons.previousMonth.content }} </i> </button> <h3 (click)=\"showYearSelectMode()\" class=\"header-title\"> {{ currentPeriod.format('MMMM YYYY') }} </h3> <button (click)=\"showMonth('next')\" [style.visibility]=\"nextMonthToggleActive ? 'visible' : 'hidden'\" type=\"button\" class=\"cell action next-month\" > <i [ngClass]=\"mergedOptions.icons.nextMonth.classes\"> {{ mergedOptions.icons.nextMonth.content }} </i> </button> </div> <div [style.display]=\"yearSelectMode ? 'flex' : 'none'\" class=\"ic-datepicker-header-bar\"> <h3 class=\"header-title year-title\"> {{ yearOptions[0].formatted }} - {{ yearOptions[yearOptions.length - 1].formatted }} </h3> <button (click)=\"hideYearSelectMode()\" type=\"button\" class=\"cell action close-year-select\"> &times; </button> </div> <div [style.display]=\"yearSelectMode ? 'none' : 'block'\"> <div class=\"ic-datepicker-day-labels\"> <span *ngFor=\"let dayLabel of dayLabels\" class=\"cell day-label\"> {{ dayLabel }} </span> </div> <div class=\"ic-datepicker-dates\"> <button *ngFor=\"let day of periodDays\" (click)=\"setSelectedDay(day, $event)\" [ngClass]=\"day.classes\" [class.today]=\"day.isToday\" [class.selected]=\"day.isSelected\" [class.weekend]=\"day.isWeekend\" [class.placeholder]=\"day.isPlaceholder\" [disabled]=\"isDisabled || day.isPlaceholder || (day.isWeekend && mergedOptions.disableWeekends) || day.isDisabled\" type=\"button\" class=\"cell date\" > <span *ngIf=\"day.isPlaceholder\">&nbsp;</span> <span *ngIf=\"!day.isPlaceholder\"> {{ day.moment.format('D') }} </span> </button> </div> <div *ngIf=\"mergedOptions.showDayQuickOptions\" class=\"quick-options day-quick-options\"> <button *ngFor=\"let option of mergedOptions.dayQuickOptions\" [hidden]=\"option.isDisabled\" (click)=\"setSelectedDay(option.datepickerDay, $event)\" [ngClass]=\"{ selected: (selectedDay && option.date.isSame(selectedDay.moment, 'day')) }\" [disabled]=\"isDisabled\" type=\"button\" class=\"cell quick-option\" > {{ option.label }} </button> </div> </div> <div [style.display]=\"yearSelectMode ? 'block' : 'none'\" class=\"year-list\"> <div class=\"ic-datepicker-dates\"> <button (click)=\"showYears('previous')\" type=\"button\" class=\"cell toggle-years previous\"> <span> <i [ngClass]=\"mergedOptions.icons.previousYears.classes\"> {{ mergedOptions.icons.previousYears.content }} </i> </span> </button> <button *ngFor=\"let year of yearOptions\" (click)=\"setSelectedYear(year)\" [ngClass]=\"{ 'this-year': year.isThisYear, selected: year.isSelected }\" [disabled]=\"year.isDisabled\" type=\"button\" class=\"cell date year\" > {{ year.formatted }} </button> <button (click)=\"showYears('next')\" type=\"button\" class=\"cell toggle-years next\"> <span> <i [ngClass]=\"mergedOptions.icons.nextYears.classes\"> {{ mergedOptions.icons.nextYears.content }} </i> </span> </button> </div> </div> </div> <!-- Default --> <ng-template #defaultInput> <input [value]=\"getInputValue()\" [ngClass]=\"options.inputClasses\" [attr.id]=\"mergedOptions.attrs.id\" [attr.name]=\"mergedOptions.attrs.name\" [attr.placeholder]=\"mergedOptions.attrs.placeholder\" [attr.tabindex]=\"mergedOptions.attrs.tabindex\" [attr.readonly]=\"mergedOptions.attrs.readonly\" class=\"ic-datepicker-input\" type=\"text\" > </ng-template> </div> ","styles":[".ic-datepicker-container { position: relative; } .ic-datepicker-underlay { display: none; } @media (max-width: 480px) { .ic-open .ic-datepicker-underlay { display: block; position: fixed; top: 0; left: 0; height: 100vh; width: 100vh; background: rgba(0, 0, 0, 0.3); } } .ic-datepicker { position: absolute; width: 270px; z-index: 1000; -webkit-box-shadow: 0 0 10px 2px rgba(50, 50, 50, 0.3); -moz-box-shadow: 0 0 10px 2px rgba(50, 50, 50, 0.3); box-shadow: 0 0 10px 2px rgba(50, 50, 50, 0.3); } @media (max-width: 480px) { .ic-datepicker { position: fixed; bottom: 0; left: 0; transform-origin: 0 100%; width: 100%; width: 100vw; } } @media only screen and (min-width: 481px) { .ic-datepicker.top { transform-origin: 0 100%; bottom: 48px; } .ic-datepicker.bottom { top: 48px; } } .ic-datepicker .ic-datepicker-input, .ic-datepicker .ic-datepicker-input[readonly] { background-color: #fff; } .ic-datepicker .cell { user-select: none; width: calc(100% / 7); font-size: 14px; height: 38px; display: inline-block; text-align: center; font-weight: 300; border-width: 1px; border-style: solid; border-radius: 0; outline: none; box-sizing: border-box; } @media (max-width: 480px) { .ic-datepicker .cell { height: 44px; height: calc(100vw / 7); } } .ic-datepicker .cell[disabled]:hover { cursor: not-allowed; } .ic-datepicker .cell.year { width: calc(100% / 5); } .ic-datepicker .ic-datepicker-header-bar { display: flex; align-items: center; } .ic-datepicker .ic-datepicker-header-bar .action { background: transparent; border: none; outline: none; padding: 0; display: flex; justify-content: center; align-items: center; } .ic-datepicker .ic-datepicker-header-bar .header-title { text-align: center; text-transform: uppercase; margin: 0; padding-top: 4px; font-size: 15px; font-weight: 400; line-height: 34px; width: calc((100% / 7) * 5); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ic-datepicker .ic-datepicker-header-bar .header-title.year-title { margin-left: calc(100% / 7); } .ic-datepicker-container .ic-datepicker .ic-datepicker-header-bar .header-title:not(.year-title):hover, .ic-datepicker-container .ic-datepicker .ic-datepicker-header-bar .cell.action:hover { cursor: pointer; } .ic-datepicker .ic-datepicker-year-select-options .close-year-select { display: block; } .ic-datepicker .ic-datepicker-day-labels .day-label { line-height: 38px; font-size: 12px; font-weight: 300; text-transform: uppercase; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ic-datepicker .ic-datepicker-dates .date { padding-top: 0; padding-bottom: 0; } .ic-datepicker .ic-datepicker-dates .date span { display: flex; align-content: center; justify-content: center; line-height: 34px; } .ic-datepicker .quick-options { text-align: center; } .ic-datepicker .quick-options .quick-option { width: calc(100% / 2); } .ic-datepicker .year-list .toggle-years { width: 100%; font-weight: 300; outline: none; display: flex; justify-content: center; align-items: center; } .ic-datepicker .year-list .toggle-years:hover { cursor: pointer; } .ic-datepicker .chevron::before { border-style: solid; border-width: 2px 2px 0 0; content: ''; display: inline-block; height: 10px; position: relative; top: 6px; transform: rotate(-45deg); vertical-align: top; width: 10px; } .ic-datepicker .chevron.chevron-up::before { position: relative; top: 8px; } .ic-datepicker .chevron.chevron-right::before { left: -2px; transform: rotate(45deg); } .ic-datepicker .chevron.chevron-down::before { position: relative; top: 3px; transform: rotate(135deg); } .ic-datepicker .chevron.chevron-left::before { left: 3px; transform: rotate(-135deg); } "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"IcDatepickerComponent"},"multi":true}]}]}],"members":{"inputTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"IcDatepickerService"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]],"parameters":[{"__symbolic":"reference","name":"IcDatepickerService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onKeyboardInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:keydown",["$event"]]}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"getInputValue":[{"__symbolic":"method"}],"toggleDatepicker":[{"__symbolic":"method"}],"closeDatepicker":[{"__symbolic":"method"}],"showMonth":[{"__symbolic":"method"}],"showYears":[{"__symbolic":"method"}],"showYearSelectMode":[{"__symbolic":"method"}],"hideYearSelectMode":[{"__symbolic":"method"}],"setSelectedDay":[{"__symbolic":"method"}],"setSelectedYear":[{"__symbolic":"method"}],"toggleMonthToggles":[{"__symbolic":"method"}],"monthIsValid":[{"__symbolic":"method"}],"setCurrentPeriod":[{"__symbolic":"method"}],"buildYearOptions":[{"__symbolic":"method"}],"emitModelChange":[{"__symbolic":"method"}]}},"IcDatepickerDay":{"__symbolic":"interface"},"IcDatepickerIcon":{"__symbolic":"interface"},"IcDatepickerOptionsInterface":{"__symbolic":"interface"},"IcDatepickerQuickOption":{"__symbolic":"interface"},"IcDatepickerYear":{"__symbolic":"interface"},"IcDatepickerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"buildDatepickerDay":[{"__symbolic":"method"}],"buildCalendarMonth":[{"__symbolic":"method"}],"buildDayLabels":[{"__symbolic":"method"}],"dateIsValid":[{"__symbolic":"method"}],"buildPlaceholderDays":[{"__symbolic":"method"}]}},"defaultDayQuickOptions":[{"label":"Today","date":{"__symbolic":"call"}},{"label":"Tomorrow","date":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call"},"member":"add"},"arguments":[1,"day"]}}],"IcDatepickerOptions":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"IcDatepickerOptionsInterface"},{"__symbolic":"reference","name":"IcDatepickerService"}]}],"buildDayQuickOptions":[{"__symbolic":"method"}]}}},"origins":{"IcDatepickerModule":"./index","IcDatepickerComponent":"./components/ic-datepicker/ic-datepicker.component","IcDatepickerDay":"./interfaces/ic-datepicker-day","IcDatepickerIcon":"./interfaces/ic-datepicker-icon","IcDatepickerOptionsInterface":"./interfaces/ic-datepicker-options","IcDatepickerQuickOption":"./interfaces/ic-datepicker-quick-option","IcDatepickerYear":"./interfaces/ic-datepicker-year","IcDatepickerService":"./services/ic-datepicker.service","defaultDayQuickOptions":"./models/ic-datepicker-options","IcDatepickerOptions":"./models/ic-datepicker-options"},"importAs":"ic-datepicker"}