mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
refactor(app): rename components, move tinymce to separate file
This commit is contained in:
parent
923e56c3d2
commit
3ac268a096
40 changed files with 199 additions and 136 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'footer',
|
selector: 'ngx-footer',
|
||||||
styleUrls: ['./footer.component.scss'],
|
styleUrls: ['./footer.component.scss'],
|
||||||
template: `
|
template: `
|
||||||
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
|
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { NgaSidebarService, NgaMenuService } from '@nga/theme';
|
||||||
import { NgaThemeService } from '@nga/theme/services/theme.service';
|
import { NgaThemeService } from '@nga/theme/services/theme.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'header',
|
selector: 'ngx-header',
|
||||||
styleUrls: ['./header.component.scss'],
|
styleUrls: ['./header.component.scss'],
|
||||||
template: `
|
template: `
|
||||||
<div class="left">
|
<div class="left">
|
||||||
|
|
@ -14,7 +14,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nga-actions size="medium" inverse class="right">
|
<nga-actions size="medium" inverse class="right">
|
||||||
<nga-action><search-input></search-input></nga-action>
|
<nga-action><ngx-search-input></ngx-search-input></nga-action>
|
||||||
<nga-action icon="ion-ios-email-outline"></nga-action>
|
<nga-action icon="ion-ios-email-outline"></nga-action>
|
||||||
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
|
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
|
||||||
<nga-action>
|
<nga-action>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
export * from './header/header.component';
|
export * from './header/header.component';
|
||||||
export * from './footer/footer.component';
|
export * from './footer/footer.component';
|
||||||
export * from '../components/search-input/search-input.component';
|
export * from './search-input/search-input.component';
|
||||||
|
export * from './tiny-mce/time-mce.component';
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
|
import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'search-input',
|
selector: 'ngx-search-input',
|
||||||
styleUrls: ['./search-input.component.scss'],
|
styleUrls: ['./search-input.component.scss'],
|
||||||
template: `
|
template: `
|
||||||
<i class="control-icon ion ion-ios-search"
|
<i class="control-icon ion ion-ios-search"
|
||||||
|
|
|
||||||
33
src/app/@theme/components/tiny-mce/time-mce.component.ts
Normal file
33
src/app/@theme/components/tiny-mce/time-mce.component.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import {Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-tiny-mce',
|
||||||
|
template: '',
|
||||||
|
})
|
||||||
|
export class TinyMCEComponent implements OnDestroy, AfterViewInit {
|
||||||
|
|
||||||
|
@Output() editorKeyup = new EventEmitter<any>();
|
||||||
|
|
||||||
|
editor: any;
|
||||||
|
|
||||||
|
constructor(private host: ElementRef) { }
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
tinymce.init({
|
||||||
|
target: this.host.nativeElement,
|
||||||
|
plugins: ['link', 'paste', 'table'],
|
||||||
|
skin_url: 'assets/skins/lightgray',
|
||||||
|
setup: editor => {
|
||||||
|
this.editor = editor;
|
||||||
|
editor.on('keyup', () => {
|
||||||
|
let content = editor.getContent();
|
||||||
|
this.editorKeyup.emit(content);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
tinymce.remove(this.editor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,7 +5,7 @@ import { Component } from '@angular/core';
|
||||||
template: `
|
template: `
|
||||||
<nga-layout>
|
<nga-layout>
|
||||||
<nga-layout-header fixed>
|
<nga-layout-header fixed>
|
||||||
<header></header>
|
<ngx-header></ngx-header>
|
||||||
</nga-layout-header>
|
</nga-layout-header>
|
||||||
|
|
||||||
<nga-sidebar>
|
<nga-sidebar>
|
||||||
|
|
@ -17,7 +17,7 @@ import { Component } from '@angular/core';
|
||||||
</nga-layout-column>
|
</nga-layout-column>
|
||||||
|
|
||||||
<nga-layout-footer fixed>
|
<nga-layout-footer fixed>
|
||||||
<footer></footer>
|
<ngx-footer></ngx-footer>
|
||||||
</nga-layout-footer>
|
</nga-layout-footer>
|
||||||
</nga-layout>
|
</nga-layout>
|
||||||
`,
|
`,
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,13 @@ import {
|
||||||
NgaActionsModule,
|
NgaActionsModule,
|
||||||
} from '@nga/theme';
|
} from '@nga/theme';
|
||||||
|
|
||||||
import { SearchInputComponent, HeaderComponent, FooterComponent } from './components';
|
import {
|
||||||
|
HeaderComponent,
|
||||||
|
FooterComponent,
|
||||||
|
SearchInputComponent,
|
||||||
|
TinyMCEComponent
|
||||||
|
} from './components';
|
||||||
|
|
||||||
import { OneColumnLayoutComponent } from './layouts';
|
import { OneColumnLayoutComponent } from './layouts';
|
||||||
|
|
||||||
const BASE_MODULES = [
|
const BASE_MODULES = [
|
||||||
|
|
@ -36,12 +42,8 @@ const COMPONENTS = [
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
SearchInputComponent,
|
SearchInputComponent,
|
||||||
];
|
TinyMCEComponent,
|
||||||
|
|
||||||
const LAYOUTS = [
|
|
||||||
OneColumnLayoutComponent,
|
OneColumnLayoutComponent,
|
||||||
HeaderComponent,
|
|
||||||
FooterComponent,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -54,11 +56,9 @@ const LAYOUTS = [
|
||||||
...BASE_MODULES,
|
...BASE_MODULES,
|
||||||
...NGA_MODULES,
|
...NGA_MODULES,
|
||||||
...COMPONENTS,
|
...COMPONENTS,
|
||||||
...LAYOUTS,
|
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
...COMPONENTS,
|
...COMPONENTS,
|
||||||
...LAYOUTS,
|
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class ThemeModule {
|
export class ThemeModule {
|
||||||
|
|
|
||||||
|
|
@ -6,5 +6,5 @@ import { Component } from '@angular/core';
|
||||||
<p>charts work!</p>
|
<p>charts work!</p>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxChartsComponent {
|
export class ChartsComponent {
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,6 @@ import 'ckeditor';
|
||||||
</nga-card>
|
</nga-card>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxCKEditorComponent {
|
export class CKEditorComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
17
src/app/pages/editors/ckeditor/ckeditor.component.ts
Normal file
17
src/app/pages/editors/ckeditor/ckeditor.component.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
import './ckeditor.loader';
|
||||||
|
import 'ckeditor';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-ckeditor',
|
||||||
|
template: `
|
||||||
|
<nga-card>
|
||||||
|
<nga-card-body>
|
||||||
|
<ckeditor [config]="{extraPlugins: 'divarea'}"></ckeditor>
|
||||||
|
</nga-card-body>
|
||||||
|
</nga-card>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class CKEditorComponent {
|
||||||
|
}
|
||||||
1
src/app/pages/editors/ckeditor/ckeditor.loader.ts
Normal file
1
src/app/pages/editors/ckeditor/ckeditor.loader.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.2/full-all/';
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { NgxEditorsComponent } from './editors.component';
|
import { EditorsComponent } from './editors.component';
|
||||||
import { NgxTinyMCEComponent, NgxTinyMCEEditorComponent } from './tinyMCE.component';
|
import { TinyMCEComponent, TinyMCEEditorComponent } from './tinyMCE.component';
|
||||||
import { NgxCKEditorComponent } from './ckeditor.component';
|
import { CKEditorComponent } from './ckeditor.component';
|
||||||
|
|
||||||
const routes: Routes = [{
|
const routes: Routes = [{
|
||||||
path: '',
|
path: '',
|
||||||
component: NgxEditorsComponent,
|
component: EditorsComponent,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'tinymce',
|
path: 'tinymce',
|
||||||
component: NgxTinyMCEComponent,
|
component: TinyMCEComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'ckeditor',
|
path: 'ckeditor',
|
||||||
component: NgxCKEditorComponent,
|
component: CKEditorComponent,
|
||||||
}],
|
}],
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
|
@ -21,11 +21,11 @@ const routes: Routes = [{
|
||||||
imports: [RouterModule.forChild(routes)],
|
imports: [RouterModule.forChild(routes)],
|
||||||
exports: [RouterModule],
|
exports: [RouterModule],
|
||||||
})
|
})
|
||||||
export class NgxEditorsRoutingModule { }
|
export class EditorsRoutingModule { }
|
||||||
|
|
||||||
export const routedComponents = [
|
export const routedComponents = [
|
||||||
NgxEditorsComponent,
|
EditorsComponent,
|
||||||
NgxTinyMCEComponent,
|
TinyMCEComponent,
|
||||||
NgxTinyMCEEditorComponent,
|
TinyMCEEditorComponent,
|
||||||
NgxCKEditorComponent,
|
CKEditorComponent,
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,6 @@ import { Component } from '@angular/core';
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxEditorsComponent {
|
export class EditorsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,20 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CKEditorModule } from 'ng2-ckeditor';
|
import { CKEditorModule } from 'ng2-ckeditor';
|
||||||
|
|
||||||
import { NgxSharedModule } from '../../@shared/shared.module';
|
import { SharedModule } from '../../shared.module';
|
||||||
|
import { ThemeModule } from '../../@theme/theme.module';
|
||||||
|
|
||||||
import { NgxEditorsRoutingModule, routedComponents } from './editors-routing.module';
|
import { EditorsRoutingModule, routedComponents } from './editors-routing.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
NgxSharedModule,
|
SharedModule,
|
||||||
NgxEditorsRoutingModule,
|
ThemeModule,
|
||||||
|
EditorsRoutingModule,
|
||||||
CKEditorModule,
|
CKEditorModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
...routedComponents,
|
...routedComponents,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class NgxEditorsModule { }
|
export class EditorsModule { }
|
||||||
|
|
|
||||||
18
src/app/pages/editors/tiny-mce/tiny-mce.component.ts
Normal file
18
src/app/pages/editors/tiny-mce/tiny-mce.component.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-tiny-mce-page',
|
||||||
|
template: `
|
||||||
|
<nga-card>
|
||||||
|
<nga-card-body>
|
||||||
|
<ngx-tiny-mce (editorKeyup)="editorKeyup($event)"></ngx-tiny-mce>
|
||||||
|
</nga-card-body>
|
||||||
|
</nga-card>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class TinyMCEComponent {
|
||||||
|
|
||||||
|
editorKeyup($event) {
|
||||||
|
console.info('keyup', $event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,7 @@ import { Component, OnDestroy, AfterViewInit, Input, Output, EventEmitter } from
|
||||||
<textarea id="{{ elementId }}"></textarea>
|
<textarea id="{{ elementId }}"></textarea>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxTinyMCEEditorComponent implements OnDestroy, AfterViewInit {
|
export class TinyMCEEditorComponent implements OnDestroy, AfterViewInit {
|
||||||
|
|
||||||
@Input() elementId: string;
|
@Input() elementId: string;
|
||||||
|
|
||||||
|
|
@ -47,7 +47,7 @@ export class NgxTinyMCEEditorComponent implements OnDestroy, AfterViewInit {
|
||||||
</nga-card>
|
</nga-card>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxTinyMCEComponent {
|
export class TinyMCEComponent {
|
||||||
|
|
||||||
editorKeyupHandler($event) {
|
editorKeyupHandler($event) {
|
||||||
console.info($event);
|
console.info($event);
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-form-inputs',
|
selector: 'ngx-form-inputs',
|
||||||
templateUrl: './form-inputs.component.html',
|
templateUrl: './form-inputs.component.html',
|
||||||
})
|
})
|
||||||
export class NgxFormInputsComponent {
|
export class FormInputsComponent {
|
||||||
|
|
||||||
rate1: number = 3;
|
rate1: number = 3;
|
||||||
rate2: number = 4;
|
rate2: number = 4;
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-form-layouts',
|
selector: 'ngx-form-layouts',
|
||||||
templateUrl: './form-layouts.component.html',
|
templateUrl: './form-layouts.component.html',
|
||||||
})
|
})
|
||||||
export class NgxFormLayoutsComponent {
|
export class FormLayoutsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { NgxFormsComponent } from './forms.component';
|
import { FormsComponent } from './forms.component';
|
||||||
import { NgxFormInputsComponent } from './form-inputs/form-inputs.component';
|
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||||
import { NgxFormLayoutsComponent } from './form-layouts/form-layouts.component';
|
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||||
|
|
||||||
const routes: Routes = [{
|
const routes: Routes = [{
|
||||||
path: '',
|
path: '',
|
||||||
component: NgxFormsComponent,
|
component: FormsComponent,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'inputs',
|
path: 'inputs',
|
||||||
component: NgxFormInputsComponent,
|
component: FormInputsComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'layouts',
|
path: 'layouts',
|
||||||
component: NgxFormLayoutsComponent,
|
component: FormLayoutsComponent,
|
||||||
}],
|
}],
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
|
@ -25,12 +25,12 @@ const routes: Routes = [{
|
||||||
RouterModule,
|
RouterModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class NgxFormsRoutingModule {
|
export class FormsRoutingModule {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const routedComponents = [
|
export const routedComponents = [
|
||||||
NgxFormsComponent,
|
FormsComponent,
|
||||||
NgxFormInputsComponent,
|
FormInputsComponent,
|
||||||
NgxFormLayoutsComponent,
|
FormLayoutsComponent,
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,6 @@ import { Component } from '@angular/core';
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxFormsComponent {
|
export class FormsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
import { NgxSharedModule } from '../../@shared/shared.module';
|
import { SharedModule } from '../../shared.module';
|
||||||
|
|
||||||
import { NgxFormsRoutingModule, routedComponents } from './forms-routing.module';
|
import { FormsRoutingModule, routedComponents } from './forms-routing.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
NgxSharedModule,
|
SharedModule,
|
||||||
NgxFormsRoutingModule,
|
FormsRoutingModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
...routedComponents,
|
...routedComponents,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class NgxFormsModule { }
|
export class FormsModule { }
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,7 @@ import { PagesComponent } from './pages.component';
|
||||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||||
import { ComponentsComponent } from './components/components.component';
|
import { ComponentsComponent } from './components/components.component';
|
||||||
import { MapsComponent } from './maps/maps.component';
|
import { MapsComponent } from './maps/maps.component';
|
||||||
import { NgxChartsComponent } from './charts/charts.component';
|
import { ChartsComponent } from './charts/charts.component';
|
||||||
import { NgxEditorsComponent } from './editors/editors.component';
|
|
||||||
|
|
||||||
const routes: Routes = [{
|
const routes: Routes = [{
|
||||||
path: '',
|
path: '',
|
||||||
|
|
@ -16,7 +15,7 @@ const routes: Routes = [{
|
||||||
component: DashboardComponent,
|
component: DashboardComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'ui-features',
|
path: 'ui-features',
|
||||||
loadChildren: './ui-features/ui-features.module#NgxUiFeaturesModule',
|
loadChildren: './ui-features/ui-features.module#UiFeaturesModule',
|
||||||
}, {
|
}, {
|
||||||
path: 'components',
|
path: 'components',
|
||||||
component: ComponentsComponent,
|
component: ComponentsComponent,
|
||||||
|
|
@ -25,13 +24,13 @@ const routes: Routes = [{
|
||||||
component: MapsComponent,
|
component: MapsComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'charts',
|
path: 'charts',
|
||||||
component: NgxChartsComponent,
|
component: ChartsComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'editors',
|
path: 'editors',
|
||||||
loadChildren: './editors/editors.module#NgxEditorsModule',
|
loadChildren: './editors/editors.module#EditorsModule',
|
||||||
}, {
|
}, {
|
||||||
path: 'forms',
|
path: 'forms',
|
||||||
loadChildren: './forms/forms.module#NgxFormsModule',
|
loadChildren: './forms/forms.module#FormsModule',
|
||||||
}, {
|
}, {
|
||||||
path: '',
|
path: '',
|
||||||
redirectTo: 'dashboard',
|
redirectTo: 'dashboard',
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,14 @@ import { PagesRoutingModule } from './pages-routing.module';
|
||||||
import { ThemeModule } from '../@theme/theme.module';
|
import { ThemeModule } from '../@theme/theme.module';
|
||||||
import { MapsComponent } from './maps/maps.component';
|
import { MapsComponent } from './maps/maps.component';
|
||||||
import { ComponentsComponent } from './components/components.component';
|
import { ComponentsComponent } from './components/components.component';
|
||||||
import { NgxChartsComponent } from './charts/charts.component';
|
import { ChartsComponent } from './charts/charts.component';
|
||||||
|
|
||||||
const PAGES_COMPONENTS = [
|
const PAGES_COMPONENTS = [
|
||||||
PagesComponent,
|
PagesComponent,
|
||||||
DashboardComponent,
|
DashboardComponent,
|
||||||
MapsComponent,
|
MapsComponent,
|
||||||
ComponentsComponent,
|
ComponentsComponent,
|
||||||
NgxChartsComponent,
|
ChartsComponent,
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,6 @@ import { Component } from '@angular/core';
|
||||||
styleUrls: ['./buttons.component.scss'],
|
styleUrls: ['./buttons.component.scss'],
|
||||||
templateUrl: './buttons.component.html',
|
templateUrl: './buttons.component.html',
|
||||||
})
|
})
|
||||||
export class NgxButtonsComponent {
|
export class ButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-disabled-buttons',
|
selector: 'ngx-disabled-buttons',
|
||||||
templateUrl: './disabled.component.html',
|
templateUrl: './disabled.component.html',
|
||||||
})
|
})
|
||||||
export class NgxDisabledButtonsComponent {
|
export class DisabledButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-dropdown-buttons',
|
selector: 'ngx-dropdown-buttons',
|
||||||
templateUrl: './dropdown.component.html',
|
templateUrl: './dropdown.component.html',
|
||||||
})
|
})
|
||||||
export class NgxDropdownButtonsComponent {
|
export class DropdownButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-flat-buttons',
|
selector: 'ngx-flat-buttons',
|
||||||
templateUrl: './flat.component.html',
|
templateUrl: './flat.component.html',
|
||||||
})
|
})
|
||||||
export class NgxFlatButtonsComponent {
|
export class FlatButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-group-buttons',
|
selector: 'ngx-group-buttons',
|
||||||
templateUrl: './group.component.html',
|
templateUrl: './group.component.html',
|
||||||
})
|
})
|
||||||
export class NgxGroupButtonsComponent {
|
export class GroupButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-icon-buttons',
|
selector: 'ngx-icon-buttons',
|
||||||
templateUrl: './icon.component.html',
|
templateUrl: './icon.component.html',
|
||||||
})
|
})
|
||||||
export class NgxIconButtonsComponent {
|
export class IconButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-large-buttons',
|
selector: 'ngx-large-buttons',
|
||||||
templateUrl: './large.component.html',
|
templateUrl: './large.component.html',
|
||||||
})
|
})
|
||||||
export class NgxLargeButtonsComponent {
|
export class LargeButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-raised-buttons',
|
selector: 'ngx-raised-buttons',
|
||||||
templateUrl: './raised.component.html',
|
templateUrl: './raised.component.html',
|
||||||
})
|
})
|
||||||
export class NgxRaisedButtonsComponent {
|
export class RaisedButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@ import { Component } from '@angular/core';
|
||||||
selector: 'ngx-sized-buttons',
|
selector: 'ngx-sized-buttons',
|
||||||
templateUrl: './sized.component.html',
|
templateUrl: './sized.component.html',
|
||||||
})
|
})
|
||||||
export class NgxSizedButtonsComponent {
|
export class SizedButtonsComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,6 @@ import { Component } from '@angular/core';
|
||||||
styleUrls: ['./grid.component.scss'],
|
styleUrls: ['./grid.component.scss'],
|
||||||
templateUrl: './grid.component.html',
|
templateUrl: './grid.component.html',
|
||||||
})
|
})
|
||||||
export class NgxGridComponent {
|
export class GridComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { Component, Pipe, PipeTransform } from '@angular/core';
|
||||||
styleUrls: ['./icons.component.scss'],
|
styleUrls: ['./icons.component.scss'],
|
||||||
templateUrl: './icons.component.html',
|
templateUrl: './icons.component.html',
|
||||||
})
|
})
|
||||||
export class NgxIconsComponent {
|
export class IconsComponent {
|
||||||
|
|
||||||
icons = {
|
icons = {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||||
selector: 'ngx-modal',
|
selector: 'ngx-modal',
|
||||||
templateUrl: './modal.component.html',
|
templateUrl: './modal.component.html',
|
||||||
})
|
})
|
||||||
export class NgxModalComponent {
|
export class ModalComponent {
|
||||||
|
|
||||||
modalHeader: string;
|
modalHeader: string;
|
||||||
modalContent: string = `Lorem ipsum dolor sit amet,
|
modalContent: string = `Lorem ipsum dolor sit amet,
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||||
|
|
||||||
import { NgxModalComponent } from './modal/modal.component';
|
import { ModalComponent } from './modal/modal.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-modals',
|
selector: 'ngx-modals',
|
||||||
styleUrls: ['./modals.component.scss'],
|
styleUrls: ['./modals.component.scss'],
|
||||||
templateUrl: './modals.component.html',
|
templateUrl: './modals.component.html',
|
||||||
})
|
})
|
||||||
export class NgxModalsComponent {
|
export class ModalsComponent {
|
||||||
|
|
||||||
constructor(private modalService: NgbModal) { }
|
constructor(private modalService: NgbModal) { }
|
||||||
|
|
||||||
showLargeModal() {
|
showLargeModal() {
|
||||||
const activeModal = this.modalService.open(NgxModalComponent, { size: 'lg' });
|
const activeModal = this.modalService.open(ModalComponent, { size: 'lg' });
|
||||||
|
|
||||||
activeModal.componentInstance.modalHeader = 'Large Modal';
|
activeModal.componentInstance.modalHeader = 'Large Modal';
|
||||||
}
|
}
|
||||||
showSmallModal() {
|
showSmallModal() {
|
||||||
const activeModal = this.modalService.open(NgxModalComponent, { size: 'sm' });
|
const activeModal = this.modalService.open(ModalComponent, { size: 'sm' });
|
||||||
|
|
||||||
activeModal.componentInstance.modalHeader = 'Small Modal';
|
activeModal.componentInstance.modalHeader = 'Small Modal';
|
||||||
}
|
}
|
||||||
|
|
||||||
showStaticModal() {
|
showStaticModal() {
|
||||||
const activeModal = this.modalService.open(NgxModalComponent, {
|
const activeModal = this.modalService.open(ModalComponent, {
|
||||||
size: 'sm',
|
size: 'sm',
|
||||||
backdrop: 'static',
|
backdrop: 'static',
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,27 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { NgxUiFeaturesComponent } from './ui-features.component';
|
import { UiFeaturesComponent } from './ui-features.component';
|
||||||
import { NgxButtonsComponent } from './buttons/buttons.component';
|
import { ButtonsComponent } from './buttons/buttons.component';
|
||||||
import { NgxGridComponent } from './grid/grid.component';
|
import { GridComponent } from './grid/grid.component';
|
||||||
import { NgxIconsComponent } from './icons/icons.component';
|
import { IconsComponent } from './icons/icons.component';
|
||||||
import { NgxModalsComponent } from './modals/modals.component';
|
import { ModalsComponent } from './modals/modals.component';
|
||||||
import { NgxFlatButtonsComponent } from './buttons/flat/flat.component';
|
|
||||||
import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component';
|
|
||||||
import { NgxSizedButtonsComponent } from './buttons/sized/sized.component';
|
|
||||||
import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component';
|
|
||||||
import { NgxIconButtonsComponent } from './buttons/icon/icon.component';
|
|
||||||
import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
|
|
||||||
import { NgxLargeButtonsComponent } from './buttons/large/large.component';
|
|
||||||
import { NgxGroupButtonsComponent } from './buttons/group/group.component';
|
|
||||||
|
|
||||||
const routes: Routes = [{
|
const routes: Routes = [{
|
||||||
path: '',
|
path: '',
|
||||||
component: NgxUiFeaturesComponent,
|
component: UiFeaturesComponent,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'buttons',
|
path: 'buttons',
|
||||||
component: NgxButtonsComponent,
|
component: ButtonsComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'grid',
|
path: 'grid',
|
||||||
component: NgxGridComponent,
|
component: GridComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'icons',
|
path: 'icons',
|
||||||
component: NgxIconsComponent,
|
component: IconsComponent,
|
||||||
}, {
|
}, {
|
||||||
path: 'modals',
|
path: 'modals',
|
||||||
component: NgxModalsComponent,
|
component: ModalsComponent,
|
||||||
}],
|
}],
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
|
@ -37,4 +29,4 @@ const routes: Routes = [{
|
||||||
imports: [RouterModule.forChild(routes)],
|
imports: [RouterModule.forChild(routes)],
|
||||||
exports: [RouterModule],
|
exports: [RouterModule],
|
||||||
})
|
})
|
||||||
export class NgxUiFeaturesRoutingModule { }
|
export class UiFeaturesRoutingModule { }
|
||||||
|
|
|
||||||
|
|
@ -6,5 +6,5 @@ import { Component } from '@angular/core';
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class NgxUiFeaturesComponent {
|
export class UiFeaturesComponent {
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,50 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
import { NgxSharedModule } from '../../@shared/shared.module';
|
import { SharedModule } from '../../shared.module';
|
||||||
|
|
||||||
import { NgxUiFeaturesRoutingModule } from './ui-features-routing.module';
|
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
||||||
import { NgxUiFeaturesComponent } from './ui-features.component';
|
import { UiFeaturesComponent } from './ui-features.component';
|
||||||
import { NgxButtonsComponent } from './buttons/buttons.component';
|
import { ButtonsComponent } from './buttons/buttons.component';
|
||||||
import { NgxGridComponent } from './grid/grid.component';
|
import { GridComponent } from './grid/grid.component';
|
||||||
import { NgxModalsComponent } from './modals/modals.component';
|
import { ModalsComponent } from './modals/modals.component';
|
||||||
import { NgxIconsComponent } from './icons/icons.component';
|
import { IconsComponent } from './icons/icons.component';
|
||||||
import { NgxFlatButtonsComponent } from './buttons/flat/flat.component';
|
import { FlatButtonsComponent } from './buttons/flat/flat.component';
|
||||||
import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component';
|
import { RaisedButtonsComponent } from './buttons/raised/raised.component';
|
||||||
import { NgxSizedButtonsComponent } from './buttons/sized/sized.component';
|
import { SizedButtonsComponent } from './buttons/sized/sized.component';
|
||||||
import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component';
|
import { DisabledButtonsComponent } from './buttons/disabled/disabled.component';
|
||||||
import { NgxIconButtonsComponent } from './buttons/icon/icon.component';
|
import { IconButtonsComponent } from './buttons/icon/icon.component';
|
||||||
import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
|
import { DropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
|
||||||
import { NgxGroupButtonsComponent } from './buttons/group/group.component';
|
import { GroupButtonsComponent } from './buttons/group/group.component';
|
||||||
import { NgxLargeButtonsComponent } from './buttons/large/large.component';
|
import { LargeButtonsComponent } from './buttons/large/large.component';
|
||||||
import { NgxModalComponent } from './modals/modal/modal.component';
|
import { ModalComponent } from './modals/modal/modal.component';
|
||||||
|
|
||||||
export const NGX_UI_FEATURES_COMPONENTS = [
|
const COMPONENTS = [
|
||||||
NgxUiFeaturesComponent,
|
UiFeaturesComponent,
|
||||||
NgxButtonsComponent,
|
ButtonsComponent,
|
||||||
NgxGridComponent,
|
GridComponent,
|
||||||
NgxIconsComponent,
|
ModalsComponent,
|
||||||
NgxModalsComponent,
|
IconsComponent,
|
||||||
NgxFlatButtonsComponent,
|
FlatButtonsComponent,
|
||||||
NgxRaisedButtonsComponent,
|
RaisedButtonsComponent,
|
||||||
NgxSizedButtonsComponent,
|
SizedButtonsComponent,
|
||||||
NgxDisabledButtonsComponent,
|
DisabledButtonsComponent,
|
||||||
NgxIconButtonsComponent,
|
IconButtonsComponent,
|
||||||
NgxDropdownButtonsComponent,
|
DropdownButtonsComponent,
|
||||||
NgxLargeButtonsComponent,
|
GroupButtonsComponent,
|
||||||
NgxGroupButtonsComponent,
|
LargeButtonsComponent,
|
||||||
NgxModalComponent,
|
ModalComponent,
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
NgxSharedModule,
|
SharedModule,
|
||||||
NgxUiFeaturesRoutingModule,
|
UiFeaturesRoutingModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
...NGX_UI_FEATURES_COMPONENTS,
|
...COMPONENTS,
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
NgxModalComponent,
|
ModalComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class NgxUiFeaturesModule { }
|
export class UiFeaturesModule { }
|
||||||
|
|
|
||||||
|
|
@ -14,4 +14,4 @@ import { NgaCardModule, NgaBootstrapModule } from '@nga/theme';
|
||||||
NgaBootstrapModule,
|
NgaBootstrapModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class NgxSharedModule { }
|
export class SharedModule { }
|
||||||
Loading…
Add table
Add a link
Reference in a new issue