@leanix/components 0.2.32 → 0.2.36

package/bundles/leanix-components.umd.js

@@ -2144,7 +2144,7 @@
         return BasicDropdownComponent;
     }(KeyboardSelectDirective));
     BasicDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: BasicDropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    BasicDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ul\n  class=\"options {{ padding }}Padding lxThinScrollbar\"\n  #keyboardSelectContainer\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"onScroll()\"\n>\n  <li\n    *ngIf=\"newOptionLabel && isNewItem\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onNewItemSelected()\"\n    (select)=\"onNewItemSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable onTheFlyOption\"\n  >\n    <span class=\"newEntryContent\">\n      {{ newOptionLabel }}\n    </span>\n    <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n  </li>\n  <li\n    *ngIf=\"showCreateNewOption\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onCreateNewOptionSelected()\"\n    (select)=\"onCreateNewOptionSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable newEntryOption\"\n  >\n    <span class=\"newEntryContent\">\n      <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n        <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n      </ng-container>\n      <ng-template #defaultNewOption>\n        <span>\n          {{ NAME + '.new' | translate }}\n        </span>\n      </ng-template>\n    </span>\n  </li>\n  <li\n    *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable noOptionsAvailable\"\n  >\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngIf=\"placeholder\"\n    class=\"option keyboardSelectable clearSelection\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"selectOption(null)\"\n    (select)=\"selectOption(null)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    {{ placeholder }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"selectOption(option)\"\n    (select)=\"selectOption(option)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    [class.initiallySelected]=\"index === initiallySelectedIndex\"\n    [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n  >\n    <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n      <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span>\n        {{ labelKey ? option[labelKey] : option }}\n      </span>\n    </ng-template>\n  </li>\n  <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i3__namespace.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2__namespace.AsyncPipe, "uppercase": i2__namespace.UpperCasePipe, "translate": i1__namespace$2.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    BasicDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ul\n  class=\"options {{ padding }}Padding lxThinScrollbar\"\n  #keyboardSelectContainer\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"onScroll()\"\n>\n  <li\n    *ngIf=\"newOptionLabel && isNewItem\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onNewItemSelected()\"\n    (select)=\"onNewItemSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable onTheFlyOption\"\n  >\n    <span class=\"newEntryContent\">\n      {{ newOptionLabel }}\n    </span>\n    <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n  </li>\n  <li\n    *ngIf=\"showCreateNewOption\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onCreateNewOptionSelected()\"\n    (select)=\"onCreateNewOptionSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable newEntryOption\"\n  >\n    <span class=\"newEntryContent\">\n      <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n        <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n      </ng-container>\n      <ng-template #defaultNewOption>\n        <span>\n          {{ NAME + '.new' | translate }}\n        </span>\n      </ng-template>\n    </span>\n  </li>\n  <li\n    *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable noOptionsAvailable\"\n  >\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngIf=\"placeholder\"\n    class=\"option keyboardSelectable clearSelection\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"selectOption(null)\"\n    (select)=\"selectOption(null)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    {{ placeholder }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"selectOption(option)\"\n    (select)=\"selectOption(option)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    [class.initiallySelected]=\"index === initiallySelectedIndex\"\n    [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n  >\n    <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n      <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span>\n        {{ labelKey ? option[labelKey] : option }}\n      </span>\n    </ng-template>\n  </li>\n  <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}:host(.noOptionPadding) .options .option{padding:0}"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i3__namespace.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2__namespace.AsyncPipe, "uppercase": i2__namespace.UpperCasePipe, "translate": i1__namespace$2.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: BasicDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3975,6 +3975,7 @@
             }), operators.distinctUntilChanged(), operators.takeUntil(this.destroyed$))
                 .subscribe(function (optionToBeHighlighted) {
                 _this.options.forEach(function (option) { return option.setHighlighted(optionToBeHighlighted === option); });
+                _this.changeDetection.markForCheck();
             });
             if (this.closeOnScroll) {
                 i6.fromEvent(window, 'scroll')
@@ -4068,7 +4069,8 @@
                 }] } });
 
     var OptionsSubDropdownComponent = /** @class */ (function () {
-        function OptionsSubDropdownComponent() {
+        function OptionsSubDropdownComponent(changeDetection) {
+            this.changeDetection = changeDetection;
             this.align = 'right';
             this.hidden = true;
             this.mouseInside$ = new i6.BehaviorSubject(false);
@@ -4093,6 +4095,7 @@
                 .pipe(operators.takeUntil(this.destroyed$))
                 .subscribe(function (show) {
                 _this.hidden = !show;
+                _this.changeDetection.markForCheck();
             });
         };
         OptionsSubDropdownComponent.prototype.showByKeyboard = function () {
@@ -4119,7 +4122,7 @@
         };
         return OptionsSubDropdownComponent;
     }());
-    OptionsSubDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsSubDropdownComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OptionsSubDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsSubDropdownComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     OptionsSubDropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ul class=\"sub-dropdown\" [class.left]=\"align === 'left'\" lxAutoclose (autoclose)=\"closeDropdown()\">\n  <ng-content></ng-content>\n</ul>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host.hidden{display:none}.sub-dropdown{position:absolute;left:calc(100% + 4px);transform:translateY(-32px);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}.sub-dropdown.left{left:auto;right:calc(100% + 4px)}"], directives: [{ type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: OptionsSubDropdownComponent, decorators: [{
                 type: i0.Component,
@@ -4128,7 +4131,7 @@
                         templateUrl: 'options-sub-dropdown.component.html',
                         styleUrls: ['options-sub-dropdown.component.styl']
                     }]
-            }], propDecorators: { trigger: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { trigger: [{
                     type: i0.Input
                 }], align: [{
                     type: i0.Input
@@ -5561,7 +5564,9 @@
         };
         ModalComponent.prototype.ngOnDestroy = function () {
             this.destroyed$.next();
-            this.overlayRef.dispose();
+            if (this.overlayRef) {
+                this.overlayRef.dispose();
+            }
         };
         ModalComponent.prototype.closeModal = function () {
             return __awaiter(this, void 0, void 0, function () {