@leanix/components 0.4.109 → 0.4.111

package/esm2022/lib/forms-ui/components/option-group-dropdown/option-group-dropdown.component.mjs

@@ -70,10 +70,10 @@ export class OptionGroupDropdownComponent extends KeyboardSelectDirective {
     onPositionChange(event) {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <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</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"overlayPositioning; else dropdown\">\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container [ngTemplateOutlet]=\"dropdown\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #dropdown>\n  <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</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-option-group-dropdown', providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         NgIf,

package/esm2022/lib/forms-ui/components/options-dropdown/options-dropdown.component.mjs

@@ -223,10 +223,10 @@ export class OptionsDropdownComponent {
         const newEvent = new KeyboardEvent(event.type, newEventOptions);
         this.lxButton?.dispatchEvent(newEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollStrategyOptions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: OptionsDropdownComponent, isStandalone: true, selector: "lx-options-dropdown", inputs: { align: "align", closeOnScroll: "closeOnScroll", disabled: "disabled", maxHeight: "maxHeight", closeOnSelect: "closeOnSelect", overlayPositioning: "overlayPositioning" }, queries: [{ propertyName: "trigger", first: true, predicate: KeyboardActionSourceDirective, descendants: true }, { propertyName: "_options", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-options-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, AutocloseDirective], template: "<ng-container *ngIf=\"!overlayPositioning\">\n  <div class=\"triggerContainer\" (click)=\"open = !open\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"overlayPositioning\">\n  <div class=\"overlayOrigin triggerContainer\" (click)=\"open = !open\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\">\n    <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n    [cdkConnectedOverlayOpen]=\"open\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  >\n    <div class=\"overlayDropdown\">\n      <ng-container [ngTemplateOutlet]=\"dropdownTemplate\"></ng-container>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #triggerTemplate>\n  <ng-content select=\"[lxKeyboardActionSource]\"></ng-content>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n  <ul\n    *ngIf=\"open\"\n    [id]=\"listboxId\"\n    [class.left]=\"align === 'left'\"\n    [class.showScrollbar]=\"maxHeight !== 'none'\"\n    [style.max-height]=\"maxHeight\"\n    lxAutoclose\n    (autoclose)=\"closeDropdown()\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.aria-owns]=\"optionIds.join(' ')\"\n  >\n    <ng-content></ng-content>\n  </ul>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.overlayDropdown ul{position:static}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: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollStrategyOptions }, { type: i0.Renderer2 }], propDecorators: { align: [{

package/esm2022/lib/forms-ui/components/options-sub-dropdown/options-sub-dropdown.component.mjs

@@ -66,10 +66,10 @@ export class OptionsSubDropdownComponent {
     closeDropdown() {
         this.hidden = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: OptionsSubDropdownComponent, isStandalone: true, 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: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsSubDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: OptionsSubDropdownComponent, isStandalone: true, 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: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: OptionsSubDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-options-sub-dropdown', standalone: true, imports: [AutocloseDirective, AsyncPipe], 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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{

package/esm2022/lib/forms-ui/components/picker/picker-trigger.directive.mjs

@@ -34,10 +34,10 @@ export class PickerTriggerDirective {
     ngOnDestroy() {
         this.destroyed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: PickerTriggerDirective, isStandalone: true, selector: "[lxPickerTrigger]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: PickerTriggerDirective, isStandalone: true, selector: "[lxPickerTrigger]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxPickerTrigger]',

package/esm2022/lib/forms-ui/components/picker/picker.component.mjs

@@ -164,8 +164,8 @@ export class PickerComponent {
     }
     propagateChange(_value) { }
     onTouched() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerComponent, deps: [{ token: i1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerComponent, deps: [{ token: i1.Directionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PickerComponent, isStandalone: true, selector: "lx-picker", inputs: { listBoxAriaLabel: "listBoxAriaLabel", listBoxAriaLabelledBy: "listBoxAriaLabelledBy", openDirection: "openDirection" }, host: { listeners: { "document:keydown": "manageKeyboardEvents($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -173,7 +173,7 @@ export class 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutocloseDirective, selector: "[lxAutoclose]", inputs: ["autocloseGroup"], outputs: ["autoclose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-picker', providers: [
                         {

package/esm2022/lib/forms-ui/components/picker-option/picker-option.component.mjs

@@ -69,10 +69,10 @@ export class PickerOptionComponent {
     selectOption() {
         this.select.emit(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PickerOptionComponent, isStandalone: true, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PickerOptionComponent, isStandalone: true, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PickerOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, IconComponent], 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: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { role: [{

package/esm2022/lib/forms-ui/components/pill-item/pill-item.component.mjs

@@ -12,10 +12,10 @@ export class PillItemComponent {
             this.remove.emit({ item, isMouse });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n<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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PillItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-pill-item', standalone: true, imports: [NgIf], 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/esm2022/lib/forms-ui/components/pill-list/pill-list.component.mjs

@@ -29,10 +29,10 @@ export class PillListComponent extends KeyboardSelectDirective {
     trackByProp(prop) {
         return (index, pill) => (prop ? pill[prop] : index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: PillListComponent, isStandalone: true, 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PillListComponent, isStandalone: true, 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillItemComponent, selector: "lx-pill-item", inputs: ["item", "label", "disabled"], outputs: ["remove"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: PillListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PillListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-pill-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, SelectableItemDirective, NgIf, NgTemplateOutlet, PillItemComponent, AsyncPipe], 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/esm2022/lib/forms-ui/components/responsive-input/responsive-input.component.mjs

@@ -66,8 +66,8 @@ export class ResponsiveInputComponent {
         this.propagateChange = fn;
     }
     registerOnTouched(_fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ResponsiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: ResponsiveInputComponent, isStandalone: true, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ResponsiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ResponsiveInputComponent, isStandalone: true, selector: "lx-responsive-input", outputs: { focus: "focus", focusViaTab: "focusViaTab", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -75,7 +75,7 @@ export class 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ResponsiveInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-responsive-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {

package/esm2022/lib/forms-ui/components/select-list/select-list.component.mjs

@@ -135,10 +135,10 @@ export class SelectListComponent extends BaseSelectDirective {
     determineHighlightIndex(options, selection) {
         return options.findIndex((option) => isEqual(selection, option));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SelectListComponent, isStandalone: true, selector: "lx-select-list", inputs: { searchPlaceholder: "searchPlaceholder", options: "options", selection: "selection" }, outputs: { selectionChange: "selectionChange", onChooseItem: "onChooseItem" }, queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: ExpandedDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-select-list', standalone: true, imports: [FormsModule, ReactiveFormsModule, NgTemplateOutlet], template: "<div class=\"selectContainer focused\">\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div class=\"searchWrapper\">\n        <input\n          #searchInput\n          id=\"searchInput\"\n          class=\"searchInput\"\n          type=\"text\"\n          autocomplete=\"off\"\n          (keyup)=\"searchKeyChanged($event)\"\n          [formControl]=\"queryControl\"\n          [placeholder]=\"searchPlaceholder\"\n        />\n        <label for=\"searchInput\" class=\"fa fa-search\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;z-index:1049;background:#fff;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;box-shadow:none;font-size:14px}.selectContainer .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0;border:none;border-top:1px solid #e1e5eb;box-shadow:none;margin-top:1px}.selectContainer .inputContainer,.selectContainer .searchInput,.selectContainer .selection,.selectContainer .iconContainer{height:29px}.selectContainer .inputContainer{line-height:29px}.selectContainer .selectionContainer{min-height:29px}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.searchInput{width:100%;appearance:none;padding-left:27px;border:0;background:transparent;position:relative;cursor:inherit}.searchInput::-ms-clear{display:none}.searchInput:focus{outline:0}.iconContainer{display:flex;align-items:center;text-align:center}.fa-search{position:absolute;left:3px;top:calc(50% - .5em);color:#526179}.searchWrapper{position:relative}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}\n"] }]
         }], propDecorators: { searchPlaceholder: [{

package/esm2022/lib/forms-ui/components/single-select/single-select.component.mjs

@@ -220,8 +220,8 @@ export class SingleSelectComponent extends BaseSelectDirective {
             ? options.findIndex((option) => isEqual(get(itemKey, selection), get(itemKey, option)) || isEqual(selection, get(itemKey, option)))
             : options.findIndex((option) => isEqual(selection, option));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.2", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", dropdownWidthScale: "dropdownWidthScale", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SingleSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: SingleSelectComponent, isStandalone: true, selector: "lx-single-select", inputs: { selection: "selection", selectionBackground: "selectionBackground", size: "size", dropdownWidthScale: "dropdownWidthScale", padding: "padding", inputId: "inputId", required: ["required", "required", booleanAttribute], allowClear: "allowClear", tabIndex: "tabIndex", markInvalid: "markInvalid" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -229,7 +229,7 @@ export class SingleSelectComponent extends BaseSelectDirective {
             }
         ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && selection !== 0 && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"(selection || selection === 0) && allowClear && !disabled\" class=\"far fa-times\" (click)=\"removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit;color:#8594ad}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SingleSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-single-select', providers: [
                         {

package/esm2022/lib/forms-ui/components/slider-toggle/slider-toggle.component.mjs

@@ -18,10 +18,10 @@ export class SliderToggleComponent {
         // without a delay the checkbox will not be focused again
         setTimeout(() => checkbox.focus(), 150);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SliderToggleComponent, isStandalone: true, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SliderToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SliderToggleComponent, isStandalone: true, selector: "lx-slider-toggle", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SliderToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SliderToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-slider-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  class=\"wrapper\"\n  [class.withLabel]=\"label\"\n  [class.withLabelBehind]=\"label && !labelInFront\"\n  [class.disabled]=\"disabled\"\n  [attr.id]=\"id\"\n  [class.small]=\"size === 'small'\"\n>\n  <span *ngIf=\"label\" class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n  <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n    <input\n      #inputRef\n      type=\"checkbox\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      (click)=\"inputRef.blur()\"\n      (change)=\"onToggle()\"\n      (keydown.space)=\"focus(inputRef)\"\n      (keydown.enter)=\"onToggle()\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:inline-block}.wrapper.withLabel{display:block}.wrapper.withLabel .checkbox{float:right;margin-top:1px}.wrapper.withLabelBehind .checkbox{float:left;margin-right:2px}.disabled{opacity:.5}.disabled .slider{cursor:default}.checkbox{position:relative;display:inline-block;margin:0}.labelText{color:#2a303d}.labelText.off{color:#526179}input{opacity:0;width:0;height:0;margin:0;padding:0}.small.checkbox{width:22px;height:14px}.small.wrapper:not(.withLabel){height:14px}.small .labelText{font-size:12px}.small .slider{border-radius:7px}.small .slider:before{height:12px;width:12px;left:1px;bottom:1px}.small input:checked+.slider:before{transform:translate(8px)}input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}.slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}.slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}input:checked+.slider{background-color:#33cc58}\n"] }]
         }], propDecorators: { value: [{

package/esm2022/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.mjs

@@ -44,10 +44,10 @@ export class SortingDropdownComponent {
     getSortLabel(key) {
         return key ? `sorting.${key}.label` : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SortingDropdownComponent, isStandalone: true, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions", showDirectionOptions: "showDirectionOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group *ngIf=\"showDirectionOptions\" (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting.order\">\n      {{ 'sorting.' + currentSorting.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning"] }, { kind: "component", type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SortingDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-sorting-dropdown', standalone: true, imports: [
                         NgIf,

package/esm2022/lib/forms-ui/components/sorting-dropdown-trigger/sorting-dropdown-trigger.component.mjs

@@ -5,10 +5,10 @@ export class SortingDropdownTriggerComponent {
     constructor() {
         this.disabled = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SortingDropdownTriggerComponent, isStandalone: true, selector: "lx-sorting-dropdown-trigger", inputs: { label: "label", currentSortingLabel: "currentSortingLabel", disabled: "disabled" }, ngImport: i0, template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SortingDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SortingDropdownTriggerComponent, isStandalone: true, selector: "lx-sorting-dropdown-trigger", inputs: { label: "label", currentSortingLabel: "currentSortingLabel", disabled: "disabled" }, ngImport: i0, template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SortingDropdownTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SortingDropdownTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-sorting-dropdown-trigger', standalone: true, imports: [ButtonComponent], template: "<button lx-button mode=\"link\" [disabled]=\"disabled\">\n  {{ label ? label + ': ' : '' }}{{ currentSortingLabel }}<i class=\"far fa-angle-down lx-margin-left\"></i>\n</button>\n" }]
         }], propDecorators: { label: [{

package/esm2022/lib/forms-ui/directives/contenteditable.directive.mjs

@@ -94,10 +94,10 @@ export class ContenteditableDirective {
     sanitize(content) {
         return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: ContenteditableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ContenteditableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxContenteditableModel]',

package/esm2022/lib/forms-ui/directives/form-error.directive.mjs

@@ -72,10 +72,10 @@ export class FormErrorDirective {
             this.subscritpion.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1.NgControl, optional: true, self: true }, { token: i2.FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1.NgControl, optional: true, self: true }, { token: i2.FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxFormError]',

package/esm2022/lib/forms-ui/directives/form-submit.directive.mjs

@@ -15,10 +15,10 @@ export class FormSubmitDirective {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormSubmitDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: FormSubmitDirective, isStandalone: true, selector: "form", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormSubmitDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: FormSubmitDirective, isStandalone: true, selector: "form", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: FormSubmitDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FormSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/esm2022/lib/forms-ui/directives/keyboard-action-source.directive.mjs

@@ -49,10 +49,10 @@ export class KeyboardActionSourceDirective {
     nativeElement() {
         return this.element?.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: KeyboardActionSourceDirective, isStandalone: true, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KeyboardActionSourceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: KeyboardActionSourceDirective, isStandalone: true, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KeyboardActionSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'keyboardActionSource',

package/esm2022/lib/forms-ui/directives/mark-invalid.directive.mjs

@@ -21,13 +21,13 @@ export class MarkInvalidDirective {
     ngOnDestroy() {
         this.destroyed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MarkInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: MarkInvalidDirective, isStandalone: true, selector: "[lxMarkInvalid]", inputs: { lxMarkInvalid: "lxMarkInvalid" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MarkInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: MarkInvalidDirective, isStandalone: true, selector: "[lxMarkInvalid]", inputs: { lxMarkInvalid: "lxMarkInvalid" }, ngImport: i0 }); }
 }
 __decorate([
     Observe('lxMarkInvalid')
 ], MarkInvalidDirective.prototype, "lxMarkInvalid$", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: MarkInvalidDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MarkInvalidDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxMarkInvalid]',

package/esm2022/lib/forms-ui/directives/select-dropdown.directive.mjs

@@ -19,10 +19,10 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class SelectDropdownDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectDropdownDirective, isStandalone: true, selector: "[lxSelectDropdown]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: SelectDropdownDirective, isStandalone: true, selector: "[lxSelectDropdown]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectDropdownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxSelectDropdown]',

package/esm2022/lib/forms-ui/directives/selectable-item.directive.mjs

@@ -15,10 +15,10 @@ export class SelectableItemDirective {
             scrollTop(this.scrollInContainer, this.element.nativeElement);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectableItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.2", type: SelectableItemDirective, isStandalone: true, selector: "[lxSelectableItem]", inputs: { scrollInContainer: "scrollInContainer", lxSelectableItem: "lxSelectableItem" }, outputs: { select: "select" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectableItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: SelectableItemDirective, isStandalone: true, selector: "[lxSelectableItem]", inputs: { scrollInContainer: "scrollInContainer", lxSelectableItem: "lxSelectableItem" }, outputs: { select: "select" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SelectableItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectableItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lxSelectableItem]',