year-scheduler
Version:
An Angular Year Scheduler component.
810 lines (799 loc) • 154 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, ViewEncapsulation, EventEmitter, Output, forwardRef, NgModule } from '@angular/core';
import moment from 'moment';
import { Subject, ReplaySubject, fromEvent } from 'rxjs';
import { distinct, takeUntil } from 'rxjs/operators';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
const AX_LOCALES = [
"en",
"af",
"ar-dz",
"ar-kw",
"ar-ly",
"ar-ma",
"ar-sa",
"ar-tn",
"ar",
"az",
"be",
"bg",
"bm",
"bn",
"bo",
"br",
"bs",
"ca",
"cs",
"cv",
"cy",
"da",
"de-at",
"de-ch",
"de",
"dv",
"el",
"en-SG",
"en-au",
"en-ca",
"en-gb",
"en-ie",
"en-il",
"en-nz",
"eo",
"es-do",
"es-us",
"es",
"et",
"eu",
"fa",
"fi",
"fo",
"fr-ca",
"fr-ch",
"fr",
"fy",
"ga",
"gd",
"gl",
"gom-latn",
"gu",
"he",
"hi",
"hr",
"hu",
"hy-am",
"id",
"is",
"it-ch",
"it",
"ja",
"jv",
"ka",
"kk",
"km",
"kn",
"ko",
"ku",
"ky",
"lb",
"lo",
"lt",
"lv",
"me",
"mi",
"mk",
"ml",
"mn",
"mr",
"ms-my",
"ms",
"mt",
"my",
"nb",
"ne",
"nl-be",
"nl",
"nn",
"pa-in",
"pl",
"pt-br",
"pt",
"ro",
"ru",
"sd",
"se",
"si",
"sk",
"sl",
"sq",
"sr-cyrl",
"sr",
"ss",
"sv",
"sw",
"ta",
"te",
"tet",
"tg",
"th",
"tl-ph",
"tlh",
"tr",
"tzl",
"tzm-latn",
"tzm",
"ug-cn",
"uk",
"ur",
"uz-latn",
"uz",
"vi",
"x-pseudo",
"yo",
"zh-cn",
"zh-hk",
"zh-tw"
];
class AxiomSchedulerSidebarService {
toggle;
data;
constructor() {
this.data = new Subject();
this.toggle = new Subject();
}
open(data) {
this.toggle.next(true);
setTimeout(() => {
this.data.next(data);
}, 200);
}
close() {
this.toggle.next(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerSidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerSidebarService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerSidebarService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class AxiomSchedulerService {
_defaultLocale = 'en';
schedulerLocale = this._defaultLocale;
locale;
refershRequest;
eventChange;
eventClick;
eventDeleteClick;
eventEditClick;
axEvents;
constructor() {
this.axEvents = [];
this.refershRequest = new Subject();
this.locale = new Subject();
this.eventChange = new Subject();
this.eventClick = new Subject();
this.eventDeleteClick = new Subject();
this.eventEditClick = new Subject();
}
refreshDate(date) {
date && this.refershRequest.next(date);
}
changeLocale(locale) {
this.schedulerLocale = locale || this._defaultLocale;
this.locale.next(this.schedulerLocale);
}
eventChanged(event) {
event && this.eventChange.next(event);
}
eventClicked(event) {
event && this.eventClick.next(event);
}
getEventsForMonth(month) {
let result = [];
this.axEvents.some(m => {
if (m.month === month + 1) {
result = m.events;
return true;
}
return false;
});
return result;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerService, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class AxiomSchedulerComponentCommon {
injector;
axStartDate;
axEventTemplate;
axEventFormatter;
axDragStep;
axLocale;
axEventToolbar;
today;
date;
service;
sidebarService;
subscriptionGarbageCollection = [];
constructor(injector) {
this.injector = injector;
this.today = moment();
this.service = this.injector.get(AxiomSchedulerService);
this.sidebarService = this.injector.get(AxiomSchedulerSidebarService);
this.subscriptionGarbageCollection.push(this.service.refershRequest.subscribe((s) => {
if (s) {
this.date = s.clone();
this.date.locale(this.service.schedulerLocale);
this.refreshView();
}
}));
this.subscriptionGarbageCollection.push(this.service.locale.pipe(distinct()).subscribe((locale) => {
moment.locale(locale);
if (this.date) {
this.date.locale(this.service.schedulerLocale);
this.refreshView();
}
}));
}
refreshDate(axStartDate) {
this.date = axStartDate ? moment(axStartDate) : moment(Date.now());
}
refreshView() { }
ngOnDestroy() {
if (Array.isArray(this.subscriptionGarbageCollection)) {
this.subscriptionGarbageCollection.forEach(g => g && g.unsubscribe());
}
this.baseDestroy();
}
baseDestroy() { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerComponentCommon, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerComponentCommon, selector: "ng-component", inputs: { axStartDate: "axStartDate", axEventTemplate: "axEventTemplate", axEventFormatter: "axEventFormatter", axDragStep: "axDragStep", axLocale: "axLocale", axEventToolbar: "axEventToolbar" }, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerComponentCommon, decorators: [{
type: Component,
args: [{
template: '',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { axStartDate: [{
type: Input
}], axEventTemplate: [{
type: Input
}], axEventFormatter: [{
type: Input
}], axDragStep: [{
type: Input
}], axLocale: [{
type: Input
}], axEventToolbar: [{
type: Input
}] } });
class AxiomSchedulerYearViewMonthObject {
month;
days;
monthWeeks = [];
constructor(month) {
this.month = month.clone();
this.setDays();
}
setDays() {
const monthSize = 42;
const startOfMonth = this.month.clone().startOf('month');
const endOfMonth = this.month.clone().endOf('month');
this.days = [];
let day = startOfMonth.clone();
while (day <= endOfMonth) {
this.days.push(day);
day = day.clone().add(1, 'd');
}
this.setMonthWeeks(startOfMonth, endOfMonth);
// Solo si empieza en lunes el mes no se anhade ningun dia anterior
if (startOfMonth.clone().get('d') > 1 || startOfMonth.clone().get('d') === 0) {
day = startOfMonth.clone();
while (day.get('d') > 1 || day.get('d') === 0) {
day = day.clone().add(-1, 'days');
this.days.unshift(day);
}
}
if (this.days.length < monthSize) {
const size = (monthSize - this.days.length);
for (let index = 1; index <= size; index++) {
this.days.push(endOfMonth.clone().add(index, 'days'));
}
}
}
setMonthWeeks(startOfMonth, endOfMonth) {
let day = startOfMonth.clone();
const set = new Set();
const date = startOfMonth.clone().startOf('year');
// El domingo es el 0 por lo que lo controlamos especificamente
let yearStartDays = date.get('d');
if (yearStartDays === 0) {
yearStartDays = 6;
}
else {
yearStartDays -= 1;
}
while (day <= endOfMonth) {
set.add(Math.ceil((day.dayOfYear() + yearStartDays) / 7));
day = day.add(1, 'd');
}
this.monthWeeks = Array.from(set);
}
}
class AxiomSchedulerMonthTileDayComponent extends AxiomSchedulerComponentCommon {
_renderer;
_element;
day;
events = [];
constructor(injector, _renderer, _element) {
super(injector);
this._renderer = _renderer;
this._element = _element;
}
ngOnInit() {
this.refreshDate();
this.refreshView();
}
showEventsDialog() {
if (this.events && this.events.length > 0) {
this.sidebarService.open({ title: `${this.day.format('DD MMMM YYYY')}`, events: this.events });
}
}
refreshView() {
this.checkEvents();
// const text = `${this.events.length} event${this.events.length > 1 ? 's' : ''}, Click to show detail...`;
// this._renderer.setAttribute(this._element.nativeElement, 'title', text);
}
checkEvents() {
this.events = [];
const startOfDay = this.day.clone().startOf('day');
this.service.getEventsForMonth(this.day.get('month')).forEach(ev => {
if (ev.date && moment(ev.date).isSame(startOfDay, 'day')) {
this.events.push(ev);
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerMonthTileDayComponent, deps: [{ token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerMonthTileDayComponent, selector: "[ax-scheduler-month-tile-day]", inputs: { day: "day" }, host: { listeners: { "click": "showEventsDialog()" }, properties: { "class.hasEvent": "events.length > 0" }, classAttribute: "ax-scheduler__year-view__month__day" }, usesInheritance: true, ngImport: i0, template: "\n{{ day.format('DD') }}\n", styles: [""], animations: [
trigger('dialogAnimation', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate(`${190}ms ease-in`, style({ transform: 'scale(1.1)' })),
animate(`${100}ms ease-in`, style({ transform: 'scale(1)' }))
]),
transition(':leave', [
animate(`${80}ms ease-in-out`, style({ transform: 'scale(0)' }))
])
])
], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerMonthTileDayComponent, decorators: [{
type: Component,
args: [{ selector: '[ax-scheduler-month-tile-day]', encapsulation: ViewEncapsulation.None, host: {
'class': 'ax-scheduler__year-view__month__day',
'[class.hasEvent]': 'events.length > 0',
'(click)': 'showEventsDialog()'
}, animations: [
trigger('dialogAnimation', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate(`${190}ms ease-in`, style({ transform: 'scale(1.1)' })),
animate(`${100}ms ease-in`, style({ transform: 'scale(1)' }))
]),
transition(':leave', [
animate(`${80}ms ease-in-out`, style({ transform: 'scale(0)' }))
])
])
], standalone: false, template: "\n{{ day.format('DD') }}\n" }]
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { day: [{
type: Input
}] } });
class AxiomSchedulerMonthTileComponent extends AxiomSchedulerComponentCommon {
monthObject;
weekDays;
constructor(injector) {
super(injector);
}
ngOnInit() {
this.refreshDate();
}
refreshView() {
this.monthObject.month = this.date.startOf('months');
this.monthObject.setDays();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerMonthTileComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerMonthTileComponent, selector: "[ax-scheduler-month-tile]", inputs: { monthObject: "monthObject", weekDays: "weekDays" }, host: { classAttribute: "ax-scheduler__year-view__month" }, usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"ax-scheduler__year-view__month__header\">\n {{ monthObject.month.format('MMMM') }}\n</div>\n<div class=\"ax-scheduler__year-view__content\">\n <div class=\"ax-scheduler__year-view__content_weekNumbers\">\n <div *ngFor=\"let dayLetter of monthObject.monthWeeks\">\n <span>\n {{dayLetter}}\n </span> \n </div>\n </div>\n <div class=\"ax-scheduler__year-view__month__body\">\n <div class=\"ax-scheduler__year-header\" *ngFor=\"let dayLetter of weekDays\">\n <span class=\"ax-scheduler__year-view__header__day\">\n {{dayLetter}}\n </span> \n </div>\n <div *ngFor=\"let day of monthObject.days\" class=\"ax-scheduler__year-data\" \n [ngClass]=\"{ 'today' : day.isSame(today,'days') , 'current' : day.isSame(monthObject.month,'months') }\">\n <span ax-scheduler-month-tile-day *ngIf=\"day.isSame(monthObject.month,'months')\"\n [axEventTemplate] = \"axEventTemplate\"\n [axEventFormatter] = \"axEventFormatter\"\n [axDragStep]=\"axDragStep\"\n [axStartDate]=\"axStartDate\"\n [day]=\"day\"></span>\n </div>\n </div>\n</div>", styles: [""], 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: "component", type: AxiomSchedulerMonthTileDayComponent, selector: "[ax-scheduler-month-tile-day]", inputs: ["day"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerMonthTileComponent, decorators: [{
type: Component,
args: [{ selector: '[ax-scheduler-month-tile]', encapsulation: ViewEncapsulation.None, host: {
'class': 'ax-scheduler__year-view__month'
}, standalone: false, template: "\n\n<div class=\"ax-scheduler__year-view__month__header\">\n {{ monthObject.month.format('MMMM') }}\n</div>\n<div class=\"ax-scheduler__year-view__content\">\n <div class=\"ax-scheduler__year-view__content_weekNumbers\">\n <div *ngFor=\"let dayLetter of monthObject.monthWeeks\">\n <span>\n {{dayLetter}}\n </span> \n </div>\n </div>\n <div class=\"ax-scheduler__year-view__month__body\">\n <div class=\"ax-scheduler__year-header\" *ngFor=\"let dayLetter of weekDays\">\n <span class=\"ax-scheduler__year-view__header__day\">\n {{dayLetter}}\n </span> \n </div>\n <div *ngFor=\"let day of monthObject.days\" class=\"ax-scheduler__year-data\" \n [ngClass]=\"{ 'today' : day.isSame(today,'days') , 'current' : day.isSame(monthObject.month,'months') }\">\n <span ax-scheduler-month-tile-day *ngIf=\"day.isSame(monthObject.month,'months')\"\n [axEventTemplate] = \"axEventTemplate\"\n [axEventFormatter] = \"axEventFormatter\"\n [axDragStep]=\"axDragStep\"\n [axStartDate]=\"axStartDate\"\n [day]=\"day\"></span>\n </div>\n </div>\n</div>" }]
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { monthObject: [{
type: Input
}], weekDays: [{
type: Input
}] } });
class AxiomSchedulerEventComponent extends AxiomSchedulerComponentCommon {
_renderer;
_element;
event;
monthMode = false;
ctx;
fromTime;
toTime;
diff;
showTime = false;
expired = false;
timeout;
constructor(injector, _renderer, _element) {
super(injector);
this._renderer = _renderer;
this._element = _element;
}
ngOnInit() {
this.ctx = { item: this.event };
// this.applyColor();
}
ngAfterViewInit() {
}
refreshView() {
}
deleteEevent() {
this.service.eventDeleteClick.next(this.event);
}
editEevent() {
this.service.eventEditClick.next(this.event);
}
mouseDown(ev) {
ev && ev.preventDefault();
ev && ev.stopPropagation();
}
applyColor() {
if (this.event.color) {
this._renderer.setStyle(this._element.nativeElement, 'background', this.event.color);
}
}
toggleShowTime(toggle) {
if (toggle) {
this.timeout = setTimeout(() => {
this.showTime = toggle;
}, 200);
}
else {
clearTimeout(this.timeout);
this.showTime = toggle;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerEventComponent, deps: [{ token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerEventComponent, selector: "[ax-scheduler-event]", inputs: { event: "event", monthMode: "monthMode" }, host: { listeners: { "click": "service.eventClicked(event)" }, properties: { "class.expired": "expired" }, classAttribute: "ax-scheduler__event" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!monthMode && axEventTemplate\">\n <p [@timeAnimate] *ngIf=\"showTime\">\n <span>{{ fromTime && fromTime.format('HH:mm') }}</span>\n <span>{{ toTime && toTime.format('HH:mm') }}</span>\n </p>\n\n <div class=\"ax-scheduler__event__content\">\n <ng-container *ngTemplateOutlet=\"axEventTemplate;context:ctx\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"monthMode && axEventTemplate\">\n <div class=\"ax-scheduler__event__content\">\n <ng-container *ngTemplateOutlet=\"axEventTemplate;context:ctx\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"!axEventTemplate\">\n <p [@timeAnimate] *ngIf=\"showTime\">\n <span>{{ fromTime && fromTime.format('HH:mm') }}</span>\n <span>{{ toTime && toTime.format('HH:mm') }}</span>\n </p>\n <div class=\"ax-scheduler__event__content\">\n {{ event.title }}\n </div>\n</ng-container>\n\n<svg class=\"ax-lock-event\" *ngIf=\"event.locked\" style=\"enable-background:new 0 0 64 64;\" version=\"1.1\"\n viewBox=\"0 0 64 64\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g>\n <g id=\"Icon-Lock\" transform=\"translate(284.000000, 430.000000)\">\n <path class=\"st0\"\n d=\"M-237.7-401.3h-3v-6.4c0-6.2-5.1-11.3-11.3-11.3c-6.2,0-11.3,5.1-11.3,11.3v6.4h-3v-6.4 c0-7.9,6.4-14.3,14.3-14.3s14.3,6.4,14.3,14.3V-401.3\"\n id=\"Fill-66\" />\n <path class=\"st0\"\n d=\"M-239.2-374.1h-25.6c-2.6,0-4.8-2.2-4.8-4.8v-19.2c0-2.6,2.2-4.8,4.8-4.8h25.6 c2.6,0,4.8,2.2,4.8,4.8v19.2C-234.4-376.2-236.6-374.1-239.2-374.1L-239.2-374.1z M-264.8-399.7c-0.9,0-1.6,0.7-1.6,1.6v19.2 c0,0.9,0.7,1.6,1.6,1.6h25.6c0.9,0,1.6-0.7,1.6-1.6v-19.2c0-0.9-0.7-1.6-1.6-1.6H-264.8L-264.8-399.7z\"\n id=\"Fill-67\" />\n <path class=\"st0\"\n d=\"M-248.8-393.3c0,1.8-1.4,3.2-3.2,3.2s-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2S-248.8-395-248.8-393.3 \"\n id=\"Fill-68\" />\n <polyline class=\"st0\" id=\"Fill-69\"\n points=\"-251.2,-393.3 -252.8,-393.3 -254.4,-383.7 -249.6,-383.7 -251.2,-393.3 \" />\n </g>\n </g>\n</svg>\n", styles: [".ax-scheduler__event{text-align:left;overflow:visible;cursor:pointer;position:relative}.ax-scheduler__event>.ax-scheduler__event__content{display:inline-block;vertical-align:middle;height:100%;position:relative;color:#444;font-size:13px;font-weight:400;margin:0 10px;padding:5px 8px;overflow:hidden}.ax-scheduler__event>p{vertical-align:top;display:inline-block;height:100%;width:50px;color:#fff;padding:0;margin:0;font-size:11px;position:absolute}.ax-scheduler__event>p>span{position:absolute;background:#333;color:#fff;padding:0 5px;left:-40px;border-radius:100px;z-index:200}.ax-scheduler__event>p>span:first-child{top:0}.ax-scheduler__event>p>span:last-child{bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
trigger('timeAnimate', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate(`${180}ms ease-in`, style({ transform: 'scale(1)' }))
]),
transition(':leave', [
animate(`${80}ms ease-out`, style({ opacity: '0' }))
])
])
], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerEventComponent, decorators: [{
type: Component,
args: [{ selector: '[ax-scheduler-event]', encapsulation: ViewEncapsulation.None, host: {
'class': 'ax-scheduler__event',
'[class.expired]': 'expired',
'(click)': 'service.eventClicked(event)'
}, animations: [
trigger('timeAnimate', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate(`${180}ms ease-in`, style({ transform: 'scale(1)' }))
]),
transition(':leave', [
animate(`${80}ms ease-out`, style({ opacity: '0' }))
])
])
], standalone: false, template: "<ng-container *ngIf=\"!monthMode && axEventTemplate\">\n <p [@timeAnimate] *ngIf=\"showTime\">\n <span>{{ fromTime && fromTime.format('HH:mm') }}</span>\n <span>{{ toTime && toTime.format('HH:mm') }}</span>\n </p>\n\n <div class=\"ax-scheduler__event__content\">\n <ng-container *ngTemplateOutlet=\"axEventTemplate;context:ctx\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"monthMode && axEventTemplate\">\n <div class=\"ax-scheduler__event__content\">\n <ng-container *ngTemplateOutlet=\"axEventTemplate;context:ctx\">\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"!axEventTemplate\">\n <p [@timeAnimate] *ngIf=\"showTime\">\n <span>{{ fromTime && fromTime.format('HH:mm') }}</span>\n <span>{{ toTime && toTime.format('HH:mm') }}</span>\n </p>\n <div class=\"ax-scheduler__event__content\">\n {{ event.title }}\n </div>\n</ng-container>\n\n<svg class=\"ax-lock-event\" *ngIf=\"event.locked\" style=\"enable-background:new 0 0 64 64;\" version=\"1.1\"\n viewBox=\"0 0 64 64\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g>\n <g id=\"Icon-Lock\" transform=\"translate(284.000000, 430.000000)\">\n <path class=\"st0\"\n d=\"M-237.7-401.3h-3v-6.4c0-6.2-5.1-11.3-11.3-11.3c-6.2,0-11.3,5.1-11.3,11.3v6.4h-3v-6.4 c0-7.9,6.4-14.3,14.3-14.3s14.3,6.4,14.3,14.3V-401.3\"\n id=\"Fill-66\" />\n <path class=\"st0\"\n d=\"M-239.2-374.1h-25.6c-2.6,0-4.8-2.2-4.8-4.8v-19.2c0-2.6,2.2-4.8,4.8-4.8h25.6 c2.6,0,4.8,2.2,4.8,4.8v19.2C-234.4-376.2-236.6-374.1-239.2-374.1L-239.2-374.1z M-264.8-399.7c-0.9,0-1.6,0.7-1.6,1.6v19.2 c0,0.9,0.7,1.6,1.6,1.6h25.6c0.9,0,1.6-0.7,1.6-1.6v-19.2c0-0.9-0.7-1.6-1.6-1.6H-264.8L-264.8-399.7z\"\n id=\"Fill-67\" />\n <path class=\"st0\"\n d=\"M-248.8-393.3c0,1.8-1.4,3.2-3.2,3.2s-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2S-248.8-395-248.8-393.3 \"\n id=\"Fill-68\" />\n <polyline class=\"st0\" id=\"Fill-69\"\n points=\"-251.2,-393.3 -252.8,-393.3 -254.4,-383.7 -249.6,-383.7 -251.2,-393.3 \" />\n </g>\n </g>\n</svg>\n", styles: [".ax-scheduler__event{text-align:left;overflow:visible;cursor:pointer;position:relative}.ax-scheduler__event>.ax-scheduler__event__content{display:inline-block;vertical-align:middle;height:100%;position:relative;color:#444;font-size:13px;font-weight:400;margin:0 10px;padding:5px 8px;overflow:hidden}.ax-scheduler__event>p{vertical-align:top;display:inline-block;height:100%;width:50px;color:#fff;padding:0;margin:0;font-size:11px;position:absolute}.ax-scheduler__event>p>span{position:absolute;background:#333;color:#fff;padding:0 5px;left:-40px;border-radius:100px;z-index:200}.ax-scheduler__event>p>span:first-child{top:0}.ax-scheduler__event>p>span:last-child{bottom:0}\n"] }]
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { event: [{
type: Input
}], monthMode: [{
type: Input
}] } });
class AxiomSchedulerSidebarComponent {
_element;
_sidebarService;
axEventTemplate;
axEventToolbar;
data;
destroyed = new ReplaySubject(1);
subs;
constructor(_element, _sidebarService) {
this._element = _element;
this._sidebarService = _sidebarService;
}
ngOnInit() {
this.subs = this._sidebarService.data.subscribe(data => {
this.data = data;
this.setEventObserver();
});
}
ngOnDestroy() {
this.destroyEventObserver();
this.subs && this.subs.unsubscribe();
}
close() {
this._sidebarService.close();
}
closeOnGlobalKeydown(event) {
if ((event.key || event.keyCode) === 27) {
this._sidebarService.close();
}
}
setEventObserver() {
this.destroyed = new ReplaySubject(1);
fromEvent(document, 'keydown').pipe(takeUntil(this.destroyed)).subscribe((event) => this.closeOnGlobalKeydown(event));
}
destroyEventObserver() {
if (this.destroyed) {
this.destroyed.next(true);
this.destroyed.complete();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerSidebarComponent, deps: [{ token: i0.ElementRef }, { token: AxiomSchedulerSidebarService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerSidebarComponent, selector: "[ax-scheduler-sidebar]", inputs: { axEventTemplate: "axEventTemplate", axEventToolbar: "axEventToolbar" }, host: { classAttribute: "ax-scheduler__sidebar" }, ngImport: i0, template: "<span class=\"ax-scheduler__close-button\" (click)=\"close()\">\u00D7</span>\n\n<h6 *ngIf=\"data\">{{ data.title }}</h6>\n\n<ng-container *ngIf=\"data\">\n\n <div [@slideInOutRight] *ngFor=\"let event of data.events\" [event]=\"event\" [monthMode]=\"true\"\n [axEventToolbar]=\"axEventToolbar\" [axEventTemplate]=\"axEventTemplate\" ax-scheduler-event></div>\n\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AxiomSchedulerEventComponent, selector: "[ax-scheduler-event]", inputs: ["event", "monthMode"] }], animations: [
trigger('slideInOutRight', [
transition(':enter', [
style({ transform: 'translateX(100%)' }),
animate(`${150}ms ease-in`, style({ transform: 'translateX(0%)' }))
]),
transition(':leave', [
animate(`${240}ms ease-out`, style({ transform: 'translateX(100%)' }))
])
])
], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerSidebarComponent, decorators: [{
type: Component,
args: [{ selector: '[ax-scheduler-sidebar]', encapsulation: ViewEncapsulation.None, host: {
'class': 'ax-scheduler__sidebar'
}, animations: [
trigger('slideInOutRight', [
transition(':enter', [
style({ transform: 'translateX(100%)' }),
animate(`${150}ms ease-in`, style({ transform: 'translateX(0%)' }))
]),
transition(':leave', [
animate(`${240}ms ease-out`, style({ transform: 'translateX(100%)' }))
])
])
], standalone: false, template: "<span class=\"ax-scheduler__close-button\" (click)=\"close()\">\u00D7</span>\n\n<h6 *ngIf=\"data\">{{ data.title }}</h6>\n\n<ng-container *ngIf=\"data\">\n\n <div [@slideInOutRight] *ngFor=\"let event of data.events\" [event]=\"event\" [monthMode]=\"true\"\n [axEventToolbar]=\"axEventToolbar\" [axEventTemplate]=\"axEventTemplate\" ax-scheduler-event></div>\n\n</ng-container>" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: AxiomSchedulerSidebarService }], propDecorators: { axEventTemplate: [{
type: Input
}], axEventToolbar: [{
type: Input
}] } });
class AxiomSchedulerYearViewComponent extends AxiomSchedulerComponentCommon {
months;
sidebar = false;
weekDays;
constructor(injector) {
super(injector);
}
ngOnInit() {
this.weekDays = Array.from(moment.localeData().weekdaysMin());
// Pasamos o domingo o final
this.weekDays.push(this.weekDays.shift());
this.subscriptionGarbageCollection.push(this.sidebarService.toggle.subscribe(toggle => {
this.sidebar = toggle;
}));
this.refreshDate();
this.refreshView();
}
refreshView() {
this.setMonths();
}
setMonths() {
const startMonth = this.date.clone().startOf('year');
const endMonth = this.date.clone().endOf('year');
this.months = [];
let month = startMonth.clone();
while (month <= endMonth) {
this.months.push(new AxiomSchedulerYearViewMonthObject(month));
month = month.clone().add(1, 'month');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerYearViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerYearViewComponent, selector: "[ax-scheduler-year-view]", host: { classAttribute: "ax-scheduler__year-view" }, usesInheritance: true, ngImport: i0, template: "\n<div *ngFor=\"let month of months\">\n <div ax-scheduler-month-tile\n [monthObject]=\"month\"\n [axEventTemplate] = \"axEventTemplate\"\n [axEventFormatter] = \"axEventFormatter\"\n [axDragStep]=\"axDragStep\"\n [axEventToolbar]=\"axEventToolbar\"\n [axStartDate]=\"axStartDate\"\n [weekDays]=\"weekDays\"></div>\n</div>\n\n\n<div ax-scheduler-sidebar *ngIf=\"sidebar\" [@slideInOutRight] [axEventTemplate]=\"axEventTemplate\" [axEventToolbar]=\"axEventToolbar\"></div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AxiomSchedulerMonthTileComponent, selector: "[ax-scheduler-month-tile]", inputs: ["monthObject", "weekDays"] }, { kind: "component", type: AxiomSchedulerSidebarComponent, selector: "[ax-scheduler-sidebar]", inputs: ["axEventTemplate", "axEventToolbar"] }], animations: [
trigger('slideInOutRight', [
transition(':enter', [
style({ transform: 'translateX(-100%)' }),
animate(`${120}ms ease-in-out`, style({ transform: 'translateX(0%)' }))
]),
transition(':leave', [
animate(`${100}ms ease-in-out`, style({ transform: 'translateX(100%)' }))
])
])
], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerYearViewComponent, decorators: [{
type: Component,
args: [{ selector: '[ax-scheduler-year-view]', encapsulation: ViewEncapsulation.None, host: {
'class': 'ax-scheduler__year-view'
}, animations: [
trigger('slideInOutRight', [
transition(':enter', [
style({ transform: 'translateX(-100%)' }),
animate(`${120}ms ease-in-out`, style({ transform: 'translateX(0%)' }))
]),
transition(':leave', [
animate(`${100}ms ease-in-out`, style({ transform: 'translateX(100%)' }))
])
])
], standalone: false, template: "\n<div *ngFor=\"let month of months\">\n <div ax-scheduler-month-tile\n [monthObject]=\"month\"\n [axEventTemplate] = \"axEventTemplate\"\n [axEventFormatter] = \"axEventFormatter\"\n [axDragStep]=\"axDragStep\"\n [axEventToolbar]=\"axEventToolbar\"\n [axStartDate]=\"axStartDate\"\n [weekDays]=\"weekDays\"></div>\n</div>\n\n\n<div ax-scheduler-sidebar *ngIf=\"sidebar\" [@slideInOutRight] [axEventTemplate]=\"axEventTemplate\" [axEventToolbar]=\"axEventToolbar\"></div>" }]
}], ctorParameters: () => [{ type: i0.Injector }] });
var AxiomSchedulerView;
(function (AxiomSchedulerView) {
AxiomSchedulerView["Year"] = "year";
})(AxiomSchedulerView || (AxiomSchedulerView = {}));
var AxiomSchedulerAnimation;
(function (AxiomSchedulerAnimation) {
AxiomSchedulerAnimation["Animation1"] = "animation1";
AxiomSchedulerAnimation["Animation2"] = "animation2";
AxiomSchedulerAnimation["Animation3"] = "animation3";
AxiomSchedulerAnimation["Animation4"] = "animation4";
AxiomSchedulerAnimation["Default"] = "default";
AxiomSchedulerAnimation["None"] = "none";
})(AxiomSchedulerAnimation || (AxiomSchedulerAnimation = {}));
class AxiomSchedulerComponent extends AxiomSchedulerComponentCommon {
_element;
_renderer;
axEvents;
axSchedulerView;
set axTheme(axTheme) {
this._axTheme = axTheme;
this.updateTheme(this._axTheme);
}
set axAnimation(axAnimation) {
this._axAnimation = axAnimation;
this.updateTheme(this._axTheme);
}
axShowLocale;
axViews;
axEventChange = new EventEmitter();
axEventClick = new EventEmitter();
axEventDeleteClick = new EventEmitter();
axEventEditClick = new EventEmitter();
axDateChange = new EventEmitter();
axViewChange = new EventEmitter();
items = [];
locales = AX_LOCALES.map((v) => {
return { id: v, title: v };
});
_axTheme;
_axAnimation;
constructor(injector, _element, _renderer) {
super(injector);
this._element = _element;
this._renderer = _renderer;
}
ngOnInit() {
this.axLocale = this.axLocale || 'en';
this.setListeners();
this.updateTheme(this._axTheme);
this.refreshDate();
this.setViews();
this.refreshScheduler();
}
refreshScheduler(refresh = false, events) {
this.setLocale(this.axLocale);
if (refresh) {
this.axEvents = events;
this.service.axEvents = events;
this.sidebarService.close();
}
else {
this.service.axEvents = this.axEvents;
}
this.service.refreshDate(this.date);
}
changeYear(step) {
this.step(step);
// this.service.refreshDate(this.date);
}
todayF() {
this.applyDefaultAnimations(this.date.clone().isBefore(moment()) ? 1 : -1);
this.date = moment();
this.service.refreshDate(this.date);
this.axDateChange && this.axDateChange.emit(this.date.clone().toDate());
}
modelFormatter(value) {
return value ? value.id : null;
}
setLocale(locale) {
this.service.changeLocale(locale);
}
updateTheme(theme) {
if (theme) {
this._renderer.removeClass(this._element.nativeElement, 'dark');
this._renderer.removeClass(this._element.nativeElement, 'light');
this._renderer.addClass(this._element.nativeElement, theme);
//
if (this._axAnimation === 'none') {
Object.values(AxiomSchedulerAnimation).forEach((animation) => {
this._renderer.removeClass(this._element.nativeElement, animation);
});
}
else {
Object.values(AxiomSchedulerAnimation).forEach((animation) => {
this._renderer.removeClass(this._element.nativeElement, animation);
});
this._renderer.addClass(this._element.nativeElement, this._axAnimation);
}
}
}
changeView(view) {
this.axSchedulerView = view.id;
this.axViewChange && this.axViewChange.emit(view.id);
}
step(step) {
switch (this.axSchedulerView) {
case AxiomSchedulerView.Year:
this.date = this.date.clone().add(step, 'years');
break;
}
this.applyDefaultAnimations(step);
this.axDateChange && this.axDateChange.emit(this.date.clone().toDate());
}
applyDefaultAnimations(step) {
if (this._axAnimation === AxiomSchedulerAnimation.Default) {
this._renderer.removeClass(this._element.nativeElement, 'forward');
this._renderer.removeClass(this._element.nativeElement, 'backward');
if (step > 0) {
this._renderer.addClass(this._element.nativeElement, 'forward');
}
else {
this._renderer.addClass(this._element.nativeElement, 'backward');
}
}
}
setViews() {
const def = [
{ id: AxiomSchedulerView.Year, title: 'Year' }
];
if (Array.isArray(this.axViews)) {
this.items = [...def.filter(i => this.axViews.indexOf(i.id) >= 0)];
}
else {
this.items = [...def];
}
if (!this.axSchedulerView) {
this.axSchedulerView = this.items[0].id;
}
}
setListeners() {
this.subscriptionGarbageCollection.push(this.service.eventChange.subscribe(event => {
this.axEventChange && this.axEventChange.emit(event);
}));
this.subscriptionGarbageCollection.push(this.service.eventClick.subscribe(event => {
this.axEventClick && this.axEventClick.emit(event);
}));
this.subscriptionGarbageCollection.push(this.service.eventDeleteClick.subscribe(event => {
this.axEventDeleteClick && this.axEventDeleteClick.emit(event);
}));
this.subscriptionGarbageCollection.push(this.service.eventEditClick.subscribe(event => {
this.axEventEditClick && this.axEventEditClick.emit(event);
}));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AxiomSchedulerComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AxiomSchedulerComponent, selector: "ax-scheduler", inputs: { axEvents: "axEvents", axSchedulerView: "axSchedulerView", axTheme: "axTheme", axAnimation: "axAnimation", axShowLocale: "axShowLocale", axViews: "axViews" }, outputs: { axEventChange: "axEventChange", axEventClick: "axEventClick", axEventDeleteClick: "axEventDeleteClick", axEventEditClick: "axEventEditClick", axDateChange: "axDateChange", axViewChange: "axViewChange" }, host: { classAttribute: "ax-scheduler" }, providers: [AxiomSchedulerService, AxiomSchedulerSidebarService], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler__base\">\n <div class=\"ax-scheduler__header\">\n <div class=\"ax-scheduler__header__date-part__nav\">\n <button (click)=\"changeYear(-1)\">\n <svg height=\"24px\" version=\"1.1\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n\n <g fill=\"none\" fill-rule=\"evenodd\" id=\"icon/chevron-back\" stroke=\"none\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" stroke-width=\"1\">\n <polyline id=\"lineart\" points=\"15.5 20.4751 6.5 11.4751 15.5 2.4751\" stroke=\"#000000\" />\n </g>\n </svg>\n </button>\n <div class=\"ax-scheduler__header__date-part__title\" (click)=\"changeYear(-2)\">\n <b>{{ date.clone().add(-2, 'years').format('YYYY') }}</b>\n </div>\n <div class=\"ax-scheduler__header__date-part__title\" (click)=\"changeYear(-1)\">\n <b>{{ date.clone().add(-1, 'years').format('YYYY') }}</b>\n </div>\n <div class=\"ax-scheduler__header__date-part__title selected\">\n <b>{{ date.format('YYYY') }}</b>\n </div>\n <div class=\"ax-scheduler__header__date-part__title\" (click)=\"changeYear(1)\">\n <b>{{ date.clone().add(1, 'years').format('YYYY') }}</b>\n </div>\n <div class=\"ax-scheduler__header__date-part__title\" (click)=\"changeYear(2)\">\n <b>{{ date.clone().add(2, 'years').format('YYYY') }}</b>\n </div>\n <button (click)=\"changeYear(1)\">\n <svg height=\"24px\" version=\"1.1\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g fill=\"none\" fill-rule=\"evenodd\" id=\"icon/chevron-forward\" stroke=\"none\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" stroke-width=\"1\">\n <polyline id=\"lineart\" points=\"7.5 20.4751 16.5 11.4751 7.5 2.4751\" stroke=\"#000000\" />\n </g>\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"ax-scheduler__body\">\n\n <div ax-scheduler-year-view [axEventTemplate]=\"axEventTemplate\" [axEventFormatter]=\"axEventFormatter\"\n [axDragStep]=\"axDragStep\" [axStartDate]=\"date.toDate()\" [axEventToolbar]=\"axEventToolbar\">\n\n </div>\n\n </div>\n</div>", styles: [".ax-scheduler__base *,.ax-scheduler__base *:before,.ax-scheduler__base *:after{box-sizing:border-box}.ax-scheduler__base html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ax-scheduler__base article,.ax-scheduler__base aside,.ax-scheduler__base figcaption,.ax-scheduler__base figure,.ax-scheduler__base footer,.ax-scheduler__base header,.ax-scheduler__base hgroup,.ax-scheduler__base main,.ax-scheduler__base nav,.ax-scheduler__base section{display:block}.ax-scheduler__base body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}.ax-scheduler__base [tabindex=\"-1\"]:focus:not(:focus-visible){outline:0!important}.ax-scheduler__base hr{box-sizing:content-box;height:0;overflow:visible}.ax-scheduler__base h1,.ax-scheduler__base h2,.ax-scheduler__base h3,.ax-scheduler__base h4,.ax-scheduler__base h5,.ax-scheduler__base h6{margin-top:0;margin-bottom:.5rem}.ax-scheduler__base p{margin-top:0;margin-bottom:1rem}.ax-scheduler__base abbr[title],.ax-scheduler__base abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}.ax-scheduler__base address{margin-bottom:1rem;font-style:normal;line-height:inherit}.ax-scheduler__base ol,.ax-scheduler__base ul,.ax-scheduler__base dl{margin-top:0;margin-bottom:1rem}.ax-scheduler__base ol ol,.ax-scheduler__base ul ul,.ax-scheduler__base ol ul,.ax-scheduler__base ul ol{margin-bottom:0}.ax-scheduler__base dt{font-weight:700}.ax-scheduler__base dd{margin-bottom:.5rem;margin-left:0}.ax-scheduler__base blockquote{margin:0 0 1rem}.ax-scheduler__base b,.ax-scheduler__base strong{font-weight:bolder}.ax-scheduler__base small{font-size:80%}.ax-scheduler__base sub,.ax-scheduler__base sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}.ax-scheduler__base sub{bottom:-.25em}.ax-scheduler__base sup{top:-.5em}.ax-scheduler__base a{color:#007bff;text-decoration:none;background-color:transparent}.ax-scheduler__base a:hover{color:#0056b3;text-decoration:underline}.ax-scheduler__base a:not([href]):not([class]){color:inherit;text-decoration:none}.ax-scheduler__base a:not([href]):not([class]):hover{color:inherit;text-decoration:none}.ax-scheduler__base pre,.ax-scheduler__base code,.ax-scheduler__base kbd,.ax-scheduler__base samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}.ax-scheduler__base pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}.ax-scheduler__base figure{margin:0 0 1rem}.ax-scheduler__base img{vertical-align:middle;border-style:none}.ax-scheduler__base svg{overflow:hidden;vertical-align:middle}.ax-scheduler__base table{border-collapse:collapse}.ax-scheduler__base caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}.ax-scheduler__base th{text-align:inherit;text-align:-webkit-match-parent}.ax-scheduler__base label{display:inline-block;margin-bottom:.5rem}.ax-scheduler__base button{border-radius:0}.ax-scheduler__base button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.ax-scheduler__base input,.ax-scheduler__base button,.ax-scheduler__base select,.ax-scheduler__base optgroup,.ax-scheduler__base textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}.ax-scheduler__base