Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/Harvest-Dev/ng-select2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zefling
Zefling committed Mar 4, 2024
2 parents de58ecf + 1765a45 commit c89b599
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 20 deletions.
10 changes: 8 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class MainModule {}
| `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance | with `ngx-infinite-scroll` |
| `infiniteScrollThrottle` | `number` | | `150` | infiniteScroll throttle | |
| `overlay` | `boolean` | | `false` | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay)) | |
| `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'` | | `'default'` | change style for material style or remove border and background color | |
| `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'`<br>`'borderless'` | | `'default'` | change style for material style or remove border and background color | |
| `templates` | `TemplateRef`<br>`{option?: TemplateRef, group?: TemplateRef}`<br>`{templateId1: TemplateRef, ...}` | | | use templates for formatting content (see [Templating](#templating)) | |
| `noLabelTemplate` | `boolean` | | `false` | do not use the template in the selection, stay in text mode | |
| `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search | |
Expand All @@ -109,7 +109,7 @@ class MainModule {}
| `(blur)` | `(event: Select2) => void` | event | | triggered when user leaves the component | |
| `(search)` | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) => void` | event | | triggered when search text changed | with `customSearchEnabled` |
| `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | event | | triggered when infiniteScroll is on `up` or `down` position | with `ngx-infinite-scroll` |
| `(removeOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | triggered when an option is removed from the list of selected options options list | with `multiple` |
| `(removeOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | triggered when an option is removed from the list of selected options options list | with `multiple` |
| `(autoCreateItem)` | `(event: `[`Select2AutoCreateEvent`](#select2-data-structure)`) => void` | event | | triggered when a new item has been added | with `autoCreate` |

### select2 data structure
Expand Down Expand Up @@ -332,6 +332,12 @@ It's possible to change different colors (and more) with CSS variables without h
/* dropdown panel */
--select2-dropdown-background: #fff;
--select2-dropdown-border-color: #aaa;
--select2-dropdown-above-border-bottom: none;
--select2-dropdown-above-border-bottom-left-radius: 0;
--select2-dropdown-above-border-bottom-right-radius: 0;
--select2-dropdown-below-border-top: none;
--select2-dropdown-below-border-top-left-radius: 0;
--select2-dropdown-below-border-top-right-radius: 0;

/* overlay */
--select2-overlay-backdrop: transparent;
Expand Down
1 change: 1 addition & 0 deletions projects/ng-select2-component/src/lib/select2.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@
[class.select2-container--open]="isOpen"
[class.select2-overlay]="overlay"
[class.select2-position-auto]="listPosition === 'auto'"
[class.select2-style-borderless]="styleMode === 'borderless'"
>
<div
#dropdown
Expand Down
73 changes: 56 additions & 17 deletions projects/ng-select2-component/src/lib/select2.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,18 +139,18 @@
}

.select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: var(--select2-dropdown-above-border-bottom, none);
border-bottom-left-radius: var(--select2-dropdown-above-border-bottom-left-radius, 0);
border-bottom-right-radius: var(--select2-dropdown-above-border-bottom-right-radius, 0);
bottom: 27px;
display: flex;
flex-direction: column-reverse;
}

.select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: var(--select2-dropdown-below-border-top, none);
border-top-left-radius: var(--select2-dropdown-below-border-top-left-radius, 0);
border-top-right-radius: var(--select2-dropdown-below-border-top-right-radius, 0);
}
}

Expand Down Expand Up @@ -488,24 +488,50 @@
font-style: var(--select2-too-much-font-style, italic);
}

:host.nostyle {
.select2-dropdown {
border-color: transparent;
}
:host {
&.nostyle {
.select2-dropdown {
border-color: transparent;
}

.select2-selection--single,
.select2-selection--multiple {
background: transparent;
border-color: transparent;
.select2-selection--single,
.select2-selection--multiple {
background: transparent;
border-color: transparent;
}

.select2-container--default .select2-focused,
.select2-container--default:not(.select2-container--open) .select2-focused {
.select2-selection--single,
.select2-selection--multiple {
background: transparent;
border-color: transparent;
}
}
}

.select2-container--default .select2-focused,
.select2-container--default:not(.select2-container--open) .select2-focused {
&.borderless {
--select2-dropdown-above-border-bottom: 1px solid var(--select2-dropdown-border-color, #aaa);
--select2-dropdown-above-border-bottom-left-radius: var(--select2-selection-border-radius, 4px);
--select2-dropdown-above-border-bottom-right-radius: var(--select2-selection-border-radius, 4px);
--select2-dropdown-below-border-top: 1px solid var(--select2-dropdown-border-color, #aaa);
--select2-dropdown-below-border-top-left-radius: var(--select2-selection-border-radius, 4px);
--select2-dropdown-below-border-top-right-radius: var(--select2-selection-border-radius, 4px);

.select2-selection--single,
.select2-selection--multiple {
background: transparent;
border-color: transparent;
}

.select2-container--default .select2-focused,
.select2-container--default:not(.select2-container--open) .select2-focused {
.select2-selection--single,
.select2-selection--multiple {
background: transparent;
border-color: transparent;
}
}
}
}

Expand Down Expand Up @@ -594,7 +620,9 @@
.select2-focused {
.select2-selection--single::after,
.select2-selection--multiple::after {
transition: width 0.3s cubic-bezier(0.12, 1, 0.77, 1), left 0.3s cubic-bezier(0.12, 1, 0.77, 1);
transition:
width 0.3s cubic-bezier(0.12, 1, 0.77, 1),
left 0.3s cubic-bezier(0.12, 1, 0.77, 1);
width: 100%;
left: 0%;
}
Expand Down Expand Up @@ -659,10 +687,12 @@
.select2-overlay-backdrop {
background: var(--select2-overlay-backdrop, transparent);
}

.cdk-overlay-container {
.select2-container .select2-dropdown.select2-dropdown--above {
bottom: 28px;
}

.select2-container--open.select2-position-auto .select2-dropdown {
margin-bottom: 28px;
&.select2-dropdown--above {
Expand All @@ -671,6 +701,15 @@
margin-top: 28px;
}
}

.select2-style-borderless {
--select2-dropdown-above-border-bottom: 1px solid var(--select2-dropdown-border-color, #aaa);
--select2-dropdown-above-border-bottom-left-radius: var(--select2-selection-border-radius, 4px);
--select2-dropdown-above-border-bottom-right-radius: var(--select2-selection-border-radius, 4px);
--select2-dropdown-below-border-top: 1px solid var(--select2-dropdown-border-color, #aaa);
--select2-dropdown-below-border-top-left-radius: var(--select2-selection-border-radius, 4px);
--select2-dropdown-below-border-top-right-radius: var(--select2-selection-border-radius, 4px);
}
}
}

Expand Down
7 changes: 6 additions & 1 deletion projects/ng-select2-component/src/lib/select2.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
overlay = false;

/** use the material style */
@Input() styleMode: 'material' | 'noStyle' | 'default' = 'default';
@Input() styleMode: 'material' | 'noStyle' | 'borderless' | 'default' = 'default';

/** message when no result */
@Input() noResultMessage: string;
Expand Down Expand Up @@ -238,6 +238,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
return this.styleMode === 'noStyle';
}

@HostBinding('class.borderless')
get classBorderless(): boolean {
return this.styleMode === 'borderless';
}

@HostBinding('class.select2-above')
get select2above(): boolean {
return !this.overlay ? this.listPosition === 'above' : this._isAbobeOverlay();
Expand Down

0 comments on commit c89b599

Please sign in to comment.