@leanix/components 0.4.800 → 0.4.811
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.
|
@@ -3828,6 +3828,9 @@ class OptionComponent {
|
|
|
3828
3828
|
* Cannot have selectedState when Option has dropdown
|
|
3829
3829
|
*/
|
|
3830
3830
|
this.hasSelectedState = true;
|
|
3831
|
+
/**
|
|
3832
|
+
* @deprecated Use the default `'check'` value. The `'circle'` option is deprecated and will be removed in a future release.
|
|
3833
|
+
*/
|
|
3831
3834
|
this.selectIcon = 'check';
|
|
3832
3835
|
this.select = new EventEmitter();
|
|
3833
3836
|
this.highlight = new EventEmitter();
|
|
@@ -3856,11 +3859,11 @@ class OptionComponent {
|
|
|
3856
3859
|
this.mouseEnter.emit();
|
|
3857
3860
|
}
|
|
3858
3861
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3859
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction", mouseEnter: "mouseEnter" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (hasSelectedState) {\n @switch (selectIcon) {\n @case ('check') {\n @if (selected) {\n <
|
|
3862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction", mouseEnter: "mouseEnter" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (hasSelectedState) {\n @switch (selectIcon) {\n @case ('check') {\n @if (selected) {\n <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n }\n }\n @case ('circle') {\n <ui5-icon name=\"circle-task\" />\n @if (selected) {\n <ui5-icon name=\"circle-task-2\" />\n }\n }\n }\n }\n <ng-content />\n @if (hasSubdropdown) {\n <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
|
|
3860
3863
|
}
|
|
3861
3864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OptionComponent, decorators: [{
|
|
3862
3865
|
type: Component,
|
|
3863
|
-
args: [{ selector: 'lx-option', template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (hasSelectedState) {\n @switch (selectIcon) {\n @case ('check') {\n @if (selected) {\n <
|
|
3866
|
+
args: [{ selector: 'lx-option', imports: [IconComponent$1], template: "<li\n #option\n class=\"option\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.id]=\"optionId\"\n [attr.aria-selected]=\"selected\"\n [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n [class.highlighted]=\"isHighlighted\"\n [class.selected]=\"selected\"\n [class.disabled]=\"disabled\"\n [class.hasSubdropdown]=\"hasSubdropdown\"\n (keydown)=\"handleKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (hasSelectedState) {\n @switch (selectIcon) {\n @case ('check') {\n @if (selected) {\n <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n }\n }\n @case ('circle') {\n <ui5-icon name=\"circle-task\" />\n @if (selected) {\n <ui5-icon name=\"circle-task-2\" />\n }\n }\n }\n }\n <ng-content />\n @if (hasSubdropdown) {\n <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"] }]
|
|
3864
3867
|
}], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
|
|
3865
3868
|
type: Optional
|
|
3866
3869
|
}, {
|
|
@@ -8065,11 +8068,11 @@ class PillItemComponent {
|
|
|
8065
8068
|
}
|
|
8066
8069
|
}
|
|
8067
8070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8068
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n <
|
|
8071
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
|
|
8069
8072
|
}
|
|
8070
8073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PillItemComponent, decorators: [{
|
|
8071
8074
|
type: Component,
|
|
8072
|
-
args: [{ selector: 'lx-pill-item', template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n <
|
|
8075
|
+
args: [{ selector: 'lx-pill-item', imports: [IconComponent$1], template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }]
|
|
8073
8076
|
}], propDecorators: { item: [{
|
|
8074
8077
|
type: Input
|
|
8075
8078
|
}], label: [{
|
|
@@ -8422,7 +8425,7 @@ class SingleSelectComponent extends BaseSelectDirective {
|
|
|
8422
8425
|
multi: true,
|
|
8423
8426
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
8424
8427
|
}
|
|
8425
|
-
], 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: "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.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target ===
|
|
8428
|
+
], 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.select2Size]=\"size === 'select2'\"\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}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.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$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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
|
|
8426
8429
|
}
|
|
8427
8430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
8428
8431
|
type: Component,
|
|
@@ -8432,7 +8435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
8432
8435
|
multi: true,
|
|
8433
8436
|
useExisting: forwardRef(() => SingleSelectComponent)
|
|
8434
8437
|
}
|
|
8435
|
-
], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe], 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.select2Size]=\"size === 'select2'\"\n [class.largeSize]=\"size === 'large'\"\n [style.cursor]=\"cursorStyle\"\n [class.focused]=\"isInputFocused\"\n [class.focusedVisible]=\"isInputFocusedViaTab\"\n (click)=\"handleClick($event.target ===
|
|
8438
|
+
], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent$1], 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.select2Size]=\"size === 'select2'\"\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}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
|
|
8436
8439
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
|
|
8437
8440
|
type: Input
|
|
8438
8441
|
}], selectionBackground: [{
|
|
@@ -8473,6 +8476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
8473
8476
|
type: Input
|
|
8474
8477
|
}], markInvalid: [{
|
|
8475
8478
|
type: Input
|
|
8479
|
+
}], toggleElement: [{
|
|
8480
|
+
type: ViewChild,
|
|
8481
|
+
args: ['toggle', { read: ElementRef }]
|
|
8476
8482
|
}], queryInput: [{
|
|
8477
8483
|
type: ViewChild,
|
|
8478
8484
|
args: ['queryInput', { static: true }]
|
|
@@ -9148,8 +9154,11 @@ class LxFormsModule {
|
|
|
9148
9154
|
DateInputComponent,
|
|
9149
9155
|
FormErrorComponent,
|
|
9150
9156
|
MultiSelectComponent,
|
|
9157
|
+
OptionComponent,
|
|
9151
9158
|
OptionGroupDropdownComponent,
|
|
9152
9159
|
PickerOptionComponent,
|
|
9160
|
+
PillListComponent,
|
|
9161
|
+
PillItemComponent,
|
|
9153
9162
|
ResponsiveInputComponent,
|
|
9154
9163
|
SingleSelectComponent,
|
|
9155
9164
|
SortingDropdownComponent,
|