@leanix/components 0.4.816 → 0.4.818

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5025,13 +5025,16 @@ class DayPickerComponent {
5025
5025
  <tr>
5026
5026
  <th>
5027
5027
  <button
5028
+ lx-button
5028
5029
  type="button"
5030
+ color="primary"
5031
+ mode="ghost"
5032
+ [square]="true"
5033
+ icon="navigation-left-arrow"
5029
5034
  class="btn btn-default btn-secondary btn-sm pull-left float-left"
5030
5035
  (click)="datePicker.move(-1)"
5031
5036
  tabindex="-1"
5032
- >
5033
- {{ isBs4 ? '&lt;' : '‹' }}
5034
- </button>
5037
+ ></button>
5035
5038
  </th>
5036
5039
  <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
5037
5040
  <button
@@ -5049,13 +5052,16 @@ class DayPickerComponent {
5049
5052
  </th>
5050
5053
  <th>
5051
5054
  <button
5055
+ lx-button
5052
5056
  type="button"
5057
+ color="primary"
5058
+ mode="ghost"
5059
+ [square]="true"
5060
+ icon="navigation-right-arrow"
5053
5061
  class="btn btn-default btn-secondary btn-sm pull-right float-right"
5054
5062
  (click)="datePicker.move(1)"
5055
5063
  tabindex="-1"
5056
- >
5057
- {{ isBs4 ? '&gt;' : '›' }}
5058
- </button>
5064
+ ></button>
5059
5065
  </th>
5060
5066
  </tr>
5061
5067
  <tr>
@@ -5116,7 +5122,7 @@ class DayPickerComponent {
5116
5122
  </tbody>
5117
5123
  </table>
5118
5124
  }
5119
- `, isInline: true, styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
5125
+ `, isInline: true, styles: [":host .btn-secondary:not([lx-button]){color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }] }); }
5120
5126
  }
5121
5127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DayPickerComponent, decorators: [{
5122
5128
  type: Component,
@@ -5127,13 +5133,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
5127
5133
  <tr>
5128
5134
  <th>
5129
5135
  <button
5136
+ lx-button
5130
5137
  type="button"
5138
+ color="primary"
5139
+ mode="ghost"
5140
+ [square]="true"
5141
+ icon="navigation-left-arrow"
5131
5142
  class="btn btn-default btn-secondary btn-sm pull-left float-left"
5132
5143
  (click)="datePicker.move(-1)"
5133
5144
  tabindex="-1"
5134
- >
5135
- {{ isBs4 ? '&lt;' : '‹' }}
5136
- </button>
5145
+ ></button>
5137
5146
  </th>
5138
5147
  <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
5139
5148
  <button
@@ -5151,13 +5160,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
5151
5160
  </th>
5152
5161
  <th>
5153
5162
  <button
5163
+ lx-button
5154
5164
  type="button"
5165
+ color="primary"
5166
+ mode="ghost"
5167
+ [square]="true"
5168
+ icon="navigation-right-arrow"
5155
5169
  class="btn btn-default btn-secondary btn-sm pull-right float-right"
5156
5170
  (click)="datePicker.move(1)"
5157
5171
  tabindex="-1"
5158
- >
5159
- {{ isBs4 ? '&gt;' : '›' }}
5160
- </button>
5172
+ ></button>
5161
5173
  </th>
5162
5174
  </tr>
5163
5175
  <tr>
@@ -5218,7 +5230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
5218
5230
  </tbody>
5219
5231
  </table>
5220
5232
  }
5221
- `, imports: [NgClass], styles: [":host .btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
5233
+ `, imports: [NgClass, ButtonComponent], styles: [":host .btn-secondary:not([lx-button]){color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
5222
5234
  }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
5223
5235
 
5224
5236
  class MonthPickerComponent {
@@ -6007,7 +6019,7 @@ class DateInputComponent {
6007
6019
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: [
6008
6020
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
6009
6021
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
6010
- ], 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=\"slim-arrow-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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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"] }] }); }
6022
+ ], 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=\"slim-arrow-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:not([lx-button]){border:none!important;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:not([lx-button]){color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]){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:not([lx-button]) .text-muted,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,datepicker ::ng-deep .btn-default.active:not([lx-button]) .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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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"] }] }); }
6011
6023
  }
6012
6024
  __decorate([
6013
6025
  Observe('initDateString')
@@ -6027,7 +6039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
6027
6039
  CustomDatePipe,
6028
6040
  MarkInvalidDirective,
6029
6041
  ButtonComponent
6030
- ], 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=\"slim-arrow-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"] }]
6042
+ ], 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=\"slim-arrow-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:not([lx-button]){border:none!important;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:not([lx-button]){color:#0070f2!important}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]){border:solid 2px transparent!important;border-radius:8px;padding:8px 6px}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):focus,datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]).focus{outline-offset:0}datepicker ::ng-deep [role=gridcell] .btn-default:not([lx-button]):hover{background-color:#fff;border:#0070f2 2px solid!important;border-radius:8px}datepicker ::ng-deep .btn-default.active:not([lx-button]){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:not([lx-button]) .text-muted,datepicker ::ng-deep .btn-default.active:not([lx-button]) .text-primary,datepicker ::ng-deep .btn-default.active:not([lx-button]) .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"] }]
6031
6043
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
6032
6044
  type: Inject,
6033
6045
  args: [DATE_FORMATS]
@@ -6116,7 +6128,7 @@ class DatepickerUiModule {
6116
6128
  }
6117
6129
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatepickerUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6118
6130
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: DatepickerUiModule, imports: [DatePickerComponent], exports: [DatePickerComponent] }); }
6119
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatepickerUiModule }); }
6131
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatepickerUiModule, imports: [DatePickerComponent] }); }
6120
6132
  }
6121
6133
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatepickerUiModule, decorators: [{
6122
6134
  type: NgModule,