Skip to content

Commit c4a221f

Browse files
hmtylmzhmtylmz
committed
Add ng-gridstack library and move logics
1 parent 227144d commit c4a221f

27 files changed

+272
-65
lines changed

‎angular.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,41 @@
133133
}
134134
}
135135
}
136+
},
137+
"ng-gridstack": {
138+
"projectType": "library",
139+
"root": "projects/ng-gridstack",
140+
"sourceRoot": "projects/ng-gridstack/src",
141+
"prefix": "lib",
142+
"architect": {
143+
"build": {
144+
"builder": "@angular-devkit/build-ng-packagr:build",
145+
"options": {
146+
"tsConfig": "projects/ng-gridstack/tsconfig.lib.json",
147+
"project": "projects/ng-gridstack/ng-package.json"
148+
}
149+
},
150+
"test": {
151+
"builder": "@angular-devkit/build-angular:karma",
152+
"options": {
153+
"main": "projects/ng-gridstack/src/test.ts",
154+
"tsConfig": "projects/ng-gridstack/tsconfig.spec.json",
155+
"karmaConfig": "projects/ng-gridstack/karma.conf.js"
156+
}
157+
},
158+
"lint": {
159+
"builder": "@angular-devkit/build-angular:tslint",
160+
"options": {
161+
"tsConfig": [
162+
"projects/ng-gridstack/tsconfig.lib.json",
163+
"projects/ng-gridstack/tsconfig.spec.json"
164+
],
165+
"exclude": [
166+
"**/node_modules/**"
167+
]
168+
}
169+
}
170+
}
136171
}},
137172
"defaultProject": "gridstack-angular"
138173
}

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
},
3131
"devDependencies": {
3232
"@angular-devkit/build-angular": "~0.803.8",
33+
"@angular-devkit/build-ng-packagr": "~0.803.21",
3334
"@angular/cli": "~8.3.8",
3435
"@angular/compiler-cli": "~8.2.9",
3536
"@angular/language-service": "~8.2.9",
@@ -46,8 +47,10 @@
4647
"karma-coverage-istanbul-reporter": "~2.0.1",
4748
"karma-jasmine": "~2.0.1",
4849
"karma-jasmine-html-reporter": "^1.4.0",
50+
"ng-packagr": "^5.4.0",
4951
"protractor": "~5.4.0",
5052
"ts-node": "~7.0.0",
53+
"tsickle": "^0.37.0",
5154
"tslint": "~5.15.0",
5255
"typescript": "~3.5.3"
5356
}

‎projects/ng-gridstack/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# NgGridstack
2+
3+
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
4+
5+
## Code scaffolding
6+
7+
Run `ng generate component component-name --project ng-gridstack` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-gridstack`.
8+
> Note: Don't forget to add `--project ng-gridstack` or else it will be added to the default project in your `angular.json` file.
9+
10+
## Build
11+
12+
Run `ng build ng-gridstack` to build the project. The build artifacts will be stored in the `dist/` directory.
13+
14+
## Publishing
15+
16+
After building your library with `ng build ng-gridstack`, go to the dist folder `cd dist/ng-gridstack` and run `npm publish`.
17+
18+
## Running unit tests
19+
20+
Run `ng test ng-gridstack` to execute the unit tests via [Karma](https://karma-runner.github.io).
21+
22+
## Further help
23+
24+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

‎projects/ng-gridstack/karma.conf.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
coverageIstanbulReporter: {
19+
dir: require('path').join(__dirname, '../../coverage/ng-gridstack'),
20+
reports: ['html', 'lcovonly', 'text-summary'],
21+
fixWebpackSourcePaths: true
22+
},
23+
reporters: ['progress', 'kjhtml'],
24+
port: 9876,
25+
colors: true,
26+
logLevel: config.LOG_INFO,
27+
autoWatch: true,
28+
browsers: ['Chrome'],
29+
singleRun: false,
30+
restartOnFileChange: true
31+
});
32+
};

‎projects/ng-gridstack/ng-package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/ng-gridstack",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎projects/ng-gridstack/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "ng-gridstack",
3+
"version": "0.0.1",
4+
"peerDependencies": {
5+
"@angular/common": "^8.2.14",
6+
"@angular/core": "^8.2.14"
7+
}
8+
}

‎src/app/gridstack/gridstack-item/gridstack-item.component.html renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack-item/ng-gridstack-item.component.html

File renamed without changes.

‎src/app/gridstack/gridstack/gridstack.component.scss renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack-item/ng-gridstack-item.component.scss

File renamed without changes.

‎src/app/gridstack/gridstack-item/gridstack-item.component.spec.ts renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack-item/ng-gridstack-item.component.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
22

3-
import { GridstackItemComponent } from './gridstack-item.component';
3+
import { NgGridstackItemComponent } from './ng-gridstack-item.component';
44

5-
describe('GridstackItemComponent', () => {
6-
let component: GridstackItemComponent;
7-
let fixture: ComponentFixture<GridstackItemComponent>;
5+
describe('NgGridstackItemComponent', () => {
6+
let component: NgGridstackItemComponent;
7+
let fixture: ComponentFixture<NgGridstackItemComponent>;
88

99
beforeEach(async(() => {
1010
TestBed.configureTestingModule({
11-
declarations: [ GridstackItemComponent ]
11+
declarations: [ NgGridstackItemComponent ]
1212
})
1313
.compileComponents();
1414
}));
1515

1616
beforeEach(() => {
17-
fixture = TestBed.createComponent(GridstackItemComponent);
17+
fixture = TestBed.createComponent(NgGridstackItemComponent);
1818
component = fixture.componentInstance;
1919
fixture.detectChanges();
2020
});

‎src/app/gridstack/gridstack-item/gridstack-item.component.ts renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack-item/ng-gridstack-item.component.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
/// <reference types="gridstack" />
33

44
import { Component, ChangeDetectionStrategy, Input, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
5-
import { GridstackService } from '../gridstack.service';
5+
import { NgGridstackService } from '../../services/ng-gridstack.service';
66

77
@Component({
8-
selector: 'app-gridstack-item',
9-
templateUrl: './gridstack-item.component.html',
10-
styleUrls: ['./gridstack-item.component.scss'],
8+
selector: 'ng-gridstack-item',
9+
templateUrl: './ng-gridstack-item.component.html',
10+
styleUrls: ['./ng-gridstack-item.component.scss'],
1111
changeDetection: ChangeDetectionStrategy.OnPush
1212
})
13-
export class GridstackItemComponent implements AfterViewInit, OnDestroy {
13+
export class NgGridstackItemComponent implements AfterViewInit, OnDestroy {
1414
@Input() id: string;
1515

1616
@Input() set x(value: number) {
@@ -67,7 +67,7 @@ export class GridstackItemComponent implements AfterViewInit, OnDestroy {
6767
constructor(
6868
private elementRef: ElementRef,
6969
private renderer: Renderer2,
70-
private gridstackService: GridstackService) {
70+
private gridstackService: NgGridstackService) {
7171
this.element = this.elementRef.nativeElement;
7272
this.renderer.addClass(this.element, 'grid-stack-item');
7373
this.renderer.setAttribute(this.element, 'data-gs-no-resize', false.toString());

‎src/app/gridstack/gridstack/gridstack.component.html renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack/ng-gridstack.component.html

File renamed without changes.

‎projects/ng-gridstack/src/lib/components/ng-gridstack/ng-gridstack.component.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host(*) {
2+
display: block;
3+
}

‎src/app/gridstack/gridstack/gridstack.component.spec.ts renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack/ng-gridstack.component.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
22

3-
import { GridstackComponent } from './gridstack.component';
3+
import { NgGridstackComponent } from './ng-gridstack.component';
44

5-
describe('GridstackComponent', () => {
6-
let component: GridstackComponent;
7-
let fixture: ComponentFixture<GridstackComponent>;
5+
describe('NgGridstackComponent', () => {
6+
let component: NgGridstackComponent;
7+
let fixture: ComponentFixture<NgGridstackComponent>;
88

99
beforeEach(async(() => {
1010
TestBed.configureTestingModule({
11-
declarations: [ GridstackComponent ]
11+
declarations: [ NgGridstackComponent ]
1212
})
1313
.compileComponents();
1414
}));
1515

1616
beforeEach(() => {
17-
fixture = TestBed.createComponent(GridstackComponent);
17+
fixture = TestBed.createComponent(NgGridstackComponent);
1818
component = fixture.componentInstance;
1919
fixture.detectChanges();
2020
});

‎src/app/gridstack/gridstack/gridstack.component.ts renamed to ‎projects/ng-gridstack/src/lib/components/ng-gridstack/ng-gridstack.component.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
import {
55
Component, ChangeDetectionStrategy, ElementRef, Input, ContentChildren, QueryList, Renderer2, OnInit, Output, EventEmitter
66
} from '@angular/core';
7-
import { GridstackItemComponent } from '../gridstack-item/gridstack-item.component';
8-
import { GridstackService } from '../gridstack.service';
7+
import { NgGridstackItemComponent } from '../ng-gridstack-item/ng-gridstack-item.component';
8+
import { NgGridstackService } from '../../services/ng-gridstack.service';
99

1010
@Component({
11-
selector: 'app-gridstack',
12-
templateUrl: './gridstack.component.html',
13-
styleUrls: ['./gridstack.component.scss'],
11+
selector: 'ng-gridstack',
12+
templateUrl: './ng-gridstack.component.html',
13+
styleUrls: ['./ng-gridstack.component.scss'],
1414
changeDetection: ChangeDetectionStrategy.OnPush
1515
})
16-
export class GridstackComponent implements OnInit {
17-
@ContentChildren(GridstackItemComponent) items: QueryList<GridstackItemComponent>;
16+
export class NgGridstackComponent implements OnInit {
17+
@ContentChildren(NgGridstackItemComponent) items: QueryList<NgGridstackItemComponent>;
1818

1919
@Input() options: GridstackOptions;
2020
@Output() change = new EventEmitter<any>();
@@ -25,7 +25,7 @@ export class GridstackComponent implements OnInit {
2525
constructor(
2626
private elementRef: ElementRef,
2727
private renderer: Renderer2,
28-
private gridstackService: GridstackService) {
28+
private gridstackService: NgGridstackService) {
2929
this.element = this.elementRef.nativeElement;
3030
this.renderer.addClass(this.element, 'grid-stack');
3131
}

‎projects/ng-gridstack/src/lib/ng-gridstack.module.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { NgGridstackService } from './services/ng-gridstack.service';
4+
import { NgGridstackItemComponent } from './components/ng-gridstack-item/ng-gridstack-item.component';
5+
import { NgGridstackComponent } from './components/ng-gridstack/ng-gridstack.component';
6+
7+
@NgModule({
8+
declarations: [
9+
NgGridstackComponent,
10+
NgGridstackItemComponent
11+
],
12+
imports: [
13+
CommonModule
14+
],
15+
exports: [
16+
NgGridstackComponent,
17+
NgGridstackItemComponent
18+
],
19+
providers: [
20+
NgGridstackService
21+
]
22+
})
23+
export class NgGridstackModule { }

‎src/app/gridstack/gridstack.service.ts renamed to ‎projects/ng-gridstack/src/lib/services/ng-gridstack.service.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
import { Injectable } from '@angular/core';
55

66
@Injectable()
7-
export class GridstackService {
7+
export class NgGridstackService {
88
grid: GridStack;
99
}

‎projects/ng-gridstack/src/public-api.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Public API Surface of ng-gridstack
3+
*/
4+
5+
export * from './lib/ng-gridstack.module';
6+
7+
// Components
8+
9+
export * from './lib/components/ng-gridstack/ng-gridstack.component';
10+
export * from './lib/components/ng-gridstack-item/ng-gridstack-item.component';

‎projects/ng-gridstack/src/test.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
2+
3+
import 'zone.js/dist/zone';
4+
import 'zone.js/dist/zone-testing';
5+
import { getTestBed } from '@angular/core/testing';
6+
import {
7+
BrowserDynamicTestingModule,
8+
platformBrowserDynamicTesting
9+
} from '@angular/platform-browser-dynamic/testing';
10+
11+
declare const require: any;
12+
13+
// First, initialize the Angular testing environment.
14+
getTestBed().initTestEnvironment(
15+
BrowserDynamicTestingModule,
16+
platformBrowserDynamicTesting()
17+
);
18+
// Then we find all the tests.
19+
const context = require.context('./', true, /\.spec\.ts$/);
20+
// And load the modules.
21+
context.keys().map(context);

‎projects/ng-gridstack/tsconfig.lib.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../../out-tsc/lib",
5+
"target": "es2015",
6+
"declaration": true,
7+
"inlineSources": true,
8+
"types": [],
9+
"lib": [
10+
"dom",
11+
"es2018"
12+
]
13+
},
14+
"angularCompilerOptions": {
15+
"annotateForClosureCompiler": true,
16+
"skipTemplateCodegen": true,
17+
"strictMetadataEmit": true,
18+
"fullTemplateTypeCheck": true,
19+
"strictInjectionParameters": true,
20+
"enableResourceInlining": true
21+
},
22+
"exclude": [
23+
"src/test.ts",
24+
"**/*.spec.ts"
25+
]
26+
}

‎projects/ng-gridstack/tsconfig.spec.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../../out-tsc/spec",
5+
"types": [
6+
"jasmine",
7+
"node"
8+
]
9+
},
10+
"files": [
11+
"src/test.ts"
12+
],
13+
"include": [
14+
"**/*.spec.ts",
15+
"**/*.d.ts"
16+
]
17+
}

‎projects/ng-gridstack/tslint.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"extends": "../../tslint.json",
3+
"rules": {
4+
"directive-selector": [
5+
true,
6+
"attribute",
7+
"ng",
8+
"camelCase"
9+
],
10+
"component-selector": [
11+
true,
12+
"element",
13+
"ng",
14+
"kebab-case"
15+
]
16+
}
17+
}

‎src/app/app.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div>
2-
<app-gridstack [options]="options">
3-
<app-gridstack-item *ngFor="let item of items; index as index" [x]="item.x" [y]="item.y" [width]="item.width" [height]="item.height" [id]="item.id">
2+
<ng-gridstack [options]="options">
3+
<ng-gridstack-item *ngFor="let item of items; index as index" [x]="item.x" [y]="item.y" [width]="item.width" [height]="item.height" [id]="item.id">
44
Id: {{item.id}}
5-
</app-gridstack-item>
6-
</app-gridstack>
5+
</ng-gridstack-item>
6+
</ng-gridstack>
77
</div>

0 commit comments

Comments
 (0)