myrta-ui 13.0.5 → 13.0.7
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.
- package/esm2020/lib/components/modal/modal.component.mjs +3 -3
- package/esm2020/lib/components/popup/directives/popup-trigger.directive.mjs +6 -1
- package/fesm2015/myrta-ui.mjs +7 -2
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +7 -2
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/myrta-ui.mjs
CHANGED
|
@@ -1934,6 +1934,11 @@ class PopupTriggerDirective {
|
|
|
1934
1934
|
const templatePortal = new TemplatePortal(this.popupPanel.templateRef, this.viewContainerRef);
|
|
1935
1935
|
this._overlayRef.attach(templatePortal);
|
|
1936
1936
|
this.popupPanel.toggle.emit(true);
|
|
1937
|
+
setTimeout(() => {
|
|
1938
|
+
if (this._overlayRef) {
|
|
1939
|
+
this._overlayRef.updatePosition();
|
|
1940
|
+
}
|
|
1941
|
+
}, 0);
|
|
1937
1942
|
this._subscriberDetach$ = this._overlayRef.detachments().subscribe(_ => {
|
|
1938
1943
|
this._isDropdownOpen = false;
|
|
1939
1944
|
this.popupPanel.toggle.emit(false);
|
|
@@ -2426,7 +2431,7 @@ class ModalComponent {
|
|
|
2426
2431
|
}
|
|
2427
2432
|
}
|
|
2428
2433
|
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2429
|
-
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:10000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:
|
|
2434
|
+
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:10000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;gap:var(--spacing-3, 12px);padding:var(--spacing-4, 16px) var(--spacing-6, 24px) var(--spacing-6, 24px) var(--spacing-6, 24px);border-top:1px solid var(--neutral-bg-divider)}.mrx-modal-header{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size);text-align:center;width:100%;text-transform:uppercase}.mrx-modal-header .mrx-modal-title-clear{padding:0}.mrx-modal-header .mrx-modal-title-one-icon{padding-left:24px}.mrx-modal-header .mrx-modal-title-two-icon{padding-left:56px}.mrx-modal-header .mrx-modal-controls{display:flex;align-items:center;gap:var(--spacing-2);z-index:1}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse,.mrx-modal-header .icon-close{cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover,.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"], components: [{ type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
|
|
2430
2435
|
trigger('animateExpand', [
|
|
2431
2436
|
state('open', style({
|
|
2432
2437
|
height: '100%',
|
|
@@ -2459,7 +2464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
2459
2464
|
transition('open => closed', [animate('0.5s ease')]),
|
|
2460
2465
|
transition('closed => open', [animate('0.5s ease')]),
|
|
2461
2466
|
]),
|
|
2462
|
-
], template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:10000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:
|
|
2467
|
+
], template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:10000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;gap:var(--spacing-3, 12px);padding:var(--spacing-4, 16px) var(--spacing-6, 24px) var(--spacing-6, 24px) var(--spacing-6, 24px);border-top:1px solid var(--neutral-bg-divider)}.mrx-modal-header{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size);text-align:center;width:100%;text-transform:uppercase}.mrx-modal-header .mrx-modal-title-clear{padding:0}.mrx-modal-header .mrx-modal-title-one-icon{padding-left:24px}.mrx-modal-header .mrx-modal-title-two-icon{padding-left:56px}.mrx-modal-header .mrx-modal-controls{display:flex;align-items:center;gap:var(--spacing-2);z-index:1}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse,.mrx-modal-header .icon-close{cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover,.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"] }]
|
|
2463
2468
|
}], propDecorators: { title: [{
|
|
2464
2469
|
type: Input
|
|
2465
2470
|
}], message: [{
|