myrta-ui 17.1.75 → 17.1.77
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/esm2022/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.mjs +1 -1
- package/esm2022/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.mjs +1 -1
- package/esm2022/lib/components/modal/modal.component.mjs +6 -2
- package/esm2022/lib/components/paginator/paginator.component.mjs +58 -28
- package/esm2022/lib/components/paginator/paginator.enum.mjs +1 -1
- package/esm2022/lib/services/modal-service/components/alert-modal/alert-modal.component.mjs +2 -2
- package/esm2022/lib/services/modal-service/components/confirm-modal/confirm-modal.component.mjs +1 -1
- package/fesm2022/myrta-ui.mjs +65 -30
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/modal/modal.component.d.ts +2 -1
- package/lib/components/paginator/paginator.component.d.ts +1 -1
- package/lib/components/paginator/paginator.enum.d.ts +1 -0
- package/package.json +1 -1
package/fesm2022/myrta-ui.mjs
CHANGED
|
@@ -2328,6 +2328,7 @@ class ModalComponent {
|
|
|
2328
2328
|
ok = new EventEmitter();
|
|
2329
2329
|
close = new EventEmitter();
|
|
2330
2330
|
back = new EventEmitter();
|
|
2331
|
+
expand = new EventEmitter();
|
|
2331
2332
|
get getColorClass() {
|
|
2332
2333
|
return this.color ? ModalColorEnum[this.color] : '';
|
|
2333
2334
|
}
|
|
@@ -2358,9 +2359,10 @@ class ModalComponent {
|
|
|
2358
2359
|
}
|
|
2359
2360
|
onExpanding() {
|
|
2360
2361
|
this.isEmbed = !this.isEmbed;
|
|
2362
|
+
this.expand.emit();
|
|
2361
2363
|
}
|
|
2362
2364
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", alert: "alert", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isEmbed: "isEmbed", 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 class=\"mrx-modal-title\" [innerHTML]=\"title\" [style]=\"{padding: expandable ? '0 56px' : '0 24px'}\"></div>\r\n\r\n @if (expandable) {\r\n <span\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 }\r\n\r\n @if (isClose) {\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"onClose()\"></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n @if (isBack) {\r\n <div class=\"mrx-modal__back d-flex align-items-center 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\r\n @if (alert && (alert.title || alert.message)) {\r\n <mrx-alert\r\n [title]=\"alert.title || ''\"\r\n [message]=\"alert.message || ''\"\r\n [color]=\"alert.color || 'default'\"\r\n ></mrx-alert>\r\n }\r\n\r\n <div class=\"mrx-modal-body__content\">\r\n <ng-content></ng-content>\r\n\r\n @if (message) {\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (enableFooter) {\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\">\r\n @if (!footerContent) {\r\n <mrx-button\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 } @else {\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal>*{display:flex;align-items:center;justify-content:center;height:100%;width:100%}:host{margin:auto 0;width:100vw}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);max-height:calc(100vh - 48px);will-change:opacity;display:flex;flex-direction:column;text-align:left;overflow:hidden}::ng-deep .mrx-modal-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}::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;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-4, 16px)}.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{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;text-transform:uppercase}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse{position:absolute;top:16px;right:48px;cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover{transform:scale(1.1)}.mrx-modal-header .icon-close{position:absolute;top:16px;right:16px;cursor:pointer}.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"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", 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"] }, { kind: "component", type: AlertComponent, selector: "mrx-alert", inputs: ["customClasses", "color", "customColor", "message", "title", "closable", "showIcon"], outputs: ["close"] }], animations: [
|
|
2365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", alert: "alert", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isEmbed: "isEmbed", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back", expand: "expand" }, 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 class=\"mrx-modal-title\" [innerHTML]=\"title\" [style]=\"{padding: expandable ? '0 56px' : '0 24px'}\"></div>\r\n\r\n @if (expandable) {\r\n <span\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 }\r\n\r\n @if (isClose) {\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"onClose()\"></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n @if (isBack) {\r\n <div class=\"mrx-modal__back d-flex align-items-center 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\r\n @if (alert && (alert.title || alert.message)) {\r\n <mrx-alert\r\n [title]=\"alert.title || ''\"\r\n [message]=\"alert.message || ''\"\r\n [color]=\"alert.color || 'default'\"\r\n ></mrx-alert>\r\n }\r\n\r\n <div class=\"mrx-modal-body__content\">\r\n <ng-content></ng-content>\r\n\r\n @if (message) {\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (enableFooter) {\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\">\r\n @if (!footerContent) {\r\n <mrx-button\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 } @else {\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal>*{display:flex;align-items:center;justify-content:center;height:100%;width:100%}:host{margin:auto 0;width:100vw}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);max-height:calc(100vh - 48px);will-change:opacity;display:flex;flex-direction:column;text-align:left;overflow:hidden}::ng-deep .mrx-modal-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}::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;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-4, 16px)}.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{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;text-transform:uppercase}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse{position:absolute;top:16px;right:48px;cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover{transform:scale(1.1)}.mrx-modal-header .icon-close{position:absolute;top:16px;right:16px;cursor:pointer}.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"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", 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"] }, { kind: "component", type: AlertComponent, selector: "mrx-alert", inputs: ["customClasses", "color", "customColor", "message", "title", "closable", "showIcon"], outputs: ["close"] }], animations: [
|
|
2364
2366
|
trigger('animateExpand', [
|
|
2365
2367
|
state('open', style({
|
|
2366
2368
|
height: '100vh',
|
|
@@ -2436,6 +2438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2436
2438
|
type: Output
|
|
2437
2439
|
}], back: [{
|
|
2438
2440
|
type: Output
|
|
2441
|
+
}], expand: [{
|
|
2442
|
+
type: Output
|
|
2439
2443
|
}] } });
|
|
2440
2444
|
|
|
2441
2445
|
class ModalModule {
|
|
@@ -3315,7 +3319,7 @@ class AlertModalComponent extends ModalServiceComponent {
|
|
|
3315
3319
|
this.dialogRef.close(this.result);
|
|
3316
3320
|
}
|
|
3317
3321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }, { token: MODAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
3318
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertModalComponent, isStandalone: true, selector: "mrx-default-alert-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n size=\"small\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u041E\u043A' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", 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"] }] });
|
|
3322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertModalComponent, isStandalone: true, selector: "mrx-default-alert-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n size=\"small\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u041E\u043A' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back", "expand"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", 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"] }] });
|
|
3319
3323
|
}
|
|
3320
3324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertModalComponent, decorators: [{
|
|
3321
3325
|
type: Component,
|
|
@@ -3354,7 +3358,7 @@ class ConfirmModalComponent extends ModalServiceComponent {
|
|
|
3354
3358
|
this.dialogRef.close(this.result);
|
|
3355
3359
|
}
|
|
3356
3360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }, { token: MODAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
3357
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmModalComponent, isStandalone: true, selector: "mrx-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n [size]=\"'small'\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"cancel()\"\r\n >\r\n {{ config.cancelText || '\u041E\u0442\u043C\u0435\u043D\u0430' }}\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", 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"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }] });
|
|
3361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmModalComponent, isStandalone: true, selector: "mrx-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n [size]=\"'small'\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"cancel()\"\r\n >\r\n {{ config.cancelText || '\u041E\u0442\u043C\u0435\u043D\u0430' }}\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", 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"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back", "expand"] }] });
|
|
3358
3362
|
}
|
|
3359
3363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmModalComponent, decorators: [{
|
|
3360
3364
|
type: Component,
|
|
@@ -4536,32 +4540,66 @@ class PaginatorComponent {
|
|
|
4536
4540
|
// }
|
|
4537
4541
|
// });
|
|
4538
4542
|
// }
|
|
4539
|
-
// Упрощенная версия getViewItems()
|
|
4540
4543
|
get getViewItems() {
|
|
4541
4544
|
const totalPages = this.getItems;
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
for (let i = Math.max(2, current - delta); i <= Math.min(totalPages - 1, current + delta); i++) {
|
|
4546
|
-
range.push(i);
|
|
4545
|
+
// Если нет страниц или только одна
|
|
4546
|
+
if (totalPages <= 1) {
|
|
4547
|
+
return [];
|
|
4547
4548
|
}
|
|
4548
|
-
|
|
4549
|
-
|
|
4550
|
-
|
|
4549
|
+
const current = this.currentPage;
|
|
4550
|
+
const result = [];
|
|
4551
|
+
// Всегда показываем первую страницу
|
|
4552
|
+
result.push({
|
|
4553
|
+
index: 1,
|
|
4554
|
+
active: current === 1
|
|
4555
|
+
});
|
|
4556
|
+
// Показываем многоточие после первой страницы если нужно
|
|
4557
|
+
if (current > 3) {
|
|
4558
|
+
result.push({
|
|
4559
|
+
index: -1,
|
|
4560
|
+
active: false,
|
|
4561
|
+
isEllipsis: true
|
|
4562
|
+
});
|
|
4551
4563
|
}
|
|
4552
|
-
|
|
4553
|
-
|
|
4554
|
-
|
|
4555
|
-
|
|
4564
|
+
// Определяем диапазон страниц вокруг текущей
|
|
4565
|
+
let start = Math.max(2, current - 1);
|
|
4566
|
+
let end = Math.min(totalPages - 1, current + 1);
|
|
4567
|
+
// Если текущая страница близко к началу
|
|
4568
|
+
if (current <= 3) {
|
|
4569
|
+
end = Math.min(4, totalPages - 1);
|
|
4570
|
+
}
|
|
4571
|
+
// Если текущая страница близко к концу
|
|
4572
|
+
if (current >= totalPages - 2) {
|
|
4573
|
+
start = Math.max(totalPages - 3, 2);
|
|
4574
|
+
}
|
|
4575
|
+
// Добавляем страницы в диапазоне
|
|
4576
|
+
for (let i = start; i <= end; i++) {
|
|
4577
|
+
if (i > 1 && i < totalPages) {
|
|
4578
|
+
result.push({
|
|
4579
|
+
index: i,
|
|
4580
|
+
active: i === current
|
|
4581
|
+
});
|
|
4582
|
+
}
|
|
4556
4583
|
}
|
|
4557
|
-
|
|
4558
|
-
|
|
4584
|
+
// Показываем многоточие перед последней страницей если нужно
|
|
4585
|
+
if (current < totalPages - 2) {
|
|
4586
|
+
result.push({
|
|
4587
|
+
index: -2,
|
|
4588
|
+
active: false,
|
|
4589
|
+
isEllipsis: true
|
|
4590
|
+
});
|
|
4559
4591
|
}
|
|
4560
|
-
|
|
4561
|
-
|
|
4562
|
-
|
|
4563
|
-
|
|
4564
|
-
})
|
|
4592
|
+
// Добавляем последнюю страницу
|
|
4593
|
+
result.push({
|
|
4594
|
+
index: totalPages,
|
|
4595
|
+
active: current === totalPages
|
|
4596
|
+
});
|
|
4597
|
+
return result;
|
|
4598
|
+
}
|
|
4599
|
+
// И trackByFn:
|
|
4600
|
+
trackByFn(index, item) {
|
|
4601
|
+
// Для многоточий используем уникальные значения, для страниц - их индекс
|
|
4602
|
+
return item.isEllipsis ? `ellipsis-${index}` : item.index;
|
|
4565
4603
|
}
|
|
4566
4604
|
get getFirstNumberCurrentPage() {
|
|
4567
4605
|
if (this.total === 0) {
|
|
@@ -4595,15 +4633,12 @@ class PaginatorComponent {
|
|
|
4595
4633
|
pageSize: value
|
|
4596
4634
|
});
|
|
4597
4635
|
}
|
|
4598
|
-
trackByFn(index, item) {
|
|
4599
|
-
return item.id;
|
|
4600
|
-
}
|
|
4601
4636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PaginatorComponent, selector: "mrx-paginator", inputs: { pageSizes: "pageSizes", currentPage: "currentPage", pageSize: "pageSize", total: "total", customClasses: "customClasses", isEmptyPaginator: "isEmptyPaginator", isPaginatorText: "isPaginatorText", paginatorText: "paginatorText", dropdownPosition: "dropdownPosition", popupPosition: "popupPosition", setPosition: ["position", "setPosition"], setWithPageSize: ["withPageSize", "setWithPageSize"] }, outputs: { dataStateChanged: "dataStateChanged" }, ngImport: i0, template: "<div class=\"mrx-paginator\" [class]=\"getClasses\"
|
|
4637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PaginatorComponent, selector: "mrx-paginator", inputs: { pageSizes: "pageSizes", currentPage: "currentPage", pageSize: "pageSize", total: "total", customClasses: "customClasses", isEmptyPaginator: "isEmptyPaginator", isPaginatorText: "isPaginatorText", paginatorText: "paginatorText", dropdownPosition: "dropdownPosition", popupPosition: "popupPosition", setPosition: ["position", "setPosition"], setWithPageSize: ["withPageSize", "setWithPageSize"] }, outputs: { dataStateChanged: "dataStateChanged" }, ngImport: i0, template: "@if(isEmptyPaginator || total) {\r\n <div class=\"mrx-paginator\" [class]=\"getClasses\">\r\n <ul class=\"mrx-paginator__list\">\r\n <li\r\n class=\"mrx-paginator__previous\"\r\n [class.disabled]=\"currentPage <= 1\"\r\n (click)=\"currentPage > 1 && onChangeCurrentPage(currentPage - 1)\">\r\n <div class=\"mrx-icon icon-chevron-left icon-font-24\"></div>\r\n </li>\r\n\r\n <!-- \u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E 1 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0435\u0441\u043B\u0438 \u0432\u0441\u0435\u0433\u043E 0 \u0441\u0442\u0440\u0430\u043D\u0438\u0446 -->\r\n @if(getItems === 0) {\r\n <li class=\"mrx-paginator__item active\">1</li>\r\n }\r\n\r\n <!-- \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E getViewItems -->\r\n @for(item of getViewItems; track item.index) {\r\n <li\r\n class=\"mrx-paginator__item\"\r\n (click)=\"!item.isEllipsis && onChangeCurrentPage(item.index)\"\r\n [class.active]=\"currentPage === item.index && !item.isEllipsis\"\r\n [class.dots]=\"item.isEllipsis\"\r\n >\r\n {{item.isEllipsis ? '...' : item.index}}\r\n </li>\r\n }\r\n\r\n <li\r\n class=\"mrx-paginator__next\"\r\n [class.disabled]=\"currentPage >= getItems || getItems === 0\"\r\n (click)=\"currentPage < getItems && onChangeCurrentPage(currentPage + 1)\">\r\n <div class=\"mrx-icon icon-chevron-right icon-font-24\"></div>\r\n </li>\r\n </ul>\r\n\r\n @if (withPageSize) {\r\n <mrx-select\r\n [ngModel]=\"pageSize\"\r\n [size]=\"'medium'\"\r\n [items]=\"pageSizes\"\r\n [clearable]=\"false\"\r\n [searchable]=\"false\"\r\n [popupPosition]=\"popupPosition\"\r\n [singleChange]=\"true\"\r\n (ngModelChange)=\"onChangePageSize($event)\"\r\n ></mrx-select>\r\n }\r\n\r\n @if(isPaginatorText) {\r\n <div class=\"mrx-paginator__text\">\r\n \u041E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u044B {{paginatorText}} {{getFirstNumberCurrentPage}} - {{getLastNumberCurrentPage}} \u0438\u0437 {{total}}\r\n </div>\r\n }\r\n </div>\r\n}", styles: [":host::ng-deep .mrx-paginator{display:flex;align-items:center;list-style:none;padding-left:0;gap:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container{padding-left:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container .ng-value-container{min-width:36px;padding:0!important;min-height:auto}:host::ng-deep .mrx-paginator ul{display:flex;align-items:center;justify-content:center;list-style:none;padding:0;margin:0;gap:var(--spacing-1)}:host::ng-deep .mrx-paginator ul li{display:flex;align-items:center;justify-content:center;cursor:pointer}:host::ng-deep .mrx-paginator .mrx-paginator__item{padding-left:var(--spacing-3);padding-right:var(--spacing-3);min-width:32px;min-height:32px;border-radius:4px;font-weight:400;font-size:16px;line-height:24px;transition:.2s}:host::ng-deep .mrx-paginator .mrx-paginator__item.active{background-color:var(--brand-bg-primary-default);color:#fff}:host::ng-deep .mrx-paginator .mrx-paginator__item.dots,:host::ng-deep .mrx-paginator .mrx-paginator__item.disabled{cursor:default}:host::ng-deep .mrx-paginator .mrx-paginator__item:not(.dots,.active):hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-paginator .mrx-paginator__previous,:host::ng-deep .mrx-paginator .mrx-paginator__next{min-width:24px;min-height:24px}:host::ng-deep .mrx-paginator .mrx-paginator__previous.disabled .mrx-icon,:host::ng-deep .mrx-paginator .mrx-paginator__next.disabled .mrx-icon{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-paginator__text{font-size:16px;line-height:24px;color:var(--neutral-text-primary)}.mrx-paginator.mrx-paginator.paginator-centered{justify-content:center}.mrx-paginator.mrx-paginator.paginator-left{justify-content:flex-start}.mrx-paginator.mrx-paginator.paginator-right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "mrx-select", inputs: ["fields", "items", "multiple", "isLoading", "searchable", "clearable", "closable", "size", "bindValue", "bindLabel", "bindIcon", "emptyText", "placeholder", "searchPlaceholder", "multiCollapseCount", "isExtraOption", "extraOptionPlaceholder", "use", "sortIcon", "sortPlaceholder", "isFullWidthDropdown", "withoutSelected", "hideSelected", "addOption", "customSearchFn", "disabled", "readonly", "invalid", "invalidMessage", "checkInvalid", "popupPosition", "singleChange", "scrollContainer", "scrollStrategy"], outputs: ["changed", "modelChange"] }] });
|
|
4603
4638
|
}
|
|
4604
4639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
4605
4640
|
type: Component,
|
|
4606
|
-
args: [{ selector: 'mrx-paginator', template: "<div class=\"mrx-paginator\" [class]=\"getClasses\"
|
|
4641
|
+
args: [{ selector: 'mrx-paginator', template: "@if(isEmptyPaginator || total) {\r\n <div class=\"mrx-paginator\" [class]=\"getClasses\">\r\n <ul class=\"mrx-paginator__list\">\r\n <li\r\n class=\"mrx-paginator__previous\"\r\n [class.disabled]=\"currentPage <= 1\"\r\n (click)=\"currentPage > 1 && onChangeCurrentPage(currentPage - 1)\">\r\n <div class=\"mrx-icon icon-chevron-left icon-font-24\"></div>\r\n </li>\r\n\r\n <!-- \u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E 1 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0435\u0441\u043B\u0438 \u0432\u0441\u0435\u0433\u043E 0 \u0441\u0442\u0440\u0430\u043D\u0438\u0446 -->\r\n @if(getItems === 0) {\r\n <li class=\"mrx-paginator__item active\">1</li>\r\n }\r\n\r\n <!-- \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E getViewItems -->\r\n @for(item of getViewItems; track item.index) {\r\n <li\r\n class=\"mrx-paginator__item\"\r\n (click)=\"!item.isEllipsis && onChangeCurrentPage(item.index)\"\r\n [class.active]=\"currentPage === item.index && !item.isEllipsis\"\r\n [class.dots]=\"item.isEllipsis\"\r\n >\r\n {{item.isEllipsis ? '...' : item.index}}\r\n </li>\r\n }\r\n\r\n <li\r\n class=\"mrx-paginator__next\"\r\n [class.disabled]=\"currentPage >= getItems || getItems === 0\"\r\n (click)=\"currentPage < getItems && onChangeCurrentPage(currentPage + 1)\">\r\n <div class=\"mrx-icon icon-chevron-right icon-font-24\"></div>\r\n </li>\r\n </ul>\r\n\r\n @if (withPageSize) {\r\n <mrx-select\r\n [ngModel]=\"pageSize\"\r\n [size]=\"'medium'\"\r\n [items]=\"pageSizes\"\r\n [clearable]=\"false\"\r\n [searchable]=\"false\"\r\n [popupPosition]=\"popupPosition\"\r\n [singleChange]=\"true\"\r\n (ngModelChange)=\"onChangePageSize($event)\"\r\n ></mrx-select>\r\n }\r\n\r\n @if(isPaginatorText) {\r\n <div class=\"mrx-paginator__text\">\r\n \u041E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u044B {{paginatorText}} {{getFirstNumberCurrentPage}} - {{getLastNumberCurrentPage}} \u0438\u0437 {{total}}\r\n </div>\r\n }\r\n </div>\r\n}", styles: [":host::ng-deep .mrx-paginator{display:flex;align-items:center;list-style:none;padding-left:0;gap:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container{padding-left:var(--spacing-4)}:host::ng-deep .mrx-paginator .mrx-input-select .ng-select .ng-select-container .ng-value-container{min-width:36px;padding:0!important;min-height:auto}:host::ng-deep .mrx-paginator ul{display:flex;align-items:center;justify-content:center;list-style:none;padding:0;margin:0;gap:var(--spacing-1)}:host::ng-deep .mrx-paginator ul li{display:flex;align-items:center;justify-content:center;cursor:pointer}:host::ng-deep .mrx-paginator .mrx-paginator__item{padding-left:var(--spacing-3);padding-right:var(--spacing-3);min-width:32px;min-height:32px;border-radius:4px;font-weight:400;font-size:16px;line-height:24px;transition:.2s}:host::ng-deep .mrx-paginator .mrx-paginator__item.active{background-color:var(--brand-bg-primary-default);color:#fff}:host::ng-deep .mrx-paginator .mrx-paginator__item.dots,:host::ng-deep .mrx-paginator .mrx-paginator__item.disabled{cursor:default}:host::ng-deep .mrx-paginator .mrx-paginator__item:not(.dots,.active):hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-paginator .mrx-paginator__previous,:host::ng-deep .mrx-paginator .mrx-paginator__next{min-width:24px;min-height:24px}:host::ng-deep .mrx-paginator .mrx-paginator__previous.disabled .mrx-icon,:host::ng-deep .mrx-paginator .mrx-paginator__next.disabled .mrx-icon{color:var(--neutral-icon-disabled)}:host::ng-deep .mrx-paginator__text{font-size:16px;line-height:24px;color:var(--neutral-text-primary)}.mrx-paginator.mrx-paginator.paginator-centered{justify-content:center}.mrx-paginator.mrx-paginator.paginator-left{justify-content:flex-start}.mrx-paginator.mrx-paginator.paginator-right{justify-content:flex-end}\n"] }]
|
|
4607
4642
|
}], propDecorators: { pageSizes: [{
|
|
4608
4643
|
type: Input
|
|
4609
4644
|
}], currentPage: [{
|
|
@@ -5953,7 +5988,7 @@ class GalleryConfirmModalComponent extends ModalServiceComponent {
|
|
|
5953
5988
|
this.dialogRef.close(this.result);
|
|
5954
5989
|
}
|
|
5955
5990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryConfirmModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
5956
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryConfirmModalComponent, selector: "app-gallery-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n (close)=\"close()\"\r\n size=\"small\"\r\n color=\"negative\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <p class=\"text-center\">{{message}}</p>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"ok()\"\r\n >\u0423\u0434\u0430\u043B\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", dependencies: [{ kind: "component", 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"] }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }] });
|
|
5991
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryConfirmModalComponent, selector: "app-gallery-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n (close)=\"close()\"\r\n size=\"small\"\r\n color=\"negative\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <p class=\"text-center\">{{message}}</p>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"ok()\"\r\n >\u0423\u0434\u0430\u043B\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", dependencies: [{ kind: "component", 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"] }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back", "expand"] }] });
|
|
5957
5992
|
}
|
|
5958
5993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryConfirmModalComponent, decorators: [{
|
|
5959
5994
|
type: Component,
|
|
@@ -13518,7 +13553,7 @@ class FileImageEditModalComponent extends ModalServiceComponent {
|
|
|
13518
13553
|
this.dialogRef.close(this.result);
|
|
13519
13554
|
}
|
|
13520
13555
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
13521
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n [size]=\"'medium'\"\r\n (close)=\"cancel()\"\r\n>\r\n <div class=\"row\">\r\n <div class=\"col col-12\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n </div>\r\n\r\n <div class=\"col col-12\">\r\n <div class=\"mrx-input-image-cropper__wrapper\">\r\n <image-cropper\r\n format=\"png\"\r\n output=\"base64\"\r\n [alignImage]=\"'center'\"\r\n [imageFile]=\"fileImage\"\r\n [maintainAspectRatio]=\"maintainAspectRatio\"\r\n [containWithinAspectRatio]=\"true\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [backgroundColor]=\"'#000000'\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [cropperMaxWidth]=\"cropperMaxWidth\"\r\n [cropperMaxHeight]=\"cropperMaxHeight\"\r\n [resizeToWidth]=\"0\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded($event)\"\r\n (cropperReady)=\"cropperReady()\"\r\n ></image-cropper>\r\n\r\n <div class=\"mrx-input-image-cropper__controls\">\r\n <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n\r\n <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"cancel()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"ok()\"\r\n >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", 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"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
|
|
13556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n [size]=\"'medium'\"\r\n (close)=\"cancel()\"\r\n>\r\n <div class=\"row\">\r\n <div class=\"col col-12\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n </div>\r\n\r\n <div class=\"col col-12\">\r\n <div class=\"mrx-input-image-cropper__wrapper\">\r\n <image-cropper\r\n format=\"png\"\r\n output=\"base64\"\r\n [alignImage]=\"'center'\"\r\n [imageFile]=\"fileImage\"\r\n [maintainAspectRatio]=\"maintainAspectRatio\"\r\n [containWithinAspectRatio]=\"true\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [backgroundColor]=\"'#000000'\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [cropperMaxWidth]=\"cropperMaxWidth\"\r\n [cropperMaxHeight]=\"cropperMaxHeight\"\r\n [resizeToWidth]=\"0\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded($event)\"\r\n (cropperReady)=\"cropperReady()\"\r\n ></image-cropper>\r\n\r\n <div class=\"mrx-input-image-cropper__controls\">\r\n <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n\r\n <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"cancel()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"ok()\"\r\n >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back", "expand"] }, { kind: "component", 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"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
|
|
13522
13557
|
}
|
|
13523
13558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, decorators: [{
|
|
13524
13559
|
type: Component,
|