\r\n\t\t
\r\n `,\r\n styles: [\r\n `\r\n :host {display:table;float:left;min-height: var(--sedeh-min-height, 25px);}\r\n .popper .fa-calendar{display: inline-block;margin: var(--sedeh-margin, 0 5px);}\r\n .popper:hover .fa-calendar{color: var(--sedeh-hover-opacity, 0.5);}\r\n .popper:focus {outline: none;}\r\n .popper:focus .fa{zoom: 1.1;right: var(--sedeh-shift-right, 0);position: relative;color: var(--sedeh-focus-color, darkblue);}\r\n .popper.disabled .fa-calendar{color: var(--sedeh-disabled-color, #888);}\r\n .popper.disabled:hover .fa-calendar{cursor:default;color: var(--sedeh-disabled-color, #888);}\r\n .popper.disabled{color: var(--sedeh-disabled-color, #888);pointer-events:none;cursor:default;text-decoration: none;}\r\n .calendar-box {\r\n display: flex;\r\n flex-direction: row;\r\n cursor: default;\r\n width: 100%;\r\n display: inline-block;\r\n }\r\n .calendar-box date {flex: 1;}\r\n .calendar-box .popper {cursor: pointer;flex: 0 0 15px}\r\n .calendar {\r\n display: table;\r\n width: 210px;\r\n position: absolute;\r\n background-color: #fff;\r\n z-index: 2;\r\n border: 1px solid #ddd;\r\n border-radius: 4px;\r\n box-shadow: var(--sedeh-box-shadow, 3px 3px 3px #999);\r\n }\r\n .calendar * {\r\n box-sizing: border-box;\r\n }\r\n .calendar .calendar-navs {\r\n background-color: whitesmoke;\r\n }\r\n .calendar .month-nav {\r\n padding: 2px;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n }\r\n .calendar .year-nav {\r\n padding: 2px;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n }\r\n .calendar .month-nav button,\r\n .calendar .year-nav button {\r\n border: 0;\r\n background: transparent;\r\n cursor: pointer;\r\n }\r\n .calendar .month-nav button:hover,\r\n .calendar .year-nav button:hover {\r\n color: red;\r\n }\r\n .calendar .month-grid .day-names {\r\n display: flex;\r\n flex-direction: row;\r\n background: whitesmoke;\r\n border-bottom-right-radius: 3px;\r\n border-bottom-left-radius: 3px;\r\n }\r\n .calendar .month-grid .weeks {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .calendar .month-grid .week {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n .calendar .month-grid .day-names {\r\n border-top: 1px dotted #ddd;\r\n border-bottom: 1px dashed #ddd;\r\n }\r\n .calendar .month-grid .week-date,\r\n .calendar .month-grid .day-name {\r\n text-align: center;\r\n padding: 2px;\r\n display: block;\r\n width: 30px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n .calendar .month-grid .week-date {\r\n height: 30px;\r\n position: relative;\r\n padding: 5px;\r\n }\r\n .calendar .month-grid .week-date .date-text {\r\n font-size: 10px;\r\n z-index: 10;\r\n }\r\n .calendar .month-grid .week-date::after {\r\n content: '';\r\n height: 24px;\r\n width: 24px;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n border-radius: 50%;\r\n transition: background-color 150ms linear, color 150ms linear;\r\n z-index: 1;\r\n }\r\n .calendar .month-grid .week-date.disabled {color: #aaa;}\r\n .calendar .month-grid .week-date.enabled {\r\n cursor: pointer;\r\n }\r\n .calendar .month-grid .week-date.enabled:focus {\r\n outline: 0;\r\n }\r\n .calendar .month-grid .week-date.enabled:hover .date-text,\r\n .calendar .month-grid .week-date.enabled:focus .date-text {\r\n font-weight: bold;\r\n color: blue;\r\n }\r\n .calendar .month-grid .week-date.enabled:hover::after,\r\n .calendar .month-grid .week-date.enabled:focus::after {\r\n background-color: whitesmoke;\r\n }\r\n .calendar .month-grid .week-date.selected .date-text {\r\n color: #fff !important;\r\n }\r\n .calendar .month-grid .week-date.selected::after{\r\n background-color: blue !important;\r\n }\r\n .calendar .month-grid .week-date.today::after {\r\n background-color: lightblue;\r\n font-weight: bold;\r\n color: #fff;\r\n }\r\n @media print {\r\n .calendar-box .popper {\r\n display: none;\r\n }\r\n }\r\n `\r\n ]\r\n})\r\nexport class CalendarComponent implements PipeComponentInterface {\r\n\r\n source!: Date;\r\n id!: string;\r\n name!: string;\r\n item: any;\r\n showCalendar = false;\r\n formatting!:string;\r\n editName = false;\r\n multiselect = false;\r\n disabled = false;\r\n active = true;\r\n validate = (item: any, newValue: any) => true;\r\n\r\n origDate!: Date;\r\n currentDate!: Date;\r\n dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\r\n weeks: CalendarDateInterface[][] = [];\r\n selectedDays: Date[] = [];\r\n\r\n @Output(\"onIntoComponentChange\")\r\n onIntoComponentChange = new EventEmitter();\r\n\r\n constructor(private renderer: Renderer2) {\r\n\r\n }\r\n\r\n keyup(event: any) {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n const code = event.which;\r\n if (code === 13 && !this.disabled) {\r\n event.target.click();\r\n }\r\n }\r\n popdatepicker(event: any) {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n this.showCalendar = !this.showCalendar;\r\n }\r\n\r\n static settingsPatterns() {\r\n return ['calendar:MM/dd/yyyy']; //date format\r\n }\r\n transform(source: Date, data: any, args?: any[]) {\r\n this.source= source;\r\n this.currentDate = new Date(source);\r\n this.origDate = new Date(source);\r\n\r\n if (source instanceof Array) {\r\n this.multiselect = true;\r\n source.map( (item) => {\r\n this.selectedDays.push(new Date(item));\r\n })\r\n } else {\r\n this.multiselect = false;\r\n this.selectedDays.push(new Date(this.source));\r\n }\r\n this.item = data;\r\n this.generateCalendar();\r\n this.formatting= (args && args.length) ? args[0] : \"\";\r\n }\r\n\r\n isSelected(date: Date): boolean {\r\n let index = -1;\r\n for (let i = 0; i < this.selectedDays.length; i++) {\r\n const selectedDate: Date = this.selectedDays[i];\r\n if (this.isSameDay(date, selectedDate)) {\r\n index = i;\r\n }\r\n }\r\n return index > -1;\r\n }\r\n\r\n isSelectedMonth(date: Date): boolean {\r\n return this.isSameMonth(date, this.currentDate);\r\n }\r\n\r\n toggleSelectedDates(day: CalendarDateInterface) {\r\n let found = false;\r\n if (this.multiselect) {\r\n for (let i = 0; i < this.selectedDays.length; i++) {\r\n const date: Date = this.selectedDays[i];\r\n if (this.isSameDay(day.date, date)) {\r\n this.selectedDays.splice(i,1);\r\n found = true;\r\n day.selected = false;\r\n break;\r\n }\r\n }\r\n if(!found) {\r\n this.selectedDays.push(day.date);\r\n day.selected = true;\r\n }\r\n } else {\r\n this.selectedDays = [day.date];\r\n day.selected = true;\r\n }\r\n }\r\n selectDate(event: any, day: CalendarDateInterface): void {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n if(this.validate(this.item, day.date)) {\r\n this.origDate = day.date;\r\n this.currentDate = day.date;\r\n this.toggleSelectedDates( day );\r\n \r\n this.selectedDays.sort( (a, b) => {\r\n return a > b ? -1 : 1;\r\n });\r\n this.onIntoComponentChange.emit({\r\n id: this.id,\r\n name: this.name,\r\n value: this.selectedDays,\r\n type: \"select\",\r\n item: this.item\r\n });\r\n this.generateCalendar();\r\n }\r\n this.showCalendar = false;\r\n }\r\n\r\n // actions from calendar\r\n prevMonth(event: any): void {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n this.currentDate = new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()-1, this.currentDate.getDate());\r\n this.generateCalendar();\r\n }\r\n\r\n nextMonth(event: any): void {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n this.currentDate = new Date(this.currentDate.getFullYear(),this.currentDate.getMonth()+1, this.currentDate.getDate());\r\n this.generateCalendar();\r\n }\r\n\r\n prevYear(event: any): void {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n this.currentDate = new Date(this.currentDate.getFullYear()-1,this.currentDate.getMonth(), this.currentDate.getDate());\r\n this.generateCalendar();\r\n }\r\n\r\n nextYear(event: any): void {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n this.currentDate = new Date(this.currentDate.getFullYear()+1,this.currentDate.getMonth(), this.currentDate.getDate());\r\n this.generateCalendar();\r\n }\r\n\r\n // generate the calendar grid\r\n generateCalendar(): void {\r\n const dates = this.fillDates(this.currentDate);\r\n const weeks: CalendarDateInterface[][] = [];\r\n while (dates.length > 0) {\r\n weeks.push(dates.splice(0, 7));\r\n }\r\n this.weeks = weeks;\r\n }\r\n private isSameDay(a: Date, b: Date) {\r\n return a.getFullYear() === b.getFullYear() && \r\n a.getMonth() === b.getMonth() && \r\n a.getDate() === b.getDate();\r\n }\r\n private isSameMonth(a: any, b: any) {\r\n return a.getYear() === b.getYear() && \r\n a.getMonth() === b.getMonth();\r\n }\r\n\r\n fillDates(currentDate: Date): CalendarDateInterface[] {\r\n const cm = new Date(currentDate);\r\n const tm = new Date();\r\n const firstDay = new Date(cm.getFullYear(), cm.getMonth(), 1)\r\n const firstOfMonth = firstDay.getDay();\r\n const firstDayOfGrid = new Date(firstDay.getFullYear(), firstDay.getMonth(), firstDay.getDate() - firstOfMonth);\r\n const start = firstDayOfGrid.getDate();\r\n const list = [];\r\n for (let i = start; i< (start + 42);i++){\r\n const d = new Date(firstDayOfGrid.getFullYear(), firstDayOfGrid.getMonth(), i);\r\n list.push({\r\n today: this.isSameDay(tm, d),\r\n selected: this.isSelected(d),\r\n date: d\r\n });\r\n }\r\n return list;\r\n }\r\n}\r\n\r\n","import { NgModule, ModuleWithProviders, Inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { CalendarComponent } from './calendar.component';\r\nimport { ComponentPool } from '../common/component.pool';\r\n\r\n@NgModule({\r\n imports: [CommonModule],\r\n declarations: [CalendarComponent],\r\n exports: [CalendarComponent],\r\n entryComponents: [CalendarComponent],\r\n schemas: [CUSTOM_ELEMENTS_SCHEMA]\r\n})\r\n\r\nexport class CalendarIntoPipeModule {\r\n static forRoot(): ModuleWithProviders\r\n\t\t\t
\r\n\t\t\r\n \r\n\t\t\t\t{{ currentDate | date:'MMMM' }}\r\n \r\n\t\t\t
\r\n\t\t\t\r\n \r\n\t\t\t\t{{ currentDate | date: 'yyyy' }}\r\n \r\n\t\t\t
\r\n\t\t\r\n\t\t\t
\r\n\t\r\n\t\t\t\t
\r\n\t\t\t{{ name }}
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\t{{ day.date.getDate() }}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{{ day.date.getDate() }}\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t| \" + header + \" | \");\r\n }\r\n );\r\n result += \"
|---|
| \" + row[header] + \" | \");\r\n }\r\n );\r\n result += \"