@leanix/components 0.2.92 → 0.2.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/leanix-components.umd.js +15 -48
- 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/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/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 +11 -42
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/models/base-select.directive.d.ts +1 -6
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('lodash/fp'), require('@ngx-translate/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('color'), require('date-fns'), require('lodash'), require('marked'), require('@angular/cdk/drag-drop'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-infinite-scroll'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/animations'), require('@ncstate/sat-popover'), require('@angular/cdk/coercion'), require('@angular/router')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@leanix/components', ['exports', '@angular/common', '@angular/core', '@angular/cdk/portal', '@angular/cdk/overlay', 'lodash/fp', '@ngx-translate/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', 'color', 'date-fns', 'lodash', 'marked', '@angular/cdk/drag-drop', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-infinite-scroll', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/animations', '@ncstate/sat-popover', '@angular/cdk/coercion', '@angular/router'], factory) :
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.leanix = global.leanix || {}, global.leanix.components = {}), global.ng.common, global.ng.core, global.ng.cdk.portal, global.ng.cdk.overlay, global.fp, global.i1$2, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.Color, global.dateFns, global._, global.marked, global.ng.cdk.dragDrop, global.ng.forms, global.i1$3, global.i3$1, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.animations, global.i1$5, global.ng.cdk.coercion, global.ng.router));
|
|
5
|
-
}(this, (function (exports, i2, i0, i3, i1, fp, i1$2, i1$1, i6, operators, Color, dateFns, _, marked, i3$3, i3$2, i1$3, i3$1, i2$1, i1$4, animations, i1$5, coercion, i3$4) { 'use strict';
|
|
5
|
+
})(this, (function (exports, i2, i0, i3, i1, fp, i1$2, i1$1, i6, operators, Color, dateFns, _, marked, i3$3, i3$2, i1$3, i3$1, i2$1, i1$4, animations, i1$5, coercion, i3$4) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -13,14 +13,12 @@
|
|
|
13
13
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
14
|
Object.defineProperty(n, k, d.get ? d : {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return e[k];
|
|
18
|
-
}
|
|
16
|
+
get: function () { return e[k]; }
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
|
-
n[
|
|
21
|
+
n["default"] = e;
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
@@ -1052,7 +1050,7 @@
|
|
|
1052
1050
|
return SpinnerComponent;
|
|
1053
1051
|
}());
|
|
1054
1052
|
SpinnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SpinnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1055
|
-
SpinnerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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:
|
|
1053
|
+
SpinnerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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)}}"] });
|
|
1056
1054
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SpinnerComponent, decorators: [{
|
|
1057
1055
|
type: i0.Component,
|
|
1058
1056
|
args: [{
|
|
@@ -3576,7 +3574,7 @@
|
|
|
3576
3574
|
return DragAndDropListComponent;
|
|
3577
3575
|
}());
|
|
3578
3576
|
DragAndDropListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3579
|
-
DragAndDropListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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
|
|
3577
|
+
DragAndDropListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$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__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe } });
|
|
3580
3578
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, decorators: [{
|
|
3581
3579
|
type: i0.Component,
|
|
3582
3580
|
args: [{
|
|
@@ -3794,8 +3792,6 @@
|
|
|
3794
3792
|
this.optionsKeyboardSelectAction$ = new i6.Subject();
|
|
3795
3793
|
this.virtualCursorPosition = 0;
|
|
3796
3794
|
this.inputWasFocused = false;
|
|
3797
|
-
this.clickedInside = false;
|
|
3798
|
-
this.mousedownInside = false;
|
|
3799
3795
|
this.queryControl = new i3$2.FormControl();
|
|
3800
3796
|
this.isInputFocused = false;
|
|
3801
3797
|
this.destroyed$ = new i6.Subject();
|
|
@@ -3840,29 +3836,6 @@
|
|
|
3840
3836
|
BaseSelectDirective.prototype.ngOnDestroy = function () {
|
|
3841
3837
|
this.destroyed$.next();
|
|
3842
3838
|
};
|
|
3843
|
-
BaseSelectDirective.prototype.clickInsideComponent = function () {
|
|
3844
|
-
this.clickedInside = true;
|
|
3845
|
-
};
|
|
3846
|
-
BaseSelectDirective.prototype.mouseDownInsideComponent = function () {
|
|
3847
|
-
this.mousedownInside = true;
|
|
3848
|
-
};
|
|
3849
|
-
BaseSelectDirective.prototype.mouseUpInsideComponent = function () {
|
|
3850
|
-
this.mousedownInside = false;
|
|
3851
|
-
};
|
|
3852
|
-
BaseSelectDirective.prototype.clickOutsideComponent = function () {
|
|
3853
|
-
if (!this.clickedInside && this.inputWasFocused) {
|
|
3854
|
-
if (!this.mousedownInside) {
|
|
3855
|
-
this.open.next(false);
|
|
3856
|
-
this.resetInput();
|
|
3857
|
-
this.query.emit('');
|
|
3858
|
-
}
|
|
3859
|
-
else {
|
|
3860
|
-
this.mousedownInside = false;
|
|
3861
|
-
}
|
|
3862
|
-
}
|
|
3863
|
-
this.inputWasFocused = true;
|
|
3864
|
-
this.clickedInside = false;
|
|
3865
|
-
};
|
|
3866
3839
|
/**
|
|
3867
3840
|
* @param toggle is true when the caret to the right in a select component was clicked
|
|
3868
3841
|
*/
|
|
@@ -3872,6 +3845,12 @@
|
|
|
3872
3845
|
}
|
|
3873
3846
|
this.focus();
|
|
3874
3847
|
};
|
|
3848
|
+
BaseSelectDirective.prototype.handleBackdropClick = function (event) {
|
|
3849
|
+
event.stopPropagation();
|
|
3850
|
+
this.open.next(false);
|
|
3851
|
+
this.resetInput();
|
|
3852
|
+
this.query.emit('');
|
|
3853
|
+
};
|
|
3875
3854
|
BaseSelectDirective.prototype.setOpenDirection = function () {
|
|
3876
3855
|
var dropdownRect = this.optionsContainer.nativeElement.getBoundingClientRect();
|
|
3877
3856
|
var spaceAtTheBottom = document.documentElement.clientHeight - dropdownRect.top - dropdownRect.height - this.dropdownMaxHeight;
|
|
@@ -3913,7 +3892,7 @@
|
|
|
3913
3892
|
return BaseSelectDirective;
|
|
3914
3893
|
}());
|
|
3915
3894
|
BaseSelectDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: BaseSelectDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
|
3916
|
-
BaseSelectDirective.ɵdir = i0__namespace.ɵɵ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" },
|
|
3895
|
+
BaseSelectDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
|
|
3917
3896
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: BaseSelectDirective, decorators: [{
|
|
3918
3897
|
type: i0.Directive
|
|
3919
3898
|
}], propDecorators: { placeholder: [{
|
|
@@ -3935,18 +3914,6 @@
|
|
|
3935
3914
|
}], optionsContainer: [{
|
|
3936
3915
|
type: i0.ViewChild,
|
|
3937
3916
|
args: ['optionsContainer', { static: true }]
|
|
3938
|
-
}], clickInsideComponent: [{
|
|
3939
|
-
type: i0.HostListener,
|
|
3940
|
-
args: ['click']
|
|
3941
|
-
}], mouseDownInsideComponent: [{
|
|
3942
|
-
type: i0.HostListener,
|
|
3943
|
-
args: ['mousedown']
|
|
3944
|
-
}], mouseUpInsideComponent: [{
|
|
3945
|
-
type: i0.HostListener,
|
|
3946
|
-
args: ['mouseup']
|
|
3947
|
-
}], clickOutsideComponent: [{
|
|
3948
|
-
type: i0.HostListener,
|
|
3949
|
-
args: ['document:click']
|
|
3950
3917
|
}] } });
|
|
3951
3918
|
|
|
3952
3919
|
var ResponsiveInputComponent = /** @class */ (function () {
|
|
@@ -4295,7 +4262,7 @@
|
|
|
4295
4262
|
useExisting: i0.forwardRef(function () { return MultiSelectComponent; }),
|
|
4296
4263
|
multi: true
|
|
4297
4264
|
}
|
|
4298
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: i0.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__namespace, 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:
|
|
4265
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: i0.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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe } });
|
|
4299
4266
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: MultiSelectComponent, decorators: [{
|
|
4300
4267
|
type: i0.Component,
|
|
4301
4268
|
args: [{
|
|
@@ -5459,7 +5426,7 @@
|
|
|
5459
5426
|
multi: true,
|
|
5460
5427
|
useExisting: i0.forwardRef(function () { return SingleSelectComponent; })
|
|
5461
5428
|
}
|
|
5462
|
-
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: i0.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__namespace, 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:
|
|
5429
|
+
], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: i0.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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$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__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i2__namespace.AsyncPipe } });
|
|
5463
5430
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: SingleSelectComponent, decorators: [{
|
|
5464
5431
|
type: i0.Component,
|
|
5465
5432
|
args: [{
|
|
@@ -6896,5 +6863,5 @@
|
|
|
6896
6863
|
|
|
6897
6864
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
6898
6865
|
|
|
6899
|
-
}))
|
|
6866
|
+
}));
|
|
6900
6867
|
//# sourceMappingURL=leanix-components.umd.js.map
|