feat: allow to customise clear icon

fixes #835
ng-select · Nov 6, 2018 · 3e8ad77 · 3e8ad77
1 parent 75f614a
commit 3e8ad77
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 44 deletions.
diff --git a/src/ng-select/ng-select.component.scss b/src/ng-select/ng-select.component.scss
@@ -149,6 +149,7 @@
             display: inline-block;
             font-size: 18px;
             line-height: 1;
+            pointer-events: none;
         }
     }
     .ng-spinner-loader {

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -1,38 +1,16 @@
-import {
-    async,
-    ComponentFixture,
-    discardPeriodicTasks,
-    fakeAsync,
-    TestBed,
-    tick
-} from '@angular/core/testing';
+import { async, ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-    Component,
-    DebugElement,
-    ErrorHandler,
-    NgZone,
-    Type,
-    ViewChild, ViewEncapsulation
-} from '@angular/core';
+import { Component, DebugElement, ErrorHandler, NgZone, Type, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ConsoleService } from './console.service';
 import { FormsModule } from '@angular/forms';
-import {
-    getNgSelectElement,
-    selectOption,
-    TestsErrorHandler,
-    tickAndDetectChanges,
-    triggerKeyDownEvent
-} from '../testing/helpers';
+import { getNgSelectElement, selectOption, TestsErrorHandler, tickAndDetectChanges, triggerKeyDownEvent } from '../testing/helpers';
 import { KeyCode, NgOption } from './ng-select.types';
 import { MockConsole, MockNgWindow, MockNgZone } from '../testing/mocks';
 import { NgSelectComponent } from './ng-select.component';
 import { NgSelectModule } from './ng-select.module';
 import { Subject } from 'rxjs';
 import { WindowService } from './window.service';
 
-
-
 describe('NgSelectComponent', function () {
 
     describe('Data source', () => {
@@ -1057,7 +1035,7 @@ describe('NgSelectComponent', function () {
 
             it('should not open dropdown when isOpen is false', () => {
                 const open = spyOn(select, 'open');
-                select.ngOnChanges(<any>{ isOpen: { currentValue: false }});
+                select.ngOnChanges(<any>{ isOpen: { currentValue: false } });
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
                 expect(select.isOpen).toBeFalsy();
                 expect(open).not.toHaveBeenCalled();
@@ -1995,7 +1973,7 @@ describe('NgSelectComponent', function () {
             });
 
             it('should be false when term exists among selected items', fakeAsync(() => {
-                fixture.componentInstance.selectedCities = [{name: 'Palanga', id: 9}];
+                fixture.componentInstance.selectedCities = [{ name: 'Palanga', id: 9 }];
                 select.filterValue = 'Palanga';
                 select.hideSelected = true;
                 select.isOpen = true;
@@ -2004,7 +1982,7 @@ describe('NgSelectComponent', function () {
             }));
 
             it('should be false when term exists among selected items and select is closed', fakeAsync(() => {
-                fixture.componentInstance.selectedCities = [{name: 'Palanga', id: 9}];
+                fixture.componentInstance.selectedCities = [{ name: 'Palanga', id: 9 }];
                 select.filterValue = 'Palanga';
                 select.hideSelected = false;
                 select.isOpen = false;
@@ -2781,7 +2759,7 @@ describe('NgSelectComponent', function () {
                 tickAndDetectChanges(fixture);
                 triggerMousedown = () => {
                     const control = fixture.debugElement.query(By.css('.ng-select-container'));
-                    control.triggerEventHandler('mousedown', createEvent({ className: 'ng-clear' }));
+                    control.triggerEventHandler('mousedown', createEvent({ className: 'ng-clear-wrapper' }));
                 };
             }));
 
@@ -2864,7 +2842,7 @@ describe('NgSelectComponent', function () {
                 tickAndDetectChanges(fixture);
                 triggerMousedown = () => {
                     const control = fixture.debugElement.query(By.css('.ng-select-container'));
-                    control.triggerEventHandler('mousedown', createEvent({className: 'ng-arrow-wrapper' }));
+                    control.triggerEventHandler('mousedown', createEvent({ className: 'ng-arrow-wrapper' }));
                 };
             }));
 
@@ -3209,7 +3187,7 @@ class NgSelectGroupingTestCmp {
     selectedAccountName = 'Adam';
     selectedAccount = null;
     groupByFn = (item) => item.child.name;
-    groupValueFn = (key, _) => ({ group: key});
+    groupValueFn = (key, _) => ({ group: key });
     accounts = [
         { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States', child: { name: 'c1' } },
         { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States', child: { name: 'c1' } },

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -275,7 +275,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         }
         $event.stopPropagation();
 
-        if (target.className === 'ng-clear') {
+        if (target.className === 'ng-clear-wrapper') {
             this.handleClearClick();
             return;
         }
@@ -603,7 +603,6 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         const select = (val: any) => {
             let item = this.itemsList.findItem(val);
             if (item) {
-                item.mapped = true;
                 this.itemsList.select(item);
             } else {
                 const isValObject = isObject(val);

diff --git a/src/themes/default.theme.scss b/src/themes/default.theme.scss
@@ -3,7 +3,7 @@
 $color-selected: #f5faff;
 .ng-select {
     &.ng-select-opened {
-        >.ng-select-container {
+        > .ng-select-container {
             background: #fff;
             border-color: #b3b3b3 #ccc #d9d9d9;
             &:hover {
@@ -19,26 +19,26 @@ $color-selected: #f5faff;
             }
         }
         &.ng-select-bottom {
-            >.ng-select-container {
+            > .ng-select-container {
                 border-bottom-right-radius: 0;
                 border-bottom-left-radius: 0;
             }
         }
         &.ng-select-top {
-            >.ng-select-container {
+            > .ng-select-container {
                 border-top-right-radius: 0;
                 border-top-left-radius: 0;
             }
         }
     }
     &.ng-select-focused {
-        &:not(.ng-select-opened)>.ng-select-container {
+        &:not(.ng-select-opened) > .ng-select-container {
             border-color: #007eff;
             box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
         }
     }
     &.ng-select-disabled {
-        >.ng-select-container {
+        > .ng-select-container {
             background-color: #f9f9f9;
         }
     }
@@ -85,7 +85,7 @@ $color-selected: #f5faff;
     }
     &.ng-select-multiple {
         &.ng-select-disabled {
-            >.ng-select-container .ng-value-container .ng-value {
+            > .ng-select-container .ng-value-container .ng-value {
                 background-color: #f9f9f9;
                 border: 1px solid #e3e3e3;
                 .ng-value-label {
@@ -169,10 +169,8 @@ $color-selected: #f5faff;
     }
     .ng-clear-wrapper {
         color: #999;
-        .ng-clear {
-            &:hover {
-                color: #D0021B;
-            }
+        &:hover .ng-clear {
+            color: #D0021B;
         }
     }
     .ng-spinner-zone {

diff --git a/src/themes/material.theme.scss b/src/themes/material.theme.scss
@@ -1,6 +1,7 @@
 @import "mixins";
 
-$highlight-color: #3f51b5;
+$highlight-color: #3f51b5 !default;
+
 .ng-select {
     padding-bottom: 1.25em;
     &.ng-select-disabled {