D-Net

import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';

@Component({

  selector: 'border',

  template: `

    <div class="uk-grid uk-child-width-1-2" >

      <div class="uk-margin-remove">

        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>

  <!--      <div class="uk-margin-bottom uk-form-hint ">hint</div>-->

        <div class="input-box">

           <input class="uk-input " [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />

        </div>

      </div>

      <div class="uk-margin-remove">

        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border width (px)</div>

        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->

        <div class="input-box">

          <input class="uk-input  " [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0"  />

        </div>

      </div>

      <div class="uk-margin-small-top">

        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>

        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->

        <div class="input-box ">

          <mat-form-field class="uk-width-1-1">

            <mat-select class=""  [(ngModel)]="style" name="{{'select_type_'}}"

                        (ngModelChange)="borderChanged()"

                        [disableOptionCentering]="true"

                        panelClass="">

              <mat-option [value]="'solid'" >solid</mat-option>

              <mat-option [value]="'dotted'" >dotted</mat-option>

              <mat-option [value]="'dashed'" >dashed</mat-option>

            </mat-select>

          </mat-form-field>

        </div>

      </div>

    </div>

  `

})

export class BorderComponent implements OnInit {

  @Input() radius:number =0;

  @Input() width:number =0;

  @Input() style = 'solid';

  // @Input() addMargin: boolean = false;

  @Output() borderChange = new EventEmitter();

  constructor() {

  }

  ngOnInit() {

  }

  borderChanged() {

    this.borderChange.emit({radius:this.radius, width:this.width, style:this.style});

  }

}