diff --git a/demo-app/src/app/app.component.html b/demo-app/src/app/app.component.html
index 1fec45a6..711f52ba 100644
--- a/demo-app/src/app/app.component.html
+++ b/demo-app/src/app/app.component.html
@@ -2,6 +2,7 @@
diff --git a/demo-app/yarn.lock b/demo-app/yarn.lock
index 6c7f846c..0fed6feb 100644
--- a/demo-app/yarn.lock
+++ b/demo-app/yarn.lock
@@ -163,21 +163,17 @@
version "2.5.45"
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.45.tgz#58928a621d014ce6ab59c5a9c41071f7328b0ca9"
-"@types/jquery@*":
- version "2.0.46"
- resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.46.tgz#c245426299b43c4bb75f44b813090bd5918d00f2"
-
-"@types/jquery@^2.0.47":
- version "2.0.48"
- resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.48.tgz#3e90d8cde2d29015e5583017f7830cb3975b2eef"
+"@types/jquery@*", "@types/jquery@^3.2.12":
+ version "3.2.12"
+ resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.12.tgz#f496823108c3874c97c9a822e675a3926ee64b46"
"@types/marked@0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.3.0.tgz#583c223dd33385a1dda01aaf77b0cd0411c4b524"
-"@types/materialize-css@0.98.0":
- version "0.98.0"
- resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.98.0.tgz#8d514647c1d92e2bc5ec7aea0c1f13c408be61e5"
+"@types/materialize-css@^0.100.0":
+ version "0.100.0"
+ resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.100.0.tgz#2b311b2ca273d6fd689609ab8e8d932966f8f45c"
dependencies:
"@types/jquery" "*"
"@types/pickadate" "*"
@@ -2288,7 +2284,7 @@ gulplog@^1.0.0:
dependencies:
glogg "^1.0.0"
-hammerjs@^2.0.4:
+hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
@@ -2986,11 +2982,7 @@ jquery-mousewheel@>=3.0.6:
version "3.1.13"
resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
-jquery@^2.1.4:
- version "2.2.4"
- resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"
-
-jquery@^3.0.0:
+jquery@^3.0.0, "jquery@^3.0.0 || ^2.1.4":
version "3.2.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
@@ -3509,13 +3501,12 @@ matcher-collection@^1.0.0:
dependencies:
minimatch "^3.0.2"
-materialize-css@0.98.2:
- version "0.98.2"
- resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.98.2.tgz#f9e4239fd27e2a917a0de379d74d508e2d92ec8e"
+materialize-css@^0.100.2:
+ version "0.100.2"
+ resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.100.2.tgz#9ca32b24904c9a04491fc7d0a2e9402e7b1dae07"
dependencies:
- hammerjs "^2.0.4"
- jquery "^2.1.4"
- node-archiver "^0.3.0"
+ hammerjs "^2.0.8"
+ jquery "^3.0.0 || ^2.1.4"
math-expression-evaluator@^1.2.14:
version "1.2.17"
@@ -3701,11 +3692,11 @@ ng2-markdown-to-html@^1.3.1:
prismjs "^1.6.0"
"ng2-materialize@file:../":
- version "1.5.2-beta.0"
+ version "1.5.3-beta.0"
dependencies:
- "@types/jquery" "^2.0.47"
- "@types/materialize-css" "0.98.0"
- materialize-css "0.98.2"
+ "@types/jquery" "^3.2.12"
+ "@types/materialize-css" "^0.100.0"
+ materialize-css "^0.100.2"
ngx-malihu-scrollbar@^1.2.1:
version "1.2.1"
@@ -3721,13 +3712,6 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
-node-archiver@^0.3.0:
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/node-archiver/-/node-archiver-0.3.0.tgz#b9f1afe5006d0bdf29260181833a070978bc6947"
- dependencies:
- fstream "^1.0.10"
- tar "^2.2.1"
-
node-gyp@^3.3.1:
version "3.6.2"
resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
diff --git a/karma.conf.js b/karma.conf.js
index f1831932..eb8e4652 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -20,7 +20,7 @@ module.exports = function (config) {
},
files: [
'./node_modules/jquery/dist/jquery.js',
- './node_modules/materialize-css/bin/materialize.js',
+ './node_modules/materialize-css/dist/js/materialize.js',
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
diff --git a/package.json b/package.json
index 51a31649..c03d8ea9 100644
--- a/package.json
+++ b/package.json
@@ -36,9 +36,9 @@
"heroku-postbuild": "cd demo-app && yarn install && yarn run build:prod"
},
"dependencies": {
- "@types/jquery": "^2.0.47",
- "@types/materialize-css": "0.98.0",
- "materialize-css": "0.98.2"
+ "@types/jquery": "^3.2.12",
+ "@types/materialize-css": "^0.100.0",
+ "materialize-css": "^0.100.2"
},
"devDependencies": {
"@angular/animations": "^4.0.0",
diff --git a/src/app/select/select-container/select-container.component.scss b/src/app/select/select-container/select-container.component.scss
index c9ea98f9..7f8ba0da 100644
--- a/src/app/select/select-container/select-container.component.scss
+++ b/src/app/select/select-container/select-container.component.scss
@@ -1,4 +1,10 @@
.input-field:not(.inline) {
// fix unwanted space under the input-field when error-message is not shown
display: block;
-}
\ No newline at end of file
+}
+
+// workaround for materialize bug: multiple select options are not aligned
+// https://github.com/Dogfalo/materialize/issues/5083#issue-248489869
+#{'/deep/'} .input-field .dropdown-content [type="checkbox"]+label {
+ top: -11px;
+}
diff --git a/src/app/select/select.directive.ts b/src/app/select/select.directive.ts
index 533c6caf..af0cdaaa 100644
--- a/src/app/select/select.directive.ts
+++ b/src/app/select/select.directive.ts
@@ -128,7 +128,7 @@ export class MzSelectDirective extends HandlePropChanges implements OnInit, OnDe
}
handleDOMEvents() {
- this.inputElement.on('blur focus', (event: BaseJQueryEventObject) => {
+ this.inputElement.on('blur focus', (event: JQuery.Event) => {
this.selectElement[0].dispatchEvent(new Event(event.type));
});
}
diff --git a/src/app/sidenav/sidenav.component.html b/src/app/sidenav/sidenav.component.html
index 55dfab01..e9f02cf5 100644
--- a/src/app/sidenav/sidenav.component.html
+++ b/src/app/sidenav/sidenav.component.html
@@ -1,7 +1,5 @@
-
\ No newline at end of file
diff --git a/src/app/sidenav/sidenav.component.ts b/src/app/sidenav/sidenav.component.ts
index a26aeb96..2453596e 100644
--- a/src/app/sidenav/sidenav.component.ts
+++ b/src/app/sidenav/sidenav.component.ts
@@ -6,13 +6,13 @@ import {
OnDestroy,
OnInit,
Renderer,
- ViewChild } from '@angular/core';
+} from '@angular/core';
@Component({
selector: 'mz-sidenav',
templateUrl: './sidenav.component.html',
})
-export class MzSidenavComponent implements AfterViewInit, OnDestroy, OnInit {
+export class MzSidenavComponent implements AfterViewInit, OnDestroy {
@Input() backgroundClass: string;
@Input() closeOnClick: boolean;
@Input() collapseButtonId: string;
@@ -21,29 +21,18 @@ export class MzSidenavComponent implements AfterViewInit, OnDestroy, OnInit {
@Input() id: string;
@Input() width: number;
- @ViewChild('sidenav') sideNav: ElementRef;
-
- closeOnClickListeners: Function[];
-
constructor(private renderer: Renderer) { }
- ngOnInit(): void {
- this.closeOnClickListeners = [];
- }
-
- ngAfterViewInit(): void {
+ ngAfterViewInit() {
this.initCollapseButton();
this.initCollapsibleLinks();
- this.fixCloseOnClick();
}
- ngOnDestroy(): void {
+ ngOnDestroy() {
$(`#${this.collapseButtonId}`).sideNav('destroy');
- this.closeOnClickListeners.forEach(listener => listener());
}
- initCollapseButton(): void {
-
+ initCollapseButton() {
if (!this.collapseButtonId) {
return;
}
@@ -66,24 +55,8 @@ export class MzSidenavComponent implements AfterViewInit, OnDestroy, OnInit {
});
}
- initCollapsibleLinks(): void {
+ initCollapsibleLinks() {
// Initialize collapsible elements
$('.collapsible').collapsible();
}
-
- fixCloseOnClick() {
- // Fix side navigation closeOnClick for non-collapsible links
- // issue: https://github.com/Dogfalo/materialize/issues/2520
- // workaround: https://github.com/Dogfalo/materialize/issues/1426
- $(this.sideNav.nativeElement)
- .find('li a:not(.collapsible-header)')
- .each((index: number, link: Element) => {
- const listener = this.renderer.listen(link, 'click', (element: JQueryEventObject) => {
- if ($(window).width() < 992) {
- $(`#${this.collapseButtonId}`).sideNav('hide');
- }
- });
- this.closeOnClickListeners.push(listener);
- });
- }
}
diff --git a/src/app/sidenav/sidenav.component.unit.spec.ts b/src/app/sidenav/sidenav.component.unit.spec.ts
index fbd8ee1e..4ad53d08 100644
--- a/src/app/sidenav/sidenav.component.unit.spec.ts
+++ b/src/app/sidenav/sidenav.component.unit.spec.ts
@@ -39,32 +39,17 @@ describe('MzSidenavComponent:unit', () => {
expect(component).toBeTruthy();
});
- describe('ngOnInit', () => {
-
- it('should initilize closeOnClickLister property', () => {
-
- component.closeOnClickListeners = undefined;
-
- component.ngOnInit();
-
- expect(component.closeOnClickListeners).toBeDefined();
- expect(component.closeOnClickListeners.length).toBe(0);
- });
- });
-
describe('ngAfterViewInit', () => {
it('should call init functions', () => {
spyOn(component, 'initCollapseButton');
spyOn(component, 'initCollapsibleLinks');
- spyOn(component, 'fixCloseOnClick');
component.ngAfterViewInit();
expect(component.initCollapseButton).toHaveBeenCalled();
expect(component.initCollapsibleLinks).toHaveBeenCalled();
- expect(component.fixCloseOnClick).toHaveBeenCalled();
});
});
@@ -91,21 +76,6 @@ describe('MzSidenavComponent:unit', () => {
expect(mockCollapseButton.sideNav).toHaveBeenCalledWith('destroy');
});
-
- it('should remove closeOnClick listeners', () => {
-
- const spyListeners = jasmine.createSpyObj('spyListeners', ['method1', 'method2', 'method3']);
-
- Object.keys(spyListeners).forEach(listener => {
- component.closeOnClickListeners.push(spyListeners[listener]);
- });
-
- component.ngOnDestroy();
-
- Object.keys(spyListeners).forEach(listener => {
- expect(spyListeners[listener]).toHaveBeenCalled();
- });
- });
});
describe('initCollapseButton', () => {
@@ -234,116 +204,4 @@ describe('MzSidenavComponent:unit', () => {
expect(mockCollapsible.collapsible).toHaveBeenCalled();
});
});
-
- describe('fixCloseOnClick', () => {
-
- function createSidenavLink(collapsible?: boolean): void {
- const link = document.createElement('a');
- if (collapsible) {
- link.classList.add('collapsible-header');
- }
- const header = document.createElement('li');
- header.appendChild(link);
- $(fixture.nativeElement).find('.side-nav').append(header);
- }
-
- describe('non-collapsible link', () => {
- let renderedLink: HTMLElement;
- const mockCollapseButton = { sideNav: (method: string) => {} };
- const mockWindow = { width: () => 0 };
-
- beforeEach(() => {
-
- createCollapseButton(collapseButtonId);
- component.collapseButtonId = collapseButtonId;
-
- createSidenavLink();
-
- component.fixCloseOnClick();
-
- renderedLink = $(fixture.nativeElement).find('li a')[0];
-
- spyOn(mockCollapseButton, 'sideNav');
-
- spyOn(window, '$').and.callFake((selector: string): any => {
- return selector === `#${collapseButtonId}`
- ? mockCollapseButton
- : mockWindow;
- });
- });
-
- it('should hide sidenav on click when screen width < 992px', () => {
-
- spyOn(mockWindow, 'width').and.returnValue(991);
-
- renderedLink.click();
-
- expect(mockCollapseButton.sideNav).toHaveBeenCalledWith('hide');
- });
-
- it('should not hide sidenav on click when screen width >= 992px', () => {
-
- spyOn(mockWindow, 'width').and.returnValue(992);
-
- renderedLink.click();
-
- expect(mockCollapseButton.sideNav).not.toHaveBeenCalled();
- });
-
- it('should keep track of listeners', () => {
-
- expect(component.closeOnClickListeners.length).toBe(1);
- });
- });
-
- describe('collapsible link', () => {
-
- let renderedLink: HTMLElement;
- const mockCollapseButton = { sideNav: (method: string) => {} };
- const mockWindow = { width: () => 0 };
-
- beforeEach(() => {
-
- createCollapseButton(collapseButtonId);
- component.collapseButtonId = collapseButtonId;
-
- createSidenavLink(true);
-
- component.fixCloseOnClick();
-
- renderedLink = $(fixture.nativeElement).find('li a')[0];
-
- spyOn(mockCollapseButton, 'sideNav');
-
- spyOn(window, '$').and.callFake((selector: string): any => {
- return selector === `#${collapseButtonId}`
- ? mockCollapseButton
- : mockWindow;
- });
- });
-
- it('should not hide sidenav when screen width < 992px', () => {
-
- spyOn(mockWindow, 'width').and.returnValue(991);
-
- renderedLink.click();
-
- expect(mockCollapseButton.sideNav).not.toHaveBeenCalled();
- });
-
- it('should not hide sidenav when screen width >= 992px', () => {
-
- spyOn(mockWindow, 'width').and.returnValue(992);
-
- renderedLink.click();
-
- expect(mockCollapseButton.sideNav).not.toHaveBeenCalled();
- });
-
- it('should not keep track of listeners', () => {
-
- expect(component.closeOnClickListeners.length).toBe(0);
- });
- });
- });
});
diff --git a/yarn.lock b/yarn.lock
index b4feefcd..c8054316 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -163,13 +163,13 @@
version "2.5.45"
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.45.tgz#58928a621d014ce6ab59c5a9c41071f7328b0ca9"
-"@types/jquery@*", "@types/jquery@^2.0.47":
- version "2.0.47"
- resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.47.tgz#9665a157519dd48d259f94ac670d332a56561c00"
+"@types/jquery@*", "@types/jquery@^3.2.12":
+ version "3.2.12"
+ resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.2.12.tgz#f496823108c3874c97c9a822e675a3926ee64b46"
-"@types/materialize-css@0.98.0":
- version "0.98.0"
- resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.98.0.tgz#8d514647c1d92e2bc5ec7aea0c1f13c408be61e5"
+"@types/materialize-css@^0.100.0":
+ version "0.100.0"
+ resolved "https://registry.yarnpkg.com/@types/materialize-css/-/materialize-css-0.100.0.tgz#2b311b2ca273d6fd689609ab8e8d932966f8f45c"
dependencies:
"@types/jquery" "*"
"@types/pickadate" "*"
@@ -2191,7 +2191,7 @@ gulplog@^1.0.0:
dependencies:
glogg "^1.0.0"
-hammerjs@^2.0.4:
+hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
@@ -2817,9 +2817,9 @@ jasminewd2@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.1.0.tgz#da595275d1ae631de736ac0a7c7d85c9f73ef652"
-jquery@^2.1.4:
- version "2.2.4"
- resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02"
+"jquery@^3.0.0 || ^2.1.4":
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9:
version "2.1.9"
@@ -3295,13 +3295,12 @@ matcher-collection@^1.0.0:
dependencies:
minimatch "^3.0.2"
-materialize-css@0.98.2:
- version "0.98.2"
- resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.98.2.tgz#f9e4239fd27e2a917a0de379d74d508e2d92ec8e"
+materialize-css@^0.100.2:
+ version "0.100.2"
+ resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.100.2.tgz#9ca32b24904c9a04491fc7d0a2e9402e7b1dae07"
dependencies:
- hammerjs "^2.0.4"
- jquery "^2.1.4"
- node-archiver "^0.3.0"
+ hammerjs "^2.0.8"
+ jquery "^3.0.0 || ^2.1.4"
math-expression-evaluator@^1.2.14:
version "1.2.17"
@@ -3486,13 +3485,6 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
-node-archiver@^0.3.0:
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/node-archiver/-/node-archiver-0.3.0.tgz#b9f1afe5006d0bdf29260181833a070978bc6947"
- dependencies:
- fstream "^1.0.10"
- tar "^2.2.1"
-
node-gyp@^3.3.1:
version "3.6.2"
resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"