@leanix/components 0.2.247 → 0.2.250
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2020/lib/forms-ui/components/date-input/date-input.component.mjs +3 -12
- package/esm2020/lib/popover-ui/components/popover/popover.component.mjs +6 -3
- package/fesm2015/leanix-components.mjs +7 -13
- package/fesm2015/leanix-components.mjs.map +1 -1
- package/fesm2020/leanix-components.mjs +7 -13
- package/fesm2020/leanix-components.mjs.map +1 -1
- package/lib/forms-ui/components/date-input/date-input.component.d.ts +0 -1
- package/lib/popover-ui/components/popover/popover.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -3040,15 +3040,6 @@ class DateInputComponent {
|
|
|
3040
3040
|
this.showDatepicker = false;
|
|
3041
3041
|
}
|
|
3042
3042
|
}
|
|
3043
|
-
onTab(forward) {
|
|
3044
|
-
if (forward && this.showDatepicker) {
|
|
3045
|
-
this.hidePopup();
|
|
3046
|
-
return false; // Prevent tab for now as ng2-bootstrap datepicker has a tabstop: 2 tabs needed to navigate for now
|
|
3047
|
-
// TODO: Check again in new version
|
|
3048
|
-
}
|
|
3049
|
-
this.hidePopup();
|
|
3050
|
-
return true;
|
|
3051
|
-
}
|
|
3052
3043
|
onDateStringChange(newDateString, emit = true) {
|
|
3053
3044
|
if (isValidDateString(newDateString)) {
|
|
3054
3045
|
const date = createDateFromDateString(newDateString);
|
|
@@ -3130,7 +3121,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
|
|
|
3130
3121
|
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: [
|
|
3131
3122
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
|
3132
3123
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
|
3133
|
-
], 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)=\"
|
|
3124
|
+
], 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: [".backdrop{position:fixed;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 } });
|
|
3134
3125
|
__decorate([
|
|
3135
3126
|
Observe('initDateString')
|
|
3136
3127
|
], DateInputComponent.prototype, "initDateString$", void 0);
|
|
@@ -3139,7 +3130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
3139
3130
|
args: [{ selector: 'lx-date-input', providers: [
|
|
3140
3131
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
|
|
3141
3132
|
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
|
|
3142
|
-
], 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)=\"
|
|
3133
|
+
], 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: [".backdrop{position:fixed;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"] }]
|
|
3143
3134
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
3144
3135
|
type: Inject,
|
|
3145
3136
|
args: [DATE_FORMATS]
|
|
@@ -6108,6 +6099,7 @@ class PopoverComponent {
|
|
|
6108
6099
|
constructor() {
|
|
6109
6100
|
this.noMargin = false;
|
|
6110
6101
|
this.allowOverflow = false;
|
|
6102
|
+
this.autoFocus = false;
|
|
6111
6103
|
/**
|
|
6112
6104
|
* If you have a popover, that should usually be displayed above or below its anchor,
|
|
6113
6105
|
* and this anchor is in a scrollable container, you should set this to true.
|
|
@@ -6216,10 +6208,10 @@ class PopoverComponent {
|
|
|
6216
6208
|
}
|
|
6217
6209
|
}
|
|
6218
6210
|
PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6219
|
-
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: PopoverComponent, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"false\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"
|
|
6211
|
+
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: PopoverComponent, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"false\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n <ng-container *ngIf=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], components: [{ type: i1$6.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
6220
6212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
6221
6213
|
type: Component,
|
|
6222
|
-
args: [{ selector: 'lx-popover', template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"false\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"
|
|
6214
|
+
args: [{ selector: 'lx-popover', template: "<sat-popover\n [anchor]=\"trigger.anchor\"\n [horizontalAlign]=\"horizontalAlign\"\n [verticalAlign]=\"verticalAlign\"\n [restoreFocus]=\"false\"\n [lockAlignment]=\"true\"\n [autoFocus]=\"autoFocus\"\n openTransition=\"0ms\"\n closeTransition=\"0ms\"\n (opened)=\"onOpen()\"\n (afterOpen)=\"onAfterOpen()\"\n (closed)=\"onClose()\"\n>\n <div\n class=\"popoverContainer\"\n [ngClass]=\"marginClasses\"\n [class.overflowHidden]=\"!allowOverflow\"\n (mouseenter)=\"trigger.showPopover(true)\"\n (mouseleave)=\"trigger.closePopover(true)\"\n (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n >\n <ng-container *ngIf=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n </div>\n</sat-popover>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"] }]
|
|
6223
6215
|
}], propDecorators: { trigger: [{
|
|
6224
6216
|
type: Input
|
|
6225
6217
|
}], horizontalAlign: [{
|
|
@@ -6230,6 +6222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
6230
6222
|
type: Input
|
|
6231
6223
|
}], allowOverflow: [{
|
|
6232
6224
|
type: Input
|
|
6225
|
+
}], autoFocus: [{
|
|
6226
|
+
type: Input
|
|
6233
6227
|
}], adaptMarginsForViewportAlignChange: [{
|
|
6234
6228
|
type: Input
|
|
6235
6229
|
}], opened: [{
|