@leanix/components 0.3.7 → 0.3.8

package/fesm2020/leanix-components.mjs

@@ -3019,6 +3019,8 @@ class DateInputComponent {
         this.shortcutPropagation = false; //  if true shortcut`s event propagation will be disabled
         this.customClass = []; // array of custom css classes to be applied to
         this.dateDisabled = []; // array of disabled dates if mode is day, or years, etc.
+        this.autoFocus = false;
+        this.closeDateInput = new EventEmitter();
         this.showDatepicker = false;
         this.destroyed$ = new Subject();
         this.hasError = false;
@@ -3068,6 +3070,7 @@ class DateInputComponent {
     hidePopup() {
         if (this.showDatepicker) {
             this.showDatepicker = false;
+            this.closeDateInput.emit();
         }
     }
     onDateStringChange(newDateString, emit = true) {
@@ -3148,10 +3151,10 @@ class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DATE_FORMATS }, { token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DateInputComponent, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", 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" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange" }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DateInputComponent, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", 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: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<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    [(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", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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%}\n"], components: [{ type: i1$3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": CustomDatePipe } });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<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", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-radius-0 input.dateControl{border-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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%}\n"], components: [{ type: i1$3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": CustomDatePipe } });
 __decorate([
     Observe('initDateString')
 ], DateInputComponent.prototype, "initDateString$", void 0);
@@ -3160,7 +3163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{ selector: 'lx-date-input', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-                    ], template: "<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    [(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", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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%}\n"] }]
+                    ], template: "<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", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-radius-0 input.dateControl{border-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;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%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_FORMATS]
@@ -3225,6 +3228,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }], dateDisabled: [{
                 type: Input
+            }], autoFocus: [{
+                type: Input
+            }], closeDateInput: [{
+                type: Output
             }], input: [{
                 type: ViewChild,
                 args: ['input']