4 | -
6 |
-
9 |
11 |
12 | -
13 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/checkbox-group/checkbox-group.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
5 | .checkbox-inline label {
6 | font-weight: normal;
7 | }
8 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/checkbox-group/checkbox-group.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { CheckboxGroupComponent } from './checkbox-group.component';
5 |
6 | describe('CheckboxGroup', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | declarations: [
10 | CheckboxGroupComponent
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('mcok test', async(() => {
17 | expect(true).toBeTruthy();
18 | }));
19 |
20 | });
21 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/checkbox-group/checkbox-group.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { CheckboxGroupComponent } from './checkbox-group.component';
4 | import { CommonModule } from '@angular/common';
5 | import { CheckboxComponent } from './checkbox.component';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule
10 | ],
11 | providers: [],
12 | declarations: [
13 | CheckboxGroupComponent,
14 | CheckboxComponent
15 | ],
16 | exports: [
17 | CheckboxGroupComponent,
18 | CheckboxComponent
19 | ],
20 | })
21 | export class CheckboxGroupModule {
22 | }
23 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/checkbox-group/checkbox.component.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/checkbox-group/checkbox.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/projects/rebirth-ng/src/lib/checkbox-group/checkbox.component.scss
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/common/auto-focus.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[reAutoFocus]',
5 | })
6 | export class AutoFocusDirective implements AfterViewInit {
7 |
8 | @Input('reAutoFocus') autoFocus: boolean;
9 |
10 | constructor(private elementRef: ElementRef) {
11 | }
12 |
13 | ngAfterViewInit(): void {
14 | if (this.autoFocus && this.elementRef.nativeElement.focus) {
15 | this.elementRef.nativeElement.focus();
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/common/common.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { AutoFocusDirective } from './auto-focus.directive';
4 | import { CommonModule } from '@angular/common';
5 | import { TemplateLoaderComponent } from './template-loader.component';
6 | import { TrustHtmlPipe } from './trust-html.pipe';
7 | import { ResizeableDirective } from './resizeable.directive';
8 | import { DropdownDirective } from './dropdown.directive';
9 | import { DatePipe } from './date.pipe';
10 |
11 | @NgModule({
12 | imports: [CommonModule],
13 | exports: [
14 | AutoFocusDirective,
15 | TemplateLoaderComponent,
16 | TrustHtmlPipe,
17 | ResizeableDirective,
18 | DropdownDirective,
19 | DatePipe
20 | ],
21 | declarations: [
22 | AutoFocusDirective,
23 | TemplateLoaderComponent,
24 | TrustHtmlPipe,
25 | ResizeableDirective,
26 | DropdownDirective,
27 | DatePipe
28 | ],
29 | providers: [],
30 | })
31 | export class RebirthCommonModule {
32 | }
33 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/common/component.deactivate.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs';
2 | import { Injectable } from '@angular/core';
3 | import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
4 |
5 | export interface ComponentDeactivate {
6 | canDeactivate: (currentRoute?: ActivatedRouteSnapshot,
7 | currentState?: RouterStateSnapshot,
8 | nextState?: RouterStateSnapshot) => Observable
2 |
4 |
6 | {{context.title}}
5 |
7 |
16 |
19 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/dialog/alert-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter } from '@angular/core';
2 | import { Modal } from '../modal/modal.model';
3 | import { DialogOptions } from './dialog-options.model';
4 | import { RebirthNGConfig } from '../rebirth-ng.config';
5 | import { ModalDismissReasons } from '../modal/modal-dismiss-reasons.model';
6 |
7 | @Component({
8 | selector: 're-alert-dialog',
9 | templateUrl: './alert-dialog.component.html',
10 | styleUrls: ['./dialog.scss'],
11 | })
12 | export class AlertDialogComponent implements Modal {
13 | context: DialogOptions;
14 | dismiss: EventEmitter
8 |
9 |
11 | {{context.content}}
10 |
12 |
13 |
14 |
15 |
2 |
4 |
6 | {{context.title}}
5 |
7 |
16 |
20 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/dialog/dialog-options.model.ts:
--------------------------------------------------------------------------------
1 | import { ViewContainerRef, Injector, ComponentFactoryResolver, TemplateRef } from '@angular/core';
2 | import { SafeHtml } from '@angular/platform-browser';
3 | import { ValidatorFn } from '@angular/forms';
4 |
5 | export interface PromptContent {
6 | label: string;
7 | defaultValue?: string;
8 | placeholder?: string;
9 | template?: TemplateRef
8 |
9 |
11 | {{context.content}}
10 |
12 |
13 |
14 |
15 |
2 |
3 |
4 |
25 |
26 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/file-upload/file-upload-preview.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
2 | import { SelectFileModel } from './file-upload.model';
3 |
4 | @Component({
5 | selector: 're-file-upload-preview',
6 | templateUrl: './file-upload-preview.component.html',
7 | changeDetection: ChangeDetectionStrategy.OnPush,
8 | exportAs: 'fileUploadPreview'
9 | })
10 | export class FileUploadPreviewComponent {
11 |
12 | @Input() imgPreview: boolean;
13 | @Input() previewWidth: string;
14 | @Input() uploaded: boolean;
15 | @Input() disabled: boolean;
16 | @Input() selectFiles: SelectFileModel[] = [];
17 | @Output() removeFile = new EventEmitter|
6 |
7 | |
12 | 13 | {{fileItem.name}} 14 | | 15 |16 | {{fileItem.displaySize}} 17 | | 18 |19 | 21 | | 22 |
2 |
11 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/image-upload/view-image-modal.component.scss:
--------------------------------------------------------------------------------
1 | .preview-image {
2 | width: 100%;
3 | }
4 |
5 | .modal-title .title-text{
6 | max-width: 20em;
7 | white-space: nowrap;
8 | text-overflow: ellipsis;
9 | overflow: hidden;
10 | }
11 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/image-upload/view-image-modal.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter } from '@angular/core';
2 | import { Modal } from '../modal/modal.model';
3 |
4 | @Component({
5 | selector: './re-view-image-modal',
6 | styleUrls: ['./view-image-modal.component.scss'],
7 | templateUrl: './view-image-modal.component.html'
8 | })
9 |
10 | export class ViewImageModalComponent implements Modal {
11 | context: any;
12 | dismiss: EventEmitter
3 |
5 |
6 |
7 | {{context?.name}}
6 |
8 | ![]()
9 |
10 |
3 |
4 |
5 |
6 |
7 |
9 |
`,
10 | /* tslint:enable */
11 | changeDetection: ChangeDetectionStrategy.OnPush
12 | })
13 | export class ModalBackdropComponent {
14 | @Input() isOpen: boolean;
15 | @Input() modalOptions: ModalOptions;
16 | @Input() instanceCount = 0;
17 | }
18 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/modal/modal-dismiss-reasons.model.ts:
--------------------------------------------------------------------------------
1 | export enum ModalDismissReasons {
2 | CUSTOMISE,
3 | BACKDROP_CLICK,
4 | ESC_KEY,
5 | YES,
6 | NO
7 | }
8 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/modal/modal-options.model.ts:
--------------------------------------------------------------------------------
1 | import { Type, ComponentFactoryResolver, Injector, ViewContainerRef } from '@angular/core';
2 |
3 | export interface ModalOptions {
4 | component: Type
2 |
5 |
6 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/modal/modal.component.html:
--------------------------------------------------------------------------------
1 |
2 |
16 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/panel/panel.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { PanelComponent } from './panel.component';
4 | import { CommonModule } from '@angular/common';
5 | import { PanelHeaderComponent } from './panel-header.component';
6 | import { PanelBodyComponent } from './panel-body.component';
7 | import { PanelFooterComponent } from './panel-footer.component';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule
12 | ],
13 | exports: [
14 | PanelComponent,
15 | PanelHeaderComponent,
16 | PanelBodyComponent,
17 | PanelFooterComponent
18 | ],
19 | declarations: [
20 | PanelComponent,
21 | PanelHeaderComponent,
22 | PanelBodyComponent,
23 | PanelFooterComponent
24 | ],
25 | providers: [],
26 | })
27 | export class PanelModule {
28 | }
29 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/popover/popover-popup.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 |
9 |
10 |
12 |
15 |
3 |
4 |
7 |
8 |
9 |
12 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/popover/popover.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { PopoverDirective } from './popover.directive';
5 | import { PopoverPopupComponent } from './popover-popup.component';
6 |
7 | @NgModule({
8 | imports: [CommonModule],
9 | exports: [PopoverDirective],
10 | declarations: [PopoverDirective, PopoverPopupComponent],
11 | providers: [],
12 | entryComponents: [PopoverPopupComponent]
13 | })
14 | export class PopoverModule {
15 | }
16 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/progress-bar/progress-bar.component.html:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/progress-bar/progress-bar.component.scss:
--------------------------------------------------------------------------------
1 | .thin {
2 | height: 2px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/progress-bar/progress-bar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
2 | import { RebirthNGConfig } from '../rebirth-ng.config';
3 |
4 | @Component({
5 | selector: 're-progress-bar',
6 | templateUrl: './progress-bar.component.html',
7 | styleUrls: ['./progress-bar.component.scss'],
8 | changeDetection: ChangeDetectionStrategy.OnPush
9 | })
10 | export class ProgressBarComponent {
11 | @Input() type: '' | 'success' | 'info' | 'warning' | 'danger' = '';
12 | @Input() text: string;
13 | @Input() thin: boolean;
14 | @Input() max: number;
15 | @Input() animate: boolean;
16 | @Input() striped: boolean;
17 | @Input() value: number;
18 | @Input() cssClass: string;
19 |
20 | constructor(rebirthNGConfig: RebirthNGConfig) {
21 | this.type =
2 |
7 |
8 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/radio-group/radio-group.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
5 | .radio-inline label {
6 | font-weight: normal;
7 | }
8 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/radio-group/radio-group.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { RadioGroupComponent } from './radio-group.component';
5 |
6 | describe('RadioGroup', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | declarations: [
10 | RadioGroupComponent
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('mcok test', async(() => {
17 | expect(true).toBeTruthy();
18 | }));
19 |
20 | });
21 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/radio-group/radio-group.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { RadioGroupComponent } from './radio-group.component';
4 | import { CommonModule } from '@angular/common';
5 |
6 | @NgModule({
7 | imports: [
8 | CommonModule
9 | ],
10 | providers: [],
11 | declarations: [
12 | RadioGroupComponent
13 | ],
14 | exports: [
15 | RadioGroupComponent
16 | ],
17 | })
18 | export class RadioGroupModule {
19 | }
20 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/rating/rating.component.html:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/rating/rating.component.scss:
--------------------------------------------------------------------------------
1 | .slider, .slider:focus {
2 | outline: 0;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/rating/rating.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { RatingComponent } from './rating.component';
4 | import { CommonModule } from '@angular/common';
5 |
6 | @NgModule({
7 | imports: [CommonModule],
8 | exports: [RatingComponent],
9 | declarations: [RatingComponent],
10 | providers: [],
11 | })
12 | export class RatingModule {
13 | }
14 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select-button/select-button-item.model.ts:
--------------------------------------------------------------------------------
1 | export interface SelectButtonItem {
2 | text: string;
3 | icon?: string;
4 | value?: any;
5 | }
6 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select-button/select-button.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select-button/select-button.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { SelectButtonComponent } from './select-button.component';
5 |
6 | @NgModule({
7 | imports: [CommonModule],
8 | exports: [SelectButtonComponent],
9 | declarations: [SelectButtonComponent],
10 | providers: [],
11 | })
12 | export class SelectButtonModule {
13 | }
14 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select/select.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
5 | .select-container {
6 | position: relative;
7 | border-bottom: 1px solid #ddd;
8 | }
9 |
10 | .select-panel,
11 | .select-control:not([disabled]) {
12 | cursor: pointer;
13 | background: #fff;
14 | }
15 |
16 | .select-panel.disabled {
17 | background: #eee;
18 | }
19 |
20 | .input-group {
21 | .select-control {
22 | border: none;
23 | }
24 | }
25 |
26 | .input-group-addon {
27 | &:not(.disabled) {
28 | background: #fff;
29 | }
30 | border: none;
31 |
32 | .select-down-icon {
33 | display: block;
34 | }
35 | }
36 |
37 | ::ng-deep .dropdown-menu {
38 | border: none;
39 | padding: 0;
40 | width: 100%;
41 |
42 | .popup-list {
43 | margin-bottom: 0;
44 | max-height: 250px;
45 | overflow: auto;
46 | }
47 | .dropdown-header {
48 | padding: 3px 0.5rem;
49 | }
50 |
51 | .dropdown-item {
52 | cursor: pointer;
53 | padding: 8px 1rem;
54 | white-space: normal !important;
55 |
56 | &.selected {
57 | font-weight: bold;
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select/select.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { SelectModule } from './select.module';
5 |
6 | describe('Select', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | imports: [
10 | SelectModule
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('mcok test', async(() => {
17 | expect(true).toBeTruthy();
18 | }));
19 |
20 | });
21 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select/select.model.ts:
--------------------------------------------------------------------------------
1 | export interface GroupOption {
2 | group: string;
3 | options: any[];
4 | }
5 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/select/select.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { SelectComponent } from './select.component';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | FormsModule
11 | ],
12 | providers: [],
13 | declarations: [
14 | SelectComponent
15 | ],
16 | exports: [
17 | SelectComponent
18 | ],
19 | })
20 | export class SelectModule {
21 | }
22 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/slider/slider.component.html:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/slider/slider.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { SliderModule } from './slider.module';
5 |
6 | describe('Slider', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | imports: [
10 | SliderModule
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('mcok test', async(() => {
17 | expect(true).toBeTruthy();
18 | }));
19 |
20 | });
21 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/slider/slider.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { SliderComponent } from './slider.component';
4 | import { CommonModule } from '@angular/common';
5 |
6 | @NgModule({
7 | imports: [
8 | CommonModule
9 | ],
10 | providers: [],
11 | declarations: [
12 | SliderComponent
13 | ],
14 | exports: [
15 | SliderComponent
16 | ],
17 | })
18 | export class SliderModule {
19 | }
20 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/switch/switch.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{onText}}
4 |
5 | {{offText}}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/switch/switch.component.scss:
--------------------------------------------------------------------------------
1 | .switch {
2 | display: inline-block;
3 | cursor: pointer;
4 | -webkit-border-radius: 5px;
5 | -moz-border-radius: 5px;
6 | border-radius: 5px;
7 | border: 1px solid #ccc;
8 | position: relative;
9 | text-align: left;
10 | overflow: hidden;
11 | -webkit-user-select: none;
12 | -moz-user-select: none;
13 | -ms-user-select: none;
14 | user-select: none;
15 | width: 100px;
16 | white-space: nowrap;
17 | padding: 0;
18 | text-overflow: ellipsis;
19 | .switch-left, .switch-right {
20 | box-sizing: border-box;
21 | cursor: pointer;
22 | position: relative;
23 | display: inline-block;
24 | width: 50%;
25 | line-height: 2;
26 | text-align: center;
27 | }
28 |
29 | &.disabled {
30 | .switch-left, .switch-right {
31 | cursor: not-allowed;
32 | opacity: 0.65;
33 | filter: alpha(opacity=65);
34 | box-shadow: none;
35 | }
36 | }
37 |
38 | &.btn-lg {
39 | width: 120px;
40 | }
41 |
42 | &.btn-sm {
43 | width: 100px;
44 | }
45 | &.btn-xs {
46 | width: 80px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/switch/switch.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { SwitchComponent } from './switch.component';
5 |
6 | @NgModule({
7 | imports: [CommonModule],
8 | exports: [SwitchComponent],
9 | declarations: [SwitchComponent],
10 | providers: [],
11 | })
12 | export class SwitchModule {
13 | }
14 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tabs/tab-content.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, TemplateRef } from '@angular/core';
2 |
3 | @Directive({
4 | selector: 'ng-template[reTabContent]',
5 | })
6 | export class TabContentDirective {
7 | constructor(public templateRef: TemplateRef
12 |
13 |
17 |
18 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tabs/tabs.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { TabsComponent } from './tabs.component';
5 | import { TabTitleDirective } from './tab-title.directive';
6 | import { TabContentDirective } from './tab-content.directive';
7 | import { TabComponent } from './tab.component';
8 |
9 | @NgModule({
10 | imports: [CommonModule],
11 | exports: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective],
12 | declarations: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective],
13 | providers: [],
14 | })
15 | export class TabsModule {
16 | }
17 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tags/tags.component.html:
--------------------------------------------------------------------------------
1 |
19 |
20 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tags/tags.component.scss:
--------------------------------------------------------------------------------
1 | .tags {
2 | display: block;
3 | list-style: none;
4 | width: 100%;
5 | padding: 0px;
6 |
7 | li {
8 | display: inline-block;
9 | margin: 8px 8px 0px 0px;
10 | .label-btn {
11 | cursor: pointer;
12 | margin-left: 8px;
13 | }
14 | }
15 | .tag-input-control {
16 | max-width: 10em;
17 | }
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tags/tags.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { TagsModule } from './tags.module';
5 |
6 | describe('Tags', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | imports: [
10 | TagsModule
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('mcok test', async(() => {
17 | expect(true).toBeTruthy();
18 | }));
19 |
20 | });
21 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tags/tags.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { TagsComponent } from './tags.component';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 | import { RebirthCommonModule } from '../common/common.module';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | FormsModule,
12 | RebirthCommonModule
13 | ],
14 | providers: [],
15 | declarations: [
16 | TagsComponent
17 | ],
18 | exports: [
19 | TagsComponent
20 | ],
21 | })
22 | export class TagsModule {
23 | }
24 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/time-picker/time-picker.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 | }
4 |
5 | .time-picker {
6 | .form-group {
7 | display: inline-block;
8 | }
9 | .form-control {
10 | width: 4em;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/time-picker/time-picker.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { TimePickerComponent } from './time-picker.component';
5 |
6 | @NgModule({
7 | imports: [CommonModule, FormsModule],
8 | exports: [TimePickerComponent],
9 | declarations: [TimePickerComponent],
10 | providers: [],
11 | })
12 | export class TimePickerModule {
13 | }
14 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tooltip/tooltip-popup.component.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
16 |
3 |
4 |
7 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tooltip/tooltip-popup.component.scss:
--------------------------------------------------------------------------------
1 | .tooltip-inner {
2 | word-break: break-all;
3 | word-wrap: break-word;
4 | }
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tooltip/tooltip.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { TooltipDirective } from './tooltip.directive';
4 | import { TooltipPopupComponent } from './tooltip-popup.component';
5 | import { CommonModule } from '@angular/common';
6 |
7 | @NgModule({
8 | imports: [CommonModule],
9 | exports: [TooltipDirective, TooltipPopupComponent],
10 | declarations: [TooltipDirective, TooltipPopupComponent],
11 | providers: [],
12 | entryComponents: [TooltipPopupComponent]
13 | })
14 | export class TooltipModule {
15 | }
16 |
--------------------------------------------------------------------------------
/projects/rebirth-ng/src/lib/tree-view/tree-panel.component.html:
--------------------------------------------------------------------------------
1 | -
2 |
- 21 | 22 |
8 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | :host ::ng-deep .main { 2 | margin-top: 80px; 3 | } 4 | 5 | ::ng-deep { 6 | 7 | .button-panel { 8 | button { 9 | margin: 1rem; 10 | } 11 | } 12 | re-action-button, re-select-button, re-switch { 13 | padding: 1rem; 14 | } 15 | } 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app/app.route.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { GettingStartedComponent, ShowcaseComponent } from './feature'; 3 | 4 | 5 | export const ROUTER_CONFIG: Routes = [ 6 | { path: '', pathMatch: 'full', redirectTo: '/gettingStarted' }, 7 | { path: 'gettingStarted', component: GettingStartedComponent, data: { reusable: true } }, 8 | { path: 'component/:name', component: ShowcaseComponent, data: { reusable: true } }, 9 | ]; 10 | -------------------------------------------------------------------------------- /src/app/demo/accordion/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/accordion/README.md -------------------------------------------------------------------------------- /src/app/demo/accordion/accordion-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { PanelComponent } from 'rebirth-ng'; 3 | 4 | @Component({ 5 | selector: 're-accordion-demo', 6 | templateUrl: './accordion-demo.component.html' 7 | }) 8 | export class AccordionDemoComponent { 9 | items = [ 10 | { id: 1, title: 'Panel header 1', content: 'Panel header 1' }, 11 | { id: 2, title: 'Panel header 2', content: 'Panel header 2' } 12 | ]; 13 | 14 | onClose(panel: PanelComponent) { 15 | console.log(`Panel ${panel.id} will close!`, panel); 16 | } 17 | 18 | appendItems() { 19 | const len = this.items.length + 1; 20 | this.items.push({ id: len, title: `Panel header ${len}`, content: `Panel header ${len}` }); 21 | } 22 | 23 | removeLastItem() { 24 | const len = this.items.length; 25 | this.items.splice(len - 1, 1); 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /src/app/demo/accordion/accordion-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { AccordionDemoComponent } from './accordion-demo.component'; 4 | import { CommonModule } from '@angular/common'; 5 | import { RebirthNGModule } from 'rebirth-ng'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RebirthNGModule 11 | ], 12 | exports: [ 13 | AccordionDemoComponent 14 | ], 15 | declarations: [AccordionDemoComponent], 16 | providers: [], 17 | entryComponents: [AccordionDemoComponent] 18 | }) 19 | export class AccordionDemoModule { 20 | } 21 | -------------------------------------------------------------------------------- /src/app/demo/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion-demo.component'; 2 | export * from './accordion-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/action-button/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/action-button/README.md -------------------------------------------------------------------------------- /src/app/demo/action-button/action-button-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ActionItem } from 'rebirth-ng'; 3 | 4 | @Component({ 5 | selector: 're-action-button-demo', 6 | templateUrl: './action-button-demo.component.html' 7 | }) 8 | export class ActionButtonDemoComponent { 9 | isActionOpen: boolean; 10 | disabledActionOpen = true; 11 | actions: ActionItem[] = [ 12 | { 13 | text: 'Action Header', 14 | header: true 15 | }, 16 | { 17 | id: 1, 18 | text: 'Save', 19 | icon: 'glyphicon glyphicon-floppy-save' 20 | }, { 21 | id: 2, 22 | text: 'Refresh', 23 | icon: 'glyphicon glyphicon-refresh' 24 | }, 25 | { 26 | divider: true 27 | }, 28 | { 29 | id: 3, 30 | text: 'Remove', 31 | icon: 'glyphicon glyphicon-remove' 32 | }]; 33 | 34 | onActionClick(item: ActionItem) { 35 | console.log(`Action item ${item.id} clicked`, item); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/app/demo/action-button/action-button-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { ActionButtonDemoComponent } from './action-button-demo.component'; 4 | import { CommonModule } from '@angular/common'; 5 | import { RebirthNGModule } from 'rebirth-ng'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RebirthNGModule 11 | ], 12 | exports: [ActionButtonDemoComponent], 13 | declarations: [ActionButtonDemoComponent], 14 | providers: [], 15 | entryComponents: [ActionButtonDemoComponent] 16 | }) 17 | export class ActionButtonDemoModule { 18 | } 19 | -------------------------------------------------------------------------------- /src/app/demo/action-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './action-button-demo.component'; 2 | export * from './action-button-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/alert-box/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/alert-box/README.md -------------------------------------------------------------------------------- /src/app/demo/alert-box/alert-box-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 're-alert-box-demo', 5 | templateUrl: './alert-box-demo.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush 7 | 8 | }) 9 | export class AlertBoxDemoComponent { 10 | 11 | closed = false; 12 | autoDisappear = false; 13 | 14 | constructor(private changeDetectorRef: ChangeDetectorRef) { 15 | } 16 | 17 | close() { 18 | console.log('close'); 19 | this.closed = true; 20 | } 21 | 22 | autoDisappearChange() { 23 | this.closed = false; 24 | if (this.autoDisappear) { 25 | setTimeout(() => { 26 | this.autoDisappear = false; 27 | this.close(); 28 | this.changeDetectorRef.markForCheck(); 29 | }, 2 * 1000); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/demo/alert-box/alert-box-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { AlertBoxDemoComponent } from './alert-box-demo.component'; 4 | import { RebirthNGModule } from 'rebirth-ng'; 5 | import { CommonModule } from '@angular/common'; 6 | import { FormsModule } from '@angular/forms'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | FormsModule, 12 | RebirthNGModule 13 | ], 14 | declarations: [ 15 | AlertBoxDemoComponent 16 | ], 17 | exports: [ 18 | AlertBoxDemoComponent 19 | ], 20 | providers: [], 21 | entryComponents: [AlertBoxDemoComponent] 22 | 23 | }) 24 | export class AlertBoxDemoModule { 25 | } 26 | -------------------------------------------------------------------------------- /src/app/demo/alert-box/index.ts: -------------------------------------------------------------------------------- 1 | export * from './alert-box-demo.component'; 2 | export * from './alert-box-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/auto-complete/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/auto-complete/README.md -------------------------------------------------------------------------------- /src/app/demo/auto-complete/auto-complete-demo.component.scss: -------------------------------------------------------------------------------- 1 | 2 | :host ::ng-deep { 3 | .full-item { 4 | width: 95%; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/app/demo/auto-complete/auto-complete-demo.mdoule.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { AutoCompleteDemoComponent } from './auto-complete-demo.component'; 6 | import { RebirthNGModule } from 'rebirth-ng'; 7 | 8 | @NgModule({ 9 | imports: [CommonModule, RebirthNGModule, FormsModule], 10 | exports: [AutoCompleteDemoComponent], 11 | declarations: [AutoCompleteDemoComponent], 12 | providers: [], 13 | entryComponents: [AutoCompleteDemoComponent] 14 | }) 15 | export class AutoCompleteDemoModule { 16 | } 17 | -------------------------------------------------------------------------------- /src/app/demo/auto-complete/index.ts: -------------------------------------------------------------------------------- 1 | export * from './auto-complete-demo.component'; 2 | export * from './auto-complete-demo.mdoule'; 3 | -------------------------------------------------------------------------------- /src/app/demo/badge/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/badge/README.md -------------------------------------------------------------------------------- /src/app/demo/badge/badge-demo.component.html: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/app/demo/badge/badge-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 're-badge-demo', 5 | templateUrl: './badge-demo.component.html' 6 | }) 7 | export class BadgeDemoComponent { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/app/demo/badge/badge-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { BadgeDemoComponent } from './badge-demo.component'; 4 | import { CommonModule } from '@angular/common'; 5 | import { RebirthNGModule } from 'rebirth-ng'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RebirthNGModule 11 | ], 12 | exports: [BadgeDemoComponent], 13 | declarations: [BadgeDemoComponent], 14 | providers: [], 15 | entryComponents: [BadgeDemoComponent] 16 | }) 17 | export class BadgeDemoModule { 18 | } 19 | -------------------------------------------------------------------------------- /src/app/demo/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './badge-demo.component'; 2 | export * from './badge-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/breadcrumbs/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/breadcrumbs/README.md -------------------------------------------------------------------------------- /src/app/demo/breadcrumbs/breadcrumbs-demo.component.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/app/demo/breadcrumbs/breadcrumbs-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { BreadcrumbsDemoComponent } from './breadcrumbs-demo.component'; 5 | import { RebirthNGModule } from 'rebirth-ng'; 6 | 7 | @NgModule({ 8 | imports: [CommonModule, RebirthNGModule], 9 | exports: [BreadcrumbsDemoComponent], 10 | declarations: [BreadcrumbsDemoComponent], 11 | providers: [], 12 | entryComponents: [BreadcrumbsDemoComponent] 13 | }) 14 | export class BreadcrumbsDemoModule { 15 | } 16 | -------------------------------------------------------------------------------- /src/app/demo/breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './breadcrumbs-demo.component'; 2 | export * from './breadcrumbs-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/carousel/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/carousel/README.md -------------------------------------------------------------------------------- /src/app/demo/carousel/carousel-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 're-carousel-demo', 5 | templateUrl: './carousel-demo.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush 7 | }) 8 | export class CarouselDemoComponent { 9 | activeSlide = 0; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/demo/carousel/carousel-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { CarouselDemoComponent } from './carousel-demo.component'; 5 | import { RebirthNGModule } from 'rebirth-ng'; 6 | 7 | @NgModule({ 8 | imports: [CommonModule, RebirthNGModule], 9 | exports: [CarouselDemoComponent], 10 | declarations: [CarouselDemoComponent], 11 | providers: [], 12 | entryComponents: [CarouselDemoComponent] 13 | }) 14 | export class CarouselDemoModule { 15 | } 16 | -------------------------------------------------------------------------------- /src/app/demo/carousel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './carousel-demo.component'; 2 | export * from './carousel-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/checkbox-group/README.md: -------------------------------------------------------------------------------- 1 | #### CheckboxGroup 2 | 3 | -------------------------------------------------------------------------------- /src/app/demo/checkbox-group/checkbox-group-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CheckboxGroupComponent } from 'rebirth-ng'; 3 | 4 | @Component({ 5 | selector: 're-checkbox-group-demo', 6 | templateUrl: './checkbox-group-demo.component.html' 7 | }) 8 | export class CheckboxGroupDemoComponent { 9 | 10 | checked; 11 | yesno = 'YES'; 12 | seasonLabelOptions = ['Spring', 'Summer', 'Autumn', 'Winter']; 13 | seasonLabel: string; 14 | 15 | seasonOptions = [ 16 | { label: 'Spring', value: 'SPRING' }, 17 | { label: 'Summer', value: 'SUMMER' }, 18 | { label: 'Autumn', value: 'AUTUMN' }, 19 | { label: 'Winter', value: 'WINTER' } 20 | ]; 21 | 22 | season = [this.seasonOptions[1]]; 23 | seasonValue = ['SUMMER']; 24 | valueParser = (item) => item && item.value; 25 | 26 | selectAll(checkboxGroup: CheckboxGroupComponent, selectAll) { 27 | if (selectAll) { 28 | return checkboxGroup.selectAll(); 29 | } 30 | checkboxGroup.unselectAll(); 31 | } 32 | 33 | invertAll(checkboxgroup) { 34 | checkboxgroup.invertSelect(); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/app/demo/checkbox-group/checkbox-group-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CheckboxGroupDemoComponent } from './checkbox-group-demo.component'; 4 | import { RebirthNGModule } from 'rebirth-ng'; 5 | import { FormsModule } from '@angular/forms'; 6 | 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | FormsModule, 12 | RebirthNGModule 13 | ], 14 | exports: [ 15 | CheckboxGroupDemoComponent 16 | ], 17 | declarations: [CheckboxGroupDemoComponent], 18 | providers: [], 19 | entryComponents: [CheckboxGroupDemoComponent] 20 | }) 21 | export class CheckboxGroupDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /src/app/demo/checkbox-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox-group-demo.component'; 2 | export * from './checkbox-group-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/common/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## Common 3 | 4 | -------------------------------------------------------------------------------- /src/app/demo/data-table/data-table-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Notice:
4 |
9 |
--------------------------------------------------------------------------------
/src/app/demo/data-table/data-table-demo.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | ChangeDetectionStrategy,
4 | Pipe,
5 | PipeTransform,
6 | ComponentFactoryResolver,
7 | EventEmitter
8 | } from '@angular/core';
9 |
10 | @Component({
11 | selector: 're-data-table-demo',
12 | templateUrl: './data-table-demo.component.html',
13 | changeDetection: ChangeDetectionStrategy.OnPush
14 | })
15 | export class DataTableDemoComponent {
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/demo/data-table/data-table-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { DataTableDemoComponent } from './data-table-demo.component';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 | import { FormsModule } from '@angular/forms';
7 |
8 | @NgModule({
9 | imports: [CommonModule, RebirthNGModule, FormsModule],
10 | exports: [DataTableDemoComponent],
11 | declarations: [DataTableDemoComponent],
12 | providers: [],
13 | entryComponents: [DataTableDemoComponent]
14 | })
15 | export class DataTableDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/data-table/index.ts:
--------------------------------------------------------------------------------
1 | export * from './data-table-demo.component';
2 | export * from './data-table-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/date-picker/date-picker-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-date-picker-demo',
5 | templateUrl: './date-picker-demo.component.html',
6 | changeDetection: ChangeDetectionStrategy.OnPush
7 | })
8 | export class DatePickerDemoComponent implements OnInit {
9 | dateFormatOptions = ['YYYY-MM-DD HH:mm:ss', 'YY-MM-DD HH:mm:ss', 'MM/DD/YYYY HH:mm:ss', 'MM/DD/YY HH:mm:ss'];
10 | dateFormat: string;
11 | selectedDate1 = new Date('01/02/2017 09:11');
12 | selectedDate2: Date;
13 | selectedDate3 = new Date('01/02/2017 09:11');
14 |
15 | ngOnInit() {
16 | this.dateFormat = this.dateFormatOptions[0];
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/demo/date-picker/date-picker-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { DatePickerDemoComponent } from './date-picker-demo.component';
5 | import { FormsModule } from '@angular/forms';
6 | import { RebirthNGModule } from 'rebirth-ng';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [DatePickerDemoComponent],
11 | declarations: [DatePickerDemoComponent],
12 | providers: [],
13 | entryComponents: [DatePickerDemoComponent]
14 | })
15 | export class DatePickerDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/date-picker/index.ts:
--------------------------------------------------------------------------------
1 | export * from './date-picker-demo.component';
2 | export * from './date-picker-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/dialog/README.md:
--------------------------------------------------------------------------------
1 | ## Dialog
2 |
3 | * Shoulde pass `RebirthNGConfig.rootContainer` in your `AppComponent` when you did not pass `rootContainer` parameters to `DialogService`.
4 |
5 |
6 | export class AppComponent implements OnInit {
7 | constructor(private rebirthNGConfig: RebirthNGConfig,
8 | private viewContainerRef: ViewContainerRef) {
9 |
10 | this.rebirthNGConfig.rootContainer = this.viewContainerRef; // default container for append body component(Modal, DatePicker...)
11 | // this.rebirthNGConfig.extend(REBIRTH_UI_I18N_ZHCN); i18n
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/src/app/demo/dialog/dialog-demo.component.html:
--------------------------------------------------------------------------------
1 |
7 | We recommend you to use 5 | ag-grid(https://ag-grid.com/best-angular-2-data-grid/?framework=all#) or 6 | ngx-datatable(https://swimlane.github.io/ngx-datatable/) .
7 | 8 |
2 |
3 |
4 |
7 |
8 |
9 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/app/demo/ellipsis/ellipsis-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-ellipsis-demo',
5 | templateUrl: './ellipsis-demo.component.html'
6 | })
7 | export class EllipsisDemoComponent {
8 | /* tslint:disable */
9 | text = `Welcome to @Rebirth/NG. This repo is Angular ui library for Bootstrap. And it is being built from scratch in Typescript.`;
10 | html = `Text ellipsis:
5 |Html ellipsis:
10 |Arch Linux users can install autoenv or autoenv-git with their favorite AUR helper.
`; 11 | /* tslint:enable */ 12 | } 13 | -------------------------------------------------------------------------------- /src/app/demo/ellipsis/ellipsis-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { EllipsisDemoComponent } from './ellipsis-demo.component'; 4 | import { RebirthNGModule } from 'rebirth-ng'; 5 | 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | RebirthNGModule 11 | ], 12 | exports: [ 13 | EllipsisDemoComponent 14 | ], 15 | declarations: [EllipsisDemoComponent], 16 | providers: [], 17 | entryComponents: [EllipsisDemoComponent] 18 | }) 19 | export class EllipsisDemoModule { 20 | } 21 | -------------------------------------------------------------------------------- /src/app/demo/ellipsis/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ellipsis-demo.component'; 2 | export * from './ellipsis-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/file-upload/README.md: -------------------------------------------------------------------------------- 1 | #### FileUpload 2 | 3 | -------------------------------------------------------------------------------- /src/app/demo/file-upload/file-upload-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 're-file-upload-demo', 5 | templateUrl: './file-upload-demo.component.html' 6 | }) 7 | export class FileUploadDemoComponent { 8 | 9 | uploadFiles: any[]; 10 | 11 | onRemoveDone(files) { 12 | console.log('files', files); 13 | } 14 | 15 | uploadFilesChange($event) { 16 | this.uploadFiles = $event.map(item => item.uploadResponse.path); 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/demo/file-upload/file-upload-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FileUploadDemoComponent } from './file-upload-demo.component'; 4 | import { RebirthNGModule } from 'rebirth-ng'; 5 | import { FormsModule } from '@angular/forms'; 6 | 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | FormsModule, 12 | RebirthNGModule 13 | ], 14 | exports: [ 15 | FileUploadDemoComponent 16 | ], 17 | declarations: [FileUploadDemoComponent], 18 | providers: [], 19 | entryComponents: [FileUploadDemoComponent] 20 | }) 21 | export class FileUploadDemoModule { 22 | } 23 | -------------------------------------------------------------------------------- /src/app/demo/file-upload/index.ts: -------------------------------------------------------------------------------- 1 | export * from './file-upload-demo.component'; 2 | export * from './file-upload-demo.module'; 3 | -------------------------------------------------------------------------------- /src/app/demo/flow-step/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/flow-step/README.md -------------------------------------------------------------------------------- /src/app/demo/flow-step/flow-step-demo.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
6 |
7 |
8 |
9 |
12 |
13 |
14 | 18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/app/demo/flow-step/flow-step-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
2 | import { FlowStep } from 'rebirth-ng';
3 |
4 | @Component({
5 | selector: 're-flow-step-demo',
6 | templateUrl: './flow-step-demo.component.html',
7 | changeDetection: ChangeDetectionStrategy.OnPush
8 | })
9 | export class FlowStepDemoComponent {
10 | active = 0;
11 | steps: FlowStep[] = [
12 | {
13 | title: 'Submit order',
14 | icon: 'glyphicon glyphicon-shopping-cart',
15 | description: 'Step 1 description'
16 | },
17 | {
18 | title: 'Payment',
19 | icon: 'glyphicon glyphicon-yen',
20 | description: 'Step 2 description'
21 | },
22 | {
23 | title: 'Posting',
24 | icon: 'glyphicon glyphicon-plane',
25 | description: 'Posting ....'
26 | },
27 | {
28 | title: 'Sign',
29 | icon: 'glyphicon glyphicon-list-alt',
30 | description: 'Step 4 description'
31 | },
32 | {
33 | title: 'Completed',
34 | icon: 'glyphicon glyphicon-ok',
35 | description: 'Step 5 description'
36 | }
37 | ];
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/demo/flow-step/flow-step-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { FlowStepDemoComponent } from './flow-step-demo.component';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 |
7 | @NgModule({
8 | imports: [CommonModule, RebirthNGModule],
9 | exports: [FlowStepDemoComponent],
10 | declarations: [FlowStepDemoComponent],
11 | providers: [],
12 | entryComponents: [FlowStepDemoComponent]
13 | })
14 | export class FlowStepDemoModule {
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/flow-step/index.ts:
--------------------------------------------------------------------------------
1 | export * from './flow-step-demo.component';
2 | export * from './flow-step-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/image-upload/README.md:
--------------------------------------------------------------------------------
1 | #### ImageUpload
2 |
3 |
--------------------------------------------------------------------------------
/src/app/demo/image-upload/image-upload-demo.component.html:
--------------------------------------------------------------------------------
1 | Arrow:
4 |Dot:
10 |14 | 18 |
2 |
3 |
4 |
8 |
9 |
10 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/app/demo/image-upload/image-upload-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-image-upload-demo',
5 | templateUrl: './image-upload-demo.component.html'
6 | })
7 | export class ImageUploadDemoComponent {
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/demo/image-upload/image-upload-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { ImageUploadDemoComponent } from './image-upload-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 |
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | RebirthNGModule
11 | ],
12 | exports: [
13 | ImageUploadDemoComponent
14 | ],
15 | declarations: [ImageUploadDemoComponent],
16 | providers: [],
17 | entryComponents: [ImageUploadDemoComponent]
18 | })
19 | export class ImageUploadDemoModule {
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/demo/image-upload/index.ts:
--------------------------------------------------------------------------------
1 | export * from './image-upload-demo.component';
2 | export * from './image-upload-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/infinite-scroll/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/infinite-scroll/README.md
--------------------------------------------------------------------------------
/src/app/demo/infinite-scroll/index.ts:
--------------------------------------------------------------------------------
1 | export * from './infinite-scroll-demo.component';
2 | export * from './infinite-scroll-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/infinite-scroll/infinite-scroll-demo.component.html:
--------------------------------------------------------------------------------
1 | Multiple - 3:
5 |Single:
11 |
2 |
3 |
4 |
5 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/demo/infinite-scroll/infinite-scroll-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { InfiniteScrollComponent } from 'rebirth-ng';
3 | import * as Immutable from 'immutable';
4 |
5 | @Component({
6 | selector: 're-infinite-scroll-demo',
7 | templateUrl: './infinite-scroll-demo.component.html'
8 | })
9 | export class InfiniteScrollDemoComponent {
10 | dataSource = Immutable.List([]);
11 | total = 500;
12 | complete = false;
13 | next = 1;
14 |
15 | loadMore(infiniteScroll: InfiniteScrollComponent) {
16 | if (this.next > this.total) {
17 | return;
18 | }
19 |
20 |
21 | const end = this.next + 100;
22 | const dataSource = [];
23 | for (; this.next < end; this.next++) {
24 | dataSource.push({ id: this.next, name: `Name ${this.next}`, age: 10 });
25 | }
26 |
27 | this.dataSource = this.dataSource.push(...dataSource);
28 | this.complete = this.next > this.total;
29 | infiniteScroll.loadFinish(this.complete);
30 | console.log(`load more`, this.next, this.complete);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/demo/infinite-scroll/infinite-scroll-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { InfiniteScrollDemoComponent } from './infinite-scroll-demo.component';
4 | import { CommonModule } from '@angular/common';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 |
7 | @NgModule({
8 | imports: [CommonModule, RebirthNGModule],
9 | exports: [InfiniteScrollDemoComponent],
10 | declarations: [InfiniteScrollDemoComponent],
11 | providers: [],
12 | entryComponents: [InfiniteScrollDemoComponent]
13 | })
14 | export class InfiniteScrollDemoModule {
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/menu-bar/README.md:
--------------------------------------------------------------------------------
1 |
2 | **Notices**
3 |
4 | * `MenuBar` current only support **2 level** dropdown menu;
5 |
6 | * `RouterLink` and `external url` are both supported;
7 |
8 | * Navbar type support: `navbar-fixed-top`, `navbar-fixed-bottom`, `container-fluid`, `navbar-static-top`, `navbar-static-bottom`, `navbar-form`, `sidebar`
9 |
10 | * Sidebar shoulde use type with `sidebar` and in the header page;
11 |
12 | * `MenuBar` include normal menus(`menus`) and right side menus(`rightMenus`);
13 |
--------------------------------------------------------------------------------
/src/app/demo/menu-bar/index.ts:
--------------------------------------------------------------------------------
1 | export * from './menu-bar-demo.component';
2 | export * from './menu-bar-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/menu-bar/menu-bar-demo.component.html:
--------------------------------------------------------------------------------
1 |
26 |
--------------------------------------------------------------------------------
/src/app/demo/menu-bar/menu-bar-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { MenuBarDemoComponent } from './menu-bar-demo.component';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 | import { FormsModule } from '@angular/forms';
7 |
8 | @NgModule({
9 | imports: [CommonModule, RebirthNGModule, FormsModule],
10 | exports: [MenuBarDemoComponent],
11 | declarations: [MenuBarDemoComponent],
12 | providers: [],
13 | entryComponents: [MenuBarDemoComponent]
14 | })
15 | export class MenuBarDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/modal/README.md:
--------------------------------------------------------------------------------
1 |
2 | #### Notices
3 |
4 | * Shoulde pass `RebirthNGConfig.rootContainer` in your `AppComponent` when you did not pass `rootContainer` parameters to `ModalService`.
5 |
6 |
7 | export class AppComponent implements OnInit {
8 | constructor(private rebirthNGConfig: RebirthNGConfig,
9 | private viewContainerRef: ViewContainerRef) {
10 |
11 | this.rebirthNGConfig.rootContainer = this.viewContainerRef; // default container for append body component(Modal, DatePicker...)
12 | // this.rebirthNGConfig.extend(REBIRTH_UI_I18N_ZHCN); i18n
13 | }
14 |
15 | * Make sure put your modal component to `entryComponents` of your module! Example with `ModalTestComponent`:
16 |
17 |
18 | @NgModule({
19 | ...
20 | declarations: [
21 | ModalTestComponent
22 | ],
23 | entryComponents: [
24 | ModalTestComponent
25 | ]
26 | })
27 | export class ModalDemoModule {
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/src/app/demo/modal/index.ts:
--------------------------------------------------------------------------------
1 | export * from './modal-demo.component';
2 | export * from './modal-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/modal/modal-demo.component.html:
--------------------------------------------------------------------------------
1 | | {{item.id}} | 7 |{{item.name}} | 8 |{{item.age}} | 9 |
Load completed!
15 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/app/demo/modal/modal-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { ModalDemoComponent, ModalTestComponent } from './modal-demo.component';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | FormsModule
11 | ],
12 | exports: [
13 | ModalDemoComponent
14 | ],
15 | declarations: [
16 | ModalDemoComponent,
17 | ModalTestComponent
18 | ],
19 | entryComponents: [
20 | ModalTestComponent,
21 | ModalDemoComponent
22 | ]
23 | })
24 | export class ModalDemoModule {
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/demo/notify/README.md:
--------------------------------------------------------------------------------
1 | #### Notify
2 |
3 | * You should setup `this.rebirthConfig.rootContainer = this.viewContainerRef;` in your `Root component` first.
4 |
--------------------------------------------------------------------------------
/src/app/demo/notify/index.ts:
--------------------------------------------------------------------------------
1 | export * from './notify-demo.component';
2 | export * from './notify-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/notify/notify-demo.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 | {{alert.html}}
7 |
8 |
9 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/app/demo/notify/notify-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild, TemplateRef, OnInit } from '@angular/core';
2 | import { NotifyModel, NotifyService } from 'rebirth-ng';
3 |
4 | @Component({
5 | selector: 're-notify-demo',
6 | templateUrl: './notify-demo.component.html'
7 | })
8 | export class NotifyDemoComponent implements OnInit {
9 |
10 | @ViewChild('notifyTemplate') notifyTemplate: TemplateRefAlert message:
5 |
8 |
9 |
11 | `,
12 | changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class OverlayBodyDemoComponent {
15 |
16 | }
17 |
18 | @Component({
19 | selector: 're-overlay-demo',
20 | templateUrl: './overlay-demo.component.html',
21 | changeDetection: ChangeDetectionStrategy.OnPush
22 | })
23 | export class OverlayDemoComponent {
24 |
25 | constructor(private overlayService: OverlayService) {
26 | }
27 |
28 | openOverlay() {
29 | this.overlayService.open({ html: `` });
30 | setTimeout(() => this.overlayService.close(), 5 * 1000);
31 | }
32 |
33 | openComponentOverlay() {
34 | this.overlayService.open({ component: OverlayBodyDemoComponent });
35 | setTimeout(() => this.overlayService.close(), 5 * 1000);
36 | }
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/src/app/demo/overlay/overlay-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { OverlayDemoComponent, OverlayBodyDemoComponent } from './overlay-demo.component';
5 |
6 | @NgModule({
7 | imports: [CommonModule],
8 | exports: [OverlayDemoComponent],
9 | declarations: [OverlayDemoComponent, OverlayBodyDemoComponent],
10 | providers: [],
11 | entryComponents: [OverlayDemoComponent, OverlayBodyDemoComponent]
12 | })
13 | export class OverlayDemoModule {
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/demo/pager/README.md:
--------------------------------------------------------------------------------
1 |
2 | #### Notices
3 |
4 | * Pager start with **1 (not 0)**.
5 |
6 | * Important @Input & @Output
7 | * `[pageSize]="pager.pageSize"`
8 | * `(pageIndexChange)="pageChange($event)"`.
9 |
--------------------------------------------------------------------------------
/src/app/demo/pager/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pager-demo.component';
2 | export * from './pager-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/pager/pager-demo.component.html:
--------------------------------------------------------------------------------
1 | Rebirth NG overlay!
10 |
2 |
3 |
8 |
9 |
10 |
15 |
16 |
20 |
--------------------------------------------------------------------------------
/src/app/demo/pager/pager-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-pager-demo',
5 | templateUrl: './pager-demo.component.html',
6 | changeDetection: ChangeDetectionStrategy.OnPush
7 | })
8 | export class PagerDemoComponent {
9 | pager = {
10 | total: 106,
11 | pageIndex: 5,
12 | pageSize: 10
13 | };
14 |
15 | pageChange(pageIndex) {
16 | console.log(`Rebirth pager change to: ${pageIndex}`, this.pager);
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/demo/pager/pager-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { PagerDemoComponent } from './pager-demo.component';
5 | import { PagerModule } from 'rebirth-ng';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | PagerModule
11 | ],
12 | declarations: [
13 | PagerDemoComponent
14 | ],
15 | exports: [
16 | PagerDemoComponent
17 | ],
18 | providers: [],
19 | entryComponents: [PagerDemoComponent]
20 |
21 | })
22 | export class PagerDemoModule {
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/demo/pagination/README.md:
--------------------------------------------------------------------------------
1 | #### Notices
2 |
3 | * Pagination is same as pager, they both start with **1 (not 0)**.
4 |
5 | * Important @Input & @Output
6 | * `[pageSize]="pager.pageSize"`
7 | * `(pageIndexChange)="pageChange($event)"`.
8 |
--------------------------------------------------------------------------------
/src/app/demo/pagination/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pagination-demo.component';
2 | export * from './pagination-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/pagination/pagination-demo.component.scss:
--------------------------------------------------------------------------------
1 | .goto-input {
2 | max-width: 2.5em;
3 | }
4 |
5 | .head {
6 | margin-right: 1rem;
7 | }
8 |
9 | .tail {
10 | margin-left: 1rem;
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | .form-control {
15 | text-align: center;
16 | }
17 | }
18 |
19 | :host ::ng-deep {
20 | nav {
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/demo/pagination/pagination-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-pagination-demo',
5 | templateUrl: './pagination-demo.component.html',
6 | styleUrls: ['./pagination-demo.component.scss'],
7 | changeDetection: ChangeDetectionStrategy.OnPush
8 |
9 | })
10 | export class PaginationDemoComponent {
11 |
12 | pager = {
13 | total: 306,
14 | pageIndex: 5,
15 | pageSize: 10
16 | };
17 | gotoPage: number;
18 |
19 | pageChange(pageIndex) {
20 | console.log(`Rebirth pager change to: ${pageIndex}`, this.pager);
21 | }
22 |
23 | totalPage(): number {
24 | return Math.ceil(this.pager.total / this.pager.pageSize);
25 | }
26 |
27 | goto() {
28 | this.gotoPage = Math.max(1, this.gotoPage);
29 | this.gotoPage = Math.min(this.totalPage(), this.gotoPage);
30 | this.pager.pageIndex = this.gotoPage;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/demo/pagination/pagination-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { PaginationDemoComponent } from './pagination-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { CommonModule } from '@angular/common';
6 | import { FormsModule } from '@angular/forms';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | FormsModule,
12 | RebirthNGModule
13 | ],
14 | declarations: [
15 | PaginationDemoComponent
16 | ],
17 | exports: [
18 | PaginationDemoComponent
19 | ],
20 | entryComponents: [PaginationDemoComponent],
21 | providers: []
22 | })
23 | export class PaginationDemoModule {
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/demo/panel/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/panel/README.md
--------------------------------------------------------------------------------
/src/app/demo/panel/index.ts:
--------------------------------------------------------------------------------
1 | export * from './panel-demo.component';
2 | export * from './panel-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/panel/panel-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-panel-demo',
5 | templateUrl: './panel-demo.component.html'
6 | })
7 | export class PanelDemoComponent {
8 |
9 | close(type) {
10 | console.log(`Panel ${type} closing!`);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/demo/panel/panel-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { PanelDemoComponent } from './panel-demo.component';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | RebirthNGModule
11 | ],
12 | exports: [PanelDemoComponent],
13 | declarations: [PanelDemoComponent],
14 | providers: [],
15 | entryComponents: [PanelDemoComponent]
16 | })
17 | export class PanelDemoModule {
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/demo/popover/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/popover/README.md
--------------------------------------------------------------------------------
/src/app/demo/popover/index.ts:
--------------------------------------------------------------------------------
1 | export * from './popover-demo.component';
2 | export * from './popover-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/popover/popover-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-popover-demo',
5 | templateUrl: './popover-demo.component.html',
6 | changeDetection: ChangeDetectionStrategy.OnPush
7 | })
8 | export class PopoverDemoComponent {
9 | name = 'greengerong';
10 |
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/demo/popover/popover-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { PopoverDemoComponent } from './popover-demo.component';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 | import { FormsModule } from '@angular/forms';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [PopoverDemoComponent],
11 | declarations: [PopoverDemoComponent],
12 | providers: [],
13 | entryComponents: [PopoverDemoComponent]
14 | })
15 | export class PopoverDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/position/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/position/README.md
--------------------------------------------------------------------------------
/src/app/demo/progress-bar/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/progress-bar/README.md
--------------------------------------------------------------------------------
/src/app/demo/progress-bar/index.ts:
--------------------------------------------------------------------------------
1 | export * from './progress-bar-demo.component';
2 | export * from './progress-bar-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/progress-bar/progress-bar-demo.component.html:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/app/demo/progress-bar/progress-bar-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-progress-bar-demo',
5 | templateUrl: './progress-bar-demo.component.html',
6 | changeDetection: ChangeDetectionStrategy.OnPush
7 | })
8 | export class ProgressBarDemoComponent {
9 | value = 45;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/demo/progress-bar/progress-bar-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { ProgressBarDemoComponent } from './progress-bar-demo.component';
5 | import { FormsModule } from '@angular/forms';
6 | import { RebirthNGModule } from 'rebirth-ng';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [ProgressBarDemoComponent],
11 | declarations: [ProgressBarDemoComponent],
12 | providers: [],
13 | entryComponents: [ProgressBarDemoComponent]
14 | })
15 | export class ProgressBarDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/radio-group/README.md:
--------------------------------------------------------------------------------
1 | #### RadioGroup
2 |
3 |
--------------------------------------------------------------------------------
/src/app/demo/radio-group/index.ts:
--------------------------------------------------------------------------------
1 | export * from './radio-group-demo.component';
2 | export * from './radio-group-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/radio-group/radio-group-demo.component.html:
--------------------------------------------------------------------------------
1 | aligned pager:
4 |No aligned pager:
11 |
17 |
19 | {{pager | json}}
18 |
2 |
3 |
4 |
8 |
9 |
10 |
15 |
16 |
17 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/demo/radio-group/radio-group-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-radio-group-demo',
5 | templateUrl: './radio-group-demo.component.html'
6 | })
7 | export class RadioGroupDemoComponent {
8 |
9 | sexOptions = ['male', 'female'];
10 | sex: string;
11 |
12 | seasonOptions = [
13 | { label: 'Spring', value: 'SPRING' },
14 | { label: 'Summer', value: 'SUMMER' },
15 | { label: 'Autumn', value: 'AUTUMN' },
16 | { label: 'Winter', value: 'WINTER' }
17 | ];
18 |
19 | season = this.seasonOptions[1];
20 | seasonValue: string;
21 | valueParser = (item) => item.value;
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/src/app/demo/radio-group/radio-group-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RadioGroupDemoComponent } from './radio-group-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { FormsModule, Validators } from '@angular/forms';
6 |
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | FormsModule,
12 | RebirthNGModule
13 | ],
14 | exports: [
15 | RadioGroupDemoComponent
16 | ],
17 | declarations: [RadioGroupDemoComponent],
18 | providers: [],
19 | entryComponents: [RadioGroupDemoComponent]
20 | })
21 | export class RadioGroupDemoModule {
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/demo/rating/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/rating/README.md
--------------------------------------------------------------------------------
/src/app/demo/rating/index.ts:
--------------------------------------------------------------------------------
1 | export * from './rating-demo.component';
2 | export * from './rating-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/rating/rating-demo.component.html:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/app/demo/rating/rating-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-rating-demo',
5 | templateUrl: './rating-demo.component.html'
6 | })
7 | export class RatingDemoComponent {
8 | disabled = false;
9 | rating: any = {
10 | value: 3,
11 | max: 10
12 | };
13 | icons = { stateOn: 'glyphicon glyphicon-heart', stateOff: 'glyphicon glyphicon-ban-circle' };
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/rating/rating-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { RatingDemoComponent } from './rating-demo.component';
4 | import { CommonModule } from '@angular/common';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 | import { FormsModule } from '@angular/forms';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [RatingDemoComponent],
11 | declarations: [RatingDemoComponent],
12 | providers: [],
13 | entryComponents: [RatingDemoComponent]
14 | })
15 | export class RatingDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/select-button/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/select-button/README.md
--------------------------------------------------------------------------------
/src/app/demo/select-button/index.ts:
--------------------------------------------------------------------------------
1 | export * from './select-button-demo.component';
2 | export * from './select-button-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/select-button/select-button-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
2 | import { SelectButtonItem } from 'rebirth-ng';
3 |
4 | @Component({
5 | selector: 're-select-button-demo',
6 | templateUrl: './select-button-demo.component.html',
7 | changeDetection: ChangeDetectionStrategy.OnPush
8 | })
9 | export class SelectButtonDemoComponent {
10 | value: string;
11 | multipleValue: string[];
12 | disabled = true;
13 | items: SelectButtonItem[] = [
14 | {
15 | text: 'Left'
16 | },
17 | {
18 | text: 'Middle'
19 | },
20 | {
21 | text: 'Right'
22 | }
23 | ];
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/demo/select-button/select-button-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { SelectButtonDemoComponent } from './select-button-demo.component';
5 | import { FormsModule } from '@angular/forms';
6 | import { RebirthNGModule } from 'rebirth-ng';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [SelectButtonDemoComponent],
11 | declarations: [SelectButtonDemoComponent],
12 | providers: [SelectButtonDemoComponent],
13 | entryComponents: [SelectButtonDemoComponent]
14 | })
15 | export class SelectButtonDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/select/README.md:
--------------------------------------------------------------------------------
1 | #### Select
2 |
3 |
--------------------------------------------------------------------------------
/src/app/demo/select/index.ts:
--------------------------------------------------------------------------------
1 | export * from './select-demo.component';
2 | export * from './select-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/select/select-demo.component.html:
--------------------------------------------------------------------------------
1 | Sex:
5 |{{sex | json}}
7 | Season:
11 |{{season | json}}
14 | Season with customise value:
18 |{{seasonValue | json}}
21 |
2 |
3 |
4 |
7 |
9 |
10 |
11 |
14 |
16 |
17 |
18 |
22 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/app/demo/select/select-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { GroupOption } from 'rebirth-ng';
3 |
4 | @Component({
5 | selector: 're-select-demo',
6 | templateUrl: './select-demo.component.html'
7 | })
8 | export class SelectDemoComponent {
9 | options = ['Tyler', 'Lucy', 'Jack'];
10 | selectValue = 'Jack';
11 | objOptions = this.options.map((label, id) => ({
12 | id, label
13 | }));
14 | selectObjValue = this.objOptions[2];
15 | selectGroupValue: any;
16 | groupOptions: GroupOption[] = [
17 | {
18 | group: 'Manager',
19 | options: ['Tyler']
20 | },
21 | {
22 | group: 'Engineer',
23 | options: ['Lucy', 'Jack']
24 | }
25 | ]
26 | ;
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/demo/select/select-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { SelectDemoComponent } from './select-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { FormsModule } from '@angular/forms';
6 |
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | FormsModule,
12 | RebirthNGModule
13 | ],
14 | exports: [
15 | SelectDemoComponent
16 | ],
17 | declarations: [SelectDemoComponent],
18 | providers: [],
19 | entryComponents: [SelectDemoComponent]
20 | })
21 | export class SelectDemoModule {
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/demo/slider/README.md:
--------------------------------------------------------------------------------
1 | #### Slider
2 |
3 |
--------------------------------------------------------------------------------
/src/app/demo/slider/index.ts:
--------------------------------------------------------------------------------
1 | export * from './slider-demo.component';
2 | export * from './slider-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/slider/slider-demo.component.html:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/app/demo/slider/slider-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-slider-demo',
5 | templateUrl: './slider-demo.component.html'
6 | })
7 | export class SliderDemoComponent {
8 | sliderValue = 60;
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/demo/slider/slider-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { SliderDemoComponent } from './slider-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { FormsModule } from '@angular/forms';
6 |
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | RebirthNGModule,
12 | FormsModule
13 | ],
14 | exports: [
15 | SliderDemoComponent
16 | ],
17 | declarations: [SliderDemoComponent],
18 | providers: [],
19 | entryComponents: [SliderDemoComponent]
20 | })
21 | export class SliderDemoModule {
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/demo/switch/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/switch/README.md
--------------------------------------------------------------------------------
/src/app/demo/switch/index.ts:
--------------------------------------------------------------------------------
1 | export * from './switch-demo.component';
2 | export * from './switch-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/switch/switch-demo.component.html:
--------------------------------------------------------------------------------
1 | Demo:
5 |7 |
{{selectValue | json}}
8 | Select Object Demo:
12 |14 |
{{selectObjValue | json}}
15 | Group select:
19 |22 |
{{selectGroupValue | json}}
23 |
2 |
3 |
9 |
13 |
--------------------------------------------------------------------------------
/src/app/demo/switch/switch-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-switch-demo',
5 | templateUrl: './switch-demo.component.html',
6 | changeDetection: ChangeDetectionStrategy.OnPush
7 | })
8 | export class SwitchDemoComponent {
9 | checked = true;
10 | disabled = false;
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/demo/switch/switch-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { SwitchDemoComponent } from './switch-demo.component';
6 | import { RebirthNGModule } from 'rebirth-ng';
7 |
8 | @NgModule({
9 | imports: [CommonModule, RebirthNGModule, FormsModule],
10 | exports: [SwitchDemoComponent],
11 | declarations: [SwitchDemoComponent],
12 | providers: [],
13 | entryComponents: [SwitchDemoComponent]
14 | })
15 | export class SwitchDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/tabs/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/tabs/README.md
--------------------------------------------------------------------------------
/src/app/demo/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs-demo.component';
2 | export * from './tabs-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/tabs/tabs-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { TabsDemoComponent } from './tabs-demo.component';
4 | import { CommonModule } from '@angular/common';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 |
7 | @NgModule({
8 | imports: [CommonModule, RebirthNGModule],
9 | exports: [TabsDemoComponent],
10 | declarations: [TabsDemoComponent],
11 | providers: [],
12 | entryComponents: [TabsDemoComponent]
13 | })
14 | export class TabsDemoModule {
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/tags/README.md:
--------------------------------------------------------------------------------
1 | #### Tags
2 |
3 |
--------------------------------------------------------------------------------
/src/app/demo/tags/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tags-demo.component';
2 | export * from './tags-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/tags/tags-demo.component.html:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/app/demo/tags/tags-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-tags-demo',
5 | templateUrl: './tags-demo.component.html'
6 | })
7 | export class TagsDemoComponent {
8 | source = ['123', '456', '789'];
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/demo/tags/tags-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { TagsDemoComponent } from './tags-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { FormsModule } from '@angular/forms';
6 |
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | RebirthNGModule,
12 | FormsModule
13 | ],
14 | exports: [
15 | TagsDemoComponent
16 | ],
17 | declarations: [TagsDemoComponent],
18 | providers: [],
19 | entryComponents: [TagsDemoComponent]
20 | })
21 | export class TagsDemoModule {
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/demo/time-picker/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/time-picker/README.md
--------------------------------------------------------------------------------
/src/app/demo/time-picker/index.ts:
--------------------------------------------------------------------------------
1 | export * from './time-picker-demo.component';
2 | export * from './time-picker-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/time-picker/time-picker-demo.component.html:
--------------------------------------------------------------------------------
1 |
32 |
--------------------------------------------------------------------------------
/src/app/demo/time-picker/time-picker-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { TimePickerModel } from 'rebirth-ng';
3 |
4 | @Component({
5 | selector: 're-time-picker-demo',
6 | templateUrl: './time-picker-demo.component.html'
7 | })
8 | export class TimePickerDemoComponent {
9 |
10 | time1 = new TimePickerModel(13, 30, 30);
11 | time2 = new TimePickerModel(13, 30);
12 | time3 = new TimePickerModel(13, 30, 30);
13 | disabled: boolean;
14 |
15 | timeChange(time) {
16 | console.log('time change:', time, time.toString());
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/demo/time-picker/time-picker-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { CommonModule } from '@angular/common';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { FormsModule } from '@angular/forms';
6 | import { TimePickerDemoComponent } from './time-picker-demo.component';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [TimePickerDemoComponent],
11 | declarations: [TimePickerDemoComponent],
12 | providers: [],
13 | entryComponents: [TimePickerDemoComponent]
14 | })
15 | export class TimePickerDemoModule {
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/src/app/demo/tooltip/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/tooltip/README.md
--------------------------------------------------------------------------------
/src/app/demo/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tooltip-demo.component';
2 | export * from './tooltip.module';
3 |
4 |
--------------------------------------------------------------------------------
/src/app/demo/tooltip/tooltip-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-tooltip-demo',
5 | templateUrl: './tooltip-demo.component.html'
6 | })
7 | export class TooltipDemoComponent {
8 | setting = { name: 'rebirth tooltip', placement: 'top', trigger: 'hover' };
9 | github = 'https://github.com/greengerong/rebirth-ng';
10 |
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/demo/tooltip/tooltip.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { TooltipDemoComponent } from './tooltip-demo.component';
4 | import { CommonModule } from '@angular/common';
5 | import { RebirthNGModule } from 'rebirth-ng';
6 |
7 | @NgModule({
8 | imports: [CommonModule, RebirthNGModule],
9 | exports: [TooltipDemoComponent],
10 | declarations: [TooltipDemoComponent],
11 | providers: [],
12 | entryComponents: [TooltipDemoComponent]
13 | })
14 | export class TooltipDemoModule {
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/demo/tree-view/README.md:
--------------------------------------------------------------------------------
1 | #### TreeView
2 |
3 |
--------------------------------------------------------------------------------
/src/app/demo/tree-view/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tree-view-demo.component';
2 | export * from './tree-view-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/tree-view/tree-view-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { TreeViewDemoComponent } from './tree-view-demo.component';
4 | import { RebirthNGModule } from 'rebirth-ng';
5 | import { FormsModule } from '@angular/forms';
6 |
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | RebirthNGModule,
12 | FormsModule
13 | ],
14 | exports: [
15 | TreeViewDemoComponent
16 | ],
17 | declarations: [TreeViewDemoComponent],
18 | providers: [],
19 | entryComponents: [TreeViewDemoComponent]
20 | })
21 | export class TreeViewDemoModule {
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/demo/validators/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/validators/README.md
--------------------------------------------------------------------------------
/src/app/demo/validators/index.ts:
--------------------------------------------------------------------------------
1 | export * from './validators-demo.component';
2 | export * from './validators-demo.module';
3 |
--------------------------------------------------------------------------------
/src/app/demo/validators/validators-demo.component.scss:
--------------------------------------------------------------------------------
1 | re-alert-box {
2 | display: block;
3 | padding: 5px 0px;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/demo/validators/validators-demo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 're-validators-demo',
5 | templateUrl: './validators-demo.component.html',
6 | styleUrls: ['./validators-demo.component.scss']
7 | })
8 | export class ValidatorsDemoComponent {
9 | model: any = {};
10 | date = Date.parse('2017-05-01');
11 | today = new Date().setHours(0, 0, 0, 0);
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/demo/validators/validators-demo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { ValidatorsDemoComponent } from './validators-demo.component';
4 | import { CommonModule } from '@angular/common';
5 | import { FormsModule } from '@angular/forms';
6 | import { RebirthNGModule } from 'rebirth-ng';
7 |
8 | @NgModule({
9 | imports: [CommonModule, FormsModule, RebirthNGModule],
10 | exports: [ValidatorsDemoComponent],
11 | declarations: [ValidatorsDemoComponent],
12 | providers: [ValidatorsDemoComponent],
13 | entryComponents: [ValidatorsDemoComponent]
14 | })
15 | export class ValidatorsDemoModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/demo/window-ref/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/app/demo/window-ref/README.md
--------------------------------------------------------------------------------
/src/app/feature/getting-started.component.html:
--------------------------------------------------------------------------------
1 | 9 |
{{checked | json}}
10 |
11 |
12 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/app/feature/getting-started.component.scss:
--------------------------------------------------------------------------------
1 | .main-logo {
2 | width: 100%;
3 | margin: 0px 0px 40px 0px;
4 | .images {
5 | margin: auto;
6 | max-width: 100%;
7 | max-height: 400px;
8 | display: block;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/feature/getting-started.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { DemoConfigService } from '../shared/demo/demo-config.service';
3 | import { DomSanitizer } from '@angular/platform-browser';
4 |
5 | @Component({
6 | selector: 're-getting-started',
7 | templateUrl: './getting-started.component.html',
8 | styleUrls: ['./getting-started.component.scss']
9 | })
10 | export class GettingStartedComponent implements OnInit {
11 | gettingStarted: any;
12 |
13 | constructor(private demoConfigService: DemoConfigService, private domSanitizer: DomSanitizer) {
14 | }
15 |
16 | ngOnInit() {
17 | this.gettingStarted = this.domSanitizer.bypassSecurityTrustHtml(this.demoConfigService.gettingStarted.readMe);
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/feature/index.ts:
--------------------------------------------------------------------------------
1 | export * from './getting-started.component';
2 | export * from './show-case.component';
3 |
--------------------------------------------------------------------------------
/src/app/feature/show-case.component.html:
--------------------------------------------------------------------------------
1 |
4 |
2 |
4 |
--------------------------------------------------------------------------------
/src/app/shared/demo/index.ts:
--------------------------------------------------------------------------------
1 | export * from './demo-config.service';
2 |
--------------------------------------------------------------------------------
/src/app/shared/doc/doc.component.scss:
--------------------------------------------------------------------------------
1 | $grayColor: #999;
2 |
3 | .meta-data {
4 | color: $grayColor;
5 | a {
6 | color: $grayColor;
7 | }
8 | }
9 |
10 | .api-frame {
11 | border: none;
12 | width: 100%;
13 | height: 100%;
14 | min-height: 800px;
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/src/app/shared/doc/doc.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
3 |
4 | @Component({
5 | selector: 're-doc',
6 | templateUrl: './doc.component.html',
7 | styleUrls: ['./doc.component.scss']
8 | })
9 | export class DocComponent implements OnInit {
10 |
11 |
12 | apiHref: string | SafeUrl;
13 | @Input() component: any;
14 |
15 | constructor(private domSanitizer: DomSanitizer) {
16 |
17 | }
18 |
19 | ngOnInit(): void {
20 | const url = `/rebirth-ng/compodocs/modules/${this.component.name}Module.html`;
21 | this.apiHref = this.domSanitizer.bypassSecurityTrustResourceUrl(url);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/shared/doc/hightlight.ts:
--------------------------------------------------------------------------------
1 | import * as hljs from 'highlight.js';
2 | import { Renderer2 } from '@angular/core';
3 |
4 | export function highlightCodeBlock(renderer: Renderer2, code): string {
5 | if (code) {
6 | const elm = renderer.createElement('pre');
7 | renderer.setProperty(elm, 'innerText', code);
8 | hljs.highlightBlock(elm);
9 | return elm.innerHTML;
10 | }
11 | }
12 |
13 | export function fixTSModuleImport(code): string {
14 | return (code || '').replace(/\.\.\/\.\.\/exports(\/.*)?/, 'rebirth-ng');
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/shared/doc/index.ts:
--------------------------------------------------------------------------------
1 | export * from './doc.component';
2 |
--------------------------------------------------------------------------------
/src/app/shared/index.ts:
--------------------------------------------------------------------------------
1 | export * from './doc';
2 | export * from './theme';
3 | export * from './demo';
4 | export * from './shared.module';
5 |
--------------------------------------------------------------------------------
/src/app/shared/theme/index.ts:
--------------------------------------------------------------------------------
1 | export * from './theme.service';
2 |
--------------------------------------------------------------------------------
/src/app/shared/theme/theme.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, Renderer2, ElementRef } from '@angular/core';
2 |
3 | @Injectable()
4 | export class ThemeService {
5 | static THEME_KEY = 'rebirth-ng:theme';
6 |
7 | setupTheme(theme: string, renderer: Renderer2, parentElementRef: ElementRef) {
8 | theme = theme || localStorage.getItem(ThemeService.THEME_KEY);
9 | if (theme) {
10 | const link = renderer.createElement('link');
11 | link.rel = 'stylesheet';
12 | link.href = `./assets/themes/bootstrap.${theme.toLowerCase()}.css`;
13 | renderer.appendChild(parentElementRef.nativeElement, link);
14 | localStorage.setItem(ThemeService.THEME_KEY, theme);
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/assets/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/assets/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/assets/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/assets/fonts/glyphicons-halflings-regular.woff2
--------------------------------------------------------------------------------
/src/assets/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/assets/images/loading.gif
--------------------------------------------------------------------------------
/src/assets/images/rebirth-home.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/assets/images/rebirth-home.jpg
--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greengerong/rebirth-ng/135d1f9170acf6b97f5f239d79365a057c7e4143/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |