Fix build.

Author: Leo Vo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-treeview",
-  "version": "0.0.6",
+  "version": "1.0.5",
   "license": "MIT",
   "description": "An Angular treeview component with checkbox",
   "scripts": {
@@ -11,8 +11,8 @@
     "test-coverage": "ng test --code-coverage",
     "test-ci": "ng test --watch=false --code-coverage --single-run=true",
     "e2e": "ng e2e",
-    "build:lib": "rimraf dist/lib && ngc -p tsconfig-lib.json && gulp && rollup -c rollup.config.js && copyfiles package.json README.md LICENSE dist/lib",
-    "build:demo": "npm run build:lib && rimraf dist/demo && ng build --app demo --prod",
+    "build:lib": "rimraf dist/lib && ngc -p tsconfig-lib.json && gulp && copyfiles package.json README.md LICENSE dist/lib",
+    "build:demo": "npm run build:lib && rimraf dist/demo && ng build --app demo",
     "build": "rimraf dist && npm run build:demo",
     "pub:demo": "npm run build:demo -- --base-href /ngx-treeview/ && gh-pages -d dist/demo",
     "pub:lib": "npm run build:lib && npm publish dist/lib",
@@ -42,7 +42,7 @@
   },
   "main": "./bundles/ngx-treeview.umd.js",
   "module": "./src/index.js",
-  "jsnext:main": "src/index.js",
+  "jsnext:main": "./src/index.js",
   "typings": "./src/index.d.ts",
   "private": false,
   "peerDependencies": {

rollup.config.js

@@ -2,7 +2,7 @@ export default {
     entry: 'dist/lib/src/index.js',
     dest: 'dist/lib/bundles/ngx-treeview.umd.js',
     sourceMap: true,
-    format: 'umd',
+    format: 'iife',
     onwarn: function (warning) {
         // Skip certain warnings
 
@@ -20,9 +20,9 @@ export default {
         'lodash'
     ],
     globals: {
-        '@angular/common': 'ng.common',
-        '@angular/core': 'ng.core',
-        '@angular/forms': 'ng.forms',
+        '@angular/common': '_angular_common',
+        '@angular/core': '_angular_core',
+        '@angular/forms': 'angular_form',
         'lodash': 'lodash'
     }
 }

src/lib/dropdown-treeview.component.spec.ts

@@ -42,8 +42,9 @@ const createTestComponent = (html: string) =>
 
 describe('DropdownTreeviewComponent', () => {
     // tslint:disable-next-line:max-line-length
-    const template = '<ngx-dropdown-treeview [items]="items" [config]="config" (selectedChange)="selectedChange($event)"></ngx-dropdown-treeview>';
+    const template = '<ngx-dropdown-treeview [items]="items" (selectedChange)="selectedChange($event)"></ngx-dropdown-treeview>';
     let spy: jasmine.Spy;
+    let button: DebugElement;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -66,24 +67,26 @@ describe('DropdownTreeviewComponent', () => {
         spy = spyOn(fakeData, 'selectedChange');
     });
 
+    beforeEach(fakeAsync(() => {
+        spy.calls.reset();
+        fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
+        const fixture = createTestComponent(template);
+        fixture.detectChanges();
+        tick();
+        button = fixture.debugElement.query(By.css('button'));
+    }));
+
     it('should initialize with default config', () => {
         const defaultConfig = new TreeviewConfig();
         const component = TestBed.createComponent(DropdownTreeviewComponent).componentInstance;
         expect(component.config).toEqual(defaultConfig);
     });
 
-    describe('selectedChange', () => {
-        beforeEach(fakeAsync(() => {
-            spy.calls.reset();
-            fakeData.config = new TreeviewConfig();
-            fakeData.items = [new TreeviewItem({ text: '1', value: 1 })];
-            const fixture = createTestComponent(template);
-            fixture.detectChanges();
-            tick();
-        }));
+    it('should raise event selectedChange when initializing', () => {
+        expect(spy.calls.any()).toBeTruthy();
+    });
 
-        it('should raise event selectedChange', () => {
-            expect(spy.calls.any()).toBeTruthy();
-        });
+    it('should display button text "All"', () => {
+        expect(button.nativeElement).toHaveTrimmedText('All');
     });
 });

src/lib/treeview.component.html

@@ -9,31 +9,31 @@
         </label>
     </div>
 </ng-template>
-<div [ngSwitch]="hasFilterItems">
-    <div *ngSwitchCase="true" class="treeview-header">
-        <div *ngIf="config.isShowFilter" class="row">
-            <div class="col-12">
-                <input class="form-control" type="text" [placeholder]="i18n.filterPlaceholder()" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange()"
-                />
-            </div>
+<div class="treeview-header">
+    <div *ngIf="config.isShowFilter" class="row">
+        <div class="col-12">
+            <input class="form-control" type="text" [placeholder]="i18n.filterPlaceholder()" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange()"
+            />
         </div>
-        <div *ngIf="hasFilterItems">
-            <div *ngIf="config.isShowAllCheckBox || config.isShowCollapseExpand" class="row">
-                <div class="col-12" [class.row-margin]="config.isShowFilter && (config.isShowAllCheckBox || config.isShowCollapseExpand)">
-                    <label *ngIf="config.isShowAllCheckBox" class="form-check-label label-item-all">
+    </div>
+    <div *ngIf="hasFilterItems">
+        <div *ngIf="config.isShowAllCheckBox || config.isShowCollapseExpand" class="row">
+            <div class="col-12" [class.row-margin]="config.isShowFilter && (config.isShowAllCheckBox || config.isShowCollapseExpand)">
+                <label *ngIf="config.isShowAllCheckBox" class="form-check-label label-item-all">
                     <input type="checkbox" class="form-check-input"
                         [(ngModel)]="allItem.checked" (ngModelChange)="onAllCheckedChange($event)" />
                         {{i18n.allCheckboxText()}}
                 </label>
-                    <label *ngIf="config.isShowCollapseExpand" class="pull-right label-collapse-expand" (click)="toggleCollapseExpand()">
+                <label *ngIf="config.isShowCollapseExpand" class="pull-right label-collapse-expand" (click)="toggleCollapseExpand()">
                     <i [title]="i18n.tooltipCollapseExpand(allItem.collapsed)" aria-hidden="true"
                         class="fa" [class.fa-expand]="allItem.collapsed" [class.fa-compress]="!allItem.collapsed"></i>
                 </label>
-                </div>
             </div>
-            <div *ngIf="config.isShowFilter || config.isShowAllCheckBox || config.isShowCollapseExpand" class="divider"></div>
         </div>
+        <div *ngIf="config.isShowFilter || config.isShowAllCheckBox || config.isShowCollapseExpand" class="divider"></div>
     </div>
+</div>
+<div [ngSwitch]="hasFilterItems">
     <div *ngSwitchCase="true" class="treeview-container" [style.max-height.px]="maxHeight">
         <ngx-treeview-item *ngFor="let item of filterItems" [item]="item" [template]="template || tpl" (checkedChange)="onItemCheckedChange(item, $event)">
         </ngx-treeview-item>

src/lib/treeview.component.spec.ts

@@ -694,6 +694,11 @@ describe('TreeviewComponent', () => {
                 tick();
             }));
 
+            it('should display filter', () => {
+                const filterInput = fixture.debugElement.query(By.css('input[type="text"]'));
+                expect(filterInput).not.toBeNull();
+            });
+
             it('should not display any items', () => {
                 const texts = queryItemTexts(fixture.debugElement);
                 expect(texts).toEqual([]);
@@ -702,7 +707,7 @@ describe('TreeviewComponent', () => {
             it('should display a text "No items found"', () => {
                 const textElement = fixture.debugElement.query(By.css('.treeview-text'));
                 expect(textElement.nativeElement.textContent.trim()).toBe('No items found');
-            })
+            });
         });
     });
 });

src/testing/jasmine-matchers.ts

@@ -48,6 +48,8 @@ export interface NgMatchers extends jasmine.Matchers {
      */
     toHaveText(expected: string): boolean;
 
+    toHaveTrimmedText(expected: string): boolean;
+
     /**
      * Expect the element to have the given CSS class.
      *
@@ -173,6 +175,18 @@ _global.beforeEach(function () {
             };
         },
 
+        toHaveTrimmedText: function () {
+            return {
+                compare: function (actual: any, expectedText: string) {
+                    const actualText = elementText(actual).trim();
+                    return {
+                        pass: actualText === expectedText,
+                        get message() { return 'Expected ' + actualText + ' to be equal to ' + expectedText; }
+                    };
+                }
+            };
+        },
+
         toHaveCssClass: function () {
             return { compare: buildError(false), negativeCompare: buildError(true) };
 

tsconfig-lib.json

@@ -23,6 +23,6 @@
     ],
     "angularCompilerOptions": {
         "skipTemplateCodegen": true,
-        "skipMetadataEmit": true
+        "strictMetadataEmit": true
     }
 }