@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.
- package/esm2022/lib/forms-ui/components/breadcrumb/breadcrumb.component.mjs +1 -1
- package/esm2022/lib/forms-ui/components/option/option.component.mjs +19 -4
- package/esm2022/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs +83 -18
- package/esm2022/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.mjs +2 -2
- package/esm2022/lib/forms-ui/directives/keyboard-action-source.directive.mjs +12 -3
- package/esm2022/lib/forms-ui/helpers/key-codes.constants.mjs +3 -1
- package/esm2022/lib/tab-ui/components/tab/tab.component.mjs +44 -9
- package/esm2022/lib/tab-ui/components/tab-group/tab-group.component.mjs +80 -15
- package/fesm2022/leanix-components.mjs +242 -53
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/forms-ui/components/option/option.component.d.ts +5 -1
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +12 -2
- package/lib/forms-ui/directives/keyboard-action-source.directive.d.ts +2 -1
- package/lib/forms-ui/helpers/key-codes.constants.d.ts +2 -0
- package/lib/tab-ui/components/tab/tab.component.d.ts +16 -5
- package/lib/tab-ui/components/tab-group/tab-group.component.d.ts +14 -5
- package/package.json +1 -1
@@ -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
|
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$
|
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\">></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\">></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\">></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\">></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
|
5943
|
+
return this._options?.toArray() || [];
|
5944
|
+
}
|
5945
|
+
get optionIds() {
|
5946
|
+
return this.options.map((o) => o.optionId);
|
5915
5947
|
}
|
5916
|
-
|
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.
|
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.
|
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.
|
5949
|
-
.subscribe(
|
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.
|
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
|
-
|
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
|
-
|
5984
|
-
|
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
|
-
|
6028
|
-
|
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-
|
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:
|
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$
|
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$
|
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$
|
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$
|
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$
|
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
|
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
|
-
|
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
|
-
|
8523
|
-
|
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 (
|
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
|
-
|
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
|
-
|
8585
|
-
|
8586
|
-
|
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
|
-
|
8599
|
-
|
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
|
-
|
8612
|
-
|
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
|
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
|