@leanix/components 0.3.137 → 0.4.1
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/esm2020/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.mjs +4 -14
- package/esm2020/lib/forms-ui/components/keyboard-select.directive.mjs +5 -2
- package/esm2020/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs +20 -9
- package/esm2020/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs +30 -8
- package/esm2020/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.mjs +1 -1
- package/esm2020/lib/forms-ui/models/base-select.directive.mjs +22 -4
- package/fesm2015/leanix-components.mjs +65 -22
- package/fesm2015/leanix-components.mjs.map +1 -1
- package/fesm2020/leanix-components.mjs +65 -22
- package/fesm2020/leanix-components.mjs.map +1 -1
- package/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.d.ts +2 -5
- package/lib/forms-ui/components/keyboard-select.directive.d.ts +4 -1
- package/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.d.ts +6 -1
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +9 -4
- package/lib/forms-ui/models/base-select.directive.d.ts +4 -2
- package/package.json +9 -9
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, formatDate } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, Input, HostBinding, ChangeDetectionStrategy, EventEmitter, Output, HostListener, Directive, Injectable, InjectionToken, ElementRef, Inject, ViewChild, ContentChildren, SecurityContext, Pipe, Optional, NgModule, ViewChildren,
|
|
4
|
+
import { Component, Input, HostBinding, ChangeDetectionStrategy, EventEmitter, Output, HostListener, Directive, Injectable, InjectionToken, ElementRef, Inject, ViewChild, ContentChildren, SecurityContext, Pipe, Optional, NgModule, ViewChildren, forwardRef, ContentChild, TemplateRef, Self, Host } from '@angular/core';
|
|
5
5
|
import * as i1$2 from '@ngx-translate/core';
|
|
6
6
|
import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
7
7
|
import * as i1$7 from '@angular/cdk/portal';
|
|
@@ -11,7 +11,7 @@ import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
|
11
11
|
import { __decorate } from 'tslib';
|
|
12
12
|
import { escape, trimEnd, sortBy, get, isEqual, toLower, some, padCharsStart, toString, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
|
|
13
13
|
import * as i6 from 'rxjs';
|
|
14
|
-
import { BehaviorSubject, timer, Subject, combineLatest, merge, concat, fromEvent,
|
|
14
|
+
import { BehaviorSubject, timer, Subject, combineLatest, merge, concat, fromEvent, ReplaySubject, Observable, of, map as map$1 } from 'rxjs';
|
|
15
15
|
import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, delay, tap } from 'rxjs/operators';
|
|
16
16
|
import * as i1$3 from '@angular/platform-browser';
|
|
17
17
|
import Color from 'color';
|
|
@@ -2087,6 +2087,9 @@ var KeyboardSelectAction;
|
|
|
2087
2087
|
})(KeyboardSelectAction || (KeyboardSelectAction = {}));
|
|
2088
2088
|
class KeyboardSelectDirective {
|
|
2089
2089
|
constructor() {
|
|
2090
|
+
this.cdkOverlayOpenState = new ReplaySubject(1);
|
|
2091
|
+
this.cdkOverlayOpen$ = this.cdkOverlayOpenState.asObservable().pipe(startWith(false), distinctUntilChanged());
|
|
2092
|
+
this.overlayPositioning = false;
|
|
2090
2093
|
this.keyboardSelectAction = new Observable();
|
|
2091
2094
|
this.selectedItemIndexChange = new EventEmitter(true); // TODO: this is just index change from navigating (highlighting)
|
|
2092
2095
|
this.destroyed$ = new Subject();
|
|
@@ -2187,7 +2190,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
2187
2190
|
class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
2188
2191
|
constructor() {
|
|
2189
2192
|
super();
|
|
2190
|
-
this.overlayOpenState = new ReplaySubject(1);
|
|
2191
2193
|
this.NAME = 'BasicDropdownComponent';
|
|
2192
2194
|
this.options = [];
|
|
2193
2195
|
this.initiallySelectedIndex = -1;
|
|
@@ -2202,7 +2204,6 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2202
2204
|
this.newOptionLabelSelected = new EventEmitter();
|
|
2203
2205
|
this.createNewOptionSelected = new EventEmitter();
|
|
2204
2206
|
this.isTopDropdown = false;
|
|
2205
|
-
this.overlayOpen$ = this.overlayOpenState.asObservable().pipe(startWith$1(false), delay$1(0), distinctUntilChanged$1());
|
|
2206
2207
|
}
|
|
2207
2208
|
static isNewItem(items, term, key) {
|
|
2208
2209
|
if (!term) {
|
|
@@ -2214,13 +2215,6 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2214
2215
|
};
|
|
2215
2216
|
return !some(isEqualIgnoringCase, items);
|
|
2216
2217
|
}
|
|
2217
|
-
ngAfterViewChecked() {
|
|
2218
|
-
if (this.overlayPositioning && this.selectOrigin) {
|
|
2219
|
-
// Emit current selectOrigin DOM connection state
|
|
2220
|
-
// when dropdown is attached to DOM - it gets set to true
|
|
2221
|
-
this.overlayOpenState.next(this.selectOrigin.elementRef.nativeElement.isConnected);
|
|
2222
|
-
}
|
|
2223
|
-
}
|
|
2224
2218
|
selectOption(option) {
|
|
2225
2219
|
if (!option || !this.itemKey) {
|
|
2226
2220
|
this.onItemSelected.emit(option);
|
|
@@ -2252,10 +2246,10 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2252
2246
|
}
|
|
2253
2247
|
}
|
|
2254
2248
|
BasicDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2255
|
-
BasicDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(overlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"descriptionTemplateRef\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option description disabledItem\"\n >\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"NAME + '.noResults' | translate\"\n >\n {{ NAME + '.noResults' | translate }}\n </li>\n <li\n *ngIf=\"placeholder\"\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i1$1.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2249
|
+
BasicDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"descriptionTemplateRef\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option description disabledItem\"\n >\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"NAME + '.noResults' | translate\"\n >\n {{ NAME + '.noResults' | translate }}\n </li>\n <li\n *ngIf=\"placeholder\"\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i1$1.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2256
2250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BasicDropdownComponent, decorators: [{
|
|
2257
2251
|
type: Component,
|
|
2258
|
-
args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(
|
|
2252
|
+
args: [{ selector: 'lx-basic-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngTemplateOutlet]=\"dropdown\" *ngIf=\"!overlayPositioning\"></ng-container>\n<ng-container *ngIf=\"overlayPositioning\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"descriptionTemplateRef\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option description disabledItem\"\n >\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"NAME + '.noResults' | translate\"\n >\n {{ NAME + '.noResults' | translate }}\n </li>\n <li\n *ngIf=\"placeholder\"\n tabindex=\"-1\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [attr.aria-label]=\"placeholder\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n</ng-template>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"] }]
|
|
2259
2253
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
2260
2254
|
type: Input
|
|
2261
2255
|
}], initiallySelectedIndex: [{
|
|
@@ -4001,6 +3995,13 @@ class BaseSelectDirective {
|
|
|
4001
3995
|
this.resetSelectState();
|
|
4002
3996
|
this.close.emit();
|
|
4003
3997
|
}
|
|
3998
|
+
if (this.dropdownBase) {
|
|
3999
|
+
this.notifyDropdownBase(isOpen);
|
|
4000
|
+
}
|
|
4001
|
+
else {
|
|
4002
|
+
// dropdown may be hidden with *ngIf, so we might need to wait for it to be rendered
|
|
4003
|
+
setTimeout(() => this.notifyDropdownBase(isOpen));
|
|
4004
|
+
}
|
|
4004
4005
|
});
|
|
4005
4006
|
if (this.focusOnInit) {
|
|
4006
4007
|
setTimeout(() => this.focus());
|
|
@@ -4078,9 +4079,17 @@ class BaseSelectDirective {
|
|
|
4078
4079
|
selectFirstOption() {
|
|
4079
4080
|
this.optionsKeyboardSelectAction$.next(KeyboardSelectAction.FIRST);
|
|
4080
4081
|
}
|
|
4082
|
+
/*
|
|
4083
|
+
* Sets the dropdown open/closed state, used for overlay dropdowns
|
|
4084
|
+
* */
|
|
4085
|
+
notifyDropdownBase(isOpen) {
|
|
4086
|
+
if (this.dropdownBase && this.dropdownBase.overlayPositioning && this.dropdownBase.cdkOverlayOpenState) {
|
|
4087
|
+
this.dropdownBase.cdkOverlayOpenState.next(isOpen);
|
|
4088
|
+
}
|
|
4089
|
+
}
|
|
4081
4090
|
}
|
|
4082
4091
|
BaseSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BaseSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4083
|
-
BaseSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: BaseSelectDirective, inputs: { placeholder: "placeholder", disabled: "disabled", focusOnInit: "focusOnInit", dropdownMaxHeight: "dropdownMaxHeight", allowQuery: "allowQuery" }, outputs: { query: "query", close: "close", open: "open" }, viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
|
|
4092
|
+
BaseSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: BaseSelectDirective, inputs: { placeholder: "placeholder", disabled: "disabled", focusOnInit: "focusOnInit", dropdownMaxHeight: "dropdownMaxHeight", allowQuery: "allowQuery" }, outputs: { query: "query", close: "close", open: "open" }, queries: [{ propertyName: "dropdownBase", first: true, predicate: KeyboardSelectDirective, descendants: true }], viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
|
|
4084
4093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BaseSelectDirective, decorators: [{
|
|
4085
4094
|
type: Directive
|
|
4086
4095
|
}], propDecorators: { placeholder: [{
|
|
@@ -4102,6 +4111,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
4102
4111
|
}], optionsContainer: [{
|
|
4103
4112
|
type: ViewChild,
|
|
4104
4113
|
args: ['optionsContainer', { static: true }]
|
|
4114
|
+
}], dropdownBase: [{
|
|
4115
|
+
type: ContentChild,
|
|
4116
|
+
args: [KeyboardSelectDirective, { static: false, descendants: true }]
|
|
4105
4117
|
}] } });
|
|
4106
4118
|
|
|
4107
4119
|
class ResponsiveInputComponent {
|
|
@@ -4464,9 +4476,11 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
|
4464
4476
|
this.labelKey = 'label';
|
|
4465
4477
|
this.loading = false;
|
|
4466
4478
|
this.showNoResultsIfGroupIsEmpty = false;
|
|
4479
|
+
this.overlayPositioning = false;
|
|
4467
4480
|
this.onItemSelected = new EventEmitter();
|
|
4468
4481
|
this.containerScrolled = new EventEmitter();
|
|
4469
4482
|
this.createNewOption = new EventEmitter();
|
|
4483
|
+
this.isTopDropdown = false;
|
|
4470
4484
|
}
|
|
4471
4485
|
get isNewItem() {
|
|
4472
4486
|
const options = this.optionGroups?.reduce((flatOptions, optionGroup) => flatOptions.concat(optionGroup.options), []) ??
|
|
@@ -4490,12 +4504,15 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
|
4490
4504
|
}
|
|
4491
4505
|
return option.value;
|
|
4492
4506
|
}
|
|
4507
|
+
onPositionChange(event) {
|
|
4508
|
+
this.isTopDropdown = event.connectionPair.originY === 'top';
|
|
4509
|
+
}
|
|
4493
4510
|
}
|
|
4494
4511
|
OptionGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4495
|
-
OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n #keyboardSelectContainer\n
|
|
4512
|
+
OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <div\n #keyboardSelectContainer\n class=\"scrollingPanel lxThinScrollbar\"\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"containerScrolled.emit()\"\n >\n <ul class=\"options\">\n <li\n *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n <li>\n <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n <ul>\n <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n <li class=\"noResult\">\n <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n <ng-container\n *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultText>\n <span>{{ NAME + '.noResults' | translate }}</span>\n </ng-template>\n </li>\n </ng-container>\n <ng-template #options>\n <li\n *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #basicDropdownOption>\n <lx-basic-dropdown-item\n [label]=\"option.label\"\n labelFontWeight=\"normal\"\n [highlightTerm]=\"highlightTerm\"\n ></lx-basic-dropdown-item>\n </ng-template>\n </li>\n </ng-template>\n </ul>\n </li>\n </ng-container>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i1$1.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4496
4513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
|
|
4497
4514
|
type: Component,
|
|
4498
|
-
args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #keyboardSelectContainer\n
|
|
4515
|
+
args: [{ selector: 'lx-option-group-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n <div\n #keyboardSelectContainer\n class=\"scrollingPanel lxThinScrollbar\"\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"containerScrolled.emit()\"\n >\n <ul class=\"options\">\n <li\n *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n <li>\n <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n <ul>\n <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n <li class=\"noResult\">\n <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n <ng-container\n *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultText>\n <span>{{ NAME + '.noResults' | translate }}</span>\n </ng-template>\n </li>\n </ng-container>\n <ng-template #options>\n <li\n *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #basicDropdownOption>\n <lx-basic-dropdown-item\n [label]=\"option.label\"\n labelFontWeight=\"normal\"\n [highlightTerm]=\"highlightTerm\"\n ></lx-basic-dropdown-item>\n </ng-template>\n </li>\n </ng-template>\n </ul>\n </li>\n </ng-container>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
|
|
4499
4516
|
}], propDecorators: { optionGroups: [{
|
|
4500
4517
|
type: Input
|
|
4501
4518
|
}], newOptionLabel: [{
|
|
@@ -4512,6 +4529,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
4512
4529
|
type: Input
|
|
4513
4530
|
}], showNoResultsIfGroupIsEmpty: [{
|
|
4514
4531
|
type: Input
|
|
4532
|
+
}], overlayPositioning: [{
|
|
4533
|
+
type: Input
|
|
4515
4534
|
}], onItemSelected: [{
|
|
4516
4535
|
type: Output
|
|
4517
4536
|
}], containerScrolled: [{
|
|
@@ -4524,22 +4543,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
4524
4543
|
}], noResultsOptionTemplateRef: [{
|
|
4525
4544
|
type: ContentChild,
|
|
4526
4545
|
args: ['noResultsOptionTemplateRef']
|
|
4546
|
+
}], selectOrigin: [{
|
|
4547
|
+
type: ViewChild,
|
|
4548
|
+
args: ['selectOrigin', { static: false }]
|
|
4527
4549
|
}] } });
|
|
4528
4550
|
|
|
4529
4551
|
class OptionsDropdownComponent {
|
|
4530
|
-
constructor(changeDetection) {
|
|
4552
|
+
constructor(changeDetection, scrollStrategies) {
|
|
4531
4553
|
this.changeDetection = changeDetection;
|
|
4554
|
+
this.scrollStrategies = scrollStrategies;
|
|
4532
4555
|
this.NAME = 'OptionsDropdownComponent';
|
|
4533
4556
|
this.align = 'right';
|
|
4534
4557
|
this.closeOnScroll = false;
|
|
4535
4558
|
this.disabled = false;
|
|
4536
4559
|
this.maxHeight = 'none';
|
|
4537
4560
|
this.closeOnSelect = true;
|
|
4561
|
+
this.overlayPositioning = false;
|
|
4562
|
+
this.overlayScrollStrategy = this.closeOnScroll ? this.scrollStrategies.close() : this.scrollStrategies.reposition();
|
|
4538
4563
|
this.highlightedOptionIndex$ = new BehaviorSubject(0);
|
|
4539
4564
|
this._open = false;
|
|
4540
4565
|
this.isSubdropdownExpanded = false;
|
|
4541
4566
|
this.destroyed$ = new Subject();
|
|
4542
4567
|
}
|
|
4568
|
+
get overlayPositions() {
|
|
4569
|
+
return [
|
|
4570
|
+
{
|
|
4571
|
+
originX: this.align === 'right' ? 'start' : 'end',
|
|
4572
|
+
originY: 'bottom',
|
|
4573
|
+
overlayX: this.align === 'right' ? 'start' : 'end',
|
|
4574
|
+
overlayY: 'top'
|
|
4575
|
+
},
|
|
4576
|
+
{
|
|
4577
|
+
originX: this.align === 'right' ? 'start' : 'end',
|
|
4578
|
+
originY: 'top',
|
|
4579
|
+
overlayX: this.align === 'right' ? 'start' : 'end',
|
|
4580
|
+
overlayY: 'bottom'
|
|
4581
|
+
}
|
|
4582
|
+
];
|
|
4583
|
+
}
|
|
4543
4584
|
set open(value) {
|
|
4544
4585
|
if (this.disabled) {
|
|
4545
4586
|
return;
|
|
@@ -4657,12 +4698,12 @@ class OptionsDropdownComponent {
|
|
|
4657
4698
|
return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
|
|
4658
4699
|
}
|
|
4659
4700
|
}
|
|
4660
|
-
OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4661
|
-
OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n <ng-
|
|
4701
|
+
OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component });
|
|
4702
|
+
OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionsDropdownComponent, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4662
4703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
|
|
4663
4704
|
type: Component,
|
|
4664
|
-
args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n <ng-
|
|
4665
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { align: [{
|
|
4705
|
+
args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
4706
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.ScrollStrategyOptions }]; }, propDecorators: { align: [{
|
|
4666
4707
|
type: Input
|
|
4667
4708
|
}], closeOnScroll: [{
|
|
4668
4709
|
type: Input
|
|
@@ -4672,6 +4713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
4672
4713
|
type: Input
|
|
4673
4714
|
}], closeOnSelect: [{
|
|
4674
4715
|
type: Input
|
|
4716
|
+
}], overlayPositioning: [{
|
|
4717
|
+
type: Input
|
|
4675
4718
|
}], trigger: [{
|
|
4676
4719
|
type: ContentChild,
|
|
4677
4720
|
args: [KeyboardActionSourceDirective]
|
|
@@ -5762,7 +5805,7 @@ class SortingDropdownComponent {
|
|
|
5762
5805
|
}
|
|
5763
5806
|
}
|
|
5764
5807
|
SortingDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5765
|
-
SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: SortingDropdownComponent, 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
5808
|
+
SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: SortingDropdownComponent, 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { 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: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
5766
5809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SortingDropdownComponent, decorators: [{
|
|
5767
5810
|
type: Component,
|
|
5768
5811
|
args: [{ selector: 'lx-sorting-dropdown', 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" }]
|