ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
715 lines • 56.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, Pipe, NgModule } from '@angular/core';
import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { DateTime } from 'luxon';
import { takeUntil } from 'rxjs/operators';
import * as i1 from 'ngx-gem-spaas';
import { BaseComponent } from 'ngx-gem-spaas';
import { ReplaySubject } from 'rxjs';
import * as i2 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatLuxonDateModule, MAT_LUXON_DATE_ADAPTER_OPTIONS, LuxonDateAdapter } from '@angular/material-luxon-adapter';
import * as i6 from '@angular/material/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import * as i1$1 from '@angular/forms';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i4 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i5 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i3$1 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
class DateModel {
static setLabels(date, byMins) {
const labels = [];
let from = DateTime.fromISO(date).startOf('day');
const to = DateTime.fromISO(date).endOf('day');
while (from < to) {
labels.push(from.toUTC().toISO() || 'invalid date');
from = from.plus({ minutes: byMins });
}
return labels;
}
constructor(date) {
this.intraDayLabelsH = [];
this.intraDayLabelsS = [];
this.intraDayLabelsQ = [];
this.intraDayNumH = 0;
this.dayAhead = '';
this.dayAheadLabelsH = [];
this.dayAheadLabelsS = [];
this.dayAheadLabelsQ = [];
this.dayAheadNumH = 0;
let dt = DateTime.fromISO(date).startOf('day').toUTC();
if (!dt.isValid) {
dt = DateTime.now().startOf('day');
}
this.intraDay = dt.toISO();
this.calcFields();
}
calcFields() {
// intra-day
this.intraDayNumH = this.calcHours(this.intraDay);
this.intraDayLabelsH = DateModel.setLabels(this.intraDay, 60);
this.intraDayLabelsS = DateModel.setLabels(this.intraDay, 30);
this.intraDayLabelsQ = DateModel.setLabels(this.intraDay, 15);
// day-ahead
this.dayAhead = DateTime.fromISO(this.intraDay).plus({ days: 1 }).toUTC().toISO() || 'invalid date';
this.dayAheadNumH = this.calcHours(this.dayAhead);
this.dayAheadLabelsH = DateModel.setLabels(this.dayAhead, 60);
this.dayAheadLabelsS = DateModel.setLabels(this.dayAhead, 30);
this.dayAheadLabelsQ = DateModel.setLabels(this.dayAhead, 15);
}
calcHours(date) {
const startOfDate = DateTime.fromISO(date).startOf('day');
return startOfDate.plus({ days: 1 }).startOf('day').diff(startOfDate, 'hours').toObject().hours;
}
}
class DateService {
static calcIdx(from, ts, granularity, setToStartOfDay = true) {
switch (granularity) {
case 15:
return DateService.calcIdxQ(from, ts, setToStartOfDay);
case 30:
return DateService.calcIdxS(from, ts, setToStartOfDay);
case 60:
return DateService.calcIdxH(from, ts, setToStartOfDay);
}
}
static calcIdxH(from, ts, setToStartOfDay = true) {
const fromDt = setToStartOfDay ? DateTime.fromISO(from).startOf('day').toUTC() : DateTime.fromISO(from).toUTC();
return Math.floor(DateTime.fromISO(ts).toUTC().diff(fromDt, 'hours').toObject().hours);
}
static calcIdxS(from, ts, setToStartOfDay = true) {
const hours = DateService.calcIdxH(from, ts, setToStartOfDay);
const minutes = DateTime.fromISO(ts).toUTC().minute;
return Math.floor(hours * 2 + minutes / 30);
}
static calcIdxQ(from, ts, setToStartOfDay = true) {
const hours = DateService.calcIdxH(from, ts, setToStartOfDay);
const minutes = DateTime.fromISO(ts).toUTC().minute;
return hours * 4 + minutes / 15;
}
static calcQinH(ts) {
return Math.floor(DateTime.fromISO(ts).minute / 15);
}
constructor(ssService) {
this.ssService = ssService;
this.date$ = new ReplaySubject(0);
this.SS_DATE = 'date';
const date = this.ssService.getItem(this.SS_DATE);
this.date = new DateModel(date.intraDay || DateTime.now().toISO());
this.newDate(this.date);
}
// ********************************************************************************************************
// BROADCAST DATA
// ********************************************************************************************************
newDate(newDate) {
newDate.calcFields();
this.ssService.setItem(this.SS_DATE, newDate);
this.date$.next(newDate);
this.date = newDate;
}
onNewDate() {
return this.date$.asObservable();
}
getDate() {
return this.date;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateService, deps: [{ token: i1.SessionStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.SessionStorageService }] });
/** An inline calendar which is hooked up directly to the date service */
class CalendarComponent extends BaseComponent {
constructor(dateService) {
super();
this.dateService = dateService;
/** The title (H1) to be displayed above the calendar */
this.title = '';
/** A custom function to limit which dates can be chosen.
* Takes DateTime as input and should return a boolean. */
this.dateConstraint = () => {
return true;
};
this.curDate = new DateModel(DateTime.now().toISO());
this.selDate = null;
this.getDate();
}
// ********************************************************************************************************
// LOAD DATA
// ********************************************************************************************************
getDate() {
this.dateService.onNewDate()
.pipe(takeUntil(this.onDestroy$))
.subscribe((date) => {
this.curDate = date;
this.selDate = DateTime.fromISO(date.intraDay);
});
}
// ********************************************************************************************************
// UI
// ********************************************************************************************************
onChangeDate(e) {
// should be a DateTime object, but check anyway
if (e?.toISO()) {
this.curDate.intraDay = e.toUTC().toISO();
this.dateService.newDate(this.curDate);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [{ token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CalendarComponent, selector: "spaas-calendar", inputs: { title: "title", dateConstraint: "dateConstraint" }, usesInheritance: true, ngImport: i0, template: "<div class=\"calendar pad-big-top\">\r\n @if (title) {\r\n <h1>{{ title }}</h1>\r\n }\r\n <mat-calendar (selectedChange)=\"onChangeDate($event)\"\r\n [dateFilter]=\"dateConstraint\"\r\n [selected]=\"selDate\"\r\n [startAt]=\"selDate\">\r\n </mat-calendar>\r\n</div>\r\n", styles: [".calendar{min-width:264px}\n"], dependencies: [{ kind: "component", type: i2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-calendar', template: "<div class=\"calendar pad-big-top\">\r\n @if (title) {\r\n <h1>{{ title }}</h1>\r\n }\r\n <mat-calendar (selectedChange)=\"onChangeDate($event)\"\r\n [dateFilter]=\"dateConstraint\"\r\n [selected]=\"selDate\"\r\n [startAt]=\"selDate\">\r\n </mat-calendar>\r\n</div>\r\n", styles: [".calendar{min-width:264px}\n"] }]
}], ctorParameters: () => [{ type: DateService }], propDecorators: { title: [{
type: Input
}], dateConstraint: [{
type: Input
}] } });
class ContractLabelService {
static fromH01toH24(ts) {
return (DateTime.fromISO(ts).hour + 1).toFixed(0).padStart(3, 'H0');
}
static fromS01toS48(ts) {
const dt = DateTime.fromISO(ts);
return ((dt.hour * 2 + 1) + (dt.minute / 30)).toFixed(0).padStart(3, 'S0');
}
static from00H1to23H2(ts) {
const dt = DateTime.fromISO(ts);
return dt.toFormat('HH\'H\'') + (dt.minute / 30 + 1);
}
static from00Q1to23Q4(ts) {
const dt = DateTime.fromISO(ts);
return dt.toFormat(`HH'Q'`) + (dt.minute / 15 + 1);
}
static dstSuffixOct(ts) {
const dt = DateTime.fromISO(ts);
const hoursInDay = dt.plus({ days: 1 }).startOf('day').diff(dt.startOf('day'), 'hours').toObject().hours;
if (hoursInDay === 25 && dt.hour === 2) {
return dt.toUTC().hour === 0 ? 'A' : 'B';
}
return '';
}
static epexHourInc(ts) {
const dt = DateTime.fromISO(ts);
const hoursInDay = dt.plus({ days: 1 }).startOf('day').diff(dt.startOf('day'), 'hours').toObject().hours;
if (hoursInDay === 23 && dt.toUTC().hour === 0) {
return 2;
}
return 1;
}
static getContractLabel(ts, type) {
switch (type) {
// EPEX
case 'epexH':
// 00-01 - 23-00 (DST: 01-03, 02-03A, 02-03B)
const h = DateTime.fromISO(ts).hour;
const inc = this.epexHourInc(ts);
return h.toString().padStart(2, '0') + '-' +
(h + inc).toString().replace('24', '0').padStart(2, '0') +
this.dstSuffixOct(ts);
case 'epexS':
// 00H1 - 23H2 (DST: 02H1A - 02H2B)
return this.from00H1to23H2(ts) + this.dstSuffixOct(ts);
case 'epexQ':
// 00Q1 - 23Q4 (DST: 02Q1A - 02Q4B)
return this.from00Q1to23Q4(ts) + this.dstSuffixOct(ts);
// VNET
case 'vnetH':
// H01 - H24 (DST: H03A, H03B)
return this.fromH01toH24(ts) + this.dstSuffixOct(ts);
case 'vnetS':
// S01 - S48 (DST: S06A - S06B)
return this.fromS01toS48(ts) + this.dstSuffixOct(ts);
case 'vnetQ':
// SAME AS EPEX: 00Q1 - 23Q4 (DST: 02Q1A - 02Q4B)
return this.from00Q1to23Q4(ts) + this.dstSuffixOct(ts);
// BOOKING
case 'bookH':
// SAMES AS VNET: H01 - H24 (DST: H03A, H03B)
return this.fromH01toH24(ts) + this.dstSuffixOct(ts);
case 'bookS':
// SAME AS VNET: S01 - S48 (DST: S05A - S06B)
return this.fromS01toS48(ts) + this.dstSuffixOct(ts);
case 'bookQ':
// Q01 - Q96
const dt = DateTime.fromISO(ts);
return (dt.hour * 4) + (dt.minute / 15 + 1).toFixed(0).padStart(2, 'Q0') + this.dstSuffixOct(ts);
default:
return '';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContractLabelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContractLabelService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContractLabelService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class TsToContractPipe {
transform(ts, gran = 60) {
if (!ts) {
return '';
}
const labelType = gran === 60 ? 'vnetH' : gran === 30 ? 'epexS' : 'epexQ';
return ContractLabelService.getContractLabel(ts, labelType);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsToContractPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TsToContractPipe, name: "tsToContract" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TsToContractPipe, decorators: [{
type: Pipe,
args: [{ name: 'tsToContract' }]
}] });
class IdxToHPipe {
transform(idx, refDate, gran = 60) {
if (idx === null) {
return 0;
}
const dt = DateTime.fromISO(refDate).startOf('day').plus({ minutes: idx * gran });
return dt.hour;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdxToHPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IdxToHPipe, name: "idxToH" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdxToHPipe, decorators: [{
type: Pipe,
args: [{ name: 'idxToH' }]
}] });
class IdxToTsPipe {
transform(idx, refDate, gran = 60, withDate = false, customFormat = '') {
if (idx === null) {
return '';
}
const dt = DateTime.fromISO(refDate || '').startOf('day').plus({ minutes: idx * gran });
const fmt = customFormat || (withDate ? 'DD/MM HH:mm' : 'HH:mm');
return dt.toFormat(fmt) + ContractLabelService.dstSuffixOct(dt.toISO() || '');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdxToTsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IdxToTsPipe, name: "idxToTs" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdxToTsPipe, decorators: [{
type: Pipe,
args: [{ name: 'idxToTs' }]
}] });
class IdOrDaPipe {
constructor(dateService) {
this.dateService = dateService;
}
transform(ts, withIdString = true) {
const date = this.dateService.getDate().intraDay;
const idString = withIdString ? 'ID' : '';
if (!ts || !date) {
return '';
}
return DateTime.fromISO(ts).day !== DateTime.fromISO(date).startOf('day').day ? 'DA' : idString;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdOrDaPipe, deps: [{ token: DateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IdOrDaPipe, name: "idOrDa" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IdOrDaPipe, decorators: [{
type: Pipe,
args: [{ name: 'idOrDa' }]
}], ctorParameters: () => [{ type: DateService }] });
class DateIndicatorComponent extends BaseComponent {
constructor(dateService) {
super();
this.dateService = dateService;
this.curDate = new DateModel(DateTime.now().toISO());
this.getDate();
}
// ********************************************************************************************************
// LOAD DATA
// ********************************************************************************************************
getDate() {
this.dateService.onNewDate()
.pipe(takeUntil(this.onDestroy$))
.subscribe((date) => {
this.curDate = date;
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateIndicatorComponent, deps: [{ token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateIndicatorComponent, selector: "spaas-date-indicator", usesInheritance: true, ngImport: i0, template: "<div class=\"date-indicator txt-center\">\r\n <div>{{curDate.intraDay | date:'dd'}}</div>\r\n <div>{{curDate.intraDay | date:'MM'}}</div>\r\n</div>\r\n", styles: [".date-indicator{font-family:Lato,Arial,sans-serif;font-size:12px;font-weight:700;line-height:14px}.date-indicator:hover>div:after{background-color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)!important}.date-indicator>div{position:relative}.date-indicator>div:first-of-type:after{background-color:hsla(var(--color-h),var(--color-s),var(--color-l),1);bottom:-1px;content:\"\";height:1px;left:20%;position:absolute;transition:background-color .4s;width:60%}\n"], dependencies: [{ kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateIndicatorComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-date-indicator', template: "<div class=\"date-indicator txt-center\">\r\n <div>{{curDate.intraDay | date:'dd'}}</div>\r\n <div>{{curDate.intraDay | date:'MM'}}</div>\r\n</div>\r\n", styles: [".date-indicator{font-family:Lato,Arial,sans-serif;font-size:12px;font-weight:700;line-height:14px}.date-indicator:hover>div:after{background-color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)!important}.date-indicator>div{position:relative}.date-indicator>div:first-of-type:after{background-color:hsla(var(--color-h),var(--color-s),var(--color-l),1);bottom:-1px;content:\"\";height:1px;left:20%;position:absolute;transition:background-color .4s;width:60%}\n"] }]
}], ctorParameters: () => [{ type: DateService }] });
/** A stand-alone date picker (not hooked up to the date service) */
class DatePickerComponent extends BaseComponent {
constructor() {
super();
/** The label to be displayed in the form field (optional) */
this.label = '';
/** Whether to also show the time-fields. Default is false. */
this.withTime = false;
/** Your formcontrol of type DateTime. Will be updated directly by the date picker */
this.fcDate = new FormControl(DateTime.now());
/** Whether to allow manual keyboard input */
this.allowManualInput = false;
/** Minimum date in luxon DateTime */
this.minDate = null;
/** Maximum date in luxon DateTime */
this.maxDate = null;
/** A custom function to limit which dates can be chosen.
* Takes DateTime as input and should return a boolean. */
this.dateConstraint = () => {
return true;
};
this.dateStart = this.fcDate.value.toISO();
this.hour = 0;
this.allHours = [];
this.minute = 0;
this.allMinutes = [];
}
ngOnInit() {
this.onDateChange();
this.fcDate.valueChanges
.pipe(takeUntil(this.onDestroy$))
.subscribe(() => this.onDateChange());
}
// ********************************************************************************************************
// LOAD DATA
// ********************************************************************************************************
// ********************************************************************************************************
// UI
// ********************************************************************************************************
onHourOrMinuteChange() {
if (this.fcDate.valid) {
let dt = this.fcDate.value;
this.fcDate.patchValue(dt.startOf('day').plus({ minute: this.hour * 60 + this.minute }));
}
}
onDateChange() {
this.allMinutes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59];
if (this.fcDate.valid) {
this.hour = this.fcDate.value?.hour || 0;
this.minute = this.fcDate.value?.minute || 0;
const startOfDate = this.fcDate.value.startOf('day');
this.dateStart = startOfDate.toISO();
this.allHours = new Array(startOfDate.plus({ days: 1 }).startOf('day').diff(startOfDate, 'hours').toObject().hours).fill(0).map((_, i) => i);
// correct arrays and hours/minutes in case of minDate/maxDate
if (this.minDate && this.fcDate.value.day === this.minDate.day) {
this.allHours = this.allHours.filter((a) => a >= (this.minDate?.hour || 0));
this.allMinutes = this.allMinutes.filter((a) => a >= (this.minDate?.minute || 0));
this.hour = Math.max(this.hour, this.allHours[0]);
this.minute = Math.max(this.minute, this.allMinutes[0]);
}
else if (this.maxDate && this.fcDate.value.day === this.maxDate.day) {
this.allHours = this.allHours.filter((a) => a <= (this.maxDate?.hour || 0));
this.allMinutes = this.allMinutes.filter((a) => a <= (this.maxDate?.minute || 0));
this.hour = Math.min(this.hour, this.allHours[0]);
this.minute = Math.min(this.minute, this.allMinutes[0]);
}
}
else {
this.fcDate.markAsTouched();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DatePickerComponent, selector: "spaas-date-picker", inputs: { label: "label", withTime: "withTime", fcDate: "fcDate", allowManualInput: "allowManualInput", minDate: "minDate", maxDate: "maxDate", dateConstraint: "dateConstraint" }, usesInheritance: true, ngImport: i0, template: "<div [style.--dp-min-width]=\"withTime ? '254px' : '154px'\"\r\n class=\"date-picker flex\">\r\n\r\n <mat-form-field class=\"grow-h\">\r\n @if (label) {\r\n <mat-label>{{ label }}</mat-label>\r\n }\r\n <input [formControl]=\"fcDate\"\r\n [matDatepicker]=\"picker\"\r\n [matDatepickerFilter]=\"dateConstraint\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n matInput\r\n [readonly]=\"!allowManualInput\">\r\n <mat-datepicker-toggle [for]=\"picker\" matIconPrefix></mat-datepicker-toggle>\r\n <mat-datepicker #picker [disabled]=\"false\"></mat-datepicker>\r\n <mat-error>\r\n @if (fcDate.hasError('matDatepickerMin') || fcDate.hasError('matDatepickerMax') || fcDate.hasError('matDatepickerFilter')) {\r\n date is not within the correct range\r\n } @else {\r\n invalid date (yyyy-mm-dd expected)\r\n }\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n @if (withTime) {\r\n <div [style.--dp-time-top]=\"label ? '19px' : '11px'\"\r\n class=\"timefields flex\">\r\n <div>\r\n <mat-select (selectionChange)=\"onHourOrMinuteChange()\"\r\n [(ngModel)]=\"hour\"\r\n [disabled]=\"!fcDate.valid\"\r\n [hideSingleSelectionIndicator]=\"true\">\r\n @for (hour of allHours; track hour) {\r\n <mat-option [value]=\"hour\">\r\n {{ hour | idxToTs:dateStart:60:false:'HH' }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </div>\r\n <div>\r\n <mat-select (selectionChange)=\"onHourOrMinuteChange()\"\r\n [(ngModel)]=\"minute\"\r\n [disabled]=\"!fcDate.valid\"\r\n [hideSingleSelectionIndicator]=\"true\">\r\n @for (min of allMinutes; track min) {\r\n <mat-option [value]=\"min\">\r\n {{ min | number:'2.0-0' }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".date-picker{min-width:var(--dp-min-width);position:relative}.date-picker .timefields{position:absolute;left:134px;top:var(--dp-time-top)}.date-picker .timefields>div{position:relative}.date-picker .timefields>div:before{color:hsla(var(--color-h),var(--color-s),var(--color-l),.6);font-size:12px;left:0;position:absolute;text-align:center;top:-12px;width:54px}.date-picker .timefields>div:nth-of-type(1):before{content:\"hour\"}.date-picker .timefields>div:nth-of-type(2):before{content:\"minute\"}.date-picker .timefields>div .mat-mdc-select{text-align:center;width:54px}\n"], dependencies: [{ kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: IdxToTsPipe, name: "idxToTs" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-date-picker', template: "<div [style.--dp-min-width]=\"withTime ? '254px' : '154px'\"\r\n class=\"date-picker flex\">\r\n\r\n <mat-form-field class=\"grow-h\">\r\n @if (label) {\r\n <mat-label>{{ label }}</mat-label>\r\n }\r\n <input [formControl]=\"fcDate\"\r\n [matDatepicker]=\"picker\"\r\n [matDatepickerFilter]=\"dateConstraint\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\"\r\n matInput\r\n [readonly]=\"!allowManualInput\">\r\n <mat-datepicker-toggle [for]=\"picker\" matIconPrefix></mat-datepicker-toggle>\r\n <mat-datepicker #picker [disabled]=\"false\"></mat-datepicker>\r\n <mat-error>\r\n @if (fcDate.hasError('matDatepickerMin') || fcDate.hasError('matDatepickerMax') || fcDate.hasError('matDatepickerFilter')) {\r\n date is not within the correct range\r\n } @else {\r\n invalid date (yyyy-mm-dd expected)\r\n }\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n @if (withTime) {\r\n <div [style.--dp-time-top]=\"label ? '19px' : '11px'\"\r\n class=\"timefields flex\">\r\n <div>\r\n <mat-select (selectionChange)=\"onHourOrMinuteChange()\"\r\n [(ngModel)]=\"hour\"\r\n [disabled]=\"!fcDate.valid\"\r\n [hideSingleSelectionIndicator]=\"true\">\r\n @for (hour of allHours; track hour) {\r\n <mat-option [value]=\"hour\">\r\n {{ hour | idxToTs:dateStart:60:false:'HH' }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </div>\r\n <div>\r\n <mat-select (selectionChange)=\"onHourOrMinuteChange()\"\r\n [(ngModel)]=\"minute\"\r\n [disabled]=\"!fcDate.valid\"\r\n [hideSingleSelectionIndicator]=\"true\">\r\n @for (min of allMinutes; track min) {\r\n <mat-option [value]=\"min\">\r\n {{ min | number:'2.0-0' }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".date-picker{min-width:var(--dp-min-width);position:relative}.date-picker .timefields{position:absolute;left:134px;top:var(--dp-time-top)}.date-picker .timefields>div{position:relative}.date-picker .timefields>div:before{color:hsla(var(--color-h),var(--color-s),var(--color-l),.6);font-size:12px;left:0;position:absolute;text-align:center;top:-12px;width:54px}.date-picker .timefields>div:nth-of-type(1):before{content:\"hour\"}.date-picker .timefields>div:nth-of-type(2):before{content:\"minute\"}.date-picker .timefields>div .mat-mdc-select{text-align:center;width:54px}\n"] }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], withTime: [{
type: Input
}], fcDate: [{
type: Input
}], allowManualInput: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}], dateConstraint: [{
type: Input
}] } });
/** A stand-alone date-range picker (not hooked up to the date service) */
class DateRangePickerComponent extends BaseComponent {
constructor() {
super();
/** The label to be displayed in the form field (optional) */
this.label = '';
/** Your formgroup with 2 formcontrols: "start" (type DateTime) and "end" (type DateTime).
* Will be updated directly by the date picker */
this.fgDateRange = new FormGroup({
start: new FormControl(DateTime.now()),
end: new FormControl(DateTime.now()),
});
/** Minimum date in luxon DateTime */
this.minDate = null;
/** Maximum date in luxon DateTime */
this.maxDate = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateRangePickerComponent, selector: "spaas-date-range-picker", inputs: { label: "label", fgDateRange: "fgDateRange", minDate: "minDate", maxDate: "maxDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"date-range-picker flex\">\r\n\r\n <mat-form-field class=\"grow-h\">\r\n @if (label) {\r\n <mat-label>{{label}}</mat-label>\r\n }\r\n <mat-date-range-input [formGroup]=\"fgDateRange\"\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\">\r\n <input matStartDate formControlName=\"start\" readonly>\r\n <input matEndDate formControlName=\"end\" readonly>\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle [for]=\"picker\" matIconPrefix></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker disabled=\"false\"></mat-date-range-picker>\r\n <mat-error>\r\n dates are not within the correct range\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n</div>\r\n", styles: [".date-range-picker{min-width:234px}\n"], dependencies: [{ kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-date-range-picker', template: "<div class=\"date-range-picker flex\">\r\n\r\n <mat-form-field class=\"grow-h\">\r\n @if (label) {\r\n <mat-label>{{label}}</mat-label>\r\n }\r\n <mat-date-range-input [formGroup]=\"fgDateRange\"\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [max]=\"maxDate\">\r\n <input matStartDate formControlName=\"start\" readonly>\r\n <input matEndDate formControlName=\"end\" readonly>\r\n </mat-date-range-input>\r\n <mat-datepicker-toggle [for]=\"picker\" matIconPrefix></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker disabled=\"false\"></mat-date-range-picker>\r\n <mat-error>\r\n dates are not within the correct range\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n</div>\r\n", styles: [".date-range-picker{min-width:234px}\n"] }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], fgDateRange: [{
type: Input
}], minDate: [{
type: Input
}], maxDate: [{
type: Input
}] } });
class DatetimeFormatPipe {
transform(dateTime, format) {
return (dateTime.toFormat(format));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatetimeFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DatetimeFormatPipe, name: "dateTimeFormat" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatetimeFormatPipe, decorators: [{
type: Pipe,
args: [{
name: 'dateTimeFormat'
}]
}] });
class GranularityService {
static getGranularityAsString(gran) {
return gran === 60 ? 'H' : gran === 30 ? 'S' : 'Q';
}
constructor(localStorageService) {
this.localStorageService = localStorageService;
this.LS_GRANULARITY = 'granularity';
this.granularity$ = new ReplaySubject(1);
this.newGranularity(this.localStorageService.getItem(this.LS_GRANULARITY) || 15);
}
// ********************************************************************************************************
// LOAD DATA
// ********************************************************************************************************
// ********************************************************************************************************
// BROADCAST DATA
// ********************************************************************************************************
newGranularity(gran) {
this.localStorageService.setItem(this.LS_GRANULARITY, gran);
this.granularity$.next(gran);
}
onNewGranularity() {
return this.granularity$.asObservable();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GranularityService, deps: [{ token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GranularityService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GranularityService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.LocalStorageService }] });
class GranularityPickerComponent extends BaseComponent {
constructor(granularityService, snackbarService) {
super();
this.granularityService = granularityService;
this.snackbarService = snackbarService;
/** Whether to allow selection of half-hourly granularity */
this.allowHalfHour = false;
this.granularity = null;
this.hoverGran = null;
this.getGranularity();
}
// ********************************************************************************************************
// LOAD DATA
// ********************************************************************************************************
getGranularity() {
this.granularityService.onNewGranularity()
.pipe(takeUntil(this.onDestroy$))
.subscribe((gran) => {
this.granularity = gran;
});
}
// ********************************************************************************************************
// PROCESS DATA
// ********************************************************************************************************
// ********************************************************************************************************
// UI
// ********************************************************************************************************
// EVENT LISTENERS
// MISCELLANEOUS
onClickGranularity(gran) {
if (gran === 30 && !this.allowHalfHour) {
this.snackbarService.message('half-hourly granularity is not allowed here');
return;
}
if (gran !== this.granularity) {
this.granularity = gran;
this.granularityService.newGranularity(gran);
}
}
onHoverGranularity(gran) {
this.hoverGran = gran;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GranularityPickerComponent, deps: [{ token: GranularityService }, { token: i1.SnackbarService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GranularityPickerComponent, selector: "spaas-granularity-picker", inputs: { allowHalfHour: "allowHalfHour" }, usesInheritance: true, ngImport: i0, template: "<div class=\"granularity-picker\">\r\n <svg viewBox=\"0 0 24 24\">\r\n\r\n <!-- quarter-hourly -->\r\n <path\r\n d=\"m 12.761755,3.4794896 c 4.292785,0 7.772768,3.649382 7.772768,8.1511264 l -7.772768,1e-6 V 3.4794896\"\r\n matTooltip=\"quarter-hourly\"\r\n matTooltipPosition=\"right\"\r\n [class.hovering]=\"hoverGran !== null && hoverGran >= 15\"\r\n (click)=\"onClickGranularity(15)\"\r\n (mouseenter)=\"onHoverGranularity(15)\"\r\n (mouseleave)=\"onHoverGranularity(null)\"/>\r\n <!-- half-hourly -->\r\n <path\r\n d=\"m 12.691367,20.517048 c 4.292785,0 7.772768,-3.646374 7.772768,-8.144407 l -7.772768,-10e-7 v 8.144408\"\r\n matTooltip=\"half-hourly\"\r\n matTooltipPosition=\"right\"\r\n [class.hovering]=\"hoverGran !== null && hoverGran >= 30\"\r\n (click)=\"onClickGranularity(30)\"\r\n (mouseenter)=\"onHoverGranularity(30)\"\r\n (mouseleave)=\"onHoverGranularity(null)\"/>\r\n <!-- hourly -->\r\n <path\r\n d=\"m 11.238245,3.5260593 c -4.292785,-10e-8 -7.7727682,3.8043355 -7.7727682,8.4972247 0,4.692891 3.4799832,8.497226 7.7727682,8.497226 V 3.5260593\"\r\n matTooltip=\"hourly\"\r\n matTooltipPosition=\"above\"\r\n [class.hovering]=\"hoverGran !== null && hoverGran >= 60\"\r\n (click)=\"onClickGranularity(60)\"\r\n (mouseenter)=\"onHoverGranularity(60)\"\r\n (mouseleave)=\"onHoverGranularity(null)\"/>\r\n\r\n <!-- outer rings -->\r\n <path\r\n class=\"outer-ring minutes\"\r\n d=\"M 12.897203,1.1187345 C 18.507141,1.5750485 22.917603,6.272465 22.917603,12 22.917603,18.029626 18.029626,22.917603 12,22.917603 5.9703746,22.917603 1.0823972,18.029625 1.0823975,12 1.0823978,6.2326689 5.5543616,1.509821 11.219907,1.1098381\"\r\n pathLength=\"100\"/>\r\n <path\r\n class=\"outer-ring gran-indicator\"\r\n d=\"M 12.897203,1.1187345 C 18.507141,1.5750485 22.917603,6.272465 22.917603,12 22.917603,18.029626 18.029626,22.917603 12,22.917603 5.9703746,22.917603 1.0823972,18.029625 1.0823975,12 1.0823978,6.2326689 5.5543616,1.509821 11.219907,1.1098381\"\r\n pathLength=\"100\"\r\n [class.gran-15]=\"granularity === 15\"\r\n [class.gran-30]=\"granularity === 30\"/>\r\n\r\n </svg>\r\n</div>\r\n", styles: [".granularity-picker{transform:translateZ(0)}.granularity-picker svg{height:28px;width:28px}.granularity-picker svg path{fill:hsla(var(--color-h),var(--color-s),var(--color-l),1);stroke-width:1px;stroke:hsla(var(--bg-h),var(--bg-s),var(--bg-l),1)}.granularity-picker svg path:not(.outer-ring){cursor:pointer}.granularity-picker svg path.hovering{fill:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.granularity-picker svg path.outer-ring{fill:none;stroke-width:2px;stroke:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.granularity-picker svg path.outer-ring.minutes{stroke:hsla(var(--color-h),var(--color-s),var(--color-l),var(--color-op-min));stroke-dasharray:1 2}.granularity-picker svg path.outer-ring.gran-indicator{stroke-dasharray:100;transition:stroke-dasharray .4s linear}.granularity-picker svg path.outer-ring.gran-indicator.gran-15{stroke-dasharray:25 75}.granularity-picker svg path.outer-ring.gran-indicator.gran-30{stroke-dasharray:50 50}\n"], dependencies: [{ kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GranularityPickerComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-granularity-picker', template: "<div class=\"granularity-picker\">\r\n <svg viewBox=\"0 0 24 24\">\r\n\r\n <!-- quarter-hourly -->\r\n <path\r\n d=\"m 12.761755,3.4794896 c 4.292785,0 7.772768,3.649382 7.772768,8.1511264 l -7.772768,1e-6 V 3.4794896\"\r\n matTooltip=\"quarter-hourly\"\r\n matTooltipPosition=\"right\"\r\n [class.hovering]=\"hoverGran !== null && hoverGran >= 15\"\r\n (click)=\"onClickGranularity(15)\"\r\n (mouseenter)=\"onHoverGranularity(15)\"\r\n (mouseleave)=\"onHoverGranularity(null)\"/>\r\n <!-- half-hourly -->\r\n <path\r\n d=\"m 12.691367,20.517048 c 4.292785,0 7.772768,-3.646374 7.772768,-8.144407 l -7.772768,-10e-7 v 8.144408\"\r\n matTooltip=\"half-hourly\"\r\n matTooltipPosition=\"right\"\r\n [class.hovering]=\"hoverGran !== null && hoverGran >= 30\"\r\n (click)=\"onClickGranularity(30)\"\r\n (mouseenter)=\"onHoverGranularity(30)\"\r\n (mouseleave)=\"onHoverGranularity(null)\"/>\r\n <!-- hourly -->\r\n <path\r\n d=\"m 11.238245,3.5260593 c -4.292785,-10e-8 -7.7727682,3.8043355 -7.7727682,8.4972247 0,4.692891 3.4799832,8.497226 7.7727682,8.497226 V 3.5260593\"\r\n matTooltip=\"hourly\"\r\n matTooltipPosition=\"above\"\r\n [class.hovering]=\"hoverGran !== null && hoverGran >= 60\"\r\n (click)=\"onClickGranularity(60)\"\r\n (mouseenter)=\"onHoverGranularity(60)\"\r\n (mouseleave)=\"onHoverGranularity(null)\"/>\r\n\r\n <!-- outer rings -->\r\n <path\r\n class=\"outer-ring minutes\"\r\n d=\"M 12.897203,1.1187345 C 18.507141,1.5750485 22.917603,6.272465 22.917603,12 22.917603,18.029626 18.029626,22.917603 12,22.917603 5.9703746,22.917603 1.0823972,18.029625 1.0823975,12 1.0823978,6.2326689 5.5543616,1.509821 11.219907,1.1098381\"\r\n pathLength=\"100\"/>\r\n <path\r\n class=\"outer-ring gran-indicator\"\r\n d=\"M 12.897203,1.1187345 C 18.507141,1.5750485 22.917603,6.272465 22.917603,12 22.917603,18.029626 18.029626,22.917603 12,22.917603 5.9703746,22.917603 1.0823972,18.029625 1.0823975,12 1.0823978,6.2326689 5.5543616,1.509821 11.219907,1.1098381\"\r\n pathLength=\"100\"\r\n [class.gran-15]=\"granularity === 15\"\r\n [class.gran-30]=\"granularity === 30\"/>\r\n\r\n </svg>\r\n</div>\r\n", styles: [".granularity-picker{transform:translateZ(0)}.granularity-picker svg{height:28px;width:28px}.granularity-picker svg path{fill:hsla(var(--color-h),var(--color-s),var(--color-l),1);stroke-width:1px;stroke:hsla(var(--bg-h),var(--bg-s),var(--bg-l),1)}.granularity-picker svg path:not(.outer-ring){cursor:pointer}.granularity-picker svg path.hovering{fill:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.granularity-picker svg path.outer-ring{fill:none;stroke-width:2px;stroke:hsla(var(--primary-h),var(--primary-s),var(--primary-l),1)}.granularity-picker svg path.outer-ring.minutes{stroke:hsla(var(--color-h),var(--color-s),var(--color-l),var(--color-op-min));stroke-dasharray:1 2}.granularity-picker svg path.outer-ring.gran-indicator{stroke-dasharray:100;transition:stroke-dasharray .4s linear}.granularity-picker svg path.outer-ring.gran-indicator.gran-15{stroke-dasharray:25 75}.granularity-picker svg path.outer-ring.gran-indicator.gran-30{stroke-dasharray:50 50}\n"] }]
}], ctorParameters: () => [{ type: GranularityService }, { type: i1.SnackbarService }], propDecorators: { allowHalfHour: [{
type: Input
}] } });
const MY_DATE_FORMATS = {
parse: {
dateInput: 'yyyy-MM-dd',
},
display: {
dateInput: 'yyyy-MM-dd',
monthYearLabel: 'MMM yy',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM yyyy'
},
};
class SpaasDateModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaasDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SpaasDateModule, declarations: [CalendarComponent,
DateIndicatorComponent,
DatePickerComponent,
DateRangePickerComponent,
DatetimeFormatPipe,
GranularityPickerComponent,
IdOrDaPipe,
IdxToHPipe,
IdxToTsPipe,
TsToContractPipe], imports: [CommonModule,
FormsModule,
MatDatepickerModule,
MatInputModule,
MatFormFieldModule,
MatLuxonDateModule,
MatSelectModule,
MatTooltipModule,
ReactiveFormsModule], exports: [CalendarComponent,
DateIndicatorComponent,
DatePickerComponent,
DateRangePickerComponent,
DatetimeFormatPipe,
GranularityPickerComponent,
IdOrDaPipe,
IdxToHPipe,
IdxToTsPipe,
MatDatepickerModule,
MatLuxonDateModule,
TsToContractPipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaasDateModule, providers: [
{ provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { firstDayOfWeek: 1 } },
{ provide: DateAdapter, useClass: LuxonDateAdapter }, // , deps: [MAT_DATE_LOCALE, MAT_LUXON_DATE_FORMATS]
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
], imports: [CommonModule,
FormsModule,
MatDatepickerModule,
MatInputModule,
MatFormFieldModule,
MatLuxonDateModule,
MatSelectModule,
MatTooltipModule,
ReactiveFormsModule, MatDatepickerModule,
MatLuxonDateModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpaasDateModule, decorators: [{
type: NgModule,
args: [{
declarations: [
CalendarComponent,
DateIndicatorComponent,
DatePickerComponent,
DateRangePickerComponent,
DatetimeFormatPipe,
GranularityPickerComponent,
IdOrDaPipe,
IdxToHPipe,
IdxToTsPipe,
TsToContractPipe,
],
exports: [
CalendarComponent,
DateIndicatorComponent,
DatePickerComponent,
DateRangePickerComponent,
DatetimeFormatPipe,
GranularityPickerComponent,
IdOrDaPipe,
IdxToHPipe,
IdxToTsPipe,
MatDatepickerModule,
MatLuxonDateModule,
TsToContractPipe,
],
imports: [
CommonModule,
FormsModule,
MatDatepickerModule,
MatInputModule,
MatFormFieldModule,
MatLuxonDateModule,
MatSelectModule,
MatTooltipModule,
ReactiveFormsModule,
],
providers: [
{ provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { firstDayOfWeek: 1 } },
{ provide: DateAdapter, useClass: LuxonDateAdapter }, // , deps: [MAT_DATE_LOCALE, MAT_LUXON_DATE_FORMATS]
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
]
}]
}] });
class ContractMatrixModel {
constructor(hLabels, callBack) {
this.hs = [];
this.ss = [];
this.qs = [];
for (const hLabel of hLabels) {
this.hs.push(callBack(hLabel));
for (let s = 0; s < 2; s++) {
this.ss.push(callBack(DateTime.fromISO(hLabel).toUTC().plus({ minutes: s * 30 }).toISO()));
}
for (let q = 0; q < 4; q++) {
this.qs.push(callBack(DateTime.fromISO(hLabel).toUTC().plus({ minutes: q * 15 }).toISO()));
}
}
}
getContracts(granularity) {
return granularity === 15 ? this.qs : granularity === 30 ? this.ss : this.hs;
}
}
// MODULE
/**
* Generated bundle index. Do not edit.
*/
export { CalendarComponent, ContractLabelService, ContractMatrixModel, DateIndicatorComponent, DateModel, DatePickerComponent, DateRangePickerComponent, DateService, DatetimeFormatPipe, GranularityPickerComponent, GranularityService, IdOrDaPipe, IdxToHPipe, IdxToTsPipe, MY_DATE_FORMATS, SpaasDateModule, TsToContractPipe };
//# sourceMappingURL=ngx-gem-spaas-date.mjs.map