@leanix/components 0.2.214 → 0.2.217
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +43 -11
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/index.js +1 -0
- package/esm2015/index.js.map +1 -1
- package/esm2015/lib/forms-ui/components/basic-dropdown/basic-dropdown.component.js +2 -2
- package/esm2015/lib/forms-ui/directives/form-error.directive.js +1 -1
- package/esm2015/lib/forms-ui/directives/form-error.directive.js.map +1 -1
- package/esm2015/lib/forms-ui/directives/form-submit.directive.js +3 -2
- package/esm2015/lib/forms-ui/directives/form-submit.directive.js.map +1 -1
- package/esm2015/lib/forms-ui/models/base-select.directive.js +3 -0
- package/esm2015/lib/forms-ui/models/base-select.directive.js.map +1 -1
- package/esm2015/lib/modal-ui/components/modal/modal.component.js +14 -4
- package/esm2015/lib/modal-ui/components/modal/modal.component.js.map +1 -1
- package/esm2015/lib/modal-ui/directives/modal-content.directive.js +13 -0
- package/esm2015/lib/modal-ui/directives/modal-content.directive.js.map +1 -0
- package/esm2015/lib/modal-ui/modal.module.js +4 -3
- package/esm2015/lib/modal-ui/modal.module.js.map +1 -1
- package/fesm2015/leanix-components.js +36 -12
- package/fesm2015/leanix-components.js.map +1 -1
- package/index.d.ts +1 -0
- package/lib/forms-ui/directives/form-error.directive.d.ts +1 -1
- package/lib/forms-ui/directives/form-submit.directive.d.ts +1 -1
- package/lib/forms-ui/models/base-select.directive.d.ts +1 -0
- package/lib/modal-ui/components/modal/modal.component.d.ts +5 -2
- package/lib/modal-ui/directives/modal-content.directive.d.ts +5 -0
- package/lib/modal-ui/modal.module.d.ts +7 -6
- package/package.json +1 -1
@@ -2293,13 +2293,13 @@
|
|
2293
2293
|
return BasicDropdownComponent;
|
2294
2294
|
}(KeyboardSelectDirective));
|
2295
2295
|
BasicDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: BasicDropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
|
2296
|
-
BasicDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScroll()\"\n>\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n >\n {{ NAME + '.noResults' | translate }}\n </li>\n <li\n *ngIf=\"placeholder\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":
|
2296
|
+
BasicDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ul\n class=\"options {{ padding }}Padding lxThinScrollbar\"\n #keyboardSelectContainer\n infinite-scroll\n [scrollWindow]=\"false\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScroll()\"\n>\n <li\n *ngIf=\"newOptionLabel && isNewItem\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onNewItemSelected()\"\n (select)=\"onNewItemSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable onTheFlyOption\"\n >\n <span class=\"newEntryContent\">\n {{ newOptionLabel }}\n </span>\n <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n </li>\n <li\n *ngIf=\"showCreateNewOption\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"onCreateNewOptionSelected()\"\n (select)=\"onCreateNewOptionSelected()\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable newEntryOption\"\n >\n <span class=\"newEntryContent\">\n <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultNewOption>\n <span>\n {{ NAME + '.new' | translate }}\n </span>\n </ng-template>\n </span>\n </li>\n <li\n *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n class=\"option keyboardSelectable noOptionsAvailable\"\n >\n {{ NAME + '.noResults' | translate }}\n </li>\n <li\n *ngIf=\"placeholder\"\n class=\"option keyboardSelectable clearSelection\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n (click)=\"selectOption(null)\"\n (select)=\"selectOption(null)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n >\n {{ placeholder }}\n </li>\n <li\n *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n lxSelectableItem\n [scrollInContainer]=\"keyboardSelectContainer\"\n #item\n class=\"option keyboardSelectable\"\n (click)=\"selectOption(option)\"\n (select)=\"selectOption(option)\"\n [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n [class.initiallySelected]=\"index === initiallySelectedIndex\"\n [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n >\n <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n </ng-container>\n <ng-template #simpleStringDisplay>\n <span>\n {{ labelKey ? option[labelKey] : option }}\n </span>\n </ng-template>\n </li>\n <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.defaultPadding .newEntryOption,.defaultPadding .noOptionsAvailable,.defaultPadding .onTheFlyOption{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .noOptionsAvailable,.narrowPadding .onTheFlyOption{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i3__namespace.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2__namespace.AsyncPipe, "uppercase": i2__namespace.UpperCasePipe, "translate": i1__namespace$2.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
2297
2297
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: BasicDropdownComponent, decorators: [{
|
2298
2298
|
type: i0.Component,
|
2299
2299
|
args: [{
|
2300
2300
|
selector: 'lx-basic-dropdown',
|
2301
2301
|
templateUrl: 'basic-dropdown.component.html',
|
2302
|
-
styleUrls: ['basic-dropdown.component.
|
2302
|
+
styleUrls: ['basic-dropdown.component.scss'],
|
2303
2303
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
2304
2304
|
}]
|
2305
2305
|
}], propDecorators: { options: [{
|
@@ -3882,6 +3882,9 @@
|
|
3882
3882
|
};
|
3883
3883
|
BaseSelectDirective.prototype.handleBackdropClick = function (event) {
|
3884
3884
|
event.stopPropagation();
|
3885
|
+
this.closeInput();
|
3886
|
+
};
|
3887
|
+
BaseSelectDirective.prototype.closeInput = function () {
|
3885
3888
|
this.open.next(false);
|
3886
3889
|
this.resetInput();
|
3887
3890
|
this.query.emit('');
|
@@ -5672,11 +5675,12 @@
|
|
5672
5675
|
return FormSubmitDirective;
|
5673
5676
|
}());
|
5674
5677
|
FormSubmitDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormSubmitDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
5675
|
-
FormSubmitDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: FormSubmitDirective, selector: "
|
5678
|
+
FormSubmitDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: FormSubmitDirective, selector: "form", ngImport: i0__namespace });
|
5676
5679
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: FormSubmitDirective, decorators: [{
|
5677
5680
|
type: i0.Directive,
|
5678
5681
|
args: [{
|
5679
|
-
selector
|
5682
|
+
// eslint-disable-next-line @angular-eslint/directive-selector
|
5683
|
+
selector: 'form'
|
5680
5684
|
}]
|
5681
5685
|
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
|
5682
5686
|
|
@@ -5702,7 +5706,7 @@
|
|
5702
5706
|
Object.defineProperty(FormErrorDirective.prototype, "control", {
|
5703
5707
|
get: function () {
|
5704
5708
|
var _a;
|
5705
|
-
return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) || this.ctrl;
|
5709
|
+
return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) || this.ctrl || null;
|
5706
5710
|
},
|
5707
5711
|
enumerable: false,
|
5708
5712
|
configurable: true
|
@@ -6193,6 +6197,20 @@
|
|
6193
6197
|
type: i0.Input
|
6194
6198
|
}] } });
|
6195
6199
|
|
6200
|
+
var ModalContentDirective = /** @class */ (function () {
|
6201
|
+
function ModalContentDirective() {
|
6202
|
+
}
|
6203
|
+
return ModalContentDirective;
|
6204
|
+
}());
|
6205
|
+
ModalContentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ModalContentDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
6206
|
+
ModalContentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: ModalContentDirective, selector: "[lxModalContent]", ngImport: i0__namespace });
|
6207
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ModalContentDirective, decorators: [{
|
6208
|
+
type: i0.Directive,
|
6209
|
+
args: [{
|
6210
|
+
selector: '[lxModalContent]'
|
6211
|
+
}]
|
6212
|
+
}] });
|
6213
|
+
|
6196
6214
|
var MODAL_CLOSE = new i0.InjectionToken('MODAL_CLOSE');
|
6197
6215
|
|
6198
6216
|
/**
|
@@ -6231,6 +6249,13 @@
|
|
6231
6249
|
this.back = new i0.EventEmitter();
|
6232
6250
|
this.destroyed$ = new i6.Subject();
|
6233
6251
|
}
|
6252
|
+
Object.defineProperty(ModalComponent.prototype, "content", {
|
6253
|
+
get: function () {
|
6254
|
+
return this.explicitContent || this.implicitContent;
|
6255
|
+
},
|
6256
|
+
enumerable: false,
|
6257
|
+
configurable: true
|
6258
|
+
});
|
6234
6259
|
ModalComponent.prototype.onEscape = function () {
|
6235
6260
|
this.closeModal();
|
6236
6261
|
};
|
@@ -6246,7 +6271,7 @@
|
|
6246
6271
|
});
|
6247
6272
|
}
|
6248
6273
|
else if (this.size === 'dialog-large') {
|
6249
|
-
var positionStrategy = this.overlay.position().global().top('
|
6274
|
+
var positionStrategy = this.overlay.position().global().top('4vh').centerHorizontally();
|
6250
6275
|
this.overlayRef = this.overlay.create({
|
6251
6276
|
panelClass: this.size,
|
6252
6277
|
positionStrategy: positionStrategy,
|
@@ -6257,7 +6282,7 @@
|
|
6257
6282
|
}
|
6258
6283
|
else {
|
6259
6284
|
// size 'dialog'
|
6260
|
-
var positionStrategy = this.overlay.position().global().top('
|
6285
|
+
var positionStrategy = this.overlay.position().global().top('8vh').centerHorizontally();
|
6261
6286
|
this.overlayRef = this.overlay.create({
|
6262
6287
|
panelClass: this.size,
|
6263
6288
|
minWidth: '600px',
|
@@ -6344,7 +6369,7 @@
|
|
6344
6369
|
return ModalComponent;
|
6345
6370
|
}());
|
6346
6371
|
ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ModalComponent, deps: [{ token: i1__namespace.Overlay }, { token: i0__namespace.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2__namespace$1.ConfigurableFocusTrapFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
6347
|
-
ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ModalComponent, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: i3.CdkPortal, descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template cdkPortal>\n <div\n *ngIf=\"open\"\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n <div\n *ngIf=\"size === 'fullscreen' && showBackButton\"\n (click)=\"emitBack()\"\n (keyup.enter)=\"emitBack()\"\n tabindex=\"0\"\n role=\"button\"\n class=\"fal fa-long-arrow-left\"\n ></div>\n <button\n *ngIf=\"showCloseButton\"\n (click)=\"closeModal()\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n class=\"fal fa-times closeButton\"\n ></button>\n <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n <div class=\"modalContentContainer\">\n <ng-content></ng-
|
6372
|
+
ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ModalComponent, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: i0.TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: i3.CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template cdkPortal>\n <div\n *ngIf=\"open\"\n role=\"dialog\"\n class=\"lxmodal\"\n [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n [class.lxmodal--dialog]=\"size === 'dialog'\"\n [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n [class.lxmodal--withFooter]=\"!!footer\"\n [class.lxmodal--verticalScroll]=\"verticalScroll\"\n @modal\n >\n <div\n *ngIf=\"size === 'fullscreen' && showBackButton\"\n (click)=\"emitBack()\"\n (keyup.enter)=\"emitBack()\"\n tabindex=\"0\"\n role=\"button\"\n class=\"fal fa-long-arrow-left\"\n ></div>\n <button\n *ngIf=\"showCloseButton\"\n (click)=\"closeModal()\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n class=\"fal fa-times closeButton\"\n ></button>\n <ng-content *ngIf=\"header\" select=\"lx-modal-header\"></ng-content>\n <div class=\"modalContentContainer\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content *ngIf=\"footer\" select=\"lx-modal-footer\"></ng-content>\n </div>\n</ng-template>\n<ng-template #implicitContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}@-webkit-keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@-webkit-keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@-webkit-keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:0s;transition-timing-function:ease;border-radius:50%;color:#b2bccc;width:48px;height:48px;font-size:24px;line-height:48px;right:36px;top:16px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:focus,.lxmodal--fullscreen .closeButton:hover{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:0s;transition-timing-function:ease;border-radius:50%;color:#b2bccc;width:48px;height:48px;font-size:24px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:focus,.lxmodal--fullscreen .fa-long-arrow-left:hover{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px 0 rgba(0,0,0,.24)}.lxmodal--dialog-large .modalContentContainer,.lxmodal--dialog .modalContentContainer{padding:16px;position:relative}.lxmodal--dialog-large .closeButton,.lxmodal--dialog .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:all .18s;transition-delay:0s;transition-timing-function:ease;border-radius:50%;color:#8594ad;height:32px;width:32px;font-size:16px;z-index:999;right:10px;top:10px}.lxmodal--dialog-large .closeButton:before,.lxmodal--dialog .closeButton:before{cursor:pointer}.lxmodal--dialog-large .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog .closeButton:hover{color:#526179;background-color:#eaedf1}.lxmodal--dialog-large .closeButton:focus,.lxmodal--dialog .closeButton:focus{outline:0}.lxmodal--dialog-large .modalContentContainer{height:calc(100% - 48px - 64px)}.modalContentContainer{flex:1}"], directives: [{ type: i3__namespace$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1__namespace$2.TranslatePipe }, animations: [
|
6348
6373
|
animations.trigger('modal', [
|
6349
6374
|
animations.transition(':enter', [animations.style({ opacity: 0 }), animations.animate('0.15s', animations.style({ opacity: 1 }))]),
|
6350
6375
|
animations.transition(':leave', animations.animate('0.15s', animations.style({ opacity: 0 })))
|
@@ -6397,6 +6422,12 @@
|
|
6397
6422
|
}], cdkPortal: [{
|
6398
6423
|
type: i0.ViewChild,
|
6399
6424
|
args: [i3.CdkPortal, { static: true }]
|
6425
|
+
}], implicitContent: [{
|
6426
|
+
type: i0.ViewChild,
|
6427
|
+
args: ['implicitContent', { static: true }]
|
6428
|
+
}], explicitContent: [{
|
6429
|
+
type: i0.ContentChild,
|
6430
|
+
args: [ModalContentDirective, { read: i0.TemplateRef, static: true }]
|
6400
6431
|
}], onEscape: [{
|
6401
6432
|
type: i0.HostListener,
|
6402
6433
|
args: ['document:keydown.escape']
|
@@ -6408,14 +6439,14 @@
|
|
6408
6439
|
return LxModalModule;
|
6409
6440
|
}());
|
6410
6441
|
LxModalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxModalModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
6411
|
-
LxModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxModalModule, declarations: [ModalComponent, ModalHeaderComponent, ModalFooterComponent], imports: [i2.CommonModule, i3.PortalModule, i1.OverlayModule, i2$1.A11yModule, i1__namespace$2.TranslateModule], exports: [ModalComponent, ModalHeaderComponent, ModalFooterComponent] });
|
6442
|
+
LxModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxModalModule, declarations: [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalContentDirective], imports: [i2.CommonModule, i3.PortalModule, i1.OverlayModule, i2$1.A11yModule, i1__namespace$2.TranslateModule], exports: [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalContentDirective] });
|
6412
6443
|
LxModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxModalModule, imports: [[i2.CommonModule, i3.PortalModule, i1.OverlayModule, i2$1.A11yModule, i1$2.TranslateModule.forChild()]] });
|
6413
6444
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: LxModalModule, decorators: [{
|
6414
6445
|
type: i0.NgModule,
|
6415
6446
|
args: [{
|
6416
6447
|
imports: [i2.CommonModule, i3.PortalModule, i1.OverlayModule, i2$1.A11yModule, i1$2.TranslateModule.forChild()],
|
6417
|
-
declarations: [ModalComponent, ModalHeaderComponent, ModalFooterComponent],
|
6418
|
-
exports: [ModalComponent, ModalHeaderComponent, ModalFooterComponent]
|
6448
|
+
declarations: [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalContentDirective],
|
6449
|
+
exports: [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalContentDirective]
|
6419
6450
|
}]
|
6420
6451
|
}] });
|
6421
6452
|
|
@@ -7042,6 +7073,7 @@
|
|
7042
7073
|
exports.MarkInvalidDirective = MarkInvalidDirective;
|
7043
7074
|
exports.MarkdownPipe = MarkdownPipe;
|
7044
7075
|
exports.ModalComponent = ModalComponent;
|
7076
|
+
exports.ModalContentDirective = ModalContentDirective;
|
7045
7077
|
exports.ModalFooterComponent = ModalFooterComponent;
|
7046
7078
|
exports.ModalHeaderComponent = ModalHeaderComponent;
|
7047
7079
|
exports.MultiSelectComponent = MultiSelectComponent;
|