@leanix/components 0.4.92 → 0.4.94

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.
@@ -3,19 +3,19 @@ import { InjectionToken, Component, Input, ChangeDetectionStrategy, HostBinding,
3
3
  import * as i1$1 from '@ngx-translate/core';
4
4
  import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
5
5
  import { NgClass, NgIf, AsyncPipe, NgFor, NgStyle, NgTemplateOutlet, UpperCasePipe, NgSwitch, NgSwitchCase, DecimalPipe, CommonModule, formatDate } from '@angular/common';
6
- import * as i1$8 from '@angular/cdk/portal';
6
+ import * as i3 from '@angular/cdk/portal';
7
7
  import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
8
8
  import * as i1 from '@angular/cdk/overlay';
9
9
  import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
10
10
  import { __decorate } from 'tslib';
11
- import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toString, padCharsStart, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
11
+ import { escape, trimEnd, sortBy, get, toLower, isEqual as isEqual$1, some, toString, padCharsStart, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
12
12
  import * as i5 from 'rxjs';
13
13
  import { BehaviorSubject, timer, Subject, combineLatest, concat, merge, fromEvent, ReplaySubject, Observable, of, map as map$1 } from 'rxjs';
14
14
  import { skipWhile, map, switchMap, startWith, pairwise, filter, withLatestFrom, take, debounceTime, skip, distinctUntilChanged, takeUntil, delay, tap } from 'rxjs/operators';
15
15
  import Color from 'color';
16
16
  import { format, distanceInWords, startOfDay } from 'date-fns';
17
17
  import DOMPurify from 'dompurify';
18
- import { isArray, isEqual, split, isString, intersection, isNil, curry } from 'lodash-es';
18
+ import { isArray, isEqual, split, uniqueId, isString, pick, intersection, isNil, curry } from 'lodash-es';
19
19
  import { Renderer, marked } from 'marked';
20
20
  import * as i1$3 from '@angular/cdk/clipboard';
21
21
  import { ClipboardModule } from '@angular/cdk/clipboard';
@@ -30,9 +30,10 @@ import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
30
30
  import * as i1$6 from '@angular/cdk/bidi';
31
31
  import * as i1$7 from '@angular/platform-browser';
32
32
  import { style, animate, transition, trigger } from '@angular/animations';
33
- import * as i1$9 from '@ncstate/sat-popover';
33
+ import * as i1$8 from '@ncstate/sat-popover';
34
34
  import { SatPopover, SatPopoverModule } from '@ncstate/sat-popover';
35
35
  import { coerceNumberProperty } from '@angular/cdk/coercion';
36
+ import * as i1$9 from '@angular/router';
36
37
  import { RouterLinkActive, RouterLink, RouterModule } from '@angular/router';
37
38
 
38
39
  const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
@@ -2426,6 +2427,8 @@ const ARROW_RIGHT = 39;
2426
2427
  const ENTER = 13;
2427
2428
  const ESCAPE = 27;
2428
2429
  const SPACE = 32;
2430
+ const HOME = 36;
2431
+ const END = 35;
2429
2432
 
2430
2433
  class KeyboardActionSourceDirective {
2431
2434
  constructor(element) {
@@ -2446,6 +2449,12 @@ class KeyboardActionSourceDirective {
2446
2449
  case ARROW_RIGHT:
2447
2450
  event.preventDefault();
2448
2451
  return KeyboardSelectAction.RIGHT;
2452
+ case HOME:
2453
+ event.preventDefault();
2454
+ return KeyboardSelectAction.FIRST;
2455
+ case END:
2456
+ event.preventDefault();
2457
+ return KeyboardSelectAction.LAST;
2449
2458
  case ENTER:
2450
2459
  event.preventDefault();
2451
2460
  return KeyboardSelectAction.EXECUTE;
@@ -2463,6 +2472,9 @@ class KeyboardActionSourceDirective {
2463
2472
  ngOnDestroy() {
2464
2473
  this.destroyed$.next();
2465
2474
  }
2475
+ nativeElement() {
2476
+ return this.element?.nativeElement;
2477
+ }
2466
2478
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
2467
2479
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardActionSourceDirective, isStandalone: true, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 }); }
2468
2480
  }
@@ -2536,8 +2548,10 @@ class OptionComponent {
2536
2548
  this.select = new EventEmitter();
2537
2549
  this.highlight = new EventEmitter();
2538
2550
  this.selectedClick = new EventEmitter();
2551
+ this.keyDownAction = new EventEmitter();
2539
2552
  this.hasSubdropdown = false;
2540
2553
  this.isSuboption = false;
2554
+ this.optionId = uniqueId('option');
2541
2555
  }
2542
2556
  setSelected(value) {
2543
2557
  this.selected = value;
@@ -2545,13 +2559,20 @@ class OptionComponent {
2545
2559
  setHighlighted(value) {
2546
2560
  this.isHighlighted = value;
2547
2561
  this.highlight.emit(this.isHighlighted);
2562
+ if (value) {
2563
+ this.option?.nativeElement?.focus();
2564
+ }
2565
+ }
2566
+ handleKeyDown(event) {
2567
+ event.preventDefault();
2568
+ this.keyDownAction.emit(event);
2548
2569
  }
2549
2570
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
2550
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n class=\"option\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
2571
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
2551
2572
  }
2552
2573
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionComponent, decorators: [{
2553
2574
  type: Component,
2554
- args: [{ selector: 'lx-option', standalone: true, imports: [NgIf, NgSwitch, NgSwitchCase], template: "<li\n class=\"option\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
2575
+ args: [{ selector: 'lx-option', standalone: true, imports: [NgIf, NgSwitch, NgSwitchCase], template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n>\n <ng-container *ngIf=\"hasSelectedState\">\n <ng-container [ngSwitch]=\"selectIcon\">\n <ng-container *ngSwitchCase=\"'check'\">\n <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n </ng-container>\n <ng-container *ngSwitchCase=\"'circle'\">\n <i class=\"fal fa-circle\"></i>\n <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}:host.flexLi li.option{display:flex}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
2555
2576
  }], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
2556
2577
  type: Optional
2557
2578
  }, {
@@ -2575,6 +2596,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
2575
2596
  type: Output
2576
2597
  }], selectedClick: [{
2577
2598
  type: Output
2599
+ }], keyDownAction: [{
2600
+ type: Output
2601
+ }], option: [{
2602
+ type: ViewChild,
2603
+ args: ['option']
2578
2604
  }], selectOption: [{
2579
2605
  type: HostListener,
2580
2606
  args: ['click', ['$event']]
@@ -2818,7 +2844,7 @@ class BreadcrumbComponent {
2818
2844
  return !!breadcrumb.breadcrumbs;
2819
2845
  }
2820
2846
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2821
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n <lx-option\n *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n [hasSelectedState]=\"false\"\n (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n >\n {{ ellipsedBreadcrumbs.label }}\n </lx-option>\n </lx-cdk-options-dropdown>\n <span class=\"arrow\">&gt;</span>\n </ng-container>\n <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n <span class=\"arrow\">&gt;</span>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }] }); }
2847
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of viewBreadcrumbs\">\n <ng-container *ngIf=\"isEllipsedBreadcrumb(breadcrumb)\">\n <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n <a class=\"step\" href=\"\" lxKeyboardActionSource (click)=\"(false)\">...</a>\n <lx-option\n *ngFor=\"let ellipsedBreadcrumbs of breadcrumb.breadcrumbs\"\n [hasSelectedState]=\"false\"\n (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\"\n >\n {{ ellipsedBreadcrumbs.label }}\n </lx-option>\n </lx-cdk-options-dropdown>\n <span class=\"arrow\">&gt;</span>\n </ng-container>\n <ng-container *ngIf=\"!isEllipsedBreadcrumb(breadcrumb)\">\n <a class=\"step\" href=\"\" (click)=\"breadcrumb.onClick?.(breadcrumb); (false)\">{{ breadcrumb.label }}</a>\n <span class=\"arrow\">&gt;</span>\n </ng-container>\n </ng-container>\n</div>\n", styles: [".breadcrumbs{line-height:20px;font-weight:500}.breadcrumbs .step{color:var(--01-ui-colors-dark-gray);cursor:pointer}.breadcrumbs .arrow{margin:0 12px;color:var(--01-ui-colors-dark-gray)}.breadcrumbs .arrow:last-child{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }] }); }
2822
2848
  }
2823
2849
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
2824
2850
  type: Component,
@@ -5897,6 +5923,9 @@ class OptionsDropdownComponent {
5897
5923
  return;
5898
5924
  }
5899
5925
  this._open = value;
5926
+ if (this.lxButton) {
5927
+ this.renderer.setAttribute(this.lxButton, 'aria-expanded', this._open.toString());
5928
+ }
5900
5929
  if (this.trigger) {
5901
5930
  // Don't emit keyboard actions while the dropdown is not open yet.
5902
5931
  this.trigger.dontEmit = !this.open;
@@ -5911,11 +5940,18 @@ class OptionsDropdownComponent {
5911
5940
  return this._open;
5912
5941
  }
5913
5942
  get options() {
5914
- return this._options.toArray();
5943
+ return this._options?.toArray() || [];
5944
+ }
5945
+ get optionIds() {
5946
+ return this.options.map((o) => o.optionId);
5915
5947
  }
5916
- constructor(changeDetection, scrollStrategies) {
5948
+ get lxButton() {
5949
+ return this.trigger?.nativeElement();
5950
+ }
5951
+ constructor(changeDetection, scrollStrategies, renderer) {
5917
5952
  this.changeDetection = changeDetection;
5918
5953
  this.scrollStrategies = scrollStrategies;
5954
+ this.renderer = renderer;
5919
5955
  this.NAME = 'OptionsDropdownComponent';
5920
5956
  this.align = 'right';
5921
5957
  this.closeOnScroll = false;
@@ -5928,29 +5964,40 @@ class OptionsDropdownComponent {
5928
5964
  this._open = false;
5929
5965
  this.isSubdropdownExpanded = false;
5930
5966
  this.destroyed$ = new Subject();
5967
+ this.listboxId = uniqueId('listbox');
5931
5968
  }
5932
5969
  ngAfterViewInit() {
5933
5970
  this.trigger.dontEmit = !this.open;
5934
5971
  const optionsChanges$ = this._options.changes.pipe(startWith(this._options), map((options) => options.toArray()));
5935
5972
  this.trigger.keyboardActions$
5936
- .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.NEXT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.next(index, options)))
5973
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.NEXT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.next(index, options)), takeUntil(this.destroyed$))
5937
5974
  .subscribe(this.highlightedOptionIndex$);
5938
5975
  this.trigger.keyboardActions$
5939
- .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.PREV), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.prev(index, options)))
5976
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.PREV), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.prev(index, options)), takeUntil(this.destroyed$))
5940
5977
  .subscribe(this.highlightedOptionIndex$);
5941
5978
  this.trigger.keyboardActions$
5942
- .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LEFT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)))
5979
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.FIRST), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, _index, _options) => 0), takeUntil(this.destroyed$))
5943
5980
  .subscribe(this.highlightedOptionIndex$);
5944
5981
  this.trigger.keyboardActions$
5945
- .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.RIGHT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)))
5982
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LAST), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, _index, _options) => this.options.length - 1), takeUntil(this.destroyed$))
5946
5983
  .subscribe(this.highlightedOptionIndex$);
5947
5984
  this.trigger.keyboardActions$
5948
- .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.CLOSE))
5949
- .subscribe(() => this.closeDropdown());
5985
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.LEFT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)), takeUntil(this.destroyed$))
5986
+ .subscribe(this.highlightedOptionIndex$);
5950
5987
  this.trigger.keyboardActions$
5951
- .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.EXECUTE), withLatestFrom(this.highlightedOptionIndex$, (_, index) => index))
5988
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.RIGHT), withLatestFrom(this.highlightedOptionIndex$, optionsChanges$, (_, index, options) => this.isSubdropdownExpanded ? this.collapse(index, options) : this.expand(index, options)), takeUntil(this.destroyed$))
5989
+ .subscribe(this.highlightedOptionIndex$);
5990
+ this.trigger.keyboardActions$
5991
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.CLOSE), takeUntil(this.destroyed$))
5992
+ .subscribe(() => {
5993
+ this.closeDropdown();
5994
+ this.lxButton?.focus();
5995
+ });
5996
+ this.trigger.keyboardActions$
5997
+ .pipe(filter((keyboardSelectAction) => keyboardSelectAction === KeyboardSelectAction.EXECUTE), withLatestFrom(this.highlightedOptionIndex$, (_, index) => index), takeUntil(this.destroyed$))
5952
5998
  .subscribe((index) => {
5953
5999
  this.options[index]?.selectOption();
6000
+ this.lxButton?.focus();
5954
6001
  });
5955
6002
  /** Combined stream of all of the child options' select outputs. */
5956
6003
  this._options.changes
@@ -5958,7 +6005,12 @@ class OptionsDropdownComponent {
5958
6005
  .subscribe((_value) => {
5959
6006
  this.closeDropdown();
5960
6007
  });
5961
- combineLatest(optionsChanges$, this.highlightedOptionIndex$)
6008
+ this._options.changes
6009
+ .pipe(startWith(this._options), switchMap(() => merge(...this._options.map((option) => option.keyDownAction))), takeUntil(this.destroyed$))
6010
+ .subscribe((event) => {
6011
+ this.handleOptionKeyDown(event);
6012
+ });
6013
+ combineLatest([optionsChanges$, this.highlightedOptionIndex$])
5962
6014
  .pipe(delay(0), map(([options, index]) => options[index]), distinctUntilChanged(), takeUntil(this.destroyed$))
5963
6015
  .subscribe((optionToBeHighlighted) => {
5964
6016
  this.options.forEach((option) => option.setHighlighted(optionToBeHighlighted === option));
@@ -5972,16 +6024,21 @@ class OptionsDropdownComponent {
5972
6024
  this.trigger.blur();
5973
6025
  });
5974
6026
  }
6027
+ this.setInitialAccessibilityAttributes();
5975
6028
  }
5976
6029
  ngOnDestroy() {
5977
6030
  this.destroyed$.next();
6031
+ this.destroyed$.complete();
5978
6032
  }
5979
6033
  closeDropdown() {
5980
6034
  this.open = false;
5981
6035
  }
5982
6036
  setInitialHighlightingIndex() {
5983
- const firstAvailableIndex = this.options.map((option) => !this.optionIsHighlightable(option)).indexOf(false, 0);
5984
- this.highlightedOptionIndex$.next(firstAvailableIndex);
6037
+ let initialIndex = this.options.findIndex((option) => option.selected && this.optionIsHighlightable(option));
6038
+ if (initialIndex === -1) {
6039
+ initialIndex = this.options.findIndex((option) => this.optionIsHighlightable(option));
6040
+ }
6041
+ this.highlightedOptionIndex$.next(initialIndex);
5985
6042
  }
5986
6043
  prev(currentIndex, items) {
5987
6044
  if (currentIndex > 0) {
@@ -6024,13 +6081,46 @@ class OptionsDropdownComponent {
6024
6081
  const isSecondlevelOptionAndAllowed = option.isSuboption && this.isSubdropdownExpanded;
6025
6082
  return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
6026
6083
  }
6027
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
6028
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-container *ngIf=\"!overlayPositioning\">\n <div class=\"triggerContainer\" (click)=\"open = !open\">\n <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdownTemplate>\n <ul\n *ngIf=\"open\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\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: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6084
+ /**
6085
+ * Programmatically sets initial accessibility attributes on the trigger button so that we
6086
+ * don't have to do it manually every time we declare a new instance of this component
6087
+ */
6088
+ setInitialAccessibilityAttributes() {
6089
+ if (!this.lxButton) {
6090
+ return;
6091
+ }
6092
+ this.renderer.setAttribute(this.lxButton, 'role', 'combobox');
6093
+ this.renderer.setAttribute(this.lxButton, 'aria-haspopup', 'listbox');
6094
+ this.renderer.setAttribute(this.lxButton, 'tabindex', '0');
6095
+ this.renderer.setAttribute(this.lxButton, 'aria-control', this.listboxId);
6096
+ this.renderer.setAttribute(this.lxButton, 'aria-expanded', 'false');
6097
+ }
6098
+ handleOptionKeyDown(event) {
6099
+ // In order to keep the centralized keyboard event management logic from `KeyboardActionSourceDirective`
6100
+ // we duplicate the option event here and trigger it again from lxButton.
6101
+ const newEventOptions = pick(event, [
6102
+ 'isTrusted',
6103
+ 'altKey',
6104
+ 'bubbles',
6105
+ 'charCode',
6106
+ 'cancelable',
6107
+ 'composed',
6108
+ 'key',
6109
+ 'ctrlKey',
6110
+ 'defaultPrevented',
6111
+ 'keyCode',
6112
+ 'code'
6113
+ ]);
6114
+ const newEvent = new KeyboardEvent(event.type, newEventOptions);
6115
+ this.lxButton?.dispatchEvent(newEvent);
6116
+ }
6117
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
6118
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n <div class=\"triggerContainer\" (click)=\"open = !open\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <ul\n *ngIf=\"open\"\n [id]=\"listboxId\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-owns]=\"optionIds.join(' ')\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\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: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6029
6119
  }
6030
6120
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
6031
6121
  type: Component,
6032
- args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-container *ngIf=\"!overlayPositioning\">\n <div class=\"triggerContainer\" (click)=\"open = !open\">\n <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-contaniner [ngTemplateOutlet]=\"triggerTemplate\"></ng-contaniner>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdownTemplate>\n <ul\n *ngIf=\"open\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
6033
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }], propDecorators: { align: [{
6122
+ args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-container *ngIf=\"!overlayPositioning\">\n <div class=\"triggerContainer\" (click)=\"open = !open\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayOpen]=\"open\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n >\n <div class=\"overlayDropdown\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <ul\n *ngIf=\"open\"\n [id]=\"listboxId\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.aria-owns]=\"optionIds.join(' ')\"\n >\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
6123
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{
6034
6124
  type: Input
6035
6125
  }], closeOnScroll: [{
6036
6126
  type: Input
@@ -7139,7 +7229,7 @@ class SortingDropdownComponent {
7139
7229
  return key ? `sorting.${key}.label` : '';
7140
7230
  }
7141
7231
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7142
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n >\n </lx-sorting-dropdown-trigger>\n <lx-option-group (select)=\"applySortingMode($event)\">\n <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n {{ getSortLabel(option?.key) | translate }}\n </lx-option>\n </lx-option-group>\n <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n </lx-option>\n </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
7232
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n >\n </lx-sorting-dropdown-trigger>\n <lx-option-group (select)=\"applySortingMode($event)\">\n <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n {{ getSortLabel(option?.key) | translate }}\n </lx-option>\n </lx-option-group>\n <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n </lx-option>\n </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
7143
7233
  }
7144
7234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, decorators: [{
7145
7235
  type: Component,
@@ -8043,7 +8133,7 @@ class ModalComponent {
8043
8133
  this.focusTrap.create(hostElement);
8044
8134
  }
8045
8135
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
8046
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n <div\n *ngIf=\"open\"\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n <div\n *ngIf=\"size === 'fullscreen' && showBackButton\"\n (click)=\"emitBack()\"\n (keyup.enter)=\"emitBack()\"\n tabindex=\"0\"\n role=\"button\"\n class=\"fal fa-long-arrow-left\"\n ></div>\n <button\n *ngIf=\"showCloseButton\"\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n class=\"fal fa-times closeButton\"\n ></button>\n <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n </div>\n</ng-template>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$8.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
8136
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n <div\n *ngIf=\"open\"\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n <div\n *ngIf=\"size === 'fullscreen' && showBackButton\"\n (click)=\"emitBack()\"\n (keyup.enter)=\"emitBack()\"\n tabindex=\"0\"\n role=\"button\"\n class=\"fal fa-long-arrow-left\"\n ></div>\n <button\n *ngIf=\"showCloseButton\"\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n class=\"fal fa-times closeButton\"\n ></button>\n <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n </div>\n</ng-template>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:24px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
8047
8137
  trigger('modal', [
8048
8138
  transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
8049
8139
  transition(':leave', animate('0.15s', style({ opacity: 0 })))
@@ -8315,7 +8405,7 @@ class PopoverComponent {
8315
8405
  return '';
8316
8406
  }
8317
8407
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8318
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: SatPopover, 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\"></ng-container>\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content></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;-webkit-hyphens:auto;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$9.SatPopover, 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"] }] }); }
8408
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: SatPopover, 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\"></ng-container>\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content></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;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$8.SatPopover, 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"] }] }); }
8319
8409
  }
8320
8410
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverComponent, decorators: [{
8321
8411
  type: Component,
@@ -8376,7 +8466,7 @@ class PopoverClickDirective {
8376
8466
  closePopover() {
8377
8467
  this.onMouseLeave.next();
8378
8468
  }
8379
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$9.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
8469
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverClickDirective, deps: [{ token: i1$8.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
8380
8470
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PopoverClickDirective, isStandalone: true, selector: "[lxPopoverClick]", inputs: { lxPopoverPinned: "lxPopoverPinned" }, host: { listeners: { "mouseleave": "closePopover()" } }, exportAs: ["clickAnchor"], ngImport: i0 }); }
8381
8471
  }
8382
8472
  __decorate([
@@ -8389,7 +8479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
8389
8479
  selector: '[lxPopoverClick]',
8390
8480
  standalone: true
8391
8481
  }]
8392
- }], ctorParameters: () => [{ type: i1$9.SatPopoverAnchor }], propDecorators: { lxPopoverPinned: [{
8482
+ }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchor }], propDecorators: { lxPopoverPinned: [{
8393
8483
  type: Input
8394
8484
  }], pinned$: [], closePopover: [{
8395
8485
  type: HostListener,
@@ -8456,7 +8546,7 @@ class PopoverHoverDirective {
8456
8546
  closePopover(skipDelay = this.skipCloseDelay) {
8457
8547
  this.onMouseLeave.next({ skipDelay });
8458
8548
  }
8459
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$9.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
8549
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, deps: [{ token: i1$8.SatPopoverAnchor }], target: i0.ɵɵFactoryTarget.Directive }); }
8460
8550
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PopoverHoverDirective, isStandalone: true, selector: "[lxPopoverHover]", inputs: { lxPopoverHover: "lxPopoverHover", skipCloseDelay: "skipCloseDelay" }, host: { listeners: { "mouseenter": "showPopover()", "mouseleave": "closePopover()" } }, exportAs: ["hoverAnchor"], ngImport: i0 }); }
8461
8551
  }
8462
8552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PopoverHoverDirective, decorators: [{
@@ -8466,7 +8556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
8466
8556
  selector: '[lxPopoverHover]',
8467
8557
  standalone: true
8468
8558
  }]
8469
- }], ctorParameters: () => [{ type: i1$9.SatPopoverAnchor }], propDecorators: { lxPopoverHover: [{
8559
+ }], ctorParameters: () => [{ type: i1$8.SatPopoverAnchor }], propDecorators: { lxPopoverHover: [{
8470
8560
  type: Input
8471
8561
  }], skipCloseDelay: [{
8472
8562
  type: Input
@@ -8494,7 +8584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
8494
8584
  class TabComponent {
8495
8585
  set isActive(value) {
8496
8586
  this._isActive = value;
8497
- this.cd.markForCheck();
8587
+ this.cd?.markForCheck();
8498
8588
  }
8499
8589
  get isActive() {
8500
8590
  if (this.routerLinkActive) {
@@ -8502,7 +8592,9 @@ class TabComponent {
8502
8592
  }
8503
8593
  return this._isActive;
8504
8594
  }
8505
- constructor(cd) {
8595
+ constructor(router, activatedRoute, cd) {
8596
+ this.router = router;
8597
+ this.activatedRoute = activatedRoute;
8506
8598
  this.cd = cd;
8507
8599
  this.label = '';
8508
8600
  this.routerLinkActiveOptions = { exact: true };
@@ -8512,20 +8604,47 @@ class TabComponent {
8512
8604
  this.background = 'white';
8513
8605
  this.disabled = false;
8514
8606
  this.switch = new EventEmitter();
8607
+ this.keyDownAction = new EventEmitter();
8515
8608
  this._isActive = false;
8516
- this.tabPanelId = uniqueId('panelId');
8517
- this.tabId = uniqueId('tab');
8609
+ this.tabPanelId = uniqueId$1('panelId');
8610
+ this.tabId = uniqueId$1('tab');
8518
8611
  }
8519
8612
  select() {
8520
- this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
8613
+ if (this.tabLink) {
8614
+ const formattedTabLink = typeof this.tabLink === 'string' ? [this.tabLink] : this.tabLink;
8615
+ this.router.navigate(formattedTabLink, { relativeTo: this.activatedRoute }).then(() => {
8616
+ this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
8617
+ });
8618
+ }
8619
+ else {
8620
+ this.switch.emit({ tabId: this.tabId, tabPanelId: this.tabPanelId });
8621
+ }
8622
+ this.isActive = true;
8521
8623
  }
8522
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
8523
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keyup.enter)=\"select()\"\n (keyup.space)=\"select()\"\n [attr.role]=\"tabLink ? 'presentation' : 'tab'\"\n [attr.id]=\"tabLink ? null : tabId\"\n [attr.aria-selected]=\"tabLink ? null : isActive\"\n [attr.aria-controls]=\"tabLink ? null : tabPanelId\"\n [attr.tabindex]=\"tabLink ? null : isActive || disabled || tabLink ? '-1' : '0'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\n [routerLink]=\"tabLink\"\n routerLinkActive\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\n >\n <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n </a>\n\n <ng-template #portalTab>\n <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n </ng-template>\n\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:#1666ee;outline:0}.tab:hover,.tab.active{outline:0}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$8.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8624
+ setFocus() {
8625
+ this.tabElement?.nativeElement?.focus();
8626
+ }
8627
+ handleKeyDown(event) {
8628
+ switch (event.code) {
8629
+ case 'Enter':
8630
+ case 'Space':
8631
+ /**
8632
+ * We are preventing the default browser behavior when the `SPACE` key is pressed, in which
8633
+ * case the browser would scroll down the page.
8634
+ */
8635
+ event.preventDefault();
8636
+ this.select();
8637
+ break;
8638
+ }
8639
+ this.keyDownAction.emit(event);
8640
+ }
8641
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, deps: [{ token: i1$9.Router }, { token: i1$9.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
8642
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }], ngImport: i0, template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n tabindex=\"-1\"\n [routerLink]=\"tabLink\"\n routerLinkActive\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\n >\n <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n </a>\n\n <ng-template #portalTab>\n <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n </ng-template>\n\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:#1666ee}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8524
8643
  }
8525
8644
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabComponent, decorators: [{
8526
8645
  type: Component,
8527
- args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, RouterLinkActive, RouterLink, NgTemplateOutlet, BadgeComponent, PortalModule], template: "<li\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keyup.enter)=\"select()\"\n (keyup.space)=\"select()\"\n [attr.role]=\"tabLink ? 'presentation' : 'tab'\"\n [attr.id]=\"tabLink ? null : tabId\"\n [attr.aria-selected]=\"tabLink ? null : isActive\"\n [attr.aria-controls]=\"tabLink ? null : tabPanelId\"\n [attr.tabindex]=\"tabLink ? null : isActive || disabled || tabLink ? '-1' : '0'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\n [routerLink]=\"tabLink\"\n routerLinkActive\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\n >\n <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n </a>\n\n <ng-template #portalTab>\n <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n </ng-template>\n\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:#1666ee;outline:0}.tab:hover,.tab.active{outline:0}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"] }]
8528
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
8646
+ args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, RouterLinkActive, RouterLink, NgTemplateOutlet, BadgeComponent, PortalModule], template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"tabPanelId\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n <a\n *ngIf=\"tabLink; else portalTab\"\n tabindex=\"-1\"\n [routerLink]=\"tabLink\"\n routerLinkActive\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\n >\n <ng-container *ngTemplateOutlet=\"portalTab\"></ng-container>\n </a>\n\n <ng-template #portalTab>\n <i *ngIf=\"icon\" class=\"icon {{ icon }}\"></i>\n <span *ngIf=\"label\" class=\"tabLabel\">{{ label }}</span>\n <lx-badge *ngIf=\"counter\" [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"'gray'\"></lx-badge>\n </ng-template>\n\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n <div *ngIf=\"!tabLink\" class=\"content\" role=\"tabpanel\" [attr.id]=\"tabPanelId\">\n <ng-content></ng-content>\n </div>\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:#1666ee}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding:10px 14px;line-height:16px}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.icon{font-size:16px;opacity:.6}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:13px;text-decoration:none}.content{height:100%}lx-badge{margin-left:8px}\n"] }]
8647
+ }], ctorParameters: () => [{ type: i1$9.Router }, { type: i1$9.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
8529
8648
  type: Input
8530
8649
  }], label: [{
8531
8650
  type: Input
@@ -8549,12 +8668,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
8549
8668
  type: Input
8550
8669
  }], switch: [{
8551
8670
  type: Output
8671
+ }], keyDownAction: [{
8672
+ type: Output
8552
8673
  }], content: [{
8553
8674
  type: ViewChild,
8554
8675
  args: ['contentTemplate', { static: true }]
8555
8676
  }], routerLinkActive: [{
8556
8677
  type: ViewChild,
8557
8678
  args: [RouterLinkActive]
8679
+ }], tabElement: [{
8680
+ type: ViewChild,
8681
+ args: ['tabElement']
8558
8682
  }] } });
8559
8683
 
8560
8684
  class TabGroupComponent {
@@ -8564,13 +8688,22 @@ class TabGroupComponent {
8564
8688
  get activeTabPortal() {
8565
8689
  return this.tabs[this.selectedIndex]?.content;
8566
8690
  }
8567
- constructor(cd) {
8691
+ get tabIds() {
8692
+ return this.tabs.map((t) => t.tabId);
8693
+ }
8694
+ constructor(cd, ngZone) {
8568
8695
  this.cd = cd;
8696
+ this.ngZone = ngZone;
8569
8697
  this.isCentered = false;
8570
8698
  this.selectedIndex = 0;
8699
+ this.ariaTabPattern = 'manualActivation';
8571
8700
  this.indexChange = new EventEmitter();
8701
+ this.focusedIndex = 0;
8572
8702
  this.destroyed$ = new Subject();
8573
8703
  }
8704
+ ngOnInit() {
8705
+ this.focusedIndex = this.selectedIndex;
8706
+ }
8574
8707
  ngOnChanges(changes) {
8575
8708
  const tab = this.tabs[this.selectedIndex];
8576
8709
  if (changes['selectedIndex'] && !changes['selectedIndex'].isFirstChange() && tab) {
@@ -8581,48 +8714,104 @@ class TabGroupComponent {
8581
8714
  if (this.tabs[0]) {
8582
8715
  this.tabs[0].noLeftMarginForFirstTab = true;
8583
8716
  }
8584
- const tab = this.tabs[this.selectedIndex];
8585
- if (tab) {
8586
- this.switchTo(tab);
8587
- }
8717
+ this.ngZone.runOutsideAngular(() => {
8718
+ // Use setTimeout to let RouterLinkActive enable isActive method (used on tabs)
8719
+ setTimeout(() => {
8720
+ this.navigateToInitialTab();
8721
+ });
8722
+ });
8588
8723
  const listenToTabsSwitch = (tabs) => merge(...tabs.map((tab) => tab.switch.asObservable().pipe(map(() => tab))));
8589
8724
  this.tabsQueryList?.changes
8590
8725
  .pipe(startWith(null), switchMap(() => listenToTabsSwitch(this.tabs)), takeUntil(this.destroyed$))
8591
8726
  .subscribe((tab) => {
8592
8727
  this.switchTo(tab);
8593
8728
  });
8729
+ this.tabs.forEach((tab) => {
8730
+ tab.keyDownAction.pipe(takeUntil(this.destroyed$)).subscribe((event) => {
8731
+ this.handleKeyDown(tab, event);
8732
+ });
8733
+ });
8594
8734
  }
8595
8735
  ngOnDestroy() {
8596
8736
  this.destroyed$.next();
8737
+ this.destroyed$.complete();
8597
8738
  }
8598
- tabIds() {
8599
- return this.tabs.map((t) => t.tabId);
8739
+ onFocusOut(event) {
8740
+ if (!this.tabListElement?.nativeElement?.contains(event.relatedTarget)) {
8741
+ // resync focused index on selected index when leaving tabs
8742
+ this.focusedIndex = this.selectedIndex;
8743
+ }
8600
8744
  }
8601
8745
  switchTo(tab) {
8602
8746
  this.tabsQueryList?.forEach((t, index) => {
8603
- t.isActive = t === tab;
8747
+ t.isActive = t.tabId === tab.tabId;
8604
8748
  if (t.isActive) {
8605
8749
  this.selectedIndex = index;
8750
+ this.focusedIndex = index;
8606
8751
  this.indexChange.emit(index);
8607
8752
  }
8608
8753
  });
8609
8754
  this.cd.markForCheck();
8610
8755
  }
8611
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
8612
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"tabs\" role=\"tablist\" [attr.aria-owns]=\"tabIds().join(' ')\" [class.centered]=\"isCentered\">\n <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$8.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8756
+ handleKeyDown(_tab, event) {
8757
+ switch (event.code) {
8758
+ case 'ArrowRight':
8759
+ const newTabIndex = (this.focusedIndex + 1) % this.tabs.length;
8760
+ this.navigateToTab(newTabIndex);
8761
+ break;
8762
+ case 'ArrowLeft':
8763
+ const previousTabIndex = this.focusedIndex === 0 ? this.tabs.length - 1 : this.focusedIndex - 1;
8764
+ this.navigateToTab(previousTabIndex);
8765
+ break;
8766
+ case 'Home':
8767
+ event.preventDefault();
8768
+ this.navigateToTab(0);
8769
+ break;
8770
+ case 'End':
8771
+ event.preventDefault();
8772
+ this.navigateToTab(this.tabs.length - 1);
8773
+ break;
8774
+ }
8775
+ }
8776
+ navigateToTab(tabIndex) {
8777
+ const tab = this.tabs[tabIndex];
8778
+ if (!tab) {
8779
+ return;
8780
+ }
8781
+ tab.setFocus();
8782
+ this.focusedIndex = tabIndex;
8783
+ if (this.ariaTabPattern === 'automaticActivation') {
8784
+ tab.select();
8785
+ }
8786
+ }
8787
+ navigateToInitialTab() {
8788
+ const alreadyActivedTabWithLink = this.tabs.find((t) => {
8789
+ return t.tabLink && t.isActive;
8790
+ });
8791
+ // Activated tab by URL takes priority over initial `selectedIndex` input value
8792
+ const initialTab = alreadyActivedTabWithLink || this.tabs[this.selectedIndex];
8793
+ initialTab?.select();
8794
+ }
8795
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
8796
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex", ariaTabPattern: "ariaTabPattern" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent, descendants: true }], viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8613
8797
  }
8614
8798
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: TabGroupComponent, decorators: [{
8615
8799
  type: Component,
8616
- args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul class=\"tabs\" role=\"tablist\" [attr.aria-owns]=\"tabIds().join(' ')\" [class.centered]=\"isCentered\">\n <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"] }]
8617
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isCentered: [{
8800
+ args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [PortalModule], template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content></ng-content>\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\"></ng-template>\n", styles: [".tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0}.tabs.centered{text-align:center}\n"] }]
8801
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { isCentered: [{
8618
8802
  type: Input
8619
8803
  }], selectedIndex: [{
8620
8804
  type: Input
8805
+ }], ariaTabPattern: [{
8806
+ type: Input
8621
8807
  }], indexChange: [{
8622
8808
  type: Output
8623
8809
  }], tabsQueryList: [{
8624
8810
  type: ContentChildren,
8625
- args: [TabComponent]
8811
+ args: [TabComponent, { descendants: true }]
8812
+ }], tabListElement: [{
8813
+ type: ViewChild,
8814
+ args: ['tabListElement']
8626
8815
  }] } });
8627
8816
 
8628
8817
  class LxTabUiModule {
@@ -8644,5 +8833,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
8644
8833
  * Generated bundle index. Do not edit.
8645
8834
  */
8646
8835
 
8647
- 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, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, 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, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
8836
+ 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, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, 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, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
8648
8837
  //# sourceMappingURL=leanix-components.mjs.map