myrta-ui 1.0.77 → 1.0.78

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/README.md

@@ -1,18 +1,18 @@
-# Команда создания модуля
-ng g m button --project=myrta-ui
-
-# Команда создания компонента
-ng g c button --project=myrta-ui
-
-# поднять ручками версию
-
-# СБОРКУ ПРОИЗВОДИТЬ ИЗ ДИРЕКТОРИИ MYRTA!!!!!!
-# Команда сборки проекта
-ng build myrta-ui
-
-# publish из dist директории проекта
-
-# Команда публикации проекта
-npm publish
-
-style-dictionary build
+# Команда создания модуля
+ng g m button --project=myrta-ui
+
+# Команда создания компонента
+ng g c button --project=myrta-ui
+
+# поднять ручками версию
+
+# СБОРКУ ПРОИЗВОДИТЬ ИЗ ДИРЕКТОРИИ MYRTA!!!!!!
+# Команда сборки проекта
+ng build myrta-ui
+
+# publish из dist директории проекта
+
+# Команда публикации проекта
+npm publish
+
+style-dictionary build

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/myrta-ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/myrta-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@angular/cdk",
+    "@ng-select/ng-select",
+    "ngx-mask",
+    "ngx-image-cropper",
+    "ngx-simple-modal",
+    "ngx-file-drop",
+    "jodit",
+    "jodit-angular",
+    "dayjs",
+    "air-datepicker",
+    "libphonenumber-js",
+    "google-libphonenumber",
+    "awesome-phonenumber",
+    "lodash-es",
+    "uuid",
+    "@popperjs/core",
+    "mrx-gallery-lib"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrta-ui",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "peerDependencies": {
     "@angular/common": "^13.3.0",
     "@angular/core": "^13.3.0",
@@ -42,24 +42,8 @@
     "mrx-gallery-lib": "^1.0.2",
     "tslib": "^2.3.0"
   },
-  "module": "fesm2015/myrta-ui.mjs",
-  "es2020": "fesm2020/myrta-ui.mjs",
-  "esm2020": "esm2020/myrta-ui.mjs",
-  "fesm2020": "fesm2020/myrta-ui.mjs",
-  "fesm2015": "fesm2015/myrta-ui.mjs",
-  "typings": "myrta-ui.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./myrta-ui.d.ts",
-      "esm2020": "./esm2020/myrta-ui.mjs",
-      "es2020": "./fesm2020/myrta-ui.mjs",
-      "es2015": "./fesm2015/myrta-ui.mjs",
-      "node": "./fesm2015/myrta-ui.mjs",
-      "default": "./fesm2020/myrta-ui.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  "devDependencies": {
+    "@types/lodash": "4.17.5",
+    "@types/lodash-es": "^4.17.7"
+  }
+}

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

@@ -0,0 +1,17 @@
+<div class="mrx-alert" [class]="getClasses" [style]="{backgroundColor: customColor}">
+    <span
+        *ngIf="closable"
+        class="mrx-icon icon-close icon-font-16"
+        (click)="onCloseClick()"
+    ></span>
+    <span
+        *ngIf="title || message"
+        [class]="getIconClass"
+        style="margin-top: 1px"
+        class="mrx-icon icon-alert icon-font-16 mr-2"
+    ></span>
+    <div *ngIf="title" class="mrx-alert-title mb-1" [class.ml-4]="getIconClass" [innerHTML]="title"></div>
+    <div *ngIf="message" class="mrx-alert-message" [class.ml-4]="getIconClass" [innerHTML]="message"></div>
+
+    <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,2 @@
+@import "assets/alert";
+@import "assets/alert-colors";

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

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { AlertColorClasses, AlertColors, AlertIconClasses } from './alert.enum';
+
+@Component({
+  selector: 'mrx-alert',
+  templateUrl: 'alert.component.html',
+  styleUrls: ['./alert.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertComponent {
+  @Input() customClasses: string = '';
+  @Input() color: AlertColors = 'info';
+  @Input() customColor: string = '';
+  @Input() message = '';
+  @Input() title = '';
+  @Input() closable = false;
+  @Output() close: EventEmitter<unknown> = new EventEmitter();
+
+  public get getClasses() {
+    return `${AlertColorClasses[this.color] ?? ''} ${this.customClasses}`;
+  }
+
+  public get getIconClass() {
+    return `${AlertIconClasses[this.color]}`;
+  }
+
+  public onCloseClick(): void {
+    this.close.emit(null);
+  }
+}

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

@@ -0,0 +1,15 @@
+export type AlertColors = 'danger' | 'warning' | 'success' | 'info';
+
+export enum AlertColorClasses {
+  'info' = 'color-info',
+  'success' = 'color-success',
+  'warning' = 'color-warning',
+  'danger' = 'color-danger',
+}
+
+export enum AlertIconClasses {
+  'info' = 'icon-info',
+  'success' = 'icon-check-task',
+  'warning' = 'icon-attention',
+  'danger' = 'icon-attention',
+}

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

@@ -0,0 +1,11 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertComponent } from './alert.component';
+
+@NgModule({
+  declarations: [AlertComponent],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  exports: [AlertComponent],
+})
+export class AlertModule {}

package/src/lib/components/alert/assets/alert-colors.less

@@ -0,0 +1,29 @@
+.mrx-alert.mrx-alert {
+  &.color-info{
+    background-color: var(--brand-bg-secondary-default);
+  }
+
+  &.color-success{
+    background-color: var(--system-bg-positive-secondary);
+
+    .mrx-icon{
+      color: var(--system-icon-positive);
+    }
+  }
+
+  &.color-warning{
+    background-color: var(--system-bg-attention-secondary);
+
+    .mrx-icon{
+      color: var(--system-icon-attention);
+    }
+  }
+
+  &.color-danger{
+    background-color: var(--system-bg-negative-secondary);
+
+    .mrx-icon{
+      color: var(--system-icon-negative);
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+.mrx-alert.mrx-alert {
+  border-radius: var(--border-radius-1);
+  padding: var(--spacing-3) var(--spacing-4);
+  position: relative;
+  color: var(--neutral-text-primary);
+  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-alert-title {
+    display: flex;
+    align-items: center;
+    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);
+  }
+
+  .icon-close {
+    position: absolute;
+    top: calc(var(--spacing-module) * 2);
+    right: calc(var(--spacing-module) * 2);
+    cursor: pointer;
+  }
+
+  .icon-alert {
+    position: absolute;
+    top: 13px;
+    left: 16px;
+  }
+}

package/src/lib/components/badges/badge.enum.ts

@@ -0,0 +1,45 @@
+export enum BadgeTypeEnum {
+  'default' = 'mrx-type-default',
+  'circle' = 'mrx-type-circle'
+}
+export type BadgeType = 'default' | 'circle'
+
+export enum BadgeSizeEnum {
+  'default' = 'mrx-size-default',
+  'small' = 'mrx-size-small'
+}
+export type BadgeSizeType = 'small' | 'default'
+
+export enum BadgeTagTypeClassesEnum {
+  'tag' = 'mrx-badge-tag',
+  'link' = 'mrx-badge-link',
+  'button' = 'mrx-badge-button'
+}
+export type BadgeTagType = 'tag' | 'link' | 'button'
+
+export enum BadgeColorClassesEnum {
+  'positive' = 'mrx-badge-color-positive',
+  'negative' = 'mrx-badge-color-negative',
+  'attention' = 'mrx-badge-color-attention',
+  'neutral' = 'mrx-badge-color-neutral',
+  'brand' = 'mrx-badge-color-brand',
+}
+
+export type BadgeColorType = 'positive' | 'negative' | 'attention' | 'neutral' | 'brand'
+
+export interface BadgeI {
+  type?: BadgeType,
+  tag?: BadgeTagType,
+  color?: BadgeColorType,
+  path?: string,
+  text: string
+}
+
+export enum BadgeTargetTypesEnum {
+  '_self' = '_self',
+  '_blank' = '_blank',
+  '_parent' = '_parent',
+  '_top' = '_top',
+}
+
+export type BadgeTargetTypes = '_self' | '_blank' | '_parent' | '_top'

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

@@ -0,0 +1,21 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BadgeComponent } from './components/badge/badge.component';
+import { BadgeGroupComponent } from './components/badge-group/badge-group.component';
+
+
+@NgModule({
+  declarations: [
+    BadgeComponent,
+    BadgeGroupComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  exports: [
+    BadgeComponent,
+    BadgeGroupComponent
+  ]
+})
+export class BadgesModule {}

package/src/lib/components/badges/components/badge/assets/badge-colors.less

@@ -0,0 +1,62 @@
+.mrx-badge.mrx-badge {
+  &.mrx-badge-color-positive {
+    background-color: var(--system-bg-positive-primary);
+    color: var(--neutral-text-primary);
+
+    &.mrx-badge-button, &.mrx-badge-link {
+      transition: background-color .2s;
+
+      &:hover {
+        background-color: var(--system-bg-positive-primary-hover);
+      }
+    }
+  }
+  &.mrx-badge-color-negative {
+    background-color: var(--system-bg-negative-primary);
+    color: var(--neutral-text-primary) !important;
+
+    &.mrx-badge-button, &.mrx-badge-link {
+      transition: background-color .2s;
+
+      &:hover {
+        background-color: var(--system-bg-negative-primary-hover);
+      }
+    }
+  }
+  &.mrx-badge-color-attention {
+    background-color: var(--system-bg-attention-primary);
+    color: var(--neutral-text-primary);
+
+    &.mrx-badge-button, &.mrx-badge-link {
+      transition: background-color .2s;
+
+      &:hover {
+        background-color: var(--system-bg-attention-primary-hover);
+      }
+    }
+  }
+  &.mrx-badge-color-neutral {
+    background-color: var(--neutral-bg-island-default);
+    color: var(--neutral-text-primary);
+
+    &.mrx-badge-button, &.mrx-badge-link {
+      transition: background-color .2s;
+
+      &:hover {
+        background-color: var(--neutral-bg-island-hover);
+      }
+    }
+  }
+  &.mrx-badge-color-brand {
+    background-color: var(--brand-bg-secondary-default);
+    color: var(--brand-text-accent);
+
+    &.mrx-badge-button, &.mrx-badge-link {
+      transition: background-color .2s;
+
+      &:hover {
+        background-color: var(--brand-bg-secondary-hover);
+      }
+    }
+  }
+}

package/src/lib/components/badges/components/badge/assets/badge-tag.less

@@ -0,0 +1,12 @@
+.mrx-badge.mrx-badge {
+  &.mrx-badge-button {
+    border: none;
+    outline: none;
+    cursor: pointer;
+  }
+
+  &.mrx-badge-link {
+    text-decoration: none;
+    cursor: pointer;
+  }
+}

package/src/lib/components/badges/components/badge/assets/badge-types.less

@@ -0,0 +1,26 @@
+.mrx-badge.mrx-badge {
+  &.mrx-type-default {
+    border-radius: var(--border-radius-1);
+
+    &.mrx-size-default {
+      padding: var(--spacing-1) var(--spacing-3);
+    }
+    &.mrx-size-small {
+      padding: 1px var(--spacing-2);
+    }
+  }
+
+  &.mrx-type-circle {
+    border-radius: var(--border-radius-3);
+    text-align: center;
+
+    &.mrx-size-default {
+      padding: var(--spacing-1) var(--spacing-2);
+      min-width: var(--sizing-6);
+    }
+    &.mrx-size-small {
+      padding: var(--sizing-helf) var(--spacing-1);
+      min-width: var(--sizing-5);
+    }
+  }
+}

package/src/lib/components/badges/components/badge/assets/badge.less

@@ -0,0 +1,7 @@
+.mrx-badge.mrx-badge {
+  display: block;
+  font-family: var(--body-sm-font-famil);
+  font-size: var(--body-sm-font-size);
+  font-weight: var(--body-sm-font-weight);
+  line-height: var(--body-sm-line-height);
+}

package/src/lib/components/badges/components/badge/badge.component.html

@@ -0,0 +1,28 @@
+<ng-container [ngSwitch]="tag">
+  <ng-container *ngSwitchCase="'button'">
+    <button
+      class="mrx-badge"
+      [class]="getClasses"
+      [style]="{ backgroundColor: getCustomColor }"
+      (click)="onClick($event)"
+    >
+      <ng-container *ngTemplateOutlet="content"></ng-container>{{text}}
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'link'">
+    <a [href]="path" class="mrx-badge" [class]="getClasses" [style]="{ backgroundColor: getCustomColor }" [target]="getTarget">
+      <ng-container *ngTemplateOutlet="content"></ng-container>{{text}}
+    </a>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <span class="mrx-badge" [class]="getClasses" [style]="{ backgroundColor: getCustomColor }">
+      <ng-container *ngTemplateOutlet="content"></ng-container>{{text}}
+    </span>
+  </ng-container>
+</ng-container>
+
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>

package/src/lib/components/badges/components/badge/badge.component.less

@@ -0,0 +1,4 @@
+@import "assets/badge";
+@import "assets/badge-colors";
+@import "assets/badge-tag";
+@import "assets/badge-types";

package/src/lib/components/badges/components/badge/badge.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  BadgeColorClassesEnum,
+  BadgeColorType,
+  BadgeI,
+  BadgeSizeEnum,
+  BadgeSizeType,
+  BadgeTagType,
+  BadgeTagTypeClassesEnum,
+  BadgeTargetTypes,
+  BadgeType,
+  BadgeTypeEnum,
+} from '../../badge.enum';
+import { LinkTargetTypesEnum } from '../../../link/link.enum';
+
+@Component({
+  selector: 'mrx-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BadgeComponent {
+  @Input() type: BadgeType = 'default'
+  @Input() tag: BadgeTagType = 'tag'
+  @Input() size: BadgeSizeType = 'default'
+  @Input() color: BadgeColorType = 'brand'
+  @Input() customColor: string | undefined
+  @Input() text = ''
+  @Input() path: string | undefined
+  @Input() customClasses = ''
+  @Input() target: BadgeTargetTypes = '_self';
+
+  @Output() clicked: EventEmitter<BadgeI> = new EventEmitter<BadgeI>();
+
+  public get getCustomColor(): string | null {
+    return this.customColor ? this.customColor : null
+  }
+
+  public get getClasses(): string {
+    return `${this.customClasses} ${BadgeTagTypeClassesEnum[this.tag]} ${BadgeTypeEnum[this.type]} ${this.customColor ? '' : BadgeColorClassesEnum[this.color]} ${BadgeSizeEnum[this.size]}`;
+  }
+
+  public get getTarget(): string {
+    return LinkTargetTypesEnum[this.target]
+  }
+
+  public onClick($event: MouseEvent): void {
+    this.clicked.emit({
+      type: this.type,
+      color: this.color,
+      text: this.text,
+      path: this.path
+    })
+  }
+}

package/src/lib/components/badges/components/badge-group/badge-group.component.html

@@ -0,0 +1,3 @@
+<div class="mrx-badge-group">
+  <ng-content></ng-content>
+</div>

package/src/lib/components/badges/components/badge-group/badge-group.component.less

@@ -0,0 +1,5 @@
+.mrx-badge-group.mrx-badge-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing-1);
+}

package/src/lib/components/badges/components/badge-group/badge-group.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'mrx-badge-group',
+  templateUrl: './badge-group.component.html',
+  styleUrls: ['./badge-group.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BadgeGroupComponent {
+
+}

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

@@ -0,0 +1,50 @@
+.mrx-breadcrumbs.mrx-breadcrumbs {
+  .mrx-breadcrumbs__link {
+    display: flex;
+    align-items: center;
+    color: var(--brand-bg-primary-default);
+    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-icon {
+      color: var(--brand-bg-primary-default) !important;
+    }
+
+    &:hover {
+      color: var(--brand-text-controls-hover);
+
+      .mrx-icon {
+        color: var(--brand-text-controls-hover) !important;
+      }
+    }
+  }
+
+  .mrx-breadcrumbs__tag {
+    color: var(--neutral-text-tertiary);
+    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-breadcrumbs__list {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    flex-wrap: wrap;
+
+    &-item {
+      display: flex;
+
+      .mrx-icon {
+        color: var(--neutral-icon-default) !important;
+      }
+    }
+  }
+}