npm - @leanix/components - Versions diffs - 0.3.100 → 0.3.102 - Mend

@leanix/components 0.3.100 → 0.3.102

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.

Files changed (175) hide show

package/esm2020/lib/forms-ui/components/keyboard-select.directive.mjs CHANGED Viewed

@@ -98,9 +98,9 @@ export class KeyboardSelectDirective {
         this.destroyed$.next();
     }
 }
-KeyboardSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KeyboardSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-KeyboardSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: KeyboardSelectDirective, inputs: { keyboardSelectAction: "keyboardSelectAction" }, outputs: { selectedItemIndexChange: "selectedItemIndexChange" }, viewQueries: [{ propertyName: "keyboardSelectContainer", first: true, predicate: ["keyboardSelectContainer"], descendants: true, static: true }, { propertyName: "_items", predicate: SelectableItemDirective, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: KeyboardSelectDirective, decorators: [{
+KeyboardSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: KeyboardSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+KeyboardSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: KeyboardSelectDirective, inputs: { keyboardSelectAction: "keyboardSelectAction" }, outputs: { selectedItemIndexChange: "selectedItemIndexChange" }, viewQueries: [{ propertyName: "keyboardSelectContainer", first: true, predicate: ["keyboardSelectContainer"], descendants: true, static: true }, { propertyName: "_items", predicate: SelectableItemDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: KeyboardSelectDirective, decorators: [{
             type: Directive
         }], propDecorators: { keyboardSelectAction: [{
                 type: Input

package/esm2020/lib/forms-ui/components/multi-select/multi-select.component.mjs CHANGED Viewed

@@ -213,15 +213,15 @@ export class MultiSelectComponent extends BaseSelectDirective {
         this.isInputFocusedViaTab = true;
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MultiSelectComponent, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", dropdownWidthScale: "dropdownWidthScale" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: MultiSelectComponent, selector: "lx-multi-select", inputs: { markInvalid: "markInvalid", selection: "selection", size: "size", dropdownWidthScale: "dropdownWidthScale" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => MultiSelectComponent),
             multi: true
         }
-    ], 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.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && 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; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\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: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.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:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;top:0;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: i4.ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "focusViaTab", "blur"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
+    ], 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.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && 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; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\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: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.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:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;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:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: i4.ResponsiveInputComponent, selector: "lx-responsive-input", outputs: ["focus", "focusViaTab", "blur"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-multi-select', providers: [
                         {
@@ -229,7 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], 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.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && 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; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\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: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.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:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;top:0;bottom:0;left:0;right:0}\n"] }]
+                    ], 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.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && 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; isInputFocusedViaTab = false; blur.emit()\"\n      (focusViaTab)=\"focusedViaTab()\"\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: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:white}.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:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;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:white;z-index:1}lx-responsive-input{height:29px;padding-left:4px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { markInvalid: [{
                 type: Input
             }], selection: [{

package/esm2020/lib/forms-ui/components/option/option.component.mjs CHANGED Viewed

@@ -49,9 +49,9 @@ export class OptionComponent {
         this.highlight.emit(this.isHighlighted);
     }
 }
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionComponent, decorators: [{
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-option', template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.OptionGroupComponent, decorators: [{

package/esm2020/lib/forms-ui/components/option-group/option-group.component.mjs CHANGED Viewed

@@ -14,9 +14,9 @@ export class OptionGroupComponent {
         this.select.emit(value);
     }
 }
-OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupComponent, decorators: [{
+OptionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionGroupComponent, selector: "lx-option-group", inputs: { hasSelectedState: "hasSelectedState", label: "label" }, outputs: { select: "select" }, ngImport: i0, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-option-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n  <span *ngIf=\"label\" class=\"groupLabel\" [class.selectedState]=\"hasSelectedState\">{{ label }}</span>\n  <ul>\n    <ng-content></ng-content>\n  </ul>\n</li>\n", styles: [":host{display:block}:host:not(:first-child){border-top:solid 1px #eaedf1}ul{list-style:none;margin:0;padding-left:0}.groupLabel{display:block;line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase}.groupLabel.selectedState{padding-left:28px}\n"] }]
         }], propDecorators: { hasSelectedState: [{

package/esm2020/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs CHANGED Viewed

@@ -63,9 +63,9 @@ export class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         return option.value;
     }
 }
-OptionGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #keyboardSelectContainer\n  class=\"scrollingPanel lxThinScrollbar\"\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"containerScrolled.emit()\"\n>\n  <ul class=\"options\">\n    <li\n      *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOption()\"\n      (select)=\"onCreateNewOption()\"\n      [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option\"\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    <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n      <li>\n        <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n          <span>{{ optionGroup.label | uppercase }}</span>\n        </div>\n        <ul>\n          <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n            <li class=\"noResult\">\n              <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                <ng-container\n                  *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #defaultText>\n                <span>{{ NAME + '.noResults' | translate }}</span>\n              </ng-template>\n            </li>\n          </ng-container>\n          <ng-template #options>\n            <li\n              *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n              lxSelectableItem\n              [scrollInContainer]=\"keyboardSelectContainer\"\n              #item\n              class=\"option\"\n              (click)=\"selectOption(option)\"\n              (select)=\"selectOption(option)\"\n              [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n            >\n              <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #basicDropdownOption>\n                <lx-basic-dropdown-item\n                  [label]=\"option.label\"\n                  labelFontWeight=\"normal\"\n                  [highlightTerm]=\"highlightTerm\"\n                ></lx-basic-dropdown-item>\n              </ng-template>\n            </li>\n          </ng-template>\n        </ul>\n      </li>\n    </ng-container>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</div>\n", styles: [":host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i3.BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: i4.SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "component", type: i5.BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle"] }, { kind: "directive", type: i6.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
+OptionGroupDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+OptionGroupDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionGroupDropdownComponent, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #keyboardSelectContainer\n  class=\"scrollingPanel lxThinScrollbar\"\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"containerScrolled.emit()\"\n>\n  <ul class=\"options\">\n    <li\n      *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOption()\"\n      (select)=\"onCreateNewOption()\"\n      [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option\"\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    <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n      <li>\n        <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n          <span>{{ optionGroup.label | uppercase }}</span>\n        </div>\n        <ul>\n          <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n            <li class=\"noResult\">\n              <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                <ng-container\n                  *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #defaultText>\n                <span>{{ NAME + '.noResults' | translate }}</span>\n              </ng-template>\n            </li>\n          </ng-container>\n          <ng-template #options>\n            <li\n              *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n              lxSelectableItem\n              [scrollInContainer]=\"keyboardSelectContainer\"\n              #item\n              class=\"option\"\n              (click)=\"selectOption(option)\"\n              (select)=\"selectOption(option)\"\n              [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n            >\n              <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #basicDropdownOption>\n                <lx-basic-dropdown-item\n                  [label]=\"option.label\"\n                  labelFontWeight=\"normal\"\n                  [highlightTerm]=\"highlightTerm\"\n                ></lx-basic-dropdown-item>\n              </ng-template>\n            </li>\n          </ng-template>\n        </ul>\n      </li>\n    </ng-container>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</div>\n", styles: [":host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i3.BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "component", type: i4.SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "component", type: i5.BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle"] }, { kind: "directive", type: i6.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-option-group-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #keyboardSelectContainer\n  class=\"scrollingPanel lxThinScrollbar\"\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"containerScrolled.emit()\"\n>\n  <ul class=\"options\">\n    <li\n      *ngIf=\"showCreateNewOption && newOptionLabel && isNewItem\"\n      lxSelectableItem\n      [scrollInContainer]=\"keyboardSelectContainer\"\n      #item\n      (click)=\"onCreateNewOption()\"\n      (select)=\"onCreateNewOption()\"\n      [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n      class=\"option\"\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    <ng-container *ngFor=\"let optionGroup of optionGroups; let groupIndex = index; trackBy: trackByLabel\">\n      <li>\n        <div class=\"groupLabel\" *ngIf=\"optionGroup.label\">\n          <span>{{ optionGroup.label | uppercase }}</span>\n        </div>\n        <ul>\n          <ng-container *ngIf=\"showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0; else options\">\n            <li class=\"noResult\">\n              <ng-container *ngIf=\"noResultsOptionTemplateRef; else defaultText\">\n                <ng-container\n                  *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #defaultText>\n                <span>{{ NAME + '.noResults' | translate }}</span>\n              </ng-template>\n            </li>\n          </ng-container>\n          <ng-template #options>\n            <li\n              *ngFor=\"let option of optionGroup.options; let index = index; trackBy: trackByValue\"\n              lxSelectableItem\n              [scrollInContainer]=\"keyboardSelectContainer\"\n              #item\n              class=\"option\"\n              (click)=\"selectOption(option)\"\n              (select)=\"selectOption(option)\"\n              [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n            >\n              <ng-container *ngIf=\"optionTemplateRef; else basicDropdownOption\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #basicDropdownOption>\n                <lx-basic-dropdown-item\n                  [label]=\"option.label\"\n                  labelFontWeight=\"normal\"\n                  [highlightTerm]=\"highlightTerm\"\n                ></lx-basic-dropdown-item>\n              </ng-template>\n            </li>\n          </ng-template>\n        </ul>\n      </li>\n    </ng-container>\n    <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n  </ul>\n</div>\n", styles: [":host{display:block}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#99a5bb;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
         }], propDecorators: { optionGroups: [{

package/esm2020/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs CHANGED Viewed

@@ -138,9 +138,9 @@ export class OptionsDropdownComponent {
         return !option.disabled && (isToplevelOptionAndAllowed || isSecondlevelOptionAndAllowed);
     }
 }
-OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}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}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
+OptionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}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}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, 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: [":host{display:inline-block;position:relative}ul{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;text-align:left;list-style:none;margin:0;padding-left:0;z-index:20;white-space:nowrap}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}ul.left{right:0;padding-right:0}ul.showScrollbar{overflow-y:auto}.triggerContainer{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { align: [{

package/esm2020/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.mjs CHANGED Viewed

@@ -67,9 +67,9 @@ export class OptionsSubDropdownComponent {
         this.hidden = true;
     }
 }
-OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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 #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}: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{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
+OptionsSubDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionsSubDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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 #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}: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{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-options-sub-dropdown', template: "<div #spacingContainer class=\"spacingContainer\" [class.left]=\"align === 'left'\">\n  <ul\n    #subDropdown\n    class=\"sub-dropdown\"\n    lxAutoclose\n    [class.showScrollbar]=\"(maxHeight$ | async) !== 'none'\"\n    [style.max-height]=\"(maxHeight$ | async) ?? 'none'\"\n    (autoclose)=\"closeDropdown()\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:block}: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{position:relative;padding:0;background-color:#fff;border:solid 1px #e1e5eb;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;text-align:left;list-style:none}.sub-dropdown::-webkit-scrollbar{width:.5em;height:.5em;background-color:transparent}.sub-dropdown::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:6px}.sub-dropdown::-webkit-scrollbar-track-piece{background-color:transparent}.sub-dropdown.showScrollbar{overflow-y:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { trigger: [{

package/esm2020/lib/forms-ui/components/picker/picker-trigger.directive.mjs CHANGED Viewed

@@ -25,9 +25,9 @@ export class PickerTriggerDirective {
         this.destroyed$.next();
     }
 }
-PickerTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PickerTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: PickerTriggerDirective, selector: "[lxPickerTrigger]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerTriggerDirective, decorators: [{
+PickerTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PickerTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PickerTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: PickerTriggerDirective, selector: "[lxPickerTrigger]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PickerTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxPickerTrigger]'

package/esm2020/lib/forms-ui/components/picker/picker.component.mjs CHANGED Viewed

@@ -165,15 +165,15 @@ export class PickerComponent {
     propagateChange(_value) { }
     onTouched() { }
 }
-PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerComponent, deps: [{ token: i1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PickerComponent, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
+PickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PickerComponent, deps: [{ token: i1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PickerComponent, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             multi: true,
             useExisting: forwardRef(() => PickerComponent)
         }
     ], queries: [{ propertyName: "_trigger", first: true, predicate: PickerTriggerDirective, descendants: true }, { propertyName: "options", predicate: PickerOptionComponent }], ngImport: i0, template: "<div class=\"pickerContainer\">\n  <ng-content select=\"[lxPickerTrigger]\"></ng-content>\n  <ul\n    class=\"pickerOptions\"\n    *ngIf=\"open\"\n    lxAutoclose\n    (autoclose)=\"closePicker()\"\n    role=\"listbox\"\n    [style.margin-left]=\"leftOffset\"\n    [attr.aria-activedescendant]=\"activeDescendantsId\"\n    [attr.aria-label]=\"listBoxAriaLabel\"\n    [attr.aria-labelledby]=\"listBoxAriaLabelledBy\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</div>\n", styles: [":host{display:inline-block;width:100%;position:relative}.pickerOptions{position:absolute;background-color:#fff;border-radius:3px;box-shadow:0 8px 12px 2px #00000026;border:solid 1px #e1e5eb;padding:4px;z-index:20;width:185px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-picker', providers: [
                         {

package/esm2020/lib/forms-ui/components/picker-option/picker-option.component.mjs CHANGED Viewed

@@ -70,9 +70,9 @@ export class PickerOptionComponent {
         this.select.emit(this.value);
     }
 }
-PickerOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PickerOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PickerOptionComponent, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PickerOptionComponent, decorators: [{
+PickerOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PickerOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PickerOptionComponent, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<lx-icon *ngIf=\"isClearOption\" name=\"slash\" color=\"#d8d8d8\"></lx-icon>\n<ng-content *ngIf=\"!isClearOption\"></ng-content>\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { role: [{

package/esm2020/lib/forms-ui/components/pill-item/pill-item.component.mjs CHANGED Viewed

@@ -13,9 +13,9 @@ export class PillItemComponent {
         }
     }
 }
-PillItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PillItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PillItemComponent, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillItemComponent, decorators: [{
+PillItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PillItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PillItemComponent, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PillItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-pill-item', template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<span *ngIf=\"!disabled\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove far fa-times\"></span>\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #e1e5eb;background-color:#e1e5eb;display:inline-block;padding:4px}:host:hover{background-color:#cfd5df;border:solid 1px #cfd5df;color:#526179}:host-context(.selected){background-color:#c2c9d6}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;color:#526179;vertical-align:middle}.remove{vertical-align:middle;color:#8594ad;margin:0 4px}.remove:hover{cursor:pointer;color:#526179}\n"] }]
         }], propDecorators: { item: [{

package/esm2020/lib/forms-ui/components/pill-list/pill-list.component.mjs CHANGED Viewed

@@ -31,9 +31,9 @@ export class PillListComponent extends KeyboardSelectDirective {
         return (index, pill) => (prop ? pill[prop] : index);
     }
 }
-PillListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PillListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: PillListComponent, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  <li\n    *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (select)=\"removePillViaKeyboard(pill)\"\n    class=\"pill\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n      <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\n    </ng-template>\n  </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "directive", type: i3.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: PillListComponent, decorators: [{
+PillListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PillListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PillListComponent, selector: "lx-pill-list", inputs: { pills: "pills", labelKey: "labelKey", itemKey: "itemKey", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, queries: [{ propertyName: "pillTemplate", first: true, predicate: ["pillTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "contentItems", predicate: PillItemComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  <li\n    *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (select)=\"removePillViaKeyboard(pill)\"\n    class=\"pill\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n      <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\n    </ng-template>\n  </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "directive", type: i3.SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PillListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"pills\" #keyboardSelectContainer>\n  <li\n    *ngFor=\"let pill of pills; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (select)=\"removePillViaKeyboard(pill)\"\n    class=\"pill\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    <ng-container *ngIf=\"pillTemplate; else defaultTemplate\">\n      <ng-container *ngTemplateOutlet=\"pillTemplate; context: { $implicit: pill, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n      <lx-pill-item\n        [item]=\"pill\"\n        [label]=\"labelKey ? pill[labelKey] : pill\"\n        [disabled]=\"disabled\"\n        (remove)=\"removePill($event)\"\n      ></lx-pill-item>\n    </ng-template>\n  </li>\n</ul>\n", styles: [":host .pill{display:inline}:host.disabled{cursor:not-allowed}:host .pills{display:inline;margin:0!important;padding:0!important}\n"] }]
         }], propDecorators: { pills: [{

package/esm2020/lib/forms-ui/components/responsive-input/responsive-input.component.mjs CHANGED Viewed

@@ -67,15 +67,15 @@ export class ResponsiveInputComponent {
     }
     registerOnTouched(_fn) { }
 }
-ResponsiveInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ResponsiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ResponsiveInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
+ResponsiveInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ResponsiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ResponsiveInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: ResponsiveInputComponent, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             multi: true,
             useExisting: forwardRef(() => ResponsiveInputComponent)
         }
     ], viewQueries: [{ propertyName: "responsiveInput", first: true, predicate: ["responsiveInput"], descendants: true, static: true }, { propertyName: "inputWidth", first: true, predicate: ["inputWidth"], descendants: true, static: true }], ngImport: i0, template: "<span #inputWidth class=\"inputWidth\"></span>\n<input\n  type=\"text\"\n  class=\"responsiveInput\"\n  (focus)=\"focus.emit()\"\n  (blur)=\"blur.emit()\"\n  (keyup.tab)=\"focusViaTab.emit()\"\n  (keyup.shift.tab)=\"focusViaTab.emit()\"\n  [formControl]=\"inputControl\"\n  #responsiveInput\n  [style.width]=\"inputWidth$ | async\"\n/>\n", styles: [":host{display:inline-block}.inputWidth{display:none;height:0;overflow:hidden;position:absolute;white-space:pre;max-width:100%}.responsiveInput{border:0;padding:0;height:100%;max-width:100%}.responsiveInput::-ms-clear{display:none}.responsiveInput:focus{outline:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-responsive-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {