\n \n \n
\n
\n bar works!
\n","import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';\n\n@Component({\n selector: 'ng-gauge',\n templateUrl: './gauge.component.html',\n styleUrls: ['./gauge.component.scss']\n})\nexport class GaugeComponent implements OnChanges {\n public r: number = 100 / (2 * Math.PI);\n public total = 100;\n public offset = 25;\n public dashArray = '0 0';\n @Input() public color = '#ce4b99';\n @Input() value\n width = 3;\n\n\n ngOnChanges(changes: SimpleChanges): void {\n this.dashArray = `${this.value} ${this.total - this.value}`\n }\n}\n","\n\n","import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';\ninterface Item {\n name: string,\n count: number,\n color: string\n}\n@Component({\n selector: 'ng-pie',\n templateUrl: './pie.component.html',\n styleUrls: ['./pie.component.scss']\n})\nexport class PieComponent implements OnChanges{\n@Input() items: Item[] = [];\n _total: number = 0;\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.items.length > 0) {\n this._total = this.items.map(a => a.count).reduce((x, y) => x + y);\n }\n }\n getPieOffset(index: number): number {\n let val = 0;\n for (let i = 0; i < index; i++) {\n val += this.items[i].count\n }\n return -val\n }\n\n getPieArray(index) {\n let val = 0;\n for (let i = 0; i <= index; i++) {\n val += this.items[i].count\n }\n return `${val} ${this._total}`\n }\n\n}\n","\n","import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';\n\ninterface Item {\n name: string,\n count: number,\n color: string\n}\n\n@Component({\n selector: 'ng-donut',\n templateUrl: './donut.component.html',\n styleUrls: ['./donut.component.scss']\n})\nexport class DonutComponent implements OnChanges{\n @Input() items: Item[] = [];\n _total: number = 0;\n\n constructor() {\n\n }\n\n getPerimeter(radius: number): number {\n return Math.PI * 2 * radius;\n }\n\n getOffset(radius: number, index: number): number {\n let percent = 0;\n for (let i = 0; i < index; i++) {\n percent += ((this.items[i].count) / this._total);\n }\n const perimeter = Math.PI * 2 * radius;\n return perimeter * percent;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (this.items.length > 0) {\n this._total = this.items.map(a => a.count).reduce((x, y) => x + y);\n }\n }\n\n\n}\n","\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BarComponent } from './bar/bar.component';\nimport { GaugeComponent } from './gauge/gauge.component';\nimport { PieComponent } from './pie/pie.component';\nimport { DonutComponent } from './donut/donut.component';\n\nconst provides = [\n BarComponent,\n GaugeComponent,\n PieComponent,\n DonutComponent\n]\n\n\n@NgModule({\n declarations: [\n provides\n ],\n imports: [\n CommonModule\n ],\n exports: [\n provides\n ]\n})\nexport class GraphModule { }\n","import {Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef} from \"@angular/core\";\n\nexport interface SliderContext\n ![]()
\n
\n\n","import {Component, Input, OnInit} from '@angular/core';\ninterface SlideInterface {\n url: string;\n title: string;\n}\n@Component({\n selector: 'ng-slider-caption',\n templateUrl: './slider-caption.component.html',\n styleUrls: ['./slider-caption.component.scss']\n})\nexport class SliderCaptionComponent implements OnInit {\n @Input() data!: SlideInterface[];\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","\n
\n ❰
\n ❱
\n \n \n ●\n
\n \n \n ![]()
\n \n \n \n \n \n
\n","import {Directive, Input} from \"@angular/core\";\n\ninterface ScrollingCardContext{{img.title}} {{i}}
\n\n
\n\n
\n {{ data.title }}
\n\n
\n {{ data.content }}
\n\n Learn More\n
\n \n ❰\n
\n\n ❱\n
\n\n
\n\n
\n {{ data.title }}
\n\n
\n {{ data.content }}
\n\n Learn More\n
\n \n \n \n \n
\n\n\n\n\n \n \n
\nHome
\nHome is where the heart is..
\n\n \n \n
\nABOUT
\nABOUT is where the heart is..
\n\n \n \n
\nCONTACT
\nCONTACT is where the heart is..
\n\n \n \n
\n","import {Component, Input, OnInit} from '@angular/core';\n\n// import {animate, animateChild, query, style, transition, trigger} from \"@angular/animations\";\n\n// export const slideUpAnimation = trigger(\"slideUp\", [\n// transition(\":enter\", [\n// style({transform: \"translate(0,500px)\"}),\n// animate(\n// \"350ms cubic-bezier(0.17, 0.89, 0.24, 1.11)\",\n// style({transform: \"translate(0,0)\"})\n// ),\n// ]),\n// transition(\":leave\", [\n// animate(\"300ms ease-in-out\", style({transform: \"translate(0,500px)\"})),\n// ]),\n// ]);\n// export const child = trigger('child', [\n// transition(':enter, :leave', [\n// query('@*', animateChild(), {optional: true}),\n// ]),\n// ]);\n\n@Component({\n selector: 'ng-tab',\n templateUrl: './tab.component.html',\n styleUrls: ['./tab.component.scss']\n})\nexport class TabComponent implements OnInit {\n @Input('tabTitle') title: string;\n active = false;\n left = false\n\n constructor() {\n }\n\n ngOnInit(): void {\n }\n\n}\n","NEWS
\nNEWS is where the heart is..
\n\n
\n\n\n\n\n","export enum ColorEnum {\n // red = '#f56565',\n // red2='#d33a2c',\n // blue = '#4299e1',\n // green = '#48bb78',\n // green2= '#137d54',\n // yellow = '#ecc94b',\n // gray = '#e2e8f0',\n // darkBlue = '#0085f2',\n // 'darkRed' = '#e84c3d',\n // 'darkGreen' = '#61bd4f',\n // 'voillet' = '#c377e0',\n // 'lightRed' = '#eb5a46',\n // 'skyBlue' = '#00c2e0',\n // 'black' = 'black',\n // white = '#ffffff'\n blue = '#3f51b5',\n pink = '#ff4081',\n indigo = 'indigo',\n purple = 'purple',\n brown = 'brown',\n darkorange = 'darkorange',\n orange = 'orange',\n yellow = 'yellow',\n lime = 'lime',\n green = 'green',\n lightgreen = 'lightgreen',\n teal = 'teal',\n cyan = 'cyan',\n blue2 = '#0e4491',\n greenV2 = '#2ebc4f',\n blue3 = '#204ecf',\n color1 = '#94d13d',\n color2 = '#6f58e9',\n color3 = '#2d99fe',\n color4 = '#2ddac1',\n color5 = '#eb6dc0',\n color6 = '#8DA6CD',\n transparent = 'transparent',\n PRIMARY = '#3634a3',\n SECONDARY = '#3B4D63',\n SUCCESS = '#16a34a', // '#0f5722'\n INFO = '#184c77',\n WARNING = '#ca8a04',\n DANGER = '#c00',\n LIGHT = '#4a566d',\n DARK = '#323a49'\n}\n\nexport type ColorType = keyof typeof ColorEnum;\n\nexport enum ThemeColorsEnum {\n PRIMARY = '#264653',\n SECONDARY = '#3B4D63',\n SUCCESS = '#2a9d8f',\n INFO = '#e9c46a',\n WARNING = '#f4a261',\n DANGER = '#e76f51',\n DEFAULT = '#369',\n RED = '#c00'\n}\n\nexport enum ColorEnum1 {\n green = '#6DD400',\n green1 = '#1CB142',\n green2 = '#689f38',\n voilet = '#9475FF',\n voilet1 = '#6236FF',\n orange = '#FF751A',\n orange1 = '#FA6400',\n red = '#FD4E71',\n red1 = '#F9345E',\n red2 = '#bf360c',\n darkBlue = '#1A1053',\n gray = '#817C9B',\n purple = '#6a1b9a',\n blue = '#0092ed',\n transparent = 'transparent',\n darkGray = '#ededfc',\n white = '#fff',\n special = 'hsl(240, 49%, 7%)',\n special2 = '#151526',\n lightGray = '#e8f1ff'\n}\n\nexport type ColorType1 = keyof typeof ColorEnum1;\n\n// myCircle2: red;\n// twitter: rgb(29, 155, 240)\n// jio: rgb(217, 0, 141)\n// hotstar: 000\n// wattsup: 075e54\n// monster: #6e00be;\n// cutshort: #5851D3\n// fb: #4267B2\n//$tab-color: #32557f;\n","import {\n AfterContentInit,\n AfterViewInit,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n QueryList,\n ViewChild\n} from '@angular/core';\nimport {TabComponent} from \"./tab/tab.component\";\nimport {ColorEnum, ColorType} from \"../../shared/colors\";\n\ntype TabVersion =\n 'version1'\n | 'version1-v2'\n | 'version1-v3'\n | 'version1-v4'\n | 'version1-v5'\n | 'version1-v6'\n | 'version1-v7'\n | 'version1-v8'\n | 'version1-v9'\n | 'version1-v10'\n | 'version2'\n | 'version2-v2'\n | 'version2-v3'\n | 'version3'\n | 'version3-v2'\n | 'version3-v3'\n | 'version3-v4'\n | 'version3-v5'\n | 'version4'\n ;\n\n@Component({\n selector: 'ng-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n host: {\n '[style.--tab-color]': 'ColorEnum[this.color]'\n }\n})\nexport class TabsComponent implements AfterContentInit, AfterViewInit {\n @Input() version: TabVersion | any = 'version2-v3';\n @ContentChildren(TabComponent) tabs: QueryList\n \n
\n- \n
- {{ tab.title }}\n \n
\n \n
\n\n\n\n
\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {ColumnsComponent} from \"./columns.component\";\nimport {ColumnComponent} from \"./column/column.component\";\nimport {ColumnTitleComponent} from \"./column/column-title/column-title.component\";\n\n\n\n@NgModule({\n declarations: [ColumnsComponent, ColumnComponent, ColumnTitleComponent],\n imports: [\n CommonModule\n ],\n exports: [ColumnsComponent, ColumnComponent, ColumnTitleComponent]\n})\nexport class ColumnsModule { }\n","import {AfterViewInit, Component, ElementRef, HostBinding, Input} from '@angular/core';\nimport {ColorEnum, ColorType} from \"../shared/colors\";\n\n@Component({\n selector: 'button[ng-button], span[ng-button], a[ng-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss']\n})\nexport class ButtonComponent implements AfterViewInit {\n @Input() color: ColorType = 'blue';\n @Input() size: 'small' | 'medium' | 'large' = 'medium';\n @Input() shape: 'squared' | 'rounded' | 'pilled' = 'rounded';\n @Input() styled: 'solid' | 'outline' | 'outline-bg' | 'outline-wg' | 'basic';\n @Input() raised: boolean;\n @Input() fullWidth: boolean;\n @Input() autoHeight: boolean;\n\n constructor(public ele: ElementRef) {\n }\n\n @HostBinding('class')\n get classes(): string {\n return `${this.styled} ${this.shape} ${this.size} ${this.raised ? 'raised' : ''}`\n }\n\n ngAfterViewInit(): void {\n let color = ColorEnum[this.color];\n this.ele.nativeElement.style.setProperty('--color', color);\n if (this.fullWidth) {\n this.ele.nativeElement.style.setProperty('width', '100%');\n }\n if (this.autoHeight) {\n this.ele.nativeElement.style.setProperty('height', 'auto');\n }\n }\n}\n","\n
\n\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {ModalComponent} from \"./modal.component\";\n\n@NgModule({\n imports: [CommonModule],\n declarations: [ModalComponent],\n exports: [ModalComponent]\n})\nexport class ModalModule {\n}\n","import {DOCUMENT} from '@angular/common';\nimport {\n ApplicationRef,\n ComponentRef,\n createComponent,\n EnvironmentInjector,\n Inject,\n Injectable,\n TemplateRef,\n Type,\n} from '@angular/core';\nimport {Subject} from 'rxjs';\nimport {ModalComponent} from './modal.component';\nimport {ModalOptions} from \"./modal-options\";\n\n\n@Injectable(\n {providedIn: 'root'}\n)\nexport class ModalService {\n newModalComponent!: ComponentRef\n
\n \n \n \n \n\n {{ title }}\n {{ subTitle | titlecase }}\n
\n ✕\n \n
\n- \n
- Card View \n
- Table View \n
- List View \n
\n
\n
\n
\n\n
\n \n\n×\n
\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {AlertComponent} from \"./alert.component\";\n\n\n\n@NgModule({\n declarations: [\n AlertComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [AlertComponent]\n})\nexport class AlertModule { }\n","import {Component, Input} from '@angular/core';\nimport {ColorEnum, ColorType} from \"../shared/colors\";\n\n@Component({\n selector: 'ng-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n host: {\n '[style.--color]': 'ColorEnum[this.color]',\n '[class]': '[shape, styled]',\n '[class.raised]': 'isRaised',\n '[class.fullwidth]': 'fullwidth'\n }\n})\nexport class BadgeComponent {\n @Input() color: ColorType = 'blue';\n @Input() shape: 'squared' | 'rounded' | 'pilled' = 'rounded';\n @Input() styled: 'solid' | 'outline' | 'outline-bg' | 'outline-wg' | 'basic';\n @Input() isRaised: boolean;\n @Input() fullwidth: boolean\n protected readonly ColorEnum = ColorEnum;\n}\n","\n \n \n \n
\n","import {Directive, Input} from \"@angular/core\";\n\n@Directive({\n selector: 'app-sidenav'\n})\nexport class SidenavDirective {\n}\n@Directive({\n selector: 'app-sidenav-content'\n})\nexport class SidenavContentDirective {\n}\n\n@Directive({\n selector: 'app-sidenav-link',\n})\nexport class SidenavLinkDirective {\n @Input() routerLink?: string | string[];\n @Input() label?: string;\n\n @Input() routerLinkActiveOptions: { exact: boolean } = { exact: false };\n\n}\n","import {Component, ContentChildren, OnInit, QueryList} from '@angular/core';\nimport {SidenavLinkDirective} from \"../sidenav\";\n\n@Component({\n selector: 'app-sidenav-list',\n templateUrl: './sidenav-list.component.html',\n styleUrls: ['./sidenav-list.component.scss']\n})\nexport class SidenavListComponent implements OnInit {\n @ContentChildren(SidenavLinkDirective) links: QueryList- \n
- \n \n\n {{link?.label}}\n \n \n
{{ titleName }}
\n{{title}}
\n\n \n \n \n \n \n \n
\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'app-admin-content'\n})\nexport class AdminContentDirective {\n\n constructor() { }\n\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'app-admin-footer'\n})\nexport class AdminFooterDirective {\n\n constructor() { }\n\n}\n","import {Directive, Input} from '@angular/core';\n\n@Directive({\n selector: 'app-admin-sidenav-Link'\n})\nexport class AdminSidenavLinkDirective {\n @Input() routerLink?: string | string[];\n @Input() label?: string;\n\n @Input() routerLinkActiveOptions: { exact: boolean } = { exact: false };\n constructor() { }\n\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n selector: 'app-admin-sidenav'\n})\nexport class AdminSidenavDirective {\n\n constructor() { }\n\n}\n","import {Component, Input} from '@angular/core';\n\n@Component({\n selector: 'app-admin-header',\n template: `\n \n