@leanix/components 0.4.887 → 0.4.889
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.
|
@@ -5173,20 +5173,20 @@ class CurrencyInputComponent {
|
|
|
5173
5173
|
useExisting: forwardRef(() => CurrencyInputComponent),
|
|
5174
5174
|
multi: true
|
|
5175
5175
|
}
|
|
5176
|
-
], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], ngImport: i0, template: "@if (mode === 'edit') {\n <div class=\"container input-group\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}\n"], dependencies: [{ kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5176
|
+
], viewQueries: [{ propertyName: "currencyInput", first: true, predicate: ["currencyInput"], descendants: true }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "@if (mode === 'edit') {\n <div class=\"container input-group\" [class.invalid]=\"markInvalid\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}:host(.lxFioriReskin) .input-group{border:none;border-radius:var(--sapField_BorderCornerRadius);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);box-shadow:var(--sapField_Shadow);overflow:hidden}:host(.lxFioriReskin) .form-control{height:var(--sapElement_Compact_Height);background:transparent;border:none;border-radius:0;box-shadow:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);padding:0 .5rem;line-height:var(--sapElement_Compact_Height);transition:none}:host(.lxFioriReskin) .input-group-addon{background:transparent;border:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);line-height:var(--sapElement_Compact_Height);padding:0 .5rem;vertical-align:middle}:host(.lxFioriReskin) .form-control[disabled]{background:transparent;opacity:1;cursor:default}:host(.lxFioriReskin):has(.form-control[disabled]) .input-group{opacity:var(--sapContent_DisabledOpacity);box-shadow:none;background:var(--sapField_ReadOnly_Background);background-image:none;pointer-events:none}:host(.lxFioriReskin) .input-group:hover:not(.invalid):not(:has(.form-control[disabled])):not(:focus-within){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .form-control:focus,:host(.lxFioriReskin) .form-control:focus-visible{outline:none;box-shadow:none;background:transparent}:host(.lxFioriReskin) .input-group:not(.invalid):focus-within{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:0;background-image:none;background-color:var(--sapField_Focus_Background);box-shadow:none}:host(.lxFioriReskin) .form-control[style*=border]{border:none!important}:host(.lxFioriReskin) .input-group.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:hover:not(:focus-within){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:focus-within{background-image:none;background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:0}:host(.lxFioriReskin) .form-control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic;opacity:1}:host(.lxFioriReskin)>span{font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapField_TextColor)}:host(.lxFioriReskin)>span.placeholder{color:var(--sapField_PlaceholderTextColor)}\n"], dependencies: [{ kind: "component", type: CurrencySymbolComponent, selector: "lx-currency-symbol", inputs: ["code"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5177
5177
|
}
|
|
5178
5178
|
__decorate([
|
|
5179
5179
|
Observe('data')
|
|
5180
5180
|
], CurrencyInputComponent.prototype, "data$", void 0);
|
|
5181
5181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CurrencyInputComponent, decorators: [{
|
|
5182
5182
|
type: Component,
|
|
5183
|
-
args: [{ selector: 'lx-currency-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
5183
|
+
args: [{ selector: 'lx-currency-input', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], providers: [
|
|
5184
5184
|
{
|
|
5185
5185
|
provide: NG_VALUE_ACCESSOR,
|
|
5186
5186
|
useExisting: forwardRef(() => CurrencyInputComponent),
|
|
5187
5187
|
multi: true
|
|
5188
5188
|
}
|
|
5189
|
-
], imports: [CurrencySymbolComponent, MarkInvalidDirective, FormsModule, AsyncPipe, DecimalPipe], template: "@if (mode === 'edit') {\n <div class=\"container input-group\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}\n"] }]
|
|
5189
|
+
], imports: [CurrencySymbolComponent, MarkInvalidDirective, FormsModule, AsyncPipe, DecimalPipe], template: "@if (mode === 'edit') {\n <div class=\"container input-group\" [class.invalid]=\"markInvalid\">\n @if (iconPosition === 'first') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n @if (!showCurrencyInput) {\n <input\n [attr.disabled]=\"disabled ? true : null\"\n type=\"text\"\n class=\"form-control currencyDisplayValue\"\n placeholder=\"{{ placeholder }}\"\n [lxMarkInvalid]=\"markInvalid\"\n [value]=\"dataValue$ | async | number: format\"\n (focus)=\"focusCurrencyInput()\"\n />\n }\n <input\n autocomplete=\"off\"\n [attr.disabled]=\"disabled ? true : null\"\n [class.hideInput]=\"!showCurrencyInput\"\n type=\"text\"\n inputmode=\"numeric\"\n class=\"form-control currencyInput\"\n name=\"inputAmount\"\n [attr.id]=\"inputId\"\n #currencyInput\n placeholder=\"{{ placeholder }}\"\n [ngModel]=\"dataValue$ | async\"\n (blur)=\"onBlur()\"\n (ngModelChange)=\"valueChanged($event)\"\n />\n @if (iconPosition === 'end') {\n <div class=\"labelContainer input-group-addon\">\n <lx-currency-symbol [code]=\"code\" />\n </div>\n }\n </div>\n} @else if (mode === 'view') {\n <span [class.placeholder]=\"(dataValue$ | async) === null && placeholder\">\n <!-- Not using Angular 2 currency pipe since a lot of currency symbols are missing: https://github.com/angular/angular/issues/6724 -->\n @if (iconPosition === 'first') {\n <lx-currency-symbol [code]=\"code\" />\n }\n {{ (dataValue$ | async | number: format) || placeholder }}\n @if (iconPosition === 'end') {\n <lx-currency-symbol [code]=\"code\" />\n }\n </span>\n}\n", styles: [".container{width:100%!important;padding:0}.labelContainer{width:5%!important;min-width:40px}input{width:100%}input.hideInput{display:none}.placeholder{color:#99a5bb}:host(.lxFioriReskin) .input-group{border:none;border-radius:var(--sapField_BorderCornerRadius);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);box-shadow:var(--sapField_Shadow);overflow:hidden}:host(.lxFioriReskin) .form-control{height:var(--sapElement_Compact_Height);background:transparent;border:none;border-radius:0;box-shadow:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);padding:0 .5rem;line-height:var(--sapElement_Compact_Height);transition:none}:host(.lxFioriReskin) .input-group-addon{background:transparent;border:none;color:var(--sapField_TextColor);font-size:var(--sapFontSize);font-family:var(--sapFontFamily);line-height:var(--sapElement_Compact_Height);padding:0 .5rem;vertical-align:middle}:host(.lxFioriReskin) .form-control[disabled]{background:transparent;opacity:1;cursor:default}:host(.lxFioriReskin):has(.form-control[disabled]) .input-group{opacity:var(--sapContent_DisabledOpacity);box-shadow:none;background:var(--sapField_ReadOnly_Background);background-image:none;pointer-events:none}:host(.lxFioriReskin) .input-group:hover:not(.invalid):not(:has(.form-control[disabled])):not(:focus-within){background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_Shadow)}:host(.lxFioriReskin) .form-control:focus,:host(.lxFioriReskin) .form-control:focus-visible{outline:none;box-shadow:none;background:transparent}:host(.lxFioriReskin) .input-group:not(.invalid):focus-within{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);outline-offset:0;background-image:none;background-color:var(--sapField_Focus_Background);box-shadow:none}:host(.lxFioriReskin) .form-control[style*=border]{border:none!important}:host(.lxFioriReskin) .input-group.invalid{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);box-shadow:var(--sapField_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:hover:not(:focus-within){background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_Hover_Background);box-shadow:var(--sapField_Hover_InvalidShadow)}:host(.lxFioriReskin) .input-group.invalid:focus-within{background-image:none;background-color:var(--sapField_Hover_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_InvalidColor);outline-offset:0}:host(.lxFioriReskin) .form-control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic;opacity:1}:host(.lxFioriReskin)>span{font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapField_TextColor)}:host(.lxFioriReskin)>span.placeholder{color:var(--sapField_PlaceholderTextColor)}\n"] }]
|
|
5190
5190
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
|
|
5191
5191
|
type: Input
|
|
5192
5192
|
}], decimalSeparator: [{
|
|
@@ -9721,7 +9721,7 @@ class SingleSelectComponent extends BaseSelectDirective {
|
|
|
9721
9721
|
multi: true,
|
|
9722
9722
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
9723
9723
|
}
|
|
9724
|
-
], 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, 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.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.
|
|
9724
|
+
], 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, 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.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}.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}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.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}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.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%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.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;color:#8594ad;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;color:#8594ad}.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;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.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" }] }); }
|
|
9725
9725
|
}
|
|
9726
9726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
9727
9727
|
type: Component,
|
|
@@ -9731,7 +9731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
9731
9731
|
multi: true,
|
|
9732
9732
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
9733
9733
|
}
|
|
9734
|
-
], 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.grayBackground]=\"selectionBackground === 'gray'\"\n [class.defaultSize]=\"size === 'default'\"\n [class.smallSize]=\"size === 'small'\"\n [class.
|
|
9734
|
+
], 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.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}.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}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.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}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.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%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.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;color:#8594ad;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;color:#8594ad}.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;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
|
|
9735
9735
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
|
|
9736
9736
|
type: Input
|
|
9737
9737
|
}], selectionBackground: [{
|