ng-materialgrammi
Version:
An Angular framework which follows
1,090 lines (1,074 loc) • 260 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i1 from '@angular/platform-browser';
import * as i1$2 from '@angular/common/http';
import { HttpHeaders, HttpEventType, HttpClientModule } from '@angular/common/http';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import { FormControl } from '@angular/forms';
;
;
;
;
class MaterialgrammiService {
constructor() {
this.widgets = [];
this.collapse = [];
this.dropdown = [];
this.megamenu = [];
this.modal = [];
this.overlay = [];
this.wizard = [];
this.slideshow = [];
this.offcanvas = [];
this.tab = [];
this.notifications = {
topRight: {
status: new BehaviorSubject([]),
data: []
},
topLeft: {
status: new BehaviorSubject([]),
data: []
},
topCenter: {
status: new BehaviorSubject([]),
data: []
},
bottomRight: {
status: new BehaviorSubject([]),
data: []
},
bottomLeft: {
status: new BehaviorSubject([]),
data: []
},
bottomCenter: {
status: new BehaviorSubject([]),
data: []
},
centerRight: {
status: new BehaviorSubject([]),
data: []
},
centerLeft: {
status: new BehaviorSubject([]),
data: []
},
centerCenter: {
status: new BehaviorSubject([]),
data: []
}
};
this.slideshowv2 = [];
/*
options: {
timer: 0 | 1-any-number,
class: "",
size: "s | m | l"
}
*/
this.notificationOptionsDefaults = {
timer: 2000,
class: "blueGrey8 text-grey2 radius-5 pad-10 marginT-10 outline-grey7 shadow-1",
size: "m"
};
}
addNotification(position = "topRight", message = "demo notification", options = {}) {
options.timer = !options.timer ? this.notificationOptionsDefaults.timer : options.timer;
options.class = !options.class ? this.notificationOptionsDefaults.class : options.class;
options.size = !options.size ? this.notificationOptionsDefaults.size : options.size;
let notify = {
message,
options,
id: this.makeid(10, this.makeid(3, "notification"))
};
const allowedPositions = Object.keys(this.notifications);
if (allowedPositions.includes(position)) {
this.notifications[position].data = [notify, ...this.notifications[position].data];
this.notifications[position].status.next(this.notifications[position].data);
}
if (notify.options.timer !== 0) {
var $this = this;
setTimeout(function () {
$this.deleteNotification(position, notify.id);
}, notify.options.timer);
}
}
watchNotification(position = "topRight") {
return Object.keys(this.notifications).includes(position) ? this.notifications[position].status.asObservable() : false;
}
deleteNotification(position = "topRight", id) {
if (Object.keys(this.notifications).includes(position)) {
this.notifications[position].data = this.notifications[position].data.filter((d) => {
return d.id != id;
});
}
this.notifications[position].status.next(this.notifications[position].data);
}
makeid(length, str) {
str = typeof str == "string" ? str.split(" ").join("") : str;
var result = '';
var characters = 'ABCDEFGHIJKLMNOP+QRSTUVWXYZabcdefgh_ijklmnopqrst=uvwxyz0123456789-';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
}
return result + '-' + str;
}
registerSlideShowv2(id, items, active = items[0]) {
id = id === "" ? this.makeid(10, "slideshowv2") : id;
this.slideshowv2[id] = {
items,
current: active,
active: new BehaviorSubject(active)
};
for (let i = 0; i < items.length; i++) {
this.registerWidget(items[i], "slideshowv2", id);
}
this.openWidget(active, "slideshowv2", id);
return id;
}
watchSlideShowv2(id) {
return this.slideshowv2[id].active.asObservable();
}
nextSlideV2(id) {
let current = this.slideshowv2[id].current;
let next = "";
for (let i = 0; i < this.slideshowv2[id].items.length; i++) {
if (this.slideshowv2[id].items[i] === current) {
next = this.slideshowv2[id].items[i + 1] ? this.slideshowv2[id].items[i + 1] : this.slideshowv2[id].items[0];
}
this.closeWidget(this.slideshowv2[id].items[i], "slideshowv2", id);
}
this.slideshowv2[id].current = next;
this.openWidget(next, "slideshowv2", id);
this.slideshowv2[id].active.next(next);
}
prevSlideV2(id) {
let current = this.slideshowv2[id].current;
let next = "";
for (let i = 0; i < this.slideshowv2[id].items.length; i++) {
if (this.slideshowv2[id].items[i] === current) {
next = this.slideshowv2[id].items[i - 1] ? this.slideshowv2[id].items[i - 1] : this.slideshowv2[id].items[this.slideshowv2[id].items.length - 1];
this.closeWidget(this.slideshowv2[id].items[i], "slideshowv2", id);
}
}
this.slideshowv2[id].current = next;
this.openWidget(next, "slideshowv2", id);
this.slideshowv2[id].active.next(next);
}
registerTab(id, components, active) {
this.tab[id] = {
components,
active: new BehaviorSubject(active)
};
for (let i = 0; i < components.length; i++) {
this.registerWidget(components[i], "tab", id);
}
this.openTab(id, components[0]);
}
openTab(id, component_id) {
this.closeAllTab(id);
this.openWidget(component_id, "tab", id);
this.tab[id].active.next(component_id);
}
closeAllTab(id) {
if (this.tab && this.tab[id]) {
for (let i = 0; i < this.tab[id].components.length; i++) {
this.closeWidget(this.tab[id].components[i], "tab", id);
}
}
}
watchTab(id) {
return this.tab[id].active.asObservable();
}
registerOffCanvas(id, status) {
this.offcanvas[id] = {
id,
status: new BehaviorSubject(status)
};
}
openCanvas(id) {
this.offcanvas[id].status.next(true);
}
closeCanvas(id) {
this.offcanvas[id].status.next(false);
}
watchCanvas(id) {
return this.offcanvas[id].status.asObservable();
}
registerSlideshow(id, activePage, play, next, previous, playInterval, timer) {
var obj = {
id,
playInterval,
timer,
next: new BehaviorSubject(next),
previous: new BehaviorSubject(previous),
active: new BehaviorSubject(activePage),
play: new BehaviorSubject(play)
};
this.slideshow[id] = obj;
}
watchSlideshowPlay(id) {
return this.slideshow[id].play.asObservable();
}
watchSlideshowNext(id) {
return this.slideshow[id].next.asObservable();
}
watchSlideshowPrevious(id) {
return this.slideshow[id].previous.asObservable();
}
watchSlideshowActivePage(id) {
return this.slideshow[id].active.asObservable();
}
nextSlide(id) {
this.slideshow[id].next.next(true);
}
previousSlide(id) {
this.slideshow[id].previous.next(true);
}
changeSlidePlay(id, play) {
this.slideshow[id].play.next(play);
}
changeSlideActivePage(id, activePage) {
this.slideshow[id].active.next(activePage);
}
playSlideShow(id) {
var selected = this.slideshow[id];
if (selected) {
if (selected.playInterval) {
this.pauseSlideshow(id);
}
selected.play.next(true);
var _this = this;
this.nextSlide(id);
selected.playInterval = setInterval(() => {
_this.nextSlide(id);
}, selected.timer);
}
}
pauseSlideshow(id) {
var selected = this.slideshow[id];
if (selected && selected.playInterval) {
clearInterval(selected.playInterval);
selected.playInterval = false;
}
}
registerWizard(wizardId, components, active = 0) {
let next = {};
let prev = {};
if (components[active]) {
next = {
index: components && components[active + 1] ? active + 1 : active,
id: components && components[active + 1] ? components[active + 1] : components[active]
};
prev = {
index: components && components[active - 1] ? active - 1 : active,
id: components && components[active - 1] ? components[active - 1] : components[active]
};
}
else {
// defaults
active = 0;
next = {
index: components && components[1] ? 1 : 0,
id: components && components[1] ? components[1] : components[0]
};
prev = {
index: 0,
id: components[0]
};
}
this.wizard[wizardId] = {
active: new BehaviorSubject(0),
on: active,
completed: new BehaviorSubject(false),
next,
prev,
components
};
for (let i = 0; i < components.length; i++) {
this.registerWidget(components[i], "wizard", wizardId);
}
this.openWidget(components[0], "wizard", wizardId);
}
wizardNextStep(wizardId) {
let activateIndex = this.wizard[wizardId].on + 1;
this.activateWizardStep(wizardId, activateIndex);
}
WizardPreviousStep(wizardId) {
let activateIndex = this.wizard[wizardId].on - 1;
this.activateWizardStep(wizardId, activateIndex);
}
WizardCloseAll(wizardId) {
if (this.wizard[wizardId] && this.wizard[wizardId].components) {
for (let i = 0; i < this.wizard[wizardId].components.length; i++) {
this.closeWidget(this.wizard[wizardId].components[i], "wizard", wizardId);
}
}
}
activateWizardStep(wizardId, index) {
if (this.wizard[wizardId].components[index]) {
if (index >= this.wizard[wizardId].components.length - 1) {
this.isWizardComplete(wizardId);
}
else {
this.isWizardNotComplete(wizardId);
}
this.wizard[wizardId].on = index;
this.wizard[wizardId].prev.index = this.wizard[wizardId].components[index - 1] ? index - 1 : index;
this.wizard[wizardId].next.index = this.wizard[wizardId].components[index + 1] ? index + 1 : index;
this.wizard[wizardId].prev.id = this.wizard[wizardId].components[index - 1] ?
this.wizard[wizardId].components[index - 1] : this.wizard[wizardId].components[index];
this.wizard[wizardId].next.id = this.wizard[wizardId].components[index + 1] ?
this.wizard[wizardId].components[index + 1] : this.wizard[wizardId].components[index];
;
this.WizardCloseAll(wizardId);
this.openWidget(this.wizard[wizardId].components[index], "wizard", wizardId);
this.watchWidget(this.wizard[wizardId].components[index], "wizard", wizardId).subscribe((data) => {
if (data) {
this.wizard[wizardId].active.next(index);
}
});
}
}
isWizardComplete(wizardId) {
this.wizard[wizardId].completed.next(true);
}
isWizardNotComplete(wizardId) {
this.wizard[wizardId].completed.next(false);
}
watchWizardActive(wizardId) {
return this.wizard[wizardId].active.asObservable();
}
watchWizardCompleted(wizardId) {
return this.wizard[wizardId].completed.asObservable();
}
registerOverlay(id, status) {
this.overlay[id] = {
id,
status: new BehaviorSubject(status)
};
}
openOverlay(id) {
this.overlay[id].status.next(true);
}
closeOverlay(id) {
this.overlay[id].status.next(false);
}
watchOverlay(id) {
return this.overlay[id].status.asObservable();
}
registerModal(id, status) {
this.modal[id] = {
id,
status: new BehaviorSubject(status)
};
}
openModal(id) {
this.modal[id].status.next(true);
}
closeModal(id) {
this.modal[id].status.next(false);
}
watchModal(id) {
return this.modal[id].status.asObservable();
}
registerDropDown(id, status) {
this.dropdown[id] = {
id,
status: new BehaviorSubject(status)
};
}
openDropDown(id) {
this.dropdown[id].status.next(true);
}
closeDropDown(id) {
this.dropdown[id].status.next(false);
}
watchDropDown(id) {
return this.dropdown[id].status.asObservable();
}
registerCollapse(id, status) {
this.collapse[id] = {
id,
status: new BehaviorSubject(status)
};
}
openCollapse(id) {
this.collapse[id].status.next(true);
}
closeCollapse(id) {
this.collapse[id].status.next(false);
}
watchCollapse(id) {
return this.collapse[id].status.asObservable();
}
getWidgetId(id, type, parent_id) {
return id + '_' + type + '_' + parent_id;
}
widgetExists(id, parent_type, parent_id) {
return this.widgets[this.getWidgetId(id, parent_type, parent_id)] ? true : false;
}
registerWidget(id, parent_type, parent_id, options = {}) {
let mywidgetid = this.getWidgetId(id, parent_type, parent_id);
this.widgets[mywidgetid] = {
id,
type: parent_type,
parent_id: parent_id,
options: new BehaviorSubject(options),
status: new BehaviorSubject(false)
};
}
openWidget(id, parent_type, parent_id) {
let mywidgetid = this.getWidgetId(id, parent_type, parent_id);
if (this.widgets && this.widgets[mywidgetid]) {
this.widgets[mywidgetid].status.next(true);
}
}
closeWidget(id, parent_type, parent_id) {
let mywidgetid = this.getWidgetId(id, parent_type, parent_id);
if (this.widgets && this.widgets[mywidgetid]) {
this.widgets[mywidgetid].status.next(false);
}
}
closeAllParentWidgets(parent_type, parent_id) {
let allWidgetIds = Object.keys(this.widgets);
for (let i = 0; i < allWidgetIds.length; i++) {
if (this.widgets[allWidgetIds[i]].type == parent_type && this.widgets[allWidgetIds[i]].parent_id == parent_id) {
this.closeWidget(this.widgets[allWidgetIds[i]].id, parent_type, parent_id);
}
}
}
watchWidget(id, parent_type, parent_id) {
return this.widgets[this.getWidgetId(id, parent_type, parent_id)].status.asObservable();
}
watchOptions(id, parent_type, parent_id) {
return this.widgets[this.getWidgetId(id, parent_type, parent_id)].options.asObservable();
}
registerMegaMenu(id, links) {
this.megamenu[id] = {
id,
active: new BehaviorSubject("")
};
for (let i = 0; i < links.length; i++) {
this.registerWidget(links[i], "megamenu", id);
}
}
watchMegaMenu(id) {
return this.megamenu[id].active.asObservable();
}
openMegaMenu(id, targetid) {
this.megamenu[id].active.next(targetid);
if (this.widgetExists(targetid, "megamenu", id)) {
this.closeMegaMenu(id);
this.openWidget(targetid, "megamenu", id);
}
}
closeMegaMenu(id) {
this.closeAllParentWidgets("megamenu", id);
this.megamenu[id].active.next(false);
}
fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
}
catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
copyToClipboard(text) {
if (!navigator.clipboard) {
this.fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function () {
console.log('Async: Copying to clipboard was successful!');
}, function (err) {
console.error('Async: Could not copy text: ', err);
});
}
scrollTo(query) {
if (document.querySelectorAll(query)[0]) {
document.querySelectorAll(query)[0].scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
}
}
}
MaterialgrammiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MaterialgrammiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
MaterialgrammiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MaterialgrammiService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MaterialgrammiService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class SeoService {
constructor(meta, title) {
this.meta = meta;
this.title = title;
this.keywords = [];
this.apptitle = "materialgrammi";
}
setDescription(desc) {
this.meta.addTag({
name: "description",
content: desc
});
}
setAuthor(desc) {
this.meta.addTag({
name: "author",
content: desc
});
}
addKeywords(keyw) {
var _a, _b;
if (typeof keyw === "string") {
(_a = this.keywords) === null || _a === void 0 ? void 0 : _a.push(keyw);
}
else {
for (let i = 0; i < keyw.length; i++) {
(_b = this.keywords) === null || _b === void 0 ? void 0 : _b.push(keyw[i]);
}
}
this.setKeyWords();
}
setKeyWords() {
if (this.keywords) {
this.meta.addTag({
name: "description",
content: this.keywords.join(", ")
});
}
}
clearKeyWords() {
this.keywords = [];
}
setTitle(t) {
this.apptitle = t;
this.title.setTitle(this.apptitle);
}
enableCrawlers(status = true) {
if (status) {
this.meta.addTag({
name: "robots",
content: "index, follow"
});
}
}
}
SeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SeoService, deps: [{ token: i1.Meta }, { token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
SeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SeoService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SeoService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.Meta }, { type: i1.Title }]; } });
class MaterialgrammiComponent {
constructor() { }
ngOnInit() {
}
}
MaterialgrammiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MaterialgrammiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MaterialgrammiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MaterialgrammiComponent, selector: "lib-materialgrammi", ngImport: i0, template: `
<p>
materialgrammi works!
</p>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MaterialgrammiComponent, decorators: [{
type: Component,
args: [{
selector: 'lib-materialgrammi',
template: `
<p>
materialgrammi works!
</p>
`,
styles: []
}]
}], ctorParameters: function () { return []; } });
class TestComponentComponent {
constructor(myservice) {
this.myservice = myservice;
this.id = "widget";
}
ngOnInit() {
}
}
TestComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TestComponentComponent, deps: [{ token: MaterialgrammiService }], target: i0.ɵɵFactoryTarget.Component });
TestComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: TestComponentComponent, selector: "lib-test", ngImport: i0, template: "<a style=\"padding: 5px; border: 1px solid #212121; cursor: pointer;\"><ng-content></ng-content></a>\n", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TestComponentComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-test', template: "<a style=\"padding: 5px; border: 1px solid #212121; cursor: pointer;\"><ng-content></ng-content></a>\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: MaterialgrammiService }]; } });
class AccordionItemComponent {
constructor() {
this.item = {};
this.isClicked = new EventEmitter();
this.itemid = 0;
this.theme = "primary";
}
ngOnInit() {
}
onClickTitle() {
this.isClicked.emit(this.itemid);
}
isActive(state) {
return state ? 'active' : '';
}
}
AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AccordionItemComponent, selector: "mg-accordion-item", inputs: { item: "item", itemid: "itemid", theme: "theme" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: "<div class=\"title {{theme}}\" [ngClass]=\"isActive(item.active)\" [innerHtml]=\"item.title\"\n (click)=\"onClickTitle()\"></div>\n<div class=\"body {{theme}}\" [innerHtml]=\"item.description\" [ngClass]=\"isActive(item.active)\"></div>\n", styles: [""], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionItemComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-accordion-item', template: "<div class=\"title {{theme}}\" [ngClass]=\"isActive(item.active)\" [innerHtml]=\"item.title\"\n (click)=\"onClickTitle()\"></div>\n<div class=\"body {{theme}}\" [innerHtml]=\"item.description\" [ngClass]=\"isActive(item.active)\"></div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { item: [{
type: Input
}], isClicked: [{
type: Output
}], itemid: [{
type: Input
}], theme: [{
type: Input
}] } });
class AccordionComponent {
constructor() {
this.theme = "primary";
this.items = [{
title: "Panel 1",
description: "description of panel 1",
active: false
}, {
title: "Panel 2",
description: "description of panel 2",
active: true
}, {
title: "Panel 3",
description: "description of panel 3",
active: false
}, {
title: "Panel 4",
description: "description of panel 4",
active: false
}, {
title: "Panel 5",
description: "description of panel 5",
active: false
}];
this.class = "";
}
ngOnInit() {
}
turnAllOff(missItem) {
for (let i = 0; i < this.items.length; i++) {
if (missItem != i) {
this.items[i].active = false;
}
}
}
toggleItem(itemNumber) {
this.items[itemNumber].active = !this.items[itemNumber].active;
this.turnAllOff(itemNumber);
}
}
AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AccordionComponent, selector: "mg-accordion", inputs: { theme: "theme", items: "items", class: "class" }, ngImport: i0, template: "<div>\n <ng-container *ngIf=\"items.length > 0\">\n <div class=\"accordion\" [ngClass]=\"class\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"marginB-2\">\n <mg-accordion-item [theme]=\"theme\" [itemid]=\"i\" [item]=\"item\" (isClicked)=\"toggleItem($event)\">\n </mg-accordion-item>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n", styles: [""], components: [{ type: AccordionItemComponent, selector: "mg-accordion-item", inputs: ["item", "itemid", "theme"], outputs: ["isClicked"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-accordion', template: "<div>\n <ng-container *ngIf=\"items.length > 0\">\n <div class=\"accordion\" [ngClass]=\"class\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <div class=\"marginB-2\">\n <mg-accordion-item [theme]=\"theme\" [itemid]=\"i\" [item]=\"item\" (isClicked)=\"toggleItem($event)\">\n </mg-accordion-item>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
type: Input
}], items: [{
type: Input
}], class: [{
type: Input
}] } });
class WidgetComponent {
constructor(mainService, cd) {
this.mainService = mainService;
this.cd = cd;
this.id = "general-widget-1";
this.parent = "general-parent-1";
this.type = "general";
this.options = false;
this.status = false;
this.standalone = false;
this.class = "";
this.triggered = new EventEmitter();
this.settings = {
header: {
always: false
},
footer: {
always: false
}
};
this.myClasses = "";
}
ngOnInit() {
this.init();
this.myClasses = this.class;
}
ngOnChanges() {
this.init();
this.myClasses = this.class;
}
ngAfterContentChecked() {
this.myClasses = this.class;
}
init() {
if (this.standalone) {
this.registerWidget();
if (this.status) {
this.openWidget();
}
else {
this.closeWidget();
}
}
this.watch();
this.watchOptions();
}
setOptions() {
if (this.options && this.options.header.always) {
this.settings.header.always = true;
}
if (this.options && this.options.footer.always) {
this.settings.footer.always = true;
}
}
registerWidget() {
this.mainService.registerWidget(this.id, this.type, this.parent, this.options);
if (this.status) {
this.openWidget();
}
}
openWidget() {
this.mainService.openWidget(this.id, this.type, this.parent);
}
closeWidget() {
this.mainService.closeWidget(this.id, this.type, this.parent);
}
watch() {
if (this.mainService.widgetExists(this.id, this.type, this.parent)) {
this.mainService.watchWidget(this.id, this.type, this.parent).subscribe((data) => {
this.status = data;
this.triggered.emit({
status: this.status,
options: this.options
});
});
}
}
watchOptions() {
if (this.mainService.widgetExists(this.id, this.type, this.parent)) {
this.mainService.watchWidget(this.id, this.type, this.parent).subscribe((data) => {
this.options = data;
});
}
}
}
WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: WidgetComponent, deps: [{ token: MaterialgrammiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: WidgetComponent, selector: "mg-widget", inputs: { id: "id", parent: "parent", type: "type", options: "options", status: "status", standalone: "standalone", class: "class" }, outputs: { triggered: "triggered" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"myClasses\">\n <ng-container *ngIf=\"settings.header.always || status\">\n <ng-content select=\"[mg-data=header]\"></ng-content>\n </ng-container>\n <ng-container *ngIf=\"status\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container *ngIf=\"settings.footer.always || status\">\n <ng-content select=\"[mg-data=footer]\"></ng-content>\n </ng-container>\n</div>\n\n", styles: [""], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: WidgetComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-widget', template: "<div [ngClass]=\"myClasses\">\n <ng-container *ngIf=\"settings.header.always || status\">\n <ng-content select=\"[mg-data=header]\"></ng-content>\n </ng-container>\n <ng-container *ngIf=\"status\">\n <ng-content></ng-content>\n </ng-container>\n <ng-container *ngIf=\"settings.footer.always || status\">\n <ng-content select=\"[mg-data=footer]\"></ng-content>\n </ng-container>\n</div>\n\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: MaterialgrammiService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
type: Input
}], parent: [{
type: Input
}], type: [{
type: Input
}], options: [{
type: Input
}], status: [{
type: Input
}], standalone: [{
type: Input
}], class: [{
type: Input
}], triggered: [{
type: Output
}] } });
class AlertComponent {
constructor() {
this.theme = "primary";
this.show = true;
this.alignCenter = false;
this.closeBtn = "";
this.class = "";
}
ngOnInit() {
}
hide() {
this.show = false;
}
}
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AlertComponent, selector: "mg-alert", inputs: { theme: "theme", show: "show", alignCenter: "alignCenter", closeBtn: "closeBtn", class: "class" }, ngImport: i0, template: "<div class=\"alert {{theme}}\" *ngIf=\"show\" [ngClass]=\"class\">\n <a class=\"closealert\" (click)=\"hide()\" *ngIf=\"closeBtn!= ''\" [innerHtml]=\"closeBtn\"></a>\n <span [ngClass]=\"{'text-center block' : alignCenter === true}\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [""], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-alert', template: "<div class=\"alert {{theme}}\" *ngIf=\"show\" [ngClass]=\"class\">\n <a class=\"closealert\" (click)=\"hide()\" *ngIf=\"closeBtn!= ''\" [innerHtml]=\"closeBtn\"></a>\n <span [ngClass]=\"{'text-center block' : alignCenter === true}\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
type: Input
}], show: [{
type: Input
}], alignCenter: [{
type: Input
}], closeBtn: [{
type: Input
}], class: [{
type: Input
}] } });
class BreadcrumbComponent {
constructor() {
this.links = [];
this.darkmode = false;
this.devider = "/";
this.class = "";
}
ngOnInit() {
}
showDarkMode() {
return this.darkmode ? "dark" : "lite";
}
active(link) {
return link.active ? 'active' : '';
}
}
BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: BreadcrumbComponent, selector: "mg-breadcrumb", inputs: { links: "links", darkmode: "darkmode", devider: "devider", class: "class" }, ngImport: i0, template: "<div class=\"breadcrumb-wrapper\" [ngClass]=\"showDarkMode() + ' ' + class\" *ngIf=\"links.length > 0\">\n <ng-container *ngFor=\"let link of links; let i = index;\">\n <a [routerLink]=\"link.url\" class=\"breadcrumb\" [ngClass]=\"active(link)\">{{link.name}}</a>\n <span class=\"marginL-5 marginR-5\" *ngIf=\"links[i+1]\" [innerHtml]=\"devider\"></span>\n </ng-container>\n</div>\n", styles: [""], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-breadcrumb', template: "<div class=\"breadcrumb-wrapper\" [ngClass]=\"showDarkMode() + ' ' + class\" *ngIf=\"links.length > 0\">\n <ng-container *ngFor=\"let link of links; let i = index;\">\n <a [routerLink]=\"link.url\" class=\"breadcrumb\" [ngClass]=\"active(link)\">{{link.name}}</a>\n <span class=\"marginL-5 marginR-5\" *ngIf=\"links[i+1]\" [innerHtml]=\"devider\"></span>\n </ng-container>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { links: [{
type: Input
}], darkmode: [{
type: Input
}], devider: [{
type: Input
}], class: [{
type: Input
}] } });
class CardComponent {
constructor() {
this.class = ``;
}
ngOnInit() {
}
}
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CardComponent, selector: "mg-card", inputs: { class: "class" }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"class\">\n <ng-content select=\"[header]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[footer]\"></ng-content>\n</div>\n", styles: [""], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-card', template: "<div class=\"card\" [ngClass]=\"class\">\n <ng-content select=\"[header]\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"[footer]\"></ng-content>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { class: [{
type: Input
}] } });
class ChipComponent {
constructor() {
this.theme = "primary";
this.outline = false;
this.class = "";
this.closeBtn = `<i class="fas fa-times"></i>`;
this.close = new EventEmitter();
}
ngOnInit() {
}
chipClass() {
let results = "";
results += this.theme;
results += this.outline ? " outlined" : "";
return results;
}
}
ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ChipComponent, selector: "mg-chip", inputs: { theme: "theme", outline: "outline", class: "class", closeBtn: "closeBtn" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"chip\" [ngClass]=\"chipClass() + ' ' + class\">\n <span><ng-content></ng-content></span>\n <span [innerHtml]=\"closeBtn\" class=\"marginL-5\" (click)=\"close.emit(true)\"></span>\n</div>\n", styles: [""], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChipComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-chip', template: "<div class=\"chip\" [ngClass]=\"chipClass() + ' ' + class\">\n <span><ng-content></ng-content></span>\n <span [innerHtml]=\"closeBtn\" class=\"marginL-5\" (click)=\"close.emit(true)\"></span>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
type: Input
}], outline: [{
type: Input
}], class: [{
type: Input
}], closeBtn: [{
type: Input
}], close: [{
type: Output
}] } });
class DragableComponent {
constructor() {
this.dragable = true;
this.data = {
name: "Ashbeel",
profession: "Software Engineer"
};
this.class = "";
this.onEvent = new EventEmitter();
this.eventProperties = {
isInDragMode: false
};
}
ngOnInit() {
}
onDrag(event) {
event.dataTransfer.setData("text", JSON.stringify(this.data));
event.dataTransfer.effectAllowed = "all";
event.stopPropagation();
this.onEvent.emit(this.eventProperties);
}
}
DragableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DragableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DragableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DragableComponent, selector: "mg-dragable", inputs: { dragable: "dragable", data: "data", class: "class" }, outputs: { onEvent: "onEvent" }, ngImport: i0, template: "<div [ngClass]=\"class\">\n <div class=\"is-draggable\" (drag)=\"onDrag($event)\" (dragstart)=\"onDrag($event)\" [draggable]=\"dragable\">\n <div class=\"drag-element\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".is-draggable{opacity:1!important;cursor:pointer}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DragableComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-dragable', template: "<div [ngClass]=\"class\">\n <div class=\"is-draggable\" (drag)=\"onDrag($event)\" (dragstart)=\"onDrag($event)\" [draggable]=\"dragable\">\n <div class=\"drag-element\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".is-draggable{opacity:1!important;cursor:pointer}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { dragable: [{
type: Input
}], data: [{
type: Input
}], class: [{
type: Input
}], onEvent: [{
type: Output
}] } });
class DropableComponent {
constructor() {
this.onEvent = new EventEmitter();
this.dataRecieved = new EventEmitter();
this.dropFiles = false;
this.class = "";
this.onEventProperties = {
isDraggedOver: false,
dragEntered: false,
dragLeft: false,
dropped: false
};
this.data = false;
}
ngOnInit() {
}
onDrop(event) {
event.preventDefault();
this.onEventProperties.dropped = true;
this.emitEvents();
if (this.dropFiles) {
this.data = event.dataTransfer.files;
}
else {
var data = event.dataTransfer.getData("text");
this.data = data ? JSON.parse(data) : false;
}
if (this.data) {
this.emitData();
}
}
draggedOver(event) {
event.stopPropagation();
this.onEventProperties.isDraggedOver = true;
this.emitEvents();
event.preventDefault();
}
dragEntered(event) {
event.stopPropagation();
this.onEventProperties.dragEntered = true;
this.onEventProperties.dragLeft = false;
this.emitEvents();
event.preventDefault();
}
dragLeft(event) {
event.stopPropagation();
this.onEventProperties.dragLeft = true;
this.onEventProperties.dragEntered = false;
this.emitEvents();
event.preventDefault();
}
emitEvents() {
this.onEvent.emit(this.onEventProperties);
}
emitData() {
this.dataRecieved.emit(this.data);
}
}
DropableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DropableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropableComponent, selector: "mg-dropable", inputs: { dropFiles: "dropFiles", class: "class" }, outputs: { onEvent: "onEvent", dataRecieved: "dataRecieved" }, ngImport: i0, template: "<div (dragenter)=\"dragEntered($event)\" (dragleave)=\"dragLeft($event)\" \n(dragover)=\"draggedOver($event)\"\n (drop)=\"onDrop($event)\" [ngClass]=\"class\">\n <ng-content></ng-content>\n</div>\n", styles: [""], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropableComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-dropable', template: "<div (dragenter)=\"dragEntered($event)\" (dragleave)=\"dragLeft($event)\" \n(dragover)=\"draggedOver($event)\"\n (drop)=\"onDrop($event)\" [ngClass]=\"class\">\n <ng-content></ng-content>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { onEvent: [{
type: Output
}], dataRecieved: [{
type: Output
}], dropFiles: [{
type: Input
}], class: [{
type: Input
}] } });
class FooterComponent {
constructor() {
this.theme = "primary";
this.toBottom = false;
this.class = "";
}
ngOnInit() {
}
mainFooterClasses() {
let results = "";
results += this.theme;
results += this.toBottom ? " stick-to-bottom" : "";
return results;
}
}
FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: FooterComponent, selector: "mg-footer", inputs: { theme: "theme", toBottom: "toBottom", class: "class" }, ngImport: i0, template: "<div class=\"footer\" [ngClass]=\"mainFooterClasses() + ' ' + class\">\n <div class=\"section-top\">\n <div class=\"left-section\">\n <ng-content select=\"[slot=left-section]\"></ng-content>\n </div>\n <div class=\"middle-section\">\n <ng-content select=\"[slot=middle-section]\"></ng-content>\n </div>\n <div class=\"right-section\">\n <ng-content select=\"[slot=right-section]\"></ng-content>\n </div>\n </div>\n <div class=\"section-bottom\">\n <div class=\"left-bottom-section\">\n <ng-content select=\"[slot=left-bottom-section]\"></ng-content>\n </div>\n <div class=\"right-bottom-section\">\n <ng-content select=\"[slot=right-bottom-section]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [""], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: FooterComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-footer', template: "<div class=\"footer\" [ngClass]=\"mainFooterClasses() + ' ' + class\">\n <div class=\"section-top\">\n <div class=\"left-section\">\n <ng-content select=\"[slot=left-section]\"></ng-content>\n </div>\n <div class=\"middle-section\">\n <ng-content select=\"[slot=middle-section]\"></ng-content>\n </div>\n <div class=\"right-section\">\n <ng-content select=\"[slot=right-section]\"></ng-content>\n </div>\n </div>\n <div class=\"section-bottom\">\n <div class=\"left-bottom-section\">\n <ng-content select=\"[slot=left-bottom-section]\"></ng-content>\n </div>\n <div class=\"right-bottom-section\">\n <ng-content select=\"[slot=right-bottom-section]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { theme: [{
type: Input
}], toBottom: [{
type: Input
}], class: [{
type: Input
}] } });
class CheckboxComponent {
constructor(service) {
this.service = service;
this.size = "m";
this.theme = "primary";
this.onDark = false;
this.isSelected = false;
this.class = "";
this.isChecked = new EventEmitter();
this.id = "";
this.selected = this.isSelected;
}
ngOnInit() {
this.isChecked.emit(this.selected);
this.selected = this.isSelected;
this.id = "input-checkbox-" + this.service.makeid(10, "checkbox");
}
mainClasses() {
let results = "";
results += this.size == "s" ? "small" : this.size == "m" ? "medium" : "large";
results += " " + this.theme;