@sedeh/into-pipes
Version:
Have you ever wanted to transform data in different parts of your application into interactive objects without writing a single line of code?
938 lines (926 loc) • 248 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Pipe, Injectable, NgModule, CUSTOM_ELEMENTS_SCHEMA, Inject, Output, ViewChild, HostListener, Directive, Input } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, DatePipe, CurrencyPipe, DecimalPipe, JsonPipe, SlicePipe, UpperCasePipe, LowerCasePipe } from '@angular/common';
import * as i1$1 from '@angular/platform-browser';
class AddressComponent {
constructor() {
this.disabled = false;
this.active = true;
this.validate = (item, newValue) => true;
this.onIntoComponentChange = new EventEmitter();
}
static settingsPatterns() {
return ['address:true:false', 'address:true:true']; //link, target
}
transform(source, data, args) {
this.source = source;
this.isLink = (args && args.length && args[0].length) ? args[0] === 'true' : true;
this.hasTarget = (args && args.length > 1 && args[1].length) ? args[1] === 'true' : false;
this.addr1 = source.street + ', ' + source.suite;
this.addr2 = source.city + ', ' + source.zipcode;
if (this.isLink) {
const x = "https://maps.google.com/?q=" + source.street + ", " + this.addr2 + "&ie=UTF-8";
this.url = x.replace("\\s+", "+");
}
}
keyup(event) {
const code = event.which;
event.stopPropagation();
event.preventDefault();
if (code === 13 && !this.disabled) {
event.target.click();
}
}
change(event) {
event.stopPropagation();
event.preventDefault();
if (!this.disabled) {
this.onIntoComponentChange.emit({
id: this.id,
name: this.name,
value: this.source,
item: event.type
});
}
}
}
AddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AddressComponent, selector: "address-component", ngImport: i0, template: `
<a *ngIf="isLink"
[href]="disabled ? null : url"
[target]="!disabled && hasTarget ? '_blank' : null"
class="google-map {{disabled ? 'disabled':''}}"
tabindex="{{active ? 0 : -1}}"
(keyup)='keyup($event)'
(click)="change($event)">
<span class="fa fa-map-marker" aria-hidden="true"></span>
<span class="off-screen">View in google map</span>
<span class="address" [textContent]="addr1"></span>
<span class="address" [textContent]="addr2"></span>
</a>
<span *ngIf="!isLink" class="google-map">
<span class="fa fa-map-marker" aria-hidden="true"></span>
<span class="address" [textContent]="addr1"></span>
<span class="address" [textContent]="addr2"></span>
</span>
`, isInline: true, styles: [":host .address{float:left;margin-right:var(--sedeh-margin-right,5px)}:host .google-map{float:left;text-decoration:none;margin-right:var(--sedeh-margin-right,5px)}:host .fa{float:left;margin:var(--sedeh-margin, 0 5px)}:host .off-screen{position:absolute;left:-999em}:host a:hover,a:hover .fa-map-marker{opacity:var(--sedeh-hover-opacity, .5)}:host a:focus{outline:none}:host a:focus .fa{zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}:host a.disabled:hover .fa-map-marker{color:var(--sedeh-disabled-color, #888)}:host a.disabled{color:var(--sedeh-disabled-color,#888);cursor:default;text-decoration:none}:host span{float:left}:host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}@media print{:host{text-decoration:none}:host .fa-map-marker{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressComponent, decorators: [{
type: Component,
args: [{ selector: 'address-component', template: `
<a *ngIf="isLink"
[href]="disabled ? null : url"
[target]="!disabled && hasTarget ? '_blank' : null"
class="google-map {{disabled ? 'disabled':''}}"
tabindex="{{active ? 0 : -1}}"
(keyup)='keyup($event)'
(click)="change($event)">
<span class="fa fa-map-marker" aria-hidden="true"></span>
<span class="off-screen">View in google map</span>
<span class="address" [textContent]="addr1"></span>
<span class="address" [textContent]="addr2"></span>
</a>
<span *ngIf="!isLink" class="google-map">
<span class="fa fa-map-marker" aria-hidden="true"></span>
<span class="address" [textContent]="addr1"></span>
<span class="address" [textContent]="addr2"></span>
</span>
`, styles: [":host .address{float:left;margin-right:var(--sedeh-margin-right,5px)}:host .google-map{float:left;text-decoration:none;margin-right:var(--sedeh-margin-right,5px)}:host .fa{float:left;margin:var(--sedeh-margin, 0 5px)}:host .off-screen{position:absolute;left:-999em}:host a:hover,a:hover .fa-map-marker{opacity:var(--sedeh-hover-opacity, .5)}:host a:focus{outline:none}:host a:focus .fa{zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}:host a.disabled:hover .fa-map-marker{color:var(--sedeh-disabled-color, #888)}:host a.disabled{color:var(--sedeh-disabled-color,#888);cursor:default;text-decoration:none}:host span{float:left}:host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}@media print{:host{text-decoration:none}:host .fa-map-marker{display:none}}\n"] }]
}] });
/*
* Defines a filter to convert url into an address display.
*/
class AddressPipe {
static transformationMethod() {
const x = function (content, args, callback, data) {
return new AddressPipe().transform(content, args.length > 1 ? args[1] === 'true' : true);
};
return x;
}
transform(source, ...args) {
const isLink = args.length ? args[0] : true;
const hasTarget = args.length > 1 ? args[1] : false;
if ((typeof source === "string") || !(source instanceof Array)) {
return this.addressFromString(source, isLink, hasTarget);
}
else {
const result = [];
source.map((item) => {
result.push(this.addressFromString(item, isLink, hasTarget));
});
return result;
}
}
addressFromString(source, isLink, hasTarget) {
if (isLink) {
let url = "https://maps.google.com/?q=" +
source.street + ", " + source.city + ", " + source.zipcode + "&ie=UTF-8";
url = url.replace("\\s+", "+");
return "<a href=\'" + url + "\' " +
(hasTarget ? "target='_blank'" : "") +
"class='google-map'><span class='fa fa-map-marker' aria-hidden='true'>" +
"</span><span class='off-screen'>View in google map</span><span class='address'>" +
source.street + ", " + source.suite + "</span>" +
"<span class='address'> " + source.city + ", " + source.zipcode + "</span></a>";
}
return "<span class='google-map'><span class='fa fa-map-marker' style='margin: 0 5px' aria-hidden='true'>" +
"</span><span class='address'>" + source.street + ", " + source.suite + "</span>" +
"<span class='address'> " + source.city + ", " + source.zipcode + "</span></span>";
}
}
AddressPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
AddressPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AddressPipe, name: "address" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressPipe, decorators: [{
type: Pipe,
args: [{ name: 'address' }]
}] });
class ComponentPool {
constructor() {
this.registeredPipes = {};
this.registeredComponents = {};
this.registeredServices = {};
this.registeredPatterns = {};
}
getRegisteredPatterns() {
return this.registeredPatterns;
}
registerPipeTransformation(name, pipe) {
this.registeredPipes[name] = pipe;
if (!this.registeredPatterns[name]) {
this.registeredPatterns[name] = name;
}
}
registeredForPipeTransformationNamed(key) {
return this.registeredPipes[key] !== undefined;
}
registeredPipeTransformation(key, content, args, callback, data) {
const pipe = this.registeredPipes[key];
return pipe ? pipe(content, args, callback, data) : null;
}
removePipeTransformation(key) {
delete this.registeredPipes[key];
const v = this.registeredPatterns[key];
if (v === key) {
delete this.registeredPatterns[key];
}
}
registerComponent(name, component) {
this.registeredComponents[name] = component;
this.registeredPatterns[name] = component.settingsPatterns();
}
registeredForComponentWithNamed(name) {
return this.registeredComponents[name] !== undefined;
}
registeredComponent(name, viewRefrence, el) {
const component = name ? this.registeredComponents[name] : undefined;
let result;
if (component) {
const componentRef = viewRefrence.createComponent(component);
const domElem = componentRef.hostView.rootNodes[0];
el.appendChild(domElem);
domElem.setAttribute("class", "into");
result = componentRef.instance;
}
return result;
}
removeComponent(name) {
delete this.registeredComponents[name];
delete this.registeredPatterns[name];
}
registerServiceForComponent(name, service) {
this.registeredServices[name] = service;
}
registeredServiceForComponent(name) {
return this.registeredServices[name];
}
registeredForServiceNamed(name) {
return this.registeredServices[name] !== undefined;
}
removeServiceForComponent(name) {
delete this.registeredServices[name];
}
}
ComponentPool.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComponentPool, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
ComponentPool.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComponentPool });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComponentPool, decorators: [{
type: Injectable
}] });
class AddressIntoPipeModule {
static forRoot() {
return {
ngModule: AddressIntoPipeModule,
providers: [
AddressPipe
]
};
}
constructor(pool) {
pool.registerComponent('address', AddressComponent);
pool.registerPipeTransformation('address', AddressPipe.transformationMethod());
}
}
AddressIntoPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressIntoPipeModule, deps: [{ token: ComponentPool }], target: i0.ɵɵFactoryTarget.NgModule });
AddressIntoPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AddressIntoPipeModule, declarations: [AddressComponent, AddressPipe], imports: [CommonModule], exports: [AddressComponent, AddressPipe] });
AddressIntoPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressIntoPipeModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddressIntoPipeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [AddressComponent, AddressPipe],
exports: [AddressComponent, AddressPipe],
entryComponents: [AddressComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}], ctorParameters: function () {
return [{ type: ComponentPool, decorators: [{
type: Inject,
args: [ComponentPool]
}] }];
} });
class AudioComponent {
constructor() {
this.disabled = false;
this.active = true;
this.validate = (item, newValue) => true;
this.onIntoComponentChange = new EventEmitter();
}
static settingsPatterns() {
return ['audio']; // no arguments
}
transform(source, data, args) {
this.source = source;
}
isPlaying(audio) {
return !!(audio.currentTime > 0 && !audio.paused && !audio.ended && audio.readyState > 2);
}
keyup(event) {
const code = event.which;
if (code === 13 && !this.disabled) {
if (this.isPlaying(event.target)) {
event.target.pause();
}
else {
event.target.play();
}
}
}
change(event) {
this.onIntoComponentChange.emit({
id: this.id,
name: this.name,
value: this.source,
type: event.type,
item: {
autoplay: event.target.autoplay,
controls: event.target.controls,
duration: event.target.duration,
currentTime: event.target.currentTime,
ended: event.target.ended,
error: event.target.error,
paused: event.target.paused,
muted: event.target.muted,
defaultMuted: event.target.defaultMuted,
volume: event.target.volume
}
});
}
}
AudioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AudioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AudioComponent, selector: "audio-component", ngImport: i0, template: `
<span class="audio-hidden" [innerText]="source"></span>
<audio [src]="source"
tabindex="{{active ? 0 : -1}}"
[class.disabled]="disabled"
(keyup)="keyup($event)"
(play)="change($event)"
(ended)="change($event)"
(pause)="change($event)"
(seeked)="change($event)"
(error)="change($event)"
controls="true">Your browser does not support the audio element.</audio>`, isInline: true, styles: [":host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}:host audio.disabled{color:var(--sedeh-disabled-color, #888);opacity:var(--sedeh-hover-opacity, .5);pointer-events:none}:host .audio-hidden{display:none}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioComponent, decorators: [{
type: Component,
args: [{ selector: 'audio-component', template: `
<span class="audio-hidden" [innerText]="source"></span>
<audio [src]="source"
tabindex="{{active ? 0 : -1}}"
[class.disabled]="disabled"
(keyup)="keyup($event)"
(play)="change($event)"
(ended)="change($event)"
(pause)="change($event)"
(seeked)="change($event)"
(error)="change($event)"
controls="true">Your browser does not support the audio element.</audio>`, styles: [":host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}:host audio.disabled{color:var(--sedeh-disabled-color, #888);opacity:var(--sedeh-hover-opacity, .5);pointer-events:none}:host .audio-hidden{display:none}\n"] }]
}] });
/*
* Defines a filter to convert url into an image display.
* if transforming object is an array, all elements in the array will be transformed and the resulting array will be returned.
*/
class AudioPipe {
static transformationMethod() {
const x = function (content, args, callback, data) {
return new AudioPipe().transform(content, args.length > 1 ? args[1] === 'true' : true);
};
return x;
}
stringToAudio(source) {
return "<audio src=\'" + source + "\' controls=\'true\' />";
}
arrayToAudio(sources) {
const result = [];
sources.map((source) => {
result.push(this.stringToAudio(source));
});
return result;
}
transform(source, ...args) {
if ((typeof source === "string") || !(source instanceof Array)) {
return this.stringToAudio(source);
}
return this.arrayToAudio(source);
}
}
AudioPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
AudioPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AudioPipe, name: "audio" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioPipe, decorators: [{
type: Pipe,
args: [{ name: 'audio' }]
}] });
class AudioIntoPipeModule {
static forRoot() {
return {
ngModule: AudioIntoPipeModule,
providers: [
AudioPipe
]
};
}
constructor(pool) {
pool.registerComponent('audio', AudioComponent);
pool.registerPipeTransformation('audio', AudioPipe.transformationMethod());
}
}
AudioIntoPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioIntoPipeModule, deps: [{ token: ComponentPool }], target: i0.ɵɵFactoryTarget.NgModule });
AudioIntoPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AudioIntoPipeModule, declarations: [AudioComponent, AudioPipe], imports: [CommonModule], exports: [AudioComponent, AudioPipe] });
AudioIntoPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioIntoPipeModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AudioIntoPipeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [AudioComponent, AudioPipe],
exports: [AudioComponent, AudioPipe],
entryComponents: [AudioComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}], ctorParameters: function () {
return [{ type: ComponentPool, decorators: [{
type: Inject,
args: [ComponentPool]
}] }];
} });
/* calendar code is copied from "ben tedder"
* http://www.bentedder.com/create-calendar-grid-component-angular-4/
*/
class CalendarComponent {
constructor(renderer) {
this.renderer = renderer;
this.showCalendar = false;
this.editName = false;
this.multiselect = false;
this.disabled = false;
this.active = true;
this.validate = (item, newValue) => true;
this.dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
this.weeks = [];
this.selectedDays = [];
this.onIntoComponentChange = new EventEmitter();
}
keyup(event) {
event.stopPropagation();
event.preventDefault();
const code = event.which;
if (code === 13 && !this.disabled) {
event.target.click();
}
}
popdatepicker(event) {
event.stopPropagation();
event.preventDefault();
this.showCalendar = !this.showCalendar;
}
static settingsPatterns() {
return ['calendar:MM/dd/yyyy']; //date format
}
transform(source, data, args) {
this.source = source;
this.currentDate = new Date(source);
this.origDate = new Date(source);
if (source instanceof Array) {
this.multiselect = true;
source.map((item) => {
this.selectedDays.push(new Date(item));
});
}
else {
this.multiselect = false;
this.selectedDays.push(new Date(this.source));
}
this.item = data;
this.generateCalendar();
this.formatting = (args && args.length) ? args[0] : "";
}
isSelected(date) {
let index = -1;
for (let i = 0; i < this.selectedDays.length; i++) {
const selectedDate = this.selectedDays[i];
if (this.isSameDay(date, selectedDate)) {
index = i;
}
}
return index > -1;
}
isSelectedMonth(date) {
return this.isSameMonth(date, this.currentDate);
}
toggleSelectedDates(day) {
let found = false;
if (this.multiselect) {
for (let i = 0; i < this.selectedDays.length; i++) {
const date = this.selectedDays[i];
if (this.isSameDay(day.date, date)) {
this.selectedDays.splice(i, 1);
found = true;
day.selected = false;
break;
}
}
if (!found) {
this.selectedDays.push(day.date);
day.selected = true;
}
}
else {
this.selectedDays = [day.date];
day.selected = true;
}
}
selectDate(event, day) {
event.stopPropagation();
event.preventDefault();
if (this.validate(this.item, day.date)) {
this.origDate = day.date;
this.currentDate = day.date;
this.toggleSelectedDates(day);
this.selectedDays.sort((a, b) => {
return a > b ? -1 : 1;
});
this.onIntoComponentChange.emit({
id: this.id,
name: this.name,
value: this.selectedDays,
type: "select",
item: this.item
});
this.generateCalendar();
}
this.showCalendar = false;
}
// actions from calendar
prevMonth(event) {
event.stopPropagation();
event.preventDefault();
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, this.currentDate.getDate());
this.generateCalendar();
}
nextMonth(event) {
event.stopPropagation();
event.preventDefault();
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, this.currentDate.getDate());
this.generateCalendar();
}
prevYear(event) {
event.stopPropagation();
event.preventDefault();
this.currentDate = new Date(this.currentDate.getFullYear() - 1, this.currentDate.getMonth(), this.currentDate.getDate());
this.generateCalendar();
}
nextYear(event) {
event.stopPropagation();
event.preventDefault();
this.currentDate = new Date(this.currentDate.getFullYear() + 1, this.currentDate.getMonth(), this.currentDate.getDate());
this.generateCalendar();
}
// generate the calendar grid
generateCalendar() {
const dates = this.fillDates(this.currentDate);
const weeks = [];
while (dates.length > 0) {
weeks.push(dates.splice(0, 7));
}
this.weeks = weeks;
}
isSameDay(a, b) {
return a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate() === b.getDate();
}
isSameMonth(a, b) {
return a.getYear() === b.getYear() &&
a.getMonth() === b.getMonth();
}
fillDates(currentDate) {
const cm = new Date(currentDate);
const tm = new Date();
const firstDay = new Date(cm.getFullYear(), cm.getMonth(), 1);
const firstOfMonth = firstDay.getDay();
const firstDayOfGrid = new Date(firstDay.getFullYear(), firstDay.getMonth(), firstDay.getDate() - firstOfMonth);
const start = firstDayOfGrid.getDate();
const list = [];
for (let i = start; i < (start + 42); i++) {
const d = new Date(firstDayOfGrid.getFullYear(), firstDayOfGrid.getMonth(), i);
list.push({
today: this.isSameDay(tm, d),
selected: this.isSelected(d),
date: d
});
}
return list;
}
}
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalendarComponent, selector: "calendar-component", outputs: { onIntoComponentChange: "onIntoComponentChange" }, ngImport: i0, template: `
<span class="calendar-box">
<span class="date" [textContent]="origDate | date:formatting"></span>
<a
tabindex="{{active ? 0 : -1}}"
class="popper {{disabled ? 'disabled': ''}}"
(keyup)="keyup($event)"
(click)="popdatepicker($event)">
<span class="fa fa-calendar" aria-hidden="true"></span>
<span class="off-screen">Pick a date</span>
</a>
</span>
<div class="calendar" *ngIf="!disabled && showCalendar">
<div class="calendar-navs">
<div class="month-nav">
<button (click)="prevMonth($event)">
<span class="fa fa-chevron-left"></span>
<span class="off-screen">Back a month</span>
</button>
<span class="p4">{{ currentDate | date:'MMMM' }}</span>
<button (click)="nextMonth($event)">
<span class="fa fa-chevron-right"></span>
<span class="off-screen">Forward a month</span>
</button>
</div>
<div class="year-nav">
<button (click)="prevYear($event)">
<span class="fa fa-chevron-left"></span>
<span class="off-screen">Back a year</span>
</button>
<span>{{ currentDate | date: 'yyyy' }}</span>
<button (click)="nextYear($event)">
<span class="fa fa-chevron-right"></span>
<span class="off-screen">Forward a year</span>
</button>
</div>
</div>
<div class="month-grid">
<div class="day-names">
<div *ngFor="let name of dayNames" class="day-name p9">{{ name }}</div>
</div>
<div class="weeks">
<div *ngFor="let week of weeks" class="week">
<ng-container *ngFor="let day of week">
<div class="week-date disabled" *ngIf="!isSelectedMonth(day.date)">
<span class="date-text">{{ day.date.getDate() }}</span>
</div>
<div class="week-date enabled"
*ngIf="isSelectedMonth(day.date)"
tabindex="{{active ? 0 : -1}}"
(keyup)="keyup($event)"
(click)="selectDate($event, day)"
[class.today]="day.today"
[class.selected]="day.selected">
<span class="date-text">{{ day.date.getDate() }}</span>
</div>
</ng-container>
</div>
</div>
</div>
</div>
`, isInline: true, styles: [":host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}.popper .fa-calendar{display:inline-block;margin:var(--sedeh-margin, 0 5px)}.popper:hover .fa-calendar{color:var(--sedeh-hover-opacity, .5)}.popper:focus{outline:none}.popper:focus .fa{zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}.popper.disabled .fa-calendar{color:var(--sedeh-disabled-color, #888)}.popper.disabled:hover .fa-calendar{cursor:default;color:var(--sedeh-disabled-color, #888)}.popper.disabled{color:var(--sedeh-disabled-color, #888);pointer-events:none;cursor:default;text-decoration:none}.calendar-box{display:flex;flex-direction:row;cursor:default;width:100%;display:inline-block}.calendar-box date{flex:1}.calendar-box .popper{cursor:pointer;flex:0 0 15px}.calendar{display:table;width:210px;position:absolute;background-color:#fff;z-index:2;border:1px solid #ddd;border-radius:4px;box-shadow:var(--sedeh-box-shadow, 3px 3px 3px #999)}.calendar *{box-sizing:border-box}.calendar .calendar-navs{background-color:#f5f5f5}.calendar .month-nav,.calendar .year-nav{padding:2px;display:flex;flex-direction:row;justify-content:space-between}.calendar .month-nav button,.calendar .year-nav button{border:0;background:transparent;cursor:pointer}.calendar .month-nav button:hover,.calendar .year-nav button:hover{color:red}.calendar .month-grid .day-names{display:flex;flex-direction:row;background:whitesmoke;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.calendar .month-grid .weeks{display:flex;flex-direction:column}.calendar .month-grid .week{display:flex;flex-direction:row}.calendar .month-grid .day-names{border-top:1px dotted #ddd;border-bottom:1px dashed #ddd}.calendar .month-grid .week-date,.calendar .month-grid .day-name{text-align:center;padding:2px;display:block;width:30px;display:flex;justify-content:center;align-items:center}.calendar .month-grid .week-date{height:30px;position:relative;padding:5px}.calendar .month-grid .week-date .date-text{font-size:10px;z-index:10}.calendar .month-grid .week-date:after{content:\"\";height:24px;width:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;transition:background-color .15s linear,color .15s linear;z-index:1}.calendar .month-grid .week-date.disabled{color:#aaa}.calendar .month-grid .week-date.enabled{cursor:pointer}.calendar .month-grid .week-date.enabled:focus{outline:0}.calendar .month-grid .week-date.enabled:hover .date-text,.calendar .month-grid .week-date.enabled:focus .date-text{font-weight:700;color:#00f}.calendar .month-grid .week-date.enabled:hover:after,.calendar .month-grid .week-date.enabled:focus:after{background-color:#f5f5f5}.calendar .month-grid .week-date.selected .date-text{color:#fff!important}.calendar .month-grid .week-date.selected:after{background-color:#00f!important}.calendar .month-grid .week-date.today:after{background-color:#add8e6;font-weight:700;color:#fff}@media print{.calendar-box .popper{display:none}}\n"], 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: "pipe", type: i1.DatePipe, name: "date" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'calendar-component', template: `
<span class="calendar-box">
<span class="date" [textContent]="origDate | date:formatting"></span>
<a
tabindex="{{active ? 0 : -1}}"
class="popper {{disabled ? 'disabled': ''}}"
(keyup)="keyup($event)"
(click)="popdatepicker($event)">
<span class="fa fa-calendar" aria-hidden="true"></span>
<span class="off-screen">Pick a date</span>
</a>
</span>
<div class="calendar" *ngIf="!disabled && showCalendar">
<div class="calendar-navs">
<div class="month-nav">
<button (click)="prevMonth($event)">
<span class="fa fa-chevron-left"></span>
<span class="off-screen">Back a month</span>
</button>
<span class="p4">{{ currentDate | date:'MMMM' }}</span>
<button (click)="nextMonth($event)">
<span class="fa fa-chevron-right"></span>
<span class="off-screen">Forward a month</span>
</button>
</div>
<div class="year-nav">
<button (click)="prevYear($event)">
<span class="fa fa-chevron-left"></span>
<span class="off-screen">Back a year</span>
</button>
<span>{{ currentDate | date: 'yyyy' }}</span>
<button (click)="nextYear($event)">
<span class="fa fa-chevron-right"></span>
<span class="off-screen">Forward a year</span>
</button>
</div>
</div>
<div class="month-grid">
<div class="day-names">
<div *ngFor="let name of dayNames" class="day-name p9">{{ name }}</div>
</div>
<div class="weeks">
<div *ngFor="let week of weeks" class="week">
<ng-container *ngFor="let day of week">
<div class="week-date disabled" *ngIf="!isSelectedMonth(day.date)">
<span class="date-text">{{ day.date.getDate() }}</span>
</div>
<div class="week-date enabled"
*ngIf="isSelectedMonth(day.date)"
tabindex="{{active ? 0 : -1}}"
(keyup)="keyup($event)"
(click)="selectDate($event, day)"
[class.today]="day.today"
[class.selected]="day.selected">
<span class="date-text">{{ day.date.getDate() }}</span>
</div>
</ng-container>
</div>
</div>
</div>
</div>
`, styles: [":host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}.popper .fa-calendar{display:inline-block;margin:var(--sedeh-margin, 0 5px)}.popper:hover .fa-calendar{color:var(--sedeh-hover-opacity, .5)}.popper:focus{outline:none}.popper:focus .fa{zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}.popper.disabled .fa-calendar{color:var(--sedeh-disabled-color, #888)}.popper.disabled:hover .fa-calendar{cursor:default;color:var(--sedeh-disabled-color, #888)}.popper.disabled{color:var(--sedeh-disabled-color, #888);pointer-events:none;cursor:default;text-decoration:none}.calendar-box{display:flex;flex-direction:row;cursor:default;width:100%;display:inline-block}.calendar-box date{flex:1}.calendar-box .popper{cursor:pointer;flex:0 0 15px}.calendar{display:table;width:210px;position:absolute;background-color:#fff;z-index:2;border:1px solid #ddd;border-radius:4px;box-shadow:var(--sedeh-box-shadow, 3px 3px 3px #999)}.calendar *{box-sizing:border-box}.calendar .calendar-navs{background-color:#f5f5f5}.calendar .month-nav,.calendar .year-nav{padding:2px;display:flex;flex-direction:row;justify-content:space-between}.calendar .month-nav button,.calendar .year-nav button{border:0;background:transparent;cursor:pointer}.calendar .month-nav button:hover,.calendar .year-nav button:hover{color:red}.calendar .month-grid .day-names{display:flex;flex-direction:row;background:whitesmoke;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.calendar .month-grid .weeks{display:flex;flex-direction:column}.calendar .month-grid .week{display:flex;flex-direction:row}.calendar .month-grid .day-names{border-top:1px dotted #ddd;border-bottom:1px dashed #ddd}.calendar .month-grid .week-date,.calendar .month-grid .day-name{text-align:center;padding:2px;display:block;width:30px;display:flex;justify-content:center;align-items:center}.calendar .month-grid .week-date{height:30px;position:relative;padding:5px}.calendar .month-grid .week-date .date-text{font-size:10px;z-index:10}.calendar .month-grid .week-date:after{content:\"\";height:24px;width:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;transition:background-color .15s linear,color .15s linear;z-index:1}.calendar .month-grid .week-date.disabled{color:#aaa}.calendar .month-grid .week-date.enabled{cursor:pointer}.calendar .month-grid .week-date.enabled:focus{outline:0}.calendar .month-grid .week-date.enabled:hover .date-text,.calendar .month-grid .week-date.enabled:focus .date-text{font-weight:700;color:#00f}.calendar .month-grid .week-date.enabled:hover:after,.calendar .month-grid .week-date.enabled:focus:after{background-color:#f5f5f5}.calendar .month-grid .week-date.selected .date-text{color:#fff!important}.calendar .month-grid .week-date.selected:after{background-color:#00f!important}.calendar .month-grid .week-date.today:after{background-color:#add8e6;font-weight:700;color:#fff}@media print{.calendar-box .popper{display:none}}\n"] }]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { onIntoComponentChange: [{
type: Output,
args: ["onIntoComponentChange"]
}] } });
class CalendarIntoPipeModule {
static forRoot() {
return {
ngModule: CalendarIntoPipeModule,
providers: []
};
}
constructor(pool) {
pool.registerComponent('calendar', CalendarComponent);
}
}
CalendarIntoPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarIntoPipeModule, deps: [{ token: ComponentPool }], target: i0.ɵɵFactoryTarget.NgModule });
CalendarIntoPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CalendarIntoPipeModule, declarations: [CalendarComponent], imports: [CommonModule], exports: [CalendarComponent] });
CalendarIntoPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarIntoPipeModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarIntoPipeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [CalendarComponent],
exports: [CalendarComponent],
entryComponents: [CalendarComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}], ctorParameters: function () {
return [{ type: ComponentPool, decorators: [{
type: Inject,
args: [ComponentPool]
}] }];
} });
class CheckboxComponent {
constructor() {
this.displayable = true;
this.disabled = false;
this.active = true;
this.validate = (item, newValue) => true;
this.onIntoComponentChange = new EventEmitter();
}
keyup(event) {
const code = event.which;
if (code === 13 && !this.disabled) {
event.target.click();
}
}
click(event, checked) {
event.stopPropagation();
event.preventDefault();
const newState = (checked ? this.state1 : this.state2);
if (!this.disabled && this.validate(this.data, newState)) {
this.displayable = false;
this.source = newState;
this.onIntoComponentChange.emit({
id: this.id,
name: this.name,
value: this.source,
type: "check",
item: this.data
});
if (this.useFont) {
setTimeout(() => {
if (this.check) {
this.check.nativeElement.focus();
}
if (this.uncheck) {
this.uncheck.nativeElement.focus();
}
}, 66);
}
else {
setTimeout(() => this.displayable = true, 66);
}
}
}
static settingsPatterns() {
return ['checkbox:true:false:false:false', 'checkbox:true:false:true:false', 'checkbox:true:false:true:true']; //state1 state2, useFont, onoff
}
transform(source, data, args) {
this.state1 = args && args.length ? String(args[0]) : "";
this.state2 = (args && args.length > 1) ? String(args[1]) : '';
this.useFont = (args && args.length > 2 && args[2].length) ? args[2] === 'true' : false;
this.onOff = (args && args.length > 3 && args[3].length) ? args[3] === 'true' : false;
this.source = String(source);
this.data = data;
}
}
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxComponent, selector: "checkbox-component", outputs: { onIntoComponentChange: "onIntoComponentChange" }, viewQueries: [{ propertyName: "check", first: true, predicate: ["check"], descendants: true }, { propertyName: "uncheck", first: true, predicate: ["uncheck"], descendants: true }], ngImport: i0, template: `
<span *ngIf="useFont" class="check-font {{disabled ? 'disabled' : ''}}">
<span *ngIf="source === state1"
#check tabindex="{{active ? 0 : -1}}"
class="fa"
[class.fa-toggle-on]="onOff"
[class.fa-check]="!onOff"
(keyup)="keyup($event)"
(click)="click($event, false)"></span>
<span *ngIf="source === state2"
#uncheck tabindex="{{active ? 0 : -1}}"
class="fa"
checked
[class.fa-toggle-off]="onOff"
[class.fa-close]="!onOff"
(keyup)="keyup($event)"
(click)="click($event, true)"></span>
</span>
<input *ngIf="!useFont && displayable"
type="checkbox"
tabindex="{{active ? 0 : -1}}"
[disabled]="disabled"
[checked]="source===state1"
(keyup)="keyup($event)"
(click)="click($event, source!==state1)" />
`, isInline: true, styles: [":host .check-font .fa{margin:var(--sedeh-margin, 0 5px)}:host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}.check-font:hover{opacity:var(--sedeh-hover-opacity, .5)}.check-font .fa:focus{outline:none;zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}.check-font{cursor:pointer}.check-font.disabled:hover{color:var(--sedeh-disabled-color, #888)}.check-font.disabled{color:var(--sedeh-disabled-color, #888);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'checkbox-component', template: `
<span *ngIf="useFont" class="check-font {{disabled ? 'disabled' : ''}}">
<span *ngIf="source === state1"
#check tabindex="{{active ? 0 : -1}}"
class="fa"
[class.fa-toggle-on]="onOff"
[class.fa-check]="!onOff"
(keyup)="keyup($event)"
(click)="click($event, false)"></span>
<span *ngIf="source === state2"
#uncheck tabindex="{{active ? 0 : -1}}"
class="fa"
checked
[class.fa-toggle-off]="onOff"
[class.fa-close]="!onOff"
(keyup)="keyup($event)"
(click)="click($event, true)"></span>
</span>
<input *ngIf="!useFont && displayable"
type="checkbox"
tabindex="{{active ? 0 : -1}}"
[disabled]="disabled"
[checked]="source===state1"
(keyup)="keyup($event)"
(click)="click($event, source!==state1)" />
`, styles: [":host .check-font .fa{margin:var(--sedeh-margin, 0 5px)}:host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}.check-font:hover{opacity:var(--sedeh-hover-opacity, .5)}.check-font .fa:focus{outline:none;zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}.check-font{cursor:pointer}.check-font.disabled:hover{color:var(--sedeh-disabled-color, #888)}.check-font.disabled{color:var(--sedeh-disabled-color, #888);pointer-events:none}\n"] }]
}], propDecorators: { check: [{
type: ViewChild,
args: ["check"]
}], uncheck: [{
type: ViewChild,
args: ["uncheck"]
}], onIntoComponentChange: [{
type: Output,
args: ["onIntoComponentChange"]
}] } });
class CheckboxIntoPipeModule {
static forRoot() {
return {
ngModule: CheckboxIntoPipeModule,
providers: []
};
}
constructor(pool) {
pool.registerComponent('checkbox', CheckboxComponent);
}
}
CheckboxIntoPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxIntoPipeModule, deps: [{ token: ComponentPool }], target: i0.ɵɵFactoryTarget.NgModule });
CheckboxIntoPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CheckboxIntoPipeModule, declarations: [CheckboxComponent], imports: [CommonModule], exports: [CheckboxComponent] });
CheckboxIntoPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxIntoPipeModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxIntoPipeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [CheckboxComponent],
exports: [CheckboxComponent],
entryComponents: [CheckboxComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}], ctorParameters: function () {
return [{ type: ComponentPool, decorators: [{
type: Inject,
args: [ComponentPool]
}] }];
} });
class EmailComponent {
constructor() {
this.disabled = false;
this.active = true;
this.validate = (item, newValue) => true;
this.onIntoComponentChange = new EventEmitter();
}
static settingsPatterns() {
return ['email:true']; //islink
}
transform(source, data, args) {
this.isLink = (args && args.length && args[0].length) ? args[0] === 'true' : true;
this.source = source;
}
keyup(event) {
const code = event.which;
event.stopPropagation();
event.preventDefault();
if (code === 13 && !this.disabled) {
event.target.click();
}
}
change(event) {
if (!this.disabled) {
this.onIntoComponentChange.emit({
id: this.id,
name: this.name,
value: this.source,
type: "mail-to",
item: event.type
});
}
}
}
EmailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
EmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EmailComponent, selector: "email", ngImport: i0, template: `
<a
*ngIf="isLink"
tabindex="{{active ? 0 : -1}}"
class="email {{disabled ? 'disabled':''}}"
[href]="'mailto:' + source" (keyup)='keyup($event)'
(click)="change($event)">
<span class='fa fa-envelope' aria-hidden='true'></span>
<span [textContent]="source"></span>
</a>
<span *ngIf="!isLink">
<span class='fa fa-envelope' aria-hidden='true'></span>
<span [textContent]="source"></span>
</span>
`, isInline: true, styles: [":host{display:table;float:left;min-height:var(--sedeh-min-height, 25px)}:host:hover .email{opacity:var(--sedeh-hover-opacity, .5)}:host .email{text-decoration:none}:host .email:focus{outline:none}:host .email:focus .fa{zoom:1.1;right:var(--sedeh-shift-right, 0);position:relative;color:var(--sedeh-focus-color, darkblue)}:host .email.disabled{color:var(--sedeh-disabled-color, #888);cursor:default;pointer-events:none;text-decoration:none}:host .email.disabled .fa{color:var(--sedeh-disabled-color, #888)}:host .fa{margin:var(--sedeh-margin, 0 5px)}@media print{:host a{text-decoration:none}:host a .fa-envelope{display:none}:host .fa-envelope{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EmailComponent, decorators: [{
type: Component,
args: [{ selector: 'email', template: `
<a
*ngIf="isLink"
tabindex="{{active ? 0 : -1}}"
class="email {{disabled ? 'disabled':''}}"
[href]="'mailto:' + source" (keyup)='keyup($event)'
(click)="change($event)">
<span class='fa fa-envelope' aria-hidden='true'></span>
<span [textContent]="source"></span>
</a>
<span *ngIf="!isLink">
<span class='fa fa-envelope' aria-hidden='true'></span>
<span [textContent]="source"></span>
</span>
`, styles: [":host{display:table;float:left;min-hei