@leanix/components 0.3.89 → 0.3.90

package/fesm2020/leanix-components.mjs

@@ -3041,7 +3041,8 @@ class DateInputComponent {
         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.closeDatePicker = new EventEmitter();
+        this.openDatePicker = new EventEmitter();
         this.showDatepicker = false;
         this.destroyed$ = new Subject();
         this.hasError = false;
@@ -3084,14 +3085,20 @@ class DateInputComponent {
     showPopup() {
         this.showDatepicker = true;
         this.cd.detectChanges();
-    }
-    togglePopup() {
-        this.showDatepicker = !this.showDatepicker;
+        this.openDatePicker.emit();
     }
     hidePopup() {
         if (this.showDatepicker) {
             this.showDatepicker = false;
-            this.closeDateInput.emit();
+            this.closeDatePicker.emit();
+        }
+    }
+    togglePopup() {
+        if (this.showDatepicker) {
+            this.hidePopup();
+        }
+        else {
+            this.showPopup();
         }
     }
     onDateStringChange(newDateString, emit = true) {
@@ -3172,7 +3179,7 @@ class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", 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: "14.0.0", version: "14.1.3", type: DateInputComponent, 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: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: DateInputComponent, 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", closeDatePicker: "closeDatePicker", openDatePicker: "openDatePicker" }, 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: "<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    <ng-container *ngTemplateOutlet=\"dateInput\"></ng-container>\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      <ng-container *ngTemplateOutlet=\"datePicker\"></ng-container>\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      <ng-container *ngTemplateOutlet=\"dateInput\"></ng-container>\n      <ng-container *ngIf=\"showDatepicker\">\n        <ng-container *ngTemplateOutlet=\"datePicker\"></ng-container>\n      </ng-container>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #dateInput>\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</ng-template>\n\n<ng-template #datePicker>\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", 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;top:0;right:0;bottom:0;left:0}.legacy .datepickerContainer{position:absolute}.legacy.forLink{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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"] }, { kind: "directive", type: i1$1.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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] });
@@ -3253,7 +3260,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 type: Input
             }], autoFocus: [{
                 type: Input
-            }], closeDateInput: [{
+            }], closeDatePicker: [{
+                type: Output
+            }], openDatePicker: [{
                 type: Output
             }], input: [{
                 type: ViewChild,