@morozeckiy/dd-lib 0.1.1 → 0.1.2

package/src/lib/lib-select/lib-select.component.scss

@@ -1,130 +0,0 @@
-.lib-select {
-  position: relative;
-
-  input {
-    width: 100%;
-    height: 48px;
-    padding: 15px 28px 15px 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border-radius: 8px;
-    border: 1px solid var(--input-border-color);
-    background-color: transparent;
-    position: relative;
-
-    &:hover {
-      border-color: var(--input-active-border-colort);
-    }
-
-    &:focus {
-      border-color: var(--input-active-border-colort);
-      box-shadow: var(--input-active-border-shadow);
-    }
-
-    &:disabled {
-      border: none;
-      background-color: var(--input-disable-input);
-      color: var(--input-disable-text);
-      pointer-events: none;
-
-      &::placeholder {
-        color: var(--input-placeholder);
-      }
-    }
-
-    &.invalid {
-      border-color: var(--input-error-border-color);
-
-      &:hover {
-        border-color: var(--input-error-border-color);
-      }
-
-      &:focus {
-        border-color: var(--input-error-border-color);
-        box-shadow: var(--input-error-border-shadow);
-      }
-    }
-  }
-
-  .clear {
-    cursor: pointer;
-    position: absolute;
-    right: 8px;
-    top: 12px;
-  }
-
-  .chevron {
-    cursor: pointer;
-    position: absolute;
-    right: 16px;
-    top: 10px;
-
-    &.up {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__title {
-    margin-bottom: 4px;
-    font-size: 14px;
-    line-height: 24px;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__error {
-    color: var(--primary-red-color);
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 10px;
-    margin-top: 2px;
-  }
-
-  .select-list-wrapper {
-    position: absolute;
-    display: block;
-    top: 80px;
-    z-index: 100;
-    width: 100%;
-    max-height: 300px;
-    overflow: auto;
-    border-radius: 8px;
-    box-shadow: var(--main-card-shadow);
-    background-color: var(--main-card-color);
-
-    .select-data {
-      padding: 12px 16px;
-      cursor: pointer;
-      position: relative;
-
-      &__desc {
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 24px;
-        text-overflow: ellipsis;
-        text-wrap: nowrap;
-        padding-top: 2px;
-        overflow: hidden;
-        color: var(--second-gray-color);
-      }
-
-      &:hover {
-        background: var(--select-act-hov-bgc);
-      }
-
-      &.active {
-        background: var(--select-act-hov-bgc);
-
-        .checked {
-          position: absolute;
-          right: 16px;
-          top: 10px;
-        }
-      }
-    }
-
-    .select-loader {
-      padding: 24px;
-    }
-  }
-}

package/src/lib/lib-select/lib-select.component.ts

@@ -1,152 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Host,
-  Input,
-  OnInit,
-  Optional,
-  SkipSelf,
-} from '@angular/core';
-import {NgOptimizedImage} from '@angular/common';
-import {
-  ControlContainer,
-  ControlValueAccessor,
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import {LibCommonInputTextComponent} from '../common/lib-common-input-text';
-import {LibCardComponent} from '../lib-card/lib-card.component';
-import {LibLoaderComponent} from '../lib-loader/lib-loader.component';
-import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
-import {ClickOutsideDirective, FilterByKeyPipe, HighlightPipe, SafePipe} from "../core";
-
-@Component({
-  selector: 'dd-lib-select',
-  standalone: true,
-  imports: [
-    NgOptimizedImage,
-    ReactiveFormsModule,
-    FormsModule,
-    HighlightPipe,
-    LibCardComponent,
-    SafePipe,
-    ClickOutsideDirective,
-    LibLoaderComponent,
-    FilterByKeyPipe,
-    LibSvgIconComponent,
-  ],
-  templateUrl: './lib-select.component.html',
-  styleUrl: './lib-select.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibSelectComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibSelectComponent<T>
-  extends LibCommonInputTextComponent
-  implements OnInit, ControlValueAccessor
-{
-  public static idCounter = 1;
-
-  @Input() public selectId: string  | undefined;
-  @Input() public data: any  | undefined;
-  @Input() public keyTitle: string  | undefined;
-  @Input() public keyDesc: string  | undefined;
-  @Input() public keyValue: string  | undefined;
-  @Input() public override placeholder = 'Выберите из списка';
-  public checkedItem: any;
-  public inputValue: string | undefined;
-  public searchValue: string | undefined;
-  public isShownList: boolean | undefined;
-
-  constructor(
-    changeDetection: ChangeDetectorRef,
-    @Optional() @Host() @SkipSelf() private controlContainer: ControlContainer,
-  ) {
-    super(changeDetection);
-  }
-
-  public ngOnInit(): void {
-    if (!this.selectId) {
-      this.selectId = 'dd-select-' + LibSelectComponent.idCounter++;
-    }
-    if (this.keyTitle && !this.keyValue) {
-      this.keyValue = this.keyTitle;
-    }
-    this.control =
-      this.controlContainer && this.formControlName
-        ? this.controlContainer?.control?.get(this.formControlName)
-        : null;
-  }
-
-  public override registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-    super.registerOnChange(fn)
-  }
-
-  public override registerOnTouched(fn: any): void {
-    this.onTouchedCallback = fn;
-    super.registerOnTouched(fn)
-  }
-
-  public override handleInput(e: Event): void {
-    this.isShownList = true;
-    this.searchValue = this.inputValue;
-    super.handleInput(e)
-  }
-
-  public override notifyFocusEvent(e: Event): void {
-    if (!this.disabled) {
-      this.isShownList = !this.isShownList;
-    }
-    super.notifyFocusEvent(e)
-  }
-
-  public writeValue(value: any): void {
-    this.value = value;
-    this.inputValue = value;
-  }
-
-  public selectItem(item: any): void {
-    if (typeof item === 'string') {
-      if (!this.checkedItem) {
-        this.checkedItem = item;
-        this.inputValue = item;
-        this.value = item;
-        this.propagateChange(this.value);
-      } else {
-        this.checkedItem = null;
-        this.inputValue = undefined;
-        this.value = undefined;
-        this.propagateChange(undefined);
-      }
-    } else {
-      if (!this.checkedItem || item[this.keyValue!] !== this.checkedItem?.[this.keyValue!]) {
-        this.checkedItem = item;
-        this.inputValue = this.checkedItem[this.keyTitle!];
-        this.value = item[this.keyValue!];
-        this.propagateChange(this.value);
-      } else {
-        this.checkedItem = null;
-        this.inputValue = undefined;
-        this.value = undefined;
-        this.propagateChange(undefined);
-      }
-    }
-    this.searchValue = undefined;
-    this.isShownList = false;
-  }
-
-  public filterList(item: any): any {
-    return item[this.keyTitle!]?.toLowerCase().includes(this.searchValue?.toLowerCase() || '');
-  }
-
-  private propagateChange(_value: any) {}
-}

package/src/lib/lib-skeleton/lib-skeleton.component.html

@@ -1,11 +0,0 @@
-@if (_skeleton && _plugs.length) { @for (plug of _plugs; track plug) {
-<div
-  [class.skeleton]="_skeleton"
-  [style.height]="_skeleton ? sHeight : ''"
-  [style.margin-bottom]="sMb"
-  class="skelet full-width full-height"></div>
-} } @else {
-<div [style.height]="_skeleton ? sHeight : ''" [class.skeleton]="_skeleton" [ddAutoHeight]="deepParent">
-  <ng-content></ng-content>
-</div>
-}

package/src/lib/lib-skeleton/lib-skeleton.component.scss

@@ -1,36 +0,0 @@
-:host {
-  min-width: 100%;
-}
-.skeleton {
-  position: relative;
-  overflow: hidden;
-  min-height: 100%;
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background-image: linear-gradient(
-      90deg,
-      rgba(#d0cdcd, 0) 0,
-      rgba(#d0cdcd, 0.2) 20%,
-      rgba(#d0cdcd, 0.5) 60%,
-      rgba(#d0cdcd, 0)
-    );
-    animation: shimmer 2s infinite;
-    content: '';
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-.skelet {
-  min-height: 100%;
-  border-radius: 24px;
-  //margin-bottom: 12px;
-}

package/src/lib/lib-skeleton/lib-skeleton.component.ts

@@ -1,41 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
-import {AutoHeightDirective} from "../core";
-
-@Component({
-  selector: 'dd-lib-skeleton',
-  standalone: true,
-  imports: [AutoHeightDirective],
-  templateUrl: './lib-skeleton.component.html',
-  styleUrl: './lib-skeleton.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibSkeletonComponent {
-  @Input() public deepParent: number | undefined;
-  @Input() public sHeight: string | undefined = '200px';
-  @Input() public sMb: string | undefined;
-
-  @Input()
-  public set skeleton(s: boolean | undefined) {
-    if (s === true) {
-      this._skeleton = s;
-      this.cdr.detectChanges();
-    } else {
-      setTimeout(() => {
-        this._skeleton = s;
-        this.cdr.detectChanges();
-      }, 1000);
-    }
-  }
-  @Input() public set plugs(n: number | undefined) {
-    if (n && n > 0) {
-      this._plugs = Array.from(Array(n).keys());
-    }
-  }
-
-  public _plugs: number[] = [];
-  public _skeleton: boolean | undefined;
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  protected readonly length = length;
-}

package/src/lib/lib-sort/lib-sort.component.html

@@ -1,21 +0,0 @@
-<div class="pos-relative" id="js-sort-wrapper">
-  <div (click)="showSortList()" class="d-flex align-center cup">
-    <div class="text-plain green mr-12">Сортировка</div>
-    <div>
-      <dd-lib-svg-icon icon="sort"></dd-lib-svg-icon>
-    </div>
-  </div>
-  @if (showSort) {
-  <div (ddClickOutside)="showSort = false" [elements]="['js-sort-wrapper']" class="sort-list-container">
-    <dd-lib-card type="small">
-      <div class="sort-list-container__list">
-        @for (item of sortItems; track item) {
-        <div (click)="onSort(item.value)" [class.green]="sort === item.value" class="mb-12 text-plain">
-          {{ item.name }}
-        </div>
-        }
-      </div>
-    </dd-lib-card>
-  </div>
-  }
-</div>

package/src/lib/lib-sort/lib-sort.component.scss

@@ -1,21 +0,0 @@
-:host {
-  display: block;
-}
-
-.sort-list-container {
-  position: absolute;
-  z-index: 1;
-  top: 36px;
-
-  &__list {
-    white-space: nowrap;
-
-    .text-plain {
-      cursor: pointer;
-
-      &:hover {
-        color: var(--primary-green-color);
-      }
-    }
-  }
-}

package/src/lib/lib-sort/lib-sort.component.ts

@@ -1,52 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {LibCardComponent} from '../lib-card/lib-card.component';
-import {NgOptimizedImage} from '@angular/common';
-import {ClickOutsideDirective} from "../core";
-import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
-
-export interface ISort {
-  value: string;
-  name: string;
-  default?: boolean;
-}
-
-const DefaultSort = [
-  { name: 'По возрастанию', value: 'asc', default: true },
-  { name: 'По убыванию', value: 'desc' },
-];
-
-@Component({
-  selector: 'dd-lib-sort',
-  standalone: true,
-  templateUrl: './lib-sort.component.html',
-  styleUrls: ['./lib-sort.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ClickOutsideDirective, LibCardComponent, NgOptimizedImage, LibSvgIconComponent],
-})
-export class LibSortComponent implements OnInit {
-  @Input() public sortItems: ISort[] = DefaultSort;
-  @Output() public sortEvent = new EventEmitter<string>();
-
-  public sort: string | undefined;
-  public showSort: boolean | undefined;
-
-  public ngOnInit(): void {
-    if (this.sortItems?.length) {
-      this.sort = this.sortItems?.find(f => f.default)?.value || this.sortItems[0]?.value;
-    }
-  }
-
-  public onSort(field: string): void {
-    if (field !== this.sort) {
-      this.sort = field;
-      this.sortEvent.emit(field);
-      this.showSort = false;
-    }
-  }
-
-  public showSortList(): void {
-    if (this.sortItems?.length) {
-      this.showSort = !this.showSort;
-    }
-  }
-}

package/src/lib/lib-step/lib-step.component.html

@@ -1,4 +0,0 @@
-<span class="step-badge">
-  <span class="h3-title">{{ step }}</span>
-  &nbsp;<span class="h4-title">{{ name }}</span>
-</span>

package/src/lib/lib-step/lib-step.component.scss

@@ -1,23 +0,0 @@
-@import '../../../assets/scss/mixins';
-@import '../../../assets/scss/vars';
-
-:host {
-  display: flex;
-}
-
-.step-badge {
-  padding: 8px 32px 8px 32px;
-  border-radius: 40px;
-  background-color: var(--low-bgc-color);
-  display: flex;
-  align-items: baseline;
-
-  @include below($mobile) {
-    width: 100%;
-    justify-content: center;
-  }
-
-  & span {
-    color: var(--primary-green-color);
-  }
-}

package/src/lib/lib-step/lib-step.component.ts

@@ -1,14 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'dd-lib-step',
-  standalone: true,
-  imports: [],
-  templateUrl: './lib-step.component.html',
-  styleUrl: './lib-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibStepComponent {
-  @Input() public step = 1;
-  @Input() public name = 'шаг';
-}

package/src/lib/lib-svg/lib-svg.component.html

@@ -1,15 +0,0 @@
-<div
-  #svgRef
-  [class.black-stroke]="stroke === 'black'"
-  [class.black]="color === 'black'"
-  [class.gray-stroke]="stroke === 'gray'"
-  [class.gray]="color === 'gray'"
-  [class.green-stroke]="stroke === 'green'"
-  [class.green]="color === 'green'"
-  [class.white-stroke]="stroke === 'white'"
-  [class.white]="color === 'white'"
-  [class.gold-stroke]="stroke === 'gold'"
-  [class.gold]="color === 'gold'"
-  [class.blue-stroke]="stroke === 'blue'"
-  [class.blue]="color === 'blue'"
-  class="lib-icon"></div>

package/src/lib/lib-svg/lib-svg.component.scss

@@ -1,81 +0,0 @@
-.lib-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &.green {
-    fill: var(--primary-green-color);
-  }
-
-  &.white {
-    fill: #fff;
-    path {
-      fill: #fff;
-      stroke: #fff;
-    }
-  }
-
-  &.white-stroke {
-    stroke: var(--white-color);
-
-    g > path,
-    path {
-      stroke: var(--white-color);
-    }
-  }
-
-  &.black {
-    fill: var(--black-color);
-  }
-
-  &.gray {
-    fill: var(--second-gray-color);
-
-    path {
-      fill: var(--second-gray-color);
-      stroke: var(--second-gray-color);
-    }
-  }
-
-  &.gray-stroke {
-    stroke: var(--second-gray-color);
-
-    path {
-      stroke: var(--second-gray-color);
-    }
-  }
-
-  &.gold-stroke {
-    stroke: var(--gold-svg-color);
-
-    path {
-      stroke: var(--gold-svg-color);
-    }
-  }
-
-  &.gold {
-    fill: var(--gold-bgc-color);
-
-    path {
-      fill: var(--gold-bgc-color);
-      stroke: var(--gold-svg-color);
-    }
-  }
-
-  &.blue-stroke {
-    stroke: var(--blue-color);
-
-    path {
-      stroke: var(--blue-color);
-    }
-  }
-
-  &.blue {
-    fill: var(--blue-light-bgc);
-
-    path {
-      fill: var(--blue-light-bgc);
-      stroke: var(--blue-light-bgc);
-    }
-  }
-}

package/src/lib/lib-svg-icon/lib-svg-icon.component.ts

@@ -1,58 +0,0 @@
-import {ChangeDetectionStrategy, Component, ElementRef, Inject, Input, Optional, Renderer2} from '@angular/core';
-import {SvgIconsService} from "../core";
-import {DOCUMENT} from "@angular/common";
-
-@Component({
-  selector: 'dd-lib-svg-icon',
-  standalone: true,
-  imports: [],
-  template: '<ng-content></ng-content>',
-  styleUrl: './lib-svg-icon.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-
-})
-export class LibSvgIconComponent {
-  @Input() public width: string | undefined;
-  @Input() public height: string | undefined;
-  @Input() public color: string | undefined;
-
-  @Input()
-  public set icon(iconName: string) {
-    const svgData = this.svgIconRegistry.getIcon(iconName);
-    if (this.svgIcon) {
-      this.el.nativeElement.removeChild(this.svgIcon);
-    }
-
-    if (svgData) {
-      this.svgIcon = this.svgElementFromString(svgData);
-      if (this.width) {
-        this.rdr.setStyle(this.svgIcon, 'width', this.width)
-      }
-      if ( this.height) {
-      }
-      if (this.color) {
-        this.rdr.setStyle(this.svgIcon, 'fill', this.color)
-      }
-
-
-      this.el.nativeElement.appendChild(this.svgIcon);
-    }
-  }
-
-  private svgIcon: SVGElement | undefined;
-
-  constructor(
-    private el: ElementRef,
-    private rdr: Renderer2,
-    private svgIconRegistry: SvgIconsService,
-    @Optional() @Inject(DOCUMENT) private document: any,
-  ) {
-  }
-
-  private svgElementFromString(svgContent: string): SVGElement {
-    const div = this.document.createElement('DIV');
-    div.innerHTML = svgContent;
-
-    return div.querySelector('svg') || this.document.createElementNS('http://www.w3.org/200/svg', 'path');
-  }
-}

package/src/lib/lib-tabs-fragment/lib-tabs-fragment.component.html

@@ -1,12 +0,0 @@
-@if (tabs?.length) {
-<div class="tabs-filter-types">
-  @for (tab of tabs; track tab) {
-  <div
-    (click)="checkActiveTab(tab)"
-    [class.active]="tab.id === activeFragment"
-    class="tabs-filter-types__type">
-    {{ tab.title }}
-  </div>
-  }
-</div>
-}