ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
207 lines (202 loc) • 17.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
class OCalendarComponent {
constructor() {
this.activeDays = [];
this.isCollapsed = false;
this.hasList = true;
this.customClasses = '';
this.month = null;
this.year = null;
this.start = 0;
this.MONTH_TITLE = [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Mayo',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
];
this.DAYS_HEADER_TABLE = ['D', 'L', 'M', 'M', 'J', 'V', 'S'];
this.daysArray = [];
this.emptyDaysArray = [];
this.firstWeekDays = 0;
this.firstWeekDaysArray = [];
this.weekDaysArray = [];
this.analizedActiveDays = [];
//Define número de días por mes
this.monthAmountOfDays = (month, year) => {
if (typeof month !== 'number' || month < 1 || month > 12) {
return 0;
}
if (month === 4 || month === 6 || month === 9 || month === 11) {
return 30;
}
else if (month === 2) {
return (year ? year : 2024) % 4 === 0 ? 29 : 28;
}
else {
return 31;
}
};
//Define texto del mes
this.monthsTitles = (month) => {
if (month && month >= 1 && month <= 12) {
return this.MONTH_TITLE[month - 1];
}
else {
return 'Mes inválido';
}
};
}
//Determina el dia de la semana en que empieza del mes de determinado año
getStartDayOfMonth(year, month) {
const firstDayOfMonth = new Date(year, month - 1, 1);
const dayOfWeek = firstDayOfMonth.getDay();
this.start = dayOfWeek;
return this.start;
}
// Genera filas de 7 días cada una
get weekDaysArrayRows() {
const rows = [];
const rowSize = 7;
const arrayLength = this.weekDaysArray.length;
let counter = 0;
for (let i = 0; i < arrayLength; i += rowSize) {
rows.push(this.weekDaysArray.slice(i, i + rowSize));
counter += 1;
}
// Se añaden elementos vacios si es necesario para completar la última fila
const lastChunkLength = rows[rows.length - 1].length;
if (lastChunkLength < rowSize) {
const remainingSpecials = rowSize - lastChunkLength;
for (let i = 0; i < remainingSpecials; i++) {
rows[rows.length - 1].push(-1);
}
}
return { rows, counter };
}
//Evalua si hay numeros de activeDays que coincidan
isActiveDay(day) {
var _a;
return !!((_a = this.analizedActiveDays) === null || _a === void 0 ? void 0 : _a.find((activeDay) => activeDay.day === day));
}
getActiveDay(day) {
var _a;
return (_a = this.analizedActiveDays) === null || _a === void 0 ? void 0 : _a.find((activeDay) => activeDay.day === day);
}
//Convierte array de days en objetos
convertArrayIntoObject(objeto) {
const dayArray = objeto.day;
if (Array.isArray(dayArray)) {
return dayArray.map((day) => (Object.assign(Object.assign({}, objeto), { day: day })));
}
else {
return [objeto];
}
}
//Evalua cada activeDay
generateArrayActiveDays(activeDays) {
for (const key in activeDays) {
if (Object.prototype.hasOwnProperty.call(activeDays, key)) {
const element = activeDays[key];
if (typeof element.day == 'number') {
this.analizedActiveDays.push(element);
}
else {
for (const obj of this.convertArrayIntoObject(element)) {
this.analizedActiveDays.push(obj);
}
}
}
}
return this.analizedActiveDays;
}
//Obtiene clase de cada activeDay acorde al type
getClassByType(type) {
if (type == undefined) {
return 'active';
}
else if (type == 'secondary') {
return 'active-secondary';
}
else {
return `active bg-${type}`;
}
}
//Obtiene el tipo de day y lo asigna a la lista
typeOfDays(day) {
if (!day) {
return '';
}
else if (typeof day === 'number') {
return `${day}.`;
}
else {
if (day.length > 2) {
return `${day[0]} al ${day[day.length - 1]}.`;
}
else {
return `${day[0]}, ${day[day.length - 1]}.`;
}
}
}
ngOnInit() {
if (this.date) {
this.month = this.date.month;
this.year = this.date.year;
}
this.getStartDayOfMonth(this.year, this.month);
this.daysArray = Array.from({ length: this.monthAmountOfDays(this.month, this.year) }, (_, index) => index + 1);
this.emptyDaysArray = this.start < 7 ? Array.from({ length: this.start }, (_, index) => ({ key: index })) : [];
this.firstWeekDays = 7 - this.start;
this.firstWeekDaysArray = this.daysArray.slice(0, this.firstWeekDays);
this.weekDaysArray = this.daysArray.slice(this.firstWeekDays);
if (this.activeDays) {
this.generateArrayActiveDays(this.activeDays);
}
}
}
OCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OCalendarComponent, selector: "o-calendar", inputs: { date: "date", activeDays: "activeDays", isCollapsed: "isCollapsed", hasList: "hasList", customClasses: "customClasses" }, ngImport: i0, template: "<div class=\"calendar\" [ngClass]=\"customClasses\">\r\n <div class=\"calendar-header\">\r\n <h2 class=\"calendar-title\">{{ monthsTitles(month!) }}</h2>\r\n <span class=\"calendar-year\">{{ year }}</span>\r\n </div>\r\n <div class=\"calendar-body\">\r\n <table>\r\n <thead>\r\n <tr class=\"calendar-week-header\">\r\n <th *ngFor=\"let day of DAYS_HEADER_TABLE\">\r\n <span>{{ day }}</span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr class=\"calendar-week\">\r\n <ng-container *ngIf=\"emptyDaysArray.length != 0\">\r\n <td *ngFor=\"let empatyDay of emptyDaysArray\"></td>\r\n </ng-container>\r\n <td *ngFor=\"let day of firstWeekDaysArray\">\r\n <ng-container *ngTemplateOutlet=\"activeDay; context: { day: day }\"></ng-container>\r\n </td>\r\n </tr>\r\n\r\n <tr class=\"calendar-week\" *ngFor=\"let chunkObject of weekDaysArrayRows.rows\">\r\n <ng-container *ngFor=\"let day of chunkObject; let i = index\">\r\n <td>\r\n <ng-container *ngIf=\"day >= 0\">\r\n <ng-container *ngTemplateOutlet=\"activeDay; context: { day: day }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"day < 0\">\r\n <span></span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n <tr class=\"calendar-week\" *ngIf=\"weekDaysArrayRows.counter === 4\">\r\n <td *ngFor=\"let _ of [1, 2, 3, 4, 5, 6, 7]\">\r\n <span></span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"calendar-footer\" *ngIf=\"activeDays && hasList\">\r\n <ng-container *ngIf=\"isCollapsed; else calendarList\">\r\n <div class=\"accordion\">\r\n <div class=\"card\">\r\n <button\r\n class=\"card-header collapsed\"\r\n data-toggle=\"collapse\"\r\n [attr.data-target]=\"'#collapse' + monthsTitles(month!)\"\r\n >\r\n <i class=\"bx bx-calendar\"></i>\r\n <span class=\"collapse-title\">Referencias</span>\r\n </button>\r\n <div id=\"collapse{{ monthsTitles(month!) }}\" class=\"collapse\">\r\n <div class=\"card-body\">\r\n <ng-container *ngTemplateOutlet=\"calendarList\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #calendarList>\r\n <ul class=\"calendar-footer-list\">\r\n <li *ngFor=\"let activeDay of activeDays\">\r\n <strong>\r\n {{ typeOfDays(activeDay.day) }}\r\n </strong>\r\n {{ activeDay.title }}\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #activeDay let-day=\"day\">\r\n <ng-container *ngIf=\"isActiveDay(day); else notActive\">\r\n <a\r\n *ngIf=\"getActiveDay(day)?.url != undefined; else activeNoLink\"\r\n href=\"{{ getActiveDay(day)?.url }}\"\r\n class=\"calendar-link\"\r\n title=\"{{ getActiveDay(day)?.title }}\"\r\n [class.disabled]=\"getActiveDay(day)?.isDisabled\"\r\n (click)=\"getActiveDay(day)?.isDisabled && $event.preventDefault()\"\r\n >\r\n <span [ngClass]=\"getClassByType(getActiveDay(day)?.type)\">{{ day }}</span>\r\n </a>\r\n <ng-template #activeNoLink>\r\n <span title=\"{{ getActiveDay(day)?.title }}\" [class.disabled]=\"getActiveDay(day)?.isDisabled\">\r\n <span [ngClass]=\"getClassByType(getActiveDay(day)?.type)\">{{ day }}</span>\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #notActive>\r\n <span>{{ day }}</span>\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".calendar .calendar-body table .calendar-week td .calendar-link.disabled,.calendar .calendar-body table .calendar-week td>span.disabled{cursor:not-allowed;pointer-events:none}.calendar .calendar-body table .calendar-week td .calendar-link.disabled span,.calendar .calendar-body table .calendar-week td>span.disabled span{background-color:transparent!important;color:#9eaab8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OCalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'o-calendar', template: "<div class=\"calendar\" [ngClass]=\"customClasses\">\r\n <div class=\"calendar-header\">\r\n <h2 class=\"calendar-title\">{{ monthsTitles(month!) }}</h2>\r\n <span class=\"calendar-year\">{{ year }}</span>\r\n </div>\r\n <div class=\"calendar-body\">\r\n <table>\r\n <thead>\r\n <tr class=\"calendar-week-header\">\r\n <th *ngFor=\"let day of DAYS_HEADER_TABLE\">\r\n <span>{{ day }}</span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr class=\"calendar-week\">\r\n <ng-container *ngIf=\"emptyDaysArray.length != 0\">\r\n <td *ngFor=\"let empatyDay of emptyDaysArray\"></td>\r\n </ng-container>\r\n <td *ngFor=\"let day of firstWeekDaysArray\">\r\n <ng-container *ngTemplateOutlet=\"activeDay; context: { day: day }\"></ng-container>\r\n </td>\r\n </tr>\r\n\r\n <tr class=\"calendar-week\" *ngFor=\"let chunkObject of weekDaysArrayRows.rows\">\r\n <ng-container *ngFor=\"let day of chunkObject; let i = index\">\r\n <td>\r\n <ng-container *ngIf=\"day >= 0\">\r\n <ng-container *ngTemplateOutlet=\"activeDay; context: { day: day }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"day < 0\">\r\n <span></span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n <tr class=\"calendar-week\" *ngIf=\"weekDaysArrayRows.counter === 4\">\r\n <td *ngFor=\"let _ of [1, 2, 3, 4, 5, 6, 7]\">\r\n <span></span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"calendar-footer\" *ngIf=\"activeDays && hasList\">\r\n <ng-container *ngIf=\"isCollapsed; else calendarList\">\r\n <div class=\"accordion\">\r\n <div class=\"card\">\r\n <button\r\n class=\"card-header collapsed\"\r\n data-toggle=\"collapse\"\r\n [attr.data-target]=\"'#collapse' + monthsTitles(month!)\"\r\n >\r\n <i class=\"bx bx-calendar\"></i>\r\n <span class=\"collapse-title\">Referencias</span>\r\n </button>\r\n <div id=\"collapse{{ monthsTitles(month!) }}\" class=\"collapse\">\r\n <div class=\"card-body\">\r\n <ng-container *ngTemplateOutlet=\"calendarList\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #calendarList>\r\n <ul class=\"calendar-footer-list\">\r\n <li *ngFor=\"let activeDay of activeDays\">\r\n <strong>\r\n {{ typeOfDays(activeDay.day) }}\r\n </strong>\r\n {{ activeDay.title }}\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #activeDay let-day=\"day\">\r\n <ng-container *ngIf=\"isActiveDay(day); else notActive\">\r\n <a\r\n *ngIf=\"getActiveDay(day)?.url != undefined; else activeNoLink\"\r\n href=\"{{ getActiveDay(day)?.url }}\"\r\n class=\"calendar-link\"\r\n title=\"{{ getActiveDay(day)?.title }}\"\r\n [class.disabled]=\"getActiveDay(day)?.isDisabled\"\r\n (click)=\"getActiveDay(day)?.isDisabled && $event.preventDefault()\"\r\n >\r\n <span [ngClass]=\"getClassByType(getActiveDay(day)?.type)\">{{ day }}</span>\r\n </a>\r\n <ng-template #activeNoLink>\r\n <span title=\"{{ getActiveDay(day)?.title }}\" [class.disabled]=\"getActiveDay(day)?.isDisabled\">\r\n <span [ngClass]=\"getClassByType(getActiveDay(day)?.type)\">{{ day }}</span>\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #notActive>\r\n <span>{{ day }}</span>\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".calendar .calendar-body table .calendar-week td .calendar-link.disabled,.calendar .calendar-body table .calendar-week td>span.disabled{cursor:not-allowed;pointer-events:none}.calendar .calendar-body table .calendar-week td .calendar-link.disabled span,.calendar .calendar-body table .calendar-week td>span.disabled span{background-color:transparent!important;color:#9eaab8}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { date: [{
type: Input
}], activeDays: [{
type: Input
}], isCollapsed: [{
type: Input
}], hasList: [{
type: Input
}], customClasses: [{
type: Input
}] } });
class OCalendarModule {
}
OCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OCalendarModule, declarations: [OCalendarComponent], imports: [CommonModule, RouterModule], exports: [OCalendarComponent] });
OCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OCalendarModule, imports: [CommonModule, RouterModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OCalendarModule, decorators: [{
type: NgModule,
args: [{
declarations: [OCalendarComponent],
imports: [CommonModule, RouterModule],
exports: [OCalendarComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OCalendarComponent, OCalendarModule };
//# sourceMappingURL=ngx-obelisco-example-calendar.mjs.map