@leanix/components 0.4.486 → 0.4.488

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.
Files changed (29) hide show
  1. package/esm2022/lib/core-ui/components/ellipsis/ellipsis.component.mjs +4 -1
  2. package/esm2022/lib/core-ui/components/tokenizer/tokenizer.component.mjs +4 -1
  3. package/esm2022/lib/forms-ui/components/currency/currency-input.component.mjs +13 -1
  4. package/esm2022/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.mjs +9 -1
  5. package/esm2022/lib/forms-ui/components/form-error/form-error.component.mjs +3 -1
  6. package/esm2022/lib/forms-ui/components/keyboard-select.directive.mjs +8 -1
  7. package/esm2022/lib/forms-ui/components/multi-select/multi-select.component.mjs +26 -17
  8. package/esm2022/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs +9 -1
  9. package/esm2022/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs +17 -2
  10. package/esm2022/lib/forms-ui/components/picker/picker.component.mjs +16 -1
  11. package/esm2022/lib/forms-ui/components/select-list/select-list.component.mjs +9 -1
  12. package/esm2022/lib/forms-ui/components/single-select/single-select.component.mjs +22 -17
  13. package/esm2022/lib/forms-ui/models/base-select.directive.mjs +15 -1
  14. package/fesm2022/leanix-components.mjs +142 -33
  15. package/fesm2022/leanix-components.mjs.map +1 -1
  16. package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +8 -0
  17. package/lib/core-ui/components/tokenizer/tokenizer.component.d.ts +6 -0
  18. package/lib/forms-ui/components/currency/currency-input.component.d.ts +14 -0
  19. package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +13 -0
  20. package/lib/forms-ui/components/form-error/form-error.component.d.ts +2 -0
  21. package/lib/forms-ui/components/keyboard-select.directive.d.ts +9 -0
  22. package/lib/forms-ui/components/multi-select/multi-select.component.d.ts +28 -3
  23. package/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.d.ts +11 -0
  24. package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +17 -0
  25. package/lib/forms-ui/components/picker/picker.component.d.ts +19 -0
  26. package/lib/forms-ui/components/select-list/select-list.component.d.ts +13 -0
  27. package/lib/forms-ui/components/single-select/single-select.component.d.ts +25 -3
  28. package/lib/forms-ui/models/base-select.directive.d.ts +19 -0
  29. package/package.json +1 -1
@@ -917,6 +917,7 @@ const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE = new InjectionToken('LX_ELLIPSIS_DEBOUNCE_
917
917
  * e.g. <lx-ellipsis style="max-width: 300px" content="Hello World[..]"></lx-ellipsis>.
918
918
  */
919
919
  class EllipsisComponent {
920
+ /** @internal */
920
921
  static { this.DEFAULT_RESIZE_DEBOUNCE_MS = 500; }
921
922
  constructor(debounceMsAfterResize, cdRef, hostEl, resizeObserverService, translateService) {
922
923
  this.debounceMsAfterResize = debounceMsAfterResize;
@@ -930,6 +931,7 @@ class EllipsisComponent {
930
931
  * or if you sanitize the provided content yourself.
931
932
  */
932
933
  this.escapeHtmlInContent = true;
934
+ /** @internal */
933
935
  this.isShowingMore$ = new BehaviorSubject(false);
934
936
  this.destroyed$ = new Subject();
935
937
  this.viewChecked$ = new Subject();
@@ -993,6 +995,7 @@ class EllipsisComponent {
993
995
  ngAfterViewChecked() {
994
996
  this.viewChecked$.next();
995
997
  }
998
+ /** @internal */
996
999
  onShowMoreToggle() {
997
1000
  this.isShowingMore$.next(!this.isShowingMore$.getValue());
998
1001
  this.cdRef.detectChanges();
@@ -2735,10 +2738,12 @@ class TokenizerComponent {
2735
2738
  this.destroyRef = destroyRef;
2736
2739
  this.changeDetectorRef = changeDetectorRef;
2737
2740
  this.resizeObserverService = resizeObserverService;
2741
+ /** @internal */
2738
2742
  this.NAME = 'TokenizerComponent';
2739
2743
  this.overflowItems = signal([]);
2740
2744
  this.overflowItemCount = computed(() => this.overflowItems().length);
2741
2745
  this.showCounter = computed(() => this.active() && this.overflowItemCount() > 0);
2746
+ /** Can be used to activate & deactivate tokenization */
2742
2747
  this.active = input(true);
2743
2748
  this.active$ = toObservable(this.active);
2744
2749
  this.overflowStartIndex = signal(null);
@@ -2768,6 +2773,7 @@ class TokenizerComponent {
2768
2773
  this.tokenize(containerWidth);
2769
2774
  });
2770
2775
  }
2776
+ /** @internal */
2771
2777
  onCounterClicked() {
2772
2778
  const startIndex = this.overflowStartIndex();
2773
2779
  if (typeof startIndex === 'number') {
@@ -3044,19 +3050,25 @@ var KeyboardSelectAction;
3044
3050
  })(KeyboardSelectAction || (KeyboardSelectAction = {}));
3045
3051
  class KeyboardSelectDirective {
3046
3052
  constructor() {
3053
+ /** @internal */
3047
3054
  this.cdkOverlayOpenState = new ReplaySubject(1);
3055
+ /** @internal */
3048
3056
  this.cdkOverlayOpen$ = this.cdkOverlayOpenState.asObservable().pipe(startWith(false), distinctUntilChanged());
3057
+ /** @internal */
3049
3058
  this.overlayPositioning = false;
3050
3059
  this.keyboardSelectAction = new Observable();
3051
3060
  this.selectedItemIndexChange = new EventEmitter(true); // TODO: this is just index change from navigating (highlighting)
3061
+ /** @internal */
3052
3062
  this.destroyed$ = new Subject();
3053
3063
  // Beware: If the list of items is empty, there might not come a -1 because Angular only updates the ViewChildren lazily.
3054
3064
  this.selectedItemIndex$ = new BehaviorSubject(-1);
3055
3065
  this.selectedItemSubject$ = new BehaviorSubject(null);
3056
3066
  }
3067
+ /** @internal */
3057
3068
  get selectedItem$() {
3058
3069
  return this.selectedItemSubject$.asObservable();
3059
3070
  }
3071
+ /** @internal */
3060
3072
  select(index) {
3061
3073
  this.selectedItemIndex$.next(index);
3062
3074
  }
@@ -3085,6 +3097,7 @@ class KeyboardSelectDirective {
3085
3097
  .pipe(filter((item) => !!item), distinctUntilChanged(), takeUntil(this.destroyed$))
3086
3098
  .subscribe((item) => item?.scrollToItem());
3087
3099
  }
3100
+ /** @internal */
3088
3101
  isItemSelected(item, selectedItem) {
3089
3102
  return selectedItem && item === selectedItem.nativeElement;
3090
3103
  }
@@ -4018,8 +4031,11 @@ class CurrencyInputComponent {
4018
4031
  this.markInvalid = false;
4019
4032
  this.onFocusLost = new EventEmitter();
4020
4033
  this.onChange = new EventEmitter();
4034
+ /** @internal */
4021
4035
  this.showCurrencyInput = false;
4036
+ /** @internal */
4022
4037
  this.dataValue$ = new ReplaySubject();
4038
+ /** @internal */
4023
4039
  this.destroyed$ = new Subject();
4024
4040
  }
4025
4041
  ngOnInit() {
@@ -4037,6 +4053,7 @@ class CurrencyInputComponent {
4037
4053
  ngOnDestroy() {
4038
4054
  this.destroyed$.next();
4039
4055
  }
4056
+ /** @internal */
4040
4057
  valueChanged(value) {
4041
4058
  if (typeof value === 'string') {
4042
4059
  const invalidSeparator = this.decimalSeparator === '.' ? ',' : '.';
@@ -4047,30 +4064,38 @@ class CurrencyInputComponent {
4047
4064
  this.onChange.emit(value);
4048
4065
  this.propagateChange(value);
4049
4066
  }
4067
+ /** @internal */
4050
4068
  onBlur() {
4051
4069
  this.showCurrencyInput = false;
4052
4070
  this.onFocusLost.emit(true);
4053
4071
  }
4072
+ /** @internal */
4054
4073
  focusCurrencyInput() {
4055
4074
  this.showCurrencyInput = true;
4056
4075
  this.changeDetector.detectChanges();
4057
4076
  this.currencyInput.nativeElement.focus();
4058
4077
  this.currencyInput.nativeElement.setSelectionRange(0, 0);
4059
4078
  }
4079
+ /** @internal */
4060
4080
  shouldRejectKey(event) {
4061
4081
  if (this.fieldDefinitionType === 'DOUBLE' && event.key === this.decimalSeparator) {
4062
4082
  return this.containsSeparators(this.currencyInput.nativeElement.value);
4063
4083
  }
4064
4084
  return !this.allowedCharacters.test(event.key);
4065
4085
  }
4086
+ /** @internal */
4066
4087
  propagateChange(_newValue) { }
4088
+ /** @internal */
4067
4089
  writeValue(newValue) {
4068
4090
  this.dataValue$.next(newValue);
4069
4091
  }
4092
+ /** @internal */
4070
4093
  registerOnChange(fn) {
4071
4094
  this.propagateChange = fn;
4072
4095
  }
4096
+ /** @internal */
4073
4097
  registerOnTouched(_fn) { }
4098
+ /** @internal */
4074
4099
  setDisabledState(disabled) {
4075
4100
  this.disabled = disabled;
4076
4101
  }
@@ -5878,6 +5903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
5878
5903
 
5879
5904
  class DragAndDropListComponent {
5880
5905
  constructor() {
5906
+ /** @internal */
5881
5907
  this.NAME = DRAG_AND_DROP_LIST_TRANSLATION_NAME;
5882
5908
  /**
5883
5909
  * Override the global label font weight of 700
@@ -5893,9 +5919,12 @@ class DragAndDropListComponent {
5893
5919
  this.moveItem = new EventEmitter();
5894
5920
  /**
5895
5921
  * TODO: extract state about keyboard sorting into KeyboardSortableListDirective
5922
+ * @internal
5896
5923
  */
5897
5924
  this.isSortingByKeyboard = false;
5925
+ /** @internal */
5898
5926
  this.keyboardItemBeingSorted = undefined;
5927
+ /** @internal */
5899
5928
  this.allItemsData = [];
5900
5929
  }
5901
5930
  ngAfterContentInit() {
@@ -5905,6 +5934,7 @@ class DragAndDropListComponent {
5905
5934
  ngAfterViewInit() {
5906
5935
  this.keyboardSortableItems$ = this._keyboardSortableItems.changes.pipe(startWith(this._keyboardSortableItems), map((items) => items.toArray()));
5907
5936
  }
5937
+ /** @internal */
5908
5938
  emitContentChildAction(action) {
5909
5939
  this._items.find((itemComponent) => itemComponent.item === action.item)?.action.emit(action);
5910
5940
  }
@@ -5916,10 +5946,12 @@ class DragAndDropListComponent {
5916
5946
  * https://material.angular.io/cdk/drag-drop/overview
5917
5947
  *
5918
5948
  * You're supposed to update the data in the parent and pass the new items as input.
5949
+ * @internal
5919
5950
  */
5920
5951
  drop(event) {
5921
5952
  this.sortItems(event.container.data, event.item.data, event.previousIndex, event.currentIndex);
5922
5953
  }
5954
+ /** @internal */
5923
5955
  dropToIndexAfterArrowKey(item, previousIndex, currentIndex) {
5924
5956
  if (this.isSortingByKeyboard) {
5925
5957
  this.sortItems(this._items, item, previousIndex, currentIndex);
@@ -5930,6 +5962,7 @@ class DragAndDropListComponent {
5930
5962
  this.moveToIndex.emit({ index: currentIndex, previous: previousIndex });
5931
5963
  this.moveItem.emit({ item, index: currentIndex });
5932
5964
  }
5965
+ /** @internal */
5933
5966
  trackByItem(_index, item) {
5934
5967
  return item.item;
5935
5968
  }
@@ -6041,6 +6074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
6041
6074
 
6042
6075
  class FormErrorComponent {
6043
6076
  constructor() {
6077
+ /** @internal */
6044
6078
  this.translationKeys = [];
6045
6079
  }
6046
6080
  ngOnInit() {
@@ -6054,6 +6088,7 @@ class FormErrorComponent {
6054
6088
  ngOnDestroy() {
6055
6089
  this.formSubscription.unsubscribe();
6056
6090
  }
6091
+ /** @internal */
6057
6092
  getTranslationKeys() {
6058
6093
  const formControl = this.form.get(this.controlName);
6059
6094
  if (formControl && formControl.errors) {
@@ -6198,16 +6233,26 @@ class BaseSelectDirective {
6198
6233
  this.query = new EventEmitter();
6199
6234
  this.close = new EventEmitter();
6200
6235
  this.open = new EventEmitter();
6236
+ /** @internal */
6201
6237
  this.query$ = this.query.asObservable();
6238
+ /** @internal */
6202
6239
  this.dropdownDirection$ = new BehaviorSubject('BOTTOM');
6240
+ /** @internal */
6203
6241
  this.dropdownOpen = false;
6204
6242
  // an axis, where the negative range represents the selected item in the selection
6243
+ /** @internal */
6205
6244
  this.selectionKeyboardSelectAction$ = new Subject();
6245
+ /** @internal */
6206
6246
  this.optionsKeyboardSelectAction$ = new Subject();
6247
+ /** @internal */
6207
6248
  this.virtualCursorPosition = 0;
6249
+ /** @internal */
6208
6250
  this.inputWasFocused = false;
6251
+ /** @internal */
6209
6252
  this.queryControl = new UntypedFormControl('');
6253
+ /** @internal */
6210
6254
  this.isInputFocused = false;
6255
+ /** @internal */
6211
6256
  this.destroyed$ = new Subject();
6212
6257
  }
6213
6258
  ngAfterViewInit() {
@@ -6258,6 +6303,7 @@ class BaseSelectDirective {
6258
6303
  }
6259
6304
  /**
6260
6305
  * @param toggle is true when the caret to the right in a select component was clicked
6306
+ * @internal
6261
6307
  */
6262
6308
  handleClick(toggle) {
6263
6309
  if (toggle || !this.dropdownOpen || !this.allowQuery) {
@@ -6265,15 +6311,18 @@ class BaseSelectDirective {
6265
6311
  }
6266
6312
  this.focus();
6267
6313
  }
6314
+ /** @internal */
6268
6315
  handleBackdropClick(event) {
6269
6316
  event.stopPropagation();
6270
6317
  this.closeInput();
6271
6318
  }
6319
+ /** @internal */
6272
6320
  closeInput() {
6273
6321
  this.open.next(false);
6274
6322
  this.resetInput();
6275
6323
  this.query.emit('');
6276
6324
  }
6325
+ /** @internal */
6277
6326
  openInput() {
6278
6327
  this.open.next(true);
6279
6328
  }
@@ -6468,6 +6517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
6468
6517
  }] } });
6469
6518
 
6470
6519
  class MultiSelectComponent extends BaseSelectDirective {
6520
+ /** @internal */
6471
6521
  static isStillPossibleMoveToLeft(eventSet) {
6472
6522
  return (!(eventSet.virtualCursorPosition === 0 &&
6473
6523
  eventSet.inputCursorPosition === 0 &&
@@ -6478,9 +6528,11 @@ class MultiSelectComponent extends BaseSelectDirective {
6478
6528
  eventSet.selectionLength > 0 &&
6479
6529
  Math.abs(eventSet.virtualCursorPosition) === eventSet.selectionLength));
6480
6530
  }
6531
+ /** @internal */
6481
6532
  static isMovingfromZeroToRight(eventSet) {
6482
6533
  return eventSet.virtualCursorPosition === 0 && eventSet.inputCursorPosition === 0 && eventSet.event.keyCode === ARROW_RIGHT;
6483
6534
  }
6535
+ /** @internal */
6484
6536
  static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition, keyCode) {
6485
6537
  switch (keyCode) {
6486
6538
  case ARROW_LEFT:
@@ -6492,6 +6544,7 @@ class MultiSelectComponent extends BaseSelectDirective {
6492
6544
  }
6493
6545
  return cursorPosition;
6494
6546
  }
6547
+ /** @internal */
6495
6548
  static getKeyboardSelectAction(cursorPosition, keyCode) {
6496
6549
  if (cursorPosition <= -1 && keyCode === ARROW_RIGHT) {
6497
6550
  return KeyboardSelectAction.NEXT;
@@ -6507,9 +6560,11 @@ class MultiSelectComponent extends BaseSelectDirective {
6507
6560
  }
6508
6561
  return null;
6509
6562
  }
6563
+ /** @internal */
6510
6564
  get dropdownTmpl() {
6511
6565
  return this.explicitDropdown || this.implicitDropdown;
6512
6566
  }
6567
+ /** @internal */
6513
6568
  get tokenize() {
6514
6569
  return this.canTokenize && !this.isInputFocused && !this.dropdownOpen;
6515
6570
  }
@@ -6519,39 +6574,36 @@ class MultiSelectComponent extends BaseSelectDirective {
6519
6574
  this.markInvalid = false;
6520
6575
  this.selection = [];
6521
6576
  this.size = 'default';
6522
- this.dropdownWidthScale = '1x';
6523
6577
  this.selectionChange = new EventEmitter();
6524
6578
  this.blur = new EventEmitter();
6579
+ /** @internal */
6525
6580
  this.destroyed$ = new Subject();
6581
+ /** @internal */
6526
6582
  this.isInputFocusedViaTab = false;
6583
+ /** @internal */
6527
6584
  this.canTokenize = true;
6528
6585
  }
6529
- get dropdownWidth() {
6530
- switch (this.dropdownWidthScale) {
6531
- case '1x':
6532
- return undefined;
6533
- case '1.5x':
6534
- return '150%';
6535
- case '2x':
6536
- return '200%';
6537
- }
6538
- }
6586
+ /** @internal */
6539
6587
  resetInput() {
6540
6588
  this.queryInput.resetInput();
6541
6589
  this.queryControl.setValue('');
6542
6590
  }
6591
+ /** @internal */
6543
6592
  focus() {
6544
6593
  this.queryInput.focusInput();
6545
6594
  }
6595
+ /** @internal */
6546
6596
  focusAndOpen() {
6547
6597
  this.queryInput.focusInput();
6548
6598
  this.open.next(true);
6549
6599
  }
6600
+ /** @internal */
6550
6601
  onFocus() {
6551
6602
  this.isInputFocused = true;
6552
6603
  this.scrollToEndOfSelection();
6553
6604
  this.canTokenize = false;
6554
6605
  }
6606
+ /** @internal */
6555
6607
  onBlur() {
6556
6608
  this.isInputFocused = false;
6557
6609
  this.isInputFocusedViaTab = false;
@@ -6645,6 +6697,7 @@ class MultiSelectComponent extends BaseSelectDirective {
6645
6697
  * Adds the given option to the selection and, by default, resets the input field.
6646
6698
  * @param option The option to add to the selection.
6647
6699
  * @param keepSearchQueryAndScrollPosition If true, the search query and scroll position of the dropdown will be kept, unless there are no options left.
6700
+ * @internal
6648
6701
  */
6649
6702
  addItemToSelection(option, keepSearchQueryAndScrollPosition = false) {
6650
6703
  if (option !== null) {
@@ -6657,6 +6710,7 @@ class MultiSelectComponent extends BaseSelectDirective {
6657
6710
  }
6658
6711
  this.resetSelectState();
6659
6712
  }
6713
+ /** @internal */
6660
6714
  removeItem(optionToRemove) {
6661
6715
  if (this.disabled) {
6662
6716
  return;
@@ -6674,17 +6728,23 @@ class MultiSelectComponent extends BaseSelectDirective {
6674
6728
  this.virtualCursorPosition++;
6675
6729
  }
6676
6730
  }
6731
+ /** @internal */
6677
6732
  propagateChange(_value) { }
6733
+ /** @internal */
6678
6734
  writeValue(value) {
6679
6735
  this.selection = value;
6680
6736
  }
6737
+ /** @internal */
6681
6738
  registerOnChange(fn) {
6682
6739
  this.propagateChange = fn;
6683
6740
  }
6741
+ /** @internal */
6684
6742
  registerOnTouched(_fn) { }
6743
+ /** @internal */
6685
6744
  setDisabledState(isDisabled) {
6686
6745
  this.disabled = isDisabled;
6687
6746
  }
6747
+ /** @internal */
6688
6748
  focusedViaTab() {
6689
6749
  this.isInputFocusedViaTab = true;
6690
6750
  }
@@ -6704,13 +6764,13 @@ class MultiSelectComponent extends BaseSelectDirective {
6704
6764
  }, 0);
6705
6765
  }
6706
6766
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
6707
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: MultiSelectComponent, isStandalone: true, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", dropdownWidthScale: "dropdownWidthScale", inputId: "inputId" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
6767
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: MultiSelectComponent, isStandalone: true, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", inputId: "inputId" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
6708
6768
  {
6709
6769
  provide: NG_VALUE_ACCESSOR,
6710
6770
  useExisting: forwardRef(() => MultiSelectComponent),
6711
6771
  multi: true
6712
6772
  }
6713
- ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
6773
+ ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
6714
6774
  }
6715
6775
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
6716
6776
  type: Component,
@@ -6729,15 +6789,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
6729
6789
  ReactiveFormsModule,
6730
6790
  NgTemplateOutlet,
6731
6791
  AsyncPipe
6732
- ], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
6792
+ ], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
6733
6793
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
6734
6794
  type: Input
6735
6795
  }], selection: [{
6736
6796
  type: Input
6737
6797
  }], size: [{
6738
6798
  type: Input
6739
- }], dropdownWidthScale: [{
6740
- type: Input
6741
6799
  }], inputId: [{
6742
6800
  type: Input
6743
6801
  }], selectionChange: [{
@@ -6784,6 +6842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
6784
6842
  class OptionGroupDropdownComponent extends KeyboardSelectDirective {
6785
6843
  constructor() {
6786
6844
  super(...arguments);
6845
+ /** @internal */
6787
6846
  this.NAME = 'OptionGroupDropdownComponent';
6788
6847
  this.optionGroups = [];
6789
6848
  this.showCreateNewOption = false;
@@ -6794,30 +6853,37 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
6794
6853
  this.onItemSelected = new EventEmitter();
6795
6854
  this.containerScrolled = new EventEmitter();
6796
6855
  this.createNewOption = new EventEmitter();
6856
+ /** @internal */
6797
6857
  this.isTopDropdown = false;
6798
6858
  }
6859
+ /** @internal */
6799
6860
  get isNewItem() {
6800
6861
  const options = this.optionGroups?.reduce((flatOptions, optionGroup) => flatOptions.concat(optionGroup.options), []) ??
6801
6862
  [];
6802
6863
  return BasicDropdownComponent.isNewItem(options, this.newOptionLabel ?? '', this.labelKey);
6803
6864
  }
6865
+ /** @internal */
6804
6866
  selectOption(option) {
6805
6867
  this.onItemSelected.emit(option);
6806
6868
  }
6869
+ /** @internal */
6807
6870
  trackByLabel(index, optionGroup) {
6808
6871
  return optionGroup.label + index;
6809
6872
  }
6873
+ /** @internal */
6810
6874
  onCreateNewOption() {
6811
6875
  if (!this.loading && this.newOptionLabel) {
6812
6876
  this.createNewOption.emit(this.newOptionLabel);
6813
6877
  }
6814
6878
  }
6879
+ /** @internal */
6815
6880
  trackByValue(_index, option) {
6816
6881
  if (this.trackByProperty) {
6817
6882
  return option[this.trackByProperty];
6818
6883
  }
6819
6884
  return option.value;
6820
6885
  }
6886
+ /** @internal */
6821
6887
  onPositionChange(event) {
6822
6888
  this.isTopDropdown = event.connectionPair.originY === 'top';
6823
6889
  }
@@ -6878,9 +6944,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
6878
6944
  }] } });
6879
6945
 
6880
6946
  class OptionsDropdownComponent {
6947
+ /** @internal */
6881
6948
  get displayStyle() {
6882
6949
  return this.isFlexEnabledTriggerContainer ? 'block' : 'inline-block';
6883
6950
  }
6951
+ /** @internal */
6884
6952
  get overlayPositions() {
6885
6953
  return [
6886
6954
  {
@@ -6897,6 +6965,7 @@ class OptionsDropdownComponent {
6897
6965
  }
6898
6966
  ];
6899
6967
  }
6968
+ /** @internal */
6900
6969
  set open(value) {
6901
6970
  if (this.disabled) {
6902
6971
  return;
@@ -6916,15 +6985,19 @@ class OptionsDropdownComponent {
6916
6985
  }
6917
6986
  this.changeDetection.markForCheck();
6918
6987
  }
6988
+ /** @internal */
6919
6989
  get open() {
6920
6990
  return this._open;
6921
6991
  }
6992
+ /** @internal */
6922
6993
  get options() {
6923
6994
  return this._options?.toArray() || [];
6924
6995
  }
6996
+ /** @internal */
6925
6997
  get optionIds() {
6926
6998
  return this.options.map((o) => o.optionId);
6927
6999
  }
7000
+ /** @internal */
6928
7001
  get lxButton() {
6929
7002
  return this.trigger?.nativeElement();
6930
7003
  }
@@ -6932,6 +7005,7 @@ class OptionsDropdownComponent {
6932
7005
  this.changeDetection = changeDetection;
6933
7006
  this.scrollStrategies = scrollStrategies;
6934
7007
  this.renderer = renderer;
7008
+ /** @internal */
6935
7009
  this.NAME = 'OptionsDropdownComponent';
6936
7010
  this.align = 'right';
6937
7011
  this.closeOnScroll = false;
@@ -6941,6 +7015,7 @@ class OptionsDropdownComponent {
6941
7015
  this.overlayPositioning = false;
6942
7016
  this.dropdownClass = '';
6943
7017
  this.isFlexEnabledTriggerContainer = false;
7018
+ /** @internal */
6944
7019
  this.overlayScrollStrategy = this.closeOnScroll ? this.scrollStrategies.close() : this.scrollStrategies.reposition();
6945
7020
  this.opened = new EventEmitter();
6946
7021
  this.closed = new EventEmitter();
@@ -6948,6 +7023,7 @@ class OptionsDropdownComponent {
6948
7023
  this.highlightedOptionIndex$ = new BehaviorSubject(0);
6949
7024
  this._open = false;
6950
7025
  this.isSubdropdownExpanded = false;
7026
+ /** @internal */
6951
7027
  this.destroyed$ = new Subject();
6952
7028
  this.listboxId = uniqueId('listbox');
6953
7029
  }
@@ -7016,10 +7092,12 @@ class OptionsDropdownComponent {
7016
7092
  this.destroyed$.next();
7017
7093
  this.destroyed$.complete();
7018
7094
  }
7095
+ /** @internal */
7019
7096
  closeDropdown() {
7020
7097
  this.open = false;
7021
7098
  this.closed.emit();
7022
7099
  }
7100
+ /** @internal */
7023
7101
  toggleOpen() {
7024
7102
  this.open = !this.open;
7025
7103
  if (!this.open) {
@@ -7089,6 +7167,7 @@ class OptionsDropdownComponent {
7089
7167
  this.renderer.setAttribute(this.lxButton, 'aria-controls', this.listboxId);
7090
7168
  this.renderer.setAttribute(this.lxButton, 'aria-expanded', 'false');
7091
7169
  }
7170
+ /** @internal */
7092
7171
  handleOptionKeyDown(event) {
7093
7172
  // In order to keep the centralized keyboard event management logic from `KeyboardActionSourceDirective`
7094
7173
  // we duplicate the option event here and trigger it again from lxButton.
@@ -7133,7 +7212,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
7133
7212
  }], trigger: [{
7134
7213
  type: ContentChild,
7135
7214
  args: [KeyboardActionSourceDirective]
7136
- }], _options: [{
7215
+ }],
7216
+ /** @internal */
7217
+ _options: [{
7137
7218
  type: ContentChildren,
7138
7219
  args: [OptionComponent, { descendants: true }]
7139
7220
  }], opened: [{
@@ -7409,22 +7490,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
7409
7490
  * ```
7410
7491
  */
7411
7492
  class PickerComponent {
7493
+ /** @internal */
7412
7494
  get activeDescendantsId() {
7413
7495
  return this._activeDescendantsId;
7414
7496
  }
7497
+ /** @internal */
7415
7498
  set activeDescendantsId(value) {
7416
7499
  this._activeDescendantsId = value;
7417
7500
  this.cdRef.markForCheck();
7418
7501
  }
7502
+ /** @internal */
7419
7503
  get open() {
7420
7504
  return this._open;
7421
7505
  }
7506
+ /** @internal */
7422
7507
  set open(value) {
7423
7508
  this._open = value;
7424
7509
  this.cdRef.markForCheck();
7425
7510
  }
7426
7511
  /**
7427
7512
  * Returns a negative margin, that is used to move the picker dropdown to the left side of the picker trigger.
7513
+ * @internal
7428
7514
  */
7429
7515
  get leftOffset() {
7430
7516
  const dropdownWidth = 185;
@@ -7434,11 +7520,16 @@ class PickerComponent {
7434
7520
  this.dir = dir;
7435
7521
  this.cdRef = cdRef;
7436
7522
  this.openDirection = 'right';
7523
+ /** @internal */
7437
7524
  this._isFormControl = false;
7525
+ /** @internal */
7438
7526
  this._open = false;
7527
+ /** @internal */
7439
7528
  this._lastSelectWasByKeyManager = false;
7529
+ /** @internal */
7440
7530
  this.destroyed$ = new Subject();
7441
7531
  }
7532
+ /** @internal */
7442
7533
  manageKeyboardEvents(event) {
7443
7534
  if (this.open) {
7444
7535
  const activeIndex = this.keyManager.activeItemIndex || 0;
@@ -7512,10 +7603,12 @@ class PickerComponent {
7512
7603
  ngOnDestroy() {
7513
7604
  this.destroyed$.next();
7514
7605
  }
7606
+ /** @internal */
7515
7607
  closePicker() {
7516
7608
  this.setActivePickerOption(-1);
7517
7609
  this.open = false;
7518
7610
  }
7611
+ /** @internal */
7519
7612
  toggleOpen() {
7520
7613
  this.open = !this.open;
7521
7614
  if (this.open) {
@@ -7533,13 +7626,16 @@ class PickerComponent {
7533
7626
  }
7534
7627
  }
7535
7628
  //#region Angular Forms API. This is only used when using the Picker inside a FormGroup
7629
+ /** @internal */
7536
7630
  writeValue(value) {
7537
7631
  this.options?.toArray().forEach((option) => (option.selected = option.value === value));
7538
7632
  }
7633
+ /** @internal */
7539
7634
  registerOnChange(fn) {
7540
7635
  this.propagateChange = fn;
7541
7636
  this._isFormControl = true;
7542
7637
  }
7638
+ /** @internal */
7543
7639
  registerOnTouched(fn) {
7544
7640
  this.onTouched = fn;
7545
7641
  }
@@ -7700,18 +7796,24 @@ class SelectListComponent extends BaseSelectDirective {
7700
7796
  this.options = [];
7701
7797
  this.selectionChange = new EventEmitter();
7702
7798
  this.onChooseItem = new EventEmitter();
7799
+ /** @internal */
7703
7800
  this.highlightedIndex = 0;
7801
+ /** @internal */
7704
7802
  this.destroyed$ = new Subject();
7705
7803
  }
7804
+ /** @internal */
7706
7805
  get dropdownTmpl() {
7707
7806
  return this.explicitDropdown || this.implicitDropdown;
7708
7807
  }
7808
+ /** @internal */
7709
7809
  resetInput() {
7710
7810
  this.queryControl.reset('', { emitEvent: false });
7711
7811
  }
7812
+ /** @internal */
7712
7813
  focus() {
7713
7814
  this.searchInput.nativeElement.focus();
7714
7815
  }
7816
+ /** @internal */
7715
7817
  focusAndOpen() {
7716
7818
  this.focus();
7717
7819
  this.open.next(true);
@@ -7793,6 +7895,7 @@ class SelectListComponent extends BaseSelectDirective {
7793
7895
  });
7794
7896
  this.focusAndOpen();
7795
7897
  }
7898
+ /** @internal */
7796
7899
  selectOption(index) {
7797
7900
  if (this.determineHighlightIndex(this.options, this.selection) === index) {
7798
7901
  this.onChooseItem.emit(this.selection.id);
@@ -7805,6 +7908,7 @@ class SelectListComponent extends BaseSelectDirective {
7805
7908
  this.dropdownComponent?.select(index);
7806
7909
  }
7807
7910
  }
7911
+ /** @internal */
7808
7912
  searchKeyChanged(event) {
7809
7913
  if (event.target.value === '' && !['ArrowUp', 'ArrowDown'].includes(event.key)) {
7810
7914
  this.highlightedIndex = this.determineHighlightIndex(this.dropdownComponent.options, this.selection);
@@ -7888,6 +7992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
7888
7992
  * 2. Use the component in your template.
7889
7993
  */
7890
7994
  class SingleSelectComponent extends BaseSelectDirective {
7995
+ /** @internal */
7891
7996
  static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition, keyCode) {
7892
7997
  switch (keyCode) {
7893
7998
  case ARROW_LEFT:
@@ -7899,6 +8004,7 @@ class SingleSelectComponent extends BaseSelectDirective {
7899
8004
  }
7900
8005
  return cursorPosition;
7901
8006
  }
8007
+ /** @internal */
7902
8008
  static getKeyboardSelectAction(cursorPosition, keyCode) {
7903
8009
  if (cursorPosition <= -1 && keyCode === ARROW_RIGHT) {
7904
8010
  return KeyboardSelectAction.NEXT;
@@ -7914,9 +8020,11 @@ class SingleSelectComponent extends BaseSelectDirective {
7914
8020
  }
7915
8021
  return null;
7916
8022
  }
8023
+ /** @internal */
7917
8024
  get selectedOptionTmpl() {
7918
8025
  return this.explicitSelectedOption || this.implicitSelectedOption;
7919
8026
  }
8027
+ /** @internal */
7920
8028
  get dropdownTmpl() {
7921
8029
  return this.explicitDropdown || this.implicitDropdown;
7922
8030
  }
@@ -7925,7 +8033,6 @@ class SingleSelectComponent extends BaseSelectDirective {
7925
8033
  this.cd = cd;
7926
8034
  this.selectionBackground = 'white';
7927
8035
  this.size = 'default';
7928
- this.dropdownWidthScale = '1x';
7929
8036
  this.padding = 'default';
7930
8037
  this.required = false;
7931
8038
  this.selectionChange = new EventEmitter();
@@ -7933,9 +8040,12 @@ class SingleSelectComponent extends BaseSelectDirective {
7933
8040
  this.allowClear = true;
7934
8041
  this.tabIndex = 0;
7935
8042
  this.markInvalid = false;
8043
+ /** @internal */
7936
8044
  this.destroyed$ = new Subject();
8045
+ /** @internal */
7937
8046
  this.isInputFocusedViaTab = false;
7938
8047
  }
8048
+ /** @internal */
7939
8049
  get cursorStyle() {
7940
8050
  if (this.disabled) {
7941
8051
  return 'default';
@@ -7947,22 +8057,15 @@ class SingleSelectComponent extends BaseSelectDirective {
7947
8057
  return 'pointer';
7948
8058
  }
7949
8059
  }
7950
- get dropdownWidth() {
7951
- switch (this.dropdownWidthScale) {
7952
- case '1x':
7953
- return undefined;
7954
- case '1.5x':
7955
- return '150%';
7956
- case '2x':
7957
- return '200%';
7958
- }
7959
- }
8060
+ /** @internal */
7960
8061
  resetInput() {
7961
8062
  this.queryControl.reset('', { emitEvent: false });
7962
8063
  }
8064
+ /** @internal */
7963
8065
  focus() {
7964
8066
  this.queryInput.nativeElement.focus();
7965
8067
  }
8068
+ /** @internal */
7966
8069
  focusAndOpen() {
7967
8070
  this.queryInput.nativeElement.focus();
7968
8071
  this.open.next(true);
@@ -8055,6 +8158,7 @@ class SingleSelectComponent extends BaseSelectDirective {
8055
8158
  });
8056
8159
  keyboardEvents.openOnArrowDown$.subscribe(() => this.open.next(true));
8057
8160
  }
8161
+ /** @internal */
8058
8162
  selectOption(option) {
8059
8163
  this.selection = option;
8060
8164
  this.selectionChange.emit(option);
@@ -8066,6 +8170,7 @@ class SingleSelectComponent extends BaseSelectDirective {
8066
8170
  this.open.next(false);
8067
8171
  });
8068
8172
  }
8173
+ /** @internal */
8069
8174
  removeSelection() {
8070
8175
  this.selection = null;
8071
8176
  this.cd.markForCheck();
@@ -8074,17 +8179,23 @@ class SingleSelectComponent extends BaseSelectDirective {
8074
8179
  this.propagateChange(this.selection);
8075
8180
  this.resetSelectState();
8076
8181
  }
8182
+ /** @internal */
8077
8183
  propagateChange(_value) { }
8184
+ /** @internal */
8078
8185
  writeValue(newSelection) {
8079
8186
  this.selection = newSelection;
8080
8187
  }
8188
+ /** @internal */
8081
8189
  setDisabledState(isDisabled) {
8082
8190
  this.disabled = isDisabled;
8083
8191
  }
8192
+ /** @internal */
8084
8193
  registerOnChange(fn) {
8085
8194
  this.propagateChange = fn;
8086
8195
  }
8196
+ /** @internal */
8087
8197
  registerOnTouched(_fn) { }
8198
+ /** @internal */
8088
8199
  focusedViaTab() {
8089
8200
  this.isInputFocusedViaTab = true;
8090
8201
  }
@@ -8094,13 +8205,13 @@ class SingleSelectComponent extends BaseSelectDirective {
8094
8205
  : options.findIndex((option) => isEqual$1(selection, option));
8095
8206
  }
8096
8207
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
8097
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.8", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", dropdownWidthScale: "dropdownWidthScale", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
8208
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.8", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
8098
8209
  {
8099
8210
  provide: NG_VALUE_ACCESSOR,
8100
8211
  multi: true,
8101
8212
  useExisting: forwardRef(() => SingleSelectComponent)
8102
8213
  }
8103
- ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
8214
+ ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
8104
8215
  }
8105
8216
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SingleSelectComponent, decorators: [{
8106
8217
  type: Component,
@@ -8110,15 +8221,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8110
8221
  multi: true,
8111
8222
  useExisting: forwardRef(() => SingleSelectComponent)
8112
8223
  }
8113
- ], standalone: true, imports: [NgIf, MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
8224
+ ], standalone: true, imports: [NgIf, MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
8114
8225
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
8115
8226
  type: Input
8116
8227
  }], selectionBackground: [{
8117
8228
  type: Input
8118
8229
  }], size: [{
8119
8230
  type: Input
8120
- }], dropdownWidthScale: [{
8121
- type: Input
8122
8231
  }], padding: [{
8123
8232
  type: Input
8124
8233
  }], inputId: [{