ng-select2-component 17.3.2 → 19.0.0
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.
- package/CHANGELOG.md +15 -0
- package/README.md +79 -40
- package/fesm2022/ng-select2-component.mjs +432 -173
- package/fesm2022/ng-select2-component.mjs.map +1 -1
- package/package.json +11 -11
- package/types/ng-select2-component.d.ts +599 -0
- package/types/ng-select2-component.d.ts.map +1 -0
- package/index.d.ts +0 -6
- package/lib/select2-const.d.ts +0 -39
- package/lib/select2-const.d.ts.map +0 -1
- package/lib/select2-highlight.pipe.d.ts +0 -10
- package/lib/select2-highlight.pipe.d.ts.map +0 -1
- package/lib/select2-hint.component.d.ts +0 -6
- package/lib/select2-hint.component.d.ts.map +0 -1
- package/lib/select2-interfaces.d.ts +0 -97
- package/lib/select2-interfaces.d.ts.map +0 -1
- package/lib/select2-label.component.d.ts +0 -6
- package/lib/select2-label.component.d.ts.map +0 -1
- package/lib/select2-utils.d.ts +0 -30
- package/lib/select2-utils.d.ts.map +0 -1
- package/lib/select2.component.d.ts +0 -305
- package/lib/select2.component.d.ts.map +0 -1
- package/ng-select2-component.d.ts.map +0 -1
- package/public_api.d.ts +0 -8
- package/public_api.d.ts.map +0 -1
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject,
|
|
2
|
+
import { inject, ElementRef, input, signal, Directive, booleanAttribute, contentChildren, Pipe, ChangeDetectorRef, numberAttribute, computed, output, viewChild, viewChildren, effect, untracked, TemplateRef, Component } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
5
|
-
import {
|
|
5
|
+
import { CdkConnectedOverlay, ConnectionPositionPair, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
6
|
+
import { ViewportRuler } from '@angular/cdk/scrolling';
|
|
6
7
|
import { NgTemplateOutlet } from '@angular/common';
|
|
7
8
|
import { toObservable } from '@angular/core/rxjs-interop';
|
|
8
|
-
import {
|
|
9
|
-
import { Subject, Subscription } from 'rxjs';
|
|
10
|
-
import * as i1 from '@angular/cdk/scrolling';
|
|
11
|
-
import * as i2 from '@angular/forms';
|
|
9
|
+
import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
|
|
10
|
+
import { Subject, Subscription, fromEvent, debounceTime } from 'rxjs';
|
|
12
11
|
|
|
13
12
|
const timeout = 200;
|
|
14
13
|
/**
|
|
@@ -210,6 +209,163 @@ const unicodePatterns = [
|
|
|
210
209
|
const defaultMinCountForSearch = 6;
|
|
211
210
|
const protectRegexp = new RegExp('[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]', 'g');
|
|
212
211
|
|
|
212
|
+
/**
|
|
213
|
+
* Shared base for the <ng-option> and <ng-group> directives.
|
|
214
|
+
*
|
|
215
|
+
* Holds the inputs common to both (classes, templateId, data, dir) and the projected-content
|
|
216
|
+
* reactivity: plain text content (interpolation in the element body) is not a tracked signal, so
|
|
217
|
+
* the host component dirty-checks it in ngDoCheck and pushes changes into {@link _projectedContent},
|
|
218
|
+
* which the rebuild effect depends on through {@link _resolveLabel}.
|
|
219
|
+
*/
|
|
220
|
+
class Select2ContentDirective {
|
|
221
|
+
constructor() {
|
|
222
|
+
this._elementRef = inject((ElementRef));
|
|
223
|
+
/** Additional CSS classes */
|
|
224
|
+
this.classes = input(undefined, /* @ts-ignore */
|
|
225
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
226
|
+
/** Template id */
|
|
227
|
+
this.templateId = input(undefined, /* @ts-ignore */
|
|
228
|
+
...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
|
|
229
|
+
/** Arbitrary data attached to the option/group */
|
|
230
|
+
this.data = input(undefined, /* @ts-ignore */
|
|
231
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
232
|
+
/** Force text direction */
|
|
233
|
+
this.dir = input(undefined, /* @ts-ignore */
|
|
234
|
+
...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
|
|
235
|
+
/**
|
|
236
|
+
* Reactive trigger for the projected text content (interpolation in the element body).
|
|
237
|
+
* The host component dirty-checks the DOM in its ngDoCheck and updates this signal when the
|
|
238
|
+
* rendered text changes, so the component's rebuild effect re-runs even though plain text
|
|
239
|
+
* content is not otherwise a tracked dependency.
|
|
240
|
+
*/
|
|
241
|
+
this._projectedContent = signal(undefined, /* @ts-ignore */
|
|
242
|
+
...(ngDevMode ? [{ debugName: "_projectedContent" }] : /* istanbul ignore next */ []));
|
|
243
|
+
}
|
|
244
|
+
/** Read the host element's rendered text content (innerHTML, then textContent, then ''). */
|
|
245
|
+
_readContent() {
|
|
246
|
+
const el = this._elementRef.nativeElement;
|
|
247
|
+
return el.innerHTML?.trim() || el.textContent?.trim() || '';
|
|
248
|
+
}
|
|
249
|
+
/**
|
|
250
|
+
* Re-read the host element's rendered content and update {@link _projectedContent} when it
|
|
251
|
+
* changed. Returns true if a change was detected. Called from the host component's ngDoCheck.
|
|
252
|
+
*/
|
|
253
|
+
_refreshProjectedContent() {
|
|
254
|
+
const content = this._readContent();
|
|
255
|
+
if (content !== this._projectedContent()) {
|
|
256
|
+
this._projectedContent.set(content);
|
|
257
|
+
return true;
|
|
258
|
+
}
|
|
259
|
+
return false;
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* Resolve the label: prefer the explicit [label] input, then the cached projected content,
|
|
263
|
+
* then a one-off DOM read. Reading _projectedContent() registers it as a dependency of the
|
|
264
|
+
* rebuild effect so interpolation/content changes propagate; the cached value avoids a second
|
|
265
|
+
* DOM read, and _readContent() only runs on the initial pass.
|
|
266
|
+
*/
|
|
267
|
+
_resolveLabel(label) {
|
|
268
|
+
return label ?? this._projectedContent() ?? this._readContent();
|
|
269
|
+
}
|
|
270
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2ContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
271
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: Select2ContentDirective, isStandalone: true, inputs: { classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, templateId: { classPropertyName: "templateId", publicName: "templateId", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
272
|
+
}
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2ContentDirective, decorators: [{
|
|
274
|
+
type: Directive
|
|
275
|
+
}], propDecorators: { classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], templateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateId", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }] } });
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Directive representing a single option inside a <ng-select2> or <ng-group>.
|
|
279
|
+
*
|
|
280
|
+
* Usage:
|
|
281
|
+
* ```html
|
|
282
|
+
* <ng-select2>
|
|
283
|
+
* <ng-option value="foo">Foo</ng-option>
|
|
284
|
+
* <ng-option value="bar" [disabled]="true">Bar</ng-option>
|
|
285
|
+
* </ng-select2>
|
|
286
|
+
* ```
|
|
287
|
+
*/
|
|
288
|
+
class Select2OptionDirective extends Select2ContentDirective {
|
|
289
|
+
constructor() {
|
|
290
|
+
super(...arguments);
|
|
291
|
+
/** The option value */
|
|
292
|
+
this.value = input.required(/* @ts-ignore */
|
|
293
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
294
|
+
/** Explicit label — falls back to the element's text content if omitted */
|
|
295
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
296
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
297
|
+
/** Whether the option is disabled */
|
|
298
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
299
|
+
/** Template selection id */
|
|
300
|
+
this.templateSelectionId = input(undefined, /* @ts-ignore */
|
|
301
|
+
...(ngDevMode ? [{ debugName: "templateSelectionId" }] : /* istanbul ignore next */ []));
|
|
302
|
+
/** Hide this option */
|
|
303
|
+
this.hide = input(false, { ...(ngDevMode ? { debugName: "hide" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
304
|
+
}
|
|
305
|
+
/** Build a plain Select2Option object from the current input values */
|
|
306
|
+
toOption() {
|
|
307
|
+
return {
|
|
308
|
+
value: this.value(),
|
|
309
|
+
label: this._resolveLabel(this.label()),
|
|
310
|
+
disabled: this.disabled() || undefined,
|
|
311
|
+
classes: this.classes(),
|
|
312
|
+
templateId: this.templateId(),
|
|
313
|
+
templateSelectionId: this.templateSelectionId(),
|
|
314
|
+
data: this.data(),
|
|
315
|
+
hide: this.hide() || undefined,
|
|
316
|
+
dir: this.dir(),
|
|
317
|
+
};
|
|
318
|
+
}
|
|
319
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2OptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
320
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: Select2OptionDirective, isStandalone: true, selector: "ng-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, templateSelectionId: { classPropertyName: "templateSelectionId", publicName: "templateSelectionId", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
321
|
+
}
|
|
322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2OptionDirective, decorators: [{
|
|
323
|
+
type: Directive,
|
|
324
|
+
args: [{ selector: 'ng-option' }]
|
|
325
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], templateSelectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSelectionId", required: false }] }], hide: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide", required: false }] }] } });
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* Directive representing an option group inside a <ng-select2>.
|
|
329
|
+
*
|
|
330
|
+
* Usage:
|
|
331
|
+
* ```html
|
|
332
|
+
* <ng-select2>
|
|
333
|
+
* <ng-group label="Fruits">
|
|
334
|
+
* <ng-option value="apple">Apple</ng-option>
|
|
335
|
+
* <ng-option value="banana">Banana</ng-option>
|
|
336
|
+
* </ng-group>
|
|
337
|
+
* </ng-select2>
|
|
338
|
+
* ```
|
|
339
|
+
*/
|
|
340
|
+
class Select2GroupDirective extends Select2ContentDirective {
|
|
341
|
+
constructor() {
|
|
342
|
+
super(...arguments);
|
|
343
|
+
/** The group label (required) */
|
|
344
|
+
this.label = input.required(/* @ts-ignore */
|
|
345
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
346
|
+
/** Child <ng-option> directives nested inside this group */
|
|
347
|
+
this._ngOptions = contentChildren(Select2OptionDirective, /* @ts-ignore */
|
|
348
|
+
...(ngDevMode ? [{ debugName: "_ngOptions" }] : /* istanbul ignore next */ []));
|
|
349
|
+
}
|
|
350
|
+
/** Build a plain Select2Group object from the current input values */
|
|
351
|
+
toGroup() {
|
|
352
|
+
return {
|
|
353
|
+
label: this._resolveLabel(this.label()),
|
|
354
|
+
options: this._ngOptions().map(o => o.toOption()),
|
|
355
|
+
classes: this.classes(),
|
|
356
|
+
templateId: this.templateId(),
|
|
357
|
+
data: this.data(),
|
|
358
|
+
dir: this.dir(),
|
|
359
|
+
};
|
|
360
|
+
}
|
|
361
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2GroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
362
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: Select2GroupDirective, isStandalone: true, selector: "ng-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "_ngOptions", predicate: Select2OptionDirective, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
363
|
+
}
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2GroupDirective, decorators: [{
|
|
365
|
+
type: Directive,
|
|
366
|
+
args: [{ selector: 'ng-group' }]
|
|
367
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], _ngOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Select2OptionDirective), { isSignal: true }] }] } });
|
|
368
|
+
|
|
213
369
|
class Select2Utils {
|
|
214
370
|
static getOptionByValue(data, value) {
|
|
215
371
|
for (const groupOrOption of data) {
|
|
@@ -521,33 +677,30 @@ class Select2HighlightPipe {
|
|
|
521
677
|
const result = value.replace(new RegExp(`(${escapedSearch})`, 'gi'), '<span class="select2-highlight-text">$1</span>');
|
|
522
678
|
return this.sanitizer.bypassSecurityTrustHtml(result);
|
|
523
679
|
}
|
|
524
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
525
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
680
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2HighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
681
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: Select2HighlightPipe, isStandalone: true, name: "highlightText" }); }
|
|
526
682
|
}
|
|
527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2HighlightPipe, decorators: [{
|
|
528
684
|
type: Pipe,
|
|
529
|
-
args: [{
|
|
530
|
-
name: 'highlightText',
|
|
531
|
-
standalone: true,
|
|
532
|
-
}]
|
|
685
|
+
args: [{ name: 'highlightText' }]
|
|
533
686
|
}] });
|
|
534
687
|
|
|
535
688
|
class Select2Hint {
|
|
536
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
537
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
689
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2Hint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
690
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: Select2Hint, isStandalone: true, selector: "select2-hint, ng-select2-hint", ngImport: i0 }); }
|
|
538
691
|
}
|
|
539
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2Hint, decorators: [{
|
|
540
693
|
type: Directive,
|
|
541
|
-
args: [{ selector: 'select2-hint, ng-select2-hint'
|
|
694
|
+
args: [{ selector: 'select2-hint, ng-select2-hint' }]
|
|
542
695
|
}] });
|
|
543
696
|
|
|
544
697
|
class Select2Label {
|
|
545
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
546
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
698
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2Label, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
699
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: Select2Label, isStandalone: true, selector: "select2-label, ng-select2-label", ngImport: i0 }); }
|
|
547
700
|
}
|
|
548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2Label, decorators: [{
|
|
549
702
|
type: Directive,
|
|
550
|
-
args: [{ selector: 'select2-label, ng-select2-label'
|
|
703
|
+
args: [{ selector: 'select2-label, ng-select2-label' }]
|
|
551
704
|
}] });
|
|
552
705
|
|
|
553
706
|
let nextUniqueId = 0;
|
|
@@ -557,19 +710,6 @@ const OPEN_KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End', 'PageUp'
|
|
|
557
710
|
const ON_OPEN_KEYS = ['Home', 'End', 'PageUp', 'PageDown'];
|
|
558
711
|
const CLOSE_KEYS = ['Escape', 'Tab', { key: 'ArrowUp', altKey: true }];
|
|
559
712
|
class Select2 {
|
|
560
|
-
// ----------------------- HostBinding
|
|
561
|
-
get classMaterial() {
|
|
562
|
-
return this.styleMode() === 'material';
|
|
563
|
-
}
|
|
564
|
-
get classNostyle() {
|
|
565
|
-
return this.styleMode() === 'noStyle';
|
|
566
|
-
}
|
|
567
|
-
get classBorderless() {
|
|
568
|
-
return this.styleMode() === 'borderless';
|
|
569
|
-
}
|
|
570
|
-
get select2above() {
|
|
571
|
-
return !this.overlay() ? this.listPosition() === 'above' : this._isAbobeOverlay();
|
|
572
|
-
}
|
|
573
713
|
get select2Options() {
|
|
574
714
|
return this.multiple() ? (this.selectedOption ?? []) : [];
|
|
575
715
|
}
|
|
@@ -585,23 +725,6 @@ class Select2 {
|
|
|
585
725
|
get disabledState() {
|
|
586
726
|
return this._control?.disabled ?? this._disabled;
|
|
587
727
|
}
|
|
588
|
-
get _positions() {
|
|
589
|
-
switch (this.listPosition()) {
|
|
590
|
-
case 'above':
|
|
591
|
-
return [
|
|
592
|
-
new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
|
|
593
|
-
];
|
|
594
|
-
case 'auto':
|
|
595
|
-
return [
|
|
596
|
-
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
|
|
597
|
-
new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
|
|
598
|
-
];
|
|
599
|
-
default:
|
|
600
|
-
return [
|
|
601
|
-
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
|
|
602
|
-
];
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
728
|
get resultsElement() {
|
|
606
729
|
const container = this.resultContainer();
|
|
607
730
|
return container ? container.nativeElement : undefined;
|
|
@@ -610,123 +733,151 @@ class Select2 {
|
|
|
610
733
|
get _tabIndex() {
|
|
611
734
|
return this.disabledState ? -1 : this.tabIndex();
|
|
612
735
|
}
|
|
613
|
-
constructor(
|
|
614
|
-
this._viewportRuler =
|
|
615
|
-
this._changeDetectorRef =
|
|
616
|
-
this._parentForm =
|
|
617
|
-
this._parentFormGroup =
|
|
618
|
-
this._control =
|
|
736
|
+
constructor() {
|
|
737
|
+
this._viewportRuler = inject(ViewportRuler);
|
|
738
|
+
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
739
|
+
this._parentForm = inject(NgForm, { optional: true });
|
|
740
|
+
this._parentFormGroup = inject(FormGroupDirective, { optional: true });
|
|
741
|
+
this._control = inject(NgControl, { optional: true, self: true });
|
|
619
742
|
this._uid = `select2-${nextUniqueId++}`;
|
|
620
743
|
// ----------------------- signal-input
|
|
621
744
|
/** data of options & option groups */
|
|
622
|
-
this.data = input
|
|
745
|
+
this.data = input([], /* @ts-ignore */
|
|
746
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
623
747
|
/** minimum characters to start filter search */
|
|
624
|
-
this.minCharForSearch = input(0, { transform: numberAttribute });
|
|
748
|
+
this.minCharForSearch = input(0, { ...(ngDevMode ? { debugName: "minCharForSearch" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
625
749
|
/** text placeholder */
|
|
626
|
-
this.displaySearchStatus = input(undefined
|
|
750
|
+
this.displaySearchStatus = input(undefined, /* @ts-ignore */
|
|
751
|
+
...(ngDevMode ? [{ debugName: "displaySearchStatus" }] : /* istanbul ignore next */ []));
|
|
627
752
|
/** text placeholder */
|
|
628
|
-
this.placeholder = input(undefined
|
|
753
|
+
this.placeholder = input(undefined, /* @ts-ignore */
|
|
754
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
629
755
|
/** in multiple: maximum selection element (0 = no limit) */
|
|
630
|
-
this.limitSelection = input(0, { transform: numberAttribute });
|
|
756
|
+
this.limitSelection = input(0, { ...(ngDevMode ? { debugName: "limitSelection" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
631
757
|
/** dropdown position */
|
|
632
|
-
this.listPosition = input('below'
|
|
758
|
+
this.listPosition = input('below', /* @ts-ignore */
|
|
759
|
+
...(ngDevMode ? [{ debugName: "listPosition" }] : /* istanbul ignore next */ []));
|
|
633
760
|
/** overlay with CDK Angular position */
|
|
634
|
-
this.overlay = input(false, { transform: booleanAttribute });
|
|
761
|
+
this.overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
635
762
|
/** select one or more item */
|
|
636
|
-
this.multiple = input(false, { transform: booleanAttribute });
|
|
763
|
+
this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
637
764
|
/** drag'n drop list of items in multiple */
|
|
638
|
-
this.multipleDrag = input(false, { transform: booleanAttribute });
|
|
765
|
+
this.multipleDrag = input(false, { ...(ngDevMode ? { debugName: "multipleDrag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
639
766
|
/** use the material style */
|
|
640
|
-
this.styleMode = input('default'
|
|
767
|
+
this.styleMode = input('default', /* @ts-ignore */
|
|
768
|
+
...(ngDevMode ? [{ debugName: "styleMode" }] : /* istanbul ignore next */ []));
|
|
641
769
|
/** message when no result */
|
|
642
|
-
this.noResultMessage = input(
|
|
770
|
+
this.noResultMessage = input(/* @ts-ignore */
|
|
771
|
+
...(ngDevMode ? [undefined, { debugName: "noResultMessage" }] : /* istanbul ignore next */ []));
|
|
643
772
|
/** maximum results limit (0 = no limit) */
|
|
644
|
-
this.maxResults = input(0, { transform: numberAttribute });
|
|
773
|
+
this.maxResults = input(0, { ...(ngDevMode ? { debugName: "maxResults" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
645
774
|
/** message when maximum results */
|
|
646
|
-
this.maxResultsMessage = input('Too many results…'
|
|
775
|
+
this.maxResultsMessage = input('Too many results…', /* @ts-ignore */
|
|
776
|
+
...(ngDevMode ? [{ debugName: "maxResultsMessage" }] : /* istanbul ignore next */ []));
|
|
647
777
|
/** infinite scroll distance */
|
|
648
|
-
this.infiniteScrollDistance = input(1.5, { transform: numberAttribute });
|
|
778
|
+
this.infiniteScrollDistance = input(1.5, { ...(ngDevMode ? { debugName: "infiniteScrollDistance" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
649
779
|
/** infinite scroll distance */
|
|
650
|
-
this.infiniteScrollThrottle = input(150, { transform: numberAttribute });
|
|
780
|
+
this.infiniteScrollThrottle = input(150, { ...(ngDevMode ? { debugName: "infiniteScrollThrottle" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
651
781
|
/** infinite scroll activated */
|
|
652
|
-
this.infiniteScroll = input(false, { transform: booleanAttribute });
|
|
782
|
+
this.infiniteScroll = input(false, { ...(ngDevMode ? { debugName: "infiniteScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
653
783
|
/** auto create if not exist */
|
|
654
|
-
this.autoCreate = input(false, { transform: booleanAttribute });
|
|
784
|
+
this.autoCreate = input(false, { ...(ngDevMode ? { debugName: "autoCreate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
655
785
|
/** no template for label selection */
|
|
656
|
-
this.noLabelTemplate = input(false, { transform: booleanAttribute });
|
|
786
|
+
this.noLabelTemplate = input(false, { ...(ngDevMode ? { debugName: "noLabelTemplate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
657
787
|
/** use it for change the pattern of the filter search */
|
|
658
|
-
this.editPattern = input(undefined
|
|
788
|
+
this.editPattern = input(undefined, /* @ts-ignore */
|
|
789
|
+
...(ngDevMode ? [{ debugName: "editPattern" }] : /* istanbul ignore next */ []));
|
|
659
790
|
/** template(s) for formatting */
|
|
660
|
-
this.templates = input(undefined
|
|
791
|
+
this.templates = input(undefined, /* @ts-ignore */
|
|
792
|
+
...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
|
|
661
793
|
/** template for formatting selected option */
|
|
662
|
-
this.templateSelection = input(undefined
|
|
794
|
+
this.templateSelection = input(undefined, /* @ts-ignore */
|
|
795
|
+
...(ngDevMode ? [{ debugName: "templateSelection" }] : /* istanbul ignore next */ []));
|
|
663
796
|
/** the max height of the results container when opening the select */
|
|
664
|
-
this.resultMaxHeight = input('200px'
|
|
797
|
+
this.resultMaxHeight = input('200px', /* @ts-ignore */
|
|
798
|
+
...(ngDevMode ? [{ debugName: "resultMaxHeight" }] : /* istanbul ignore next */ []));
|
|
665
799
|
/** Active Search event */
|
|
666
|
-
this.customSearchEnabled = input(false, { transform: booleanAttribute });
|
|
800
|
+
this.customSearchEnabled = input(false, { ...(ngDevMode ? { debugName: "customSearchEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
667
801
|
/** minimal data of show the search field */
|
|
668
|
-
this.minCountForSearch = input(undefined, { transform: numberAttribute });
|
|
802
|
+
this.minCountForSearch = input(undefined, { ...(ngDevMode ? { debugName: "minCountForSearch" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
669
803
|
/** Unique id of the element. */
|
|
670
|
-
this.id = input(this._uid
|
|
804
|
+
this.id = input(this._uid, /* @ts-ignore */
|
|
805
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
671
806
|
/** Unique id of label element. */
|
|
672
|
-
this.idLabel = computed(() => `${this.id()}-label
|
|
807
|
+
this.idLabel = computed(() => `${this.id()}-label`, /* @ts-ignore */
|
|
808
|
+
...(ngDevMode ? [{ debugName: "idLabel" }] : /* istanbul ignore next */ []));
|
|
673
809
|
/** Unique id of combo element. */
|
|
674
|
-
this.idCombo = computed(() => `${this.id()}-combo
|
|
810
|
+
this.idCombo = computed(() => `${this.id()}-combo`, /* @ts-ignore */
|
|
811
|
+
...(ngDevMode ? [{ debugName: "idCombo" }] : /* istanbul ignore next */ []));
|
|
675
812
|
/** Unique id of options element. */
|
|
676
|
-
this.idOptions = computed(() => `${this.id()}-options
|
|
813
|
+
this.idOptions = computed(() => `${this.id()}-options`, /* @ts-ignore */
|
|
814
|
+
...(ngDevMode ? [{ debugName: "idOptions" }] : /* istanbul ignore next */ []));
|
|
677
815
|
/** Unique id of overlay element. */
|
|
678
|
-
this.idOverlay = computed(() => `${this.id()}-overlay
|
|
816
|
+
this.idOverlay = computed(() => `${this.id()}-overlay`, /* @ts-ignore */
|
|
817
|
+
...(ngDevMode ? [{ debugName: "idOverlay" }] : /* istanbul ignore next */ []));
|
|
679
818
|
/** Whether the element is required. */
|
|
680
|
-
this.required = input(false, { transform: booleanAttribute });
|
|
819
|
+
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
681
820
|
/** Whether selected items should be hidden. */
|
|
682
|
-
this.disabled = input(false, { transform: booleanAttribute });
|
|
821
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
683
822
|
/** Whether items are hidden when has. */
|
|
684
|
-
this.hideSelectedItems = input(false, { transform: booleanAttribute });
|
|
823
|
+
this.hideSelectedItems = input(false, { ...(ngDevMode ? { debugName: "hideSelectedItems" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
685
824
|
/** Whether the element is readonly. */
|
|
686
|
-
this.readonly = input(false, { transform: booleanAttribute });
|
|
825
|
+
this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
687
826
|
/** The input element's value. */
|
|
688
|
-
this.value = input(
|
|
827
|
+
this.value = input(/* @ts-ignore */
|
|
828
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
689
829
|
/** Tab index for the select2 element. */
|
|
690
|
-
this.tabIndex = input(0, { transform: numberAttribute });
|
|
830
|
+
this.tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
691
831
|
/** reset with no selected value */
|
|
692
|
-
this.resettable = input(false, { transform: booleanAttribute });
|
|
832
|
+
this.resettable = input(false, { ...(ngDevMode ? { debugName: "resettable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
693
833
|
/** selected value when × is clicked */
|
|
694
|
-
this.resetSelectedValue = input(undefined
|
|
834
|
+
this.resetSelectedValue = input(undefined, /* @ts-ignore */
|
|
835
|
+
...(ngDevMode ? [{ debugName: "resetSelectedValue" }] : /* istanbul ignore next */ []));
|
|
695
836
|
/** like native select keyboard navigation (only single mode) */
|
|
696
|
-
this.nativeKeyboard = input(false, { transform: booleanAttribute });
|
|
837
|
+
this.nativeKeyboard = input(false, { ...(ngDevMode ? { debugName: "nativeKeyboard" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
697
838
|
/** highlight search text */
|
|
698
|
-
this.highlightText = input(false, { transform: booleanAttribute });
|
|
839
|
+
this.highlightText = input(false, { ...(ngDevMode ? { debugName: "highlightText" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
699
840
|
/** grid: item by line
|
|
700
841
|
* * 0 = no grid
|
|
701
842
|
* * number = item by line (4)
|
|
702
843
|
* * string = minimal size item (100px)
|
|
703
844
|
*/
|
|
704
|
-
this.grid = input(''
|
|
845
|
+
this.grid = input('', /* @ts-ignore */
|
|
846
|
+
...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
|
|
705
847
|
/**
|
|
706
848
|
* Replace selection by a text
|
|
707
849
|
* * if string: `%size%` = total selected options
|
|
708
850
|
* * if function: juste show the string
|
|
709
851
|
*/
|
|
710
|
-
this.selectionOverride = input(undefined
|
|
852
|
+
this.selectionOverride = input(undefined, /* @ts-ignore */
|
|
853
|
+
...(ngDevMode ? [{ debugName: "selectionOverride" }] : /* istanbul ignore next */ []));
|
|
711
854
|
/** force selection on one line */
|
|
712
|
-
this.selectionNoWrap = input(false, { transform: booleanAttribute });
|
|
855
|
+
this.selectionNoWrap = input(false, { ...(ngDevMode ? { debugName: "selectionNoWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
713
856
|
/** Add an option to select or remove all (if all is selected) */
|
|
714
|
-
this.showSelectAll = input(false, { transform: booleanAttribute });
|
|
857
|
+
this.showSelectAll = input(false, { ...(ngDevMode ? { debugName: "showSelectAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
858
|
+
/** Show a checkbox next to each option */
|
|
859
|
+
this.showOptionCheckbox = input(false, { ...(ngDevMode ? { debugName: "showOptionCheckbox" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
715
860
|
/** Text for remove all options */
|
|
716
|
-
this.removeAllText = input('Remove all'
|
|
861
|
+
this.removeAllText = input('Remove all', /* @ts-ignore */
|
|
862
|
+
...(ngDevMode ? [{ debugName: "removeAllText" }] : /* istanbul ignore next */ []));
|
|
717
863
|
/** Text for select all options */
|
|
718
|
-
this.selectAllText = input('Select all'
|
|
864
|
+
this.selectAllText = input('Select all', /* @ts-ignore */
|
|
865
|
+
...(ngDevMode ? [{ debugName: "selectAllText" }] : /* istanbul ignore next */ []));
|
|
719
866
|
// -- WAI related inputs ---
|
|
720
867
|
/** title attribute applied to the input */
|
|
721
|
-
this.title = input(
|
|
868
|
+
this.title = input(/* @ts-ignore */
|
|
869
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
722
870
|
/** aria-labelledby attribute applied to the input, to specify en external label */
|
|
723
|
-
this.ariaLabelledby = input(
|
|
871
|
+
this.ariaLabelledby = input(/* @ts-ignore */
|
|
872
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
|
|
724
873
|
/** aria-describedby attribute applied to the input */
|
|
725
|
-
this.ariaDescribedby = input(
|
|
874
|
+
this.ariaDescribedby = input(/* @ts-ignore */
|
|
875
|
+
...(ngDevMode ? [undefined, { debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
|
|
726
876
|
/** aria-invalid attribute applied to the input, to force error state */
|
|
727
|
-
this.ariaInvalid = input(false, { transform: booleanAttribute });
|
|
877
|
+
this.ariaInvalid = input(false, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
728
878
|
/** description of the reset button when using 'resettable'. Default value : 'Reset' */
|
|
729
|
-
this.ariaResetButtonDescription = input('Reset'
|
|
879
|
+
this.ariaResetButtonDescription = input('Reset', /* @ts-ignore */
|
|
880
|
+
...(ngDevMode ? [{ debugName: "ariaResetButtonDescription" }] : /* istanbul ignore next */ []));
|
|
730
881
|
// ----------------------- output
|
|
731
882
|
this.update = output();
|
|
732
883
|
this.autoCreateItem = output();
|
|
@@ -740,26 +891,68 @@ class Select2 {
|
|
|
740
891
|
// ----------------------- signal viewChild
|
|
741
892
|
this.cdkConnectedOverlay = viewChild.required(CdkConnectedOverlay);
|
|
742
893
|
this.selection = viewChild.required('selection');
|
|
743
|
-
this.resultContainer = viewChild('results'
|
|
744
|
-
|
|
745
|
-
this.
|
|
746
|
-
|
|
894
|
+
this.resultContainer = viewChild('results', /* @ts-ignore */
|
|
895
|
+
...(ngDevMode ? [{ debugName: "resultContainer" }] : /* istanbul ignore next */ []));
|
|
896
|
+
this.results = viewChildren('result', /* @ts-ignore */
|
|
897
|
+
...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
|
|
898
|
+
this.searchInput = viewChild('searchInput', /* @ts-ignore */
|
|
899
|
+
...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
|
|
900
|
+
this.dropdown = viewChild('dropdown', /* @ts-ignore */
|
|
901
|
+
...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
|
|
902
|
+
// ----------------------- content children (ng-option / ng-group template mode)
|
|
903
|
+
/** Top-level <ng-option> elements (not inside a <ng-group>) */
|
|
904
|
+
this._ngOptions = contentChildren(Select2OptionDirective, /* @ts-ignore */
|
|
905
|
+
...(ngDevMode ? [{ debugName: "_ngOptions" }] : /* istanbul ignore next */ []));
|
|
906
|
+
/** <ng-group> elements */
|
|
907
|
+
this._ngGroups = contentChildren(Select2GroupDirective, /* @ts-ignore */
|
|
908
|
+
...(ngDevMode ? [{ debugName: "_ngGroups" }] : /* istanbul ignore next */ []));
|
|
747
909
|
// ----------------------- internal var
|
|
910
|
+
this.classMaterial = computed(() => this.styleMode() === 'material', /* @ts-ignore */
|
|
911
|
+
...(ngDevMode ? [{ debugName: "classMaterial" }] : /* istanbul ignore next */ []));
|
|
912
|
+
this.classNostyle = computed(() => this.styleMode() === 'noStyle', /* @ts-ignore */
|
|
913
|
+
...(ngDevMode ? [{ debugName: "classNostyle" }] : /* istanbul ignore next */ []));
|
|
914
|
+
this.classBorderless = computed(() => this.styleMode() === 'borderless', /* @ts-ignore */
|
|
915
|
+
...(ngDevMode ? [{ debugName: "classBorderless" }] : /* istanbul ignore next */ []));
|
|
916
|
+
this.select2above = computed(() => !this.overlay() ? this.listPosition() === 'above' : this._isAbobeOverlay(), /* @ts-ignore */
|
|
917
|
+
...(ngDevMode ? [{ debugName: "select2above" }] : /* istanbul ignore next */ []));
|
|
748
918
|
this.selectedOption = null;
|
|
749
919
|
this.isOpen = false;
|
|
750
920
|
/** Whether the element is focused or not. */
|
|
751
921
|
this.focused = false;
|
|
752
|
-
this.filteredData = signal(undefined
|
|
922
|
+
this.filteredData = signal(undefined, /* @ts-ignore */
|
|
923
|
+
...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
|
|
753
924
|
this.overlayWidth = '';
|
|
754
925
|
this.overlayHeight = '';
|
|
755
|
-
this.
|
|
756
|
-
|
|
926
|
+
this._positions = computed(() => {
|
|
927
|
+
switch (this.listPosition()) {
|
|
928
|
+
case 'above':
|
|
929
|
+
return [
|
|
930
|
+
new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
|
|
931
|
+
];
|
|
932
|
+
case 'auto':
|
|
933
|
+
return [
|
|
934
|
+
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
|
|
935
|
+
new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
|
|
936
|
+
];
|
|
937
|
+
default:
|
|
938
|
+
return [
|
|
939
|
+
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
|
|
940
|
+
];
|
|
941
|
+
}
|
|
942
|
+
}, /* @ts-ignore */
|
|
943
|
+
...(ngDevMode ? [{ debugName: "_positions" }] : /* istanbul ignore next */ []));
|
|
944
|
+
this.hoveringOption = signal(null, /* @ts-ignore */
|
|
945
|
+
...(ngDevMode ? [{ debugName: "hoveringOption" }] : /* istanbul ignore next */ []));
|
|
946
|
+
this.hoveringOptionId = computed(() => this.getElementId(this.hoveringOption()), /* @ts-ignore */
|
|
947
|
+
...(ngDevMode ? [{ debugName: "hoveringOptionId" }] : /* istanbul ignore next */ []));
|
|
757
948
|
this.innerSearchText = '';
|
|
758
949
|
this._stateChanges = new Subject();
|
|
759
950
|
this._data = [];
|
|
760
951
|
this._disabled = false;
|
|
761
952
|
this._destroyed = false;
|
|
762
953
|
this._value = null;
|
|
954
|
+
this._overlayPosition = signal(undefined, /* @ts-ignore */
|
|
955
|
+
...(ngDevMode ? [{ debugName: "_overlayPosition" }] : /* istanbul ignore next */ []));
|
|
763
956
|
this.toObservable = new Subscription();
|
|
764
957
|
/** View -> model callback called when select has been touched */
|
|
765
958
|
this._onTouched = () => {
|
|
@@ -781,11 +974,64 @@ class Select2 {
|
|
|
781
974
|
this.toObservable.add(toObservable(this.disabled).subscribe(disabled => {
|
|
782
975
|
this._disabled = disabled;
|
|
783
976
|
}));
|
|
977
|
+
// Rebuild _data whenever content children or any of their inputs change (template mode).
|
|
978
|
+
// effect() re-runs synchronously in Angular's reactive context whenever any signal it
|
|
979
|
+
// reads changes — including contentChildren signals and every input() of each directive.
|
|
980
|
+
// untracked() isolates the side-effect (updateFilteredData reads many other signals)
|
|
981
|
+
// so only _ngGroups/_ngOptions and the directive inputs are tracked dependencies.
|
|
982
|
+
effect(() => {
|
|
983
|
+
const grps = this._ngGroups();
|
|
984
|
+
const opts = this._ngOptions();
|
|
985
|
+
if (grps.length === 0 && opts.length === 0) {
|
|
986
|
+
return;
|
|
987
|
+
}
|
|
988
|
+
// Read directive input signals here (tracked zone) so the effect re-runs
|
|
989
|
+
// when any input changes. Guard against required inputs not yet initialized
|
|
990
|
+
// (NG0950) by wrapping in try/catch — the effect will re-run once bindings resolve.
|
|
991
|
+
let data;
|
|
992
|
+
try {
|
|
993
|
+
data = [
|
|
994
|
+
...grps.map(g => g.toGroup()),
|
|
995
|
+
...opts
|
|
996
|
+
.filter(o => !grps.some(g => g._ngOptions().includes(o)))
|
|
997
|
+
.map(o => o.toOption()),
|
|
998
|
+
];
|
|
999
|
+
}
|
|
1000
|
+
catch {
|
|
1001
|
+
// Required inputs not yet available — skip this run, effect will re-trigger
|
|
1002
|
+
return;
|
|
1003
|
+
}
|
|
1004
|
+
untracked(() => {
|
|
1005
|
+
this._data = data;
|
|
1006
|
+
this.updateFilteredData();
|
|
1007
|
+
// If selectedOption was never initialized (ngOnInit ran before content children
|
|
1008
|
+
// were available), resolve it now from the freshly populated _data.
|
|
1009
|
+
if (this.selectedOption === null) {
|
|
1010
|
+
const controlValue = this._control ? this._control.value : this.value();
|
|
1011
|
+
const option = Select2Utils.getOptionsByValue(this._data, controlValue, this.multiple());
|
|
1012
|
+
if (option !== null) {
|
|
1013
|
+
this.selectedOption = option;
|
|
1014
|
+
}
|
|
1015
|
+
this.hoveringOption.set(Select2Utils.getOptionByValue(this._data, this.value));
|
|
1016
|
+
}
|
|
1017
|
+
// Use a microtask to schedule change detection after Angular completes
|
|
1018
|
+
// its current initialization cycle. This avoids issues on direct page reload
|
|
1019
|
+
// where detectChanges() during effect() can fail silently.
|
|
1020
|
+
Promise.resolve().then(() => {
|
|
1021
|
+
if (!this._destroyed) {
|
|
1022
|
+
this._changeDetectorRef.markForCheck();
|
|
1023
|
+
}
|
|
1024
|
+
});
|
|
1025
|
+
});
|
|
1026
|
+
});
|
|
784
1027
|
}
|
|
785
1028
|
ngOnChanges(changes) {
|
|
786
1029
|
let updateFilterData;
|
|
787
1030
|
if (changes['data']) {
|
|
788
|
-
|
|
1031
|
+
// Only use the bound data if no content children are present (template mode takes priority)
|
|
1032
|
+
if (this._ngOptions().length === 0 && this._ngGroups().length === 0) {
|
|
1033
|
+
this._data = changes['data'].currentValue;
|
|
1034
|
+
}
|
|
789
1035
|
updateFilterData = true;
|
|
790
1036
|
}
|
|
791
1037
|
if (changes['value']) {
|
|
@@ -828,12 +1074,13 @@ class Select2 {
|
|
|
828
1074
|
this._focus(this.clickOnSelect2Element(target));
|
|
829
1075
|
}
|
|
830
1076
|
}
|
|
1077
|
+
_onViewportChange() {
|
|
1078
|
+
if (this.isOpen) {
|
|
1079
|
+
this.triggerRect();
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
831
1082
|
ngOnInit() {
|
|
832
|
-
this._viewportRuler.change(100).subscribe(() =>
|
|
833
|
-
if (this.isOpen) {
|
|
834
|
-
this.triggerRect();
|
|
835
|
-
}
|
|
836
|
-
});
|
|
1083
|
+
this._viewportRuler.change(100).subscribe(() => this._onViewportChange());
|
|
837
1084
|
const controlValue = this._control ? this._control.value : this.value();
|
|
838
1085
|
const option = Select2Utils.getOptionsByValue(this._data, controlValue, this.multiple());
|
|
839
1086
|
if (option !== null) {
|
|
@@ -848,22 +1095,24 @@ class Select2 {
|
|
|
848
1095
|
this.cdkConnectedOverlay().positionChange.subscribe((posChange) => {
|
|
849
1096
|
if (this.listPosition() === 'auto' &&
|
|
850
1097
|
posChange.connectionPair?.originY &&
|
|
851
|
-
this._overlayPosition !== posChange.connectionPair.originY) {
|
|
1098
|
+
this._overlayPosition() !== posChange.connectionPair.originY) {
|
|
852
1099
|
this.triggerRect();
|
|
853
|
-
this._overlayPosition
|
|
854
|
-
this._changeDetectorRef.
|
|
1100
|
+
this._overlayPosition.set(posChange.connectionPair.originY);
|
|
1101
|
+
this._changeDetectorRef.markForCheck();
|
|
855
1102
|
}
|
|
856
1103
|
});
|
|
857
1104
|
this.selectionElement = this.selection().nativeElement;
|
|
858
1105
|
this.triggerRect();
|
|
1106
|
+
this._setupScrollListener();
|
|
859
1107
|
}
|
|
860
1108
|
ngDoCheck() {
|
|
861
1109
|
this.updateSearchBox();
|
|
862
1110
|
this._dirtyCheckNativeValue();
|
|
1111
|
+
this._refreshProjectedContent();
|
|
863
1112
|
if (this._triggerRect) {
|
|
864
1113
|
if (this.overlayWidth !== this._triggerRect.width) {
|
|
865
1114
|
this.overlayWidth = this._triggerRect.width;
|
|
866
|
-
this._changeDetectorRef.
|
|
1115
|
+
this._changeDetectorRef.markForCheck();
|
|
867
1116
|
}
|
|
868
1117
|
if (this._dropdownRect &&
|
|
869
1118
|
this._dropdownRect.height > 0 &&
|
|
@@ -877,6 +1126,27 @@ class Select2 {
|
|
|
877
1126
|
this._destroyed = true;
|
|
878
1127
|
this.toObservable.unsubscribe();
|
|
879
1128
|
}
|
|
1129
|
+
/**
|
|
1130
|
+
* Template mode only: dirty-check the rendered text content of every projected <ng-option>
|
|
1131
|
+
* (top-level and nested in <ng-group>) so interpolation changes ({{ }}) are picked up.
|
|
1132
|
+
* Updating an option's _projectedContent signal re-triggers the data rebuild effect.
|
|
1133
|
+
*/
|
|
1134
|
+
_refreshProjectedContent() {
|
|
1135
|
+
const groups = this._ngGroups();
|
|
1136
|
+
const topOptions = this._ngOptions();
|
|
1137
|
+
if (groups.length === 0 && topOptions.length === 0) {
|
|
1138
|
+
return;
|
|
1139
|
+
}
|
|
1140
|
+
for (const opt of topOptions) {
|
|
1141
|
+
opt._refreshProjectedContent();
|
|
1142
|
+
}
|
|
1143
|
+
for (const grp of groups) {
|
|
1144
|
+
grp._refreshProjectedContent();
|
|
1145
|
+
for (const opt of grp._ngOptions()) {
|
|
1146
|
+
opt._refreshProjectedContent();
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
}
|
|
880
1150
|
fixValue() {
|
|
881
1151
|
if (!Array.isArray(this.selectedOption) && this.multiple()) {
|
|
882
1152
|
const selectedOption = this.selectedOption;
|
|
@@ -884,7 +1154,7 @@ class Select2 {
|
|
|
884
1154
|
setTimeout(() => {
|
|
885
1155
|
if (!this._destroyed) {
|
|
886
1156
|
this.select(selectedOption);
|
|
887
|
-
this._changeDetectorRef.
|
|
1157
|
+
this._changeDetectorRef.markForCheck();
|
|
888
1158
|
}
|
|
889
1159
|
});
|
|
890
1160
|
}
|
|
@@ -894,12 +1164,12 @@ class Select2 {
|
|
|
894
1164
|
setTimeout(() => {
|
|
895
1165
|
if (!this._destroyed) {
|
|
896
1166
|
this.select(selectedOption);
|
|
897
|
-
this._changeDetectorRef.
|
|
1167
|
+
this._changeDetectorRef.markForCheck();
|
|
898
1168
|
}
|
|
899
1169
|
});
|
|
900
1170
|
}
|
|
901
1171
|
else {
|
|
902
|
-
this._changeDetectorRef.
|
|
1172
|
+
this._changeDetectorRef.markForCheck();
|
|
903
1173
|
}
|
|
904
1174
|
}
|
|
905
1175
|
updateSearchBox() {
|
|
@@ -969,7 +1239,7 @@ class Select2 {
|
|
|
969
1239
|
else {
|
|
970
1240
|
this._scrollToInitialOption();
|
|
971
1241
|
this._handleOnOpenAction(onOpenAction, event);
|
|
972
|
-
this._changeDetectorRef.
|
|
1242
|
+
this._changeDetectorRef.markForCheck();
|
|
973
1243
|
this.triggerRect();
|
|
974
1244
|
this.cdkConnectedOverlay().overlayRef?.updatePosition();
|
|
975
1245
|
}
|
|
@@ -1153,7 +1423,7 @@ class Select2 {
|
|
|
1153
1423
|
});
|
|
1154
1424
|
this.selectedOption = option;
|
|
1155
1425
|
}
|
|
1156
|
-
this._changeDetectorRef.
|
|
1426
|
+
this._changeDetectorRef.markForCheck();
|
|
1157
1427
|
}
|
|
1158
1428
|
clickExit() {
|
|
1159
1429
|
this._focus(false);
|
|
@@ -1374,7 +1644,6 @@ class Select2 {
|
|
|
1374
1644
|
data: this._data,
|
|
1375
1645
|
filteredData: (data) => {
|
|
1376
1646
|
this.filteredData.set(data);
|
|
1377
|
-
this._changeDetectorRef.markForCheck();
|
|
1378
1647
|
},
|
|
1379
1648
|
});
|
|
1380
1649
|
}
|
|
@@ -1462,6 +1731,24 @@ class Select2 {
|
|
|
1462
1731
|
data: this._data,
|
|
1463
1732
|
});
|
|
1464
1733
|
}
|
|
1734
|
+
_setupScrollListener() {
|
|
1735
|
+
const el = this.resultsElement;
|
|
1736
|
+
if (!el || !this.infiniteScroll()) {
|
|
1737
|
+
return;
|
|
1738
|
+
}
|
|
1739
|
+
this.toObservable.add(fromEvent(el, 'scroll')
|
|
1740
|
+
.pipe(debounceTime(this.infiniteScrollThrottle()))
|
|
1741
|
+
.subscribe(() => this._onScrollEvent(el.scrollTop, el.clientHeight, el.scrollHeight)));
|
|
1742
|
+
}
|
|
1743
|
+
_onScrollEvent(scrollTop, clientHeight, scrollHeight) {
|
|
1744
|
+
const threshold = (scrollHeight * this.infiniteScrollDistance()) / 10;
|
|
1745
|
+
if (scrollTop + clientHeight >= scrollHeight - threshold) {
|
|
1746
|
+
this.onScroll('down');
|
|
1747
|
+
}
|
|
1748
|
+
else if (scrollTop <= threshold) {
|
|
1749
|
+
this.onScroll('up');
|
|
1750
|
+
}
|
|
1751
|
+
}
|
|
1465
1752
|
drop(event) {
|
|
1466
1753
|
if (Array.isArray(this.selectedOption)) {
|
|
1467
1754
|
moveItemInArray(this.selectedOption, event.previousIndex, event.currentIndex);
|
|
@@ -1720,8 +2007,9 @@ class Select2 {
|
|
|
1720
2007
|
}
|
|
1721
2008
|
_isAbobeOverlay() {
|
|
1722
2009
|
const listPosition = this.listPosition();
|
|
1723
|
-
|
|
1724
|
-
|
|
2010
|
+
const overlayPosition = this._overlayPosition();
|
|
2011
|
+
return this.overlay() && overlayPosition && listPosition === 'auto'
|
|
2012
|
+
? overlayPosition === 'top'
|
|
1725
2013
|
: listPosition === 'above';
|
|
1726
2014
|
}
|
|
1727
2015
|
_updateFocusState(state) {
|
|
@@ -1734,50 +2022,21 @@ class Select2 {
|
|
|
1734
2022
|
this.focus.emit(this);
|
|
1735
2023
|
}
|
|
1736
2024
|
}
|
|
1737
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1738
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: Select2, isStandalone: true, selector: "select2, ng-select2", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, minCharForSearch: { classPropertyName: "minCharForSearch", publicName: "minCharForSearch", isSignal: true, isRequired: false, transformFunction: null }, displaySearchStatus: { classPropertyName: "displaySearchStatus", publicName: "displaySearchStatus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, limitSelection: { classPropertyName: "limitSelection", publicName: "limitSelection", isSignal: true, isRequired: false, transformFunction: null }, listPosition: { classPropertyName: "listPosition", publicName: "listPosition", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, multipleDrag: { classPropertyName: "multipleDrag", publicName: "multipleDrag", isSignal: true, isRequired: false, transformFunction: null }, styleMode: { classPropertyName: "styleMode", publicName: "styleMode", isSignal: true, isRequired: false, transformFunction: null }, noResultMessage: { classPropertyName: "noResultMessage", publicName: "noResultMessage", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, maxResultsMessage: { classPropertyName: "maxResultsMessage", publicName: "maxResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "infiniteScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThrottle: { classPropertyName: "infiniteScrollThrottle", publicName: "infiniteScrollThrottle", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, autoCreate: { classPropertyName: "autoCreate", publicName: "autoCreate", isSignal: true, isRequired: false, transformFunction: null }, noLabelTemplate: { classPropertyName: "noLabelTemplate", publicName: "noLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, editPattern: { classPropertyName: "editPattern", publicName: "editPattern", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, templateSelection: { classPropertyName: "templateSelection", publicName: "templateSelection", isSignal: true, isRequired: false, transformFunction: null }, resultMaxHeight: { classPropertyName: "resultMaxHeight", publicName: "resultMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, customSearchEnabled: { classPropertyName: "customSearchEnabled", publicName: "customSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, minCountForSearch: { classPropertyName: "minCountForSearch", publicName: "minCountForSearch", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideSelectedItems: { classPropertyName: "hideSelectedItems", publicName: "hideSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, resettable: { classPropertyName: "resettable", publicName: "resettable", isSignal: true, isRequired: false, transformFunction: null }, resetSelectedValue: { classPropertyName: "resetSelectedValue", publicName: "resetSelectedValue", isSignal: true, isRequired: false, transformFunction: null }, nativeKeyboard: { classPropertyName: "nativeKeyboard", publicName: "nativeKeyboard", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, selectionOverride: { classPropertyName: "selectionOverride", publicName: "selectionOverride", isSignal: true, isRequired: false, transformFunction: null }, selectionNoWrap: { classPropertyName: "selectionNoWrap", publicName: "selectionNoWrap", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, removeAllText: { classPropertyName: "removeAllText", publicName: "removeAllText", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaResetButtonDescription: { classPropertyName: "ariaResetButtonDescription", publicName: "ariaResetButtonDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { update: "update", autoCreateItem: "autoCreateItem", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", scroll: "scroll", removeOption: "removeOption" }, host: { listeners: { "document:click": "clickDetection($event)" }, properties: { "id": "id()", "class.select2-selection-nowrap": "selectionNoWrap()", "class.material": "this.classMaterial", "class.nostyle": "this.classNostyle", "class.borderless": "this.classBorderless", "class.select2-above": "this.select2above" } }, viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, isSignal: true }, { propertyName: "resultContainer", first: true, predicate: ["results"], descendants: true, isSignal: true }, { propertyName: "results", predicate: ["result"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"select2-label\" (click)=\"toggleOpenAndClose()\" [id]=\"idLabel()\">\n <ng-content select=\"select2-label, ng-select2-label\"></ng-content>\n @if (required()) {\n <span class=\"select2-required\" aria-hidden=\"true\"></span>\n }\n</label>\n\n<div\n class=\"select2 select2-container select2-container--default\"\n [class.select2-container--focus]=\"focused\"\n [class.select2-container--below]=\"!select2above\"\n [class.select2-container--above]=\"select2above\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-container--disabled]=\"disabled()\"\n [class.select2-container--readonly]=\"readonly()\"\n>\n <div\n [id]=\"idCombo()\"\n role=\"combobox\"\n class=\"selection\"\n #selection\n #trigger=\"cdkOverlayOrigin\"\n [tabindex]=\"!this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-expanded]=\"isOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"idOptions()\"\n [attr.aria-activedescendant]=\"isOpen ? hoveringOptionId() : null\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [attr.title]=\"title()\"\n [attr.aria-invalid]=\"_isErrorState() || ariaInvalid() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (click)=\"toggleOpenAndClose()\"\n (focus)=\"focusin()\"\n (focusout)=\"focusout($event)\"\n (keydown)=\"openKey($event)\"\n cdkOverlayOrigin\n [class.select2-focused]=\"focused\"\n >\n <div\n class=\"select2-selection\"\n [class.select2-selection--multiple]=\"multiple()\"\n [class.select2-selection--single]=\"!multiple()\"\n >\n @if (selectionOverride()) {\n <span class=\"select2-selection__override\" [innerHTML]=\"_selectionOverrideLabel()\"></span>\n\n @if (\n resettable() &&\n !(disabled() || readonly()) &&\n resetSelectedValue() !== _value &&\n ((!multiple() && select2Option) || (multiple() && select2Options.length > 0))\n ) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n } @else if (!multiple()) {\n <span\n class=\"select2-selection__rendered\"\n [title]=\"select2Option?.label || ''\"\n [attr.aria-live]=\"nativeKeyboard() && !isOpen ? 'polite' : null\"\n [dir]=\"select2Option?.dir\"\n >\n @if (!select2Option) {\n <span> </span>\n }\n @if (select2Option) {\n @if (!hasTemplate(select2Option, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"select2Option.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(select2Option, 'option', true); context: select2Option\" />\n }\n }\n <span\n [class.select2-selection__placeholder__option]=\"selectedOption\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n </span>\n\n @if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n <span class=\"select2-selection__arrow\" role=\"presentation\"> </span>\n } @else {\n <ul\n class=\"select2-selection__rendered\"\n cdkDropList\n cdkDropListOrientation=\"mixed\"\n [cdkDropListDisabled]=\"!multipleDrag()\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @if (!autoCreate()) {\n <span\n [class.select2-selection__placeholder__option]=\"select2Options.length > 0\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n }\n @for (op of selectedOption || []; track op.id) {\n <li\n class=\"select2-selection__choice\"\n [title]=\"op.label\"\n tabindex=\"0\"\n (focus)=\"_updateFocusState(true)\"\n (keydown.enter)=\"removeSelection($event, op)\"\n cdkDrag\n >\n @if (!(disabled() || readonly())) {\n <span\n (click)=\"removeSelection($event, op)\"\n class=\"select2-selection__choice__remove\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\u00D7</span\n >\n }\n @if (!hasTemplate(op, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"op.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(op, 'option', true); context: op\" />\n }\n </li>\n }\n @if (autoCreate()) {\n <li class=\"select2-selection__auto-create\" (focus)=\"stopEvent($event)\" (blur)=\"stopEvent($event)\">\n <input\n [id]=\"id() + '-create-field'\"\n [placeholder]=\"$any(selectedOption)?.length > 0 ? '' : (placeholder() ?? '')\"\n (click)=\"toggleOpenAndClose(false, true); stopEvent($event)\"\n (keydown)=\"keyDown($event, true)\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-create__field\"\n type=\"search\"\n role=\"textbox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n </li>\n }\n </ul>\n @if (resettable() && $any(selectedOption)?.length > 0 && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n }\n </div>\n </div>\n @if (!overlay()) {\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n }\n\n <div class=\"select2-subscript-wrapper\">\n <ng-content select=\"select2-hint, ng-select2-hint\"></ng-content>\n </div>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"select2-overlay-backdrop\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"this.isOpen && overlay()\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHeight]=\"overlayHeight\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n (backdropClick)=\"toggleOpenAndClose()\"\n>\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n</ng-template>\n\n<ng-template #containerTemplate>\n <div\n [id]=\"idOverlay()\"\n class=\"select2-container select2-container--default select2-container-dropdown\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-overlay]=\"overlay()\"\n [class.select2-position-auto]=\"listPosition() === 'auto'\"\n [class.select2-style-borderless]=\"styleMode() === 'borderless'\"\n >\n <div\n #dropdown\n class=\"select2-dropdown\"\n [class.select2-dropdown--below]=\"!select2above\"\n [class.select2-dropdown--above]=\"select2above\"\n >\n <div class=\"select2-search select2-search--dropdown\" [class.select2-search--hide]=\"isSearchboxHidden\">\n <input\n #searchInput\n [id]=\"id() + '-search-field'\"\n [value]=\"searchText\"\n (keydown)=\"keyDown($event, autoCreate())\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-search__field\"\n type=\"search\"\n role=\"combobox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.tabindex]=\"this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"idOptions()\"\n aria-expanded=\"true\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n />\n </div>\n\n <div class=\"select2-results\">\n <ul\n [id]=\"idOptions()\"\n #results\n class=\"select2-results__options\"\n [class.select2-grid]=\"grid() && isNumber(grid())\"\n [class.select2-grid-auto]=\"grid() && !isNumber(grid())\"\n [style.max-height]=\"resultMaxHeight()\"\n [style.--grid-size]=\"grid() || null\"\n role=\"listbox\"\n tabindex=\"-1\"\n infiniteScroll\n [infiniteScrollDisabled]=\"!infiniteScroll() && !isOpen\"\n [infiniteScrollDistance]=\"infiniteScrollDistance()\"\n [infiniteScrollThrottle]=\"infiniteScrollThrottle()\"\n [infiniteScrollContainer]=\"results\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-multiselectable]=\"multiple()\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n (scrolled)=\"onScroll('down')\"\n (scrolledUp)=\"onScroll('up')\"\n (keydown)=\"keyDown($event)\"\n >\n @if (showSelectAll() && multiple()) {\n <li class=\"select2-results__option select2-selectall\" (click)=\"selectAll()\" tabindex=\"1\" aria-selected>\n <div class=\"select2-label-content\">\n {{ selectAllTest() ? removeAllText() : selectAllText() }}\n </div>\n </li>\n }\n\n @for (groupOrOption of filteredData(); track groupOrOption.id; let i = $index) {\n @let group = _toGroup(groupOrOption);\n @if (group.options !== undefined) {\n <li class=\"select2-results__option select2-results__group\" [dir]=\"group.dir\">\n <span [id]=\"getElementId(groupOrOption)\">\n @if (!hasTemplate(group, 'group')) {\n <strong\n [attr.class]=\"'select2-results__group' + (group.classes ? ' ' + group.classes : '')\"\n [innerHTML]=\"group.label\"\n ></strong>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(group, 'group'); context: group\" />\n }\n </span>\n <ul\n class=\"select2-results__options select2-results__options--nested\"\n role=\"group\"\n [attr.aria-labelledby]=\"getElementId(groupOrOption)\"\n >\n @for (option of group.options; track option.id; let j = $index) {\n <li\n #result\n [id]=\"getElementId(option)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (!hasTemplate(option, 'option')) {\n <div\n class=\"select2-label-content\"\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\" />\n }\n </li>\n }\n </ul>\n </li>\n } @else {\n @let option = _toOption(groupOrOption);\n <li\n #result\n [id]=\"getElementId(groupOrOption)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (!hasTemplate(option, 'option')) {\n <div\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n class=\"select2-label-content\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\">\n </ng-container>\n }\n </li>\n }\n }\n @if (!filteredData()?.length && noResultMessage()) {\n <li class=\"select2-no-result select2-results__option\" [innerHTML]=\"noResultMessage()\"></li>\n }\n @if (maxResultsExceeded) {\n <li class=\"select2-too-much-result select2-results__option\" [innerHTML]=\"maxResultsMessage()\"></li>\n }\n </ul>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resetButton>\n <button\n type=\"button\"\n (focus)=\"_updateFocusState(true)\"\n (click)=\"reset($event)\"\n (keydown)=\"$event.stopPropagation()\"\n class=\"select2-selection__reset\"\n [attr.aria-description]=\"ariaResetButtonDescription()\"\n [attr.aria-controls]=\"idCombo()\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n</ng-template>\n", styles: [".select2-label{color:var(--select2-label-text-color, #000)}.select2-container{display:inline-block;position:relative;vertical-align:middle;box-sizing:border-box;margin:0;width:100%}.select2-container .select2-container-dropdown{position:absolute;opacity:0;width:0px}.select2-container .select2-selection--single{display:block;cursor:pointer;box-sizing:border-box;height:var(--select2-single-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;flex:1 1 auto;padding:var(--select2-selection-padding, 0 0 0 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container .select2-selection--multiple{display:block;cursor:pointer;box-sizing:border-box;min-height:var(--select2-multiple-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-flex;flex-wrap:wrap;gap:var(--select2-selection-multiple-gap, 2px 5px);padding-bottom:2px;padding-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__auto-create{display:flex;flex:1 1 150px;min-width:150px}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field{border:0;width:100%}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field:focus{outline:0;border:0}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;margin-top:5px;border:none;padding:0;font-size:100%}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{display:block;position:absolute;z-index:1051;box-sizing:border-box;border:1px solid var(--select2-dropdown-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-dropdown-background, white);width:100%;height:0;overflow:hidden}.select2-dropdown .select2-label-content{display:contents}.select2-results{display:block}.select2-results__options{margin:0;padding:0;list-style:none}.select2-results__options ::ng-deep .select2-highlight-text{background:var(--select2-highlight-text-background, transparent);color:var(--select2-highlight-text-color, inherit);font-weight:var(--select2-highlight-text-font-weight, 800)}.select2-results__option{padding:var(--select2-option-padding, 6px);color:var(--select2-option-text-color, #000);-webkit-user-select:none;user-select:none;text-align:initial}.select2-results__option[aria-selected]{cursor:pointer}.select2-container.select2-container-dropdown.select2-container--open{opacity:1;width:100%}.select2-container--open .select2-dropdown{height:auto;overflow:auto}.select2-container--open .select2-dropdown--above{display:flex;bottom:27px;flex-direction:column-reverse;border-bottom:var(--select2-dropdown-above-border-bottom, none);border-bottom-right-radius:var(--select2-dropdown-above-border-bottom-right-radius, 0);border-bottom-left-radius:var(--select2-dropdown-above-border-bottom-left-radius, 0)}.select2-container--open .select2-dropdown--below{border-top:var(--select2-dropdown-below-border-top, none);border-top-right-radius:var(--select2-dropdown-below-border-top-right-radius, 0);border-top-left-radius:var(--select2-dropdown-below-border-top-left-radius, 0)}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{box-sizing:border-box;padding:4px;width:100%}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{display:block;position:fixed;top:0;left:0;opacity:0;z-index:99;margin:0;border:0;padding:0;width:auto;min-width:100%;height:auto;min-height:100%}.select2-required:before{content:\"*\";color:var(--select2-required-color, red)}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;position:absolute!important;margin:-1px!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important}.select2-container--default .select2-selection--single{display:flex;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--select2-selection-text-color, #111);line-height:var(--select2-selection-line-height, 28px)}.select2-container--default .select2-selection--single .select2-selection__clear{float:right;cursor:pointer;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--select2-placeholder-color, #999)}.select2-container--default .select2-selection--single .select2-selection__placeholder span{overflow:hidden;text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--single .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--single .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--single .select2-selection__reset,.select2-container--default .select2-selection--single .select2-selection__arrow{display:flex;justify-content:center;align-items:center;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow:before{border-width:5px 4px 0;border-style:solid;border-color:var(--select2-arrow-color, #888) transparent;width:0;height:0;content:\" \"}.select2-container--default .select2-selection__reset{align-self:center;border:var(--select2-reset-border, none);border-radius:var(--select2-reset-border-radius, 4px);background:var(--select2-reset-background, transparent);height:fit-content;color:var(--select2-reset-color, #999)}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--disabled .select2-selection__choice__remove,.select2-container--default.select2-container--readonly .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--readonly .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--disabled .select2-selection--single,.select2-container--default.select2-container--disabled .select2-selection--multiple{cursor:default;background:var(--select2-selection-disabled-background, #eee)}.select2-container--default.select2-container--readonly .select2-selection--single,.select2-container--default.select2-container--readonly .select2-selection--multiple{background:var(--select2-selection-readonly-background, #eee)}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before{border-width:0 4px 5px;border-color:transparent transparent var(--select2-arrow-color, #888)}.select2-container--default .select2-selection--multiple{display:flex;cursor:text;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--multiple .select2-selection__rendered{flex:1 1 auto;align-items:center;box-sizing:border-box;margin:0;padding:var(--select2-selection-multiple-padding, 2px 5px);width:100%;min-height:1em;list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{line-height:var(--select2-selection-choice-line-height, 20px);list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;float:left;margin:-3px 0;width:100%;overflow:hidden;color:var(--select2-placeholder-color, #999);text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--multiple .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__clear{float:right;cursor:pointer;margin-top:5px;margin-right:10px;font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice{cursor:default;border:1px solid var(--select2-selection-choice-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-choice-background, #e4e4e4);padding:0 5px;color:var(--select2-selection-choice-text-color, #000)}.select2-container--default .select2-selection--multiple .select2-selection__choice.cdk-drag:not(.cdk-drag-disabled){cursor:move}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{display:inline-block;cursor:pointer;margin-right:2px;color:var(--select2-selection-choice-close-color, #999);font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--select2-selection-choice-hover-close-color, #333)}.select2-container--default.select2-container--focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-right-radius:0;border-top-left-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--select2-search-border-color, #aaa);border-radius:var(--select2-search-border-radius, 0px);background:1px solid var(--select2-search-background, #fff)}.select2-container--default .select2-search--inline .select2-search__field{-webkit-appearance:textfield;outline:none;box-shadow:none;border:none;background:transparent}.select2-container--default .select2-results>.select2-results__options{overflow-y:auto}.select2-container--default .select2-results__option.select2-results__group{grid-column:col-start/col-end;padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{background:var(--select2-option-disabled-background, transparent);color:var(--select2-option-disabled-text-color, #999)}.select2-container--default .select2-results__option[aria-selected=true]{background:var(--select2-option-selected-background, #ddd);color:var(--select2-option-selected-text-color, #000)}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-option-highlighted-background, #5897fb);color:var(--select2-option-highlighted-text-color, #fff)}.select2-container--default .select2-results__option--highlighted[aria-selected] ::ng-deep .select2-highlight-text{background:var(--select2-highlighted-highlight-text-background, transparent);color:var(--select2-highlighted-highlight-text-color, inherit);font-weight:var(--select2-highlighted-highlight-text-font-weight, 800)}.select2-container--default .select2-results__option--hide{display:none}.select2-container--default .select2-results__group{display:block;cursor:default;background:var(--select2-option-group-background, transparent);padding:6px;color:var(--select2-option-group-text-color, gray)}.select2-no-result{color:var(--select2-no-result-color, #888);font-style:var(--select2-no-result-font-style, italic)}.select2-too-much-result{color:var(--select2-too-much-result-color, #888);font-style:var(--select2-too-much-font-style, italic)}.select2-grid,.select2-grid ul{display:grid;grid-template-columns:[col-start] repeat(var(--grid-size),1fr) [col-end]}.select2-grid-auto,.select2-grid-auto ul{display:grid;grid-template-columns:[col-start] repeat(auto-fill,minmax(var(--grid-size, 100px),1fr)) [col-end]}.select2-container--default .select2-grid ul,.select2-container--default .select2-grid-auto ul{padding-left:var(--select2-option-padding, 6px)}.select2-container--default .select2-grid ul .select2-results__group,.select2-container--default .select2-grid-auto ul .select2-results__group{padding-left:0}.select2-container--default .select2-grid ul .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{padding-left:var(--select2-option-padding, 6px)}:host.nostyle .select2-dropdown{border-color:transparent}:host.nostyle .select2-selection--single,:host.nostyle .select2-selection--multiple{border-color:transparent;background:transparent}:host.nostyle .select2-container--default .select2-focused .select2-selection--single,:host.nostyle .select2-container--default .select2-focused .select2-selection--multiple,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.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)}:host.borderless .select2-selection--single,:host.borderless .select2-selection--multiple{border-color:transparent;background:transparent}:host.borderless .select2-container--default .select2-focused .select2-selection--single,:host.borderless .select2-container--default .select2-focused .select2-selection--multiple,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.select2-selection-nowrap .select2-selection--single.select2-selection,:host.select2-selection-nowrap .select2-selection--single.select2-selection span,:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection span,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{display:flex;flex-wrap:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection li,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection li{display:flex}:host.material{display:inline-block;width:300px}:host.material>.select2-container{vertical-align:inherit;padding-bottom:1.29688em}:host.material>.select2-container .selection{display:inline-flex;align-items:baseline;border-top:.84375em solid transparent;padding:.4375em 0;width:100%;height:auto}:host.material .select2-container--default .select2-selection--single,:host.material .select2-container--default .select2-selection--multiple{box-sizing:border-box;border:0;border-radius:0;width:100%;height:24px}:host.material .select2-container--default .select2-selection--single:before,:host.material .select2-container--default .select2-selection--multiple:before{display:block;position:absolute;bottom:1.65em;background:var(--select2-material-underline, #ddd);width:100%;height:1px;content:\" \"}:host.material .select2-container--default .select2-selection--single:after,:host.material .select2-container--default .select2-selection--multiple:after{display:block;position:absolute;bottom:1.63em;left:50%;transition:none;background:var(--select2-material-underline-active, #5a419e);width:0%;height:2px;content:\" \"}:host.material .select2-container--default .select2-selection--single .select2-selection__rendered,:host.material .select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-left:1px;line-height:inherit}:host.material .select2-container--default .select2-selection--single .select2-selection__placeholder,:host.material .select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;position:absolute;top:20px;left:0;transform-origin:0 21px;transition:transform .3s;color:var(--select2-material-placeholder-color, rgba(0, 0, 0, .38))}:host.material .select2-container--default .select2-container--open{bottom:1.6em;left:0}:host.material .select2-container--default .select2-selection__placeholder__option{transform:translateY(-1.5em) scale(.75) perspective(100px) translateZ(.001px);width:133.33333%}:host.material .select2-container--default .select2-selection__arrow{top:20px}:host.material .select2-container--default.select2-container--open .select2-selection--single:after,:host.material .select2-container--default.select2-container--open .select2-selection--multiple:after,:host.material .select2-container--default .select2-focused .select2-selection--single:after,:host.material .select2-container--default .select2-focused .select2-selection--multiple:after{left:0%;transition:width .3s cubic-bezier(.12,1,.77,1),left .3s cubic-bezier(.12,1,.77,1);width:100%}:host.material .select2-container--default .select2-dropdown{box-shadow:0 5px 5px #00000080;border:0;border-radius:0}:host.material .select2-container--default .select2-results__option[aria-selected=true],:host.material .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-material-option-selected-background, rgba(0, 0, 0, .04));color:var(--select2-material-option-highlighted-text-color, #000)}:host.material .select2-container--default .select2-results__option[aria-selected=true]{color:var(--select2-material-option-selected-text-color, #ff5722)}:host.material .select2-container--default.select2-container--disabled .select2-selection--single,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple,:host.material .select2-container--default.select2-container--readonly .select2-selection--single,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple{background:transparent}:host.material .select2-container--default.select2-container--disabled .select2-selection--single:before,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple:before{background:var(--select2-material-underline-disabled, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material .select2-container--default.select2-container--readonly .select2-selection--single:before,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple:before{background:var(--select2-material-underline-readonly, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:after,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:after{background:var(--select2-material-underline-invalid, red)}:host.material:not(.select2-container--open) .select2-focused .select2-selection--single,:host.material:not(.select2-container--open) .select2-focused .select2-selection--multiple{border:0}:host.material .select2-subscript-wrapper{position:absolute;top:calc(100% - 1.72917em);color:var(--select2-hint-text-color, #888);font-size:75%}::ng-deep .select2-overlay-backdrop{background:var(--select2-overlay-backdrop, transparent)}::ng-deep .cdk-overlay-container .select2-container .select2-dropdown.select2-dropdown--above{bottom:0}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown{margin-bottom:28px}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown.select2-dropdown--above{bottom:0;margin-top:28px;margin-bottom:0}::ng-deep .cdk-overlay-container .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)}@supports (-moz-appearance: none){select2.material .select2-container--default .select2-selection--single,select2.material .select2-container--default .select2-selection--multiple{height:26px}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: Select2HighlightPipe, name: "highlightText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2025
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2026
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: Select2, isStandalone: true, selector: "select2, ng-select2", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, minCharForSearch: { classPropertyName: "minCharForSearch", publicName: "minCharForSearch", isSignal: true, isRequired: false, transformFunction: null }, displaySearchStatus: { classPropertyName: "displaySearchStatus", publicName: "displaySearchStatus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, limitSelection: { classPropertyName: "limitSelection", publicName: "limitSelection", isSignal: true, isRequired: false, transformFunction: null }, listPosition: { classPropertyName: "listPosition", publicName: "listPosition", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, multipleDrag: { classPropertyName: "multipleDrag", publicName: "multipleDrag", isSignal: true, isRequired: false, transformFunction: null }, styleMode: { classPropertyName: "styleMode", publicName: "styleMode", isSignal: true, isRequired: false, transformFunction: null }, noResultMessage: { classPropertyName: "noResultMessage", publicName: "noResultMessage", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, maxResultsMessage: { classPropertyName: "maxResultsMessage", publicName: "maxResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "infiniteScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThrottle: { classPropertyName: "infiniteScrollThrottle", publicName: "infiniteScrollThrottle", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, autoCreate: { classPropertyName: "autoCreate", publicName: "autoCreate", isSignal: true, isRequired: false, transformFunction: null }, noLabelTemplate: { classPropertyName: "noLabelTemplate", publicName: "noLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, editPattern: { classPropertyName: "editPattern", publicName: "editPattern", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, templateSelection: { classPropertyName: "templateSelection", publicName: "templateSelection", isSignal: true, isRequired: false, transformFunction: null }, resultMaxHeight: { classPropertyName: "resultMaxHeight", publicName: "resultMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, customSearchEnabled: { classPropertyName: "customSearchEnabled", publicName: "customSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, minCountForSearch: { classPropertyName: "minCountForSearch", publicName: "minCountForSearch", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideSelectedItems: { classPropertyName: "hideSelectedItems", publicName: "hideSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, resettable: { classPropertyName: "resettable", publicName: "resettable", isSignal: true, isRequired: false, transformFunction: null }, resetSelectedValue: { classPropertyName: "resetSelectedValue", publicName: "resetSelectedValue", isSignal: true, isRequired: false, transformFunction: null }, nativeKeyboard: { classPropertyName: "nativeKeyboard", publicName: "nativeKeyboard", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, selectionOverride: { classPropertyName: "selectionOverride", publicName: "selectionOverride", isSignal: true, isRequired: false, transformFunction: null }, selectionNoWrap: { classPropertyName: "selectionNoWrap", publicName: "selectionNoWrap", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showOptionCheckbox: { classPropertyName: "showOptionCheckbox", publicName: "showOptionCheckbox", isSignal: true, isRequired: false, transformFunction: null }, removeAllText: { classPropertyName: "removeAllText", publicName: "removeAllText", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "ariaInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaResetButtonDescription: { classPropertyName: "ariaResetButtonDescription", publicName: "ariaResetButtonDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { update: "update", autoCreateItem: "autoCreateItem", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", scroll: "scroll", removeOption: "removeOption" }, host: { listeners: { "document:click": "clickDetection($event)" }, properties: { "id": "id()", "class.select2-selection-nowrap": "selectionNoWrap()", "class.material": "classMaterial()", "class.nostyle": "classNostyle()", "class.borderless": "classBorderless()", "class.select2-above": "select2above()" } }, queries: [{ propertyName: "_ngOptions", predicate: Select2OptionDirective, isSignal: true }, { propertyName: "_ngGroups", predicate: Select2GroupDirective, isSignal: true }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, isSignal: true }, { propertyName: "resultContainer", first: true, predicate: ["results"], descendants: true, isSignal: true }, { propertyName: "results", predicate: ["result"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"select2-label\" (click)=\"toggleOpenAndClose()\" [id]=\"idLabel()\">\n <ng-content select=\"select2-label, ng-select2-label\"></ng-content>\n @if (required()) {\n <span class=\"select2-required\" aria-hidden=\"true\"></span>\n }\n</label>\n\n<div\n class=\"select2 select2-container select2-container--default\"\n [class.select2-container--focus]=\"focused\"\n [class.select2-container--below]=\"!select2above()\"\n [class.select2-container--above]=\"select2above()\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-container--disabled]=\"disabled()\"\n [class.select2-container--readonly]=\"readonly()\"\n>\n <div\n [id]=\"idCombo()\"\n role=\"combobox\"\n class=\"selection\"\n #selection\n #trigger=\"cdkOverlayOrigin\"\n [tabindex]=\"!this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-expanded]=\"isOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"idOptions()\"\n [attr.aria-activedescendant]=\"isOpen ? hoveringOptionId() : null\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [attr.title]=\"title()\"\n [attr.aria-invalid]=\"_isErrorState() || ariaInvalid() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (click)=\"toggleOpenAndClose()\"\n (focus)=\"focusin()\"\n (focusout)=\"focusout($event)\"\n (keydown)=\"openKey($event)\"\n cdkOverlayOrigin\n [class.select2-focused]=\"focused\"\n >\n <div\n class=\"select2-selection\"\n [class.select2-selection--multiple]=\"multiple()\"\n [class.select2-selection--single]=\"!multiple()\"\n >\n @if (selectionOverride()) {\n <span class=\"select2-selection__override\" [innerHTML]=\"_selectionOverrideLabel()\"></span>\n\n @if (\n resettable() &&\n !(disabled() || readonly()) &&\n resetSelectedValue() !== _value &&\n ((!multiple() && select2Option) || (multiple() && select2Options.length > 0))\n ) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n } @else if (!multiple()) {\n <span\n class=\"select2-selection__rendered\"\n [title]=\"select2Option?.label || ''\"\n [attr.aria-live]=\"nativeKeyboard() && !isOpen ? 'polite' : null\"\n [dir]=\"select2Option?.dir\"\n >\n @if (!select2Option) {\n <span> </span>\n }\n @if (select2Option) {\n @if (!hasTemplate(select2Option, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"select2Option.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(select2Option, 'option', true); context: select2Option\" />\n }\n }\n <span\n [class.select2-selection__placeholder__option]=\"selectedOption\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n </span>\n\n @if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n <span class=\"select2-selection__arrow\" role=\"presentation\"> </span>\n } @else {\n <ul\n class=\"select2-selection__rendered\"\n cdkDropList\n cdkDropListOrientation=\"mixed\"\n [cdkDropListDisabled]=\"!multipleDrag()\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @if (!autoCreate()) {\n <span\n [class.select2-selection__placeholder__option]=\"select2Options.length > 0\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n }\n @for (op of selectedOption || []; track op.id) {\n <li\n class=\"select2-selection__choice\"\n [title]=\"op.label\"\n tabindex=\"0\"\n (focus)=\"_updateFocusState(true)\"\n (keydown.enter)=\"removeSelection($event, op)\"\n cdkDrag\n >\n @if (!(disabled() || readonly())) {\n <span\n (click)=\"removeSelection($event, op)\"\n class=\"select2-selection__choice__remove\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\u00D7</span\n >\n }\n @if (!hasTemplate(op, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"op.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(op, 'option', true); context: op\" />\n }\n </li>\n }\n @if (autoCreate()) {\n <li class=\"select2-selection__auto-create\" (focus)=\"stopEvent($event)\" (blur)=\"stopEvent($event)\">\n <input\n [id]=\"id() + '-create-field'\"\n [placeholder]=\"$any(selectedOption)?.length > 0 ? '' : (placeholder() ?? '')\"\n (click)=\"toggleOpenAndClose(false, true); stopEvent($event)\"\n (keydown)=\"keyDown($event, true)\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-create__field\"\n type=\"search\"\n role=\"textbox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n </li>\n }\n </ul>\n @if (resettable() && $any(selectedOption)?.length > 0 && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n }\n </div>\n </div>\n @if (!overlay()) {\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n }\n\n <div class=\"select2-subscript-wrapper\">\n <ng-content select=\"select2-hint, ng-select2-hint\" />\n </div>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"select2-overlay-backdrop\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"this.isOpen && overlay()\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHeight]=\"overlayHeight\"\n [cdkConnectedOverlayPositions]=\"_positions()\"\n (backdropClick)=\"toggleOpenAndClose()\"\n>\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n</ng-template>\n\n<ng-template #containerTemplate>\n <div\n [id]=\"idOverlay()\"\n class=\"select2-container select2-container--default select2-container-dropdown\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-overlay]=\"overlay()\"\n [class.select2-position-auto]=\"listPosition() === 'auto'\"\n [class.select2-style-borderless]=\"styleMode() === 'borderless'\"\n >\n <div\n #dropdown\n class=\"select2-dropdown\"\n [class.select2-dropdown--below]=\"!select2above()\"\n [class.select2-dropdown--above]=\"select2above()\"\n >\n <div class=\"select2-search select2-search--dropdown\" [class.select2-search--hide]=\"isSearchboxHidden\">\n <input\n #searchInput\n [id]=\"id() + '-search-field'\"\n [value]=\"searchText\"\n (keydown)=\"keyDown($event, autoCreate())\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-search__field\"\n type=\"search\"\n role=\"combobox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.tabindex]=\"this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"idOptions()\"\n aria-expanded=\"true\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n />\n </div>\n\n <div class=\"select2-results\">\n <ul\n [id]=\"idOptions()\"\n #results\n class=\"select2-results__options\"\n [class.select2-grid]=\"grid() && isNumber(grid())\"\n [class.select2-grid-auto]=\"grid() && !isNumber(grid())\"\n [style.max-height]=\"resultMaxHeight()\"\n [style.--grid-size]=\"grid() || null\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-multiselectable]=\"multiple()\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n (keydown)=\"keyDown($event)\"\n >\n @if (showSelectAll() && multiple()) {\n <li class=\"select2-results__option select2-selectall\" (click)=\"selectAll()\" tabindex=\"1\" aria-selected>\n <div class=\"select2-label-content\">\n {{ selectAllTest() ? removeAllText() : selectAllText() }}\n </div>\n </li>\n }\n\n @for (groupOrOption of filteredData(); track groupOrOption.id; let i = $index) {\n @let group = _toGroup(groupOrOption);\n @if (group.options !== undefined) {\n <li class=\"select2-results__option select2-results__group\" [dir]=\"group.dir\">\n <span [id]=\"getElementId(groupOrOption)\">\n @if (!hasTemplate(group, 'group')) {\n <strong\n [attr.class]=\"'select2-results__group' + (group.classes ? ' ' + group.classes : '')\"\n [innerHTML]=\"group.label\"\n ></strong>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(group, 'group'); context: group\" />\n }\n </span>\n <ul\n class=\"select2-results__options select2-results__options--nested\"\n role=\"group\"\n [attr.aria-labelledby]=\"getElementId(groupOrOption)\"\n >\n @for (option of group.options; track option.id; let j = $index) {\n <li\n #result\n [id]=\"getElementId(option)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (showOptionCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"select2-option-checkbox\"\n [checked]=\"isSelected(option) === 'true'\"\n [disabled]=\"isDisabled(option) === 'true'\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n />\n }\n @if (!hasTemplate(option, 'option')) {\n <div\n class=\"select2-label-content\"\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\" />\n }\n </li>\n }\n </ul>\n </li>\n } @else {\n @let option = _toOption(groupOrOption);\n <li\n #result\n [id]=\"getElementId(groupOrOption)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (showOptionCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"select2-option-checkbox\"\n [checked]=\"isSelected(option) === 'true'\"\n [disabled]=\"isDisabled(option) === 'true'\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n />\n }\n @if (!hasTemplate(option, 'option')) {\n <div\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n class=\"select2-label-content\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\">\n </ng-container>\n }\n </li>\n }\n }\n @if (!filteredData()?.length && noResultMessage()) {\n <li class=\"select2-no-result select2-results__option\" [innerHTML]=\"noResultMessage()\"></li>\n }\n @if (maxResultsExceeded) {\n <li class=\"select2-too-much-result select2-results__option\" [innerHTML]=\"maxResultsMessage()\"></li>\n }\n </ul>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resetButton>\n <button\n type=\"button\"\n (focus)=\"_updateFocusState(true)\"\n (click)=\"reset($event)\"\n (keydown)=\"$event.stopPropagation()\"\n class=\"select2-selection__reset\"\n [attr.aria-description]=\"ariaResetButtonDescription()\"\n [attr.aria-controls]=\"idCombo()\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n</ng-template>\n", styles: [".select2-label{color:var(--select2-label-text-color, #000)}.select2-container{display:inline-block;position:relative;vertical-align:middle;box-sizing:border-box;margin:0;width:100%}.select2-container .select2-container-dropdown{position:absolute;opacity:0;width:0px}.select2-container .select2-selection--single{display:block;cursor:pointer;box-sizing:border-box;height:var(--select2-single-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;flex:1 1 auto;padding:var(--select2-selection-padding, 0 0 0 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container .select2-selection--multiple{display:block;cursor:pointer;box-sizing:border-box;min-height:var(--select2-multiple-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-flex;flex-wrap:wrap;gap:var(--select2-selection-multiple-gap, 2px 5px);padding-bottom:2px;padding-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__auto-create{display:flex;flex:1 1 150px;min-width:150px}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field{border:0;width:100%}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field:focus{outline:0;border:0}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;margin-top:5px;border:none;padding:0;font-size:100%}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{display:block;position:absolute;z-index:1051;box-sizing:border-box;border:1px solid var(--select2-dropdown-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-dropdown-background, white);width:100%;height:0;overflow:hidden}.select2-dropdown .select2-label-content{display:contents}.select2-results{display:block}.select2-results__options{margin:0;padding:0;list-style:none}.select2-results__options ::ng-deep .select2-highlight-text{background:var(--select2-highlight-text-background, transparent);color:var(--select2-highlight-text-color, inherit);font-weight:var(--select2-highlight-text-font-weight, 800)}.select2-results__option{padding:var(--select2-option-padding, 6px);color:var(--select2-option-text-color, #000);-webkit-user-select:none;user-select:none;text-align:initial}.select2-results__option[aria-selected]{cursor:pointer}.select2-results__option .select2-option-checkbox{vertical-align:middle;margin-inline-end:var(--select2-option-checkbox-margin, 6px);pointer-events:none;accent-color:var(--select2-option-checkbox-color, currentColor)}.select2-results__option:has(>.select2-option-checkbox){display:flex}.select2-container.select2-container-dropdown.select2-container--open{opacity:1;width:100%}.select2-container--open .select2-dropdown{height:auto;overflow:auto}.select2-container--open .select2-dropdown--above{display:flex;bottom:27px;flex-direction:column-reverse;border-bottom:var(--select2-dropdown-above-border-bottom, none);border-bottom-right-radius:var(--select2-dropdown-above-border-bottom-right-radius, 0);border-bottom-left-radius:var(--select2-dropdown-above-border-bottom-left-radius, 0)}.select2-container--open .select2-dropdown--below{border-top:var(--select2-dropdown-below-border-top, none);border-top-right-radius:var(--select2-dropdown-below-border-top-right-radius, 0);border-top-left-radius:var(--select2-dropdown-below-border-top-left-radius, 0)}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{box-sizing:border-box;padding:4px;width:100%}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{display:block;position:fixed;top:0;left:0;opacity:0;z-index:99;margin:0;border:0;padding:0;width:auto;min-width:100%;height:auto;min-height:100%}.select2-required:before{content:\"*\";color:var(--select2-required-color, red)}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;position:absolute!important;margin:-1px!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important}.select2-container--default .select2-selection--single{display:flex;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--select2-selection-text-color, #111);line-height:var(--select2-selection-line-height, 28px)}.select2-container--default .select2-selection--single .select2-selection__clear{float:right;cursor:pointer;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--select2-placeholder-color, #999)}.select2-container--default .select2-selection--single .select2-selection__placeholder span{overflow:hidden;text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--single .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--single .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--single .select2-selection__reset,.select2-container--default .select2-selection--single .select2-selection__arrow{display:flex;justify-content:center;align-items:center;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow:before{border-width:5px 4px 0;border-style:solid;border-color:var(--select2-arrow-color, #888) transparent;width:0;height:0;content:\" \"}.select2-container--default .select2-selection__reset{align-self:center;border:var(--select2-reset-border, none);border-radius:var(--select2-reset-border-radius, 4px);background:var(--select2-reset-background, transparent);height:fit-content;color:var(--select2-reset-color, #999)}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--disabled .select2-selection__choice__remove,.select2-container--default.select2-container--readonly .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--readonly .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--disabled .select2-selection--single,.select2-container--default.select2-container--disabled .select2-selection--multiple{cursor:default;background:var(--select2-selection-disabled-background, #eee)}.select2-container--default.select2-container--readonly .select2-selection--single,.select2-container--default.select2-container--readonly .select2-selection--multiple{background:var(--select2-selection-readonly-background, #eee)}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before{border-width:0 4px 5px;border-color:transparent transparent var(--select2-arrow-color, #888)}.select2-container--default .select2-selection--multiple{display:flex;cursor:text;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--multiple .select2-selection__rendered{flex:1 1 auto;align-items:center;box-sizing:border-box;margin:0;padding:var(--select2-selection-multiple-padding, 2px 5px);width:100%;min-height:1em;list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{line-height:var(--select2-selection-choice-line-height, 20px);list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;float:left;margin:-3px 0;width:100%;overflow:hidden;color:var(--select2-placeholder-color, #999);text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--multiple .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__clear{float:right;cursor:pointer;margin-top:5px;margin-right:10px;font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice{cursor:default;border:1px solid var(--select2-selection-choice-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-choice-background, #e4e4e4);padding:0 5px;color:var(--select2-selection-choice-text-color, #000)}.select2-container--default .select2-selection--multiple .select2-selection__choice.cdk-drag:not(.cdk-drag-disabled){cursor:move}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{display:inline-block;cursor:pointer;margin-right:2px;color:var(--select2-selection-choice-close-color, #999);font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--select2-selection-choice-hover-close-color, #333)}.select2-container--default.select2-container--focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-right-radius:0;border-top-left-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--select2-search-border-color, #aaa);border-radius:var(--select2-search-border-radius, 0px);background:1px solid var(--select2-search-background, #fff)}.select2-container--default .select2-search--inline .select2-search__field{-webkit-appearance:textfield;outline:none;box-shadow:none;border:none;background:transparent}.select2-container--default .select2-results>.select2-results__options{overflow-y:auto}.select2-container--default .select2-results__option.select2-results__group{grid-column:col-start/col-end;padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{background:var(--select2-option-disabled-background, transparent);color:var(--select2-option-disabled-text-color, #999)}.select2-container--default .select2-results__option[aria-selected=true]{background:var(--select2-option-selected-background, #ddd);color:var(--select2-option-selected-text-color, #000)}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-option-highlighted-background, #5897fb);color:var(--select2-option-highlighted-text-color, #fff)}.select2-container--default .select2-results__option--highlighted[aria-selected] ::ng-deep .select2-highlight-text{background:var(--select2-highlighted-highlight-text-background, transparent);color:var(--select2-highlighted-highlight-text-color, inherit);font-weight:var(--select2-highlighted-highlight-text-font-weight, 800)}.select2-container--default .select2-results__option--hide{display:none}.select2-container--default .select2-results__group{display:block;cursor:default;background:var(--select2-option-group-background, transparent);padding:6px;color:var(--select2-option-group-text-color, gray)}.select2-no-result{color:var(--select2-no-result-color, #888);font-style:var(--select2-no-result-font-style, italic)}.select2-too-much-result{color:var(--select2-too-much-result-color, #888);font-style:var(--select2-too-much-font-style, italic)}.select2-grid,.select2-grid ul{display:grid;grid-template-columns:[col-start] repeat(var(--grid-size),1fr) [col-end]}.select2-grid-auto,.select2-grid-auto ul{display:grid;grid-template-columns:[col-start] repeat(auto-fill,minmax(var(--grid-size, 100px),1fr)) [col-end]}.select2-container--default .select2-grid ul,.select2-container--default .select2-grid-auto ul{padding-left:var(--select2-option-padding, 6px)}.select2-container--default .select2-grid ul .select2-results__group,.select2-container--default .select2-grid-auto ul .select2-results__group{padding-left:0}.select2-container--default .select2-grid ul .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{padding-left:var(--select2-option-padding, 6px)}:host.nostyle .select2-dropdown{border-color:transparent}:host.nostyle .select2-selection--single,:host.nostyle .select2-selection--multiple{border-color:transparent;background:transparent}:host.nostyle .select2-container--default .select2-focused .select2-selection--single,:host.nostyle .select2-container--default .select2-focused .select2-selection--multiple,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.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)}:host.borderless .select2-selection--single,:host.borderless .select2-selection--multiple{border-color:transparent;background:transparent}:host.borderless .select2-container--default .select2-focused .select2-selection--single,:host.borderless .select2-container--default .select2-focused .select2-selection--multiple,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.select2-selection-nowrap .select2-selection--single.select2-selection,:host.select2-selection-nowrap .select2-selection--single.select2-selection span,:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection span,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{display:flex;flex-wrap:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection li,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection li{display:flex}:host.material{display:inline-block;width:300px}:host.material>.select2-container{vertical-align:inherit;padding-bottom:1.29688em}:host.material>.select2-container .selection{display:inline-flex;align-items:baseline;border-top:.84375em solid transparent;padding:.4375em 0;width:100%;height:auto}:host.material .select2-container--default .select2-selection--single,:host.material .select2-container--default .select2-selection--multiple{box-sizing:border-box;border:0;border-radius:0;width:100%;height:24px}:host.material .select2-container--default .select2-selection--single:before,:host.material .select2-container--default .select2-selection--multiple:before{display:block;position:absolute;bottom:1.65em;background:var(--select2-material-underline, #ddd);width:100%;height:1px;content:\" \"}:host.material .select2-container--default .select2-selection--single:after,:host.material .select2-container--default .select2-selection--multiple:after{display:block;position:absolute;bottom:1.63em;left:50%;transition:none;background:var(--select2-material-underline-active, #5a419e);width:0%;height:2px;content:\" \"}:host.material .select2-container--default .select2-selection--single .select2-selection__rendered,:host.material .select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-left:1px;line-height:inherit}:host.material .select2-container--default .select2-selection--single .select2-selection__placeholder,:host.material .select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;position:absolute;top:20px;left:0;transform-origin:0 21px;transition:transform .3s;color:var(--select2-material-placeholder-color, rgba(0, 0, 0, .38))}:host.material .select2-container--default .select2-container--open{bottom:1.6em;left:0}:host.material .select2-container--default .select2-selection__placeholder__option{transform:translateY(-1.5em) scale(.75) perspective(100px) translateZ(.001px);width:133.33333%}:host.material .select2-container--default .select2-selection__arrow{top:20px}:host.material .select2-container--default.select2-container--open .select2-selection--single:after,:host.material .select2-container--default.select2-container--open .select2-selection--multiple:after,:host.material .select2-container--default .select2-focused .select2-selection--single:after,:host.material .select2-container--default .select2-focused .select2-selection--multiple:after{left:0%;transition:width .3s cubic-bezier(.12,1,.77,1),left .3s cubic-bezier(.12,1,.77,1);width:100%}:host.material .select2-container--default .select2-dropdown{box-shadow:0 5px 5px #00000080;border:0;border-radius:0}:host.material .select2-container--default .select2-results__option[aria-selected=true],:host.material .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-material-option-selected-background, rgba(0, 0, 0, .04));color:var(--select2-material-option-highlighted-text-color, #000)}:host.material .select2-container--default .select2-results__option[aria-selected=true]{color:var(--select2-material-option-selected-text-color, #ff5722)}:host.material .select2-container--default.select2-container--disabled .select2-selection--single,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple,:host.material .select2-container--default.select2-container--readonly .select2-selection--single,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple{background:transparent}:host.material .select2-container--default.select2-container--disabled .select2-selection--single:before,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple:before{background:var(--select2-material-underline-disabled, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material .select2-container--default.select2-container--readonly .select2-selection--single:before,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple:before{background:var(--select2-material-underline-readonly, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:after,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:after{background:var(--select2-material-underline-invalid, red)}:host.material:not(.select2-container--open) .select2-focused .select2-selection--single,:host.material:not(.select2-container--open) .select2-focused .select2-selection--multiple{border:0}:host.material .select2-subscript-wrapper{position:absolute;top:calc(100% - 1.72917em);color:var(--select2-hint-text-color, #888);font-size:75%}::ng-deep .select2-overlay-backdrop{background:var(--select2-overlay-backdrop, transparent)}::ng-deep .cdk-overlay-container .select2-container .select2-dropdown.select2-dropdown--above{bottom:0}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown{margin-bottom:28px}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown.select2-dropdown--above{bottom:0;margin-top:28px;margin-bottom:0}::ng-deep .cdk-overlay-container .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)}@supports (-moz-appearance: none){select2.material .select2-container--default .select2-selection--single,select2.material .select2-container--default .select2-selection--multiple{height:26px}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: Select2HighlightPipe, name: "highlightText" }] }); }
|
|
1739
2027
|
}
|
|
1740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: Select2, decorators: [{
|
|
1741
2029
|
type: Component,
|
|
1742
|
-
args: [{ selector: 'select2, ng-select2',
|
|
1743
|
-
CdkOverlayOrigin,
|
|
1744
|
-
NgTemplateOutlet,
|
|
1745
|
-
CdkConnectedOverlay,
|
|
1746
|
-
InfiniteScrollDirective,
|
|
1747
|
-
CdkDropList,
|
|
1748
|
-
CdkDrag,
|
|
1749
|
-
Select2HighlightPipe,
|
|
1750
|
-
], host: {
|
|
2030
|
+
args: [{ selector: 'select2, ng-select2', imports: [CdkOverlayOrigin, NgTemplateOutlet, CdkConnectedOverlay, CdkDropList, CdkDrag, Select2HighlightPipe], host: {
|
|
1751
2031
|
'[id]': 'id()',
|
|
1752
2032
|
'[class.select2-selection-nowrap]': 'selectionNoWrap()',
|
|
1753
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"select2-label\" (click)=\"toggleOpenAndClose()\" [id]=\"idLabel()\">\n <ng-content select=\"select2-label, ng-select2-label\"></ng-content>\n @if (required()) {\n <span class=\"select2-required\" aria-hidden=\"true\"></span>\n }\n</label>\n\n<div\n class=\"select2 select2-container select2-container--default\"\n [class.select2-container--focus]=\"focused\"\n [class.select2-container--below]=\"!select2above\"\n [class.select2-container--above]=\"select2above\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-container--disabled]=\"disabled()\"\n [class.select2-container--readonly]=\"readonly()\"\n>\n <div\n [id]=\"idCombo()\"\n role=\"combobox\"\n class=\"selection\"\n #selection\n #trigger=\"cdkOverlayOrigin\"\n [tabindex]=\"!this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-expanded]=\"isOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"idOptions()\"\n [attr.aria-activedescendant]=\"isOpen ? hoveringOptionId() : null\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [attr.title]=\"title()\"\n [attr.aria-invalid]=\"_isErrorState() || ariaInvalid() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (click)=\"toggleOpenAndClose()\"\n (focus)=\"focusin()\"\n (focusout)=\"focusout($event)\"\n (keydown)=\"openKey($event)\"\n cdkOverlayOrigin\n [class.select2-focused]=\"focused\"\n >\n <div\n class=\"select2-selection\"\n [class.select2-selection--multiple]=\"multiple()\"\n [class.select2-selection--single]=\"!multiple()\"\n >\n @if (selectionOverride()) {\n <span class=\"select2-selection__override\" [innerHTML]=\"_selectionOverrideLabel()\"></span>\n\n @if (\n resettable() &&\n !(disabled() || readonly()) &&\n resetSelectedValue() !== _value &&\n ((!multiple() && select2Option) || (multiple() && select2Options.length > 0))\n ) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n } @else if (!multiple()) {\n <span\n class=\"select2-selection__rendered\"\n [title]=\"select2Option?.label || ''\"\n [attr.aria-live]=\"nativeKeyboard() && !isOpen ? 'polite' : null\"\n [dir]=\"select2Option?.dir\"\n >\n @if (!select2Option) {\n <span> </span>\n }\n @if (select2Option) {\n @if (!hasTemplate(select2Option, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"select2Option.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(select2Option, 'option', true); context: select2Option\" />\n }\n }\n <span\n [class.select2-selection__placeholder__option]=\"selectedOption\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n </span>\n\n @if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n <span class=\"select2-selection__arrow\" role=\"presentation\"> </span>\n } @else {\n <ul\n class=\"select2-selection__rendered\"\n cdkDropList\n cdkDropListOrientation=\"mixed\"\n [cdkDropListDisabled]=\"!multipleDrag()\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @if (!autoCreate()) {\n <span\n [class.select2-selection__placeholder__option]=\"select2Options.length > 0\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n }\n @for (op of selectedOption || []; track op.id) {\n <li\n class=\"select2-selection__choice\"\n [title]=\"op.label\"\n tabindex=\"0\"\n (focus)=\"_updateFocusState(true)\"\n (keydown.enter)=\"removeSelection($event, op)\"\n cdkDrag\n >\n @if (!(disabled() || readonly())) {\n <span\n (click)=\"removeSelection($event, op)\"\n class=\"select2-selection__choice__remove\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\u00D7</span\n >\n }\n @if (!hasTemplate(op, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"op.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(op, 'option', true); context: op\" />\n }\n </li>\n }\n @if (autoCreate()) {\n <li class=\"select2-selection__auto-create\" (focus)=\"stopEvent($event)\" (blur)=\"stopEvent($event)\">\n <input\n [id]=\"id() + '-create-field'\"\n [placeholder]=\"$any(selectedOption)?.length > 0 ? '' : (placeholder() ?? '')\"\n (click)=\"toggleOpenAndClose(false, true); stopEvent($event)\"\n (keydown)=\"keyDown($event, true)\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-create__field\"\n type=\"search\"\n role=\"textbox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n </li>\n }\n </ul>\n @if (resettable() && $any(selectedOption)?.length > 0 && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n }\n </div>\n </div>\n @if (!overlay()) {\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n }\n\n <div class=\"select2-subscript-wrapper\">\n <ng-content select=\"select2-hint, ng-select2-hint\"></ng-content>\n </div>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"select2-overlay-backdrop\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"this.isOpen && overlay()\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHeight]=\"overlayHeight\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n (backdropClick)=\"toggleOpenAndClose()\"\n>\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n</ng-template>\n\n<ng-template #containerTemplate>\n <div\n [id]=\"idOverlay()\"\n class=\"select2-container select2-container--default select2-container-dropdown\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-overlay]=\"overlay()\"\n [class.select2-position-auto]=\"listPosition() === 'auto'\"\n [class.select2-style-borderless]=\"styleMode() === 'borderless'\"\n >\n <div\n #dropdown\n class=\"select2-dropdown\"\n [class.select2-dropdown--below]=\"!select2above\"\n [class.select2-dropdown--above]=\"select2above\"\n >\n <div class=\"select2-search select2-search--dropdown\" [class.select2-search--hide]=\"isSearchboxHidden\">\n <input\n #searchInput\n [id]=\"id() + '-search-field'\"\n [value]=\"searchText\"\n (keydown)=\"keyDown($event, autoCreate())\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-search__field\"\n type=\"search\"\n role=\"combobox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.tabindex]=\"this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"idOptions()\"\n aria-expanded=\"true\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n />\n </div>\n\n <div class=\"select2-results\">\n <ul\n [id]=\"idOptions()\"\n #results\n class=\"select2-results__options\"\n [class.select2-grid]=\"grid() && isNumber(grid())\"\n [class.select2-grid-auto]=\"grid() && !isNumber(grid())\"\n [style.max-height]=\"resultMaxHeight()\"\n [style.--grid-size]=\"grid() || null\"\n role=\"listbox\"\n tabindex=\"-1\"\n infiniteScroll\n [infiniteScrollDisabled]=\"!infiniteScroll() && !isOpen\"\n [infiniteScrollDistance]=\"infiniteScrollDistance()\"\n [infiniteScrollThrottle]=\"infiniteScrollThrottle()\"\n [infiniteScrollContainer]=\"results\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-multiselectable]=\"multiple()\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n (scrolled)=\"onScroll('down')\"\n (scrolledUp)=\"onScroll('up')\"\n (keydown)=\"keyDown($event)\"\n >\n @if (showSelectAll() && multiple()) {\n <li class=\"select2-results__option select2-selectall\" (click)=\"selectAll()\" tabindex=\"1\" aria-selected>\n <div class=\"select2-label-content\">\n {{ selectAllTest() ? removeAllText() : selectAllText() }}\n </div>\n </li>\n }\n\n @for (groupOrOption of filteredData(); track groupOrOption.id; let i = $index) {\n @let group = _toGroup(groupOrOption);\n @if (group.options !== undefined) {\n <li class=\"select2-results__option select2-results__group\" [dir]=\"group.dir\">\n <span [id]=\"getElementId(groupOrOption)\">\n @if (!hasTemplate(group, 'group')) {\n <strong\n [attr.class]=\"'select2-results__group' + (group.classes ? ' ' + group.classes : '')\"\n [innerHTML]=\"group.label\"\n ></strong>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(group, 'group'); context: group\" />\n }\n </span>\n <ul\n class=\"select2-results__options select2-results__options--nested\"\n role=\"group\"\n [attr.aria-labelledby]=\"getElementId(groupOrOption)\"\n >\n @for (option of group.options; track option.id; let j = $index) {\n <li\n #result\n [id]=\"getElementId(option)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (!hasTemplate(option, 'option')) {\n <div\n class=\"select2-label-content\"\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\" />\n }\n </li>\n }\n </ul>\n </li>\n } @else {\n @let option = _toOption(groupOrOption);\n <li\n #result\n [id]=\"getElementId(groupOrOption)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (!hasTemplate(option, 'option')) {\n <div\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n class=\"select2-label-content\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\">\n </ng-container>\n }\n </li>\n }\n }\n @if (!filteredData()?.length && noResultMessage()) {\n <li class=\"select2-no-result select2-results__option\" [innerHTML]=\"noResultMessage()\"></li>\n }\n @if (maxResultsExceeded) {\n <li class=\"select2-too-much-result select2-results__option\" [innerHTML]=\"maxResultsMessage()\"></li>\n }\n </ul>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resetButton>\n <button\n type=\"button\"\n (focus)=\"_updateFocusState(true)\"\n (click)=\"reset($event)\"\n (keydown)=\"$event.stopPropagation()\"\n class=\"select2-selection__reset\"\n [attr.aria-description]=\"ariaResetButtonDescription()\"\n [attr.aria-controls]=\"idCombo()\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n</ng-template>\n", styles: [".select2-label{color:var(--select2-label-text-color, #000)}.select2-container{display:inline-block;position:relative;vertical-align:middle;box-sizing:border-box;margin:0;width:100%}.select2-container .select2-container-dropdown{position:absolute;opacity:0;width:0px}.select2-container .select2-selection--single{display:block;cursor:pointer;box-sizing:border-box;height:var(--select2-single-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;flex:1 1 auto;padding:var(--select2-selection-padding, 0 0 0 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container .select2-selection--multiple{display:block;cursor:pointer;box-sizing:border-box;min-height:var(--select2-multiple-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-flex;flex-wrap:wrap;gap:var(--select2-selection-multiple-gap, 2px 5px);padding-bottom:2px;padding-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__auto-create{display:flex;flex:1 1 150px;min-width:150px}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field{border:0;width:100%}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field:focus{outline:0;border:0}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;margin-top:5px;border:none;padding:0;font-size:100%}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{display:block;position:absolute;z-index:1051;box-sizing:border-box;border:1px solid var(--select2-dropdown-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-dropdown-background, white);width:100%;height:0;overflow:hidden}.select2-dropdown .select2-label-content{display:contents}.select2-results{display:block}.select2-results__options{margin:0;padding:0;list-style:none}.select2-results__options ::ng-deep .select2-highlight-text{background:var(--select2-highlight-text-background, transparent);color:var(--select2-highlight-text-color, inherit);font-weight:var(--select2-highlight-text-font-weight, 800)}.select2-results__option{padding:var(--select2-option-padding, 6px);color:var(--select2-option-text-color, #000);-webkit-user-select:none;user-select:none;text-align:initial}.select2-results__option[aria-selected]{cursor:pointer}.select2-container.select2-container-dropdown.select2-container--open{opacity:1;width:100%}.select2-container--open .select2-dropdown{height:auto;overflow:auto}.select2-container--open .select2-dropdown--above{display:flex;bottom:27px;flex-direction:column-reverse;border-bottom:var(--select2-dropdown-above-border-bottom, none);border-bottom-right-radius:var(--select2-dropdown-above-border-bottom-right-radius, 0);border-bottom-left-radius:var(--select2-dropdown-above-border-bottom-left-radius, 0)}.select2-container--open .select2-dropdown--below{border-top:var(--select2-dropdown-below-border-top, none);border-top-right-radius:var(--select2-dropdown-below-border-top-right-radius, 0);border-top-left-radius:var(--select2-dropdown-below-border-top-left-radius, 0)}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{box-sizing:border-box;padding:4px;width:100%}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{display:block;position:fixed;top:0;left:0;opacity:0;z-index:99;margin:0;border:0;padding:0;width:auto;min-width:100%;height:auto;min-height:100%}.select2-required:before{content:\"*\";color:var(--select2-required-color, red)}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;position:absolute!important;margin:-1px!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important}.select2-container--default .select2-selection--single{display:flex;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--select2-selection-text-color, #111);line-height:var(--select2-selection-line-height, 28px)}.select2-container--default .select2-selection--single .select2-selection__clear{float:right;cursor:pointer;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--select2-placeholder-color, #999)}.select2-container--default .select2-selection--single .select2-selection__placeholder span{overflow:hidden;text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--single .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--single .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--single .select2-selection__reset,.select2-container--default .select2-selection--single .select2-selection__arrow{display:flex;justify-content:center;align-items:center;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow:before{border-width:5px 4px 0;border-style:solid;border-color:var(--select2-arrow-color, #888) transparent;width:0;height:0;content:\" \"}.select2-container--default .select2-selection__reset{align-self:center;border:var(--select2-reset-border, none);border-radius:var(--select2-reset-border-radius, 4px);background:var(--select2-reset-background, transparent);height:fit-content;color:var(--select2-reset-color, #999)}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--disabled .select2-selection__choice__remove,.select2-container--default.select2-container--readonly .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--readonly .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--disabled .select2-selection--single,.select2-container--default.select2-container--disabled .select2-selection--multiple{cursor:default;background:var(--select2-selection-disabled-background, #eee)}.select2-container--default.select2-container--readonly .select2-selection--single,.select2-container--default.select2-container--readonly .select2-selection--multiple{background:var(--select2-selection-readonly-background, #eee)}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before{border-width:0 4px 5px;border-color:transparent transparent var(--select2-arrow-color, #888)}.select2-container--default .select2-selection--multiple{display:flex;cursor:text;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--multiple .select2-selection__rendered{flex:1 1 auto;align-items:center;box-sizing:border-box;margin:0;padding:var(--select2-selection-multiple-padding, 2px 5px);width:100%;min-height:1em;list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{line-height:var(--select2-selection-choice-line-height, 20px);list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;float:left;margin:-3px 0;width:100%;overflow:hidden;color:var(--select2-placeholder-color, #999);text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--multiple .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__clear{float:right;cursor:pointer;margin-top:5px;margin-right:10px;font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice{cursor:default;border:1px solid var(--select2-selection-choice-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-choice-background, #e4e4e4);padding:0 5px;color:var(--select2-selection-choice-text-color, #000)}.select2-container--default .select2-selection--multiple .select2-selection__choice.cdk-drag:not(.cdk-drag-disabled){cursor:move}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{display:inline-block;cursor:pointer;margin-right:2px;color:var(--select2-selection-choice-close-color, #999);font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--select2-selection-choice-hover-close-color, #333)}.select2-container--default.select2-container--focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-right-radius:0;border-top-left-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--select2-search-border-color, #aaa);border-radius:var(--select2-search-border-radius, 0px);background:1px solid var(--select2-search-background, #fff)}.select2-container--default .select2-search--inline .select2-search__field{-webkit-appearance:textfield;outline:none;box-shadow:none;border:none;background:transparent}.select2-container--default .select2-results>.select2-results__options{overflow-y:auto}.select2-container--default .select2-results__option.select2-results__group{grid-column:col-start/col-end;padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{background:var(--select2-option-disabled-background, transparent);color:var(--select2-option-disabled-text-color, #999)}.select2-container--default .select2-results__option[aria-selected=true]{background:var(--select2-option-selected-background, #ddd);color:var(--select2-option-selected-text-color, #000)}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-option-highlighted-background, #5897fb);color:var(--select2-option-highlighted-text-color, #fff)}.select2-container--default .select2-results__option--highlighted[aria-selected] ::ng-deep .select2-highlight-text{background:var(--select2-highlighted-highlight-text-background, transparent);color:var(--select2-highlighted-highlight-text-color, inherit);font-weight:var(--select2-highlighted-highlight-text-font-weight, 800)}.select2-container--default .select2-results__option--hide{display:none}.select2-container--default .select2-results__group{display:block;cursor:default;background:var(--select2-option-group-background, transparent);padding:6px;color:var(--select2-option-group-text-color, gray)}.select2-no-result{color:var(--select2-no-result-color, #888);font-style:var(--select2-no-result-font-style, italic)}.select2-too-much-result{color:var(--select2-too-much-result-color, #888);font-style:var(--select2-too-much-font-style, italic)}.select2-grid,.select2-grid ul{display:grid;grid-template-columns:[col-start] repeat(var(--grid-size),1fr) [col-end]}.select2-grid-auto,.select2-grid-auto ul{display:grid;grid-template-columns:[col-start] repeat(auto-fill,minmax(var(--grid-size, 100px),1fr)) [col-end]}.select2-container--default .select2-grid ul,.select2-container--default .select2-grid-auto ul{padding-left:var(--select2-option-padding, 6px)}.select2-container--default .select2-grid ul .select2-results__group,.select2-container--default .select2-grid-auto ul .select2-results__group{padding-left:0}.select2-container--default .select2-grid ul .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{padding-left:var(--select2-option-padding, 6px)}:host.nostyle .select2-dropdown{border-color:transparent}:host.nostyle .select2-selection--single,:host.nostyle .select2-selection--multiple{border-color:transparent;background:transparent}:host.nostyle .select2-container--default .select2-focused .select2-selection--single,:host.nostyle .select2-container--default .select2-focused .select2-selection--multiple,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.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)}:host.borderless .select2-selection--single,:host.borderless .select2-selection--multiple{border-color:transparent;background:transparent}:host.borderless .select2-container--default .select2-focused .select2-selection--single,:host.borderless .select2-container--default .select2-focused .select2-selection--multiple,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.select2-selection-nowrap .select2-selection--single.select2-selection,:host.select2-selection-nowrap .select2-selection--single.select2-selection span,:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection span,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{display:flex;flex-wrap:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection li,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection li{display:flex}:host.material{display:inline-block;width:300px}:host.material>.select2-container{vertical-align:inherit;padding-bottom:1.29688em}:host.material>.select2-container .selection{display:inline-flex;align-items:baseline;border-top:.84375em solid transparent;padding:.4375em 0;width:100%;height:auto}:host.material .select2-container--default .select2-selection--single,:host.material .select2-container--default .select2-selection--multiple{box-sizing:border-box;border:0;border-radius:0;width:100%;height:24px}:host.material .select2-container--default .select2-selection--single:before,:host.material .select2-container--default .select2-selection--multiple:before{display:block;position:absolute;bottom:1.65em;background:var(--select2-material-underline, #ddd);width:100%;height:1px;content:\" \"}:host.material .select2-container--default .select2-selection--single:after,:host.material .select2-container--default .select2-selection--multiple:after{display:block;position:absolute;bottom:1.63em;left:50%;transition:none;background:var(--select2-material-underline-active, #5a419e);width:0%;height:2px;content:\" \"}:host.material .select2-container--default .select2-selection--single .select2-selection__rendered,:host.material .select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-left:1px;line-height:inherit}:host.material .select2-container--default .select2-selection--single .select2-selection__placeholder,:host.material .select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;position:absolute;top:20px;left:0;transform-origin:0 21px;transition:transform .3s;color:var(--select2-material-placeholder-color, rgba(0, 0, 0, .38))}:host.material .select2-container--default .select2-container--open{bottom:1.6em;left:0}:host.material .select2-container--default .select2-selection__placeholder__option{transform:translateY(-1.5em) scale(.75) perspective(100px) translateZ(.001px);width:133.33333%}:host.material .select2-container--default .select2-selection__arrow{top:20px}:host.material .select2-container--default.select2-container--open .select2-selection--single:after,:host.material .select2-container--default.select2-container--open .select2-selection--multiple:after,:host.material .select2-container--default .select2-focused .select2-selection--single:after,:host.material .select2-container--default .select2-focused .select2-selection--multiple:after{left:0%;transition:width .3s cubic-bezier(.12,1,.77,1),left .3s cubic-bezier(.12,1,.77,1);width:100%}:host.material .select2-container--default .select2-dropdown{box-shadow:0 5px 5px #00000080;border:0;border-radius:0}:host.material .select2-container--default .select2-results__option[aria-selected=true],:host.material .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-material-option-selected-background, rgba(0, 0, 0, .04));color:var(--select2-material-option-highlighted-text-color, #000)}:host.material .select2-container--default .select2-results__option[aria-selected=true]{color:var(--select2-material-option-selected-text-color, #ff5722)}:host.material .select2-container--default.select2-container--disabled .select2-selection--single,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple,:host.material .select2-container--default.select2-container--readonly .select2-selection--single,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple{background:transparent}:host.material .select2-container--default.select2-container--disabled .select2-selection--single:before,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple:before{background:var(--select2-material-underline-disabled, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material .select2-container--default.select2-container--readonly .select2-selection--single:before,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple:before{background:var(--select2-material-underline-readonly, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:after,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:after{background:var(--select2-material-underline-invalid, red)}:host.material:not(.select2-container--open) .select2-focused .select2-selection--single,:host.material:not(.select2-container--open) .select2-focused .select2-selection--multiple{border:0}:host.material .select2-subscript-wrapper{position:absolute;top:calc(100% - 1.72917em);color:var(--select2-hint-text-color, #888);font-size:75%}::ng-deep .select2-overlay-backdrop{background:var(--select2-overlay-backdrop, transparent)}::ng-deep .cdk-overlay-container .select2-container .select2-dropdown.select2-dropdown--above{bottom:0}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown{margin-bottom:28px}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown.select2-dropdown--above{bottom:0;margin-top:28px;margin-bottom:0}::ng-deep .cdk-overlay-container .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)}@supports (-moz-appearance: none){select2.material .select2-container--default .select2-selection--single,select2.material .select2-container--default .select2-selection--multiple{height:26px}}\n"] }]
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
}] }, { type: i2.NgControl, decorators: [{
|
|
1759
|
-
|
|
1760
|
-
}, {
|
|
1761
|
-
type: Optional
|
|
1762
|
-
}] }, { type: undefined, decorators: [{
|
|
1763
|
-
type: Attribute,
|
|
1764
|
-
args: ['tabindex']
|
|
1765
|
-
}] }], propDecorators: { classMaterial: [{
|
|
1766
|
-
type: HostBinding,
|
|
1767
|
-
args: ['class.material']
|
|
1768
|
-
}], classNostyle: [{
|
|
1769
|
-
type: HostBinding,
|
|
1770
|
-
args: ['class.nostyle']
|
|
1771
|
-
}], classBorderless: [{
|
|
1772
|
-
type: HostBinding,
|
|
1773
|
-
args: ['class.borderless']
|
|
1774
|
-
}], select2above: [{
|
|
1775
|
-
type: HostBinding,
|
|
1776
|
-
args: ['class.select2-above']
|
|
1777
|
-
}], clickDetection: [{
|
|
1778
|
-
type: HostListener,
|
|
1779
|
-
args: ['document:click', ['$event']]
|
|
1780
|
-
}] } });
|
|
2033
|
+
'[class.material]': 'classMaterial()',
|
|
2034
|
+
'[class.nostyle]': 'classNostyle()',
|
|
2035
|
+
'[class.borderless]': 'classBorderless()',
|
|
2036
|
+
'[class.select2-above]': 'select2above()',
|
|
2037
|
+
'(document:click)': 'clickDetection($event)',
|
|
2038
|
+
}, template: "<label class=\"select2-label\" (click)=\"toggleOpenAndClose()\" [id]=\"idLabel()\">\n <ng-content select=\"select2-label, ng-select2-label\"></ng-content>\n @if (required()) {\n <span class=\"select2-required\" aria-hidden=\"true\"></span>\n }\n</label>\n\n<div\n class=\"select2 select2-container select2-container--default\"\n [class.select2-container--focus]=\"focused\"\n [class.select2-container--below]=\"!select2above()\"\n [class.select2-container--above]=\"select2above()\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-container--disabled]=\"disabled()\"\n [class.select2-container--readonly]=\"readonly()\"\n>\n <div\n [id]=\"idCombo()\"\n role=\"combobox\"\n class=\"selection\"\n #selection\n #trigger=\"cdkOverlayOrigin\"\n [tabindex]=\"!this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-expanded]=\"isOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"idOptions()\"\n [attr.aria-activedescendant]=\"isOpen ? hoveringOptionId() : null\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [attr.title]=\"title()\"\n [attr.aria-invalid]=\"_isErrorState() || ariaInvalid() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n (click)=\"toggleOpenAndClose()\"\n (focus)=\"focusin()\"\n (focusout)=\"focusout($event)\"\n (keydown)=\"openKey($event)\"\n cdkOverlayOrigin\n [class.select2-focused]=\"focused\"\n >\n <div\n class=\"select2-selection\"\n [class.select2-selection--multiple]=\"multiple()\"\n [class.select2-selection--single]=\"!multiple()\"\n >\n @if (selectionOverride()) {\n <span class=\"select2-selection__override\" [innerHTML]=\"_selectionOverrideLabel()\"></span>\n\n @if (\n resettable() &&\n !(disabled() || readonly()) &&\n resetSelectedValue() !== _value &&\n ((!multiple() && select2Option) || (multiple() && select2Options.length > 0))\n ) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n } @else if (!multiple()) {\n <span\n class=\"select2-selection__rendered\"\n [title]=\"select2Option?.label || ''\"\n [attr.aria-live]=\"nativeKeyboard() && !isOpen ? 'polite' : null\"\n [dir]=\"select2Option?.dir\"\n >\n @if (!select2Option) {\n <span> </span>\n }\n @if (select2Option) {\n @if (!hasTemplate(select2Option, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"select2Option.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(select2Option, 'option', true); context: select2Option\" />\n }\n }\n <span\n [class.select2-selection__placeholder__option]=\"selectedOption\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n </span>\n\n @if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n <span class=\"select2-selection__arrow\" role=\"presentation\"> </span>\n } @else {\n <ul\n class=\"select2-selection__rendered\"\n cdkDropList\n cdkDropListOrientation=\"mixed\"\n [cdkDropListDisabled]=\"!multipleDrag()\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @if (!autoCreate()) {\n <span\n [class.select2-selection__placeholder__option]=\"select2Options.length > 0\"\n class=\"select2-selection__placeholder\"\n >{{ placeholder() }}</span\n >\n }\n @for (op of selectedOption || []; track op.id) {\n <li\n class=\"select2-selection__choice\"\n [title]=\"op.label\"\n tabindex=\"0\"\n (focus)=\"_updateFocusState(true)\"\n (keydown.enter)=\"removeSelection($event, op)\"\n cdkDrag\n >\n @if (!(disabled() || readonly())) {\n <span\n (click)=\"removeSelection($event, op)\"\n class=\"select2-selection__choice__remove\"\n role=\"presentation\"\n aria-hidden=\"true\"\n >\u00D7</span\n >\n }\n @if (!hasTemplate(op, 'option', true) || noLabelTemplate()) {\n <span [innerHTML]=\"op.label\"></span>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(op, 'option', true); context: op\" />\n }\n </li>\n }\n @if (autoCreate()) {\n <li class=\"select2-selection__auto-create\" (focus)=\"stopEvent($event)\" (blur)=\"stopEvent($event)\">\n <input\n [id]=\"id() + '-create-field'\"\n [placeholder]=\"$any(selectedOption)?.length > 0 ? '' : (placeholder() ?? '')\"\n (click)=\"toggleOpenAndClose(false, true); stopEvent($event)\"\n (keydown)=\"keyDown($event, true)\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-create__field\"\n type=\"search\"\n role=\"textbox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n </li>\n }\n </ul>\n @if (resettable() && $any(selectedOption)?.length > 0 && !(disabled() || readonly())) {\n <ng-container *ngTemplateOutlet=\"resetButton\" />\n }\n }\n </div>\n </div>\n @if (!overlay()) {\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n }\n\n <div class=\"select2-subscript-wrapper\">\n <ng-content select=\"select2-hint, ng-select2-hint\" />\n </div>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"select2-overlay-backdrop\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"this.isOpen && overlay()\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n [cdkConnectedOverlayHeight]=\"overlayHeight\"\n [cdkConnectedOverlayPositions]=\"_positions()\"\n (backdropClick)=\"toggleOpenAndClose()\"\n>\n <ng-container *ngTemplateOutlet=\"containerTemplate\" />\n</ng-template>\n\n<ng-template #containerTemplate>\n <div\n [id]=\"idOverlay()\"\n class=\"select2-container select2-container--default select2-container-dropdown\"\n [class.select2-container--open]=\"isOpen\"\n [class.select2-overlay]=\"overlay()\"\n [class.select2-position-auto]=\"listPosition() === 'auto'\"\n [class.select2-style-borderless]=\"styleMode() === 'borderless'\"\n >\n <div\n #dropdown\n class=\"select2-dropdown\"\n [class.select2-dropdown--below]=\"!select2above()\"\n [class.select2-dropdown--above]=\"select2above()\"\n >\n <div class=\"select2-search select2-search--dropdown\" [class.select2-search--hide]=\"isSearchboxHidden\">\n <input\n #searchInput\n [id]=\"id() + '-search-field'\"\n [value]=\"searchText\"\n (keydown)=\"keyDown($event, autoCreate())\"\n (keyup)=\"searchUpdate($event)\"\n (change)=\"prevChange($event)\"\n class=\"select2-search__field\"\n type=\"search\"\n role=\"combobox\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.tabindex]=\"this.isOpen ? _tabIndex : '-1'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"idOptions()\"\n aria-expanded=\"true\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n />\n </div>\n\n <div class=\"select2-results\">\n <ul\n [id]=\"idOptions()\"\n #results\n class=\"select2-results__options\"\n [class.select2-grid]=\"grid() && isNumber(grid())\"\n [class.select2-grid-auto]=\"grid() && !isNumber(grid())\"\n [style.max-height]=\"resultMaxHeight()\"\n [style.--grid-size]=\"grid() || null\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? idLabel()\"\n [attr.aria-multiselectable]=\"multiple()\"\n [attr.aria-activedescendant]=\"hoveringOptionId()\"\n (keydown)=\"keyDown($event)\"\n >\n @if (showSelectAll() && multiple()) {\n <li class=\"select2-results__option select2-selectall\" (click)=\"selectAll()\" tabindex=\"1\" aria-selected>\n <div class=\"select2-label-content\">\n {{ selectAllTest() ? removeAllText() : selectAllText() }}\n </div>\n </li>\n }\n\n @for (groupOrOption of filteredData(); track groupOrOption.id; let i = $index) {\n @let group = _toGroup(groupOrOption);\n @if (group.options !== undefined) {\n <li class=\"select2-results__option select2-results__group\" [dir]=\"group.dir\">\n <span [id]=\"getElementId(groupOrOption)\">\n @if (!hasTemplate(group, 'group')) {\n <strong\n [attr.class]=\"'select2-results__group' + (group.classes ? ' ' + group.classes : '')\"\n [innerHTML]=\"group.label\"\n ></strong>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(group, 'group'); context: group\" />\n }\n </span>\n <ul\n class=\"select2-results__options select2-results__options--nested\"\n role=\"group\"\n [attr.aria-labelledby]=\"getElementId(groupOrOption)\"\n >\n @for (option of group.options; track option.id; let j = $index) {\n <li\n #result\n [id]=\"getElementId(option)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (showOptionCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"select2-option-checkbox\"\n [checked]=\"isSelected(option) === 'true'\"\n [disabled]=\"isDisabled(option) === 'true'\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n />\n }\n @if (!hasTemplate(option, 'option')) {\n <div\n class=\"select2-label-content\"\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\" />\n }\n </li>\n }\n </ul>\n </li>\n } @else {\n @let option = _toOption(groupOrOption);\n <li\n #result\n [id]=\"getElementId(groupOrOption)\"\n [class]=\"getOptionStyle(option)\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"isDisabled(option)\"\n [dir]=\"option.dir\"\n (mouseenter)=\"mouseenter(option)\"\n (click)=\"click(option)\"\n >\n @if (showOptionCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"select2-option-checkbox\"\n [checked]=\"isSelected(option) === 'true'\"\n [disabled]=\"isDisabled(option) === 'true'\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n />\n }\n @if (!hasTemplate(option, 'option')) {\n <div\n [innerHTML]=\"option.label | highlightText: searchText : !highlightText()\"\n class=\"select2-label-content\"\n ></div>\n } @else {\n <ng-container *ngTemplateOutlet=\"getTemplate(option, 'option'); context: getContext(option)\">\n </ng-container>\n }\n </li>\n }\n }\n @if (!filteredData()?.length && noResultMessage()) {\n <li class=\"select2-no-result select2-results__option\" [innerHTML]=\"noResultMessage()\"></li>\n }\n @if (maxResultsExceeded) {\n <li class=\"select2-too-much-result select2-results__option\" [innerHTML]=\"maxResultsMessage()\"></li>\n }\n </ul>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resetButton>\n <button\n type=\"button\"\n (focus)=\"_updateFocusState(true)\"\n (click)=\"reset($event)\"\n (keydown)=\"$event.stopPropagation()\"\n class=\"select2-selection__reset\"\n [attr.aria-description]=\"ariaResetButtonDescription()\"\n [attr.aria-controls]=\"idCombo()\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n</ng-template>\n", styles: [".select2-label{color:var(--select2-label-text-color, #000)}.select2-container{display:inline-block;position:relative;vertical-align:middle;box-sizing:border-box;margin:0;width:100%}.select2-container .select2-container-dropdown{position:absolute;opacity:0;width:0px}.select2-container .select2-selection--single{display:block;cursor:pointer;box-sizing:border-box;height:var(--select2-single-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;flex:1 1 auto;padding:var(--select2-selection-padding, 0 0 0 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container .select2-selection--multiple{display:block;cursor:pointer;box-sizing:border-box;min-height:var(--select2-multiple-height, 28px);-webkit-user-select:none;user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-flex;flex-wrap:wrap;gap:var(--select2-selection-multiple-gap, 2px 5px);padding-bottom:2px;padding-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__auto-create{display:flex;flex:1 1 150px;min-width:150px}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field{border:0;width:100%}.select2-container .select2-selection--multiple .select2-selection__rendered .select2-create__field:focus{outline:0;border:0}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;margin-top:5px;border:none;padding:0;font-size:100%}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{display:block;position:absolute;z-index:1051;box-sizing:border-box;border:1px solid var(--select2-dropdown-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-dropdown-background, white);width:100%;height:0;overflow:hidden}.select2-dropdown .select2-label-content{display:contents}.select2-results{display:block}.select2-results__options{margin:0;padding:0;list-style:none}.select2-results__options ::ng-deep .select2-highlight-text{background:var(--select2-highlight-text-background, transparent);color:var(--select2-highlight-text-color, inherit);font-weight:var(--select2-highlight-text-font-weight, 800)}.select2-results__option{padding:var(--select2-option-padding, 6px);color:var(--select2-option-text-color, #000);-webkit-user-select:none;user-select:none;text-align:initial}.select2-results__option[aria-selected]{cursor:pointer}.select2-results__option .select2-option-checkbox{vertical-align:middle;margin-inline-end:var(--select2-option-checkbox-margin, 6px);pointer-events:none;accent-color:var(--select2-option-checkbox-color, currentColor)}.select2-results__option:has(>.select2-option-checkbox){display:flex}.select2-container.select2-container-dropdown.select2-container--open{opacity:1;width:100%}.select2-container--open .select2-dropdown{height:auto;overflow:auto}.select2-container--open .select2-dropdown--above{display:flex;bottom:27px;flex-direction:column-reverse;border-bottom:var(--select2-dropdown-above-border-bottom, none);border-bottom-right-radius:var(--select2-dropdown-above-border-bottom-right-radius, 0);border-bottom-left-radius:var(--select2-dropdown-above-border-bottom-left-radius, 0)}.select2-container--open .select2-dropdown--below{border-top:var(--select2-dropdown-below-border-top, none);border-top-right-radius:var(--select2-dropdown-below-border-top-right-radius, 0);border-top-left-radius:var(--select2-dropdown-below-border-top-left-radius, 0)}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{box-sizing:border-box;padding:4px;width:100%}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{display:block;position:fixed;top:0;left:0;opacity:0;z-index:99;margin:0;border:0;padding:0;width:auto;min-width:100%;height:auto;min-height:100%}.select2-required:before{content:\"*\";color:var(--select2-required-color, red)}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;position:absolute!important;margin:-1px!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important}.select2-container--default .select2-selection--single{display:flex;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--select2-selection-text-color, #111);line-height:var(--select2-selection-line-height, 28px)}.select2-container--default .select2-selection--single .select2-selection__clear{float:right;cursor:pointer;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--select2-placeholder-color, #999)}.select2-container--default .select2-selection--single .select2-selection__placeholder span{overflow:hidden;text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--single .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--single .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--single .select2-selection__reset,.select2-container--default .select2-selection--single .select2-selection__arrow{display:flex;justify-content:center;align-items:center;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow:before{border-width:5px 4px 0;border-style:solid;border-color:var(--select2-arrow-color, #888) transparent;width:0;height:0;content:\" \"}.select2-container--default .select2-selection__reset{align-self:center;border:var(--select2-reset-border, none);border-radius:var(--select2-reset-border-radius, 4px);background:var(--select2-reset-background, transparent);height:fit-content;color:var(--select2-reset-color, #999)}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--disabled .select2-selection__choice__remove,.select2-container--default.select2-container--readonly .select2-selection--single .select2-selection__clear,.select2-container--default.select2-container--readonly .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--disabled .select2-selection--single,.select2-container--default.select2-container--disabled .select2-selection--multiple{cursor:default;background:var(--select2-selection-disabled-background, #eee)}.select2-container--default.select2-container--readonly .select2-selection--single,.select2-container--default.select2-container--readonly .select2-selection--multiple{background:var(--select2-selection-readonly-background, #eee)}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before{border-width:0 4px 5px;border-color:transparent transparent var(--select2-arrow-color, #888)}.select2-container--default .select2-selection--multiple{display:flex;cursor:text;border:1px solid var(--select2-selection-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-background, #fff)}.select2-container--default .select2-selection--multiple .select2-selection__rendered{flex:1 1 auto;align-items:center;box-sizing:border-box;margin:0;padding:var(--select2-selection-multiple-padding, 2px 5px);width:100%;min-height:1em;list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{line-height:var(--select2-selection-choice-line-height, 20px);list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;float:left;margin:-3px 0;width:100%;overflow:hidden;color:var(--select2-placeholder-color, #999);text-overflow:var(--select2-placeholder-overflow, ellipsis);white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__placeholder__option{display:none}.select2-container--default .select2-selection--multiple .select2-selection__override{flex:1;margin:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__clear{float:right;cursor:pointer;margin-top:5px;margin-right:10px;font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice{cursor:default;border:1px solid var(--select2-selection-choice-border-color, #aaa);border-radius:var(--select2-selection-border-radius, 4px);background:var(--select2-selection-choice-background, #e4e4e4);padding:0 5px;color:var(--select2-selection-choice-text-color, #000)}.select2-container--default .select2-selection--multiple .select2-selection__choice.cdk-drag:not(.cdk-drag-disabled){cursor:move}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{display:inline-block;cursor:pointer;margin-right:2px;color:var(--select2-selection-choice-close-color, #999);font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--select2-selection-choice-hover-close-color, #333)}.select2-container--default.select2-container--focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,.select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{outline:none;border:solid var(--select2-selection-focus-border-color, #000) 1px}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-right-radius:0;border-top-left-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--select2-search-border-color, #aaa);border-radius:var(--select2-search-border-radius, 0px);background:1px solid var(--select2-search-background, #fff)}.select2-container--default .select2-search--inline .select2-search__field{-webkit-appearance:textfield;outline:none;box-shadow:none;border:none;background:transparent}.select2-container--default .select2-results>.select2-results__options{overflow-y:auto}.select2-container--default .select2-results__option.select2-results__group{grid-column:col-start/col-end;padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{background:var(--select2-option-disabled-background, transparent);color:var(--select2-option-disabled-text-color, #999)}.select2-container--default .select2-results__option[aria-selected=true]{background:var(--select2-option-selected-background, #ddd);color:var(--select2-option-selected-text-color, #000)}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-option-highlighted-background, #5897fb);color:var(--select2-option-highlighted-text-color, #fff)}.select2-container--default .select2-results__option--highlighted[aria-selected] ::ng-deep .select2-highlight-text{background:var(--select2-highlighted-highlight-text-background, transparent);color:var(--select2-highlighted-highlight-text-color, inherit);font-weight:var(--select2-highlighted-highlight-text-font-weight, 800)}.select2-container--default .select2-results__option--hide{display:none}.select2-container--default .select2-results__group{display:block;cursor:default;background:var(--select2-option-group-background, transparent);padding:6px;color:var(--select2-option-group-text-color, gray)}.select2-no-result{color:var(--select2-no-result-color, #888);font-style:var(--select2-no-result-font-style, italic)}.select2-too-much-result{color:var(--select2-too-much-result-color, #888);font-style:var(--select2-too-much-font-style, italic)}.select2-grid,.select2-grid ul{display:grid;grid-template-columns:[col-start] repeat(var(--grid-size),1fr) [col-end]}.select2-grid-auto,.select2-grid-auto ul{display:grid;grid-template-columns:[col-start] repeat(auto-fill,minmax(var(--grid-size, 100px),1fr)) [col-end]}.select2-container--default .select2-grid ul,.select2-container--default .select2-grid-auto ul{padding-left:var(--select2-option-padding, 6px)}.select2-container--default .select2-grid ul .select2-results__group,.select2-container--default .select2-grid-auto ul .select2-results__group{padding-left:0}.select2-container--default .select2-grid ul .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option,.select2-container--default .select2-grid-auto ul .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{padding-left:var(--select2-option-padding, 6px)}:host.nostyle .select2-dropdown{border-color:transparent}:host.nostyle .select2-selection--single,:host.nostyle .select2-selection--multiple{border-color:transparent;background:transparent}:host.nostyle .select2-container--default .select2-focused .select2-selection--single,:host.nostyle .select2-container--default .select2-focused .select2-selection--multiple,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.nostyle .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.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)}:host.borderless .select2-selection--single,:host.borderless .select2-selection--multiple{border-color:transparent;background:transparent}:host.borderless .select2-container--default .select2-focused .select2-selection--single,:host.borderless .select2-container--default .select2-focused .select2-selection--multiple,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--single,:host.borderless .select2-container--default:not(.select2-container--open) .select2-focused .select2-selection--multiple{border-color:transparent;background:transparent}:host.select2-selection-nowrap .select2-selection--single.select2-selection,:host.select2-selection-nowrap .select2-selection--single.select2-selection span,:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection span,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection ul,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection ul{display:flex;flex-wrap:nowrap}:host.select2-selection-nowrap .select2-selection--single.select2-selection li,:host.select2-selection-nowrap .select2-selection--multiple.select2-selection li{display:flex}:host.material{display:inline-block;width:300px}:host.material>.select2-container{vertical-align:inherit;padding-bottom:1.29688em}:host.material>.select2-container .selection{display:inline-flex;align-items:baseline;border-top:.84375em solid transparent;padding:.4375em 0;width:100%;height:auto}:host.material .select2-container--default .select2-selection--single,:host.material .select2-container--default .select2-selection--multiple{box-sizing:border-box;border:0;border-radius:0;width:100%;height:24px}:host.material .select2-container--default .select2-selection--single:before,:host.material .select2-container--default .select2-selection--multiple:before{display:block;position:absolute;bottom:1.65em;background:var(--select2-material-underline, #ddd);width:100%;height:1px;content:\" \"}:host.material .select2-container--default .select2-selection--single:after,:host.material .select2-container--default .select2-selection--multiple:after{display:block;position:absolute;bottom:1.63em;left:50%;transition:none;background:var(--select2-material-underline-active, #5a419e);width:0%;height:2px;content:\" \"}:host.material .select2-container--default .select2-selection--single .select2-selection__rendered,:host.material .select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-left:1px;line-height:inherit}:host.material .select2-container--default .select2-selection--single .select2-selection__placeholder,:host.material .select2-container--default .select2-selection--multiple .select2-selection__placeholder{display:block;position:absolute;top:20px;left:0;transform-origin:0 21px;transition:transform .3s;color:var(--select2-material-placeholder-color, rgba(0, 0, 0, .38))}:host.material .select2-container--default .select2-container--open{bottom:1.6em;left:0}:host.material .select2-container--default .select2-selection__placeholder__option{transform:translateY(-1.5em) scale(.75) perspective(100px) translateZ(.001px);width:133.33333%}:host.material .select2-container--default .select2-selection__arrow{top:20px}:host.material .select2-container--default.select2-container--open .select2-selection--single:after,:host.material .select2-container--default.select2-container--open .select2-selection--multiple:after,:host.material .select2-container--default .select2-focused .select2-selection--single:after,:host.material .select2-container--default .select2-focused .select2-selection--multiple:after{left:0%;transition:width .3s cubic-bezier(.12,1,.77,1),left .3s cubic-bezier(.12,1,.77,1);width:100%}:host.material .select2-container--default .select2-dropdown{box-shadow:0 5px 5px #00000080;border:0;border-radius:0}:host.material .select2-container--default .select2-results__option[aria-selected=true],:host.material .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--select2-material-option-selected-background, rgba(0, 0, 0, .04));color:var(--select2-material-option-highlighted-text-color, #000)}:host.material .select2-container--default .select2-results__option[aria-selected=true]{color:var(--select2-material-option-selected-text-color, #ff5722)}:host.material .select2-container--default.select2-container--disabled .select2-selection--single,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple,:host.material .select2-container--default.select2-container--readonly .select2-selection--single,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple{background:transparent}:host.material .select2-container--default.select2-container--disabled .select2-selection--single:before,:host.material .select2-container--default.select2-container--disabled .select2-selection--multiple:before{background:var(--select2-material-underline-disabled, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material .select2-container--default.select2-container--readonly .select2-selection--single:before,:host.material .select2-container--default.select2-container--readonly .select2-selection--multiple:before{background:var(--select2-material-underline-readonly, linear-gradient(to right, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .26) 33%, transparent 0));background-position:0 bottom;background-size:4px 1px;background-repeat:repeat-x}:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--single:after,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:before,:host.material.ng-invalid.ng-touched .select2-container--default .select2-selection--multiple:after{background:var(--select2-material-underline-invalid, red)}:host.material:not(.select2-container--open) .select2-focused .select2-selection--single,:host.material:not(.select2-container--open) .select2-focused .select2-selection--multiple{border:0}:host.material .select2-subscript-wrapper{position:absolute;top:calc(100% - 1.72917em);color:var(--select2-hint-text-color, #888);font-size:75%}::ng-deep .select2-overlay-backdrop{background:var(--select2-overlay-backdrop, transparent)}::ng-deep .cdk-overlay-container .select2-container .select2-dropdown.select2-dropdown--above{bottom:0}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown{margin-bottom:28px}::ng-deep .cdk-overlay-container .select2-container--open.select2-position-auto .select2-dropdown.select2-dropdown--above{bottom:0;margin-top:28px;margin-bottom:0}::ng-deep .cdk-overlay-container .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)}@supports (-moz-appearance: none){select2.material .select2-container--default .select2-selection--single,select2.material .select2-container--default .select2-selection--multiple{height:26px}}\n"] }]
|
|
2039
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], minCharForSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharForSearch", required: false }] }], displaySearchStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "displaySearchStatus", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], limitSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitSelection", required: false }] }], listPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "listPosition", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], multipleDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleDrag", required: false }] }], styleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleMode", required: false }] }], noResultMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultMessage", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], maxResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResultsMessage", required: false }] }], infiniteScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollDistance", required: false }] }], infiniteScrollThrottle: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThrottle", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], autoCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCreate", required: false }] }], noLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noLabelTemplate", required: false }] }], editPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPattern", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], templateSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSelection", required: false }] }], resultMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultMaxHeight", required: false }] }], customSearchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSearchEnabled", required: false }] }], minCountForSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCountForSearch", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectedItems", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], resettable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resettable", required: false }] }], resetSelectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSelectedValue", required: false }] }], nativeKeyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeKeyboard", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], selectionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionOverride", required: false }] }], selectionNoWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionNoWrap", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showOptionCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOptionCheckbox", required: false }] }], removeAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAllText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaInvalid", required: false }] }], ariaResetButtonDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaResetButtonDescription", required: false }] }], update: [{ type: i0.Output, args: ["update"] }], autoCreateItem: [{ type: i0.Output, args: ["autoCreateItem"] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], search: [{ type: i0.Output, args: ["search"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], removeOption: [{ type: i0.Output, args: ["removeOption"] }], cdkConnectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], selection: [{ type: i0.ViewChild, args: ['selection', { isSignal: true }] }], resultContainer: [{ type: i0.ViewChild, args: ['results', { isSignal: true }] }], results: [{ type: i0.ViewChildren, args: ['result', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], _ngOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Select2OptionDirective), { isSignal: true }] }], _ngGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Select2GroupDirective), { isSignal: true }] }] } });
|
|
1781
2040
|
|
|
1782
2041
|
/*
|
|
1783
2042
|
* Public API Surface of ng-select2-component
|
|
@@ -1787,5 +2046,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
|
|
|
1787
2046
|
* Generated bundle index. Do not edit.
|
|
1788
2047
|
*/
|
|
1789
2048
|
|
|
1790
|
-
export { Select2, Select2HighlightPipe, Select2Hint, Select2Label, Select2Utils, arabicDiacritical, defaultMinCountForSearch, hebrewDiacritical, latinDiacritical, protectRegexp, timeout, unicodePatterns };
|
|
2049
|
+
export { Select2, Select2ContentDirective, Select2GroupDirective, Select2HighlightPipe, Select2Hint, Select2Label, Select2OptionDirective, Select2Utils, arabicDiacritical, defaultMinCountForSearch, hebrewDiacritical, latinDiacritical, protectRegexp, timeout, unicodePatterns };
|
|
1791
2050
|
//# sourceMappingURL=ng-select2-component.mjs.map
|