UNPKG

ngx-obelisco-example

Version:

Componentes funcionales y reutilizables para Angular.

223 lines (217 loc) 25.9 kB
import * as i0 from '@angular/core'; import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core'; import * as i3 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i1 from '@ng-bootstrap/ng-bootstrap'; import { NgbDatepickerI18n, NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { Subject, takeUntil } from 'rxjs'; import * as i2 from 'ngx-obelisco-example/core/services'; import * as i4 from '@angular/forms'; import { FormsModule } from '@angular/forms'; import * as i5 from 'ngx-obelisco-example/button'; import { OButtonModule } from 'ngx-obelisco-example/button'; const I18N_VALUES = { ar: { weekdays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'], months: [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ], weekLabel: 'sem' } // Otros idiomas }; const NOW = new Date(); class I18n { constructor() { this.language = 'ar'; } } I18n.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); I18n.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: I18n }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: I18n, decorators: [{ type: Injectable }] }); class CustomDatepickerI18n extends NgbDatepickerI18n { constructor(_i18n) { super(); this._i18n = _i18n; } getWeekdayLabel(weekday) { return I18N_VALUES[this._i18n.language].weekdays[weekday - 1]; } getWeekLabel() { return I18N_VALUES[this._i18n.language].weekLabel; } getMonthShortName(month) { return I18N_VALUES[this._i18n.language].months[month - 1]; } getMonthFullName(month) { return this.getMonthShortName(month); } getDayAriaLabel(date) { return `${date.day}-${date.month}-${date.year}`; } } CustomDatepickerI18n.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomDatepickerI18n, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Injectable }); CustomDatepickerI18n.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomDatepickerI18n }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomDatepickerI18n, decorators: [{ type: Injectable }], ctorParameters: function () { return [{ type: I18n }]; } }); class ODatepickerComponent { constructor(calendar, taskService) { this.calendar = calendar; this.taskService = taskService; this.isPopUp = false; this.firstDayOfWeek = 7; this.outsideDays = 'hidden'; this.minDate = { year: new Date().getFullYear(), month: 1, day: 1 }; this.maxDate = { year: new Date().getFullYear() + 5, month: 12, day: 31 }; this.startDate = { year: NOW.getFullYear(), month: NOW.getMonth() + 1, day: NOW.getDate() }; this.disabledWeekends = false; this.disabledDates = []; this.dateSelected = new EventEmitter(); this.taskSelected = new EventEmitter(); this.model = { year: NOW.getFullYear(), month: NOW.getMonth() + 1, day: NOW.getDate() }; this.onDestroy$ = new Subject(); } ngOnInit() { if (!this.startDate) { this.startDate = { year: NOW.getFullYear(), month: NOW.getMonth() + 1, day: NOW.getDate() }; } this.model = this.startDate; } selectToday() { this.model = { year: NOW.getFullYear(), month: NOW.getMonth() + 1, day: NOW.getDate() }; } isWeekend(date) { const d = new Date(date.year, date.month - 1, date.day); return d.getDay() === 0 || d.getDay() === 6; } isDisabled(date, current) { if (this.disabledWeekends && this.isWeekend(date)) { return true; } return date.month !== current.month || this.isDateDisabled(date); } isDateDisabled(date) { return this.disabledDates.some((disabledDate) => disabledDate.year === date.year && disabledDate.month === date.month && disabledDate.day === date.day); } hasTask(date) { return this.dateHasTask(date); } showTasks(date, event) { if (this.isDateDisabled(date) || (this.disabledWeekends && this.isWeekend(date))) { event.preventDefault(); event.stopPropagation(); return; } this.taskService.task$.value.filter((task) => { const taskDate = task.date ? new Date(task.date.year, task.date.month - 1, task.date.day) : new Date(); return (taskDate.getDate() === date.day && taskDate.getMonth() + 1 === date.month && taskDate.getFullYear() === date.year); }); } dateHasTask(date) { return this.taskService.task$.value.some((task) => { const taskDate = task.date ? new Date(task.date.year, task.date.month - 1, task.date.day) : new Date(); return (taskDate.getDate() === date.day && taskDate.getMonth() + 1 === date.month && taskDate.getFullYear() === date.year); }); } gettaskSelected(selectedDate) { let taskOfDate = []; this.taskService.task$.pipe(takeUntil(this.onDestroy$)).subscribe((tasks) => { tasks.forEach((task) => { const taskDate = new Date(task.date.year, task.date.month - 1, task.date.day); if (taskDate.getDate() === selectedDate.day && taskDate.getMonth() + 1 === selectedDate.month && taskDate.getFullYear() === selectedDate.year) { taskOfDate = task.task ? task.task : []; } }); }); return taskOfDate; } onDateChange(newDate) { if (this.disabledWeekends && this.isWeekend(newDate)) { return; } this.dateSelected.emit(newDate); const tasks = this.gettaskSelected(newDate); this.taskSelected.emit(tasks); } ngOnDestroy() { this.onDestroy$.next(); this.onDestroy$.complete(); } } ODatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODatepickerComponent, deps: [{ token: i1.NgbCalendar }, { token: i2.TasksService }], target: i0.ɵɵFactoryTarget.Component }); ODatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ODatepickerComponent, selector: "o-datepicker", inputs: { isPopUp: "isPopUp", firstDayOfWeek: "firstDayOfWeek", outsideDays: "outsideDays", minDate: "minDate", maxDate: "maxDate", startDate: "startDate", disabledWeekends: "disabledWeekends", disabledDates: "disabledDates" }, outputs: { dateSelected: "dateSelected", taskSelected: "taskSelected" }, providers: [I18n, { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }], ngImport: i0, template: "<!-- PopUp = false -->\r\n<ngb-datepicker\r\n #dp\r\n *ngIf=\"!isPopUp\"\r\n [(ngModel)]=\"model\"\r\n [dayTemplate]=\"customDay\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [outsideDays]=\"outsideDays\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n></ngb-datepicker>\r\n\r\n<!-- PopUp -->\r\n<form class=\"form-inline\" *ngIf=\"isPopUp\">\r\n <div class=\"form-group\">\r\n <div class=\"input-group\">\r\n <input\r\n class=\"form-control\"\r\n placeholder=\"dd-mm-yyyy\"\r\n name=\"dp\"\r\n ngbDatepicker\r\n #d=\"ngbDatepicker\"\r\n [(ngModel)]=\"model\"\r\n [dayTemplate]=\"customDay\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [outsideDays]=\"outsideDays\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n />\r\n <div class=\"input-group-append\">\r\n <o-button ariaLabel=\"calendario\" (click)=\"d.toggle()\">\r\n <i class=\"bx bxs-calendar\"></i>\r\n </o-button>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Custom Day -->\r\n<ng-template\r\n #customDay\r\n let-date\r\n let-currentMonth=\"currentMonth\"\r\n let-selected=\"selected\"\r\n let-disabled=\"disabled\"\r\n let-focused=\"focused\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.focused]=\"focused\"\r\n [class.bg-primary]=\"selected\"\r\n [class.hidden]=\"date.month !== currentMonth\"\r\n [class.has-task]=\"hasTask(date)\"\r\n (click)=\"showTasks(date, $event)\"\r\n [class.disabled]=\"disabled || (disabledWeekends && isWeekend(date)) || isDateDisabled(date)\"\r\n >\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n\r\n<!-- En popup siempre esta fijo el dia actual -->\r\n<!-- En popup el formato de la fecha -->\r\n", styles: ["::ng-deep o-datepicker{padding:.5rem .25rem;font-family:Nunito,sans-serif;font-weight:600}::ng-deep o-datepicker ngb-datepicker{background-color:#fff}::ng-deep o-datepicker .ngb-dp-month:first-child .ngb-dp-week,::ng-deep o-datepicker .ngb-dp-month:last-child .ngb-dp-week{padding:0}::ng-deep o-datepicker .ngb-dp-arrow{display:none}::ng-deep o-datepicker .ngb-dp-navigation-select{border:none;margin-bottom:1rem}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select{border:none;color:#38485c;font-size:21px;margin-top:8px;cursor:pointer;padding-left:0}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar{width:6px}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-thumb:hover{background:rgba(150,150,150,.9)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-thumb:active{background:rgba(150,150,150,.9)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select~.form-select{width:100px;min-width:100px;max-width:100px;text-align:center}::ng-deep o-datepicker ngb-datepicker-month{font-size:17px;color:#505e70}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-day,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-weekday{width:40px;height:40px;max-height:40px;text-align:center;display:flex;align-items:center;justify-content:center;margin:.25rem 0;padding:0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week{gap:8px;padding:.25rem 0;display:flex;align-items:center;justify-content:center;margin:auto;border-radius:0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week.ngb-dp-weekdays{justify-content:space-between;padding:.25rem 0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week.ngb-dp-weekdays .ngb-dp-weekday{font-weight:700;font-size:17px;font-style:normal}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week:nth-child(even){background-color:#fff;margin:.25rem 0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week.ngb-dp-week:nth-child(odd){background-color:#f5f9fc}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day{border-radius:50%;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-width:100%}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.has-task{color:#fff;background-color:#38485c}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.focused,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.bg-primary{background-color:#007bc7;color:#fff}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.bg-primary{background-color:#007bc7!important}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.hidden{color:#9eaab8}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.focused{box-shadow:0 0 0 .125rem #005387}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled-weekend,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.bg-primary{cursor:not-allowed;background:transparent;color:#9eaab8}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled-weekend:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled-weekend.focused,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.focused,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.bg-primary:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.bg-primary.focused{background-color:transparent;color:#9eaab8;border-radius:0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .ngb-dp-day.ngb-dp-today:focus{outline:none}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .ngb-dp-day.ngb-dp-today:focus .custom-day{box-shadow:0 0 0 .125rem #005387}::ng-deep o-datepicker .form-inline,::ng-deep o-datepicker .form-group,::ng-deep o-datepicker .input-group{display:flex;flex-direction:row}::ng-deep o-datepicker .form-inline .form-control,::ng-deep o-datepicker .form-group .form-control,::ng-deep o-datepicker .input-group .form-control{height:40px;min-height:40px;max-height:40px;margin-right:8px}::ng-deep o-datepicker .form-inline input,::ng-deep o-datepicker .form-group input,::ng-deep o-datepicker .input-group input{width:275px;min-width:275px;max-width:275px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1.NgbDatepicker, selector: "ngb-datepicker", inputs: ["dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i5.OButtonComponent, selector: "o-button", inputs: ["type", "isOutline", "size", "isExpandable", "hasIcon", "hasSpinner", "ariaLabel", "customClasses", "route", "link", "target", "download", "rel", "isDisabled", "dataTarget", "dataToggle", "dataDismiss"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODatepickerComponent, decorators: [{ type: Component, args: [{ selector: 'o-datepicker', providers: [I18n, { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }], template: "<!-- PopUp = false -->\r\n<ngb-datepicker\r\n #dp\r\n *ngIf=\"!isPopUp\"\r\n [(ngModel)]=\"model\"\r\n [dayTemplate]=\"customDay\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [outsideDays]=\"outsideDays\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n></ngb-datepicker>\r\n\r\n<!-- PopUp -->\r\n<form class=\"form-inline\" *ngIf=\"isPopUp\">\r\n <div class=\"form-group\">\r\n <div class=\"input-group\">\r\n <input\r\n class=\"form-control\"\r\n placeholder=\"dd-mm-yyyy\"\r\n name=\"dp\"\r\n ngbDatepicker\r\n #d=\"ngbDatepicker\"\r\n [(ngModel)]=\"model\"\r\n [dayTemplate]=\"customDay\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n [outsideDays]=\"outsideDays\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [startDate]=\"startDate\"\r\n (ngModelChange)=\"onDateChange($event)\"\r\n />\r\n <div class=\"input-group-append\">\r\n <o-button ariaLabel=\"calendario\" (click)=\"d.toggle()\">\r\n <i class=\"bx bxs-calendar\"></i>\r\n </o-button>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<!-- Custom Day -->\r\n<ng-template\r\n #customDay\r\n let-date\r\n let-currentMonth=\"currentMonth\"\r\n let-selected=\"selected\"\r\n let-disabled=\"disabled\"\r\n let-focused=\"focused\"\r\n>\r\n <span\r\n class=\"custom-day\"\r\n [class.focused]=\"focused\"\r\n [class.bg-primary]=\"selected\"\r\n [class.hidden]=\"date.month !== currentMonth\"\r\n [class.has-task]=\"hasTask(date)\"\r\n (click)=\"showTasks(date, $event)\"\r\n [class.disabled]=\"disabled || (disabledWeekends && isWeekend(date)) || isDateDisabled(date)\"\r\n >\r\n {{ date.day }}\r\n </span>\r\n</ng-template>\r\n\r\n<!-- En popup siempre esta fijo el dia actual -->\r\n<!-- En popup el formato de la fecha -->\r\n", styles: ["::ng-deep o-datepicker{padding:.5rem .25rem;font-family:Nunito,sans-serif;font-weight:600}::ng-deep o-datepicker ngb-datepicker{background-color:#fff}::ng-deep o-datepicker .ngb-dp-month:first-child .ngb-dp-week,::ng-deep o-datepicker .ngb-dp-month:last-child .ngb-dp-week{padding:0}::ng-deep o-datepicker .ngb-dp-arrow{display:none}::ng-deep o-datepicker .ngb-dp-navigation-select{border:none;margin-bottom:1rem}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select{border:none;color:#38485c;font-size:21px;margin-top:8px;cursor:pointer;padding-left:0}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar{width:6px}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-thumb:hover{background:rgba(150,150,150,.9)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select::-webkit-scrollbar-thumb:active{background:rgba(150,150,150,.9)}::ng-deep o-datepicker .ngb-dp-navigation-select .form-select~.form-select{width:100px;min-width:100px;max-width:100px;text-align:center}::ng-deep o-datepicker ngb-datepicker-month{font-size:17px;color:#505e70}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-day,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-weekday{width:40px;height:40px;max-height:40px;text-align:center;display:flex;align-items:center;justify-content:center;margin:.25rem 0;padding:0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week{gap:8px;padding:.25rem 0;display:flex;align-items:center;justify-content:center;margin:auto;border-radius:0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week.ngb-dp-weekdays{justify-content:space-between;padding:.25rem 0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week.ngb-dp-weekdays .ngb-dp-weekday{font-weight:700;font-size:17px;font-style:normal}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week:nth-child(even){background-color:#fff;margin:.25rem 0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week.ngb-dp-week:nth-child(odd){background-color:#f5f9fc}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day{border-radius:50%;display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-width:100%}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.has-task{color:#fff;background-color:#38485c}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.focused,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.bg-primary{background-color:#007bc7;color:#fff}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.bg-primary{background-color:#007bc7!important}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.hidden{color:#9eaab8}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.focused{box-shadow:0 0 0 .125rem #005387}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled-weekend,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.bg-primary{cursor:not-allowed;background:transparent;color:#9eaab8}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled-weekend:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled-weekend.focused,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.focused,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.bg-primary:hover,::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .custom-day.disabled.bg-primary.focused{background-color:transparent;color:#9eaab8;border-radius:0}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .ngb-dp-day.ngb-dp-today:focus{outline:none}::ng-deep o-datepicker ngb-datepicker-month .ngb-dp-week .ngb-dp-day.ngb-dp-today:focus .custom-day{box-shadow:0 0 0 .125rem #005387}::ng-deep o-datepicker .form-inline,::ng-deep o-datepicker .form-group,::ng-deep o-datepicker .input-group{display:flex;flex-direction:row}::ng-deep o-datepicker .form-inline .form-control,::ng-deep o-datepicker .form-group .form-control,::ng-deep o-datepicker .input-group .form-control{height:40px;min-height:40px;max-height:40px;margin-right:8px}::ng-deep o-datepicker .form-inline input,::ng-deep o-datepicker .form-group input,::ng-deep o-datepicker .input-group input{width:275px;min-width:275px;max-width:275px}\n"] }] }], ctorParameters: function () { return [{ type: i1.NgbCalendar }, { type: i2.TasksService }]; }, propDecorators: { isPopUp: [{ type: Input }], firstDayOfWeek: [{ type: Input }], outsideDays: [{ type: Input }], minDate: [{ type: Input }], maxDate: [{ type: Input }], startDate: [{ type: Input }], disabledWeekends: [{ type: Input }], disabledDates: [{ type: Input }], dateSelected: [{ type: Output }], taskSelected: [{ type: Output }] } }); class ODatepickerModule { } ODatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); ODatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ODatepickerModule, bootstrap: [ODatepickerComponent], declarations: [ODatepickerComponent], imports: [CommonModule, FormsModule, NgbModule, OButtonModule], exports: [ODatepickerComponent] }); ODatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODatepickerModule, imports: [CommonModule, FormsModule, NgbModule, OButtonModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODatepickerModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, FormsModule, NgbModule, OButtonModule], declarations: [ODatepickerComponent], exports: [ODatepickerComponent], bootstrap: [ODatepickerComponent] }] }] }); /** * Generated bundle index. Do not edit. */ export { CustomDatepickerI18n, I18n, ODatepickerComponent, ODatepickerModule }; //# sourceMappingURL=ngx-obelisco-example-datepicker.mjs.map