@leanix/components 0.4.666 → 0.4.668

package/fesm2022/leanix-components.mjs

@@ -5739,6 +5739,8 @@ class DateInputComponent {
         this.autoFocus = false;
         /** If true, the date input field will be marked as invalid. */
         this.markInvalid = false;
+        /** Also emit on invalid date string */
+        this.alwaysEmitDateString = false;
         /** Triggered whenever the datepicker is closed */
         this.closeDateInput = new EventEmitter();
         /** Triggered whenever the date changes */
@@ -5896,11 +5898,18 @@ class DateInputComponent {
             }
             : null;
     }
+    /** @internal */
+    onRawValueChange(event) {
+        if (this.alwaysEmitDateString) {
+            const input = event.target;
+            this.dateStringChange.emit(input.value);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DATE_FORMATS }, { token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid" }, outputs: { closeDateInput: "closeDateInput", dateStringChange: "dateStringChange", dateChange: "dateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateInputComponent, isStandalone: true, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", cdk: "cdk", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled", autoFocus: "autoFocus", markInvalid: "markInvalid", alwaysEmitDateString: "alwaysEmitDateString" }, outputs: { closeDateInput: "closeDateInput", dateStringChange: "dateStringChange", dateChange: "dateChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-        ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (cdk) {\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n    ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n    below the dateInput element -->\n    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          [lxMarkInvalid]=\"markInvalid\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          />\n        </div>\n      </div>\n    </ng-template>\n  </span>\n} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [lxMarkInvalid]=\"markInvalid\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\n            <datepicker\n              class=\"popup\"\n              (selectionDone)=\"onSelectionDone($event)\"\n              [ngModel]=\"date\"\n              [datepickerMode]=\"datepickerMode\"\n              [initDate]=\"initDate\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              [minMode]=\"minMode\"\n              [maxMode]=\"maxMode\"\n              [showWeeks]=\"showWeeks\"\n              [formatDay]=\"formatDay\"\n              [formatMonth]=\"formatMonth\"\n              [formatYear]=\"formatYear\"\n              [formatDayHeader]=\"formatDayHeader\"\n              [formatDayTitle]=\"formatDayTitle\"\n              [formatMonthTitle]=\"formatMonthTitle\"\n              [startingDay]=\"startingDay\"\n              [yearRange]=\"yearRange\"\n              [onlyCurrentMonth]=\"onlyCurrentMonth\"\n              [shortcutPropagation]=\"shortcutPropagation\"\n              [customClass]=\"customClass\"\n              [dateDisabled]=\"dateDisabled\"\n            />\n          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { 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: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }] }); }
+        ], queries: [{ propertyName: "dateStringTemplate", first: true, predicate: ["dateStringTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (cdk) {\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n    ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n    below the dateInput element -->\n    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          [lxMarkInvalid]=\"markInvalid\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n          (change)=\"onRawValueChange($event)\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          />\n        </div>\n      </div>\n    </ng-template>\n  </span>\n} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [lxMarkInvalid]=\"markInvalid\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n          (change)=\"onRawValueChange($event)\"\n        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\n            <datepicker\n              class=\"popup\"\n              (selectionDone)=\"onSelectionDone($event)\"\n              [ngModel]=\"date\"\n              [datepickerMode]=\"datepickerMode\"\n              [initDate]=\"initDate\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              [minMode]=\"minMode\"\n              [maxMode]=\"maxMode\"\n              [showWeeks]=\"showWeeks\"\n              [formatDay]=\"formatDay\"\n              [formatMonth]=\"formatMonth\"\n              [formatYear]=\"formatYear\"\n              [formatDayHeader]=\"formatDayHeader\"\n              [formatDayTitle]=\"formatDayTitle\"\n              [formatMonthTitle]=\"formatMonthTitle\"\n              [startingDay]=\"startingDay\"\n              [yearRange]=\"yearRange\"\n              [onlyCurrentMonth]=\"onlyCurrentMonth\"\n              [shortcutPropagation]=\"shortcutPropagation\"\n              [customClass]=\"customClass\"\n              [dateDisabled]=\"dateDisabled\"\n            />\n          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { 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: "component", type: DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "initDate", "minDate", "maxDate", "minMode", "maxMode", "showWeeks", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled", "activeDate"], outputs: ["selectionDone", "activeDateChange"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }] }); }
 }
 __decorate([
     Observe('initDateString')
@@ -5920,7 +5929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         CustomDatePipe,
                         MarkInvalidDirective,
                         ButtonComponent
-                    ], template: "@if (cdk) {\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n    ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n    below the dateInput element -->\n    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          [lxMarkInvalid]=\"markInvalid\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          />\n        </div>\n      </div>\n    </ng-template>\n  </span>\n} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [lxMarkInvalid]=\"markInvalid\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\n            <datepicker\n              class=\"popup\"\n              (selectionDone)=\"onSelectionDone($event)\"\n              [ngModel]=\"date\"\n              [datepickerMode]=\"datepickerMode\"\n              [initDate]=\"initDate\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              [minMode]=\"minMode\"\n              [maxMode]=\"maxMode\"\n              [showWeeks]=\"showWeeks\"\n              [formatDay]=\"formatDay\"\n              [formatMonth]=\"formatMonth\"\n              [formatYear]=\"formatYear\"\n              [formatDayHeader]=\"formatDayHeader\"\n              [formatDayTitle]=\"formatDayTitle\"\n              [formatMonthTitle]=\"formatMonthTitle\"\n              [startingDay]=\"startingDay\"\n              [yearRange]=\"yearRange\"\n              [onlyCurrentMonth]=\"onlyCurrentMonth\"\n              [shortcutPropagation]=\"shortcutPropagation\"\n              [customClass]=\"customClass\"\n              [dateDisabled]=\"dateDisabled\"\n            />\n          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"] }]
+                    ], template: "@if (cdk) {\n  <span\n    class=\"wrapper\"\n    [class.forLink]=\"renderingStyle === 'LINK'\"\n    [class.has-error]=\"hasError\"\n    cdkOverlayOrigin\n    #origin=\"cdkOverlayOrigin\"\n  >\n    <!-- TODO: The dateInput and datePicker code ist duplicated for cdk and withoutCdK use to solve a placing problem of the\n    ngx-bootstrap datepicker component. Writing it in a ng-container led to an unexpected anchoring behavior of the datePicker NOT directly\n    below the dateInput element -->\n    @switch (renderingStyle) {\n      @case ('BUTTON') {\n        <button lx-button (click)=\"showPopup()\" lxAutoclose (autoclose)=\"hidePopup()\" size=\"large\" endIcon=\"fa-angle-down\">\n          @if (dateStringTemplate) {\n            <ng-container *ngTemplateOutlet=\"dateStringTemplate\" />\n          } @else {\n            {{ dateString ?? placeholder }}\n          }\n        </button>\n      }\n      @case ('INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          [lxMarkInvalid]=\"markInvalid\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n          (change)=\"onRawValueChange($event)\"\n        />\n      }\n      @case ('LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n    }\n    <ng-template\n      #cdkDatepicker\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOpen]=\"showDatepicker\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n      (backdropClick)=\"hidePopup()\"\n    >\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          <datepicker\n            class=\"popup\"\n            (selectionDone)=\"onSelectionDone($event)\"\n            [ngModel]=\"date\"\n            [datepickerMode]=\"datepickerMode\"\n            [initDate]=\"initDate\"\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            [minMode]=\"minMode\"\n            [maxMode]=\"maxMode\"\n            [showWeeks]=\"showWeeks\"\n            [formatDay]=\"formatDay\"\n            [formatMonth]=\"formatMonth\"\n            [formatYear]=\"formatYear\"\n            [formatDayHeader]=\"formatDayHeader\"\n            [formatDayTitle]=\"formatDayTitle\"\n            [formatMonthTitle]=\"formatMonthTitle\"\n            [startingDay]=\"startingDay\"\n            [yearRange]=\"yearRange\"\n            [onlyCurrentMonth]=\"onlyCurrentMonth\"\n            [shortcutPropagation]=\"shortcutPropagation\"\n            [customClass]=\"customClass\"\n            [dateDisabled]=\"dateDisabled\"\n          />\n        </div>\n      </div>\n    </ng-template>\n  </span>\n} @else {\n  <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n    @if (showDatepicker) {\n      <div class=\"backdrop\" (click)=\"hidePopup()\"></div>\n    }\n    <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n      @if (renderingStyle === 'INPUT') {\n        <input\n          #input\n          class=\"form-control dateControl\"\n          autocomplete=\"off\"\n          aria-autocomplete=\"list\"\n          placeholder=\"{{ placeholder }}\"\n          [id]=\"inputId\"\n          [lxAutofocus]=\"autoFocus\"\n          [lxMarkInvalid]=\"markInvalid\"\n          [(ngModel)]=\"dateString\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onDateStringChange($event)\"\n          (focus)=\"showPopup()\"\n          (blur)=\"onBlur()\"\n          (keydown.enter)=\"hidePopup()\"\n          (keydown.escape)=\"hidePopup()\"\n          (keydown.tab)=\"hidePopup()\"\n          (keydown.shift.tab)=\"hidePopup()\"\n          [class.text-danger]=\"hasError\"\n          (change)=\"onRawValueChange($event)\"\n        />\n      } @else if (renderingStyle === 'LINK') {\n        <a class=\"dateControl\" (click)=\"togglePopup()\">{{ date | lxDate: dateFormat }}</a>\n      }\n      <div class=\"datepickerContainer\">\n        <div class=\"calendar\">\n          @if (showDatepicker) {\n            <datepicker\n              class=\"popup\"\n              (selectionDone)=\"onSelectionDone($event)\"\n              [ngModel]=\"date\"\n              [datepickerMode]=\"datepickerMode\"\n              [initDate]=\"initDate\"\n              [minDate]=\"minDate\"\n              [maxDate]=\"maxDate\"\n              [minMode]=\"minMode\"\n              [maxMode]=\"maxMode\"\n              [showWeeks]=\"showWeeks\"\n              [formatDay]=\"formatDay\"\n              [formatMonth]=\"formatMonth\"\n              [formatYear]=\"formatYear\"\n              [formatDayHeader]=\"formatDayHeader\"\n              [formatDayTitle]=\"formatDayTitle\"\n              [formatMonthTitle]=\"formatMonthTitle\"\n              [startingDay]=\"startingDay\"\n              [yearRange]=\"yearRange\"\n              [onlyCurrentMonth]=\"onlyCurrentMonth\"\n              [shortcutPropagation]=\"shortcutPropagation\"\n              [customClass]=\"customClass\"\n              [dateDisabled]=\"dateDisabled\"\n            />\n          }\n        </div>\n      </div>\n    </span>\n  </div>\n}\n", styles: [".backdrop{background-color:transparent}.datepickerContainer{z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}.legacy .backdrop{position:fixed;z-index:2;inset:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}.datepickerContainer datepicker{display:block;border-radius:4px;background-color:#fff;box-shadow:0 2px 8px #22364940;width:290px;z-index:700;padding:0 16px 16px;margin-top:4px}datepicker ::ng-deep .well{margin-bottom:0;border:none!important;background:none;box-shadow:none;padding:12px 0 0}datepicker ::ng-deep .btn{border:none!important;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-left{font-size:0}datepicker ::ng-deep .btn.pull-left:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f104\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep .btn.pull-right{font-size:0}datepicker ::ng-deep .btn.pull-right:after{color:#0070f2;font-family:\"Font Awesome 5 Pro\";font-weight:var(--lxFontBlack, 900);content:\"\\f105\";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:var(--lxFontSize, 14px)}datepicker ::ng-deep table tr:first-child th{padding-bottom:12px}datepicker ::ng-deep table tr:first-child th .btn{color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default{border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:focus,datepicker ::ng-deep [role=gridcell] .btn-default.focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active{background:none;box-shadow:none;color:#fff;border:solid 2px #0070f2!important;background-color:#0070f2!important;border-radius:8px}datepicker ::ng-deep .btn-default.active .text-muted,datepicker ::ng-deep .btn-default.active .text-primary,datepicker ::ng-deep .btn-default.active .text-info{color:inherit}datepicker ::ng-deep tr td:first-child{padding:0 6px;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep th small b{font-weight:400;color:#556b82;font-size:var(--lxFontSmallSize, 12px)}datepicker ::ng-deep table{border-spacing:1px;border-collapse:separate}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_FORMATS]
@@ -5987,6 +5996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], markInvalid: [{
                 type: Input
+            }], alwaysEmitDateString: [{
+                type: Input
             }], closeDateInput: [{
                 type: Output
             }], dateStringChange: [{