myrta-ui 17.0.19 → 17.0.20

package/src/lib/components/save-state/components/save-state-editor/save-state-editor.component.html

@@ -0,0 +1,66 @@
+<span class="mrx-save-state-editor" [ngSwitch]="state">
+  <ng-container *ngSwitchCase="'saving'">
+    <div class="mrx-save-state__saving">
+        <svg width="20px" height="16px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+          <circle cx="90" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="0.5102040816326531s" calcMode="spline"
+                     keyTimes="0;1"
+                     values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
+            <animate attributeName="fill" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="discrete"
+                     keyTimes="0;0.25;0.5;0.75;1" begin="0s"></animate>
+          </circle>
+          <circle cx="10" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+          </circle>
+          <circle cx="50" cy="50" r="16" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-0.5102040816326531s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-0.5102040816326531s"></animate>
+          </circle>
+          <circle cx="90" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-1.0204081632653061s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-1.0204081632653061s"></animate>
+          </circle>
+          <circle cx="10" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.530612244897959s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.530612244897959s"></animate>
+          </circle>
+        </svg>
+
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.62542 3.37458C8.47685 3.22601 8.23597 3.22601 8.0874 3.37458L3.67895 7.78303L3.49961 8.50039L4.21697 8.32105L8.62542 3.9126C8.77399 3.76403 8.77399 3.52315 8.62542 3.37458ZM7.19421 2.4814C7.83607 1.83953 8.87674 1.83953 9.5186 2.4814C10.1605 3.12326 10.1605 4.16392 9.5186 4.80579L4.98646 9.33793C4.90552 9.41888 4.8041 9.4763 4.69304 9.50406L2.78477 9.98113C2.56955 10.0349 2.34187 9.97187 2.185 9.815C2.02813 9.65813 1.96506 9.43045 2.01887 9.21523L2.49594 7.30696C2.5237 7.1959 2.58113 7.09449 2.66207 7.01354L7.19421 2.4814Z"
+            fill="var(--neutral-icon-info)"
+          />
+        </svg>
+      </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'saved'">
+    <span class="mrx-save-state__saved">сохранено</span>
+  </ng-container>
+  <ng-container *ngSwitchCase="'error'">
+    <span class="mrx-save-state__error">ошибка</span>
+  </ng-container>
+</span>

package/src/lib/components/save-state/components/save-state-editor/save-state-editor.component.less

@@ -0,0 +1,32 @@
+.mrx-save-state-editor {
+  .mrx-save-state__saving {
+    position: absolute;
+    top: 42px;
+    right: 4px;
+    display: flex;
+    align-items: flex-start;
+    z-index: 2;
+  }
+
+  .mrx-save-state__saved {
+    position: absolute;
+    top: 42px;
+    right: 4px;
+    font-family: var(--body-sm-font-family);
+    font-weight: var(--body-sm-font-weight);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+    color: var(--system-text-positive)
+  }
+
+  .mrx-save-state__error {
+    position: absolute;
+    top: 42px;
+    right: 4px;
+    font-family: var(--body-sm-font-family);
+    font-weight: var(--body-sm-font-weight);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+    color: var(--system-text-negative)
+  }
+}

package/src/lib/components/save-state/components/save-state-editor/save-state-editor.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { StateType } from '../../../../services/mrx-autosave/mrx-autosave.service';
+
+@Component({
+  selector: 'mrx-save-state-editor',
+  templateUrl: './save-state-editor.component.html',
+  styleUrls: ['./save-state-editor.component.less']
+})
+export class SaveStateEditorComponent {
+
+  @Input() state!: StateType | null
+
+  constructor() { }
+}

package/src/lib/components/save-state/components/save-state-input/save-state-input.component.html

@@ -0,0 +1,66 @@
+<span class="mrx-save-state-input" [ngSwitch]="state">
+  <ng-container *ngSwitchCase="'saving'">
+    <div class="mrx-save-state__saving">
+        <svg width="20px" height="16px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+          <circle cx="90" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="0.5102040816326531s" calcMode="spline"
+                     keyTimes="0;1"
+                     values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
+            <animate attributeName="fill" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="discrete"
+                     keyTimes="0;0.25;0.5;0.75;1" begin="0s"></animate>
+          </circle>
+          <circle cx="10" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+          </circle>
+          <circle cx="50" cy="50" r="16" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-0.5102040816326531s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-0.5102040816326531s"></animate>
+          </circle>
+          <circle cx="90" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-1.0204081632653061s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-1.0204081632653061s"></animate>
+          </circle>
+          <circle cx="10" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.530612244897959s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.530612244897959s"></animate>
+          </circle>
+        </svg>
+
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.62542 3.37458C8.47685 3.22601 8.23597 3.22601 8.0874 3.37458L3.67895 7.78303L3.49961 8.50039L4.21697 8.32105L8.62542 3.9126C8.77399 3.76403 8.77399 3.52315 8.62542 3.37458ZM7.19421 2.4814C7.83607 1.83953 8.87674 1.83953 9.5186 2.4814C10.1605 3.12326 10.1605 4.16392 9.5186 4.80579L4.98646 9.33793C4.90552 9.41888 4.8041 9.4763 4.69304 9.50406L2.78477 9.98113C2.56955 10.0349 2.34187 9.97187 2.185 9.815C2.02813 9.65813 1.96506 9.43045 2.01887 9.21523L2.49594 7.30696C2.5237 7.1959 2.58113 7.09449 2.66207 7.01354L7.19421 2.4814Z"
+            fill="var(--neutral-icon-info)"
+          />
+        </svg>
+      </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'saved'">
+    <span class="mrx-save-state__saved">сохранено</span>
+  </ng-container>
+  <ng-container *ngSwitchCase="'error'">
+    <span class="mrx-save-state__error">ошибка</span>
+  </ng-container>
+</span>

package/src/lib/components/save-state/components/save-state-input/save-state-input.component.less

@@ -0,0 +1,34 @@
+.mrx-save-state-input {
+  .mrx-save-state__saving {
+    position: absolute;
+    top: 2px;
+    right: 4px;
+    display: flex;
+    align-items: flex-start;
+    z-index: 2;
+  }
+
+  .mrx-save-state__saved {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    font-family: var(--body-sm-font-family);
+    font-weight: var(--body-sm-font-weight);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+    color: var(--system-text-positive);
+    z-index: 2;
+  }
+
+  .mrx-save-state__error {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    font-family: var(--body-sm-font-family);
+    font-weight: var(--body-sm-font-weight);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+    color: var(--system-text-negative);
+    z-index: 2;
+  }
+}

package/src/lib/components/save-state/components/save-state-input/save-state-input.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { StateType } from '../../../../services/mrx-autosave/mrx-autosave.service';
+
+@Component({
+  selector: 'mrx-save-state-input',
+  templateUrl: './save-state-input.component.html',
+  styleUrls: ['./save-state-input.component.less']
+})
+export class SaveStateInputComponent {
+
+  @Input() state!: StateType | null
+
+  constructor() { }
+}

package/src/lib/components/save-state/components/save-state-switch/save-state-switch.component.html

@@ -0,0 +1,66 @@
+<span class="mrx-save-state-switch" [ngSwitch]="state">
+  <ng-container *ngSwitchCase="'saving'">
+    <div class="mrx-save-state__saving">
+        <svg width="20px" height="16px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+          <circle cx="90" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="0.5102040816326531s" calcMode="spline"
+                     keyTimes="0;1"
+                     values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
+            <animate attributeName="fill" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="discrete"
+                     keyTimes="0;0.25;0.5;0.75;1" begin="0s"></animate>
+          </circle>
+          <circle cx="10" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
+          </circle>
+          <circle cx="50" cy="50" r="16" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-0.5102040816326531s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-0.5102040816326531s"></animate>
+          </circle>
+          <circle cx="90" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-1.0204081632653061s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"
+                     begin="-1.0204081632653061s"></animate>
+          </circle>
+          <circle cx="10" cy="50" r="12" fill="var(--neutral-icon-info)">
+            <animate attributeName="r" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="0;0;12;12;12"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.530612244897959s"></animate>
+            <animate attributeName="cx" repeatCount="indefinite" dur="2.0408163265306123s" calcMode="spline"
+                     keyTimes="0;0.25;0.5;0.75;1" values="10;10;10;50;90"
+                     keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.530612244897959s"></animate>
+          </circle>
+        </svg>
+
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.62542 3.37458C8.47685 3.22601 8.23597 3.22601 8.0874 3.37458L3.67895 7.78303L3.49961 8.50039L4.21697 8.32105L8.62542 3.9126C8.77399 3.76403 8.77399 3.52315 8.62542 3.37458ZM7.19421 2.4814C7.83607 1.83953 8.87674 1.83953 9.5186 2.4814C10.1605 3.12326 10.1605 4.16392 9.5186 4.80579L4.98646 9.33793C4.90552 9.41888 4.8041 9.4763 4.69304 9.50406L2.78477 9.98113C2.56955 10.0349 2.34187 9.97187 2.185 9.815C2.02813 9.65813 1.96506 9.43045 2.01887 9.21523L2.49594 7.30696C2.5237 7.1959 2.58113 7.09449 2.66207 7.01354L7.19421 2.4814Z"
+            fill="var(--neutral-icon-info)"
+          />
+        </svg>
+      </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'saved'">
+    <div class="mrx-save-state__saved">сохранено</div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'error'">
+    <div class="mrx-save-state__error">ошибка</div>
+  </ng-container>
+</span>

package/src/lib/components/save-state/components/save-state-switch/save-state-switch.component.less

@@ -0,0 +1,32 @@
+.mrx-save-state-switch {
+  .mrx-save-state__saving {
+    position: absolute;
+    top: -12px;
+    left: 0;
+    display: flex;
+    align-items: flex-start;
+    z-index: 2;
+  }
+
+  .mrx-save-state__saved {
+    position: absolute;
+    top: -14px;
+    left: 0;
+    font-family: var(--body-sm-font-family);
+    font-weight: var(--body-sm-font-weight);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+    color: var(--system-text-positive)
+  }
+
+  .mrx-save-state__error {
+    position: absolute;
+    top: -14px;
+    left: 0;
+    font-family: var(--body-sm-font-family);
+    font-weight: var(--body-sm-font-weight);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+    color: var(--system-text-negative)
+  }
+}

package/src/lib/components/save-state/components/save-state-switch/save-state-switch.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { StateType } from '../../../../services/mrx-autosave/mrx-autosave.service';
+
+@Component({
+  selector: 'mrx-save-state-switch',
+  templateUrl: './save-state-switch.component.html',
+  styleUrls: ['./save-state-switch.component.less']
+})
+export class SaveStateSwitchComponent {
+
+  @Input() state!: StateType | null
+
+  constructor() { }
+}

package/src/lib/components/save-state/save-state.component.html

@@ -0,0 +1,11 @@
+<div class="mrx-save-state">
+  <ng-container [ngSwitch]="type">
+    <mrx-save-state-input *ngSwitchCase="'input'" [state]="getState"></mrx-save-state-input>
+    <mrx-save-state-checkbox *ngSwitchCase="'checkbox'" [state]="getState"></mrx-save-state-checkbox>
+    <mrx-save-state-checkbox-group *ngSwitchCase="'checkboxGroup'" [state]="getState"></mrx-save-state-checkbox-group>
+    <mrx-save-state-checkbox *ngSwitchCase="'radio'" [state]="getState"></mrx-save-state-checkbox>
+    <mrx-save-state-checkbox-group *ngSwitchCase="'radioGroup'" [state]="getState"></mrx-save-state-checkbox-group>
+    <mrx-save-state-switch *ngSwitchCase="'switch'" [state]="getState"></mrx-save-state-switch>
+    <mrx-save-state-editor *ngSwitchCase="'editor'" [state]="getState"></mrx-save-state-editor>
+  </ng-container>
+</div>

package/src/lib/components/save-state/save-state.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SaveStateComponentType } from './save-state.enum';
+import { Field, StateType } from '../../services/mrx-autosave/mrx-autosave.service';
+
+@Component({
+  selector: 'mrx-save-state',
+  templateUrl: './save-state.component.html',
+  styleUrls: ['./save-state.component.less']
+})
+export class SaveStateComponent {
+
+  @Input() type: SaveStateComponentType = 'input'
+  @Input() fields: Field[] = []
+  @Input() id!: string
+
+  constructor() {
+  }
+
+  public get getState(): StateType | null {
+    const savingId = this.fields.findIndex((field) => field.id === this.id)
+
+    if (savingId !== undefined && savingId !== null && savingId !== -1) {
+      return this.fields[savingId].state
+    } else {
+      return null
+    }
+  }
+
+  public get isSaving(): boolean {
+    return this.fields.some((field) => field.id === this.id)
+  }
+}

package/src/lib/components/save-state/save-state.enum.ts

@@ -0,0 +1 @@
+export type SaveStateComponentType = 'input' | 'checkbox' | 'checkboxGroup' | 'radio' | 'radioGroup' | 'switch' | 'editor'

package/src/lib/components/save-state/save-state.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SaveStateComponent } from './save-state.component';
+import { SaveStateInputComponent } from './components/save-state-input/save-state-input.component';
+import { SaveStateCheckboxComponent } from './components/save-state-checkbox/save-state-checkbox.component';
+import {
+  SaveStateCheckboxGroupComponent
+} from './components/save-state-checkbox-group/save-state-checkbox-group.component';
+import { SaveStateSwitchComponent } from './components/save-state-switch/save-state-switch.component';
+import { SaveStateEditorComponent } from './components/save-state-editor/save-state-editor.component';
+
+
+
+@NgModule({
+  declarations: [
+    SaveStateComponent,
+    SaveStateInputComponent,
+    SaveStateCheckboxComponent,
+    SaveStateCheckboxGroupComponent,
+    SaveStateSwitchComponent,
+    SaveStateEditorComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [SaveStateComponent]
+})
+export class SaveStateModule { }

package/src/lib/components/stepper/stepper.component.html

@@ -0,0 +1,30 @@
+<div class="mrx-stepper" [class]="customClasses">
+  <div class="mb-2" *ngIf="!isBottomLabel">
+    <ng-container *ngTemplateOutlet="stepperLabel"></ng-container>
+  </div>
+
+  <mrx-progress [color]="type" [value]="percent"></mrx-progress>
+
+  <div class="mt-2" *ngIf="isBottomLabel">
+    <ng-container *ngTemplateOutlet="stepperLabel"></ng-container>
+  </div>
+</div>
+
+<ng-template #stepperLabel>
+  <div class="mrx-stepper-header">
+    <div class="mrx-stepper-header-item">
+      {{completeText}} <strong class="ml-1 mr-1">{{currentStep}}</strong> из <span class="ml-1">{{totalSteps}}</span>
+    </div>
+    <div class="mrx-stepper-header-item">
+      <!-- если есть не завершенные шаги -->
+      <ng-container *ngIf="!isCompleted">
+        {{requiredText}} <strong class="ml-1">{{difference}}</strong>
+      </ng-container>
+      <!-- если все шаги завершены -->
+      <ng-container *ngIf="isCompleted">
+        <span class="mrx-icon icon-font-24 icon-positive mr-1"></span>
+        {{successText}}
+      </ng-container>
+    </div>
+  </div>
+</ng-template>

package/src/lib/components/stepper/stepper.component.less

@@ -0,0 +1,27 @@
+.mrx-stepper.mrx-stepper {
+  display: flex;
+  flex-direction: column;
+
+  .mrx-stepper-header {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    &-item {
+      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);
+
+      strong {
+        font-family: var(--body-lg-bold-font-family);
+        font-size: var(--body-lg-bold-font-size);
+        font-weight: var(--body-lg-bold-font-weight);
+        line-height: var(--body-lg-bold-line-height);
+      }
+    }
+  }
+}
+

package/src/lib/components/stepper/stepper.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { StepperType } from './stepper.enum';
+
+@Component({
+  selector: 'mrx-stepper',
+  templateUrl: 'stepper.component.html',
+  styleUrls: ['./stepper.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StepperComponent {
+  @Input() totalSteps = 0;
+  @Input() currentStep = 0;
+  @Input() customClasses = '';
+  @Input() type: StepperType = 'default';
+
+  @Input() completeText = 'Завершено';
+  @Input() requiredText = 'Осталось';
+  @Input() successText = 'Конец!';
+  @Input() isBottomLabel = false
+
+  public get percent(): number {
+    if (this.currentStep >= this.totalSteps) {
+      return 100;
+    }
+    if (this.totalSteps > 0) {
+      return (100 * this.currentStep) / this.totalSteps;
+    }
+    return 0;
+  }
+
+  public get isCompleted(): boolean {
+    return this.currentStep >= this.totalSteps;
+  }
+
+  public get difference(): number {
+    return this.totalSteps - this.currentStep;
+  }
+}

package/src/lib/components/stepper/stepper.enum.ts

@@ -0,0 +1,5 @@
+export type StepperType = 'default' | 'success' | "warning" | "danger";
+export enum StepperClasses {
+  'default' = 'mrx-stepper-default',
+  'success' = 'mrx-stepper-success'
+}

package/src/lib/components/stepper/stepper.module.ts

@@ -0,0 +1,12 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StepperComponent } from './stepper.component';
+import { ProgressModule } from '../progress/progress.module';
+
+@NgModule({
+  declarations: [StepperComponent],
+  imports: [CommonModule, ProgressModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  exports: [StepperComponent, ProgressModule],
+})
+export class StepperModule {}

package/src/lib/components/table/assets/table-counter.less

@@ -0,0 +1,8 @@
+.mrx-table.mrx-table {
+  .mrx-table-counter {
+    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);
+  }
+}

package/src/lib/components/table/assets/table-download.less

@@ -0,0 +1,19 @@
+.mrx-table.mrx-table {
+  .mrx-table-download {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    cursor: pointer;
+
+    span {
+      margin-right: 8px;
+      color: var(--brand-bg-primary-default, #2a6ab8);
+    }
+
+    svg {
+      path {
+        stroke: var(--brand-bg-primary-default, #2a6ab8);
+      }
+    }
+  }
+}

package/src/lib/components/table/assets/table-empty-message.less

@@ -0,0 +1,38 @@
+.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);
+
+    //TO DO: стили для вложенных элементов, можно просто передевать текст, без тегов
+    // удалить при переделке табличного компонента
+    * {
+      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__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: #FFFFFF;
+    box-shadow: 0px 1px 4px rgba(59, 67, 87, 0.1);
+    border-radius: 4px;
+    position: relative;
+  }
+}

package/src/lib/components/table/assets/table-overlay.less

@@ -0,0 +1,17 @@
+.mrx-table.mrx-table {
+  .mrx-table__wrapper {
+    .mrx-table__overlay {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba(255,255,255,.7);
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-top: 12px;
+      border-radius: 4px;
+    }
+  }
+}

package/src/lib/components/table/assets/table-paginator.less

@@ -0,0 +1,9 @@
+.mrx-table__paginator.mrx-table__paginator {
+  &.mrx-table__paginator--substrate {
+    padding-left: 24px;
+    padding-right: 24px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 4px rgba(59, 67, 87, 0.1);
+    border-radius: 4px;
+  }
+}