@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.
- package/esm2022/lib/core-ui/components/ellipsis/ellipsis.component.mjs +4 -1
- package/esm2022/lib/core-ui/components/tokenizer/tokenizer.component.mjs +4 -1
- package/esm2022/lib/forms-ui/components/currency/currency-input.component.mjs +13 -1
- package/esm2022/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.mjs +9 -1
- package/esm2022/lib/forms-ui/components/form-error/form-error.component.mjs +3 -1
- package/esm2022/lib/forms-ui/components/keyboard-select.directive.mjs +8 -1
- package/esm2022/lib/forms-ui/components/multi-select/multi-select.component.mjs +26 -17
- package/esm2022/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs +9 -1
- package/esm2022/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs +17 -2
- package/esm2022/lib/forms-ui/components/picker/picker.component.mjs +16 -1
- package/esm2022/lib/forms-ui/components/select-list/select-list.component.mjs +9 -1
- package/esm2022/lib/forms-ui/components/single-select/single-select.component.mjs +22 -17
- package/esm2022/lib/forms-ui/models/base-select.directive.mjs +15 -1
- package/fesm2022/leanix-components.mjs +142 -33
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/core-ui/components/ellipsis/ellipsis.component.d.ts +8 -0
- package/lib/core-ui/components/tokenizer/tokenizer.component.d.ts +6 -0
- package/lib/forms-ui/components/currency/currency-input.component.d.ts +14 -0
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +13 -0
- package/lib/forms-ui/components/form-error/form-error.component.d.ts +2 -0
- package/lib/forms-ui/components/keyboard-select.directive.d.ts +9 -0
- package/lib/forms-ui/components/multi-select/multi-select.component.d.ts +28 -3
- package/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.d.ts +11 -0
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +17 -0
- package/lib/forms-ui/components/picker/picker.component.d.ts +19 -0
- package/lib/forms-ui/components/select-list/select-list.component.d.ts +13 -0
- package/lib/forms-ui/components/single-select/single-select.component.d.ts +25 -3
- package/lib/forms-ui/models/base-select.directive.d.ts +19 -0
- 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
|
-
|
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",
|
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\"
|
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\"
|
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
|
-
}],
|
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
|
-
|
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",
|
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\"
|
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\"
|
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: [{
|