@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.
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/core-ui/components/badge/badge.component.mjs +21 -1
- package/esm2022/lib/core-ui/components/banner/banner.component.mjs +23 -1
- package/esm2022/lib/core-ui/components/button/button.component.mjs +40 -1
- package/esm2022/lib/core-ui/components/card/card.component.mjs +16 -1
- package/esm2022/lib/core-ui/components/content-panel/content-panel.component.mjs +18 -3
- package/esm2022/lib/core-ui/components/counter/counter.component.mjs +14 -1
- package/esm2022/lib/core-ui/components/integration-link-card/integration-link-card.component.mjs +47 -1
- package/esm2022/lib/core-ui/components/skeleton/skeleton.component.mjs +19 -1
- package/esm2022/lib/core-ui/components/stepper/stepper.component.mjs +41 -1
- package/esm2022/lib/core-ui/components/tiny-spinner/tiny-spinner.component.mjs +12 -1
- package/esm2022/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.mjs +44 -0
- package/esm2022/lib/core-ui/components/tokenizer/tokenizer.component.mjs +3 -3
- package/esm2022/lib/core-ui/tooltip/tooltip.directive.mjs +16 -1
- package/esm2022/lib/forms-ui/components/breadcrumb/breadcrumb.component.mjs +17 -1
- package/esm2022/lib/forms-ui/components/date-input/date-input.component.mjs +100 -38
- package/esm2022/lib/forms-ui/components/slider-toggle/slider-toggle.component.mjs +18 -1
- package/esm2022/lib/modal-ui/components/modal/modal.component.mjs +55 -7
- package/esm2022/lib/popover-ui/components/popover/popover.component.mjs +31 -6
- package/fesm2022/leanix-components.mjs +541 -82
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/core-ui/components/badge/badge.component.d.ts +23 -0
- package/lib/core-ui/components/banner/banner.component.d.ts +22 -0
- package/lib/core-ui/components/button/button.component.d.ts +39 -0
- package/lib/core-ui/components/card/card.component.d.ts +15 -0
- package/lib/core-ui/components/content-panel/content-panel.component.d.ts +18 -1
- package/lib/core-ui/components/counter/counter.component.d.ts +14 -0
- package/lib/core-ui/components/integration-link-card/integration-link-card.component.d.ts +60 -0
- package/lib/core-ui/components/skeleton/skeleton.component.d.ts +18 -0
- package/lib/core-ui/components/stepper/stepper.component.d.ts +40 -0
- package/lib/core-ui/components/tiny-spinner/tiny-spinner.component.d.ts +11 -0
- package/lib/core-ui/components/tokenizer/tokenizer-overflow-popover/tokenizer-overflow-popover.component.d.ts +19 -0
- package/lib/core-ui/tooltip/tooltip.directive.d.ts +17 -0
- package/lib/forms-ui/components/breadcrumb/breadcrumb.component.d.ts +16 -0
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +80 -7
- package/lib/forms-ui/components/slider-toggle/slider-toggle.component.d.ts +20 -0
- package/lib/modal-ui/components/modal/modal.component.d.ts +59 -5
- package/lib/popover-ui/components/popover/popover.component.d.ts +37 -5
- 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,
|
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$
|
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$
|
33
|
+
import * as i1$5 from 'ngx-infinite-scroll';
|
32
34
|
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
33
|
-
import * as i1$
|
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$
|
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
|
-
|
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$
|
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
|
-
|
4787
|
-
this.
|
4788
|
-
|
4789
|
-
this.
|
4790
|
-
|
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
|
-
|
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
|
-
|
4796
|
-
|
4797
|
-
|
4798
|
-
this.
|
4799
|
-
|
4800
|
-
this.
|
4801
|
-
|
4802
|
-
this.
|
4803
|
-
|
4804
|
-
this.
|
4805
|
-
|
4806
|
-
this.
|
4807
|
-
|
4808
|
-
this.
|
4809
|
-
|
4810
|
-
this.
|
4811
|
-
|
4812
|
-
this.
|
4813
|
-
|
4814
|
-
this.
|
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
|
-
|
4911
|
-
|
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
|
-
/**
|
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
|
-
/**
|
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: {
|
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
|
-
}],
|
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
|
-
}],
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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
|
-
*
|
8534
|
-
* - provideAnimations()
|
8919
|
+
* This documentation provides details on the usage and configuration of the Modal.
|
8535
8920
|
*
|
8536
|
-
*
|
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
|
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
|
-
|
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
|
-
*
|
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
|
-
*
|
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$
|
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$
|
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$
|
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$
|
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$
|
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
|