@leanix/components 0.4.74 → 0.4.76
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.
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/forms-ui/components/date-input/date-input.component.mjs +18 -5
- package/esm2022/lib/forms-ui/components/history-navigation/history-navigation.component.mjs +44 -0
- package/esm2022/lib/forms-ui/forms-ui.module.mjs +10 -5
- package/fesm2022/leanix-components.mjs +60 -8
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +2 -1
- package/lib/forms-ui/components/history-navigation/history-navigation.component.d.ts +16 -0
- package/lib/forms-ui/forms-ui.module.d.ts +2 -1
- package/package.json +1 -1
@@ -4411,6 +4411,7 @@ class DateInputComponent {
|
|
4411
4411
|
this.customClass = []; // array of custom css classes to be applied to
|
4412
4412
|
this.dateDisabled = []; // array of disabled dates if mode is day, or years, etc.
|
4413
4413
|
this.autoFocus = false;
|
4414
|
+
this.markInvalid = false;
|
4414
4415
|
this.closeDateInput = new EventEmitter();
|
4415
4416
|
this.showDatepicker = false;
|
4416
4417
|
this.destroyed$ = new Subject();
|
@@ -4541,10 +4542,10 @@ class DateInputComponent {
|
|
4541
4542
|
: null;
|
4542
4543
|
}
|
4543
4544
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DATE_FORMATS }, { token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
4544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
|
4545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, providers: [
|
4545
4546
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
4546
4547
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
4547
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\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 <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\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 </datepicker>\n </div>\n </div>\n </ng-template>\n </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\n placeholder=\"{{ placeholder }}\"\n [id]=\"inputId\"\n [lxAutofocus]=\"autoFocus\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n </span>\n </div>\n</ng-template>\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;background-color:#2a303d}.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}\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: "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" }] }); }
|
4548
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\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 <input\n #input\n class=\"form-control dateControl\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\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 </datepicker>\n </div>\n </div>\n </ng-template>\n </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n </span>\n </div>\n</ng-template>\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;background-color:#2a303d}.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}\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: "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"] }] }); }
|
4548
4549
|
}
|
4549
4550
|
__decorate([
|
4550
4551
|
Observe('initDateString')
|
@@ -4554,7 +4555,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
4554
4555
|
args: [{ selector: 'lx-date-input', providers: [
|
4555
4556
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
4556
4557
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
4557
|
-
], standalone: true, imports: [
|
4558
|
+
], standalone: true, imports: [
|
4559
|
+
NgIf,
|
4560
|
+
CdkOverlayOrigin,
|
4561
|
+
FormsModule,
|
4562
|
+
AutofocusDirective,
|
4563
|
+
CdkConnectedOverlay,
|
4564
|
+
DatePickerComponent,
|
4565
|
+
CustomDatePipe,
|
4566
|
+
MarkInvalidDirective
|
4567
|
+
], template: "<ng-container *ngIf=\"cdk; else withoutCdkOverlay\">\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 <input\n #input\n class=\"form-control dateControl\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\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 </datepicker>\n </div>\n </div>\n </ng-template>\n </span>\n</ng-container>\n\n<ng-template #withoutCdkOverlay>\n <div class=\"legacy\" [class.forLink]=\"renderingStyle === 'LINK'\">\n <div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n <span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n <input\n #input\n class=\"form-control dateControl\"\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 *ngIf=\"renderingStyle === 'INPUT'\"\n />\n <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n <div class=\"datepickerContainer\">\n <div class=\"calendar\">\n <datepicker\n class=\"popup\"\n *ngIf=\"showDatepicker\"\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 </datepicker>\n </div>\n </div>\n </span>\n </div>\n</ng-template>\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;background-color:#2a303d}.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}\n"] }]
|
4558
4568
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
4559
4569
|
type: Inject,
|
4560
4570
|
args: [DATE_FORMATS]
|
@@ -4623,6 +4633,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
4623
4633
|
type: Input
|
4624
4634
|
}], autoFocus: [{
|
4625
4635
|
type: Input
|
4636
|
+
}], markInvalid: [{
|
4637
|
+
type: Input
|
4626
4638
|
}], closeDateInput: [{
|
4627
4639
|
type: Output
|
4628
4640
|
}], input: [{
|
@@ -5061,6 +5073,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
5061
5073
|
type: Input
|
5062
5074
|
}] } });
|
5063
5075
|
|
5076
|
+
class HistoryNavigationComponent {
|
5077
|
+
constructor() {
|
5078
|
+
this.historyItems = [];
|
5079
|
+
this.currentIndex = this.historyItems.length - 1;
|
5080
|
+
}
|
5081
|
+
navigateToItem(historyItem) {
|
5082
|
+
if (historyItem && historyItem.onClick) {
|
5083
|
+
historyItem.onClick();
|
5084
|
+
}
|
5085
|
+
}
|
5086
|
+
navigateBack() {
|
5087
|
+
const previousItem = this.historyItems[this.currentIndex - 1];
|
5088
|
+
this.navigateToItem(previousItem);
|
5089
|
+
}
|
5090
|
+
navigateForward() {
|
5091
|
+
const nextItem = this.historyItems[this.currentIndex + 1];
|
5092
|
+
this.navigateToItem(nextItem);
|
5093
|
+
}
|
5094
|
+
isLastItem() {
|
5095
|
+
return this.currentIndex === this.historyItems.length - 1 || this.historyItems.length === 0;
|
5096
|
+
}
|
5097
|
+
isFirstItem() {
|
5098
|
+
return this.currentIndex === 0 || this.historyItems.length === 0;
|
5099
|
+
}
|
5100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: HistoryNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
5101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: HistoryNavigationComponent, isStandalone: true, selector: "lx-history-navigation", inputs: { historyItems: "historyItems", currentIndex: "currentIndex" }, ngImport: i0, template: "<div class=\"history-navigation\">\n <ng-container>\n <lx-button-group>\n <lx-cdk-options-dropdown [align]=\"'left'\" class=\"dropdownContainer\">\n <button class=\"lx-wsr\" lx-button lxKeyboardActionSource (click)=\"(false)\" [disabled]=\"historyItems.length === 1\">\n <i class=\"far fa-history\"></i>\n </button>\n <lx-option\n *ngFor=\"let historyItem of historyItems; index as index\"\n [selected]=\"index === currentIndex\"\n [hasSelectedState]=\"false\"\n (select)=\"navigateToItem(historyItem)\"\n >\n {{ historyItem.label }}\n </lx-option>\n </lx-cdk-options-dropdown>\n <button lx-button (click)=\"navigateBack()\" [disabled]=\"isFirstItem()\">\n <i class=\"far fa-angle-left\"></i>\n </button>\n <button lx-button (click)=\"navigateForward()\" [disabled]=\"isLastItem()\">\n <i class=\"far fa-angle-right\"></i>\n </button>\n </lx-button-group>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonGroupComponent, selector: "lx-button-group", inputs: ["separator"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }] }); }
|
5102
|
+
}
|
5103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: HistoryNavigationComponent, decorators: [{
|
5104
|
+
type: Component,
|
5105
|
+
args: [{ selector: 'lx-history-navigation', standalone: true, imports: [NgFor, ButtonGroupComponent, ButtonComponent, CdkOptionsDropdownComponent, KeyboardActionSourceDirective, OptionComponent], template: "<div class=\"history-navigation\">\n <ng-container>\n <lx-button-group>\n <lx-cdk-options-dropdown [align]=\"'left'\" class=\"dropdownContainer\">\n <button class=\"lx-wsr\" lx-button lxKeyboardActionSource (click)=\"(false)\" [disabled]=\"historyItems.length === 1\">\n <i class=\"far fa-history\"></i>\n </button>\n <lx-option\n *ngFor=\"let historyItem of historyItems; index as index\"\n [selected]=\"index === currentIndex\"\n [hasSelectedState]=\"false\"\n (select)=\"navigateToItem(historyItem)\"\n >\n {{ historyItem.label }}\n </lx-option>\n </lx-cdk-options-dropdown>\n <button lx-button (click)=\"navigateBack()\" [disabled]=\"isFirstItem()\">\n <i class=\"far fa-angle-left\"></i>\n </button>\n <button lx-button (click)=\"navigateForward()\" [disabled]=\"isLastItem()\">\n <i class=\"far fa-angle-right\"></i>\n </button>\n </lx-button-group>\n </ng-container>\n</div>\n" }]
|
5106
|
+
}], propDecorators: { historyItems: [{
|
5107
|
+
type: Input
|
5108
|
+
}], currentIndex: [{
|
5109
|
+
type: Input
|
5110
|
+
}] } });
|
5111
|
+
|
5064
5112
|
/**
|
5065
5113
|
* Displays Font Awesome icons.
|
5066
5114
|
*/
|
@@ -7516,7 +7564,8 @@ class LxFormsModule {
|
|
7516
7564
|
FormErrorDirective,
|
7517
7565
|
ErrorMessageComponent,
|
7518
7566
|
FormSubmitDirective,
|
7519
|
-
ContenteditableDirective
|
7567
|
+
ContenteditableDirective,
|
7568
|
+
HistoryNavigationComponent], exports: [BasicDropdownComponent,
|
7520
7569
|
ExpandedDropdownComponent,
|
7521
7570
|
BasicDropdownItemComponent,
|
7522
7571
|
BreadcrumbComponent,
|
@@ -7557,7 +7606,8 @@ class LxFormsModule {
|
|
7557
7606
|
FormSubmitDirective,
|
7558
7607
|
ErrorMessageComponent,
|
7559
7608
|
LxDragAndDropListModule,
|
7560
|
-
ContenteditableDirective
|
7609
|
+
ContenteditableDirective,
|
7610
|
+
HistoryNavigationComponent] }); }
|
7561
7611
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
|
7562
7612
|
FormsModule,
|
7563
7613
|
ReactiveFormsModule,
|
@@ -7637,7 +7687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
7637
7687
|
FormErrorDirective,
|
7638
7688
|
ErrorMessageComponent,
|
7639
7689
|
FormSubmitDirective,
|
7640
|
-
ContenteditableDirective
|
7690
|
+
ContenteditableDirective,
|
7691
|
+
HistoryNavigationComponent
|
7641
7692
|
],
|
7642
7693
|
exports: [
|
7643
7694
|
BasicDropdownComponent,
|
@@ -7681,7 +7732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
7681
7732
|
FormSubmitDirective,
|
7682
7733
|
ErrorMessageComponent,
|
7683
7734
|
LxDragAndDropListModule,
|
7684
|
-
ContenteditableDirective
|
7735
|
+
ContenteditableDirective,
|
7736
|
+
HistoryNavigationComponent
|
7685
7737
|
]
|
7686
7738
|
}]
|
7687
7739
|
}] });
|
@@ -8538,5 +8590,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
8538
8590
|
* Generated bundle index. Do not edit.
|
8539
8591
|
*/
|
8540
8592
|
|
8541
|
-
export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
|
8593
|
+
export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AfterViewInitDirective, AutocloseDirective, AutofocusDirective, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ColoredLabelComponent, ContenteditableDirective, ContrastColorPipe, CopyButtonComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATE_FN_LOCALE, DATE_FORMATS, DateInputComponent, DragAndDropListComponent, DragAndDropListItemComponent, ENTER, ESCAPE, EllipsisComponent, ErrorMessageComponent, ExpandedDropdownComponent, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FileDownloadButtonComponent, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HighlightRangePipe, HighlightTermPipe, HistoryNavigationComponent, IconComponent, IconScaleComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, Required, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectListComponent, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SliderToggleComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getTranslationParts, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle };
|
8542
8594
|
//# sourceMappingURL=leanix-components.mjs.map
|