myrta-ui 17.1.55 → 17.1.56
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/checkbox/checkbox.component.mjs +11 -9
- package/esm2022/lib/components/form/checkbox-group/components/checkbox-group-item/checkbox-group-item.component.mjs +2 -2
- package/esm2022/lib/components/label/label.component.mjs +2 -2
- package/esm2022/lib/components/table/table.component.mjs +3 -3
- package/fesm2022/myrta-ui.mjs +10 -7
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/form/checkbox/checkbox.component.d.ts +2 -1
- package/package.json +1 -1
package/fesm2022/myrta-ui.mjs
CHANGED
|
@@ -1232,6 +1232,7 @@ class CheckboxComponent {
|
|
|
1232
1232
|
fields = [];
|
|
1233
1233
|
required = false;
|
|
1234
1234
|
boldLabel = false;
|
|
1235
|
+
enableLabel = true;
|
|
1235
1236
|
indeterminate = false;
|
|
1236
1237
|
disabled = false;
|
|
1237
1238
|
readonly = false;
|
|
@@ -1297,14 +1298,14 @@ class CheckboxComponent {
|
|
|
1297
1298
|
this.tooltipService.initTooltip(this._tooltip, this._tooltipInitialVisible);
|
|
1298
1299
|
}
|
|
1299
1300
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: TooltipService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1300
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1301
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxComponent, selector: "mrx-checkbox", inputs: { fields: "fields", required: "required", boldLabel: "boldLabel", enableLabel: "enableLabel", indeterminate: "indeterminate", disabled: "disabled", readonly: "readonly", label: "label", customClasses: "customClasses", customWrapperClasses: "customWrapperClasses", invalid: "invalid", checkInvalid: "checkInvalid", tooltip: "tooltip", tooltipInitialVisible: "tooltipInitialVisible", isSaveToStorage: "isSaveToStorage" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
1301
1302
|
TooltipService,
|
|
1302
1303
|
{
|
|
1303
1304
|
provide: NG_VALUE_ACCESSOR,
|
|
1304
1305
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1305
1306
|
multi: true,
|
|
1306
1307
|
},
|
|
1307
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], ngImport: i0, template: "<div\r\n #input\r\n class=\"mrx-checkbox-wrapper\"\r\n [class]=\"getWrapperClasses\"\r\n>\r\n <label\r\n class=\"mrx-checkbox\"\r\n [class]=\"getClasses\"\r\n [class.mrx-checkbox-indeterminate]=\"indeterminate\"\r\n [class.mrx-checkbox-error]=\"invalid\"\r\n [class.mrx-checkbox-input-disabled]=\"disabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [disabled]=\"disabled || readonly\"\r\n [readonly]=\"readonly\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n />\r\n <span class=\"mrx-checkbox-mark\">\r\n <span class=\"mrx-icon icon-check icon-font-12 text-bold\"
|
|
1308
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelContent", first: true, predicate: ["labelContent"], descendants: true }], ngImport: i0, template: "<div\r\n #input\r\n class=\"mrx-checkbox-wrapper\"\r\n [class]=\"getWrapperClasses\"\r\n>\r\n <label\r\n class=\"mrx-checkbox\"\r\n [class]=\"getClasses\"\r\n [class.mrx-checkbox-indeterminate]=\"indeterminate\"\r\n [class.mrx-checkbox-error]=\"invalid\"\r\n [class.mrx-checkbox-input-disabled]=\"disabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [disabled]=\"disabled || readonly\"\r\n [readonly]=\"readonly\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n />\r\n <span class=\"mrx-checkbox-mark\">\r\n @if (!indeterminate) {\r\n <span class=\"mrx-icon icon-check icon-font-12 text-bold\"></span>\r\n }\r\n </span>\r\n\r\n @if (enableLabel) {\r\n <span\r\n #labelContent\r\n [class]=\"boldLabel ? 'mrx-checkbox-label mrx-checkbox-label-bold' : 'mrx-checkbox-label'\"\r\n >\r\n {{ label }}\r\n\r\n <ng-content></ng-content>\r\n\r\n @if (required && !disabled) {\r\n <span class=\"required-active\">*</span>\r\n }\r\n </span>\r\n }\r\n </label>\r\n\r\n @if (tooltipService.getTooltip) {\r\n <mrx-tooltip-trigger\r\n (toggleTooltip)=\"tooltipService.toggleTooltipVisible()\"\r\n [isVisibleTooltip]=\"tooltipService.getTooltipVisible\"\r\n ></mrx-tooltip-trigger>\r\n }\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkbox\"></mrx-save-state>\r\n</div>\r\n\r\n@if (tooltipService.getTooltip) {\r\n <mrx-tooltip [tooltip]=\"tooltipService.getTooltip\" [tooltipVisible]=\"tooltipService.getTooltipVisible\"></mrx-tooltip>\r\n}\r\n", styles: [".mrx-checkbox{display:inline-flex;align-items:flex-start;position:relative;gap:var(--spacing-2)}.mrx-checkbox:hover .mrx-checkbox-mark{border-color:var(--neutral-bg-stroke-hover)}.mrx-checkbox:hover.mrx-input-disabled .mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox input[type=checkbox]{min-height:auto;position:absolute;left:0;opacity:0;height:var(--sizing-4);width:var(--sizing-4);z-index:2;padding:0;margin:2px 0 0;cursor:pointer}.mrx-checkbox-wrapper{display:flex;align-items:center;justify-content:flex-start;position:relative}.mrx-checkbox .mrx-checkbox-label{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary);-webkit-user-select:none;user-select:none;cursor:pointer}.mrx-checkbox .mrx-checkbox-label-bold{font-weight:var(--body-md-bold-font-weight)}.mrx-checkbox .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative);margin-left:var(--spacing-1);position:relative;display:inline-block}.mrx-checkbox .mrx-checkbox-mark{display:block;height:var(--sizing-4);width:var(--sizing-4);min-width:var(--sizing-4);border:var(--border-width-checkbox) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);position:relative;margin-top:2px}.mrx-checkbox .mrx-checkbox-mark .mrx-icon{color:#fff;position:absolute;top:0;left:0;display:none}.mrx-checkbox input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--brand-bg-primary-default);background:var(--brand-bg-primary-default)}.mrx-checkbox input[type=checkbox]:checked+.mrx-checkbox-mark .mrx-icon{display:block}.mrx-checkbox input[type=checkbox][readonly]{cursor:default}.mrx-checkbox input[type=checkbox][readonly]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox input[type=checkbox][readonly]+.mrx-checkbox-mark{cursor:default;border-color:var(--neutral-control-bg-accent-disabled);background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox input[type=checkbox][readonly]+.mrx-checkbox-mark+.mrx-checkbox-label{cursor:default}.mrx-checkbox.mrx-checkbox-indeterminate .mrx-checkbox-mark{display:flex;align-items:center;justify-content:center}.mrx-checkbox.mrx-checkbox-indeterminate .mrx-checkbox-mark:after{content:\"\";display:block;width:6px;height:2px;background-color:var(--brand-bg-primary-default);border-radius:var(--border-radius-1)}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled:hover .mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled:hover .mrx-checkbox-mark:after{background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled .mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled .mrx-checkbox-mark:after{background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--neutral-bg-stroke-default);background:transparent}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]{cursor:default}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]+.mrx-checkbox-mark{cursor:default;background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]+.mrx-checkbox-mark+.mrx-checkbox-label{cursor:default}.mrx-checkbox.mrx-checkbox-error .mrx-checkbox-mark,.mrx-checkbox.mrx-input-checked-error .mrx-checkbox-mark{border-color:var(--system-bg-controls-negative-default)}.mrx-checkbox.mrx-input-checked-success input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-controls-positive-default)}.mrx-checkbox.mrx-input-checked-success .mrx-checkbox-mark{border-color:var(--system-bg-controls-positive-default)}.mrx-checkbox.mrx-checkbox-input-disabled input[type=checkbox]{cursor:default}.mrx-checkbox.mrx-checkbox-input-disabled input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-input-disabled input[type=checkbox]:checked+.mrx-checkbox-mark .mrx-icon{display:block}.mrx-checkbox.mrx-checkbox-input-disabled .mrx-checkbox-mark{cursor:default;border-color:var(--neutral-control-bg-accent-disabled);background:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-input-disabled .mrx-checkbox-label{cursor:default}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: TooltipComponent, selector: "mrx-tooltip", inputs: ["tooltip", "tooltipVisible", "tooltipInitiallyVisible", "triggerType"], outputs: ["visibilityChanged"] }, { kind: "component", type: TooltipTriggerComponent, selector: "mrx-tooltip-trigger", inputs: ["triggerTextPosition", "triggerType", "customClasses", "isVisibleTooltip"], outputs: ["toggleTooltip"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1308
1309
|
}
|
|
1309
1310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1310
1311
|
type: Component,
|
|
@@ -1315,13 +1316,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1315
1316
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1316
1317
|
multi: true,
|
|
1317
1318
|
},
|
|
1318
|
-
], template: "<div\r\n #input\r\n class=\"mrx-checkbox-wrapper\"\r\n [class]=\"getWrapperClasses\"\r\n>\r\n <label\r\n class=\"mrx-checkbox\"\r\n [class]=\"getClasses\"\r\n [class.mrx-checkbox-indeterminate]=\"indeterminate\"\r\n [class.mrx-checkbox-error]=\"invalid\"\r\n [class.mrx-checkbox-input-disabled]=\"disabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [disabled]=\"disabled || readonly\"\r\n [readonly]=\"readonly\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n />\r\n <span class=\"mrx-checkbox-mark\">\r\n <span class=\"mrx-icon icon-check icon-font-12 text-bold\"
|
|
1319
|
+
], template: "<div\r\n #input\r\n class=\"mrx-checkbox-wrapper\"\r\n [class]=\"getWrapperClasses\"\r\n>\r\n <label\r\n class=\"mrx-checkbox\"\r\n [class]=\"getClasses\"\r\n [class.mrx-checkbox-indeterminate]=\"indeterminate\"\r\n [class.mrx-checkbox-error]=\"invalid\"\r\n [class.mrx-checkbox-input-disabled]=\"disabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n [disabled]=\"disabled || readonly\"\r\n [readonly]=\"readonly\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"updateValue($event)\"\r\n />\r\n <span class=\"mrx-checkbox-mark\">\r\n @if (!indeterminate) {\r\n <span class=\"mrx-icon icon-check icon-font-12 text-bold\"></span>\r\n }\r\n </span>\r\n\r\n @if (enableLabel) {\r\n <span\r\n #labelContent\r\n [class]=\"boldLabel ? 'mrx-checkbox-label mrx-checkbox-label-bold' : 'mrx-checkbox-label'\"\r\n >\r\n {{ label }}\r\n\r\n <ng-content></ng-content>\r\n\r\n @if (required && !disabled) {\r\n <span class=\"required-active\">*</span>\r\n }\r\n </span>\r\n }\r\n </label>\r\n\r\n @if (tooltipService.getTooltip) {\r\n <mrx-tooltip-trigger\r\n (toggleTooltip)=\"tooltipService.toggleTooltipVisible()\"\r\n [isVisibleTooltip]=\"tooltipService.getTooltipVisible\"\r\n ></mrx-tooltip-trigger>\r\n }\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkbox\"></mrx-save-state>\r\n</div>\r\n\r\n@if (tooltipService.getTooltip) {\r\n <mrx-tooltip [tooltip]=\"tooltipService.getTooltip\" [tooltipVisible]=\"tooltipService.getTooltipVisible\"></mrx-tooltip>\r\n}\r\n", styles: [".mrx-checkbox{display:inline-flex;align-items:flex-start;position:relative;gap:var(--spacing-2)}.mrx-checkbox:hover .mrx-checkbox-mark{border-color:var(--neutral-bg-stroke-hover)}.mrx-checkbox:hover.mrx-input-disabled .mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox input[type=checkbox]{min-height:auto;position:absolute;left:0;opacity:0;height:var(--sizing-4);width:var(--sizing-4);z-index:2;padding:0;margin:2px 0 0;cursor:pointer}.mrx-checkbox-wrapper{display:flex;align-items:center;justify-content:flex-start;position:relative}.mrx-checkbox .mrx-checkbox-label{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary);-webkit-user-select:none;user-select:none;cursor:pointer}.mrx-checkbox .mrx-checkbox-label-bold{font-weight:var(--body-md-bold-font-weight)}.mrx-checkbox .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative);margin-left:var(--spacing-1);position:relative;display:inline-block}.mrx-checkbox .mrx-checkbox-mark{display:block;height:var(--sizing-4);width:var(--sizing-4);min-width:var(--sizing-4);border:var(--border-width-checkbox) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);position:relative;margin-top:2px}.mrx-checkbox .mrx-checkbox-mark .mrx-icon{color:#fff;position:absolute;top:0;left:0;display:none}.mrx-checkbox input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--brand-bg-primary-default);background:var(--brand-bg-primary-default)}.mrx-checkbox input[type=checkbox]:checked+.mrx-checkbox-mark .mrx-icon{display:block}.mrx-checkbox input[type=checkbox][readonly]{cursor:default}.mrx-checkbox input[type=checkbox][readonly]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox input[type=checkbox][readonly]+.mrx-checkbox-mark{cursor:default;border-color:var(--neutral-control-bg-accent-disabled);background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox input[type=checkbox][readonly]+.mrx-checkbox-mark+.mrx-checkbox-label{cursor:default}.mrx-checkbox.mrx-checkbox-indeterminate .mrx-checkbox-mark{display:flex;align-items:center;justify-content:center}.mrx-checkbox.mrx-checkbox-indeterminate .mrx-checkbox-mark:after{content:\"\";display:block;width:6px;height:2px;background-color:var(--brand-bg-primary-default);border-radius:var(--border-radius-1)}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled:hover .mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled:hover .mrx-checkbox-mark:after{background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled .mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate.mrx-checkbox-input-disabled .mrx-checkbox-mark:after{background-color:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--neutral-bg-stroke-default);background:transparent}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]{cursor:default}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]+.mrx-checkbox-mark{cursor:default;background-color:transparent}.mrx-checkbox.mrx-checkbox-indeterminate input[type=checkbox][readonly]+.mrx-checkbox-mark+.mrx-checkbox-label{cursor:default}.mrx-checkbox.mrx-checkbox-error .mrx-checkbox-mark,.mrx-checkbox.mrx-input-checked-error .mrx-checkbox-mark{border-color:var(--system-bg-controls-negative-default)}.mrx-checkbox.mrx-input-checked-success input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-controls-positive-default)}.mrx-checkbox.mrx-input-checked-success .mrx-checkbox-mark{border-color:var(--system-bg-controls-positive-default)}.mrx-checkbox.mrx-checkbox-input-disabled input[type=checkbox]{cursor:default}.mrx-checkbox.mrx-checkbox-input-disabled input[type=checkbox]:checked+.mrx-checkbox-mark{border-color:var(--neutral-control-bg-accent-disabled);background:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-input-disabled input[type=checkbox]:checked+.mrx-checkbox-mark .mrx-icon{display:block}.mrx-checkbox.mrx-checkbox-input-disabled .mrx-checkbox-mark{cursor:default;border-color:var(--neutral-control-bg-accent-disabled);background:var(--neutral-control-bg-accent-disabled)}.mrx-checkbox.mrx-checkbox-input-disabled .mrx-checkbox-label{cursor:default}\n"] }]
|
|
1319
1320
|
}], ctorParameters: () => [{ type: TooltipService }], propDecorators: { fields: [{
|
|
1320
1321
|
type: Input
|
|
1321
1322
|
}], required: [{
|
|
1322
1323
|
type: Input
|
|
1323
1324
|
}], boldLabel: [{
|
|
1324
1325
|
type: Input
|
|
1326
|
+
}], enableLabel: [{
|
|
1327
|
+
type: Input
|
|
1325
1328
|
}], indeterminate: [{
|
|
1326
1329
|
type: Input
|
|
1327
1330
|
}], disabled: [{
|
|
@@ -1417,7 +1420,7 @@ class LabelComponent {
|
|
|
1417
1420
|
this.clickedLink.emit(event);
|
|
1418
1421
|
}
|
|
1419
1422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LabelComponent, deps: [{ token: TooltipService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1420
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LabelComponent, selector: "mrx-label", inputs: { requiredHidden: "requiredHidden", required: "required", boldLabel: "boldLabel", disabled: "disabled", placeholder: "placeholder", label: "label", customClasses: "customClasses", triggerTextPosition: "triggerTextPosition", isPublicInfo: "isPublicInfo", publicInfoTooltip: "publicInfoTooltip", isSwitch: "isSwitch", switchLabel: "switchLabel", switchValue: "switchValue", isCheckbox: "isCheckbox", checkboxLabel: "checkboxLabel", checkboxValue: "checkboxValue", counter: "counter", linkText: "linkText", linkPrevent: "linkPrevent", linkType: "linkType", linkMonochrome: "linkMonochrome", href: "href", triggerType: "triggerType", tooltip: "tooltip", tooltipInitialVisible: "tooltipInitialVisible", isSaveToStorage: "isSaveToStorage" }, outputs: { changeSwitchValue: "changeSwitchValue", changeCheckboxValue: "changeCheckboxValue", clickedLink: "clickedLink" }, providers: [TooltipService], queries: [{ propertyName: "customIcons", first: true, predicate: ["customIcons"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-label-wrapper mb-2\">\r\n <div class=\"mrx-label-content d-flex align-items-start\" [class.mr-2]=\"isSwitch\">\r\n <div class=\"d-flex\" [class.py-1-half]=\"boldLabel\">\r\n <label\r\n class=\"mrx-label\"\r\n [class]=\"getClasses\"\r\n [class.required]=\"required\"\r\n [class.bold-label]=\"boldLabel\"\r\n >\r\n <ng-content></ng-content>\r\n\r\n @if (required && !disabled && !requiredHidden) {\r\n <span class=\"required-active\">*</span>\r\n }\r\n\r\n @if (isPublicInfo) {\r\n <span class=\"mrx-icon icon-megafon ml-1\" [mrxCdkTooltip]=\"publicInfoTooltip\"></span>\r\n }\r\n\r\n @if (tooltipService.getTooltip) {\r\n <mrx-tooltip-trigger\r\n customClasses=\"ml-1\"\r\n (toggleTooltip)=\"tooltipService.toggleTooltipVisible()\"\r\n [isVisibleTooltip]=\"tooltipService.getTooltipVisible\"\r\n [triggerTextPosition]=\"triggerTextPosition\"\r\n [triggerType]=\"triggerType\"\r\n ></mrx-tooltip-trigger>\r\n }\r\n\r\n <ng-container *ngTemplateOutlet=\"customIcons\"></ng-container>\r\n </label>\r\n </div>\r\n\r\n @if (counter) {\r\n <mrx-badge customClasses=\"ml-2\" type=\"circle\" size=\"small\">{{ counter }}</mrx-badge>\r\n }\r\n </div>\r\n\r\n @if (isSwitch) {\r\n <mrx-switch\r\n [boldLabel]=\"boldLabel\"\r\n [label]=\"switchLabel\"\r\n [ngModel]=\"switchValue\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"changeCheckboxValue.emit($event)\"\r\n ></mrx-switch>\r\n }\r\n\r\n @if (isCheckbox) {\r\n <mrx-checkbox\r\n [boldLabel]=\"boldLabel\"\r\n [label]=\"checkboxLabel\"\r\n [ngModel]=\"checkboxValue\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"changeCheckboxValue.emit($event)\"\r\n ></mrx-checkbox>\r\n }\r\n\r\n @if (linkText) {\r\n <mrx-link\r\n [prevent]=\"linkPrevent\"\r\n [type]=\"linkType\"\r\n [monochrome]=\"linkMonochrome\"\r\n (click)=\"onClickToLink($event)\"\r\n >\r\n {{ linkText }}\r\n </mrx-link>\r\n }\r\n</div>\r\n\r\n@if (tooltipService.getTooltip) {\r\n <mrx-tooltip\r\n [tooltip]=\"tooltipService.getTooltip\"\r\n [tooltipVisible]=\"tooltipService.getTooltipVisible\"\r\n [triggerType]=\"triggerType\"\r\n ></mrx-tooltip>\r\n}\r\n\r\n", styles: [".mrx-label-wrapper.mrx-label-wrapper{display:flex;align-items:flex-start;justify-content:space-between}.mrx-label-wrapper.mrx-label-wrapper .py-1-half{padding:var(--spacing-half, 2px) 0}.mrx-label.mrx-label{display:inline-block;min-height:20px;color:var(--neutral-text-primary)}.mrx-label.mrx-label:not(.mrx-label.mrx-label.bold-label){font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-label.mrx-label.bold-label{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-label.mrx-label .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative);margin-left:var(--spacing-1);position:relative;display:inline-block}::ng-deep .mrx-label-wrapper .mrx-switch{white-space:nowrap}::ng-deep mrx-tooltip-trigger{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TooltipComponent, selector: "mrx-tooltip", inputs: ["tooltip", "tooltipVisible", "tooltipInitiallyVisible", "triggerType"], outputs: ["visibilityChanged"] }, { kind: "component", type: TooltipTriggerComponent, selector: "mrx-tooltip-trigger", inputs: ["triggerTextPosition", "triggerType", "customClasses", "isVisibleTooltip"], outputs: ["toggleTooltip"] }, { kind: "component", type: SwitchComponent, selector: "mrx-switch", inputs: ["fields", "size", "type", "label", "boldLabel", "disabled", "readonly", "required", "customClasses", "leftText", "rightText"], outputs: ["changed", "modelChange"] }, { kind: "component", type: BadgeComponent, selector: "mrx-badge", inputs: ["type", "tag", "size", "color", "customColor", "text", "path", "customClasses", "target"], outputs: ["clicked"] }, { kind: "component", type: LinkComponent, selector: "mrx-link", inputs: ["href", "target", "routerLink", "queryParams", "type", "monochrome", "customClasses", "prevent", "size"], outputs: ["clicked"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "component", type: CheckboxComponent, selector: "mrx-checkbox", inputs: ["fields", "required", "boldLabel", "indeterminate", "disabled", "readonly", "label", "customClasses", "customWrapperClasses", "invalid", "checkInvalid", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changed", "modelChange"] }], animations: [
|
|
1423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LabelComponent, selector: "mrx-label", inputs: { requiredHidden: "requiredHidden", required: "required", boldLabel: "boldLabel", disabled: "disabled", placeholder: "placeholder", label: "label", customClasses: "customClasses", triggerTextPosition: "triggerTextPosition", isPublicInfo: "isPublicInfo", publicInfoTooltip: "publicInfoTooltip", isSwitch: "isSwitch", switchLabel: "switchLabel", switchValue: "switchValue", isCheckbox: "isCheckbox", checkboxLabel: "checkboxLabel", checkboxValue: "checkboxValue", counter: "counter", linkText: "linkText", linkPrevent: "linkPrevent", linkType: "linkType", linkMonochrome: "linkMonochrome", href: "href", triggerType: "triggerType", tooltip: "tooltip", tooltipInitialVisible: "tooltipInitialVisible", isSaveToStorage: "isSaveToStorage" }, outputs: { changeSwitchValue: "changeSwitchValue", changeCheckboxValue: "changeCheckboxValue", clickedLink: "clickedLink" }, providers: [TooltipService], queries: [{ propertyName: "customIcons", first: true, predicate: ["customIcons"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-label-wrapper mb-2\">\r\n <div class=\"mrx-label-content d-flex align-items-start\" [class.mr-2]=\"isSwitch\">\r\n <div class=\"d-flex\" [class.py-1-half]=\"boldLabel\">\r\n <label\r\n class=\"mrx-label\"\r\n [class]=\"getClasses\"\r\n [class.required]=\"required\"\r\n [class.bold-label]=\"boldLabel\"\r\n >\r\n <ng-content></ng-content>\r\n\r\n @if (required && !disabled && !requiredHidden) {\r\n <span class=\"required-active\">*</span>\r\n }\r\n\r\n @if (isPublicInfo) {\r\n <span class=\"mrx-icon icon-megafon ml-1\" [mrxCdkTooltip]=\"publicInfoTooltip\"></span>\r\n }\r\n\r\n @if (tooltipService.getTooltip) {\r\n <mrx-tooltip-trigger\r\n customClasses=\"ml-1\"\r\n (toggleTooltip)=\"tooltipService.toggleTooltipVisible()\"\r\n [isVisibleTooltip]=\"tooltipService.getTooltipVisible\"\r\n [triggerTextPosition]=\"triggerTextPosition\"\r\n [triggerType]=\"triggerType\"\r\n ></mrx-tooltip-trigger>\r\n }\r\n\r\n <ng-container *ngTemplateOutlet=\"customIcons\"></ng-container>\r\n </label>\r\n </div>\r\n\r\n @if (counter) {\r\n <mrx-badge customClasses=\"ml-2\" type=\"circle\" size=\"small\">{{ counter }}</mrx-badge>\r\n }\r\n </div>\r\n\r\n @if (isSwitch) {\r\n <mrx-switch\r\n [boldLabel]=\"boldLabel\"\r\n [label]=\"switchLabel\"\r\n [ngModel]=\"switchValue\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"changeCheckboxValue.emit($event)\"\r\n ></mrx-switch>\r\n }\r\n\r\n @if (isCheckbox) {\r\n <mrx-checkbox\r\n [boldLabel]=\"boldLabel\"\r\n [label]=\"checkboxLabel\"\r\n [ngModel]=\"checkboxValue\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"changeCheckboxValue.emit($event)\"\r\n ></mrx-checkbox>\r\n }\r\n\r\n @if (linkText) {\r\n <mrx-link\r\n [prevent]=\"linkPrevent\"\r\n [type]=\"linkType\"\r\n [monochrome]=\"linkMonochrome\"\r\n (click)=\"onClickToLink($event)\"\r\n >\r\n {{ linkText }}\r\n </mrx-link>\r\n }\r\n</div>\r\n\r\n@if (tooltipService.getTooltip) {\r\n <mrx-tooltip\r\n [tooltip]=\"tooltipService.getTooltip\"\r\n [tooltipVisible]=\"tooltipService.getTooltipVisible\"\r\n [triggerType]=\"triggerType\"\r\n ></mrx-tooltip>\r\n}\r\n\r\n", styles: [".mrx-label-wrapper.mrx-label-wrapper{display:flex;align-items:flex-start;justify-content:space-between}.mrx-label-wrapper.mrx-label-wrapper .py-1-half{padding:var(--spacing-half, 2px) 0}.mrx-label.mrx-label{display:inline-block;min-height:20px;color:var(--neutral-text-primary)}.mrx-label.mrx-label:not(.mrx-label.mrx-label.bold-label){font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-label.mrx-label.bold-label{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-label.mrx-label .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative);margin-left:var(--spacing-1);position:relative;display:inline-block}::ng-deep .mrx-label-wrapper .mrx-switch{white-space:nowrap}::ng-deep mrx-tooltip-trigger{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TooltipComponent, selector: "mrx-tooltip", inputs: ["tooltip", "tooltipVisible", "tooltipInitiallyVisible", "triggerType"], outputs: ["visibilityChanged"] }, { kind: "component", type: TooltipTriggerComponent, selector: "mrx-tooltip-trigger", inputs: ["triggerTextPosition", "triggerType", "customClasses", "isVisibleTooltip"], outputs: ["toggleTooltip"] }, { kind: "component", type: SwitchComponent, selector: "mrx-switch", inputs: ["fields", "size", "type", "label", "boldLabel", "disabled", "readonly", "required", "customClasses", "leftText", "rightText"], outputs: ["changed", "modelChange"] }, { kind: "component", type: BadgeComponent, selector: "mrx-badge", inputs: ["type", "tag", "size", "color", "customColor", "text", "path", "customClasses", "target"], outputs: ["clicked"] }, { kind: "component", type: LinkComponent, selector: "mrx-link", inputs: ["href", "target", "routerLink", "queryParams", "type", "monochrome", "customClasses", "prevent", "size"], outputs: ["clicked"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "component", type: CheckboxComponent, selector: "mrx-checkbox", inputs: ["fields", "required", "boldLabel", "enableLabel", "indeterminate", "disabled", "readonly", "label", "customClasses", "customWrapperClasses", "invalid", "checkInvalid", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changed", "modelChange"] }], animations: [
|
|
1421
1424
|
trigger('openClose', [
|
|
1422
1425
|
state('open', style({ height: '*', padding: '*', 'margin-bottom': '8px' })),
|
|
1423
1426
|
state('closed', style({ height: 0, padding: 0, 'margin-bottom': 0 })),
|
|
@@ -5220,7 +5223,7 @@ class TableComponent {
|
|
|
5220
5223
|
this.isOpenSort = isOpen;
|
|
5221
5224
|
}
|
|
5222
5225
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5223
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", popupPosition: "popupPosition", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", loaderSettings: "loaderSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header py-12px mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th\r\n *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container\r\n *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "dropdownPosition", "popupPosition", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }], animations: [
|
|
5226
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "mrx-table", inputs: { type: "type", data: "data", pageSize: "pageSize", currentPage: "currentPage", total: "total", link: "link", isLoading: "isLoading", sort: "sort", trackById: "trackById", sortable: "sortable", striped: "striped", customClasses: "customClasses", emptyResultMsg: "emptyResultMsg", hovered: "hovered", popupPosition: "popupPosition", autoHeight: "autoHeight", headerSettings: "headerSettings", contentSettings: "contentSettings", paginatorSettings: "paginatorSettings", loaderSettings: "loaderSettings", setPageable: ["pageable", "setPageable"] }, outputs: { dataStateChanged: "dataStateChanged", downloadData: "downloadData", changeTypeTable: "changeTypeTable", change: "change" }, queries: [{ propertyName: "templateCard", first: true, predicate: ["templateCard"], descendants: true }, { propertyName: "emptyResultMsgTemplate", first: true, predicate: ["emptyResultMsgTemplate"], descendants: true }, { propertyName: "contentChildren", predicate: ColumnComponent }], ngImport: i0, template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n @if (headerSettings) {\r\n @switch (headerSettings.type) {\r\n @case ('second') {\r\n <div class=\"mrx-table-card-header mb-3 pt-2 pb-2\" [class.--substrate]=\"headerSettings.substrate\">\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @default {\r\n <div class=\"mrx-table-card-header py-12px mb-3\" [class.--substrate]=\"headerSettings.substrate\">\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"sortTemplate\"></ng-container>\r\n\r\n @if (headerSettings.toggle) {\r\n <div class=\"ml-4\">\r\n <ng-container [ngTemplateOutlet]=\"toggleTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n @switch (type) {\r\n @case ('cards') {\r\n <div class=\"mrx-table__wrapper\">\r\n @for (item of data; let index = $index; let first = $first; let last = $last; track item[trackById] || index) {\r\n <ng-container [ngTemplateOutlet]=\"templateCard\" [ngTemplateOutletContext]=\"{item, index, first, last}\"></ng-container>\r\n }\r\n\r\n @if (!data.length) {\r\n <div class=\"mrx-table__result-message--substrate\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\"\r\n ></ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n }\r\n @default {\r\n <div class=\"mrx-table__wrapper\" [class.--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n @for (col of contentChildren; let index = $index; let first = $first; let last = $last; track index) {\r\n <th [class]=\"col.customClasses\">\r\n @if (!col.templateHead) {\r\n @if (col.sortable) {\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n } @else {\r\n <div><span>{{ col.label }}</span></div>\r\n }\r\n } @else {\r\n @if (col.sortable) {\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"col.templateHead\"\r\n [ngTemplateOutletContext]=\"{col, index, first, last}\"\r\n ></ng-container>\r\n\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"col.templateHead\"\r\n [ngTemplateOutletContext]=\"{col, index, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (dataItem of data; let index = $index; let first = $first; let last = $last; track dataItem[trackById] || index) {\r\n <tr [class.-hovered]=\"hovered\">\r\n @for (col of contentChildren; let index = $index; let first = $first; let last = $last; track index) {\r\n <td #tableTD class=\"p-0\" [class]=\"col.customClasses\">\r\n @if (link && col['isLink']) {\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\"></a>\r\n }\r\n\r\n @if (!col.templateCell) {\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n } @else {\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"col.templateCell\"\r\n [ngTemplateOutletContext]=\"{col, row: dataItem, index, first, last}\"\r\n ></ng-container>\r\n </div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (!data.length) {\r\n <div class=\"mrx-table__result-message\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\"\r\n ></ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n\r\n@if (total) {\r\n <div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\">\r\n @if (pageable) {\r\n <mrx-paginator\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #counterTemplate>\r\n @if (headerSettings && headerSettings.count) {\r\n <span class=\"mrx-table-counter\">\r\n {{ total }} {{ headerSettings && headerSettings.countText ? headerSettings.countText : '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n @if (headerSettings && headerSettings.sort) {\r\n <div class=\"d-flex mrx-table-sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n @if (sort && sort.dir === 'desc') {\r\n <span class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n }\r\n @if (sort && sort.dir === 'asc') {\r\n <span class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n @if (headerSettings && headerSettings.download) {\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header.--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper.--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "mrx-paginator", inputs: ["pageSizes", "currentPage", "pageSize", "total", "customClasses", "isEmptyPaginator", "isPaginatorText", "paginatorText", "dropdownPosition", "popupPosition", "position", "withPageSize"], outputs: ["dataStateChanged"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown", "maxWidthDropdown", "scrollContainerRef", "scrollStrategy"] }], animations: [
|
|
5224
5227
|
trigger('visibleLoading', [
|
|
5225
5228
|
state('in', style({ opacity: 1, visibility: 'visible' })),
|
|
5226
5229
|
state('out', style({ opacity: 0, visibility: 'hidden' })),
|
|
@@ -5250,7 +5253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5250
5253
|
animate('300ms ease-in-out', style({ opacity: 1 }))
|
|
5251
5254
|
])])
|
|
5252
5255
|
])
|
|
5253
|
-
], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n <ng-container *ngIf=\"headerSettings\">\r\n <div\r\n class=\"mrx-table-card-header py-12px mb-3\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'default'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n <div class=\"ml-4\" *ngIf=\"headerSettings.toggle\">\r\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-table-card-header mb-3 pt-2 pb-2\"\r\n [class.mrx-table-card-header--substrate]=\"headerSettings.substrate\"\r\n *ngIf=\"headerSettings.type === 'second'\"\r\n >\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container *ngTemplateOutlet=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container [ngSwitch]=\"type\">\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'default'\"\r\n [class.mrx-table__wrapper--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n <th\r\n *ngFor=\"let col of contentChildren; let index = index; let first = first; let last = last; trackBy: trackByFn\"\r\n [class]=\"col.customClasses\">\r\n <ng-container *ngIf=\"!col.templateHead; else headerItemTemplate\">\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <div><span>{{ col.label }}</span></div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #headerItemTemplate>\r\n <ng-container *ngIf=\"col.sortable; else defaultHeadCol\">\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col }\"></ng-container>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-template #defaultHeadCol>\r\n <ng-container\r\n *ngTemplateOutlet=\"col.templateHead; context: { $implicit: col, index, first, last }\"></ng-container>\r\n </ng-template>\r\n </ng-template>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let dataItem of data; let index = index; let first = first; let last = last\"\r\n [class.-hovered]=\"hovered\">\r\n <td\r\n #tableTD\r\n class=\"p-0\"\r\n *ngFor=\"let col of contentChildren\"\r\n [class]=\"col.customClasses\"\r\n >\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\" *ngIf=\"link && col['isLink']\"></a>\r\n\r\n <ng-container *ngIf=\"!col.templateCell; else bodyItemTemplate\">\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n </ng-container>\r\n\r\n <ng-template #bodyItemTemplate>\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container *ngTemplateOutlet=\"col.templateCell; context: { $implicit: col, row: dataItem, index, first, last }\"></ng-container>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"mrx-table__result-message\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table__wrapper\" *ngSwitchCase=\"'cards'\">\r\n <ng-container *ngFor=\"let item of data; let index = index; let first = first; let last = last\">\r\n <ng-container *ngTemplateOutlet=\"templateCard; context: { $implicit: item, index, first, last }\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"mrx-table__result-message--substrate\" *ngIf=\"!data.length\">\r\n <ng-container *ngTemplateOutlet=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\" *ngIf=\"total\">\r\n <mrx-paginator\r\n *ngIf=\"pageable\"\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n</div>\r\n\r\n<ng-template #counterTemplate>\r\n <span class=\"mrx-table-counter\" *ngIf=\"headerSettings?.count\">\r\n {{ total }} {{ headerSettings?.countText || '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n <div class=\"d-flex mrx-table-sort\" *ngIf=\"headerSettings?.sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n <span *ngIf=\"sort?.dir === 'desc'\" class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n <span *ngIf=\"sort?.dir === 'asc'\" class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\" *ngIf=\"headerSettings?.download\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
|
|
5256
|
+
], template: "<div class=\"mrx-table\" [class]=\"getClasses\" [class.mb-3]=\"pageable\">\r\n @if (headerSettings) {\r\n @switch (headerSettings.type) {\r\n @case ('second') {\r\n <div class=\"mrx-table-card-header mb-3 pt-2 pb-2\" [class.--substrate]=\"headerSettings.substrate\">\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-sm-6 mb-1 mb-sm-0 d-flex justify-content-start align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"sortTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-sm-6 d-flex justify-content-end align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"downloadTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n @default {\r\n <div class=\"mrx-table-card-header py-12px mb-3\" [class.--substrate]=\"headerSettings.substrate\">\r\n <div class=\"row\">\r\n <div\r\n class=\"mrx-table-card-header--left col col-12 col-md-6 mb-1 mb-md-0 d-flex justify-content-start align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"counterTemplate\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mrx-table-card-header--right col col-12 col-md-6 d-flex justify-content-end align-content-center\">\r\n <ng-container [ngTemplateOutlet]=\"sortTemplate\"></ng-container>\r\n\r\n @if (headerSettings.toggle) {\r\n <div class=\"ml-4\">\r\n <ng-container [ngTemplateOutlet]=\"toggleTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n @switch (type) {\r\n @case ('cards') {\r\n <div class=\"mrx-table__wrapper\">\r\n @for (item of data; let index = $index; let first = $first; let last = $last; track item[trackById] || index) {\r\n <ng-container [ngTemplateOutlet]=\"templateCard\" [ngTemplateOutletContext]=\"{item, index, first, last}\"></ng-container>\r\n }\r\n\r\n @if (!data.length) {\r\n <div class=\"mrx-table__result-message--substrate\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\"\r\n ></ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n }\r\n @default {\r\n <div class=\"mrx-table__wrapper\" [class.--substrate]=\"contentSettings.substrate\">\r\n <table\r\n [class.table-striped]=\"striped\"\r\n [class.table-solid]=\"!striped\"\r\n [class.mt-2]=\"contentSettings.substrate\"\r\n [class.mb-3]=\"contentSettings.substrate && data.length\"\r\n >\r\n <thead [class.table-head-gray]=\"!headerSettings || headerSettings.background\">\r\n <tr>\r\n @for (col of contentChildren; let index = $index; let first = $first; let last = $last; track index) {\r\n <th [class]=\"col.customClasses\">\r\n @if (!col.templateHead) {\r\n @if (col.sortable) {\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <span>{{ col.label }}</span>\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n } @else {\r\n <div><span>{{ col.label }}</span></div>\r\n }\r\n } @else {\r\n @if (col.sortable) {\r\n <div [class.th-wrapper]=\"sortable\" (click)=\"onSortColumn(col.name, col.sortable)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"col.templateHead\"\r\n [ngTemplateOutletContext]=\"{col, index, first, last}\"\r\n ></ng-container>\r\n\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [class]=\"columnSortedDir(col.name)\"\r\n class=\"mrx-table__sort-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 9L8 13L12 9\" fill=\"#DAD5CE\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7L8 3L4 7\" fill=\"#DAD5CE\"/>\r\n </svg>\r\n </div>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"col.templateHead\"\r\n [ngTemplateOutletContext]=\"{col, index, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (dataItem of data; let index = $index; let first = $first; let last = $last; track dataItem[trackById] || index) {\r\n <tr [class.-hovered]=\"hovered\">\r\n @for (col of contentChildren; let index = $index; let first = $first; let last = $last; track index) {\r\n <td #tableTD class=\"p-0\" [class]=\"col.customClasses\">\r\n @if (link && col['isLink']) {\r\n <a class=\"link-wrapper td-content-wrapper\" [href]=\"getLinkForStroke(link, dataItem)\"></a>\r\n }\r\n\r\n @if (!col.templateCell) {\r\n <div class=\"td-content-wrapper p-2 h-100\">{{ dataItem[col.name] }}</div>\r\n } @else {\r\n <div class=\"td-content-wrapper h-100\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"col.templateCell\"\r\n [ngTemplateOutletContext]=\"{col, row: dataItem, index, first, last}\"\r\n ></ng-container>\r\n </div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (!data.length) {\r\n <div class=\"mrx-table__result-message\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"emptyResultMsg ? emptyResultMsgTemplateDefault : emptyResultMsgTemplate\"\r\n ></ng-container>\r\n </div>\r\n }\r\n\r\n <div class=\"mrx-table__overlay\" [@visibleLoading]=\"isLoading ? 'in' : 'out'\" [ngClass]=\"{'open': isLoading}\">\r\n <mrx-loader [size]=\"loaderSettings.size\" [color]=\"loaderSettings.color\"></mrx-loader>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n\r\n@if (total) {\r\n <div class=\"mrx-table__paginator pt-2 pb-2\" [class.mrx-table__paginator--substrate]=\"paginatorSettings.substrate\">\r\n @if (pageable) {\r\n <mrx-paginator\r\n [total]=\"total\"\r\n [pageSize]=\"pageSize\"\r\n [position]=\"pageable.position\"\r\n [pageSizes]=\"pageable.pageSizes\"\r\n [currentPage]=\"currentPage\"\r\n [withPageSize]=\"pageable.withPageSize\"\r\n (dataStateChanged)=\"onDataStatePaginatorChanged($event)\">\r\n </mrx-paginator>\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #counterTemplate>\r\n @if (headerSettings && headerSettings.count) {\r\n <span class=\"mrx-table-counter\">\r\n {{ total }} {{ headerSettings && headerSettings.countText ? headerSettings.countText : '\u043D\u043E\u0432\u043E\u0441\u0442\u0435\u0439' }}\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #sortTemplate>\r\n @if (headerSettings && headerSettings.sort) {\r\n <div class=\"d-flex mrx-table-sort\">\r\n <div class=\"mrx-table-sort-scale\">\r\n <div class=\"mrx-table-sort-scale__title mr-2\" (click)=\"changeSort()\">\r\n <span>\u0421\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u043E:</span>\r\n\r\n <div class=\"mrx-table-sort-scale__icon\">\r\n @if (sort && sort.dir === 'desc') {\r\n <span class=\"mrx-icon icon-sorting-down icon-font-16\"></span>\r\n }\r\n @if (sort && sort.dir === 'asc') {\r\n <span class=\"mrx-icon icon-sorting-up icon-font-16\"></span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-table-sort-scale__drop-trigger\" [mrxPopupTrigger]=\"sortDropdown\" [popupPosition]=\"popupPosition\">\r\n <span>{{ selectedSort }}</span>\r\n <span\r\n class=\"mrx-icon icon-font-16\"\r\n [class.icon-chevron-up]=\"isOpenSort\"\r\n [class.icon-chevron-down]=\"!isOpenSort\"\r\n ></span>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #sortDropdown [minWidth]=\"'250px'\" [closeAfterClick]=\"true\" (toggle)=\"togglePopup($event)\">\r\n @for (item of colArray; track item) {\r\n <mrx-popup-item [id]=\"item.sortLabel\" (clicked)=\"updateSortSelect(item)\">{{ item.sortLabel || item.name }}\r\n </mrx-popup-item>\r\n }\r\n </mrx-popup>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #downloadTemplate>\r\n @if (headerSettings && headerSettings.download) {\r\n <div class=\"mrx-table-download\" (click)=\"clickToDownload($event)\">\r\n <span class=\"desktop\">\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435</span>\r\n <span class=\"mrx-icon icon-download icon-font-24\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #toggleTemplate>\r\n <div class=\"mrx-table-toggle\">\r\n <div class=\"mrx-table-toggle--item mr-1\" (click)=\"onChangeTypeTable('cards')\" [class.active]=\"type === 'cards'\">\r\n <span class=\"mrx-icon icon-cards-view icon-font-24\"></span>\r\n </div>\r\n <div class=\"mrx-table-toggle--item\" (click)=\"onChangeTypeTable('default')\" [class.active]=\"type === 'default'\">\r\n <span class=\"mrx-icon icon-table-view icon-font-24\"></span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #emptyResultMsgTemplateDefault>\r\n {{ emptyResultMsg }}\r\n</ng-template>\r\n", styles: [".mrx-table.mrx-table{display:block;width:100%}.mrx-table.mrx-table .th-wrapper{display:flex;cursor:pointer;word-break:inherit;justify-content:space-between;align-items:flex-end}.mrx-table.mrx-table .th-wrapper span{word-break:inherit}.mrx-table.mrx-table .mrx-table__sort-icon.asc path:last-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table__sort-icon.desc path:first-child{fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table__wrapper.mrx-table__wrapper{overflow-x:auto;overflow-y:hidden;position:relative}.mrx-table__wrapper.mrx-table__wrapper .mrx-table__wrapper--substrate{padding-top:8px}.mrx-table.mrx-table.type-default table{width:100%;text-align:left;background-color:transparent;border-spacing:0}.mrx-table.mrx-table.type-default table thead.table-head-gray{background:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table.type-default table thead .sort-asc .custom-table__sort path:nth-child(2){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table thead .sort-desc .custom-table__sort path:nth-child(1){fill:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td{max-width:340px;vertical-align:top;position:relative;padding:0}.mrx-table.mrx-table.type-default table td .link-wrapper{display:block;color:initial;height:100%;position:absolute;inset:0;text-decoration:none}.mrx-table.mrx-table.type-default table td .link-wrapper:active{color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table.type-default table td .left-border{border-left:4px solid var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table td .light-border{border-left:4px solid transparent}.mrx-table.mrx-table.type-default table td .warning-back{background-color:#ffece7}.mrx-table.mrx-table.type-default table td .disabled-back{background-color:#fafafa}.mrx-table.mrx-table.type-default table td .link-colored,.mrx-table.mrx-table.type-default table td .link-colored:active{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table.type-default table th{padding:8px;vertical-align:bottom;word-break:inherit;font-weight:700}.mrx-table.mrx-table.type-default table th svg{margin-left:8px;cursor:pointer}.mrx-table.mrx-table .mrx-table-card-header{position:relative}.mrx-table.mrx-table .mrx-table-card-header.--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table__wrapper.--substrate{background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .mrx-table-toggle{display:flex}.mrx-table.mrx-table .mrx-table-toggle--item{display:flex;align-items:center;justify-content:center;cursor:pointer}.mrx-table.mrx-table .mrx-table-toggle--item .mrx-icon{color:#e5e5e5}.mrx-table.mrx-table .mrx-table-toggle--item.active .mrx-icon{color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-card,.mrx-table.mrx-table .mrx-table-sort.mrx-table-sort--is-table{justify-content:flex-start}.mrx-table.mrx-table .mrx-table-sort-scale{display:flex;align-items:center;flex-wrap:wrap;cursor:pointer;gap:4px;font-family:var(--body-md-font-family, \"PT Sans\");font-weight:var(--body-md-font-weight, 400);font-size:var(--body-md-font-size, 14px);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}.mrx-table.mrx-table .mrx-table-sort-scale__title{display:flex;align-items:center;gap:8px}.mrx-table.mrx-table .mrx-table-sort-scale__icon{display:flex;align-items:center;justify-content:center}.mrx-table.mrx-table .mrx-table-sort-scale__drop-trigger{display:flex;align-items:center;gap:4px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select{max-width:215px;margin-bottom:0}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-select-container.ng-select-container{min-height:auto!important;border:none;cursor:pointer;align-items:center;height:100%!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-value-container.ng-value-container{padding-left:0!important;margin-right:8px}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-arrow-wrapper.ng-arrow-wrapper{min-height:auto;width:auto!important}:host::ng-deep .mrx-table.mrx-table .mrx-table-sort .ng-select .ng-dropdown-panel.ng-dropdown-panel{width:100vw;max-width:215px;left:auto;right:0}.mrx-table__paginator.mrx-table__paginator.mrx-table__paginator--substrate{padding-left:24px;padding-right:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px}.mrx-table.mrx-table .table-striped tbody tr:nth-child(2n){background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n){transition:.2s}.mrx-table.mrx-table .table-striped tbody tr:nth-child(n).-hovered:hover{background-color:var(--brand-bg-tertiary-hover, #edf5ff)}.mrx-table.mrx-table .table-solid{border-collapse:collapse}.mrx-table.mrx-table .table-solid thead tr{border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr:not(:last-child){border-bottom:1px solid #f2f2f2}.mrx-table.mrx-table .table-solid tbody tr.-hovered:hover{box-shadow:0 1px 4px #3a3a3a4d}.mrx-table.mrx-table .mrx-table__wrapper .mrx-table__overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;border-radius:4px}.mrx-table .mrx-table__result-message{display:flex;justify-content:center;width:100%;padding:var(--spacing-4);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message *{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);font-size:var(--body-md-font-size);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary)}.mrx-table .mrx-table__result-message--substrate{display:flex;justify-content:center;width:100%;font-weight:400;font-size:16px;line-height:24px;color:var(--neutral-text-primary, #262626);padding:24px;background:#fff;box-shadow:0 1px 4px #3b43571a;border-radius:4px;position:relative}.mrx-table.mrx-table .mrx-table-download{display:flex;align-items:center;justify-content:flex-end;cursor:pointer}.mrx-table.mrx-table .mrx-table-download span{margin-right:8px;color:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-download svg path{stroke:var(--brand-bg-primary-default, #2a6ab8)}.mrx-table.mrx-table .mrx-table-counter{display:flex;align-items:center;font-family:var(--body-lg-font-family);font-size:var(--body-lg-font-size);font-weight:var(--body-lg-font-weight);line-height:var(--body-lg-line-height)}\n"] }]
|
|
5254
5257
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contentChildren: [{
|
|
5255
5258
|
type: ContentChildren,
|
|
5256
5259
|
args: [ColumnComponent]
|
|
@@ -14555,7 +14558,7 @@ class CheckboxGroupItemComponent {
|
|
|
14555
14558
|
return item.id;
|
|
14556
14559
|
}
|
|
14557
14560
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
14558
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: { displaced: "displaced", level: "level", animationTrigger: "animationTrigger", isLast: "isLast", disabled: "disabled", readonly: "readonly", invalid: "invalid", item: "item" }, outputs: { animationEnd: "animationEnd", checkboxChanged: "checkboxChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mrx-checkbox-group__item\" [class.mrx-checkbox-group__item--buttom-ident]=\"!isLast\">\r\n @if (item.items && item.items.length && level < 10) {\r\n <div class=\"mrx-checkbox-group__item--array\">\r\n <div class=\"mrx-checkbox-group__item--array-head\">\r\n <div class=\"mrx-checkbox-group__item--head-icon mr-1\">\r\n <span\r\n class=\"mrx-icon icon-chevron-down icon-font-16 cursor-pointer\"\r\n (click)=\"toggleList(item)\"\r\n [style.transform]=\"translateChevron\"\r\n ></span>\r\n </div>\r\n\r\n <mrx-checkbox\r\n [ngModel]=\"item.value\"\r\n [indeterminate]=\"isIndeterminate\"\r\n (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n >{{ item.text }}</mrx-checkbox>\r\n </div>\r\n\r\n <div class=\"mrx-checkbox-group__item--array-list\" [@openList]=\"isOpen ? 'open' : 'close'\" (@openList.done)=\"onAnimationEvent()\">\r\n @for (item of item.items; track item.id) {\r\n <mrx-checkbox-group-item\r\n [level]=\"level + 1\"\r\n [item]=\"item\"\r\n [displaced]=\"true\"\r\n [animationTrigger]=\"animationTrigger\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (checkboxChanged)=\"checkboxChanged.emit($event)\"\r\n ></mrx-checkbox-group-item>\r\n }\r\n </div>\r\n </div>\r\n\r\n } @else {\r\n <div class=\"mrx-checkbox-group__item--single\" [class.item-displaced]=\"displaced\">\r\n <mrx-checkbox\r\n [ngModel]=\"item.value\"\r\n [indeterminate]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n >{{ item.text }}</mrx-checkbox>\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", styles: [".mrx-checkbox-group__item--single.item-displaced{margin-left:20px}.mrx-checkbox-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-checkbox-group__item--array-list{padding-left:20px}.mrx-checkbox-group__item--buttom-ident{margin-bottom:12px}\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: CheckboxComponent, selector: "mrx-checkbox", inputs: ["fields", "required", "boldLabel", "indeterminate", "disabled", "readonly", "label", "customClasses", "customWrapperClasses", "invalid", "checkInvalid", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changed", "modelChange"] }, { kind: "component", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }], animations: [
|
|
14561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: { displaced: "displaced", level: "level", animationTrigger: "animationTrigger", isLast: "isLast", disabled: "disabled", readonly: "readonly", invalid: "invalid", item: "item" }, outputs: { animationEnd: "animationEnd", checkboxChanged: "checkboxChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mrx-checkbox-group__item\" [class.mrx-checkbox-group__item--buttom-ident]=\"!isLast\">\r\n @if (item.items && item.items.length && level < 10) {\r\n <div class=\"mrx-checkbox-group__item--array\">\r\n <div class=\"mrx-checkbox-group__item--array-head\">\r\n <div class=\"mrx-checkbox-group__item--head-icon mr-1\">\r\n <span\r\n class=\"mrx-icon icon-chevron-down icon-font-16 cursor-pointer\"\r\n (click)=\"toggleList(item)\"\r\n [style.transform]=\"translateChevron\"\r\n ></span>\r\n </div>\r\n\r\n <mrx-checkbox\r\n [ngModel]=\"item.value\"\r\n [indeterminate]=\"isIndeterminate\"\r\n (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n >{{ item.text }}</mrx-checkbox>\r\n </div>\r\n\r\n <div class=\"mrx-checkbox-group__item--array-list\" [@openList]=\"isOpen ? 'open' : 'close'\" (@openList.done)=\"onAnimationEvent()\">\r\n @for (item of item.items; track item.id) {\r\n <mrx-checkbox-group-item\r\n [level]=\"level + 1\"\r\n [item]=\"item\"\r\n [displaced]=\"true\"\r\n [animationTrigger]=\"animationTrigger\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (checkboxChanged)=\"checkboxChanged.emit($event)\"\r\n ></mrx-checkbox-group-item>\r\n }\r\n </div>\r\n </div>\r\n\r\n } @else {\r\n <div class=\"mrx-checkbox-group__item--single\" [class.item-displaced]=\"displaced\">\r\n <mrx-checkbox\r\n [ngModel]=\"item.value\"\r\n [indeterminate]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n >{{ item.text }}</mrx-checkbox>\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", styles: [".mrx-checkbox-group__item--single.item-displaced{margin-left:20px}.mrx-checkbox-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-checkbox-group__item--array-list{padding-left:20px}.mrx-checkbox-group__item--buttom-ident{margin-bottom:12px}\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: CheckboxComponent, selector: "mrx-checkbox", inputs: ["fields", "required", "boldLabel", "enableLabel", "indeterminate", "disabled", "readonly", "label", "customClasses", "customWrapperClasses", "invalid", "checkInvalid", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changed", "modelChange"] }, { kind: "component", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }], animations: [
|
|
14559
14562
|
trigger('openList', [
|
|
14560
14563
|
state('*', style({ height: '0', opacity: '0', visibility: 'hidden', marginTop: '0', overflow: 'hidden' })),
|
|
14561
14564
|
state('open', style({ height: '*', opacity: '1', visibility: 'visible', marginTop: '12px' })),
|