add viget modules

src/app/_modules/viget/drop-down/drop-down.component.html

@@ -0,0 +1,3 @@
+    <div class="toggle" (click)="click()">
+        <ico [ico]="ico" [color]="visible?'var(--active)':null" [rotate]="visible?angle[1]:angle[0]"></ico>
+    </div>

src/app/_modules/viget/drop-down/drop-down.component.scss

@@ -0,0 +1,10 @@
+
+.invisible{
+    display: none;
+}
+
+.toggle{
+    position: relative;
+    align-items: flex-start;
+    display: inline-flex;
+}

src/app/_modules/viget/drop-down/drop-down.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'drop-down',
+  templateUrl: './drop-down.component.html',
+  styleUrls: ['./drop-down.component.scss']
+})
+export class DropDownComponent {
+
+  @Input() ico = 'drop_down_24';
+  @Input() angle = [0,-180];
+  @Input() visible = false;
+  @Input() target:HTMLElement;
+
+  ngOnChanges(){
+    if(this.target) this.target.hidden = !this.visible;
+  }
+
+  @Output() toggle =  new EventEmitter<boolean>()
+
+  
+  click(){    
+    this.visible = !this.visible;
+    if(this.target) this.target.hidden = !this.visible;
+    this.toggle.emit(this.visible)
+  }
+}

src/app/_modules/viget/ico/ico.component.html

@@ -0,0 +1,3 @@
+<svg class="color" [attr.width]="width" [attr.height]="height" [ngStyle]="style" >
+    <use [attr.href]="url"></use>
+</svg>   

src/app/_modules/viget/ico/ico.component.scss

@@ -0,0 +1,15 @@
+.color{
+    color: var(--second);
+}
+:host-context(.ico-host:hover,a:hover,b:hover){
+    svg.color{
+        color: var(--active);
+    }
+}
+
+:host-context(a){
+    svg.color{color: var(--prime)}
+}
+:host{
+    display: inline-flex;
+}

src/app/_modules/viget/ico/ico.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'ico',
+  templateUrl: './ico.component.html',
+  styleUrls: ['./ico.component.scss']
+})
+export class IcoComponent {
+
+  @Input() size:number|number[] = 24;
+  @Input() rotate:number = 0;
+  @Input() ico:string = 'close_24';
+  @Input() color:string;
+
+  public width:number;
+  public height:number;
+  public url:string;
+
+  ngOnInit(){
+    this.ngOnChanges()
+  } 
+
+  ngOnChanges():void{
+    if (typeof this.size=='number'){
+      this.width = this.height = this.size;
+    } else {
+      this.width = this.size[0]
+      this.height = this.size[1]
+    }
+    this.url = `assets/images/icons/${this.ico}.svg#ico`
+  }
+
+
+  get style(){
+    return {
+      color: this.color,
+      transform: `rotate(${this.rotate}deg)`,
+      transition: 'transform 0.2s'
+    }
+  }
+}

src/app/_modules/viget/qrcode/qrcode.component.html

@@ -0,0 +1,2 @@
+<qrcode #qrc [qrdata]="txt" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
+<a #btn class="btn" (click)="saveAsImage(qrc,btn)">Загрузить PNG</a>

src/app/_modules/viget/qrcode/qrcode.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'qr-code',
+  templateUrl: './qrcode.component.html',
+  styleUrls: ['./qrcode.component.scss']
+})
+export class QRCodeComponent {
+  @Input() txt:string = 'lenta.ru';
+ 
+
+  saveAsImage(parent: any, btn:any) {
+
+    let parentElement = parent.qrcElement.nativeElement
+        .querySelector("canvas")
+        .toDataURL("image/png")
+    
+
+    if (parentElement) {
+      let blobData = this.convertBase64ToBlob(parentElement)
+      const blob = new Blob([blobData], { type: "image/png" })
+      const url = window.URL.createObjectURL(blob)
+      const link = document.createElement("a")
+      btn.href = url
+      btn.download = "angularx-qrcode"
+    }    
+  }
+
+  private convertBase64ToBlob(Base64Image: string) {
+    const parts = Base64Image.split(";base64,")
+    const imageType = parts[0].split(":")[1]
+    const decodedData = window.atob(parts[1])
+    const uInt8Array = new Uint8Array(decodedData.length)
+    for (let i = 0; i < decodedData.length; ++i) {
+      uInt8Array[i] = decodedData.charCodeAt(i)
+    }
+    return new Blob([uInt8Array], { type: imageType })
+  }
+}

src/app/_modules/viget/slider/slider.component.html

@@ -0,0 +1,15 @@
+<div class="slider-overlay" (click)="close()"></div>
+<div class="slider-bar" [style.width]="width" [ngClass]="css">
+  <div class="header">
+    <div class="title">
+      <ng-content select="[header]"></ng-content>
+      <button type="button" (click)="close()">
+        <ico></ico>
+      </button>
+    </div>
+  </div>
+  <div class="body">
+    <ng-content select="[body]"></ng-content>
+  </div>
+    <ng-content select="[footer]"></ng-content>
+</div>

src/app/_modules/viget/slider/slider.component.scss

@@ -0,0 +1,127 @@
+
+
+
+
+  
+.slider-bar {
+    position: fixed;
+    top: 0;
+    
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+
+
+    .header {
+  
+  
+      .title {
+        display: flex;
+        flex-direction: row;
+        align-items: top;
+        justify-content: space-between;
+  
+  
+      }
+  
+      .stepper {
+  
+        .items {
+  
+          .item {
+  
+            .num {
+  
+              &:after {
+  
+              }
+            }
+            .name {
+  
+            }
+            &.active {
+              .num {
+  
+                &:after {
+  
+                }
+              }
+              .name {
+  
+              }
+            }
+            &.finished {
+              .num {
+  
+                &:after {
+  
+                }
+              }
+              .name {
+  
+              }
+            }
+          }
+        }
+      }
+    }
+  
+    .body {
+
+        flex-grow: 1;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+  
+    [footer] {
+  
+      .left {
+        .reset {
+  
+          cursor: pointer;
+        }
+  
+        .notice {
+  
+        }
+      }
+  
+      .right {
+  
+        button {
+  
+        }
+      }
+    }
+  }
+  
+  .slider-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+  }
+  
+  
+  @media screen and (max-width: 767px) {
+    .slider-bar {
+      .header, .body, .footer {
+  
+      }
+  
+      [footer] {
+        .left {
+  
+        }
+        .right {
+          button {
+  
+          }
+        }
+      }
+    }
+  }

src/app/_modules/viget/slider/slider.component.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'slider',
+  templateUrl: './slider.component.html',
+  styleUrls: ['./slider.component.scss']
+})
+export class SliderComponent implements OnInit {
+  @Input() width: 'string';
+  @Input() side: 'left'|'right' ='right';
+
+  css:any;
+
+  constructor(
+    private router:Router
+  ){}
+
+  ngOnInit(){
+    this.css = {
+      'left-side': this.side=='left',
+      'right-side': this.side=='right'
+    }
+  }
+
+
+  close() {
+    this.router.navigate([{outlets: {slider: null}}]).then();
+  }
+
+}

src/app/_modules/viget/switch/switch.component.html

@@ -0,0 +1 @@
+<div [ngClass]="{on:val,off:val===false}"><div></div></div>

src/app/_modules/viget/switch/switch.component.scss

@@ -0,0 +1,58 @@
+
+$bull: 12px;
+$offset: 2px;
+$track: 14px;
+div{
+    border: 1px solid var(--second);
+    display: inline-flex;
+    border-radius: $bull + 3px;
+    div{
+       width: $bull;
+       height: $bull;
+       background-color: var(--second); 
+       border-radius: 50%;
+       margin: $offset $track $offset $offset;
+       border: none;
+    }
+}
+div.on{
+    border: 1px solid var(--prime);
+    background-color: var(--prime);
+    div{
+        margin: $offset $offset $offset $track;
+        background-color: var(--white);
+        border: none;
+        animation: switch-on 0.1s;
+    }
+}
+div.off{
+    div{
+        animation: switch-off 0.1s;
+    }
+}
+:host-context(.switch-host:hover){
+    div.on{        
+        background-color: var(--active);
+        div{
+           background-color: var(--white);
+           border: none;
+        }
+    }
+    div{
+        border-color: var(--active);
+        div{
+           background-color: var(--active);
+           border: none;
+        }
+    }
+}
+
+@keyframes switch-on {
+    0% {margin:  $offset $track $offset $offset;}
+    100% {margin: $offset $offset $offset $track;}
+}
+
+@keyframes switch-off {
+    100% {margin:  $offset $track $offset $offset;}
+    0% {margin: $offset $offset $offset $track;}
+}

src/app/_modules/viget/switch/switch.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'switch',
+  templateUrl: './switch.component.html',
+  styleUrls: ['./switch.component.scss']
+})
+export class SwitchComponent {
+ @Input() val:boolean;
+
+ 
+}

src/app/_modules/viget/viget.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import {BrowserModule} from "@angular/platform-browser";
+import { IcoComponent } from "./ico/ico.component";
+import { QRCodeComponent } from "./qrcode/qrcode.component";
+import { QRCodeModule } from "angularx-qrcode";
+import {DropDownComponent } from "./drop-down/drop-down.component";
+import { SliderComponent } from './slider/slider.component';
+import { SwitchComponent } from './switch/switch.component';
+
+
+@NgModule({
+    imports:[
+        BrowserModule,
+        QRCodeModule
+    ],
+    declarations: [
+        IcoComponent,
+        QRCodeComponent,
+        DropDownComponent,
+        SliderComponent,
+        SwitchComponent,
+    ],
+    exports: [
+        IcoComponent,
+        QRCodeComponent,
+        DropDownComponent,
+        SliderComponent,
+        SwitchComponent
+    ]
+})
+export class VigetModule {
+
+}

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.vniigazv2.lc',
   clientId: 4,
-  clientSecret: 'KaeoKK3VEnfycWBdlcpAnIVS2BYtEr4rbVXXm9gd',
+  clientSecret: 'QC09jOPEU7mpfFerpLyAJRshFUW1T28GfhsYzJHc',
 };
 
 /*