@leanix/components 0.4.753 → 0.4.754
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.
|
@@ -10377,7 +10377,7 @@ class ModalComponent {
|
|
|
10377
10377
|
this.focusTrap.create(hostElement);
|
|
10378
10378
|
}
|
|
10379
10379
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", 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: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n @if (open) {\n <div\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 @if (size === 'fullscreen' && showBackButton) {\n <
|
|
10380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", 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: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n @if (open) {\n <div\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 @if (size === 'fullscreen' && showBackButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"arrow-left\" />\n </button>\n }\n @if (showCloseButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n type=\"button\"\n class=\"closeButton\"\n >\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"decline\" />\n </button>\n }\n @if (header) {\n <ng-content select=\"lx-modal-header\" />\n }\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n @if (footer) {\n <ng-content select=\"lx-modal-footer\" />\n }\n </div>\n }\n</ng-template>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], animations: [
|
|
10381
10381
|
trigger('modal', [
|
|
10382
10382
|
transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
|
|
10383
10383
|
transition(':leave', animate('0.15s', style({ opacity: 0 })))
|
|
@@ -10391,7 +10391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
10391
10391
|
transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
|
|
10392
10392
|
transition(':leave', animate('0.15s', style({ opacity: 0 })))
|
|
10393
10393
|
])
|
|
10394
|
-
], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule], template: "<ng-template cdkPortal>\n @if (open) {\n <div\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 @if (size === 'fullscreen' && showBackButton) {\n <
|
|
10394
|
+
], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule, IconComponent$1], template: "<ng-template cdkPortal>\n @if (open) {\n <div\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 @if (size === 'fullscreen' && showBackButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"arrow-left\" />\n </button>\n }\n @if (showCloseButton) {\n <!-- TODO lx-button doesn't comply with modal close button style yet -->\n <button\n (click)=\"closeModal(closeLocation.CloseButton)\"\n [attr.aria-label]=\"NAME + '.close' | translate\"\n type=\"button\"\n class=\"closeButton\"\n >\n <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n <ui5-icon name=\"decline\" />\n </button>\n }\n @if (header) {\n <ng-content select=\"lx-modal-header\" />\n }\n <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n @if (footer) {\n <ng-content select=\"lx-modal-footer\" />\n }\n </div>\n }\n</ng-template>\n<ng-template #implicitContent>\n <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
|
|
10395
10395
|
}], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
|
|
10396
10396
|
type: Optional
|
|
10397
10397
|
}, {
|