@leanix/components 0.3.132 → 0.3.133
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 +36 -11
- package/fesm2015/leanix-components.mjs +28 -5
- package/fesm2015/leanix-components.mjs.map +1 -1
- package/fesm2020/leanix-components.mjs +28 -5
- package/fesm2020/leanix-components.mjs.map +1 -1
- package/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.d.ts +13 -3
- package/package.json +1 -1
|
@@ -2131,7 +2131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
2131
2131
|
|
|
2132
2132
|
class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
2133
2133
|
constructor() {
|
|
2134
|
-
super(
|
|
2134
|
+
super();
|
|
2135
2135
|
this.NAME = 'BasicDropdownComponent';
|
|
2136
2136
|
this.options = [];
|
|
2137
2137
|
this.initiallySelectedIndex = -1;
|
|
@@ -2139,10 +2139,15 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2139
2139
|
this.padding = 'default';
|
|
2140
2140
|
this.showCreateNewOption = false;
|
|
2141
2141
|
this.disabledOptions = {};
|
|
2142
|
+
this.overlayPositioning = false;
|
|
2143
|
+
this.truncateOptions = false;
|
|
2142
2144
|
this.onItemSelected = new EventEmitter();
|
|
2143
2145
|
this.triggerRequestForMoreEntries = new EventEmitter();
|
|
2144
2146
|
this.newOptionLabelSelected = new EventEmitter();
|
|
2145
2147
|
this.createNewOptionSelected = new EventEmitter();
|
|
2148
|
+
this.isTopDropdown = false;
|
|
2149
|
+
this.overlayOpen = new ReplaySubject(1);
|
|
2150
|
+
this.overlayOpen.next(false);
|
|
2146
2151
|
}
|
|
2147
2152
|
static isNewItem(items, term, key) {
|
|
2148
2153
|
if (!term) {
|
|
@@ -2154,6 +2159,14 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2154
2159
|
};
|
|
2155
2160
|
return !some(isEqualIgnoringCase, items);
|
|
2156
2161
|
}
|
|
2162
|
+
ngAfterViewChecked() {
|
|
2163
|
+
if (this.overlayPositioning && this.selectOrigin) {
|
|
2164
|
+
setTimeout(() => {
|
|
2165
|
+
//setTimout is used here to ensure that origin element is connected to DOM
|
|
2166
|
+
this.overlayOpen.next(this.selectOrigin.elementRef.nativeElement.isConnected);
|
|
2167
|
+
});
|
|
2168
|
+
}
|
|
2169
|
+
}
|
|
2157
2170
|
selectOption(option) {
|
|
2158
2171
|
if (!option || !this.itemKey) {
|
|
2159
2172
|
this.onItemSelected.emit(option);
|
|
@@ -2162,6 +2175,9 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2162
2175
|
this.onItemSelected.emit(option);
|
|
2163
2176
|
}
|
|
2164
2177
|
}
|
|
2178
|
+
onPositionChange(event) {
|
|
2179
|
+
this.isTopDropdown = event.connectionPair.originY === 'top';
|
|
2180
|
+
}
|
|
2165
2181
|
get isNewItem() {
|
|
2166
2182
|
return BasicDropdownComponent.isNewItem(this.options, this.newOptionLabel, this.labelKey);
|
|
2167
2183
|
}
|
|
@@ -2181,12 +2197,12 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
2181
2197
|
this.createNewOptionSelected.emit();
|
|
2182
2198
|
}
|
|
2183
2199
|
}
|
|
2184
|
-
BasicDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BasicDropdownComponent, deps:
|
|
2185
|
-
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" }, 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 }], usesInheritance: true, ngImport: i0, template: "<ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\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 >\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 >\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 >\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 >\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", styles: [":host(.noOptionPadding) .options .option{padding:0}.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.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: "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 });
|
|
2200
|
+
BasicDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2201
|
+
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 });
|
|
2186
2202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BasicDropdownComponent, decorators: [{
|
|
2187
2203
|
type: Component,
|
|
2188
|
-
args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
2189
|
-
}], propDecorators: { options: [{
|
|
2204
|
+
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]=\"!!(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"] }]
|
|
2205
|
+
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
2190
2206
|
type: Input
|
|
2191
2207
|
}], initiallySelectedIndex: [{
|
|
2192
2208
|
type: Input
|
|
@@ -2206,6 +2222,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
2206
2222
|
type: Input
|
|
2207
2223
|
}], disabledOptions: [{
|
|
2208
2224
|
type: Input
|
|
2225
|
+
}], overlayPositioning: [{
|
|
2226
|
+
type: Input
|
|
2227
|
+
}], truncateOptions: [{
|
|
2228
|
+
type: Input
|
|
2209
2229
|
}], onItemSelected: [{
|
|
2210
2230
|
type: Output
|
|
2211
2231
|
}], triggerRequestForMoreEntries: [{
|
|
@@ -2223,6 +2243,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
|
|
|
2223
2243
|
}], descriptionTemplateRef: [{
|
|
2224
2244
|
type: ContentChild,
|
|
2225
2245
|
args: ['descriptionTemplateRef']
|
|
2246
|
+
}], selectOrigin: [{
|
|
2247
|
+
type: ViewChild,
|
|
2248
|
+
args: ['selectOrigin', { static: false }]
|
|
2226
2249
|
}] } });
|
|
2227
2250
|
|
|
2228
2251
|
// We can only use 'keyCode' because 'key' depends on the browser
|