ng-materialgrammi/fesm2015/ng-materialgrammi.mjs.map

An Angular framework which follows

{"version":3,"file":"ng-materialgrammi.mjs","sources":["../../../projects/materialgrammi/src/lib/materialgrammi.service.ts","../../../projects/materialgrammi/src/lib/seo.service.ts","../../../projects/materialgrammi/src/lib/materialgrammi.component.ts","../../../projects/materialgrammi/src/lib/components/test-component/test-component.component.ts","../../../projects/materialgrammi/src/lib/components/test-component/test-component.component.html","../../../projects/materialgrammi/src/lib/components/accordion-item/accordion-item.component.ts","../../../projects/materialgrammi/src/lib/components/accordion-item/accordion-item.component.html","../../../projects/materialgrammi/src/lib/components/accordion/accordion.component.ts","../../../projects/materialgrammi/src/lib/components/accordion/accordion.component.html","../../../projects/materialgrammi/src/lib/components/widget/widget.component.ts","../../../projects/materialgrammi/src/lib/components/widget/widget.component.html","../../../projects/materialgrammi/src/lib/components/alert/alert.component.ts","../../../projects/materialgrammi/src/lib/components/alert/alert.component.html","../../../projects/materialgrammi/src/lib/components/breadcrumb/breadcrumb.component.ts","../../../projects/materialgrammi/src/lib/components/breadcrumb/breadcrumb.component.html","../../../projects/materialgrammi/src/lib/components/card/card.component.ts","../../../projects/materialgrammi/src/lib/components/card/card.component.html","../../../projects/materialgrammi/src/lib/components/chip/chip.component.ts","../../../projects/materialgrammi/src/lib/components/chip/chip.component.html","../../../projects/materialgrammi/src/lib/components/dragable/dragable.component.ts","../../../projects/materialgrammi/src/lib/components/dragable/dragable.component.html","../../../projects/materialgrammi/src/lib/components/dropable/dropable.component.ts","../../../projects/materialgrammi/src/lib/components/dropable/dropable.component.html","../../../projects/materialgrammi/src/lib/components/footer/footer.component.ts","../../../projects/materialgrammi/src/lib/components/footer/footer.component.html","../../../projects/materialgrammi/src/lib/components/checkbox/checkbox.component.ts","../../../projects/materialgrammi/src/lib/components/checkbox/checkbox.component.html","../../../projects/materialgrammi/src/lib/components/input/input.component.ts","../../../projects/materialgrammi/src/lib/components/input/input.component.html","../../../projects/materialgrammi/src/lib/dater.service.ts","../../../projects/materialgrammi/src/lib/components/overlay/overlay.component.ts","../../../projects/materialgrammi/src/lib/components/overlay/overlay.component.html","../../../projects/materialgrammi/src/lib/components/text-input/text-input.component.ts","../../../projects/materialgrammi/src/lib/components/text-input/text-input.component.html","../../../projects/materialgrammi/src/lib/components/button/button.component.ts","../../../projects/materialgrammi/src/lib/components/button/button.component.html","../../../projects/materialgrammi/src/lib/components/calendar/calendar.component.ts","../../../projects/materialgrammi/src/lib/components/calendar/calendar.component.html","../../../projects/materialgrammi/src/lib/components/date-input/date-input.component.ts","../../../projects/materialgrammi/src/lib/components/date-input/date-input.component.html","../../../projects/materialgrammi/src/lib/components/radio/radio.component.ts","../../../projects/materialgrammi/src/lib/components/radio/radio.component.html","../../../projects/materialgrammi/src/lib/components/select/select.component.ts","../../../projects/materialgrammi/src/lib/components/select/select.component.html","../../../projects/materialgrammi/src/lib/components/switch/switch.component.ts","../../../projects/materialgrammi/src/lib/components/switch/switch.component.html","../../../projects/materialgrammi/src/lib/components/list/list.component.ts","../../../projects/materialgrammi/src/lib/components/list/list.component.html","../../../projects/materialgrammi/src/lib/components/loader/loader.component.ts","../../../projects/materialgrammi/src/lib/components/loader/loader.component.html","../../../projects/materialgrammi/src/lib/components/navbar/navbar.component.ts","../../../projects/materialgrammi/src/lib/components/navbar/navbar.component.html","../../../projects/materialgrammi/src/lib/components/note/note.component.ts","../../../projects/materialgrammi/src/lib/components/note/note.component.html","../../../projects/materialgrammi/src/lib/components/pagination/pagination.component.ts","../../../projects/materialgrammi/src/lib/components/pagination/pagination.component.html","../../../projects/materialgrammi/src/lib/components/collapse/collapse.component.ts","../../../projects/materialgrammi/src/lib/components/collapse/collapse.component.html","../../../projects/materialgrammi/src/lib/components/table/table.component.ts","../../../projects/materialgrammi/src/lib/components/table/table.component.html","../../../projects/materialgrammi/src/lib/components/toast/toast.component.ts","../../../projects/materialgrammi/src/lib/components/toast/toast.component.html","../../../projects/materialgrammi/src/lib/components/chat/chat.component.ts","../../../projects/materialgrammi/src/lib/components/chat/chat.component.html","../../../projects/materialgrammi/src/lib/components/dropdown/dropdown.component.ts","../../../projects/materialgrammi/src/lib/components/dropdown/dropdown.component.html","../../../projects/materialgrammi/src/lib/components/megamenu/megamenu.component.ts","../../../projects/materialgrammi/src/lib/components/megamenu/megamenu.component.html","../../../projects/materialgrammi/src/lib/components/slideshow/slideshow.component.ts","../../../projects/materialgrammi/src/lib/components/slideshow/slideshow.component.html","../../../projects/materialgrammi/src/lib/components/modal/modal.component.ts","../../../projects/materialgrammi/src/lib/components/modal/modal.component.html","../../../projects/materialgrammi/src/lib/components/sidebar/sidebar.component.ts","../../../projects/materialgrammi/src/lib/components/sidebar/sidebar.component.html","../../../projects/materialgrammi/src/lib/components/offcanvas/offcanvas.component.ts","../../../projects/materialgrammi/src/lib/components/offcanvas/offcanvas.component.html","../../../projects/materialgrammi/src/lib/components/tab/tab.component.ts","../../../projects/materialgrammi/src/lib/components/tab/tab.component.html","../../../projects/materialgrammi/src/lib/components/wizard/wizard.component.ts","../../../projects/materialgrammi/src/lib/components/wizard/wizard.component.html","../../../projects/materialgrammi/src/lib/components/notifications/notifications.component.ts","../../../projects/materialgrammi/src/lib/components/notifications/notifications.component.html","../../../projects/materialgrammi/src/lib/components/countdown/countdown.component.ts","../../../projects/materialgrammi/src/lib/components/countdown/countdown.component.html","../../../projects/materialgrammi/src/lib/components/placeholder/placeholder.component.ts","../../../projects/materialgrammi/src/lib/components/placeholder/placeholder.component.html","../../../projects/materialgrammi/src/lib/components/image/image.component.ts","../../../projects/materialgrammi/src/lib/components/image/image.component.html","../../../projects/materialgrammi/src/lib/components/date-range/date-range.component.ts","../../../projects/materialgrammi/src/lib/components/date-range/date-range.component.html","../../../projects/materialgrammi/src/lib/components/component/component.component.ts","../../../projects/materialgrammi/src/lib/components/component/component.component.html","../../../projects/materialgrammi/src/lib/components/slider/slider.component.ts","../../../projects/materialgrammi/src/lib/components/slider/slider.component.html","../../../projects/materialgrammi/src/lib/components/slideshow-v2/slideshow-v2.component.ts","../../../projects/materialgrammi/src/lib/components/slideshow-v2/slideshow-v2.component.html","../../../projects/materialgrammi/src/lib/components/fixer/fixer.component.ts","../../../projects/materialgrammi/src/lib/components/fixer/fixer.component.html","../../../projects/materialgrammi/src/lib/components/muliselect/muliselect.component.ts","../../../projects/materialgrammi/src/lib/components/muliselect/muliselect.component.html","../../../projects/materialgrammi/src/lib/components/inview/inview.component.ts","../../../projects/materialgrammi/src/lib/components/inview/inview.component.html","../../../projects/materialgrammi/src/lib/components/badge/badge.component.ts","../../../projects/materialgrammi/src/lib/components/badge/badge.component.html","../../../projects/materialgrammi/src/lib/components/hoscroll/hoscroll.component.ts","../../../projects/materialgrammi/src/lib/components/hoscroll/hoscroll.component.html","../../../projects/materialgrammi/src/lib/materialgrammi.module.ts","../../../projects/materialgrammi/src/public-api.ts","../../../projects/materialgrammi/src/ng-materialgrammi.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable, Subject } from 'rxjs';\n\nexport interface Widget {\n  id: string,\n  type: string,\n  options?: BehaviorSubject<any>,\n  status: BehaviorSubject<boolean>\n};\n\nexport interface AccordionItem {\n  // widgetId\n  id?: string\n};\n\nexport interface Accordion {\n  id: string,\n  items?: [AccordionItem],\n  activeItem?: BehaviorSubject<boolean>\n};\n\nexport interface Collapse {\n  id: string,\n  status: BehaviorSubject<boolean>\n}\n\nexport interface Dropdown {\n  id: string,\n  status: BehaviorSubject<boolean>\n}\n\nexport interface MegaMenu {\n  id: string,\n  active: BehaviorSubject<string | boolean>\n}\n\nexport interface Modal {\n  id: string,\n  status: BehaviorSubject<boolean>\n}\n\nexport interface Overlay {\n  id: string,\n  status: BehaviorSubject<boolean>\n}\n\n\n\nexport interface Wizard {\n  id: string,\n  active: BehaviorSubject<number>,\n  on: number,\n  completed: BehaviorSubject<boolean>,\n  next: {\n    index: number,\n    id: string\n  },\n  prev: {\n    index: number,\n    id: string\n  },\n  components: [string]\n};\n\nexport interface Slideshow {\n  id: string,\n  playInterval: any,\n  timer: number,\n  next: BehaviorSubject<boolean>,\n  previous: BehaviorSubject<boolean>,\n  active: BehaviorSubject<number>,\n  play: BehaviorSubject<boolean>\n}\n\nexport interface OffCanvas {\n  id: string,\n  status: BehaviorSubject<boolean>\n}\n\nexport interface Tab {\n  active: BehaviorSubject<string>,\n  components: [string]\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class MaterialgrammiService {\n\n  private widgets: [Widget] | any = [];\n  private collapse: [Collapse] | any = [];\n  private dropdown: [Dropdown] | any = [];\n  private megamenu: [MegaMenu] | any = [];\n  private modal: [Modal] | any = [];\n  private overlay: [Overlay] | any = [];\n  private wizard: [Wizard] | any = [];\n  private slideshow: [Slideshow] | any = [];\n  private offcanvas: [OffCanvas] | any = [];\n  private tab: [Tab] | any = [];\n  private notifications: any = {\n    topRight: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    topLeft:{\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    topCenter: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    bottomRight: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    bottomLeft: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    bottomCenter: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    centerRight: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    centerLeft: {\n      status: new BehaviorSubject([]),\n      data: []\n    },\n    centerCenter: {\n      status: new BehaviorSubject([]),\n      data: []\n    }\n  };\n\n  private slideshowv2:any = [];\n\n  constructor() { }\n\n  /*\n    options: {\n      timer: 0 | 1-any-number,\n      class: \"\",\n      size: \"s | m | l\"\n    }\n  */\n\n  notificationOptionsDefaults = {\n      timer: 2000,\n      class: \"blueGrey8 text-grey2 radius-5 pad-10 marginT-10 outline-grey7 shadow-1\",\n      size: \"m\"\n    };\n\n  addNotification(position = \"topRight\", message = \"demo notification\", options:any = {}){\n    \n    options.timer = !options.timer ? this.notificationOptionsDefaults.timer : options.timer;\n    options.class = !options.class ? this.notificationOptionsDefaults.class : options.class;\n    options.size = !options.size ? this.notificationOptionsDefaults.size : options.size;\n\n    let notify = {\n      message,\n      options,\n      id: this.makeid(10, this.makeid(3, \"notification\"))\n    };\n\n    const allowedPositions = Object.keys(this.notifications);\n    \n    if(allowedPositions.includes(position)){\n      this.notifications[position].data = [notify, ...this.notifications[position].data];\n      this.notifications[position].status.next(this.notifications[position].data);\n    }\n\n    if(notify.options.timer !== 0) {\n      var $this = this;\n      setTimeout(function(){\n        $this.deleteNotification(position, notify.id);\n      }, notify.options.timer);\n    }\n    \n  }\n\n  watchNotification(position = \"topRight\"){\n    return Object.keys(this.notifications).includes(position) ? this.notifications[position].status.asObservable() : false;\n  }\n\n  deleteNotification(position = \"topRight\", id: string){\n    if(Object.keys(this.notifications).includes(position)){\n      this.notifications[position].data = this.notifications[position].data.filter((d:any) => {\n        return d.id != id;\n      });\n    }\n    this.notifications[position].status.next(this.notifications[position].data);\n  }\n\n  \n\n  makeid(length: number, str: string | number) {\n    str = typeof str == \"string\" ? str.split(\" \").join(\"\") : str;\n    var result = '';\n    var characters = 'ABCDEFGHIJKLMNOP+QRSTUVWXYZabcdefgh_ijklmnopqrst=uvwxyz0123456789-';\n    var charactersLength = characters.length;\n    for (var i = 0; i < length; i++) {\n      result += characters.charAt(Math.floor(Math.random() *\n        charactersLength));\n    }\n    return result + '-' + str;\n  }\n\n  registerSlideShowv2(id: string, items: any, active: string = items[0]){\n    id = id === \"\" ? this.makeid(10, \"slideshowv2\") : id;\n    this.slideshowv2[id] = {\n      items, \n      current: active,\n      active: new BehaviorSubject(active)\n    };\n    for(let i = 0; i < items.length; i++){\n      this.registerWidget(items[i], \"slideshowv2\", id);\n    }\n    this.openWidget(active, \"slideshowv2\", id);\n    return id;\n  }\n\n  watchSlideShowv2(id:string){\n    return this.slideshowv2[id].active.asObservable();\n  }\n\n  nextSlideV2(id: string){\n    let current = this.slideshowv2[id].current;\n    let next = \"\";\n    for(let i = 0; i < this.slideshowv2[id].items.length; i++) {\n      if(this.slideshowv2[id].items[i] === current) {\n        next = this.slideshowv2[id].items[i + 1] ? this.slideshowv2[id].items[i + 1] : this.slideshowv2[id].items[0];\n      }\n      this.closeWidget(this.slideshowv2[id].items[i], \"slideshowv2\", id);\n    }\n    this.slideshowv2[id].current = next;\n    this.openWidget(next, \"slideshowv2\", id);\n    this.slideshowv2[id].active.next(next);\n  }\n\n  prevSlideV2(id: string){\n    let current = this.slideshowv2[id].current;\n    let next = \"\";\n    for(let i = 0; i < this.slideshowv2[id].items.length; i++) {\n      if(this.slideshowv2[id].items[i] === current) {\n        next = this.slideshowv2[id].items[i - 1] ? this.slideshowv2[id].items[i - 1] : this.slideshowv2[id].items[this.slideshowv2[id].items.length - 1];\n        this.closeWidget(this.slideshowv2[id].items[i], \"slideshowv2\", id);\n      }\n    }\n    this.slideshowv2[id].current = next;\n    this.openWidget(next, \"slideshowv2\", id);\n    this.slideshowv2[id].active.next(next);\n  }\n\n  registerTab(id: string, components: any, active: string) {\n    this.tab[id] = {\n      components,\n      active: new BehaviorSubject(active)\n    };\n    for (let i = 0; i < components.length; i++) {\n      this.registerWidget(components[i], \"tab\", id);\n    }\n    this.openTab(id, components[0]);\n  }\n\n  openTab(id: string, component_id: string) {\n    this.closeAllTab(id);\n    this.openWidget(component_id, \"tab\", id);\n    this.tab[id].active.next(component_id);\n  }\n\n  closeAllTab(id: string) {\n    if (this.tab && this.tab[id]) {\n      for (let i = 0; i < this.tab[id].components.length; i++) {\n        this.closeWidget(this.tab[id].components[i], \"tab\", id);\n      }\n    }\n  }\n\n  watchTab(id: string) {\n    return this.tab[id].active.asObservable();\n  }\n\n  registerOffCanvas(id: string, status: boolean) {\n    this.offcanvas[id] = {\n      id,\n      status: new BehaviorSubject(status)\n    };\n  }\n\n  openCanvas(id: string) {\n    this.offcanvas[id].status.next(true);\n  }\n\n  closeCanvas(id: string) {\n    this.offcanvas[id].status.next(false);\n  }\n\n  watchCanvas(id: string) {\n    return this.offcanvas[id].status.asObservable();\n  }\n\n\n  registerSlideshow(id: string, activePage: number, play: boolean, next: boolean, previous: boolean, playInterval: any, timer: number) {\n    var obj: any = {\n      id,\n      playInterval,\n      timer,\n      next: new BehaviorSubject(next),\n      previous: new BehaviorSubject(previous),\n      active: new BehaviorSubject(activePage),\n      play: new BehaviorSubject(play)\n    };\n    this.slideshow[id] = obj;\n  }\n\n  watchSlideshowPlay(id: string) {\n    return this.slideshow[id].play.asObservable();\n  }\n\n  watchSlideshowNext(id: string) {\n    return this.slideshow[id].next.asObservable();\n  }\n\n  watchSlideshowPrevious(id: string) {\n    return this.slideshow[id].previous.asObservable();\n  }\n\n  watchSlideshowActivePage(id: string) {\n    return this.slideshow[id].active.asObservable();\n  }\n\n  nextSlide(id: string) {\n    this.slideshow[id].next.next(true);\n  }\n\n  previousSlide(id: string) {\n    this.slideshow[id].previous.next(true);\n  }\n\n  changeSlidePlay(id: string, play: boolean) {\n    this.slideshow[id].play.next(play);\n  }\n\n  changeSlideActivePage(id: string, activePage: number) {\n    this.slideshow[id].active.next(activePage);\n  }\n\n  playSlideShow(id: string) {\n    var selected = this.slideshow[id];\n    if (selected) {\n      if (selected.playInterval) {\n        this.pauseSlideshow(id);\n      }\n      selected.play.next(true);\n      var _this = this;\n      this.nextSlide(id);\n      selected.playInterval = setInterval(() => {\n        _this.nextSlide(id);\n      }, selected.timer);\n    }\n  }\n\n  pauseSlideshow(id: string) {\n    var selected = this.slideshow[id];\n    if (selected && selected.playInterval) {\n      clearInterval(selected.playInterval);\n      selected.playInterval = false;\n    }\n  }\n\n  registerWizard(wizardId: string, components: any, active = 0) {\n    let next = {};\n    let prev = {};\n    if (components[active]) {\n      next = {\n        index: components && components[active + 1] ? active + 1 : active,\n        id: components && components[active + 1] ? components[active + 1] : components[active]\n      };\n      prev = {\n        index: components && components[active - 1] ? active - 1 : active,\n        id: components && components[active - 1] ? components[active - 1] : components[active]\n      };\n    } else {\n      // defaults\n      active = 0;\n      next = {\n        index: components && components[1] ? 1 : 0,\n        id: components && components[1] ? components[1] : components[0]\n      };\n      prev = {\n        index: 0,\n        id: components[0]\n      };\n    }\n\n    this.wizard[wizardId] = {\n      active: new BehaviorSubject(0),\n      on: active,\n      completed: new BehaviorSubject(false),\n      next,\n      prev,\n      components\n    };\n\n    for (let i = 0; i < components.length; i++) {\n      this.registerWidget(components[i], \"wizard\", wizardId);\n    }\n\n    this.openWidget(components[0], \"wizard\", wizardId);\n  }\n\n  wizardNextStep(wizardId: string) {\n    let activateIndex = this.wizard[wizardId].on + 1;\n    this.activateWizardStep(wizardId, activateIndex);\n  }\n\n  WizardPreviousStep(wizardId: string) {\n    let activateIndex = this.wizard[wizardId].on - 1;\n    this.activateWizardStep(wizardId, activateIndex);\n  }\n\n  WizardCloseAll(wizardId: string) {\n    if (this.wizard[wizardId] && this.wizard[wizardId].components) {\n      for (let i = 0; i < this.wizard[wizardId].components.length; i++) {\n        this.closeWidget(this.wizard[wizardId].components[i], \"wizard\", wizardId);\n      }\n    }\n  }\n\n  activateWizardStep(wizardId: string, index: number) {\n\n    if (this.wizard[wizardId].components[index]) {\n      if(index >= this.wizard[wizardId].components.length -1){\n        this.isWizardComplete(wizardId);\n      }else {\n        this.isWizardNotComplete(wizardId);\n      }\n      this.wizard[wizardId].on = index;\n      this.wizard[wizardId].prev.index = this.wizard[wizardId].components[index - 1] ? index - 1 : index;\n      this.wizard[wizardId].next.index = this.wizard[wizardId].components[index + 1] ? index + 1 : index;\n      this.wizard[wizardId].prev.id = this.wizard[wizardId].components[index - 1] ?\n        this.wizard[wizardId].components[index - 1] : this.wizard[wizardId].components[index];\n      this.wizard[wizardId].next.id = this.wizard[wizardId].components[index + 1] ?\n        this.wizard[wizardId].components[index + 1] : this.wizard[wizardId].components[index];;\n      this.WizardCloseAll(wizardId);\n      this.openWidget(this.wizard[wizardId].components[index], \"wizard\", wizardId);\n      this.watchWidget(this.wizard[wizardId].components[index], \"wizard\", wizardId).subscribe((data: any) => {\n        if (data) {\n          this.wizard[wizardId].active.next(index);\n        }\n      });\n    }\n  }\n\n  isWizardComplete(wizardId: string) {\n    this.wizard[wizardId].completed.next(true);\n  }\n\n  isWizardNotComplete(wizardId: string) {\n    this.wizard[wizardId].completed.next(false);\n  }\n\n  watchWizardActive(wizardId: string): Observable<number> {\n    return this.wizard[wizardId].active.asObservable();\n  }\n\n  watchWizardCompleted(wizardId: string): Observable<true | false> {\n    return this.wizard[wizardId].completed.asObservable();\n  }\n\n\n  registerOverlay(id: string, status: boolean) {\n    this.overlay[id] = {\n      id,\n      status: new BehaviorSubject(status)\n    };\n  }\n\n  openOverlay(id: string) {\n    this.overlay[id].status.next(true);\n  }\n\n  closeOverlay(id: string) {\n    this.overlay[id].status.next(false);\n  }\n\n  watchOverlay(id: string) {\n    return this.overlay[id].status.asObservable();\n  }\n\n  registerModal(id: string, status: boolean) {\n    this.modal[id] = {\n      id,\n      status: new BehaviorSubject(status)\n    };\n  }\n\n  openModal(id: string) {\n    this.modal[id].status.next(true);\n  }\n\n  closeModal(id: string) {\n    this.modal[id].status.next(false);\n  }\n\n  watchModal(id: string) {\n    return this.modal[id].status.asObservable();\n  }\n\n  registerDropDown(id: string, status: boolean) {\n    this.dropdown[id] = {\n      id,\n      status: new BehaviorSubject(status)\n    };\n  }\n\n  openDropDown(id: string) {\n    this.dropdown[id].status.next(true);\n  }\n\n  closeDropDown(id: string) {\n    this.dropdown[id].status.next(false);\n  }\n\n  watchDropDown(id: string) {\n    return this.dropdown[id].status.asObservable();\n  }\n\n  registerCollapse(id: string, status: boolean) {\n    this.collapse[id] = {\n      id,\n      status: new BehaviorSubject(status)\n    };\n  }\n\n  openCollapse(id: string) {\n    this.collapse[id].status.next(true);\n  }\n\n  closeCollapse(id: string) {\n    this.collapse[id].status.next(false);\n  }\n\n  watchCollapse(id: string) {\n    return this.collapse[id].status.asObservable();\n  }\n\n  getWidgetId(id: string, type: string, parent_id: string) {\n    return id + '_' + type + '_' + parent_id;\n  }\n\n  widgetExists(id: string, parent_type: string, parent_id: string) {\n    return this.widgets[this.getWidgetId(id, parent_type, parent_id)] ? true : false;\n  }\n\n  registerWidget(id: string, parent_type: string, parent_id: string, options: any = {}) {\n    \n    \n    \n    let mywidgetid = this.getWidgetId(id, parent_type, parent_id);\n    this.widgets[mywidgetid] = {\n      id,\n      type: parent_type,\n      parent_id: parent_id,\n      options: new BehaviorSubject(options),\n      status: new BehaviorSubject(false)\n    }\n  }\n\n  openWidget(id: string, parent_type: string, parent_id: string): void {\n    \n    let mywidgetid = this.getWidgetId(id, parent_type, parent_id);\n    if (this.widgets && this.widgets[mywidgetid]) {\n      this.widgets[mywidgetid].status.next(true);\n    }\n  }\n\n  closeWidget(id: string, parent_type: string, parent_id: string): void {\n    let mywidgetid = this.getWidgetId(id, parent_type, parent_id);\n    if (this.widgets && this.widgets[mywidgetid]) {\n      this.widgets[mywidgetid].status.next(false);\n    }\n\n  }\n\n  closeAllParentWidgets(parent_type: string, parent_id: string) {\n    let allWidgetIds = Object.keys(this.widgets);\n    for (let i = 0; i < allWidgetIds.length; i++) {\n      if (this.widgets[allWidgetIds[i]].type == parent_type && this.widgets[allWidgetIds[i]].parent_id == parent_id) {\n        this.closeWidget(this.widgets[allWidgetIds[i]].id, parent_type, parent_id);\n      }\n    }\n  }\n\n  watchWidget(id: string, parent_type: string, parent_id: string): Observable<boolean> {\n    return this.widgets[this.getWidgetId(id, parent_type, parent_id)].status.asObservable();\n  }\n\n  watchOptions(id: string, parent_type: string, parent_id: string): Observable<any> {\n    return this.widgets[this.getWidgetId(id, parent_type, parent_id)].options.asObservable();\n  }\n\n  registerMegaMenu(id: string, links: string[]) {\n    this.megamenu[id] = {\n      id,\n      active: new BehaviorSubject(\"\")\n    };\n    for (let i = 0; i < links.length; i++) {\n      this.registerWidget(links[i], \"megamenu\", id);\n    }\n  }\n\n  watchMegaMenu(id: string) {\n    return this.megamenu[id].active.asObservable();\n  }\n\n  openMegaMenu(id: string, targetid: string) {\n    this.megamenu[id].active.next(targetid);\n    if (this.widgetExists(targetid, \"megamenu\", id)) {\n      this.closeMegaMenu(id);\n      this.openWidget(targetid, \"megamenu\", id);\n    }\n  }\n\n  closeMegaMenu(id: string) {\n    this.closeAllParentWidgets(\"megamenu\", id);\n    this.megamenu[id].active.next(false);\n  }\n\n  fallbackCopyTextToClipboard(text:string) {\n    var textArea = document.createElement(\"textarea\");\n    textArea.value = text;\n    \n    // Avoid scrolling to bottom\n    textArea.style.top = \"0\";\n    textArea.style.left = \"0\";\n    textArea.style.position = \"fixed\";\n  \n    document.body.appendChild(textArea);\n    textArea.focus();\n    textArea.select();\n  \n    try {\n      var successful = document.execCommand('copy');\n      var msg = successful ? 'successful' : 'unsuccessful';\n      console.log('Fallback: Copying text command was ' + msg);\n    } catch (err) {\n      console.error('Fallback: Oops, unable to copy', err);\n    }\n  \n    document.body.removeChild(textArea);\n  }\n  copyToClipboard(text:string) {\n    if (!navigator.clipboard) {\n      this.fallbackCopyTextToClipboard(text);\n      return;\n    }\n    navigator.clipboard.writeText(text).then(function() {\n      console.log('Async: Copying to clipboard was successful!');\n    }, function(err) {\n      console.error('Async: Could not copy text: ', err);\n    });\n  }\n\n  scrollTo(query: string): void {\n    if(document.querySelectorAll(query)[0]) {\n      document.querySelectorAll(query)[0].scrollIntoView({behavior: \"smooth\", block: \"start\", inline: \"nearest\"});\n    }\n  }\n\n\n}\n","import { Injectable } from '@angular/core';\nimport { Meta, Title } from '@angular/platform-browser';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class SeoService {\n\n  private keywords?: string[] = [];\n  private apptitle = \"materialgrammi\";\n\n\n  constructor(private meta: Meta, private title: Title) { }\n\n  setDescription(desc: string){\n    this.meta.addTag({\n      name: \"description\",\n      content: desc\n    });\n  }\n\n  setAuthor(desc: string){\n    this.meta.addTag({\n      name: \"author\",\n      content: desc\n    });\n  }\n\n  addKeywords(keyw: string[] | string){\n    if(typeof keyw === \"string\") {\n      this.keywords?.push(keyw);\n    }else{\n      for(let i = 0; i < keyw.length; i++) {\n        this.keywords?.push(keyw[i]);\n      }\n    }\n    this.setKeyWords();\n  }\n\n  private setKeyWords(){\n    if(this.keywords){\n      this.meta.addTag({\n        name: \"description\",\n        content: this.keywords.join(\", \")\n      });\n    }\n  }\n\n  clearKeyWords(){\n    this.keywords = [];\n  }\n\n  setTitle(t: string){\n    this.apptitle = t;\n    this.title.setTitle(this.apptitle);\n  }\n\n  enableCrawlers(status: boolean = true){\n    if(status) {\n      this.meta.addTag({\n        name: \"robots\",\n        content: \"index, follow\"\n      });\n    }\n  }\n}\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'lib-materialgrammi',\n  template: `\n    <p>\n      materialgrammi works!\n    </p>\n  `,\n  styles: [\n  ]\n})\nexport class MaterialgrammiComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}\n","import { Component, OnInit } from '@angular/core';\nimport { MaterialgrammiService } from '../../materialgrammi.service';\n\n@Component({\n  selector: 'lib-test',\n  templateUrl: './test-component.component.html',\n  styleUrls: ['./test-component.component.css']\n})\nexport class TestComponentComponent implements OnInit {\n  id = \"widget\";\n  constructor(private myservice: MaterialgrammiService) {   }\n\n  ngOnInit(): void {\n  }\n\n\n\n}\n","<a style=\"padding: 5px; border: 1px solid #212121; cursor: pointer;\"><ng-content></ng-content></a>\n","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n  selector: 'mg-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.css']\n})\nexport class AccordionItemComponent implements OnInit {\n  @Input() item: any = {};\n  @Output() isClicked = new EventEmitter<boolean>();\n  @Input() itemid: any = 0;\n  @Input() theme = \"primary\"\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  onClickTitle() {\n    this.isClicked.emit(this.itemid);\n  }\n\n  isActive(state: any) {\n    return state ? 'active' : '';\n  }\n\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { Theme } from '../../types';\n\n@Component({\n  selector: 'mg-accordion',\n  templateUrl: './accordion.component.html',\n  styleUrls: ['./accordion.component.css']\n})\nexport class AccordionComponent implements OnInit {\n  @Input() theme: Theme = \"primary\";\n\n  @Input() items: any = [{\n    title: \"Panel 1\",\n    description: \"description of panel 1\",\n    active: false\n  }, {\n    title: \"Panel 2\",\n    description: \"description of panel 2\",\n    active: true\n  }, {\n    title: \"Panel 3\",\n    description: \"description of panel 3\",\n    active: false\n  }, {\n    title: \"Panel 4\",\n    description: \"description of panel 4\",\n    active: false\n  }, {\n    title: \"Panel 5\",\n    description: \"description of panel 5\",\n    active: false\n  }];\n\n  @Input() class = \"\";\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  turnAllOff(missItem: number) {\n    for (let i = 0; i < this.items.length; i++) {\n      if (missItem != i) {\n        this.items[i].active = false;\n      }\n    }\n  }\n\n  toggleItem(itemNumber: any) {\n    this.items[itemNumber].active = !this.items[itemNumber].active;\n    this.turnAllOff(itemNumber);\n  }\n\n\n\n}\n","<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","import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';\nimport { MaterialgrammiService } from '../../materialgrammi.service';\n\n@Component({\n  selector: 'mg-widget',\n  templateUrl: './widget.component.html',\n  styleUrls: ['./widget.component.css']\n})\nexport class WidgetComponent implements OnInit, OnChanges, AfterContentChecked {\n  @Input() id = \"general-widget-1\";\n  @Input() parent = \"general-parent-1\";\n  @Input() type = \"general\";\n  @Input() options: any = false;\n  @Input() status = false;\n  @Input() standalone = false;\n  @Input() class=\"\";\n  @Output() triggered = new EventEmitter();\n\n  settings = {\n    header: {\n      always: false\n    },\n    footer: {\n      always: false\n    }\n  };\n\n  myClasses = \"\";\n  constructor(private mainService: MaterialgrammiService, private cd: ChangeDetectorRef) { }\n\n\n\n  ngOnInit(): void {\n    this.init();\n    this.myClasses = this.class;\n  }\n\n  ngOnChanges(): void {\n    this.init();\n    this.myClasses = this.class;\n  }\n\n  ngAfterContentChecked(): void {\n    this.myClasses = this.class;\n  }\n\n  init() {\n    if (this.standalone) {\n      this.registerWidget();\n      if (this.status) {\n        this.openWidget();\n      } else {\n        this.closeWidget();\n      }\n    }\n    this.watch();\n    this.watchOptions();\n  }\n\n  setOptions() {\n    if (this.options && this.options.header.always) {\n      this.settings.header.always = true;\n    }\n    if (this.options && this.options.footer.always) {\n      this.settings.footer.always = true;\n    }\n  }\n\n  registerWidget() {\n    this.mainService.registerWidget(this.id, this.type, this.parent, this.options);\n    if (this.status) {\n      this.openWidget();\n    }\n  }\n\n  openWidget() {\n    this.mainService.openWidget(this.id, this.type, this.parent);\n  }\n\n  closeWidget() {\n    this.mainService.closeWidget(this.id, this.type, this.parent);\n  }\n\n  watch() {\n    if (this.mainService.widgetExists(this.id, this.type, this.parent)) {\n      this.mainService.watchWidget(this.id, this.type, this.parent).subscribe((data: any) => {\n        this.status = data;\n        this.triggered.emit({\n          status: this.status,\n          options: this.options\n        });\n      });\n    }\n  }\n\n  watchOptions() {\n    if (this.mainService.widgetExists(this.id, this.type, this.parent)) {\n      this.mainService.watchWidget(this.id, this.type, this.parent).subscribe((data: any) => {\n        this.options = data;\n      });\n    }\n  }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\nimport { Theme } from '../../types';\n@Component({\n  selector: 'mg-alert',\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.css']\n})\nexport class AlertComponent implements OnInit {\n  @Input() theme: Theme = \"primary\";\n  @Input() show = true;\n  @Input() alignCenter = false;\n  @Input() closeBtn = \"\";\n  @Input() class = \"\";\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n  hide() {\n    this.show = false;\n  }\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'mg-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.css']\n})\nexport class BreadcrumbComponent implements OnInit {\n  @Input() links: any = [];\n  @Input() darkmode = false;\n  @Input() devider = \"/\";\n  @Input() class = \"\";\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  showDarkMode() {\n    return this.darkmode ? \"dark\" : \"lite\";\n  }\n\n  active(link: any) {\n    return link.active ? 'active' : '';\n  }\n\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'mg-card',\n  templateUrl: './card.component.html',\n  styleUrls: ['./card.component.css']\n})\nexport class CardComponent implements OnInit {\n  @Input() class = ``;\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}\n","<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","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { Theme } from '../../types';\n\n@Component({\n  selector: 'mg-chip',\n  templateUrl: './chip.component.html',\n  styleUrls: ['./chip.component.css']\n})\nexport class ChipComponent implements OnInit {\n  @Input() theme: Theme = \"primary\";\n  @Input() outline = false;\n  @Input() class = \"\";\n  @Input() closeBtn = `<i class=\"fas fa-times\"></i>`;\n  @Output() close = new EventEmitter();\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  chipClass(){\n    let results = \"\";\n    results += this.theme;\n\n    results += this.outline ? \" outlined\" : \"\";\n\n    return results;\n  }\n\n}\n","<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","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n  selector: 'mg-dragable',\n  templateUrl: './dragable.component.html',\n  styleUrls: ['./dragable.component.css']\n})\nexport class DragableComponent implements OnInit {\n  @Input() dragable = true;\n  @Input() data: any = {\n    name: \"Ashbeel\",\n    profession: \"Software Engineer\"\n  };\n  @Input() class = \"\";\n\n  @Output() onEvent = new EventEmitter();\n\n  eventProperties = {\n    isInDragMode: false\n  };\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  onDrag(event: any) {\n    event.dataTransfer.setData(\"text\", JSON.stringify(this.data));\n    event.dataTransfer.effectAllowed = \"all\";\n    event.stopPropagation();\n    this.onEvent.emit(this.eventProperties);\n  }\n\n}\n","<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","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n  selector: 'mg-dropable',\n  templateUrl: './dropable.component.html',\n  styleUrls: ['./dropable.component.css']\n})\nexport class DropableComponent implements OnInit {\n  @Output() onEvent = new EventEmitter();\n  @Output() dataRecieved = new EventEmitter();\n\n  @Input() dropFiles = false;\n  @Input() class = \"\";\n  onEventProperties = {\n    isDraggedOver: false,\n    dragEntered: false,\n    dragLeft: false,\n    dropped: false\n  };\n\n  data:any = false;\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  onDrop(event: any) {\n    event.preventDefault();\n    this.onEventProperties.dropped = true;\n    this.emitEvents();\n    if(this.dropFiles) {\n      this.data = event.dataTransfer.files;\n    }else{\n      var data = event.dataTransfer.getData(\"text\");\n      this.data = data ? JSON.parse(data) : false;\n    }\n    if(this.data){\n      this.emitData();\n    }\n  }\n  draggedOver(event: any) {\n    event.stopPropagation();\n    this.onEventProperties.isDraggedOver = true;\n    this.emitEvents();\n    event.preventDefault();\n  }\n  dragEntered(event:any){\n    event.stopPropagation();\n    this.onEventProperties.dragEntered = true;\n    this.onEventProperties.dragLeft = false;\n    this.emitEvents();\n    event.preventDefault();\n  }\n  dragLeft(event:any){\n    event.stopPropagation();\n    this.onEventProperties.dragLeft = true;\n    this.onEventProperties.dragEntered = false;\n    this.emitEvents();\n    event.preventDefault();\n  }\n\n\n  emitEvents(){\n    this.onEvent.emit(this.onEventProperties);\n  }\n\n  emitData(){\n    this.dataRecieved.emit(this.data);\n  }\n\n}\n","<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","import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'mg-footer',\n  templateUrl: './footer.component.html',\n  styleUrls: ['./footer.component.css']\n})\nexport class FooterComponent implements OnInit {\n  @Input() theme = \"primary\";\n  @Input() toBottom = false;\n  @Input() class = \"\";\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  mainFooterClasses(){\n    let results = \"\";\n    results += this.theme;\n    results += this.toBottom ? \" stick-to-bottom\" : \"\";\n    return results;\n  }\n}\n","<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","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { MaterialgrammiService } from '../../materialgrammi.service';\nimport { Theme } from '../../types';\n\n@Component({\n  selector: 'mg-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.css']\n})\nexport class CheckboxComponent implements OnInit {\n  @Input() size = \"m\";\n  @Input() theme: Theme = \"primary\";\n  @Input() onDark = false;\n  @Input() isSelected = false;\n  @Input() class = \"\";\n\n\n  @Output() isChecked = new EventEmitter();\n  id = \"\";\n  selected = this.isSelected;\n  constructor(private service: MaterialgrammiService) { }\n\n  ngOnInit(): void {\n    this.isChecked.emit(this.selected);\n    this.selected = this.isSelected;\n    this.id = \"input-checkbox-\" + this.service.makeid(10, \"checkbox\");\n  }\n  mainClasses() {\n    let results = \"\";\n    results += this.size == \"s\" ? \"small\" : this.size == \"m\" ? \"medium\" : \"large\";\n    results += \" \" + this.theme;\n    return results;\n  }\n\n  labelClass() {\n    let results = \"\";\n    results += this.onDark ? \"lite\" : \"dark\";\n    results += this.selected ? \" active\" : \"\";\n    return results;\n  }\n\n  toggleCheck() {\n    this.selected = !this.selected;\n    this.isChecked.emit(this.selected);\n  }\n\n}\n","<div class=\"checkbox\" [ngClass]=\"mainClasses() + ' ' + class\">\n  <input [id]=\"id\" type=\"checkbox\" [checked]=\"isSelected\" style=\"opacity: 0; position: absolute;\"/>\n  <label class=\"check\" [for]=\"id\" (click)=\"toggleCheck()\"></label>\n  <label class=\"label\" [for]=\"id\" [ngClass]=\"labelClass()\"\n    (click)=\"toggleCheck()\"><ng-content></ng-content></label>\n</div>\n","import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { InputStyle, Theme } from '../../types';\n\n@Component({\n  selector: 'mg-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css']\n})\nexport class InputComponent implements OnInit {\n  @Input() theme:Theme = \"primary\";\n  @Input() form: InputStyle = \"control\";\n  @Input() placeholder = \"\";\n  @Input() control: FormControl = new FormControl('');\n  @Input() type = \"text\";\n  @Input() dark = false;\n  @Input() class = \"\";\n  @Output() data = new EventEmitter<FormControl>();\n  @Output() isFocused = new EventEmitter();\n  @Output() keyup = new EventEmitter();\n  @Input() value = \"\";\n  @Input() rounded = false;\n  @Input() filled = false;\n\n  @Input() info = {\n    type: \"success\",\n    msg: \"\"\n  };\n\n  @ViewChild('inputElement') private inputElem!: ElementRef;\n\n  active = false;\n  focused = false;\n  input_placeholder = this.form == \"control\" && this.placeholder != \"\" ? this.placeholder : \"\";\n  \n  constructor() { }\n\n  ngOnInit(): void {\n    this.input_placeholder = this.form == \"control\" && this.placeholder != \"\" ? this.placeholder : \"\";\n    if (this.value != \"\") {\n      this.active = true;\n    }\n  }\n\n  onFocusIn() {\n    this.focused = true;\n    this.active = true;\n    this.isFocused.emit(true);\n  }\n\n  onFocusOut() {\n    this.focused = false;\n    if (!(this.value.length > 0)) {\n      this.active = false;\n    }\n    this.isFocused.emit(false);\n  }\n\n  onKeyUp(event: any) {\n    this.value = event.target.value;\n    this.control.setValue(event.target.value);\n    this.keyup.emit(event);\n    this.data.emit(this.control);\n  }\n\n  mainClasses() {\n    let classes = ``;\n    classes += ` ${this.active ? 'active' : ''}`;\n    classes += this.dark ? \" on-dark\" : \" on-lite\";\n    classes += this.form === \"control\" ? (this.filled ? \" filled\" : \" outline\") : \"\";\n    return classes;\n  }\n\n  labelClick(){\n    this.inputElem.nativeElement.focus();\n  }\n\n  infoClasses(){\n    let classes = \"\";\n    if(this.info.type === \"error\"){\n      classes += \"text-red\";\n    }else if(this.info.type === \"success\"){\n      classes += \"text-green\";\n    }else if(this.info.type === \"info\"){\n      classes += \"text-blue\";\n    }else if(this.info.type === \"lite\"){\n      classes += \"text-grey2\";\n    }else if(this.info.type === \"dark\"){\n      classes += \"text-grey8\";\n    }\n    return classes;\n  }\n\n}\n","<div class=\"form-{{form}} {{theme}}\" [ngClass]=\"mainClasses()\">\n\n  <label (click)=\"labelClick()\"><ng-content></ng-content></label>\n\n  <input #inputElement [type]=\"type\" (focus)=\"onFocusIn()\" (focusout)=\"onFocusOut()\" (keyup)=\"onKeyUp($event)\" [value]=\"value\" [ngClass]=\"class + (rounded ? 'radius-5' : '')\" [placeholder] = \"input_placeholder\"/>\n  <ng-container *ngIf=\"info && info.msg && info.msg.length > 0\">\n    <p [innerHtml]=\"info.msg\" [ngClass]=\"infoClasses()\"></p>\n  </ng-container>\n\n</div>","import { Injectable } from '@angular/core';\n\nexport interface SplittedDate {\n  date: number,\n  year: number,\n  month: number,\n  day: number,\n  hour: number,\n  minute: number,\n  second: number\n}\n\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DaterService {\n  now = new Date();\n\n  months = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\"\n  ];\n\n  weekDays = [\n    \"Sunday\",\n    \"Monday\",\n    \"Tuesday\",\n    \"Wednesday\",\n    \"Thursday\",\n    \"Friday\",\n    \"Saturday\"\n  ];\n\n  dateSplit?: SplittedDate;\n\n  constructor() { }\n\n  assign(dateString: string) {\n    return new Date(dateString);\n  }\n\n  dater(dd: string | false = false){\n    return !dd ? new Date() : new Date(dd);\n  }\n\n  getMonth(date: Date = this.dater()){\n    return date.getMonth();\n  }\n\n  getDate(date: Date = this.dater()){\n    return date.getDate();\n  }\n\n  getYear(date: Date = this.dater()){\n    return date.getFullYear();\n  }\n\n  getDay(date: Date = this.dater()){\n    return date.getDay();\n  }\n\n  getWeekDay(date: Date = this.dater()){\n    return this.weekDays[date.getDay()];\n  }\n\n  getHour(date: Date = this.dater()){\n    return date.getHours();\n  }\n\n  getMinute(date: Date = this.dater()){\n    return date.getMinutes();\n  }\n\n  getSeconds(date: Date = this.dater()){\n    return date.getSeconds();\n  }\n\n  format(date: Date, formatString: string) {\n    let splitter:SplittedDate = this.splitDate(date);\n    if(splitter && splitter.date !== undefined && splitter.day !== undefined \n      && splitter.hour !== undefined && splitter.minute !== undefined \n      && splitte