ng-jvx-multiselect 19.0.35 → 19.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Signal, WritableSignal } from '@angular/core';
1
+ import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, WritableSignal } from '@angular/core';
2
2
  import { NgJvxOptionsTemplateDirective } from './directives/ng-jvx-options-template.directive';
3
3
  import { ControlValueAccessor, NgControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
4
4
  import { NgJvxOptionComponent } from './ng-jvx-option/ng-jvx-option.component';
@@ -12,7 +12,6 @@ import { NgJvxGroupHeaderDirective } from './directives/ng-jvx-group-header.dire
12
12
  import { NgJvxSearchMapper } from './interfaces/ng-jvx-search-mapper';
13
13
  import { NgJvxGroupMapper } from './interfaces/ng-jvx-group-mapper';
14
14
  import { MenuTriggerDirective } from './panel/menu-trigger/menu-trigger.directive';
15
- import { NgJvxMultisectChipComponent } from './chiplist/chip/chip.component';
16
15
  import * as i0 from "@angular/core";
17
16
  export declare class NgJvxMultiselectComponent implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor {
18
17
  private formBuilder;
@@ -24,19 +23,18 @@ export declare class NgJvxMultiselectComponent implements OnInit, OnDestroy, Aft
24
23
  id: string;
25
24
  get invalid(): boolean;
26
25
  get shouldLabelFloat(): boolean;
27
- jvxMultiselect: Signal<ElementRef<any>>;
26
+ jvxMultiselect: import("@angular/core").Signal<ElementRef<any>>;
28
27
  valueContainer: ElementRef;
29
- selectionContainer: Signal<ElementRef<any>>;
30
- menuFooter: Signal<ElementRef<any>>;
28
+ selectionContainer: import("@angular/core").Signal<ElementRef<any>>;
29
+ menuFooter: import("@angular/core").Signal<ElementRef<any>>;
31
30
  trigger: MenuTriggerDirective;
32
31
  scrollbar: NgScrollbar;
33
- multiContainer: Signal<ElementRef<any>>;
32
+ multiContainer: import("@angular/core").Signal<ElementRef<any>>;
34
33
  placeholderContainer: ElementRef;
35
34
  optionComp: QueryList<NgJvxOptionComponent>;
36
35
  optionsTemplate: NgJvxOptionsTemplateDirective | null;
37
36
  selectionTemplate: NgJvxSelectionTemplateDirective | null;
38
37
  groupHeaderTemplate: NgJvxGroupHeaderDirective | null;
39
- chips: Signal<readonly NgJvxMultisectChipComponent[]>;
40
38
  set options(v: any[]);
41
39
  get options(): any[];
42
40
  multi: boolean;
@@ -98,7 +96,7 @@ export declare class NgJvxMultiselectComponent implements OnInit, OnDestroy, Aft
98
96
  yPosition: WritableSignal<'above' | 'below'>;
99
97
  stateChanges: Subject<void>;
100
98
  currentPage: number;
101
- listContainerSize: Signal<{
99
+ listContainerSize: import("@angular/core").Signal<{
102
100
  height: string;
103
101
  minHeight: string;
104
102
  width: string;
@@ -107,7 +105,7 @@ export declare class NgJvxMultiselectComponent implements OnInit, OnDestroy, Aft
107
105
  touched: boolean;
108
106
  placeholder: string;
109
107
  focused: boolean;
110
- multiContainerWidth: Signal<any>;
108
+ multiContainerWidth: import("@angular/core").Signal<any>;
111
109
  private isPlaceholderActiveSubject;
112
110
  private isPlaceholderActive;
113
111
  private searchValueSubject;
@@ -157,5 +155,5 @@ export declare class NgJvxMultiselectComponent implements OnInit, OnDestroy, Aft
157
155
  clickOnOption(option: any): void;
158
156
  select(option: any): void;
159
157
  static ɵfac: i0.ɵɵFactoryDeclaration<NgJvxMultiselectComponent, [null, null, null, null, { optional: true; self: true; }, null]>;
160
- static ɵcmp: i0.ɵɵComponentDeclaration<NgJvxMultiselectComponent, "ng-jvx-multiselect", never, { "options": { "alias": "options"; "required": false; }; "multi": { "alias": "multi"; "required": false; }; "url": { "alias": "url"; "required": false; }; "requestType": { "alias": "requestType"; "required": false; }; "itemValue": { "alias": "itemValue"; "required": false; }; "itemText": { "alias": "itemText"; "required": false; }; "ignorePagination": { "alias": "ignorePagination"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "closeOnClick": { "alias": "closeOnClick"; "required": false; }; "hasErrors": { "alias": "hasErrors"; "required": false; }; "searchMode": { "alias": "searchMode"; "required": false; }; "searchInput": { "alias": "searchInput"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "listProp": { "alias": "listProp"; "required": false; }; "totalRowsProp": { "alias": "totalRowsProp"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "searchProp": { "alias": "searchProp"; "required": false; }; "closeButton": { "alias": "closeButton"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "multiMapper": { "alias": "multiMapper"; "required": false; }; "searchMapper": { "alias": "searchMapper"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "value": { "alias": "value"; "required": false; }; "requestHeaders": { "alias": "requestHeaders"; "required": false; }; "required": { "alias": "required"; "required": false; }; "postPayload": { "alias": "postPayload"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; }, { "valueChange": "valueChange"; "jvxMultiselectOpen": "jvxMultiselectOpen"; "jvxMultiselectOpened": "jvxMultiselectOpened"; "jvxMultiselectClose": "jvxMultiselectClose"; "jvxMultiselectClosed": "jvxMultiselectClosed"; "scrollEnd": "scrollEnd"; }, ["optionsTemplate", "selectionTemplate", "groupHeaderTemplate"], ["*", "[ng-jvx-footer]", "[placeholder]"], false, never>;
158
+ static ɵcmp: i0.ɵɵComponentDeclaration<NgJvxMultiselectComponent, "ng-jvx-multiselect", never, { "options": { "alias": "options"; "required": false; }; "multi": { "alias": "multi"; "required": false; }; "url": { "alias": "url"; "required": false; }; "requestType": { "alias": "requestType"; "required": false; }; "itemValue": { "alias": "itemValue"; "required": false; }; "itemText": { "alias": "itemText"; "required": false; }; "ignorePagination": { "alias": "ignorePagination"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "closeOnClick": { "alias": "closeOnClick"; "required": false; }; "hasErrors": { "alias": "hasErrors"; "required": false; }; "searchMode": { "alias": "searchMode"; "required": false; }; "searchInput": { "alias": "searchInput"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "listProp": { "alias": "listProp"; "required": false; }; "totalRowsProp": { "alias": "totalRowsProp"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "searchProp": { "alias": "searchProp"; "required": false; }; "closeButton": { "alias": "closeButton"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "multiMapper": { "alias": "multiMapper"; "required": false; }; "searchMapper": { "alias": "searchMapper"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "value": { "alias": "value"; "required": false; }; "requestHeaders": { "alias": "requestHeaders"; "required": false; }; "required": { "alias": "required"; "required": false; }; "postPayload": { "alias": "postPayload"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; }, { "valueChange": "valueChange"; "jvxMultiselectOpen": "jvxMultiselectOpen"; "jvxMultiselectOpened": "jvxMultiselectOpened"; "jvxMultiselectClose": "jvxMultiselectClose"; "jvxMultiselectClosed": "jvxMultiselectClosed"; "scrollEnd": "scrollEnd"; }, ["optionsTemplate", "selectionTemplate", "groupHeaderTemplate"], ["*", "[ng-jvx-footer]", "[placeholder]"], true, never>;
161
159
  }
@@ -7,5 +7,5 @@ export declare class NgJvxOptionComponent {
7
7
  isSelected: import("@angular/core").InputSignal<boolean>;
8
8
  constructor();
9
9
  static ɵfac: i0.ɵɵFactoryDeclaration<NgJvxOptionComponent, never>;
10
- static ɵcmp: i0.ɵɵComponentDeclaration<NgJvxOptionComponent, "ng-jvx-option", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; }, { "clickOnOption": "clickOnOption"; }, never, ["*"], false, never>;
10
+ static ɵcmp: i0.ɵɵComponentDeclaration<NgJvxOptionComponent, "ng-jvx-option", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; }, { "clickOnOption": "clickOnOption"; }, never, ["*"], true, never>;
11
11
  }
@@ -21,5 +21,5 @@ export declare class MenuTriggerDirective implements OnDestroy, AfterViewInit {
21
21
  closeMenu(): void;
22
22
  openMenu(): void;
23
23
  static ɵfac: i0.ɵɵFactoryDeclaration<MenuTriggerDirective, never>;
24
- static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTriggerDirective, "[lib-menu-trigger-for], [libMenuTriggerFor]", never, { "libMenuTriggerFor": { "alias": "libMenuTriggerFor"; "required": false; }; }, { "closed": "closed"; "onMenuOpen": "onMenuOpen"; "menuOpened": "menuOpened"; "onMenuClose": "onMenuClose"; "menuClosed": "menuClosed"; }, never, never, false, never>;
24
+ static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTriggerDirective, "[lib-menu-trigger-for], [libMenuTriggerFor]", never, { "libMenuTriggerFor": { "alias": "libMenuTriggerFor"; "required": false; }; }, { "closed": "closed"; "onMenuOpen": "onMenuOpen"; "menuOpened": "menuOpened"; "onMenuClose": "onMenuClose"; "menuClosed": "menuClosed"; }, never, never, true, never>;
25
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-jvx-multiselect",
3
- "version": "19.0.35",
3
+ "version": "19.0.36",
4
4
  "license": "MIT",
5
5
  "description": "ng-jvx-multiselect is a select for angular projects. It handles both single and multiple selections and allows to retrieves the options via asynchronous calls.",
6
6
  "exports": {
package/public-api.d.ts CHANGED
@@ -5,7 +5,6 @@ export * from './lib/directives/ng-jvx-group-header.directive';
5
5
  export * from './lib/directives/ng-jvx-disabled-option.directive';
6
6
  export * from './lib/ng-jvx-multiselect.service';
7
7
  export * from './lib/ng-jvx-multiselect.component';
8
- export * from './lib/ng-jvx-multiselect.module';
9
8
  export * from './lib/interfaces/ng-jvx-option-mapper';
10
9
  export * from './lib/interfaces/ng-jvx-search-mapper';
11
10
  export * from './lib/interfaces/ng-jvx-group-mapper';
@@ -1,32 +1,32 @@
1
- ng-jvx-multiselect-chip{
2
- > div{
3
- padding: 0 .2rem;
4
- height: 1.8rem;
5
- font-size: 1rem;
6
- line-height: 1.5rem;
7
- border-radius: 1rem;
8
- width: auto;
9
- background-color: var(--jvx-multiselect-primary);
10
- color: var(--jvx-multiselect-on-primary);
11
- display: flex;
12
- align-items: center;
13
- .chip-text{
14
- flex: 1 1 100%;
15
- padding-inline: .5rem;
16
- }
17
- .remove-button{
18
- cursor: pointer;
19
- color: var(--jvx-multiselect-on-primary);
20
- }
21
- &.disabled{
22
- background-color: #c2c3c4;
23
- color: currentColor;
24
- .chip-text {
25
- pointer-events: none;
26
- }
27
- .remove-button{
28
- color: currentColor;
29
- }
30
- }
31
- }
32
- }
1
+ ng-jvx-multiselect-chip{
2
+ > div{
3
+ padding: 0 .2rem;
4
+ height: 1.8rem;
5
+ font-size: 1rem;
6
+ line-height: 1.5rem;
7
+ border-radius: 1rem;
8
+ width: auto;
9
+ background-color: var(--jvx-multiselect-primary);
10
+ color: var(--jvx-multiselect-on-primary);
11
+ display: flex;
12
+ align-items: center;
13
+ .chip-text{
14
+ flex: 1 1 100%;
15
+ padding-inline: .5rem;
16
+ }
17
+ .remove-button{
18
+ cursor: pointer;
19
+ color: var(--jvx-multiselect-on-primary);
20
+ }
21
+ &.disabled{
22
+ background-color: #c2c3c4;
23
+ color: currentColor;
24
+ .chip-text {
25
+ pointer-events: none;
26
+ }
27
+ .remove-button{
28
+ color: currentColor;
29
+ }
30
+ }
31
+ }
32
+ }
@@ -1,6 +1,6 @@
1
- @mixin alpha($property, $color-variable, $opacity) {
2
- $color-variable-h: var(#{$color-variable+'-h'});
3
- $color-variable-s: var(#{$color-variable+'-s'});
4
- $color-variable-l: var(#{$color-variable+'-l'});
5
- #{$property}: hsla($color-variable-h, $color-variable-s, $color-variable-l, $opacity);
6
- }
1
+ @mixin alpha($property, $color-variable, $opacity) {
2
+ $color-variable-h: var(#{$color-variable+'-h'});
3
+ $color-variable-s: var(#{$color-variable+'-s'});
4
+ $color-variable-l: var(#{$color-variable+'-l'});
5
+ #{$property}: hsla($color-variable-h, $color-variable-s, $color-variable-l, $opacity);
6
+ }
@@ -1,172 +1,172 @@
1
- @use 'sass:map';
2
-
3
- $primary: var(--jvx-multiselect-primary);
4
- $accent: var(--jvx-multiselect-accent);
5
- $warn: var(--jvx-multiselect-warn);
6
- ng-jvx-multiselect {
7
- display: flex;
8
- align-items: center;
9
- width: 100%;
10
-
11
- .ng-jvx-multiselect {
12
- width: 100%;
13
- display: flex;
14
- align-items: center;
15
-
16
- .ng-jvx-multiselect-value-container {
17
- width: 100%;
18
- display: flex;
19
- cursor: pointer;
20
- position: relative;
21
- justify-content: space-between;
22
- align-items: center;
23
-
24
- .ng-jvx-multiselect__placeholder {
25
- height: 100%;
26
- display: flex;
27
- align-items: center;
28
- position: absolute;
29
- }
30
-
31
- .ng-jvx-multiselect-value {
32
- flex: 1 1 100%;
33
- max-width: calc(100% - 28px);
34
- display: flex;
35
- align-items: center;
36
- }
37
-
38
-
39
- .ng-jvx-multiselect__remove-button {
40
- display: flex;
41
- height: 100%;
42
- align-items: center;
43
- }
44
-
45
- .ng-jvx-multiselect-arrow {
46
- width: 24px;
47
- padding-right: 4px;
48
- display: flex;
49
- align-items: center;
50
- height: 24px;
51
-
52
- svg {
53
- transition: transform 0.3s ease-in-out;
54
- }
55
-
56
- @keyframes lds-ring {
57
- 0% {
58
- transform: rotate(0deg);
59
- }
60
- 100% {
61
- transform: rotate(360deg);
62
- }
63
- }
64
-
65
- .lds-ring {
66
- display: inline-block;
67
- position: relative;
68
- width: 24px;
69
- height: 24px;
70
-
71
- div {
72
- box-sizing: border-box;
73
- display: block;
74
- position: absolute;
75
- width: 6px;
76
- height: 16px;
77
- margin: 4px;
78
- border: 2px solid;
79
- border-radius: 50%;
80
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
81
- border-color: #{$accent} transparent transparent transparent;
82
-
83
- &:nth-child(1) {
84
- animation-delay: -0.45s;
85
- }
86
-
87
- &:nth-child(2) {
88
- animation-delay: -0.3s;
89
- }
90
-
91
- &:nth-child(3) {
92
- animation-delay: -0.15s;
93
- }
94
- }
95
- }
96
- }
97
-
98
- &.is-open {
99
- .ng-jvx-multiselect-arrow {
100
- svg {
101
- transform: rotate(180deg);
102
- }
103
- }
104
- }
105
-
106
- }
107
-
108
- &.disabled {
109
- pointer-events: none;
110
-
111
- .ng-jvx-multiselect-arrow {
112
- svg {
113
- opacity: 0.3;
114
- }
115
- }
116
- }
117
-
118
- &.has-errors {
119
- color: red;
120
-
121
- .ng-jvx-multiselect-value {
122
- &.single-value-container {
123
- color: red;
124
- }
125
-
126
- &.multi-value-container {
127
- width: 100%;
128
- }
129
- }
130
-
131
- .ng-jvx-multiselect-arrow {
132
- svg {
133
- color: red;
134
- }
135
- }
136
- }
137
- }
138
- }
139
-
140
- .menu-list-container {
141
- flex: 1 1 0;
142
- max-height: 300px;
143
- display: flex;
144
- flex-direction: column;
145
- }
146
-
147
- .menu-footer {
148
- //max-height: 30px;
149
- overflow: hidden;
150
- }
151
-
152
- .cdk-overlay-pane {
153
- .closeMenuButton {
154
- height: 22px;
155
- width: 22px;
156
- background-color: #{$primary};
157
- position: absolute;
158
- top: -11px;
159
- right: 11px;
160
- border-radius: 100%;
161
- cursor: pointer;
162
- color: #fff;
163
- z-index: 10;
164
-
165
- svg {
166
- fill: var(--jvx-multiselect-on-primary);
167
- font-size: 15px;
168
- height: 100%;
169
- width: 100%;
170
- }
171
- }
172
- }
1
+ @use 'sass:map';
2
+
3
+ $primary: var(--jvx-multiselect-primary);
4
+ $accent: var(--jvx-multiselect-accent);
5
+ $warn: var(--jvx-multiselect-warn);
6
+ ng-jvx-multiselect {
7
+ display: flex;
8
+ align-items: center;
9
+ width: 100%;
10
+
11
+ .ng-jvx-multiselect {
12
+ width: 100%;
13
+ display: flex;
14
+ align-items: center;
15
+
16
+ .ng-jvx-multiselect-value-container {
17
+ width: 100%;
18
+ display: flex;
19
+ cursor: pointer;
20
+ position: relative;
21
+ justify-content: space-between;
22
+ align-items: center;
23
+
24
+ .ng-jvx-multiselect__placeholder {
25
+ height: 100%;
26
+ display: flex;
27
+ align-items: center;
28
+ position: absolute;
29
+ }
30
+
31
+ .ng-jvx-multiselect-value {
32
+ flex: 1 1 100%;
33
+ max-width: calc(100% - 28px);
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+
38
+
39
+ .ng-jvx-multiselect__remove-button {
40
+ display: flex;
41
+ height: 100%;
42
+ align-items: center;
43
+ }
44
+
45
+ .ng-jvx-multiselect-arrow {
46
+ width: 24px;
47
+ padding-right: 4px;
48
+ display: flex;
49
+ align-items: center;
50
+ height: 24px;
51
+
52
+ svg {
53
+ transition: transform 0.3s ease-in-out;
54
+ }
55
+
56
+ @keyframes lds-ring {
57
+ 0% {
58
+ transform: rotate(0deg);
59
+ }
60
+ 100% {
61
+ transform: rotate(360deg);
62
+ }
63
+ }
64
+
65
+ .lds-ring {
66
+ display: inline-block;
67
+ position: relative;
68
+ width: 24px;
69
+ height: 24px;
70
+
71
+ div {
72
+ box-sizing: border-box;
73
+ display: block;
74
+ position: absolute;
75
+ width: 6px;
76
+ height: 16px;
77
+ margin: 4px;
78
+ border: 2px solid;
79
+ border-radius: 50%;
80
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
81
+ border-color: #{$accent} transparent transparent transparent;
82
+
83
+ &:nth-child(1) {
84
+ animation-delay: -0.45s;
85
+ }
86
+
87
+ &:nth-child(2) {
88
+ animation-delay: -0.3s;
89
+ }
90
+
91
+ &:nth-child(3) {
92
+ animation-delay: -0.15s;
93
+ }
94
+ }
95
+ }
96
+ }
97
+
98
+ &.is-open {
99
+ .ng-jvx-multiselect-arrow {
100
+ svg {
101
+ transform: rotate(180deg);
102
+ }
103
+ }
104
+ }
105
+
106
+ }
107
+
108
+ &.disabled {
109
+ pointer-events: none;
110
+
111
+ .ng-jvx-multiselect-arrow {
112
+ svg {
113
+ opacity: 0.3;
114
+ }
115
+ }
116
+ }
117
+
118
+ &.has-errors {
119
+ color: red;
120
+
121
+ .ng-jvx-multiselect-value {
122
+ &.single-value-container {
123
+ color: red;
124
+ }
125
+
126
+ &.multi-value-container {
127
+ width: 100%;
128
+ }
129
+ }
130
+
131
+ .ng-jvx-multiselect-arrow {
132
+ svg {
133
+ color: red;
134
+ }
135
+ }
136
+ }
137
+ }
138
+ }
139
+
140
+ .menu-list-container {
141
+ flex: 1 1 0;
142
+ max-height: 300px;
143
+ display: flex;
144
+ flex-direction: column;
145
+ }
146
+
147
+ .menu-footer {
148
+ //max-height: 30px;
149
+ overflow: hidden;
150
+ }
151
+
152
+ .cdk-overlay-pane {
153
+ .closeMenuButton {
154
+ height: 22px;
155
+ width: 22px;
156
+ background-color: #{$primary};
157
+ position: absolute;
158
+ top: -11px;
159
+ right: 11px;
160
+ border-radius: 100%;
161
+ cursor: pointer;
162
+ color: #fff;
163
+ z-index: 10;
164
+
165
+ svg {
166
+ fill: var(--jvx-multiselect-on-primary);
167
+ font-size: 15px;
168
+ height: 100%;
169
+ width: 100%;
170
+ }
171
+ }
172
+ }
@@ -1,32 +1,32 @@
1
- @use 'sass:map';
2
-
3
- $primary: var(--jvx-multiselect-primary);
4
- $accent: var(--jvx-multiselect-accent);
5
- $warn: var(--jvx-multiselect-warn);
6
- ng-jvx-option {
7
- .option-content{
8
- min-height: 48px;
9
- }
10
- .ng-jvx-option {
11
- padding: 0;
12
- height: auto;
13
- min-height: 48px;
14
- cursor: pointer;
15
- position: relative;
16
-
17
- &.ng-jvx-single-selected-option {
18
-
19
- .list-option-background {
20
- position: absolute;
21
- left: 0;
22
- top: 0;
23
- z-index: -1;
24
- opacity: 0.45;
25
- height: 100%;
26
- width: 100%;
27
- background-color: #{$primary};
28
- background-opacity: .3;
29
- }
30
- }
31
- }
32
- }
1
+ @use 'sass:map';
2
+
3
+ $primary: var(--jvx-multiselect-primary);
4
+ $accent: var(--jvx-multiselect-accent);
5
+ $warn: var(--jvx-multiselect-warn);
6
+ ng-jvx-option {
7
+ .option-content{
8
+ min-height: 48px;
9
+ }
10
+ .ng-jvx-option {
11
+ padding: 0;
12
+ height: auto;
13
+ min-height: 48px;
14
+ cursor: pointer;
15
+ position: relative;
16
+
17
+ &.ng-jvx-single-selected-option {
18
+
19
+ .list-option-background {
20
+ position: absolute;
21
+ left: 0;
22
+ top: 0;
23
+ z-index: -1;
24
+ opacity: 0.45;
25
+ height: 100%;
26
+ width: 100%;
27
+ background-color: #{$primary};
28
+ background-opacity: .3;
29
+ }
30
+ }
31
+ }
32
+ }
@@ -1,11 +1,11 @@
1
- @use '@angular/cdk/overlay-prebuilt';
2
-
3
- .ng-jvx-panel{
4
- display: flex;
5
- flex-direction: column;
6
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
7
- background: var(--jvx-multiselect-panel-bg);
8
- }
9
- .ng-jvx-panel-overlay{
10
- background-opacity: 0;
11
- }
1
+ @use '@angular/cdk/overlay-prebuilt';
2
+
3
+ .ng-jvx-panel{
4
+ display: flex;
5
+ flex-direction: column;
6
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
7
+ background: var(--jvx-multiselect-panel-bg);
8
+ }
9
+ .ng-jvx-panel-overlay{
10
+ background-opacity: 0;
11
+ }
@@ -1,20 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./panel/menu-trigger/menu-trigger.directive";
3
- import * as i2 from "./ng-jvx-multiselect.component";
4
- import * as i3 from "./ng-jvx-option/ng-jvx-option.component";
5
- import * as i4 from "./directives/ng-jvx-options-template.directive";
6
- import * as i5 from "./directives/ng-jvx-selection-template.directive";
7
- import * as i6 from "./directives/ng-jvx-disabled-option.directive";
8
- import * as i7 from "./directives/ng-jvx-group-header.directive";
9
- import * as i8 from "./directives/ng-jvx-focus.directive";
10
- import * as i9 from "@angular/common";
11
- import * as i10 from "@angular/forms";
12
- import * as i11 from "ngx-scrollbar";
13
- import * as i12 from "ngx-scrollbar/smooth-scroll";
14
- import * as i13 from "./panel/panel.component";
15
- import * as i14 from "./chiplist/chip/chip.component";
16
- export declare class NgJvxMultiselectModule {
17
- static ɵfac: i0.ɵɵFactoryDeclaration<NgJvxMultiselectModule, never>;
18
- static ɵmod: i0.ɵɵNgModuleDeclaration<NgJvxMultiselectModule, [typeof i1.MenuTriggerDirective, typeof i2.NgJvxMultiselectComponent, typeof i3.NgJvxOptionComponent, typeof i4.NgJvxOptionsTemplateDirective, typeof i5.NgJvxSelectionTemplateDirective, typeof i6.NgJvxDisabledOptionDirective, typeof i7.NgJvxGroupHeaderDirective, typeof i8.NgJvxFocusDirective], [typeof i9.CommonModule, typeof i10.ReactiveFormsModule, typeof i11.NgScrollbarModule, typeof i12.SmoothScroll, typeof i10.FormsModule, typeof i13.PanelComponent, typeof i14.NgJvxMultisectChipComponent], [typeof i2.NgJvxMultiselectComponent, typeof i3.NgJvxOptionComponent, typeof i4.NgJvxOptionsTemplateDirective, typeof i5.NgJvxSelectionTemplateDirective, typeof i6.NgJvxDisabledOptionDirective, typeof i14.NgJvxMultisectChipComponent, typeof i7.NgJvxGroupHeaderDirective]>;
19
- static ɵinj: i0.ɵɵInjectorDeclaration<NgJvxMultiselectModule>;
20
- }