@leanix/components 0.4.941 → 0.4.943
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.
|
@@ -4084,7 +4084,7 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
|
|
|
4084
4084
|
this.select(index + offset);
|
|
4085
4085
|
}
|
|
4086
4086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4087
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n} @else {\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <ul\n class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n @if (newOptionLabel && isNewItem) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @if (showCreateNewOption) {\n <li\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 @if (createNewOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n } @else {\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n }\n </span>\n </li>\n }\n @if (descriptionTemplateRef) {\n <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n }\n @if (options?.length === 0 && !newOptionLabel && !loading) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n }\n @if (placeholder) {\n <li\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 }\n @for (option of options; track trackByProp(index, option); let index = $index) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n @if (optionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n } @else {\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n }\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\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}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BasicDropdownComponent, isStandalone: true, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions", overlayPositioning: "overlayPositioning", truncateOptions: "truncateOptions", noResultsText: "noResultsText" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => BasicDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n} @else {\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <ul\n class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n @if (newOptionLabel && isNewItem) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @if (showCreateNewOption) {\n <li\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 @if (createNewOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n } @else {\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n }\n </span>\n </li>\n }\n @if (descriptionTemplateRef) {\n <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n }\n @if (options?.length === 0 && !newOptionLabel && !loading) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n }\n @if (placeholder) {\n <li\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 }\n @for (option of options; track trackByProp(index, option); let index = $index) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n @if (optionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n } @else {\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n }\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\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}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4088
4088
|
}
|
|
4089
4089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BasicDropdownComponent, decorators: [{
|
|
4090
4090
|
type: Component,
|
|
@@ -4100,7 +4100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
4100
4100
|
AsyncPipe,
|
|
4101
4101
|
UpperCasePipe,
|
|
4102
4102
|
TranslateModule
|
|
4103
|
-
], template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n} @else {\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <ul\n class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n @if (newOptionLabel && isNewItem) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @if (showCreateNewOption) {\n <li\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 @if (createNewOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n } @else {\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n }\n </span>\n </li>\n }\n @if (descriptionTemplateRef) {\n <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n }\n @if (options?.length === 0 && !newOptionLabel && !loading) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n }\n @if (placeholder) {\n <li\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 }\n @for (option of options; track trackByProp(index, option); let index = $index) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n @if (optionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n } @else {\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n }\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\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}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"] }]
|
|
4103
|
+
], template: "@if (overlayPositioning) {\n <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n (positionChange)=\"onPositionChange($event)\"\n >\n <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n </div>\n </ng-template>\n} @else {\n <ng-container [ngTemplateOutlet]=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n <ul\n class=\"options lxBasicDropdownList {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n [ngClass]=\"{ truncateOptions: truncateOptions }\"\n (scrolled)=\"onScroll()\"\n >\n @if (newOptionLabel && isNewItem) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n [attr.aria-label]=\"newOptionLabel\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @if (showCreateNewOption) {\n <li\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 @if (createNewOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\" />\n } @else {\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n }\n </span>\n </li>\n }\n @if (descriptionTemplateRef) {\n <li tabindex=\"-1\" lxSelectableItem [scrollInContainer]=\"keyboardSelectContainer\" #item class=\"option disabledItem description\">\n <span class=\"descriptionContent\">\n <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\" />\n </span>\n </li>\n }\n @if (options?.length === 0 && !newOptionLabel && !loading) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n [attr.aria-label]=\"noResultsText ?? (NAME + '.noResults' | translate)\"\n >\n {{ noResultsText ?? (NAME + '.noResults' | translate) }}\n </li>\n }\n @if (placeholder) {\n <li\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 }\n @for (option of options; track trackByProp(index, option); let index = $index) {\n <li\n tabindex=\"-1\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"(itemKey && !!disabledOptions[option[itemKey]]) || this.disabledOptions[option]\"\n [attr.aria-label]=\"labelKey ? option[labelKey] : option\"\n >\n @if (optionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\" />\n } @else {\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n }\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\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}.option.disabledItem:not(.description){opacity:.5}:host(.lxFioriReskin).noOptionPadding .options .option{padding:0}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .truncateOptions li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxBasicDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}\n"] }]
|
|
4104
4104
|
}], ctorParameters: () => [], propDecorators: { options: [{
|
|
4105
4105
|
type: Input
|
|
4106
4106
|
}], initiallySelectedIndex: [{
|
|
@@ -8181,7 +8181,7 @@ class MultiSelectComponent extends BaseSelectDirective {
|
|
|
8181
8181
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
8182
8182
|
multi: true
|
|
8183
8183
|
}
|
|
8184
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
8184
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
8185
8185
|
}
|
|
8186
8186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
8187
8187
|
type: Component,
|
|
@@ -8200,7 +8200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8200
8200
|
NgTemplateOutlet,
|
|
8201
8201
|
AsyncPipe,
|
|
8202
8202
|
IconComponent
|
|
8203
|
-
], hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\n"] }]
|
|
8203
|
+
], hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.focused]=\"isInputFocused\"\n [class.tokenized]=\"tokenize\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n [class.hasSelection]=\"selection && selection.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectedChoicesContainer\">\n @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (selectionTemplate) {\n <div class=\"selectionAndInput\">\n <lx-multi-select-selection\n [selection]=\"selection\"\n [tokenize]=\"tokenize\"\n [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n >\n <ng-template #innerSelectionTemplate let-option>\n <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n </ng-template>\n </lx-multi-select-selection>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n </div>\n } @else {\n <div class=\"selection\">\n <ng-content select=\".pills\" />\n </div>\n <lx-responsive-input\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusViaTab)=\"focusedViaTab()\"\n [formControl]=\"queryControl\"\n [inputId]=\"inputId\"\n (keydown.enter)=\"$event.preventDefault()\"\n />\n }\n @if (!disabled) {\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n }\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}:host:where(:not(.lxFioriReskin)) .selectContainer.smallSize lx-responsive-input{height:22px}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled lx-responsive-input{display:none}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.hasSelection){padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host:where(:not(.lxFioriReskin)) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}:host:where(:not(.lxFioriReskin)) .selectContainer .selection{display:inline;cursor:default}:host:where(:not(.lxFioriReskin)) .selectContainer .selectionAndInput{display:flex}:host:where(:not(.lxFioriReskin)) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host:where(:not(.lxFioriReskin)) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}:host:where(:not(.lxFioriReskin)) lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}:host(.lxFioriReskin){display:block;width:100%;min-height:var(--sapElement_Compact_Height);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;height:auto;cursor:text;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default;pointer-events:none}:host(.lxFioriReskin) .selectContainer.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer:not(.hasSelection){padding-left:.5rem}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer{padding-right:0;padding-left:.25rem;height:100%;display:flex;align-items:center}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:.5rem;right:2rem;top:0;bottom:0;line-height:var(--sapElement_Compact_Height);color:var(--sapField_PlaceholderTextColor);font-style:italic;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}:host(.lxFioriReskin) .selectContainer .selection{display:inline;cursor:default}:host(.lxFioriReskin) .selectContainer .selectionAndInput{display:flex;flex:1;min-width:0}:host(.lxFioriReskin) .selectContainer.tokenized lx-multi-select-selection{flex-grow:1}:host(.lxFioriReskin) .selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;z-index:1}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;align-self:stretch;justify-content:center;box-sizing:border-box;flex:none;width:2rem;height:auto;margin:.03125rem 0 .03125rem auto;padding:.3125rem .5rem .25rem;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{margin-top:.0625rem;margin-bottom:.0625rem}:host(.lxFioriReskin) .selectContainer.invalid .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important}\n"] }]
|
|
8204
8204
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
|
|
8205
8205
|
type: Input
|
|
8206
8206
|
}], selection: [{
|
|
@@ -8262,6 +8262,8 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
|
8262
8262
|
super(...arguments);
|
|
8263
8263
|
/** @internal */
|
|
8264
8264
|
this.NAME = 'OptionGroupDropdownComponent';
|
|
8265
|
+
/** @internal */
|
|
8266
|
+
this.fioriReskinActive = inject(FioriReskinService).active;
|
|
8265
8267
|
/**
|
|
8266
8268
|
* Array of option groups to display in the dropdown.
|
|
8267
8269
|
* @default []
|
|
@@ -8333,11 +8335,11 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
|
|
|
8333
8335
|
this.isTopDropdown = event.connectionPair.originY === 'top';
|
|
8334
8336
|
}
|
|
8335
8337
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
8336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (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=\"dropdownContent\" />\n </div>\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\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 @if (showCreateNewOption && newOptionLabel && isNewItem) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n <li>\n @if (optionGroup.label) {\n <div class=\"groupLabel\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n }\n <ul>\n @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n <li class=\"noResult\">\n @if (noResultsOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n } @else {\n <span>{{ NAME + '.noResults' | translate }}</span>\n }\n </li>\n } @else {\n @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n <li\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 @if (optionTemplateRef) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n } @else {\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n }\n </li>\n }\n }\n </ul>\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (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 lxOptionGroupDropdownOverlay\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n </div>\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\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 lxOptionGroupDropdownList\">\n @if (showCreateNewOption && newOptionLabel && isNewItem) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n <li>\n @if (optionGroup.label) {\n <div class=\"groupLabel\">\n <span>{{ fioriReskinActive() ? optionGroup.label : (optionGroup.label | uppercase) }}</span>\n </div>\n }\n <ul>\n @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n <li class=\"noResult\">\n @if (noResultsOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n } @else {\n <span>{{ NAME + '.noResults' | translate }}</span>\n }\n </li>\n } @else {\n @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n <li\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 @if (optionTemplateRef) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n } @else {\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n }\n </li>\n }\n }\n </ul>\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}:host:where(:not(.lxFioriReskin)) .overlayDropdown,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}:host:where(:not(.lxFioriReskin)) .overlayDropdown:not(.top),:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay: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}:host:where(:not(.lxFioriReskin)) .overlayDropdown.top,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay.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}:host:where(:not(.lxFioriReskin)) .scrollingPanel{overflow-y:auto;max-height:400px}:host:where(:not(.lxFioriReskin)) .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}:host:where(:not(.lxFioriReskin)) ul{list-style:none;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) ul:not(:last-child){border-bottom:solid 1px #eaedf1}:host:where(:not(.lxFioriReskin)) .noResult{display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option{cursor:pointer;display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option:hover{background-color:#e1e5eb!important}:host:where(:not(.lxFioriReskin)) .option.highlighted{background:#eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown:not(.top),::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay: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}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown.top,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay.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}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .scrollingPanel{overflow-y:auto;max-height:400px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul{list-style:none;margin:0;padding:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul:not(:last-child){border-bottom:solid 1px #eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .noResult{display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option{cursor:pointer;display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option:hover{background-color:#e1e5eb!important}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option.highlighted{background:#eaedf1}:host(.lxFioriReskin){display:block}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .scrollingPanel{overflow-y:auto;max-height:250px}:host(.lxFioriReskin) .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .options ul{list-style:none;margin:0;padding:0}:host(.lxFioriReskin) .options .option{padding:.375rem 1rem}:host(.lxFioriReskin) ul:not(:last-child){border-bottom:0}:host(.lxFioriReskin) .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul{list-style:none;margin:0;padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul:not(:last-child){border-bottom:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8337
8339
|
}
|
|
8338
8340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
|
|
8339
8341
|
type: Component,
|
|
8340
|
-
args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], imports: [
|
|
8342
|
+
args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], imports: [
|
|
8341
8343
|
CdkOverlayOrigin,
|
|
8342
8344
|
CdkConnectedOverlay,
|
|
8343
8345
|
NgClass,
|
|
@@ -8350,7 +8352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8350
8352
|
AsyncPipe,
|
|
8351
8353
|
UpperCasePipe,
|
|
8352
8354
|
TranslateModule
|
|
8353
|
-
], template: "@if (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=\"dropdownContent\" />\n </div>\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\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 @if (showCreateNewOption && newOptionLabel && isNewItem) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n <li>\n @if (optionGroup.label) {\n <div class=\"groupLabel\">\n <span>{{ optionGroup.label | uppercase }}</span>\n </div>\n }\n <ul>\n @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n <li class=\"noResult\">\n @if (noResultsOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n } @else {\n <span>{{ NAME + '.noResults' | translate }}</span>\n }\n </li>\n } @else {\n @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n <li\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 @if (optionTemplateRef) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n } @else {\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n }\n </li>\n }\n }\n </ul>\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
|
|
8355
|
+
], template: "@if (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 lxOptionGroupDropdownOverlay\" [ngClass]=\"{ top: isTopDropdown }\">\n <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n </div>\n </ng-template>\n} @else {\n <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\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 lxOptionGroupDropdownList\">\n @if (showCreateNewOption && newOptionLabel && isNewItem) {\n <li\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOption()\"\n (select)=\"onCreateNewOption()\"\n [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n </li>\n }\n @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n <li>\n @if (optionGroup.label) {\n <div class=\"groupLabel\">\n <span>{{ fioriReskinActive() ? optionGroup.label : (optionGroup.label | uppercase) }}</span>\n </div>\n }\n <ul>\n @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n <li class=\"noResult\">\n @if (noResultsOptionTemplateRef) {\n <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n } @else {\n <span>{{ NAME + '.noResults' | translate }}</span>\n }\n </li>\n } @else {\n @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n <li\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 @if (optionTemplateRef) {\n <ng-container\n *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n />\n } @else {\n <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n }\n </li>\n }\n }\n </ul>\n </li>\n }\n @if (loading) {\n <lx-spinner [fadeBackground]=\"true\" />\n }\n </ul>\n </div>\n</ng-template>\n", styles: [":host{display:block}:host:where(:not(.lxFioriReskin)) .overlayDropdown,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}:host:where(:not(.lxFioriReskin)) .overlayDropdown:not(.top),:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay: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}:host:where(:not(.lxFioriReskin)) .overlayDropdown.top,:host:where(:not(.lxFioriReskin)).lxOptionGroupDropdownOverlay.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}:host:where(:not(.lxFioriReskin)) .scrollingPanel{overflow-y:auto;max-height:400px}:host:where(:not(.lxFioriReskin)) .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}:host:where(:not(.lxFioriReskin)) ul{list-style:none;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) ul:not(:last-child){border-bottom:solid 1px #eaedf1}:host:where(:not(.lxFioriReskin)) .noResult{display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option{cursor:pointer;display:block;padding:4px 12px}:host:where(:not(.lxFioriReskin)) .option:hover{background-color:#e1e5eb!important}:host:where(:not(.lxFioriReskin)) .option.highlighted{background:#eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown:not(.top),::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay: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}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .overlayDropdown.top,::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay.lxOptionGroupDropdownOverlay.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}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .scrollingPanel{overflow-y:auto;max-height:400px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul{list-style:none;margin:0;padding:0}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay ul:not(:last-child){border-bottom:solid 1px #eaedf1}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .noResult{display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option{cursor:pointer;display:block;padding:4px 12px}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option:hover{background-color:#e1e5eb!important}::ng-deep body:where(:not(.lxFioriReskin)) .cdk-overlay-pane .lxOptionGroupDropdownOverlay .option.highlighted{background:#eaedf1}:host(.lxFioriReskin){display:block}:host(.lxFioriReskin) .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden;margin:0 -1px;width:calc(100% + 2px)}:host(.lxFioriReskin) .overlayDropdown:not(.top){border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host(.lxFioriReskin) .overlayDropdown.top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.lxFioriReskin) .scrollingPanel{overflow-y:auto;max-height:250px}:host(.lxFioriReskin) .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}:host(.lxFioriReskin) .options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}:host(.lxFioriReskin) .options.defaultPadding .option,:host(.lxFioriReskin) .options.defaultPadding .newEntryOption,:host(.lxFioriReskin) .options.defaultPadding .onTheFlyOption,:host(.lxFioriReskin) .options.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}:host(.lxFioriReskin) .options.narrowPadding .option,:host(.lxFioriReskin) .options.narrowPadding .newEntryOption,:host(.lxFioriReskin) .options.narrowPadding .onTheFlyOption,:host(.lxFioriReskin) .options.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}:host(.lxFioriReskin) .options .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}:host(.lxFioriReskin) .options .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}:host(.lxFioriReskin) .options .option.selected,:host(.lxFioriReskin) .options .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}:host(.lxFioriReskin) .options .option.selected:after,:host(.lxFioriReskin) .options .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}:host(.lxFioriReskin) .options .option.selected:hover:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}:host(.lxFioriReskin) .options .option:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.selected:active:not(.disabledItem),:host(.lxFioriReskin) .options .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}:host(.lxFioriReskin) .options .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}:host(.lxFioriReskin) .options .option.disabledItem{cursor:default}:host(.lxFioriReskin) .options .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .options ul{list-style:none;margin:0;padding:0}:host(.lxFioriReskin) .options .option{padding:.375rem 1rem}:host(.lxFioriReskin) ul:not(:last-child){border-bottom:0}:host(.lxFioriReskin) .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane .overlayDropdown{width:100%;background:var(--sapList_Background);border:1px solid var(--sapGroup_ContentBorderColor);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px;background:var(--sapList_Background);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapList_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.defaultPadding .noOptionsAvailable{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .option,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .newEntryOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .onTheFlyOption,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList.narrowPadding .noOptionsAvailable{padding:.375rem .5rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{cursor:pointer;display:block;color:var(--sapList_TextColor);background:var(--sapList_Background);border-bottom:.0625rem solid transparent;box-sizing:border-box;position:relative}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:hover:not(.disabledItem){background-color:var(--sapList_Hover_Background)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted{background-color:var(--sapList_SelectionBackgroundColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:after,::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:after{content:\"\";position:absolute;inset:.125rem;border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);pointer-events:none}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:hover:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:hover:not(.disabledItem){background-color:var(--sapList_Hover_SelectionBackground)!important}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.selected:active:not(.disabledItem),::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.highlighted:active:not(.disabledItem){background-color:var(--sapList_Active_Background);color:var(--sapList_Active_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.initiallySelected{color:var(--sapButton_Emphasized_TextColor)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem{cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option.disabledItem:not(.description){opacity:var(--sapContent_DisabledOpacity)}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul{list-style:none;margin:0;padding:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .option{padding:.375rem 1rem}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .groupLabel{line-height:2rem;padding:.5rem 1rem 0;color:var(--sapList_GroupHeaderTextColor);background:var(--sapList_GroupHeaderBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:700;letter-spacing:normal;cursor:default}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList ul:not(:last-child){border-bottom:0}::ng-deep body.lxFioriReskin .cdk-overlay-pane ul.lxOptionGroupDropdownList .noResult{display:block;padding:.375rem 1rem;color:var(--sapList_TextColor)}\n"] }]
|
|
8354
8356
|
}], propDecorators: { optionGroups: [{
|
|
8355
8357
|
type: Input
|
|
8356
8358
|
}], newOptionLabel: [{
|
|
@@ -9733,7 +9735,7 @@ class SingleSelectComponent extends BaseSelectDirective {
|
|
|
9733
9735
|
multi: true,
|
|
9734
9736
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
9735
9737
|
}
|
|
9736
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n @if (!selection && selection !== 0 && !queryInput?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (!allowQuery || !queryInput?.value) {\n <div\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n }\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n @if ((selection || selection === 0) && allowClear && !disabled) {\n <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n }\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
9738
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n @if (!selection && selection !== 0 && !queryInput?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (!allowQuery || !queryInput?.value) {\n <div\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n }\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n @if ((selection || selection === 0) && allowClear && !disabled) {\n <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n }\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
9737
9739
|
}
|
|
9738
9740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
9739
9741
|
type: Component,
|
|
@@ -9743,7 +9745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
9743
9745
|
multi: true,
|
|
9744
9746
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
9745
9747
|
}
|
|
9746
|
-
], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n @if (!selection && selection !== 0 && !queryInput?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (!allowQuery || !queryInput?.value) {\n <div\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n }\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n @if ((selection || selection === 0) && allowClear && !disabled) {\n <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n }\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer{top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer{top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"] }]
|
|
9748
|
+
], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n [lxMarkInvalid]=\"markInvalid\"\n class=\"selectContainer {{ padding }}Padding\"\n [class.open]=\"dropdownOpen\"\n [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"markInvalid\"\n [class.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n @if (!selection && selection !== 0 && !queryInput?.value) {\n <div class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (!allowQuery || !queryInput?.value) {\n <div\n class=\"selection\"\n [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n (click)=\"$event.stopPropagation(); focus()\"\n >\n <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n </div>\n }\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.id]=\"inputId\"\n [attr.required]=\"required ? 'true' : null\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n (keyup.tab)=\"focusedViaTab()\"\n (keyup.shift.tab)=\"focusedViaTab()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n @if ((selection || selection === 0) && allowClear && !disabled) {\n <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n }\n <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n </div>\n </div>\n <div class=\"optionsContainer\" #optionsContainer>\n @if (dropdownOpen) {\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n }\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;z-index:1001}:host:where(:not(.lxFioriReskin)) .selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}:host:where(:not(.lxFioriReskin)) .selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}:host:where(:not(.lxFioriReskin)) .selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}:host:where(:not(.lxFioriReskin)) .selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}:host:where(:not(.lxFioriReskin)) .selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host:where(:not(.lxFioriReskin)) .selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}:host:where(:not(.lxFioriReskin)) .selectContainer.defaultPadding .selectionContainer{padding-left:12px}:host:where(:not(.lxFioriReskin)) .selectContainer.narrowPadding .selectionContainer{padding-left:4px}:host:where(:not(.lxFioriReskin)) .selectContainer .lightgrayColor{color:#8594ad}:host:where(:not(.lxFioriReskin)) .placeholder{color:#8594ad}.disabled :host:where(:not(.lxFioriReskin)) .iconContainer ui5-icon{color:#8594ad}:host:where(:not(.lxFioriReskin)) .optionsContainer{background:#fff}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer,:host:where(:not(.lxFioriReskin)) .defaultSize .queryInput,:host:where(:not(.lxFioriReskin)) .defaultSize .selection,:host:where(:not(.lxFioriReskin)) .defaultSize .iconContainer{height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .inputContainer{line-height:29px}:host:where(:not(.lxFioriReskin)) .defaultSize .selectionContainer{min-height:29px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer,:host:where(:not(.lxFioriReskin)) .smallSize .queryInput,:host:where(:not(.lxFioriReskin)) .smallSize .selection,:host:where(:not(.lxFioriReskin)) .smallSize .iconContainer{height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .inputContainer{line-height:22px}:host:where(:not(.lxFioriReskin)) .smallSize .selectionContainer{min-height:22px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer,:host:where(:not(.lxFioriReskin)) .largeSize .queryInput,:host:where(:not(.lxFioriReskin)) .largeSize .selection,:host:where(:not(.lxFioriReskin)) .largeSize .iconContainer{height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .inputContainer{line-height:40px}:host:where(:not(.lxFioriReskin)) .largeSize .selectionContainer{min-height:40px}:host(.lxFioriReskin){display:block;width:100%;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer{position:relative;box-sizing:border-box;padding:0;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer:hover:not(.disabled,.open){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .selectContainer:not(.open).focusedVisible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px}:host(.lxFioriReskin) .selectContainer.open{background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:-2px;z-index:1049}:host(.lxFioriReskin) .selectContainer.open.bottom .optionsContainer:has(.options){top:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.open.top .optionsContainer:has(.options){top:auto;bottom:100%;background:var(--sapList_Background);border-radius:var(--sapPopover_BorderCornerRadius);box-shadow:var(--sapContent_Shadow1);overflow:hidden}:host(.lxFioriReskin) .selectContainer.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default!important;pointer-events:none}:host(.lxFioriReskin) .selectContainer.grayBackground{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.grayBackground:hover:not(.disabled,.open){background-color:var(--sapField_ReadOnly_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.invalid{border:none!important;background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:hover:not(.disabled,.open){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .selectContainer.invalid:not(.open).focusedVisible,:host(.lxFioriReskin) .selectContainer.invalid.open{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:-2px;background-color:var(--sapField_Hover_Background);box-shadow:none}:host(.lxFioriReskin) .selectContainer.defaultPadding .selectionContainer{padding-left:.5rem}:host(.lxFioriReskin) .selectContainer.narrowPadding .selectionContainer{padding-left:.25rem}:host(.lxFioriReskin) .selectContainer .inputContainer,:host(.lxFioriReskin) .selectContainer .queryInput,:host(.lxFioriReskin) .selectContainer .selection{height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .inputContainer{line-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .selectContainer .selectionContainer{min-height:var(--sapElement_Compact_Height)}:host(.lxFioriReskin) .queryInput{color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .queryInput::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}:host(.lxFioriReskin) .iconContainer{height:calc(100% - .0625rem);align-items:stretch}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:100%;padding:.3125rem .5rem .25rem;margin:0;border-radius:var(--sapField_BorderCornerRadius);color:var(--sapField_TextColor);cursor:pointer;transition:background-color .1s,box-shadow .1s}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=slim-arrow-down]:hover{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .iconContainer>ui5-icon[name=decline]{width:1rem;height:1rem;align-self:center;color:var(--sapField_TextColor)}:host(.lxFioriReskin) .selectContainer.open .iconContainer ui5-icon[name=slim-arrow-down]{background:var(--sapField_Focus_Background);box-shadow:var(--sapField_Hover_Shadow);color:var(--sapButton_Active_TextColor)}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]{height:calc(100% - .125rem);padding:.3125rem .5rem .1875rem}:host(.lxFioriReskin) .selectContainer.invalid .iconContainer ui5-icon[name=slim-arrow-down]:hover{box-shadow:var(--sapContent_Negative_Shadow)}:host(.lxFioriReskin) .selectContainer.invalid.open .iconContainer ui5-icon[name=slim-arrow-down]{box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Selected_TextColor)}:host(.lxFioriReskin) .optionsContainer{padding:0;border-radius:0;background:var(--sapList_Background)}\n"] }]
|
|
9747
9749
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
|
|
9748
9750
|
type: Input
|
|
9749
9751
|
}], selectionBackground: [{
|