myrta-ui 17.0.19 → 17.0.20

package/src/lib/components/button/assets/button-secondary.less

@@ -0,0 +1,169 @@
+:host::ng-deep {
+  .mrx-btn.mrx-btn {
+    &.mrx-btn-secondary {
+      background-color: transparent;
+      border: var(--border-width-default) solid var(--brand-bg-primary-default);
+
+      .mrx-btn-label, .mrx-icon {
+        color: var(--brand-text-controls-default);
+      }
+
+      &:not(.red, .green, .yellow, .color-positive, .color-negative, .color-attention) {
+        .icon-loading {
+          path {
+            stroke: var(--brand-text-controls-default);
+          }
+
+          circle {
+            stroke: var(--brand-text-controls-default);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--brand-text-controls-default);
+        }
+
+        svg:not(.icon-loading) {
+          &.fill {
+            path {
+              fill: var(--brand-text-controls-default);
+            }
+
+            circle {
+              fill: var(--brand-text-controls-default);
+            }
+
+            &-rect {
+              rect {
+                fill: var(--brand-text-controls-default);
+              }
+            }
+          }
+
+          &.stroke {
+            path {
+              stroke: var(--brand-text-controls-default);
+            }
+
+            circle {
+              stroke: var(--brand-text-controls-default);
+            }
+
+            &-rect {
+              rect {
+                stroke: var(--brand-text-controls-default);
+              }
+            }
+          }
+        }
+      }
+
+      &.red, &.color-negative {
+        .icon-loading {
+          path {
+            stroke: var(--system-bg-controls-negative-default);
+          }
+
+          circle {
+            stroke: var(--system-bg-controls-negative-default);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--system-bg-controls-negative-default);
+        }
+      }
+
+      &.green, &.color-positive {
+        .icon-loading {
+          path {
+            stroke: var(--system-bg-controls-positive-default);
+          }
+
+          circle {
+            stroke: var(--system-bg-controls-positive-default);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--system-bg-controls-positive-default);
+        }
+      }
+
+      &.yellow, &.color-attention {
+        .icon-loading {
+          path {
+            stroke: var(--Orange);
+          }
+
+          circle {
+            stroke: var(--Orange);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--Orange);
+        }
+      }
+
+      &:hover, &.active  {
+        background-color: var(--brand-bg-tertiary-hover);
+        border-color: var(--brand-bg-primary-default);
+
+        .mrx-btn-label, .mrx-icon {
+          color: var(--brand-text-controls-hover);
+        }
+
+        &:not(.red, .green, .yellow, .color-positive, .color-negative, .color-attention) {
+          .icon-loading {
+            path {
+              stroke: var(--brand-text-controls-hover);
+            }
+
+            circle {
+              stroke: var(--brand-text-controls-hover);
+            }
+          }
+
+          .mrx-icon {
+            color: var(--brand-text-controls-hover);
+          }
+
+          svg:not(.icon-loading) {
+            &.fill {
+              path {
+                fill: var(--brand-text-controls-hover);
+              }
+
+              circle {
+                fill: var(--brand-text-controls-hover);
+              }
+
+              &-rect {
+                rect {
+                  fill: var(--brand-text-controls-hover);
+                }
+              }
+            }
+
+            &.stroke {
+              path {
+                stroke: var(--brand-text-controls-hover);
+              }
+
+              circle {
+                stroke: var(--brand-text-controls-hover);
+              }
+
+              &-rect {
+                rect {
+                  stroke: var(--brand-text-controls-hover);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/button/assets/button-sizes.less

@@ -0,0 +1,71 @@
+// Размер кнопок
+.mrx-btn.mrx-btn {
+  &.mrx-btn-lg {
+    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);
+
+    &:not(.icon-only) {
+      padding: calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));
+      min-width: var(--sizing-24);
+    }
+
+    &.icon-only {
+      padding: calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));
+    }
+
+    .mrx-btn-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--sizing-6);
+    }
+  }
+
+  &.mrx-btn-md {
+    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);
+
+    &:not(.icon-only) {
+      padding: calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));
+      min-width: var(--sizing-20);
+    }
+
+    &.icon-only {
+      padding: calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default));
+    }
+
+    .mrx-btn-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--sizing-6);
+    }
+  }
+
+  &.mrx-btn-sm {
+    font-family: var(--body-sm-bold-font-family);
+    font-size: var(--body-sm-bold-font-size);
+    font-weight: var(--body-sm-bold-font-weight);
+    line-height: var(--body-sm-bold-line-height);
+
+    &:not(.icon-only) {
+      padding: calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));
+      min-width: var(--sizing-16);
+    }
+
+    &.icon-only {
+      padding: calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default));
+    }
+
+    .mrx-btn-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--sizing-4);
+    }
+  }
+}

package/src/lib/components/button/assets/button-tertiary.less

@@ -0,0 +1,166 @@
+:host::ng-deep {
+  .mrx-btn.mrx-btn {
+    &.mrx-btn-tertiary {
+      background-color: transparent;
+      border: var(--border-width-default) solid transparent;
+
+      .mrx-btn-label, .mrx-icon {
+        color: var(--brand-text-controls-default);
+      }
+
+      &:not(.red, .green, .yellow, .color-positive, .color-negative, .color-attention) {
+        .icon-loading {
+          path {
+            stroke: var(--brand-text-controls-default);
+          }
+
+          circle {
+            stroke: var(--brand-text-controls-default);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--brand-text-controls-default);
+        }
+
+        svg:not(.icon-loading) {
+          &.fill {
+            path {
+              fill: var(--brand-text-controls-default);
+            }
+
+            circle {
+              fill: var(--brand-text-controls-default);
+            }
+
+            &-rect {
+              rect {
+                fill: var(--brand-text-controls-default);
+              }
+            }
+          }
+
+          &.stroke {
+            path {
+              stroke: var(--brand-text-controls-default);
+            }
+
+            circle {
+              stroke: var(--brand-text-controls-default);
+            }
+
+            &-rect {
+              rect {
+                stroke: var(--brand-text-controls-default);
+              }
+            }
+          }
+        }
+      }
+
+      &.red, &.color-negative {
+        .icon-loading {
+          path {
+            stroke: var(--system-bg-controls-negative-default);
+          }
+
+          circle {
+            stroke: var(--system-bg-controls-negative-default);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--system-bg-controls-negative-default);
+        }
+      }
+
+      &.green, &.color-positive {
+        .icon-loading {
+          path {
+            stroke: var(--system-bg-controls-positive-default);
+          }
+
+          circle {
+            stroke: var(--system-bg-controls-positive-default);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--system-bg-controls-positive-default);
+        }
+      }
+
+      &.yellow, &.color-attention {
+        .icon-loading {
+          path {
+            stroke: var(--Orange);
+          }
+
+          circle {
+            stroke: var(--Orange);
+          }
+        }
+
+        .mrx-icon {
+          color: var(--Orange);
+        }
+      }
+
+      &:hover, &.active {
+        .mrx-btn-label, .mrx-icon {
+          color: var(--brand-text-controls-hover);
+        }
+
+        &:not(.red, .green, .yellow, .color-positive, .color-negative, .color-attention) {
+          .icon-loading {
+            path {
+              stroke: var(--brand-text-controls-hover);
+            }
+
+            circle {
+              stroke: var(--brand-text-controls-hover);
+            }
+          }
+
+          .mrx-icon {
+            color: var(--brand-text-controls-hover);
+          }
+
+          svg:not(.icon-loading) {
+            &.fill {
+              path {
+                fill: var(--brand-text-controls-hover);
+              }
+
+              circle {
+                fill: var(--brand-text-controls-hover);
+              }
+
+              &-rect {
+                rect {
+                  fill: var(--brand-text-controls-hover);
+                }
+              }
+            }
+
+            &.stroke {
+              path {
+                stroke: var(--brand-text-controls-hover);
+              }
+
+              circle {
+                stroke: var(--brand-text-controls-hover);
+              }
+
+              &-rect {
+                rect {
+                  stroke: var(--brand-text-controls-hover);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/button/assets/button-with-icon.less

@@ -0,0 +1,64 @@
+.mrx-btn.mrx-btn {
+  &.icon-left, &.icon-right {
+    .icon {
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+          width: 100%;
+        }
+      }
+    }
+
+    &.mrx-btn-lg {
+      .icon-wrapper {
+        width: var(--sizing-6);
+      }
+      //&.icon-left {
+      //  .icon-wrapper {
+      //    margin-right: var(--spacing-2);
+      //  }
+      //}
+      //
+      //&.icon-right {
+      //  .icon-wrapper {
+      //    margin-left: var(--spacing-2);
+      //  }
+      //}
+    }
+
+    &.mrx-btn-md {
+      .icon-wrapper {
+        width: var(--sizing-6);
+      }
+      //&.icon-left {
+      //  .icon-wrapper {
+      //    margin-right: var(--spacing-2);
+      //  }
+      //}
+      //&.icon-right {
+      //  .icon-wrapper {
+      //    margin-left: var(--spacing-2);
+      //  }
+      //}
+    }
+
+    &.mrx-btn-sm {
+      .icon-wrapper {
+        width: var(--sizing-4);
+      }
+      //&.icon-left {
+      //  .icon-wrapper {
+      //    margin-right: var(--spacing-1);
+      //  }
+      //}
+      //&.icon-right {
+      //  .icon-wrapper {
+      //    margin-left: var(--spacing-1);
+      //  }
+      //}
+    }
+  }
+}

package/src/lib/components/button/assets/button.less

@@ -0,0 +1,12 @@
+.mrx-btn.mrx-btn {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--border-radius-1);
+  outline: none;
+  transition: background-color 0.2s;
+  text-align: center;
+  text-decoration: none;
+}

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

@@ -0,0 +1,81 @@
+<button
+    class="mrx-btn"
+    [class]="getClasses"
+    [class.active]="active"
+    [class.icon-only]="iconOnly"
+    [class.icon-loading]="isLoading && !disabled"
+    [disabled]="disabled"
+    [type]="buttonType"
+    (click)="buttonClick($event)"
+>
+  <ng-template #spinner>
+    <mrx-loader [color]="getLoaderColor" [size]="getLoaderSize"></mrx-loader>
+  </ng-template>
+
+  <ng-container *ngIf="isIconLeft && isLoading && !disabled">
+    <div
+        class="icon-wrapper"
+        [class.mr-1]="size === 'small' && !iconOnly"
+        [class.mr-2]="(size === 'large' || size === 'medium') && !iconOnly"
+    >
+      <ng-container *ngTemplateOutlet="spinner"></ng-container>
+    </div>
+  </ng-container>
+
+  <div
+      class="icon-wrapper"
+      [class.mr-1]="size === 'small' && !iconOnly"
+      [class.mr-2]="(size === 'large' || size === 'medium') && !iconOnly"
+      *ngIf="icon && isIconLeft && !isLoading" [innerHTML]="getReplacedIcon | safe"
+  ></div>
+
+  <div
+      class="icon-wrapper"
+      [class.mr-1]="size === 'small' && !iconOnly"
+      [class.mr-2]="(size === 'large' || size === 'medium') && !iconOnly"
+      *ngIf="iconClass && isIconLeft && !isLoading"
+  >
+    <span
+        class="mrx-icon"
+        [class]="iconClass"
+        [class.icon-font-24]="size === 'large' || size === 'medium'"
+        [class.icon-font-16]="size === 'small'"
+    ></span>
+  </div>
+
+  <div class="mrx-btn-label">{{ getLabel }}
+    <ng-content></ng-content>
+  </div>
+
+  <div
+      class="icon-wrapper"
+      [class.ml-1]="size === 'small' && !iconOnly"
+      [class.ml-2]="(size === 'large' || size === 'medium') && !iconOnly"
+      *ngIf="iconClass && isIconRight && !isLoading"
+  >
+    <span
+        class="mrx-icon"
+        [class]="iconClass"
+        [class.icon-font-24]="size === 'large' || size === 'medium'"
+        [class.icon-font-16]="size === 'small'"
+    ></span>
+  </div>
+
+  <div
+      class="icon-wrapper"
+      [class.ml-1]="size === 'small' && !iconOnly"
+      [class.ml-2]="(size === 'large' || size === 'medium') && !iconOnly"
+      *ngIf="icon && isIconRight && !isLoading" [innerHTML]="getReplacedIcon | safe"
+  ></div>
+
+  <ng-container *ngIf="isIconRight && isLoading && !disabled">
+    <div
+        class="icon-wrapper"
+        (click)="$event.preventDefault()"
+        [class.ml-1]="size === 'small' && !iconOnly"
+        [class.ml-2]="(size === 'large' || size === 'medium') && !iconOnly"
+    >
+      <ng-container *ngTemplateOutlet="spinner"></ng-container>
+    </div>
+  </ng-container>
+</button>

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

@@ -0,0 +1,9 @@
+@import "assets/button";
+@import "assets/button-colors";
+@import "assets/button-disabled";
+@import "assets/button-icon-loading";
+@import "assets/button-primary";
+@import "assets/button-secondary";
+@import "assets/button-tertiary";
+@import "assets/button-sizes";
+@import "assets/button-with-icon";

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

@@ -0,0 +1,88 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { LoaderColorTypes, LoaderSizesTypes } from '../loader/loader.enum';
+import {
+  ButtonAttrTypes,
+  ButtonColorsEnum,
+  ButtonColorsTypes,
+  ButtonIconPositionEnum,
+  ButtonIconPositionTypes,
+  ButtonSizesEnum,
+  ButtonSizesTypes,
+  ButtonTypes,
+  ButtonTypesEnum
+} from './button.enum';
+
+@Component({
+  selector: 'mrx-button',
+  templateUrl: 'button.component.html',
+  styleUrls: ['./button.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent {
+  @Input() size: ButtonSizesTypes = 'large';
+  @Input() type: ButtonTypes = 'primary';
+  @Input() color: ButtonColorsTypes = 'default';
+  @Input() iconPosition: ButtonIconPositionTypes = 'left';
+  @Input() active: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() isLoading: boolean = false;
+  @Input() iconOnly: boolean = false;
+  @Input() customClasses: string = '';
+  @Input() label: string = '';
+  @Input() icon: string = '';
+  @Input() iconClass: string = '';
+  @Input() buttonType: ButtonAttrTypes = 'button';
+
+  @Output() mrxClick = new EventEmitter<MouseEvent>();
+
+  public get getLabel(): null | string {
+    return this.iconOnly ? null : this.label
+  }
+
+  public get isIcon(): boolean {
+    return this.iconPosition !== 'none'
+  }
+
+  public get isIconLeft(): boolean {
+    return this.iconPosition === 'left'
+  }
+
+  public get isIconRight(): boolean {
+    return this.iconPosition === 'right'
+  }
+
+  public get getClasses(): string {
+    return `${ButtonSizesEnum[this.size]} ${ButtonTypesEnum[this.type]} ${ButtonColorsEnum[this.color]} ${this.customClasses} ${ButtonIconPositionEnum[this.iconPosition]}`;
+  }
+
+  public get getLoaderColor(): LoaderColorTypes {
+    if (this.disabled) {
+      return 'black'
+    }
+
+    if (this.color === 'default' || this.color === 'info') {
+      return this.type === 'primary' ? 'white' : 'brand'
+    } else if (this.type === 'primary') {
+      return 'white'
+    }  else {
+      return this.color
+    }
+  }
+
+  public get getLoaderSize(): LoaderSizesTypes {
+    return this.size === 'large' ? 'small' : this.size === 'medium' ? 'small' : 'extra-small'
+  }
+
+  public get getReplacedIcon(): string {
+    return this.icon.replace(/"([^"]+)"/g, '\'$1\'')
+  }
+
+  public buttonClick($event: MouseEvent): void {
+    if (!this.disabled) {
+      this.mrxClick.emit($event)
+    } else {
+      $event.stopPropagation()
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+export enum ButtonTypesEnum {
+  'primary' = 'mrx-btn-primary',
+  'secondary' = 'mrx-btn-secondary',
+  'tertiary' = 'mrx-btn-tertiary',
+}
+
+export type ButtonTypes = 'primary' | 'secondary' | 'tertiary'
+
+export enum ButtonSizesEnum {
+  'small' = 'mrx-btn-sm',
+  'medium' = 'mrx-btn-md',
+  'large' = 'mrx-btn-lg',
+}
+
+export type ButtonAttrTypes = 'button' | 'reset' | 'submit'
+
+export type ButtonSizesTypes = 'small' | 'medium' | 'large'
+
+export enum ButtonColorsEnum {
+  'default' = '',
+  'info' = '',
+  'attention' = 'mrx-btn-color-attention',
+  'positive' = 'mrx-btn-color-positive',
+  'negative' = 'mrx-btn-color-negative',
+}
+
+export type ButtonColorsTypes= 'default' | 'info' | 'attention' | 'positive' | 'negative'
+
+export enum ButtonIconPositionEnum {
+  'none'= '',
+  'left' = 'icon-left',
+  'right' = 'icon-right',
+}
+
+export type ButtonIconPositionTypes= 'none' | 'left' | 'right'