@leanix/components 0.2.93 → 0.2.97
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +24 -54
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/lib/core-ui/components/spinner/spinner.component.js +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js +1 -1
- package/esm2015/lib/forms-ui/components/multi-select/multi-select.component.js +3 -3
- package/esm2015/lib/forms-ui/components/multi-select/multi-select.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/options-dropdown/options-dropdown.component.js +5 -2
- package/esm2015/lib/forms-ui/components/options-dropdown/options-dropdown.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.js +4 -4
- package/esm2015/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/single-select/single-select.component.js +3 -3
- package/esm2015/lib/forms-ui/components/single-select/single-select.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.js +1 -1
- package/esm2015/lib/forms-ui/models/base-select.directive.js +8 -39
- package/esm2015/lib/forms-ui/models/base-select.directive.js.map +1 -1
- package/fesm2015/leanix-components.js +20 -48
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/components/options-dropdown/options-dropdown.component.d.ts +2 -1
- package/lib/forms-ui/models/base-select.directive.d.ts +1 -6
- package/package.json +1 -1
@@ -671,7 +671,7 @@ class SpinnerComponent {
|
|
671
671
|
}
|
672
672
|
}
|
673
673
|
SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
674
|
-
SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SpinnerComponent, selector: "lx-spinner", inputs: { fadeBackground: "fadeBackground" }, host: { properties: { "class.fadeBackgroundFromInput": "this.fadeBackground" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"middle\">\n <div class=\"center\">\n <div class=\"spinner\">\n <div class=\"rect1\"></div>\n <div class=\"rect2\"></div>\n <div class=\"rect3\"></div>\n <div class=\"rect4\"></div>\n <div class=\"rect5\"></div>\n </div>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{font-size:2em;font-weight:300}:host(.fullSpace){position:absolute;right:0;left:0;top:0;bottom:0;z-index:1000}:host(.fullSpaceFixed){position:fixed;right:0;left:0;top:0;bottom:0;z-index:1000}.container{display:table;height:100%;width:100%}.middle{display:table-cell;vertical-align:middle}.center{text-align:center}:host(.fadeBackground),:host(.fadeBackgroundFromInput){background-color:
|
674
|
+
SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SpinnerComponent, selector: "lx-spinner", inputs: { fadeBackground: "fadeBackground" }, host: { properties: { "class.fadeBackgroundFromInput": "this.fadeBackground" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"middle\">\n <div class=\"center\">\n <div class=\"spinner\">\n <div class=\"rect1\"></div>\n <div class=\"rect2\"></div>\n <div class=\"rect3\"></div>\n <div class=\"rect4\"></div>\n <div class=\"rect5\"></div>\n </div>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{font-size:2em;font-weight:300}:host(.fullSpace){position:absolute;right:0;left:0;top:0;bottom:0;z-index:1000}:host(.fullSpaceFixed){position:fixed;right:0;left:0;top:0;bottom:0;z-index:1000}.container{display:table;height:100%;width:100%}.middle{display:table-cell;vertical-align:middle}.center{text-align:center}:host(.fadeBackground),:host(.fadeBackgroundFromInput){background-color:hsla(0,0%,100%,.6)}.spinner{margin:0 auto;width:55px;height:25px;text-align:center;font-size:10px}.spinner>div{height:100%;width:6px;background-color:#1666ee;display:inline-block;margin:0 1px;-webkit-animation:sk-stretchdelay 1.2s ease-in-out infinite;animation:sk-stretchdelay 1.2s ease-in-out infinite}.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.spinner .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}"] });
|
675
675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SpinnerComponent, decorators: [{
|
676
676
|
type: Component,
|
677
677
|
args: [{
|
@@ -3056,7 +3056,7 @@ class DragAndDropListComponent {
|
|
3056
3056
|
}
|
3057
3057
|
}
|
3058
3058
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
3059
|
-
DragAndDropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", items: "items", itemIdProperty: "itemIdProperty" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngIf=\"items; else contentChildList\">\n <li\n *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"item[itemIdProperty!]\"\n >\n <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n </li>\n </ng-container>\n <ng-template #contentChildList>\n <li\n *ngFor=\"let itemComponent of items$ | async\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n >\n <lx-drag-and-drop-list-item\n class=\"dragAndDropItem\"\n [item]=\"itemComponent.item\"\n [draggable]=\"itemComponent.draggable\"\n [actions]=\"itemComponent.actions\"\n (action)=\"emitContentChildAction($event)\"\n ></lx-drag-and-drop-list-item>\n </li>\n </ng-template>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}@-webkit-keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@-webkit-keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@-webkit-keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}:host{display:block}.list{list-style-type:none;width:100%;border:1px solid #99a5bb;display:block;border-radius:3px;padding:0;color:#526179;background:#fff}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border-bottom:1px solid #99a5bb}.item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:0}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px
|
3059
|
+
DragAndDropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", items: "items", itemIdProperty: "itemIdProperty" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngIf=\"items; else contentChildList\">\n <li\n *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"item[itemIdProperty!]\"\n >\n <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n </li>\n </ng-container>\n <ng-template #contentChildList>\n <li\n *ngFor=\"let itemComponent of items$ | async\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n >\n <lx-drag-and-drop-list-item\n class=\"dragAndDropItem\"\n [item]=\"itemComponent.item\"\n [draggable]=\"itemComponent.draggable\"\n [actions]=\"itemComponent.actions\"\n (action)=\"emitContentChildAction($event)\"\n ></lx-drag-and-drop-list-item>\n </li>\n </ng-template>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}@-webkit-keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@-webkit-keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@-webkit-keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}:host{display:block}.list{list-style-type:none;width:100%;border:1px solid #99a5bb;display:block;border-radius:3px;padding:0;color:#526179;background:#fff}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border-bottom:1px solid #99a5bb}.item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:0}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px hsla(0,0%,45%,.3)}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating,.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}"], components: [{ type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
|
3060
3060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
3061
3061
|
type: Component,
|
3062
3062
|
args: [{
|
@@ -3263,8 +3263,6 @@ class BaseSelectDirective {
|
|
3263
3263
|
this.optionsKeyboardSelectAction$ = new Subject();
|
3264
3264
|
this.virtualCursorPosition = 0;
|
3265
3265
|
this.inputWasFocused = false;
|
3266
|
-
this.clickedInside = false;
|
3267
|
-
this.mousedownInside = false;
|
3268
3266
|
this.queryControl = new FormControl();
|
3269
3267
|
this.isInputFocused = false;
|
3270
3268
|
this.destroyed$ = new Subject();
|
@@ -3308,29 +3306,6 @@ class BaseSelectDirective {
|
|
3308
3306
|
ngOnDestroy() {
|
3309
3307
|
this.destroyed$.next();
|
3310
3308
|
}
|
3311
|
-
clickInsideComponent() {
|
3312
|
-
this.clickedInside = true;
|
3313
|
-
}
|
3314
|
-
mouseDownInsideComponent() {
|
3315
|
-
this.mousedownInside = true;
|
3316
|
-
}
|
3317
|
-
mouseUpInsideComponent() {
|
3318
|
-
this.mousedownInside = false;
|
3319
|
-
}
|
3320
|
-
clickOutsideComponent() {
|
3321
|
-
if (!this.clickedInside && this.inputWasFocused) {
|
3322
|
-
if (!this.mousedownInside) {
|
3323
|
-
this.open.next(false);
|
3324
|
-
this.resetInput();
|
3325
|
-
this.query.emit('');
|
3326
|
-
}
|
3327
|
-
else {
|
3328
|
-
this.mousedownInside = false;
|
3329
|
-
}
|
3330
|
-
}
|
3331
|
-
this.inputWasFocused = true;
|
3332
|
-
this.clickedInside = false;
|
3333
|
-
}
|
3334
3309
|
/**
|
3335
3310
|
* @param toggle is true when the caret to the right in a select component was clicked
|
3336
3311
|
*/
|
@@ -3340,6 +3315,12 @@ class BaseSelectDirective {
|
|
3340
3315
|
}
|
3341
3316
|
this.focus();
|
3342
3317
|
}
|
3318
|
+
handleBackdropClick(event) {
|
3319
|
+
event.stopPropagation();
|
3320
|
+
this.open.next(false);
|
3321
|
+
this.resetInput();
|
3322
|
+
this.query.emit('');
|
3323
|
+
}
|
3343
3324
|
setOpenDirection() {
|
3344
3325
|
const dropdownRect = this.optionsContainer.nativeElement.getBoundingClientRect();
|
3345
3326
|
const spaceAtTheBottom = document.documentElement.clientHeight - dropdownRect.top - dropdownRect.height - this.dropdownMaxHeight;
|
@@ -3380,7 +3361,7 @@ class BaseSelectDirective {
|
|
3380
3361
|
}
|
3381
3362
|
}
|
3382
3363
|
BaseSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: BaseSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
3383
|
-
BaseSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: BaseSelectDirective, inputs: { placeholder: "placeholder", disabled: "disabled", focusOnInit: "focusOnInit", dropdownMaxHeight: "dropdownMaxHeight", allowQuery: "allowQuery" }, outputs: { query: "query", close: "close", open: "open" },
|
3364
|
+
BaseSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: BaseSelectDirective, inputs: { placeholder: "placeholder", disabled: "disabled", focusOnInit: "focusOnInit", dropdownMaxHeight: "dropdownMaxHeight", allowQuery: "allowQuery" }, outputs: { query: "query", close: "close", open: "open" }, viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
|
3384
3365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: BaseSelectDirective, decorators: [{
|
3385
3366
|
type: Directive
|
3386
3367
|
}], propDecorators: { placeholder: [{
|
@@ -3402,18 +3383,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
3402
3383
|
}], optionsContainer: [{
|
3403
3384
|
type: ViewChild,
|
3404
3385
|
args: ['optionsContainer', { static: true }]
|
3405
|
-
}], clickInsideComponent: [{
|
3406
|
-
type: HostListener,
|
3407
|
-
args: ['click']
|
3408
|
-
}], mouseDownInsideComponent: [{
|
3409
|
-
type: HostListener,
|
3410
|
-
args: ['mousedown']
|
3411
|
-
}], mouseUpInsideComponent: [{
|
3412
|
-
type: HostListener,
|
3413
|
-
args: ['mouseup']
|
3414
|
-
}], clickOutsideComponent: [{
|
3415
|
-
type: HostListener,
|
3416
|
-
args: ['document:click']
|
3417
3386
|
}] } });
|
3418
3387
|
|
3419
3388
|
class ResponsiveInputComponent {
|
@@ -3746,7 +3715,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
3746
3715
|
useExisting: forwardRef(() => MultiSelectComponent),
|
3747
3716
|
multi: true
|
3748
3717
|
}
|
3749
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<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.hasSelection]=\"selection?.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div class=\"selection\">\n <ng-content select=\".pills\"></ng-content>\n </div>\n <lx-responsive-input\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [formControl]=\"queryControl\"\n (keydown.enter)=\"$event.preventDefault()\"\n ></lx-responsive-input>\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.selectContainer:not(.open).focused{outline:0;border:1px solid #59f}.selectContainer.open.bottom .optionsContainer{box-shadow:0 6px 6px 0 rgba(33,37,41,.2)}.selectContainer.open.bottom .optionsContainer,.selectContainer.open.top .optionsContainer{border-bottom:1px solid #e1e5eb;border-left:1px solid #e1e5eb;border-right:1px solid #e1e5eb}.selectContainer.open.top .optionsContainer{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2)}.selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px rgba(0,0,0,.07);border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:12px;right:25px;top:0;bottom:0;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}"], components: [{ type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "blur"] }], directives: [{ type:
|
3718
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\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.hasSelection]=\"selection?.length > 0\"\n [class.smallSize]=\"size === 'small'\"\n [class.disabled]=\"disabled\"\n (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectedChoicesContainer\">\n <div *ngIf=\"(selection?.length === 0 || !selection) && !queryControl?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div class=\"selection\">\n <ng-content select=\".pills\"></ng-content>\n </div>\n <lx-responsive-input\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [formControl]=\"queryControl\"\n (keydown.enter)=\"$event.preventDefault()\"\n ></lx-responsive-input>\n <i #toggle [hidden]=\"disabled\" class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.selectContainer:not(.open).focused{outline:0;border:1px solid #59f}.selectContainer.open.bottom .optionsContainer{box-shadow:0 6px 6px 0 rgba(33,37,41,.2)}.selectContainer.open.bottom .optionsContainer,.selectContainer.open.top .optionsContainer{border-bottom:1px solid #e1e5eb;border-left:1px solid #e1e5eb;border-right:1px solid #e1e5eb}.selectContainer.open.top .optionsContainer{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2)}.selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px rgba(0,0,0,.07);border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1052;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;left:12px;right:25px;top:0;bottom:0;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;padding-left:4px}.selectContainer .selectedChoicesContainer>.fa-angle-down{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1051;position:fixed;top:0;bottom:0;left:0;right:0}"], components: [{ type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "blur"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
|
3750
3719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
3751
3720
|
type: Component,
|
3752
3721
|
args: [{
|
@@ -3886,6 +3855,7 @@ class OptionsDropdownComponent {
|
|
3886
3855
|
this.closeOnScroll = false;
|
3887
3856
|
this.disabled = false;
|
3888
3857
|
this.maxHeight = 'none';
|
3858
|
+
this.closeOnSelect = true;
|
3889
3859
|
this.highlightedOptionIndex$ = new BehaviorSubject(0);
|
3890
3860
|
this._open = false;
|
3891
3861
|
this.isSubdropdownExpanded = false;
|
@@ -3939,7 +3909,7 @@ class OptionsDropdownComponent {
|
|
3939
3909
|
});
|
3940
3910
|
/** Combined stream of all of the child options' select outputs. */
|
3941
3911
|
this._options.changes
|
3942
|
-
.pipe(startWith(this._options), switchMap(() => merge(...this._options.map((option) => option.select), ...this._options.map((option) => option.selectedClick))), delay(0), takeUntil(this.destroyed$))
|
3912
|
+
.pipe(startWith(this._options), filter(() => this.closeOnSelect), switchMap(() => merge(...this._options.map((option) => option.select), ...this._options.map((option) => option.selectedClick))), delay(0), takeUntil(this.destroyed$))
|
3943
3913
|
.subscribe((_value) => {
|
3944
3914
|
this.closeDropdown();
|
3945
3915
|
});
|
@@ -4011,7 +3981,7 @@ class OptionsDropdownComponent {
|
|
4011
3981
|
}
|
4012
3982
|
}
|
4013
3983
|
OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
4014
|
-
OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n *ngIf=\"open\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n>\n <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}:host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
3984
|
+
OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div (click)=\"open = !open\" class=\"triggerContainer\">\n <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</div>\n<ul\n *ngIf=\"open\"\n [class.left]=\"align === 'left'\"\n [class.showScrollbar]=\"maxHeight !== 'none'\"\n [style.max-height]=\"maxHeight\"\n lxAutoclose\n (autoclose)=\"closeDropdown()\"\n>\n <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}ul::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}ul::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}ul::-webkit-scrollbar-track-piece{background-color:transparent}:host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);border:1px solid #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
4015
3985
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
|
4016
3986
|
type: Component,
|
4017
3987
|
args: [{
|
@@ -4028,6 +3998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
4028
3998
|
type: Input
|
4029
3999
|
}], maxHeight: [{
|
4030
4000
|
type: Input
|
4001
|
+
}], closeOnSelect: [{
|
4002
|
+
type: Input
|
4031
4003
|
}], trigger: [{
|
4032
4004
|
type: ContentChild,
|
4033
4005
|
args: [KeyboardActionSourceDirective]
|
@@ -4070,14 +4042,14 @@ class OptionsSubDropdownComponent {
|
|
4070
4042
|
option.isSuboption = true;
|
4071
4043
|
return option;
|
4072
4044
|
})));
|
4073
|
-
return combineLatest(this.trigger.highlight.asObservable(), optionChange$).pipe(delay(0), // Need tick delay to get option highlighted and filter it out after
|
4045
|
+
return combineLatest([this.trigger.highlight.asObservable(), optionChange$]).pipe(delay(0), // Need tick delay to get option highlighted and filter it out after
|
4074
4046
|
map(([isHighlighted, options]) => isHighlighted || options.some((option) => option.isHighlighted)));
|
4075
4047
|
}
|
4076
4048
|
showByMouse() {
|
4077
4049
|
const mouseEnterTrigger$ = fromEvent(this.trigger.elementRef.nativeElement, 'mouseenter');
|
4078
4050
|
const mouseLeaveTrigger$ = fromEvent(this.trigger.elementRef.nativeElement, 'mouseleave');
|
4079
4051
|
const showOnEnterMouse$ = mouseEnterTrigger$.pipe(map(() => true));
|
4080
|
-
const showOnEnterSubmenu$ = mouseEnterTrigger$.pipe(switchMap(() => mouseLeaveTrigger
|
4052
|
+
const showOnEnterSubmenu$ = mouseEnterTrigger$.pipe(switchMap(() => mouseLeaveTrigger$), switchMap(() => this.mouseInside$));
|
4081
4053
|
return merge(showOnEnterMouse$, showOnEnterSubmenu$);
|
4082
4054
|
}
|
4083
4055
|
closeDropdown() {
|
@@ -4085,7 +4057,7 @@ class OptionsSubDropdownComponent {
|
|
4085
4057
|
}
|
4086
4058
|
}
|
4087
4059
|
OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
4088
|
-
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsSubDropdownComponent, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<
|
4060
|
+
OptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: OptionsSubDropdownComponent, selector: "lx-options-sub-dropdown", inputs: { trigger: "trigger", align: "align" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.hidden": "this.hidden" } }, queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n <ul class=\"sub-dropdown\" lxAutoclose (autoclose)=\"closeDropdown()\">\n <ng-content></ng-content>\n </ul>\n</div>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host.hidden{display:none}.spacingContainer{position:absolute;left:100%;transform:translateY(-32px);padding:0 0 0 4px}.spacingContainer.left{left:auto;right:100%;padding:0 4px 0 0}.sub-dropdown{padding:0;background-color:#fff;border:1px solid #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px rgba(0,0,0,.15);text-align:left;list-style:none}"], directives: [{ type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }] });
|
4089
4061
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
|
4090
4062
|
type: Component,
|
4091
4063
|
args: [{
|
@@ -4813,7 +4785,7 @@ SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
4813
4785
|
multi: true,
|
4814
4786
|
useExisting: forwardRef(() => SingleSelectComponent)
|
4815
4787
|
}
|
4816
|
-
], 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: "<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 (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\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\"></ng-container>\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.selectContainer:not(.open).focused{outline:0;border:1px solid #59f}.selectContainer.open.bottom .optionsContainer{box-shadow:0 6px 6px 0 rgba(33,37,41,.2)}.selectContainer.open.bottom .optionsContainer,.selectContainer.open.top .optionsContainer{border-bottom:1px solid #e1e5eb;border-left:1px solid #e1e5eb;border-right:1px solid #e1e5eb}.selectContainer.open.top .optionsContainer{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2)}:host>>>.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 rgba(0,0,0,.07);border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.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%;-webkit-appearance:none;-moz-appearance:none;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 .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .iconContainer,.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .iconContainer,.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .iconContainer,.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .iconContainer,.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}"], directives: [{ type:
|
4788
|
+
], 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: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\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 (click)=\"handleClick($event.target === toggle)\"\n>\n <div class=\"selectionContainer\">\n <div class=\"inputContainer\">\n <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n {{ placeholder }}\n </div>\n <div\n *ngIf=\"!allowQuery || !queryInput?.value\"\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\"></ng-container>\n </div>\n <input\n #queryInput\n class=\"queryInput\"\n type=\"text\"\n [class.isHidden]=\"!allowQuery\"\n (keydown.enter)=\"$event.preventDefault()\"\n (focus)=\"isInputFocused = true\"\n (blur)=\"isInputFocused = false; blur.emit()\"\n [tabIndex]=\"disabled ? -1 : tabIndex\"\n [formControl]=\"queryControl\"\n [readOnly]=\"!allowQuery\"\n />\n </div>\n <div class=\"iconContainer\">\n <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n </div>\n </div>\n <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n <ng-container *ngIf=\"dropdownOpen\">\n <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #selectedOption>\n <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.selectContainer:not(.open).focused{outline:0;border:1px solid #59f}.selectContainer.open.bottom .optionsContainer{box-shadow:0 6px 6px 0 rgba(33,37,41,.2)}.selectContainer.open.bottom .optionsContainer,.selectContainer.open.top .optionsContainer{border-bottom:1px solid #e1e5eb;border-left:1px solid #e1e5eb;border-right:1px solid #e1e5eb}.selectContainer.open.top .optionsContainer{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2)}:host>>>.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 rgba(0,0,0,.07);border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1052;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px 0 rgba(33,37,41,.2);border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px 0 rgba(33,37,41,.2);border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.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%;-webkit-appearance:none;-moz-appearance:none;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 .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1051}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .iconContainer,.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .iconContainer,.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .iconContainer,.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .iconContainer,.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i2.AsyncPipe } });
|
4817
4789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
4818
4790
|
type: Component,
|
4819
4791
|
args: [{
|
@@ -4960,7 +4932,7 @@ class SortingDropdownComponent {
|
|
4960
4932
|
}
|
4961
4933
|
}
|
4962
4934
|
SortingDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
4963
|
-
SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n >\n </lx-sorting-dropdown-trigger>\n <lx-option-group (select)=\"applySortingMode($event)\">\n <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n {{ getSortLabel(option?.key) | translate }}\n </lx-option>\n </lx-option-group>\n <lx-option-group (select)=\"applySortingDirection($event)\">\n <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n </lx-option>\n </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], components: [{ type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$2.TranslatePipe } });
|
4935
|
+
SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n <lx-sorting-dropdown-trigger\n lxKeyboardActionSource\n [label]=\"NAME + '.sortBy' | translate\"\n [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n >\n </lx-sorting-dropdown-trigger>\n <lx-option-group (select)=\"applySortingMode($event)\">\n <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n {{ getSortLabel(option?.key) | translate }}\n </lx-option>\n </lx-option-group>\n <lx-option-group (select)=\"applySortingDirection($event)\">\n <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n </lx-option>\n </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], components: [{ type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$2.TranslatePipe } });
|
4964
4936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: SortingDropdownComponent, decorators: [{
|
4965
4937
|
type: Component,
|
4966
4938
|
args: [{
|