@leanix/components 0.4.407 → 0.4.409

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 (40) hide show
  1. package/esm2022/index.mjs +2 -1
  2. package/esm2022/lib/core-ui/components/badge/badge.component.mjs +21 -1
  3. package/esm2022/lib/core-ui/components/banner/banner.component.mjs +23 -1
  4. package/esm2022/lib/core-ui/components/button/button.component.mjs +40 -1
  5. package/esm2022/lib/core-ui/components/card/card.component.mjs +16 -1
  6. package/esm2022/lib/core-ui/components/content-panel/content-panel.component.mjs +18 -3
  7. package/esm2022/lib/core-ui/components/counter/counter.component.mjs +14 -1
  8. package/esm2022/lib/core-ui/components/integration-link-card/integration-link-card.component.mjs +47 -1
  9. package/esm2022/lib/core-ui/components/skeleton/skeleton.component.mjs +19 -1
  10. package/esm2022/lib/core-ui/components/stepper/stepper.component.mjs +41 -1
  11. package/esm2022/lib/core-ui/components/tiny-spinner/tiny-spinner.component.mjs +12 -1
  12. package/esm2022/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.mjs +44 -0
  13. package/esm2022/lib/core-ui/components/tokenizer/tokenizer.component.mjs +3 -3
  14. package/esm2022/lib/core-ui/tooltip/tooltip.directive.mjs +16 -1
  15. package/esm2022/lib/forms-ui/components/breadcrumb/breadcrumb.component.mjs +17 -1
  16. package/esm2022/lib/forms-ui/components/date-input/date-input.component.mjs +100 -38
  17. package/esm2022/lib/forms-ui/components/slider-toggle/slider-toggle.component.mjs +18 -1
  18. package/esm2022/lib/modal-ui/components/modal/modal.component.mjs +55 -7
  19. package/esm2022/lib/popover-ui/components/popover/popover.component.mjs +31 -6
  20. package/fesm2022/leanix-components.mjs +541 -82
  21. package/fesm2022/leanix-components.mjs.map +1 -1
  22. package/index.d.ts +1 -0
  23. package/lib/core-ui/components/badge/badge.component.d.ts +23 -0
  24. package/lib/core-ui/components/banner/banner.component.d.ts +22 -0
  25. package/lib/core-ui/components/button/button.component.d.ts +39 -0
  26. package/lib/core-ui/components/card/card.component.d.ts +15 -0
  27. package/lib/core-ui/components/content-panel/content-panel.component.d.ts +18 -1
  28. package/lib/core-ui/components/counter/counter.component.d.ts +14 -0
  29. package/lib/core-ui/components/integration-link-card/integration-link-card.component.d.ts +60 -0
  30. package/lib/core-ui/components/skeleton/skeleton.component.d.ts +18 -0
  31. package/lib/core-ui/components/stepper/stepper.component.d.ts +40 -0
  32. package/lib/core-ui/components/tiny-spinner/tiny-spinner.component.d.ts +11 -0
  33. package/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.d.ts +19 -0
  34. package/lib/core-ui/tooltip/tooltip.directive.d.ts +17 -0
  35. package/lib/forms-ui/components/breadcrumb/breadcrumb.component.d.ts +16 -0
  36. package/lib/forms-ui/components/date-input/date-input.component.d.ts +80 -7
  37. package/lib/forms-ui/components/slider-toggle/slider-toggle.component.d.ts +20 -0
  38. package/lib/modal-ui/components/modal/modal.component.d.ts +59 -5
  39. package/lib/popover-ui/components/popover/popover.component.d.ts +37 -5
  40. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Injectable, ElementRef, Inject, ViewChild, input, computed, Directive, ContentChildren, Pipe, Optional, NgModule, effect, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, inject, DestroyRef, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
2
+ import { InjectionToken, Component, Input, signal, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, HostListener, Injectable, ElementRef, Inject, ViewChild, input, computed, Directive, ContentChildren, Pipe, Optional, NgModule, effect, inject, DestroyRef, ChangeDetectorRef, ContentChild, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
3
3
  import * as i1$1 from '@ngx-translate/core';
4
4
  import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
5
5
  import * as i1 from '@angular/common';
@@ -25,17 +25,17 @@ import DOMPurify from 'dompurify';
25
25
  import { isArray, isEqual, split, uniqueId, pick, intersection, isNil, curry } from 'lodash-es';
26
26
  import { Renderer, marked } from 'marked';
27
27
  import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
28
+ import * as i1$4 from '@ncstate/sat-popover';
29
+ import { SatPopoverComponent, SatPopoverModule } from '@ncstate/sat-popover';
28
30
  import { ClipboardModule } from '@angular/cdk/clipboard';
29
- import * as i1$5 from '@angular/forms';
31
+ import * as i1$6 from '@angular/forms';
30
32
  import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, Validators, FormControl } from '@angular/forms';
31
- import * as i1$4 from 'ngx-infinite-scroll';
33
+ import * as i1$5 from 'ngx-infinite-scroll';
32
34
  import { InfiniteScrollModule } from 'ngx-infinite-scroll';
33
- import * as i1$6 from '@angular/cdk/drag-drop';
35
+ import * as i1$7 from '@angular/cdk/drag-drop';
34
36
  import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
35
- import * as i1$7 from '@angular/platform-browser';
37
+ import * as i1$8 from '@angular/platform-browser';
36
38
  import { trigger, transition, style, animate } from '@angular/animations';
37
- import * as i1$8 from '@ncstate/sat-popover';
38
- import { SatPopoverComponent, SatPopoverModule } from '@ncstate/sat-popover';
39
39
  import { coerceNumberProperty } from '@angular/cdk/coercion';
40
40
 
41
41
  const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
@@ -50,11 +50,31 @@ const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
50
50
  const LOCALE_FN = new InjectionToken('LOCALE_FN');
51
51
  const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
52
52
 
53
+ /**
54
+ * Badge component is used to show a small piece of information in a colored badge.
55
+ *
56
+ * ## Usage
57
+ *
58
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
59
+ *
60
+ * ```ts
61
+ * import { LxCoreUiModule } from '@leanix/components';
62
+ * ```
63
+ */
53
64
  class BadgeComponent {
54
65
  constructor() {
66
+ /**
67
+ * The color of the badge component
68
+ */
55
69
  this.color = 'blue';
70
+ /**
71
+ * If set to true, the badge will create a color for itself based on the content, ignoring other color settings.
72
+ * This could be useful if we want to show a range of different colors for different contents.
73
+ */
56
74
  this.calculateColorsDynamically = false;
75
+ /** @internal */
57
76
  this.textColor = '';
77
+ /** @internal */
58
78
  this.backGroundColor = '';
59
79
  }
60
80
  ngOnInit() {
@@ -106,13 +126,31 @@ const BANNER_SIZE = {
106
126
  SMALL: 'small'
107
127
  };
108
128
 
129
+ /**
130
+ * Banner can be used to display important information to the user. It allows for any type of content to be displayed in a banner.
131
+ *
132
+ * ## Usage
133
+ *
134
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
135
+ *
136
+ * ```ts
137
+ * import { LxCoreUiModule } from '@leanix/components';
138
+ * ```
139
+ *
140
+ * 2. Use the component in your template.
141
+ */
109
142
  class BannerComponent {
110
143
  constructor() {
111
144
  this._type = signal(BANNER_TYPE.WARNING);
112
145
  this._size = signal(BANNER_SIZE.BIG);
146
+ /** @internal */
113
147
  this.showIcon = signal(false);
148
+ /** @internal */
114
149
  this.iconClass = signal('');
115
150
  }
151
+ /**
152
+ * The type of the banner
153
+ */
116
154
  set type(type) {
117
155
  this._type.set(type);
118
156
  this.iconClass.set(this.getIconClass(type));
@@ -120,6 +158,9 @@ class BannerComponent {
120
158
  get type() {
121
159
  return this._type();
122
160
  }
161
+ /**
162
+ * The size of the banner
163
+ */
123
164
  set size(size) {
124
165
  this._size.set(size);
125
166
  this.showIcon.set(size === BANNER_SIZE.BIG);
@@ -130,6 +171,7 @@ class BannerComponent {
130
171
  ngOnInit() {
131
172
  this.showIcon.set(this.size === BANNER_SIZE.BIG);
132
173
  }
174
+ /** @internal */
133
175
  getIconClass(type) {
134
176
  switch (type) {
135
177
  case BANNER_TYPE.SUCCESS:
@@ -185,6 +227,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
185
227
  args: ['class.borderSeparator']
186
228
  }] } });
187
229
 
230
+ /**
231
+ * Tiny spinner component is used to show a small spinner.
232
+ *
233
+ * ## Usage
234
+ *
235
+ * 1. Import the `TinySpinnerComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
236
+ *
237
+ * ```ts
238
+ * import { TinySpinnerComponent } from '@leanix/components';
239
+ * ```
240
+ */
188
241
  class TinySpinnerComponent {
189
242
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TinySpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
190
243
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TinySpinnerComponent, isStandalone: true, selector: "lx-tiny-spinner", ngImport: i0, template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\n" }); }
@@ -194,16 +247,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
194
247
  args: [{ selector: 'lx-tiny-spinner', standalone: true, template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\n" }]
195
248
  }] });
196
249
 
250
+ /**
251
+ * Button component is used to create a button with different styles and sizes. This uses native button element and
252
+ * only provides styling and some additional features like loading spinner.
253
+ *
254
+ * ## Usage
255
+ *
256
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
257
+ *
258
+ * ```ts
259
+ * import { LxCoreUiModule } from '@leanix/components';
260
+ * ```
261
+ */
197
262
  class ButtonComponent {
198
263
  constructor() {
264
+ /**
265
+ * The size of the button.
266
+ */
199
267
  this.size = 'medium';
268
+ /**
269
+ * The color of the button.
270
+ */
200
271
  this.color = 'default';
272
+ /**
273
+ * The mode of the button.
274
+ */
201
275
  this.mode = 'solid';
276
+ /**
277
+ * The pressed state of the button. This simulates the `:active` state of the button.
278
+ */
202
279
  this.pressed = false;
280
+ /**
281
+ * The selected state of the button. This simulates the `:hover` state of the button.
282
+ */
203
283
  this.selected = false;
284
+ /**
285
+ * This makes the button square.
286
+ */
204
287
  this.square = false;
288
+ /**
289
+ * This makes corners rounded. Use with `square` for a true circle.
290
+ */
205
291
  this.circle = false;
292
+ /**
293
+ * This disables the button.
294
+ */
206
295
  this.disabled = false;
296
+ /**
297
+ * This shows a spinner inside the button.
298
+ */
207
299
  this.showSpinner = false;
208
300
  }
209
301
  get isDisabled() {
@@ -262,8 +354,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
262
354
  args: ['disabled']
263
355
  }] } });
264
356
 
357
+ /**
358
+ * Card component is a container component that can be used to display content in a card-like style.
359
+ * This documentation provides details on the usage and configuration of the Card Component.
360
+ *
361
+ * ## Usage
362
+ *
363
+ * 1. Import the `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
364
+ *
365
+ * ```ts
366
+ * import { LxCoreUiModule } from '@leanix/components';
367
+ * ```
368
+ */
265
369
  class CardComponent {
266
370
  constructor() {
371
+ /**
372
+ * The style of the card.
373
+ */
267
374
  this.dataStyle = 'white';
268
375
  }
269
376
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -328,9 +435,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
328
435
  args: ['click', ['$event']]
329
436
  }] } });
330
437
 
438
+ /**
439
+ * Counter component is used to create a counter with different styles and sizes.
440
+ *
441
+ * ## Usage
442
+ *
443
+ * 1. Import the `CounterComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
444
+ *
445
+ * ```ts
446
+ * import { CounterComponent } from '@leanix/components';
447
+ * ```
448
+ */
331
449
  class CounterComponent {
332
450
  constructor() {
451
+ /** The size of the counter. */
333
452
  this.size = 'default';
453
+ /** The color of the counter. */
334
454
  this.color = 'primary';
335
455
  }
336
456
  get classes() {
@@ -804,7 +924,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
804
924
  type: Input
805
925
  }] } });
806
926
 
927
+ /**
928
+ * Tooltip directive is used to show a tooltip on hover or focus on an element.
929
+ *
930
+ * ## Usage
931
+ *
932
+ * 1. Import the `TooltipDirective` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
933
+ *
934
+ * ```ts
935
+ * import { TooltipDirective } from '@leanix/components';
936
+ * ```
937
+ */
807
938
  class TooltipDirective {
939
+ /** The position of the tooltip. */
808
940
  set lxTooltipPosition(value) {
809
941
  this.position = {
810
942
  x: value && isValidX(value.x) ? value.x : 'center',
@@ -823,6 +955,7 @@ class TooltipDirective {
823
955
  x: 'center',
824
956
  y: 'top'
825
957
  };
958
+ /** Whether the tooltip content is HTML. */
826
959
  this.lxTooltipIsHtmlContent = false;
827
960
  this.mouseOrFocusOnHost = false;
828
961
  }
@@ -848,6 +981,7 @@ class TooltipDirective {
848
981
  }
849
982
  }
850
983
  }
984
+ /** @internal */
851
985
  show() {
852
986
  this.mouseOrFocusOnHost = true;
853
987
  setTimeout(() => {
@@ -866,6 +1000,7 @@ class TooltipDirective {
866
1000
  this.mouseOrFocusOnHost = false;
867
1001
  this.overlayRef?.dispose();
868
1002
  }
1003
+ /** @internal */
869
1004
  hide() {
870
1005
  this.mouseOrFocusOnHost = false;
871
1006
  this.ariaDescriber.removeDescription(this.elementRef.nativeElement, this.tooltipRef?.location.nativeElement);
@@ -906,15 +1041,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
906
1041
  args: ['blur']
907
1042
  }] } });
908
1043
 
1044
+ /**
1045
+ * Integration Link Card Component is a card component that displays information about an integration link.
1046
+ *
1047
+ * This documentation provides details on the usage and configuration of the Integration Link Card Component.
1048
+ *
1049
+ * ## Usage
1050
+ *
1051
+ * 1. Import `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component, or in case of a standalone parent component, import the
1052
+ * `IntegrationLinkCardComponent` directly into your standalone component.
1053
+ *
1054
+ * - Module import:
1055
+ *
1056
+ * ```ts
1057
+ * import { LxCoreUiModule } from '@leanix/components';
1058
+ * ```
1059
+ *
1060
+ * - Standalone component import:
1061
+ *
1062
+ * ```ts
1063
+ * import { IntegrationLinkCardComponent } from '@leanix/components';
1064
+ *
1065
+ * @Component({
1066
+ * selector: 'lx-my-component',
1067
+ * standalone: true,
1068
+ * imports: [IntegrationLinkCardComponent],
1069
+ * templateUrl: './my-component.component.html'
1070
+ * })
1071
+ * export class MyComponent {}
1072
+ * ```
1073
+ *
1074
+ * ## Usage
1075
+ *
1076
+ * #### Required Inputs:
1077
+ *
1078
+ * - `sourceIconClasses` (`string`) - font awesome classes for source icon;
1079
+ * - `sourceName` (`string`) - the name of the source associated with the integration card;
1080
+ * - `title` (`string`) - the main title of the integration card.
1081
+ */
909
1082
  class IntegrationLinkCardComponent {
910
1083
  constructor() {
1084
+ /**
1085
+ * Determines if the integration is in an inactive state
1086
+ * When set to true, the card will display in an inactive state
1087
+ * */
911
1088
  this.isInactive = false;
1089
+ /** Event emitted when the action button is clicked */
912
1090
  this.actionButtonClicked = new EventEmitter();
1091
+ /** Event emitted when the link is clicked */
913
1092
  this.linkClicked = new EventEmitter();
914
1093
  }
1094
+ /** @internal */
915
1095
  onActionButtonClicked() {
916
1096
  this.actionButtonClicked.emit();
917
1097
  }
1098
+ /** @internal */
918
1099
  onLinkClicked(event) {
919
1100
  this.linkClicked.emit(event);
920
1101
  }
@@ -990,19 +1171,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
990
1171
  type: Input
991
1172
  }] } });
992
1173
 
1174
+ /**
1175
+ * Stepper component is a wrapper around the Angular CDK Stepper component. It provides a way to create a linear
1176
+ * sequence of steps that guide users through a process.
1177
+ *
1178
+ * ## Usage
1179
+ *
1180
+ * 1. Import `LxCoreUiModule` module from `@leanix/components` and `CdkStepperModule` module from `@angular/cdk/stepper` in your module where you want to use the component, or in case of a standalone parent component, import the
1181
+ * `StepperComponent` and `CdkStepperModule` directly into your standalone component.
1182
+ *
1183
+ * - Module import:
1184
+ *
1185
+ * ```ts
1186
+ * import { LxCoreUiModule } from '@leanix/components';
1187
+ * import { CdkStepperModule } from '@angular/cdk/stepper';
1188
+ * ```
1189
+ *
1190
+ * - Standalone component import:
1191
+ *
1192
+ * ```ts
1193
+ * import { StepperComponent } from '@leanix/components';
1194
+ * import { CdkStepperModule } from '@angular/cdk/stepper';
1195
+ *
1196
+ * @Component({
1197
+ * selector: 'lx-my-component',
1198
+ * standalone: true,
1199
+ * imports: [CdkStepperModule, StepperComponent],
1200
+ * templateUrl: './my-component.component.html'
1201
+ * })
1202
+ * export class MyComponent {}
1203
+ * ```
1204
+ *
1205
+ * 2. Use the component in your template. All steps added to the stepper should be wrapped in a `cdk-step` element.
1206
+ *
1207
+ * Since this component extends the Angular CDK `CdkStepper` component, all the inputs, outputs, and methods available in the
1208
+ * `CdkStepper` component are also available in the `StepperComponent` and are documented in the
1209
+ * [Angular CDK documentation](https://material.angular.io/cdk/stepper/api).
1210
+ */
993
1211
  class StepperComponent extends CdkStepper {
994
1212
  // TODO - Remove this constructor once the following issue is resolved: https://github.com/storybookjs/storybook/issues/23534#issuecomment-2042888436
995
1213
  // Storybook smoke tests for stepper component are failing without this constructor
996
1214
  constructor(_dir, _changeDetectorRef, _elementRef) {
997
1215
  super(_dir, _changeDetectorRef, _elementRef);
1216
+ /** @internal */
998
1217
  this.size = 'normal';
999
1218
  }
1000
1219
  get isSmallVariant() {
1001
1220
  return this.size === 'small';
1002
1221
  }
1222
+ /** @internal */
1003
1223
  isCompleted(index) {
1004
1224
  return index < this.selectedIndex;
1005
1225
  }
1226
+ /** @internal */
1006
1227
  isActiveStep(index) {
1007
1228
  return index === this.selectedIndex;
1008
1229
  }
@@ -2164,14 +2385,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
2164
2385
  }]
2165
2386
  }] });
2166
2387
 
2388
+ /**
2389
+ * A content panel component is used to show a panel with a title and content.
2390
+ *
2391
+ * ## Usage
2392
+ *
2393
+ * 1. Import the `ContentPanelComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
2394
+ *
2395
+ * ```ts
2396
+ * import { ContentPanelComponent } from '@leanix/components';
2397
+ * ```
2398
+ */
2167
2399
  class ContentPanelComponent {
2168
2400
  constructor() {
2169
- this.baseClass = 'contentPanel';
2401
+ /** Event emitted when the close button is clicked */
2170
2402
  this.contentPanelClose = new EventEmitter();
2403
+ /** @internal */
2404
+ this.baseClass = 'contentPanel';
2171
2405
  }
2406
+ /** @internal */
2172
2407
  onClose() {
2173
2408
  this.contentPanelClose.emit();
2174
2409
  }
2410
+ /** @internal */
2175
2411
  scrollToTop() {
2176
2412
  this.body.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
2177
2413
  }
@@ -2190,6 +2426,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
2190
2426
  args: ['body']
2191
2427
  }] } });
2192
2428
 
2429
+ /**
2430
+ * Skeleton is a component that can be used to show a loading state of a component.
2431
+ *
2432
+ * ## Usage
2433
+ *
2434
+ * 1. Import the `SkeletonComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
2435
+ *
2436
+ * ```ts
2437
+ * import { SkeletonComponent } from '@leanix/components';
2438
+ * ```
2439
+ *
2440
+ * Use skeleton loaders for pages or sections that load content progressively, like text and images. The component can
2441
+ * be used to compose various scenarios like placeholders for thumbnails, lists, and avatars. See the example
2442
+ * [patterns](?path=/docs/skeleton-patterns--docs) for more details.
2443
+ *
2444
+ * To get started, import the `SkeletonComponent` in your Angular module or standalone component and use it in the
2445
+ * template using the `<lx-skeleton />` selector with the desired width, height, and border radius.
2446
+ */
2193
2447
  class SkeletonComponent {
2194
2448
  constructor() {
2195
2449
  /**
@@ -2320,11 +2574,11 @@ class TokenizerComponent {
2320
2574
  this.changeDetectorRef.detectChanges();
2321
2575
  }
2322
2576
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerComponent, deps: [{ token: i0.ElementRef }, { token: i0.DestroyRef }, { token: i0.ChangeDetectorRef }, { token: ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
2323
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TokenizerComponent, isStandalone: true, selector: "lx-tokenizer", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowPlaceholderClick: "overflowPlaceholderClick" }, queries: [{ propertyName: "items", predicate: TokenComponent }], viewQueries: [{ propertyName: "counter", first: true, predicate: ["counter"], descendants: true, read: ElementRef }, { propertyName: "tokensContainer", first: true, predicate: ["tokensContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px}.tokensContainer{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2577
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TokenizerComponent, isStandalone: true, selector: "lx-tokenizer", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflowPlaceholderClick: "overflowPlaceholderClick" }, queries: [{ propertyName: "items", predicate: TokenComponent }], viewQueries: [{ propertyName: "counter", first: true, predicate: ["counter"], descendants: true, read: ElementRef }, { propertyName: "tokensContainer", first: true, predicate: ["tokensContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2324
2578
  }
2325
2579
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerComponent, decorators: [{
2326
2580
  type: Component,
2327
- args: [{ selector: 'lx-tokenizer', standalone: true, imports: [NgIf, CounterComponent, ButtonComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px}.tokensContainer{display:flex;align-items:center}\n"] }]
2581
+ args: [{ selector: 'lx-tokenizer', standalone: true, imports: [NgIf, CounterComponent, ButtonComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tokensContainer class=\"tokensContainer\">\n <ng-content select=\"lx-token\" />\n @if (showCounter()) {\n <button\n lx-button\n class=\"counterButton\"\n mode=\"ghost\"\n (click)=\"onCounterClicked()\"\n [attr.aria-label]=\"\n NAME + (overflowItemCount() === 1 ? '.showMoreItem' : '.showMoreItems') | translate: { count: overflowItemCount() }\n \"\n >\n <lx-counter #counter aria-hidden=\"true\" [content]=\"'+' + overflowItemCount()\" color=\"gray\" />\n </button>\n }\n</div>\n", styles: [":host{display:flex;align-items:center;white-space:nowrap}:host .counterButton{padding:0;display:flex;align-items:center;margin-left:4px;border-radius:12px}.tokensContainer{display:flex;align-items:center}\n"] }]
2328
2582
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: ResizeObserverService }], propDecorators: { overflowPlaceholderClick: [{
2329
2583
  type: Output
2330
2584
  }], items: [{
@@ -2338,6 +2592,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
2338
2592
  args: ['tokensContainer', { read: ElementRef }]
2339
2593
  }] } });
2340
2594
 
2595
+ class TokenizerOverflowPopoverComponent {
2596
+ constructor() {
2597
+ this.destroyRef = inject(DestroyRef);
2598
+ this.startIndex = signal(0);
2599
+ this.changeDetectorRef = inject(ChangeDetectorRef);
2600
+ this.tokenizer = input.required();
2601
+ this.horizontalAlign = input('after');
2602
+ this.verticalAlign = input('start');
2603
+ effect(() => {
2604
+ this.overflowClickSubscription?.unsubscribe();
2605
+ this.overflowClickSubscription = this.tokenizer()
2606
+ .overflowPlaceholderClick.pipe(takeUntilDestroyed(this.destroyRef))
2607
+ .subscribe(({ startIndex, counterElement }) => {
2608
+ this.startIndex.set(startIndex);
2609
+ this.popover.anchor = counterElement;
2610
+ this.popover.open();
2611
+ });
2612
+ });
2613
+ }
2614
+ closePopover() {
2615
+ this.popover.close();
2616
+ this.changeDetectorRef.detectChanges();
2617
+ }
2618
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerOverflowPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2619
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TokenizerOverflowPopoverComponent, isStandalone: true, selector: "lx-tokenizer-overflow-popover", inputs: { tokenizer: { classPropertyName: "tokenizer", publicName: "tokenizer", isSignal: true, isRequired: true, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: SatPopoverComponent, descendants: true }], ngImport: i0, template: "<sat-popover\n (backdropClicked)=\"closePopover()\"\n [hasBackdrop]=\"true\"\n [horizontalAlign]=\"horizontalAlign()\"\n [verticalAlign]=\"verticalAlign()\"\n openTransition=\"100ms\"\n closeTransition=\"100ms\"\n>\n @if (popoverTemplate) {\n <div\n class=\"tokenizerPopoverContentWrapper\"\n [class.before]=\"horizontalAlign() === 'before'\"\n [class.after]=\"horizontalAlign() === 'after'\"\n >\n <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n </div>\n }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$4.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2620
+ }
2621
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TokenizerOverflowPopoverComponent, decorators: [{
2622
+ type: Component,
2623
+ args: [{ selector: 'lx-tokenizer-overflow-popover', standalone: true, imports: [TokenizerComponent, SatPopoverModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sat-popover\n (backdropClicked)=\"closePopover()\"\n [hasBackdrop]=\"true\"\n [horizontalAlign]=\"horizontalAlign()\"\n [verticalAlign]=\"verticalAlign()\"\n openTransition=\"100ms\"\n closeTransition=\"100ms\"\n>\n @if (popoverTemplate) {\n <div\n class=\"tokenizerPopoverContentWrapper\"\n [class.before]=\"horizontalAlign() === 'before'\"\n [class.after]=\"horizontalAlign() === 'after'\"\n >\n <ng-container *ngTemplateOutlet=\"popoverTemplate; context: { $implicit: startIndex() }\" />\n </div>\n }\n</sat-popover>\n", styles: [".tokenizerPopoverContentWrapper{padding:16px;background:#fff;border-radius:4px;box-shadow:0 8px 14px #5261794d}.tokenizerPopoverContentWrapper.before{margin-right:10px}.tokenizerPopoverContentWrapper.after{margin-left:10px}\n"] }]
2624
+ }], ctorParameters: () => [], propDecorators: { popoverTemplate: [{
2625
+ type: ContentChild,
2626
+ args: ['popoverTemplate']
2627
+ }], popover: [{
2628
+ type: ViewChild,
2629
+ args: [SatPopoverComponent]
2630
+ }] } });
2631
+
2341
2632
  const defaultElement = 'span';
2342
2633
  const defaultClassName = 'highlight';
2343
2634
  /**
@@ -2680,7 +2971,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
2680
2971
  this.createNewOptionSelected.emit();
2681
2972
  }
2682
2973
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2683
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\" />\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"descriptionTemplateRef\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option description disabledItem\"\n >\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n <li\n *ngIf=\"placeholder\"\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\" />\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2974
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\" />\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"descriptionTemplateRef\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option description disabledItem\"\n >\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n <li\n *ngIf=\"placeholder\"\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\" />\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$5.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2684
2975
  }
2685
2976
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BasicDropdownComponent, decorators: [{
2686
2977
  type: Component,
@@ -3142,9 +3433,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
3142
3433
  args: [TooltipDirective, { descendants: true }]
3143
3434
  }] } });
3144
3435
 
3436
+ /**
3437
+ * Breadcrumb component is used to show a list of labels, usually to show the path of user's navigation.
3438
+ *
3439
+ * ## Usage
3440
+ *
3441
+ * 1. Import the LxFormsModule module from @leanix/components in your module where you want to use the component.
3442
+ *
3443
+ * ```ts
3444
+ * import { LxFormsModule } from '@leanix/components';
3445
+ * ```
3446
+ */
3145
3447
  class BreadcrumbComponent {
3146
3448
  constructor() {
3449
+ /**
3450
+ * Breadcrumbs array to build the component.
3451
+ */
3147
3452
  this.breadcrumbs = [];
3453
+ /** @internal */
3148
3454
  this.viewBreadcrumbs = [];
3149
3455
  }
3150
3456
  ngOnChanges(changes) {
@@ -3170,6 +3476,7 @@ class BreadcrumbComponent {
3170
3476
  }, []);
3171
3477
  }
3172
3478
  }
3479
+ /** @internal */
3173
3480
  isEllipsedBreadcrumb(breadcrumb) {
3174
3481
  return !!breadcrumb.breadcrumbs;
3175
3482
  }
@@ -3555,7 +3862,7 @@ class CurrencyInputComponent {
3555
3862
  useExisting: forwardRef(() => CurrencyInputComponent),
3556
3863
  multi: true
3557
3864
  }
3558
- ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n <input\n [attr.disabled]=\"disabled ? true : null\"\n *ngIf=\"!showCurrencyInput\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\" />\n {{ (dataValue$ | async | number: format) || placeholder }}\n <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\" />\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3865
+ ], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"mode === 'edit'\" class=\"container input-group\">\n <div *ngIf=\"iconPosition === 'first'\" class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n <input\n [attr.disabled]=\"disabled ? true : null\"\n *ngIf=\"!showCurrencyInput\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n <div *ngIf=\"iconPosition === 'end'\" class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n</div>\n<span *ngIf=\"mode === 'view'\" [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n <lx-currency-symbol *ngIf=\"iconPosition === 'first'\" [code]=\"code\" />\n {{ (dataValue$ | async | number: format) || placeholder }}\n <lx-currency-symbol *ngIf=\"iconPosition === 'end'\" [code]=\"code\" />\n</span>\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { 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: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3559
3866
  }
3560
3867
  __decorate([
3561
3868
  Observe('data')
@@ -4778,46 +5085,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
4778
5085
 
4779
5086
  const DEFAULT_MIN_DATE = new Date('0000-01-01');
4780
5087
  const DEFAULT_MAX_DATE = new Date('9999-12-31');
5088
+ /**
5089
+ * This is a date input component that can be used to select a date.
5090
+ *
5091
+ * ## Usage
5092
+ *
5093
+ * 1. Import the `LxFormsUiModule` module from `@leanix/components` in your module where you want to use the component.
5094
+ *
5095
+ * ```ts
5096
+ * import { LxFormsUiModule } from '@leanix/components';
5097
+ * ```
5098
+ */
4781
5099
  class DateInputComponent {
4782
5100
  constructor(cd, dateFormatsProvider, getDateFnLocale) {
4783
5101
  this.cd = cd;
4784
5102
  this.dateFormatsProvider = dateFormatsProvider;
4785
5103
  this.getDateFnLocale = getDateFnLocale;
4786
- this.date = null; // main date input; this is also the one used for ngModel & formControl!
4787
- this.dateChange = new EventEmitter(); // triggered whenever the date changes
4788
- this.dateString = null; // secondary, alternative input with date string
4789
- this.dateStringChange = new EventEmitter(); // triggered whenever the date changes
4790
- // Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects
5104
+ /** The initial date value for the date input field. This is used for `ngModel` and `formControl`. */
5105
+ this.date = null;
5106
+ /** Secondary, alternative input with date string */
5107
+ this.dateString = null;
5108
+ /** Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects */
4791
5109
  this.valueAccessor = 'date';
4792
- this.inputId = ''; // id to be set on input to correspond to outside label
5110
+ /** ID to be set on input to correspond to outside label */
5111
+ this.inputId = '';
5112
+ /** The rendering style of the date input component. Can be one of "LINK", "BUTTON", or "INPUT". */
4793
5113
  this.renderingStyle = 'INPUT';
5114
+ /** The placeholder text to show in the date input field when there is no date selected */
4794
5115
  this.placeholder = 'yyyy-mm-dd';
4795
- this.cdk = true; // Deactivate to use old date picker
4796
- //--- Inputs replicated from datepicker; (selectionDone) is not needed, as (dateChange) is equivalen
4797
- this.datepickerMode = 'day'; // sets datepicker mode, supports: day, month, year
4798
- this.minDate = DEFAULT_MIN_DATE; // oldest selectable date
4799
- this.maxDate = DEFAULT_MAX_DATE; // latest selectable date
4800
- this.minMode = 'day'; // set lower datepicker mode, supports: day, month, year
4801
- this.maxMode = 'year'; // sets upper datepicker mode, supports: day, month, year
4802
- this.showWeeks = true; // if false week numbers will be hidden
4803
- this.formatDay = 'DD'; // format of day in month
4804
- this.formatMonth = 'MMMM'; // format of month in year
4805
- this.formatYear = 'YYYY'; // format of year in year range
4806
- this.formatDayHeader = 'dd'; // format of day in week header
4807
- this.formatDayTitle = 'MMMM YYYY'; // format of title when selecting day
4808
- this.formatMonthTitle = 'YYYY'; // format of title when selecting month
4809
- this.startingDay = 0; // starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public
4810
- this.yearRange = 20; // number of years displayed in year selection
4811
- this.onlyCurrentMonth = false; // if true only dates from the currently displayed month will be shown
4812
- this.shortcutPropagation = false; // if true shortcut`s event propagation will be disabled
4813
- this.customClass = []; // array of custom css classes to be applied to
4814
- this.dateDisabled = []; // array of disabled dates if mode is day, or years, etc.
5116
+ /** Deactivate to use old date picker */
5117
+ this.cdk = true;
5118
+ /** Sets datepicker mode, supports: day, month, year */
5119
+ this.datepickerMode = 'day';
5120
+ /** Oldest selectable date */
5121
+ this.minDate = DEFAULT_MIN_DATE;
5122
+ /** Latest selectable date */
5123
+ this.maxDate = DEFAULT_MAX_DATE;
5124
+ /** Set lower datepicker mode, supports: day, month, year */
5125
+ this.minMode = 'day';
5126
+ /** Sets upper datepicker mode, supports: day, month, year */
5127
+ this.maxMode = 'year';
5128
+ /** If false week numbers will be hidden */
5129
+ this.showWeeks = true;
5130
+ /** Format of day in month */
5131
+ this.formatDay = 'DD';
5132
+ /** Format of month in year */
5133
+ this.formatMonth = 'MMMM';
5134
+ /** Format of year in year range */
5135
+ this.formatYear = 'YYYY';
5136
+ /** Format of day in week header */
5137
+ this.formatDayHeader = 'dd';
5138
+ /** Format of title when selecting day */
5139
+ this.formatDayTitle = 'MMMM YYYY';
5140
+ /** Format of title when selecting month */
5141
+ this.formatMonthTitle = 'YYYY';
5142
+ /** Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public */
5143
+ this.startingDay = 0;
5144
+ /** Number of years displayed in year selection */
5145
+ this.yearRange = 20;
5146
+ /** If true only dates from the currently displayed month will be shown */
5147
+ this.onlyCurrentMonth = false;
5148
+ /** If true shortcut`s event propagation will be disabled */
5149
+ this.shortcutPropagation = false;
5150
+ /** Array of custom css classes to be applied to */
5151
+ this.customClass = [];
5152
+ /** Array of disabled dates if mode is day, or years, etc. */
5153
+ this.dateDisabled = [];
5154
+ /** If true, the date input field will be auto-focused when the component is first rendered. */
4815
5155
  this.autoFocus = false;
5156
+ /** If true, the date input field will be marked as invalid. */
4816
5157
  this.markInvalid = false;
5158
+ /** Triggered whenever the datepicker is closed */
4817
5159
  this.closeDateInput = new EventEmitter();
5160
+ /** Triggered whenever the date changes */
5161
+ this.dateStringChange = new EventEmitter();
5162
+ /** Triggered whenever the date changes. */
5163
+ this.dateChange = new EventEmitter();
5164
+ /** @internal */
4818
5165
  this.showDatepicker = false;
5166
+ /** @internal */
4819
5167
  this.destroyed$ = new Subject();
5168
+ /** @internal */
4820
5169
  this.hasError = false;
5170
+ /** @internal */
4821
5171
  this.propagateChange = (_date) => { };
4822
5172
  this.dateFormat = this.dateFormatsProvider.getDateFormat();
4823
5173
  // Patch DatePicker until https://github.com/valor-software/ng2-bootstrap/issues/1385 is resolved
@@ -4835,11 +5185,13 @@ class DateInputComponent {
4835
5185
  return format(date, f, { locale });
4836
5186
  };
4837
5187
  }
5188
+ /** @internal */
4838
5189
  ngOnInit() {
4839
5190
  this.initDateString$.pipe(takeUntil(this.destroyed$)).subscribe((date) => {
4840
5191
  this.initDate = createDateFromDateString(date) ?? startOfDay(new Date());
4841
5192
  });
4842
5193
  }
5194
+ /** @internal */
4843
5195
  ngOnChanges(changes) {
4844
5196
  if (changes['date']) {
4845
5197
  this.dateString = this.date ? convertDateToLocaleDateString(this.date) : null;
@@ -4848,25 +5200,31 @@ class DateInputComponent {
4848
5200
  this.onDateStringChange(this.dateString, false);
4849
5201
  }
4850
5202
  }
5203
+ /** @internal */
4851
5204
  ngOnDestroy() {
4852
5205
  this.destroyed$.next();
4853
5206
  }
5207
+ /** @internal */
4854
5208
  focus() {
4855
5209
  this.input.nativeElement.focus();
4856
5210
  }
5211
+ /** @internal */
4857
5212
  showPopup() {
4858
5213
  this.showDatepicker = true;
4859
5214
  this.cd.detectChanges();
4860
5215
  }
5216
+ /** @internal */
4861
5217
  togglePopup() {
4862
5218
  this.showDatepicker = !this.showDatepicker;
4863
5219
  }
5220
+ /** @internal */
4864
5221
  hidePopup() {
4865
5222
  if (this.showDatepicker) {
4866
5223
  this.showDatepicker = false;
4867
5224
  this.closeDateInput.emit();
4868
5225
  }
4869
5226
  }
5227
+ /** @internal */
4870
5228
  onDateStringChange(newDateString, emit = true) {
4871
5229
  if (isValidDateString(newDateString)) {
4872
5230
  const date = createDateFromDateString(newDateString);
@@ -4882,10 +5240,12 @@ class DateInputComponent {
4882
5240
  }
4883
5241
  }
4884
5242
  }
5243
+ /** @internal */
4885
5244
  onSelectionDone(newDate) {
4886
5245
  this.updateDate(newDate);
4887
5246
  this.hidePopup();
4888
5247
  }
5248
+ /** @internal */
4889
5249
  onBlur() {
4890
5250
  if (this.onTouched) {
4891
5251
  this.onTouched();
@@ -4907,8 +5267,10 @@ class DateInputComponent {
4907
5267
  this.formControl.updateValueAndValidity();
4908
5268
  }
4909
5269
  }
4910
- //--- Implement ControlValueAccessor
4911
- /** Write a new value to the element. */
5270
+ /**
5271
+ * Write a new value to the element.
5272
+ * @internal
5273
+ */
4912
5274
  writeValue(newDate) {
4913
5275
  if (this.valueAccessor === 'date') {
4914
5276
  this.date = newDate;
@@ -4919,7 +5281,10 @@ class DateInputComponent {
4919
5281
  this.onDateStringChange(this.dateString, false);
4920
5282
  }
4921
5283
  }
4922
- /** Set the function to be called when the control receives a change event. */
5284
+ /**
5285
+ * Set the function to be called when the control receives a change event.
5286
+ * @internal
5287
+ */
4923
5288
  registerOnChange(fn) {
4924
5289
  if (this.valueAccessor === 'date') {
4925
5290
  this.dateChange.pipe(takeUntil(this.destroyed$)).subscribe(fn);
@@ -4928,10 +5293,14 @@ class DateInputComponent {
4928
5293
  this.dateStringChange.pipe(takeUntil(this.destroyed$)).subscribe(fn);
4929
5294
  }
4930
5295
  }
4931
- /** Set the function to be called when the control receives a touch event. */
5296
+ /**
5297
+ * Set the function to be called when the control receives a touch event.
5298
+ * @internal
5299
+ */
4932
5300
  registerOnTouched(fn) {
4933
5301
  this.onTouched = fn;
4934
5302
  }
5303
+ /** @internal */
4935
5304
  validate(c) {
4936
5305
  this.formControl = c;
4937
5306
  return this.hasError
@@ -4944,10 +5313,10 @@ class DateInputComponent {
4944
5313
  : null;
4945
5314
  }
4946
5315
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DATE_FORMATS }, { token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
4947
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
5316
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid" }, outputs: { closeDateInput: "closeDateInput", dateStringChange: "dateStringChange", dateChange: "dateChange" }, providers: [
4948
5317
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
4949
5318
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
4950
- ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n <span\n class=\"wrapper\"\n [class.forLink]=\"renderingStyle === 'LINK'\"\n [class.has-error]=\"hasError\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n >\n <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n below the dateInput element -->\n @switch (renderingStyle) {\n @case ('BUTTON') {\n <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\">\n @if (dateStringTemplate) {\n <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n } @else {\n {{ dateString ?? placeholder }}\n }\n <i class=\"far fa-angle-down lx-margin-left\"></i>\n </button>\n }\n @case ('INPUT') {\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n [lxMarkInvalid]=\"markInvalid\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n />\n }\n @case ('LINK') {\n <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n }\n }\n\n <ng-template\n #cdkDatepicker\n cdkConnectedOverlay\n [cdkConnectedOverlayOpen]=\"showDatepicker\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n (backdropClick)=\"hidePopup()\"\n >\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n </div>\n </div>\n </ng-template>\n </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [lxMarkInvalid]=\"markInvalid\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n </div>\n </div>\n </span>\n </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:14px}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:12px}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:12px}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
5319
+ ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\n <span\n class=\"wrapper\"\n [class.forLink]=\"renderingStyle === 'LINK'\"\n [class.has-error]=\"hasError\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n >\n <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n below the dateInput element -->\n @switch (renderingStyle) {\n @case ('BUTTON') {\n <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\">\n @if (dateStringTemplate) {\n <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n } @else {\n {{ dateString ?? placeholder }}\n }\n <i class=\"far fa-angle-down lx-margin-left\"></i>\n </button>\n }\n @case ('INPUT') {\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n [lxMarkInvalid]=\"markInvalid\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n />\n }\n @case ('LINK') {\n <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n }\n }\n\n <ng-template\n #cdkDatepicker\n cdkConnectedOverlay\n [cdkConnectedOverlayOpen]=\"showDatepicker\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n (backdropClick)=\"hidePopup()\"\n >\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n </div>\n </div>\n </ng-template>\n </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\n [lxMarkInvalid]=\"markInvalid\"\n [(ngModel)]=\"dateString\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onDateStringChange($event)\"\n (focus)=\"showPopup()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"hidePopup()\"\n (keydown.escape)=\"hidePopup()\"\n (keydown.tab)=\"hidePopup()\"\n (keydown.shift.tab)=\"hidePopup()\"\n [class.text-danger]=\"hasError\"\n *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\n (selectionDone)=\"onSelectionDone($event)\"\n [ngModel]=\"date\"\n [datepickerMode]=\"datepickerMode\"\n [initDate]=\"initDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [minMode]=\"minMode\"\n [maxMode]=\"maxMode\"\n [showWeeks]=\"showWeeks\"\n [formatDay]=\"formatDay\"\n [formatMonth]=\"formatMonth\"\n [formatYear]=\"formatYear\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDay]=\"startingDay\"\n [yearRange]=\"yearRange\"\n [onlyCurrentMonth]=\"onlyCurrentMonth\"\n [shortcutPropagation]=\"shortcutPropagation\"\n [customClass]=\"customClass\"\n [dateDisabled]=\"dateDisabled\"\n />\n </div>\n </div>\n </span>\n </div>\n</ng-template>\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:14px}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:900;content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:14px}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:12px}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:12px}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
4951
5320
  }
4952
5321
  __decorate([
4953
5322
  Observe('initDateString')
@@ -4979,12 +5348,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
4979
5348
  args: [DATE_FN_LOCALE]
4980
5349
  }] }], propDecorators: { date: [{
4981
5350
  type: Input
4982
- }], dateChange: [{
4983
- type: Output
4984
5351
  }], dateString: [{
4985
5352
  type: Input
4986
- }], dateStringChange: [{
4987
- type: Output
4988
5353
  }], valueAccessor: [{
4989
5354
  type: Input
4990
5355
  }], inputId: [{
@@ -4999,7 +5364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
4999
5364
  type: Input
5000
5365
  }], initDateString: [{
5001
5366
  type: Input
5002
- }], initDateString$: [], minDate: [{
5367
+ }], minDate: [{
5003
5368
  type: Input
5004
5369
  }], maxDate: [{
5005
5370
  type: Input
@@ -5041,7 +5406,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
5041
5406
  type: Input
5042
5407
  }], closeDateInput: [{
5043
5408
  type: Output
5044
- }], input: [{
5409
+ }], dateStringChange: [{
5410
+ type: Output
5411
+ }], dateChange: [{
5412
+ type: Output
5413
+ }], initDateString$: [], input: [{
5045
5414
  type: ViewChild,
5046
5415
  args: ['input']
5047
5416
  }], dateStringTemplate: [{
@@ -5187,7 +5556,7 @@ class KeyboardSortableItemDirective {
5187
5556
  }
5188
5557
  }
5189
5558
  }
5190
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$6.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
5559
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1$7.CdkDrag }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i2.AriaDescriber }], target: i0.ɵɵFactoryTarget.Directive }); }
5191
5560
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: KeyboardSortableItemDirective, isStandalone: true, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 }); }
5192
5561
  }
5193
5562
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
@@ -5196,7 +5565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
5196
5565
  selector: '[lxKeyboardSortableItem]',
5197
5566
  standalone: true
5198
5567
  }]
5199
- }], ctorParameters: () => [{ type: i1$6.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
5568
+ }], ctorParameters: () => [{ type: i1$7.CdkDrag }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i2.AriaDescriber }], propDecorators: { allItemsData: [{
5200
5569
  type: Input,
5201
5570
  args: ['lxKeyboardSortableItem']
5202
5571
  }], itemData: [{
@@ -5537,13 +5906,13 @@ class InputComponent {
5537
5906
  ngOnDestroy() {
5538
5907
  this.destroyed$.next();
5539
5908
  }
5540
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, deps: [{ token: i1$5.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
5909
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, deps: [{ token: i1$6.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
5541
5910
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "input[lx-input]", inputs: { error: "error", disabled: "disabled" }, host: { properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#99c6fa}:host.error{border-color:#f96464}:host.lx-max-length-counter-input.error{color:#f96464}:host.lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host.lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--sapFontSize, 13.5px);float:right;margin-left:auto;margin-top:2px}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] }); }
5542
5911
  }
5543
5912
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
5544
5913
  type: Component,
5545
5914
  args: [{ selector: 'input[lx-input]', template: ``, standalone: true, imports: [ReactiveFormsModule], styles: [":host{height:32px;padding:8px;border-radius:3px;border:solid 1px #99a5bb;outline:0;color:#2a303d}:host:focus{border-color:#99c6fa}:host.error{border-color:#f96464}:host.lx-max-length-counter-input.error{color:#f96464}:host.lx-max-length-counter-input.error+span.lx-max-length-counter{color:#f96464}:host.lx-max-length-counter-input+span.lx-max-length-counter{font-size:var(--sapFontSize, 13.5px);float:right;margin-left:auto;margin-top:2px}:host.disabled{background-color:#f0f2f5;color:#61779d}\n"] }]
5546
- }], ctorParameters: () => [{ type: i1$5.NgControl, decorators: [{
5915
+ }], ctorParameters: () => [{ type: i1$6.NgControl, decorators: [{
5547
5916
  type: Optional
5548
5917
  }] }], propDecorators: { error: [{
5549
5918
  type: Input
@@ -5817,7 +6186,7 @@ class ResponsiveInputComponent {
5817
6186
  multi: true,
5818
6187
  useExisting: forwardRef(() => ResponsiveInputComponent)
5819
6188
  }
5820
- ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n type=\"text\"\n class=\"responsiveInput\"\n (focus)=\"focus.emit()\"\n (blur)=\"blur.emit()\"\n (keyup.tab)=\"focusViaTab.emit()\"\n (keyup.shift.tab)=\"focusViaTab.emit()\"\n [formControl]=\"inputControl\"\n [attr.id]=\"inputId\"\n #responsiveInput\n [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6189
+ ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n type=\"text\"\n class=\"responsiveInput\"\n (focus)=\"focus.emit()\"\n (blur)=\"blur.emit()\"\n (keyup.tab)=\"focusViaTab.emit()\"\n (keyup.shift.tab)=\"focusViaTab.emit()\"\n [formControl]=\"inputControl\"\n [attr.id]=\"inputId\"\n #responsiveInput\n [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
5821
6190
  }
5822
6191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
5823
6192
  type: Component,
@@ -6108,7 +6477,7 @@ class MultiSelectComponent extends BaseSelectDirective {
6108
6477
  useExisting: forwardRef(() => MultiSelectComponent),
6109
6478
  multi: true
6110
6479
  }
6111
- ], 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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.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" }] }); }
6480
+ ], 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" }] }); }
6112
6481
  }
6113
6482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
6114
6483
  type: Component,
@@ -6218,7 +6587,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
6218
6587
  this.isTopDropdown = event.connectionPair.originY === 'top';
6219
6588
  }
6220
6589
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
6221
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <div\n #keyboardSelectContainer\n class=\"scrollingPanel lxThinScrollbar\"\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"containerScrolled.emit()\"\n >\n <ul class=\"options\">\n <li\n *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n <li>\n <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n <ul>\n <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n <li class=\"noResult\">\n <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n </ng-container>\n <ng-template #defaultText>\n <span>{{ NAME + '.noResults' | translate }}</span>\n </ng-template>\n </li>\n </ng-container>\n <ng-template #options>\n <li\n *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n </ng-container>\n <ng-template #basicDropdownOption>\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n </ng-template>\n </li>\n </ng-template>\n </ul>\n </li>\n </ng-container>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\" />\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6590
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <div\n #keyboardSelectContainer\n class=\"scrollingPanel lxThinScrollbar\"\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"containerScrolled.emit()\"\n >\n <ul class=\"options\">\n <li\n *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n <li>\n <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n <ul>\n <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n <li class=\"noResult\">\n <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n </ng-container>\n <ng-template #defaultText>\n <span>{{ NAME + '.noResults' | translate }}</span>\n </ng-template>\n </li>\n </ng-container>\n <ng-template #options>\n <li\n *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n </ng-container>\n <ng-template #basicDropdownOption>\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n </ng-template>\n </li>\n </ng-template>\n </ul>\n </li>\n </ng-container>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\" />\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$5.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6222
6591
  }
6223
6592
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
6224
6593
  type: Component,
@@ -7213,7 +7582,7 @@ class SelectListComponent extends BaseSelectDirective {
7213
7582
  return options.findIndex((option) => isEqual$1(selection, option));
7214
7583
  }
7215
7584
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
7216
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div class=\"searchWrapper\">\n <input\n #searchInput\n id=\"searchInput\"\n class=\"searchInput\"\n type=\"text\"\n autocomplete=\"off\"\n (keyup)=\"searchKeyChanged($event)\"\n [formControl]=\"queryControl\"\n [placeholder]=\"searchPlaceholder\"\n />\n <label for=\"searchInput\" class=\"fa fa-search\"></label>\n </div>\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n <ng-container>\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: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:15.5px}.selectContainer .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;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
7585
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div class=\"searchWrapper\">\n <input\n #searchInput\n id=\"searchInput\"\n class=\"searchInput\"\n type=\"text\"\n autocomplete=\"off\"\n (keyup)=\"searchKeyChanged($event)\"\n [formControl]=\"queryControl\"\n [placeholder]=\"searchPlaceholder\"\n />\n <label for=\"searchInput\" class=\"fa fa-search\"></label>\n </div>\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n <ng-container>\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: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:15.5px}.selectContainer .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;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
7217
7586
  }
7218
7587
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SelectListComponent, decorators: [{
7219
7588
  type: Component,
@@ -7483,7 +7852,7 @@ class SingleSelectComponent extends BaseSelectDirective {
7483
7852
  multi: true,
7484
7853
  useExisting: forwardRef(() => SingleSelectComponent)
7485
7854
  }
7486
- ], 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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
7855
+ ], 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" }] }); }
7487
7856
  }
7488
7857
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SingleSelectComponent, decorators: [{
7489
7858
  type: Component,
@@ -7539,19 +7908,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
7539
7908
  args: ['queryInput', { static: true }]
7540
7909
  }] } });
7541
7910
 
7911
+ /**
7912
+ * Switch component is a toggle switch that can be used to switch between two states.
7913
+ *
7914
+ * ## Usage
7915
+ *
7916
+ * 1. Import the `SliderToggleComponent` component from `@leanix/components` in your module or standalone copmonent where you want to use the component.
7917
+ *
7918
+ * ```ts
7919
+ * import { SliderToggleComponent } from '@leanix/components';
7920
+ * ```
7921
+ */
7542
7922
  class SliderToggleComponent {
7543
7923
  constructor() {
7924
+ /** Size of the switch */
7544
7925
  this.size = 'small';
7926
+ /** Whether the switch is disabled */
7545
7927
  this.disabled = false;
7928
+ /** Whether the label is in front of the switch */
7546
7929
  this.labelInFront = true;
7930
+ /** Event that is emitted when the switch is toggled */
7547
7931
  this.toggle = new EventEmitter();
7548
7932
  }
7933
+ /** @internal */
7549
7934
  onToggle() {
7550
7935
  this.toggle.emit(!this.value);
7551
7936
  }
7552
7937
  get id() {
7553
7938
  return this.elementId ? `tour${this.elementId}` : null;
7554
7939
  }
7940
+ /** @internal */
7555
7941
  focus(checkbox) {
7556
7942
  // without a delay the checkbox will not be focused again
7557
7943
  setTimeout(() => checkbox.focus(), 150);
@@ -7781,7 +8167,7 @@ class ContenteditableDirective {
7781
8167
  sanitize(content) {
7782
8168
  return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
7783
8169
  }
7784
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
8170
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
7785
8171
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
7786
8172
  }
7787
8173
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ContenteditableDirective, decorators: [{
@@ -7790,7 +8176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
7790
8176
  selector: '[lxContenteditableModel]',
7791
8177
  standalone: true
7792
8178
  }]
7793
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$7.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
8179
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$8.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
7794
8180
  type: Input
7795
8181
  }], lxContenteditableModelChange: [{
7796
8182
  type: Output
@@ -7915,7 +8301,7 @@ class FormErrorDirective {
7915
8301
  this.ref.instance.dynamicErrorMessage.set('');
7916
8302
  }
7917
8303
  }
7918
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i1$5.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
8304
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i1$6.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
7919
8305
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
7920
8306
  }
7921
8307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormErrorDirective, decorators: [{
@@ -7924,7 +8310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
7924
8310
  selector: '[lxFormError]',
7925
8311
  standalone: true
7926
8312
  }]
7927
- }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$5.NgControl, decorators: [{
8313
+ }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i1$6.NgControl, decorators: [{
7928
8314
  type: Optional
7929
8315
  }, {
7930
8316
  type: Self
@@ -8391,7 +8777,7 @@ class MaxLengthCounterDirective {
8391
8777
  this.ngControl.control?.updateValueAndValidity({ onlySelf: true });
8392
8778
  }
8393
8779
  }
8394
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
8780
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$6.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
8395
8781
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: MaxLengthCounterDirective, isStandalone: true, selector: "[lxMaxLengthCounter]", inputs: { lxMaxLengthCounter: "lxMaxLengthCounter", lxMaxLengthCounterRef: "lxMaxLengthCounterRef" }, ngImport: i0 }); }
8396
8782
  }
8397
8783
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MaxLengthCounterDirective, decorators: [{
@@ -8400,7 +8786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8400
8786
  selector: '[lxMaxLengthCounter]',
8401
8787
  standalone: true
8402
8788
  }]
8403
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.NgControl, decorators: [{
8789
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$6.NgControl, decorators: [{
8404
8790
  type: Self
8405
8791
  }] }], propDecorators: { lxMaxLengthCounter: [{
8406
8792
  type: Input
@@ -8530,12 +8916,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8530
8916
  }] });
8531
8917
 
8532
8918
  /**
8533
- * GLOBAL PROVIDERS required for this component:
8534
- * - provideAnimations()
8919
+ * This documentation provides details on the usage and configuration of the Modal.
8535
8920
  *
8536
- * ATTENTION - SCROLLABLE DIALOG:
8921
+ * ## Usage
8922
+ *
8923
+ * 1. Import `LxModalModule` and `LxCoreUiModule` modules from `@leanix/components` in your module where you want to use the component.
8924
+ *
8925
+ * ```ts
8926
+ * import { LxModalModule, LxCoreUiModule } from '@leanix/components';
8927
+ * ```
8928
+ *
8929
+ * 2. Use the **lx-modal** component in your template with the parameters described below.
8930
+ *
8931
+ * - **`open`**: Whether the modal is open or closed.
8932
+ * - **`size`**: 'dialog' | 'dialog-large'.
8933
+ * - **`verticalScroll`**: Whether the modal is scrollable or not.
8934
+ * - **`showHeader`**: Whether the modal has a header or not.
8935
+ * - **`showFooter`**: Whether the modal has a footer or not.
8936
+ * - **`showCloseButton`**: Whether to show the close button.
8937
+ * - **`showBackButton`**: Whether to show the back button.
8938
+ *
8939
+ * 3. Use optional **lx-modal-header** component in your template with the parameters described below.
8940
+ *
8941
+ * - **`title`**: Title of the modal.
8942
+ * - **`subtitle`**: Subtitle of the modal.
8943
+ * - **`bottomBorder`**: Whether to show a bottom border.
8944
+ *
8945
+ * 4. Use optional **lx-modal-footer** component in your template with the parameters described below.
8946
+ *
8947
+ * - **`border`**: Whether to show the footer at the bottom of the modal.
8948
+ *
8949
+ * **GLOBAL PROVIDERS** required for this component:
8950
+ * - `provideAnimations()`
8951
+ *
8952
+ * **ATTENTION - SCROLLABLE DIALOG**:
8537
8953
  * The <lx-modal> component when used as "dialog" is not designed to work with a
8538
- * scrollable body (via "overflow: auto | scroll") in combination with dropdowns.
8954
+ * scrollable body (via `overflow: auto | scroll`) in combination with dropdowns.
8539
8955
  * The overflow on the body will also clip the dropdowns, which is expected.
8540
8956
  *
8541
8957
  * Reasoning:
@@ -8544,12 +8960,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8544
8960
  * requires scrolling, we should discuss whether to put it into a dialog at all
8545
8961
  * and rather think about putting the content on a separate route or
8546
8962
  * using the fullscreen version of the modal.
8547
- *
8548
8963
  */
8549
8964
  class ModalComponent {
8550
8965
  get content() {
8551
8966
  return this.explicitContent || this.implicitContent;
8552
8967
  }
8968
+ /** @internal */
8553
8969
  onEscape() {
8554
8970
  if (this.open && this.showCloseButton) {
8555
8971
  this.closeModal(ModalCloseClickLocation.Escape);
@@ -8560,21 +8976,36 @@ class ModalComponent {
8560
8976
  this.renderer = renderer;
8561
8977
  this.closeModal$ = closeModal$;
8562
8978
  this.focusTrap = focusTrap;
8979
+ /** @internal */
8563
8980
  this.NAME = 'ModalComponent';
8981
+ /** Whether the modal is open or closed. */
8564
8982
  this.open = false;
8983
+ /** Whether to show the close button. */
8565
8984
  this.showCloseButton = true;
8985
+ /** Whether to show the back button. */
8566
8986
  this.showBackButton = false;
8567
8987
  /*
8568
8988
  * If true, then the content area scrolls vertically instead of expanding its height.
8569
8989
  * This can be a problem if the content has dropdowns or date inputs, but can be good if the content has a huge amount of text.
8570
8990
  */
8571
8991
  this.verticalScroll = false;
8992
+ /** The size of the modal. */
8572
8993
  this.size = 'fullscreen';
8573
- this.minWidth = '600px'; // NB: Some modal implementations rely on this minWidth being 600px
8994
+ /**
8995
+ * Minimum width of the modal.
8996
+ *
8997
+ * _NB: Some modal implementations rely on this minWidth being 600px_
8998
+ */
8999
+ this.minWidth = '600px';
9000
+ /** Whether the modal is a focus trap. */
8574
9001
  this.isFocusTrap = false;
9002
+ /** Event emitted when the modal is closed. */
8575
9003
  this.close = new EventEmitter();
9004
+ /** Event emitted when the back button is clicked. */
8576
9005
  this.back = new EventEmitter();
9006
+ /** @internal */
8577
9007
  this.closeLocation = ModalCloseClickLocation;
9008
+ /** @internal */
8578
9009
  this.destroyed$ = new Subject();
8579
9010
  }
8580
9011
  ngOnInit() {
@@ -8634,6 +9065,7 @@ class ModalComponent {
8634
9065
  .subscribe(() => this.openModal());
8635
9066
  }
8636
9067
  }
9068
+ /** @internal */
8637
9069
  openModal() {
8638
9070
  this.oldOverflow = document.documentElement.style.overflowY;
8639
9071
  if (this.size === 'fullscreen') {
@@ -8642,6 +9074,7 @@ class ModalComponent {
8642
9074
  this.overlayRef.attach(this.cdkPortal);
8643
9075
  this.trapFocusInModal(this.overlayRef.hostElement);
8644
9076
  }
9077
+ /** @internal */
8645
9078
  emitBack() {
8646
9079
  this.back.emit();
8647
9080
  }
@@ -8654,6 +9087,7 @@ class ModalComponent {
8654
9087
  this.overlayRef.dispose();
8655
9088
  }
8656
9089
  }
9090
+ /** @internal */
8657
9091
  async closeModal(closeLocation) {
8658
9092
  if (!this.canModalBeClosed || (await this.canModalBeClosed(closeLocation))) {
8659
9093
  this.open = false;
@@ -8778,7 +9212,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8778
9212
  }] });
8779
9213
 
8780
9214
  /**
8781
- * HOW TO USE
9215
+ * The Popover component is based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
9216
+ *
9217
+ * ## Usage
9218
+ *
9219
+ * 1. Import `LxPopoverUiModule` and `LxCoreUiModule` module from `@leanix/components` in your module where you want to use the component.
9220
+ *
9221
+ * ```ts
9222
+ * import { LxPopoverUiModule, LxCoreUiModule } from '@leanix/components';
9223
+ * ```
8782
9224
  *
8783
9225
  * This popover encapsulates this open source library: https://github.com/ncstate-sat/popover,
8784
9226
  * make sure to also check out the docs over there.
@@ -8789,7 +9231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8789
9231
  *
8790
9232
  * For use case 1. you would use the lxPopoverHover directive, which exports as hoverAnchor.
8791
9233
  *
8792
- * Example:
9234
+ * ### Example:
9235
+ * ```html
8793
9236
  * <div lxPopoverHover
8794
9237
  * hoverAnchor
8795
9238
  * satPopoverAnchor
@@ -8799,13 +9242,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8799
9242
  * verticalAlign="center">
8800
9243
  * <p>Popover content</p>
8801
9244
  * </lx-popover>
9245
+ * ```
8802
9246
  *
8803
9247
  * For use case 2. you would use the lxPopoverClick directive, which exports as clickAnchor.
8804
9248
  * Note: Since the only component where we use the lxPopoverClick directive (ReportComponent)
8805
9249
  * needs to fetch some data before opening it, we do not register a click EventListener in this directive,
8806
9250
  * but require the developer to implement that in the component, where the popover is used.
8807
9251
  *
8808
- * Example:
9252
+ * ### Example:
9253
+ * ```html
8809
9254
  * <div lxPopoverClick
8810
9255
  * clickAnchor
8811
9256
  * satPopoverAnchor
@@ -8817,21 +9262,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
8817
9262
  * #popover>
8818
9263
  * <p>Popover content</p>
8819
9264
  * </lx-popover>
9265
+ * ```
8820
9266
  *
8821
9267
  * If this component is used with angularCompilerOptions strictTemplates=true,
8822
9268
  * satPopoverAnchor must be set to the reference to the SatPopover inside lx-popover.
8823
9269
  *
8824
- * Example:
8825
- * <div [satPopoverAnchor]="popover.satPopover"></div>
9270
+ * ### Example:
9271
+ * ```html
9272
+ * <div [satPopoverAnchor]="popover.satPopover"></div>
8826
9273
  * <lx-popover #popover>
8827
9274
  * <p>Popover content</p>
8828
9275
  * </lx-popover>
9276
+ * ```
8829
9277
  */
8830
9278
  class PopoverComponent {
8831
9279
  constructor() {
9280
+ /** Whether to apply margins. */
8832
9281
  this.noMargin = false;
9282
+ /** Whether to allow the popover to overflow the viewport. */
8833
9283
  this.allowOverflow = false;
9284
+ /** Whether to focus the first focusable element in the popover when it is opened. */
8834
9285
  this.autoFocus = false;
9286
+ /** Whether to restore focus to the previously-focused element when the popover is closed. */
8835
9287
  this.restoreFocus = true;
8836
9288
  /**
8837
9289
  * If you have a popover, that should usually be displayed above or below its anchor,
@@ -8842,7 +9294,9 @@ class PopoverComponent {
8842
9294
  * position of the popover after opening.
8843
9295
  */
8844
9296
  this.adaptMarginsForViewportAlignChange = false;
9297
+ /** Event emitted when the popover is opened. */
8845
9298
  this.opened = new EventEmitter();
9299
+ /** Event emitted when the popover is closed. */
8846
9300
  this.closed = new EventEmitter();
8847
9301
  this._isOpen = false;
8848
9302
  }
@@ -8857,21 +9311,26 @@ class PopoverComponent {
8857
9311
  this.marginClasses = this.getDefaultMarginClasses(this.horizontalAlign, this.verticalAlign);
8858
9312
  }
8859
9313
  }
9314
+ /** @internal */
8860
9315
  open() {
8861
9316
  this.satPopover.open();
8862
9317
  }
9318
+ /** @internal */
8863
9319
  close() {
8864
9320
  this.satPopover.close();
8865
9321
  }
9322
+ /** @internal */
8866
9323
  onOpen() {
8867
9324
  this._isOpen = true;
8868
9325
  this.opened.emit();
8869
9326
  }
9327
+ /** @internal */
8870
9328
  onAfterOpen() {
8871
9329
  if (this.adaptMarginsForViewportAlignChange) {
8872
9330
  this.marginClasses = this.getMarginClassesForClassList(this.satPopover._classList);
8873
9331
  }
8874
9332
  }
9333
+ /** @internal */
8875
9334
  onClose() {
8876
9335
  this._isOpen = false;
8877
9336
  this.closed.emit();
@@ -8940,7 +9399,7 @@ class PopoverComponent {
8940
9399
  return '';
8941
9400
  }
8942
9401
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8943
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopoverComponent, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"restoreFocus\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n <ng-container *ngIf=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$8.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
9402
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: PopoverComponent, isStandalone: true, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", restoreFocus: "restoreFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopoverComponent, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"restoreFocus\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n <ng-container *ngIf=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$4.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
8944
9403
  }
8945
9404
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverComponent, decorators: [{
8946
9405
  type: Component,
@@ -9001,7 +9460,7 @@ class PopoverClickDirective {
9001
9460
  closePopover() {
9002
9461
  this.onMouseLeave.next();
9003
9462
  }
9004
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$8.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
9463
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$4.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
9005
9464
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: PopoverClickDirective, isStandalone: true, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 }); }
9006
9465
  }
9007
9466
  __decorate([
@@ -9014,7 +9473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
9014
9473
  selector: '[lxPopoverClick]',
9015
9474
  standalone: true
9016
9475
  }]
9017
- }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchorDirective }], propDecorators: { lxPopoverPinned: [{
9476
+ }], ctorParameters: () => [{ type: i1$4.SatPopoverAnchorDirective }], propDecorators: { lxPopoverPinned: [{
9018
9477
  type: Input
9019
9478
  }], pinned$: [], closePopover: [{
9020
9479
  type: HostListener,
@@ -9081,7 +9540,7 @@ class PopoverHoverDirective {
9081
9540
  closePopover(skipDelay = this.skipCloseDelay) {
9082
9541
  this.onMouseLeave.next({ skipDelay });
9083
9542
  }
9084
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$8.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
9543
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$4.SatPopoverAnchorDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
9085
9544
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: PopoverHoverDirective, isStandalone: true, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0 }); }
9086
9545
  }
9087
9546
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PopoverHoverDirective, decorators: [{
@@ -9091,7 +9550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
9091
9550
  selector: '[lxPopoverHover]',
9092
9551
  standalone: true
9093
9552
  }]
9094
- }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchorDirective }], propDecorators: { lxPopoverHover: [{
9553
+ }], ctorParameters: () => [{ type: i1$4.SatPopoverAnchorDirective }], propDecorators: { lxPopoverHover: [{
9095
9554
  type: Input
9096
9555
  }], skipCloseDelay: [{
9097
9556
  type: Input
@@ -9384,5 +9843,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
9384
9843
  * Generated bundle index. Do not edit.
9385
9844
  */
9386
9845
 
9387
- export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContentPanelComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, InputComponent, IntegrationLinkCardComponent, IntegrationLinkCardGroupComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
9846
+ export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutocloseGroupService, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContentPanelComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, InputComponent, IntegrationLinkCardComponent, IntegrationLinkCardGroupComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
9388
9847
  //# sourceMappingURL=leanix-components.mjs.map