vm-angular-tools v0.2.14

Vm-Angular-tools

This library includes various tools for Angular to simplify the development process.

• VmDialogModule - allows you to create dialog windows.
• VmButtonModule - allows you to create buttons.
• VmFormModule - allows you to create form controls.
• SCSS-tools - simplifies styling.

VmDialogModule

Import VmDialogModule into your app's module.

import {VmDialogModule} from 'vm-angular-tools';

@NgModule({
  imports: [
    ...
    VmDialogModule
  ],
})

Inject VmDialogService into your 'parent' component and 'dialog' component and use it to control the dialog. Use the VmDialogStyleStates class to create animations for the dialog window.

//ParentComponent
import {VmDialogService, VmDialogStyleStates} from 'vm-angular-tools';
...
constructor(private dialog: VmDialogService){}

onOpen() {
  const data = {
    name: 'MyName',
    age: 'MyAge',
    email: 'MyEmail'
  }
  const animation = {
        initStyleState: VmDialogStyleStates.leftX_centerY_hidden,
        openedStyleState: VmDialogStyleStates.centerX_centerY_visible,
        closedStyleState: VmDialogStyleStates.rightX_centerY_hidden,
        openingDuration: 500,
        closingDuration: 500
  }
  this.dialog.open<MyDialogComponent>(
    MyDialogComponent,
    {
      overlayClick: true,
      overlayColor: 'rgba(0, 0, 0, 0.5)',
      animation,
      data
    }
  ).subscribe(result => console.log(result))
}

//MyDialogComponent
...
data: any;
constructor(private dialog: VmDialogService){}

ngOnInit() {
  this.data = this.dialog.getData();
}

onClose() {
  this.dialog.close(this.result);
}

VmButtonModule

Import VmButtonModule into your app's module.

import {VmButtonModule} from 'vm-angular-tools';

@NgModule({
  imports: [
    ...
    VmButtonModule
  ],
})

• VmBurgerComponent - A button that consists of three horizontal parallel lines and changes its shape to a cross when pressed.
• VmButtonDirective - Slightly stylized simple button.

VmBurgerComponent

This button has eight animation modes, you can select one of them using the "VmBurgerModes" enum. Use the "getState" input field and the "setState" output field to programmatically control the state of the burger.

import {VmBurgerModes} from 'vm-angular-tools';

@Component({
selector: 'app-my-component',
template: `<vm-burger [mode]="burgerMode" 
                      [setState]="burgerState"
                      (getState)="onGetBurgerState($event)"
                      (click)="onClick($event)">
           </vm-burger>
           <button (click)="onCloseBurger()">Close burger</button>`,
styles: ['vm-burger {
          width: 55px;
          height: 32px;
          color: #000000;
          cursor: pointer;
        }']
})
export class MyComponent {

  burgerState: boolean = false;
  burgerMode: VmBurgerModes = VmBurgerModes.DYNAMIC_ALL;
  
  onClick(event: MouseEvent) {
    console.log(event);
  }
  
  onGetBurgerState(state: boolean) {
    this.burgerState = state;
  }
  
  onCloseBurger() {
    this.burgerState = false;
  }
}

VmButtonDirective

Changes the font size when it is active and the brightness when focused with the keyboard.

//html
<button class="my-btn" vm-button>Click me!</button>

//css
.my-btn {
  width: 100px;
  height: 50px;
  ... // your styles
}

VmFormModule

Import VmFormModule into your app's module.

Note!!! You don't need to import 'FormsModule' and 'ReactiveFormsModule' into your app's module. These modules will be automatically imported from 'VmFormModule'.

import {VmFormModule} from 'vm-angular-tools';

@NgModule({
  imports: [
    ...
    VmFormModule
  ],
})

• VmInputComponent - A wrapper over the html input element that makes the input element easier to style.

VmInputComponent

Note!!!
The 'content' and 'label' fields don't work together, choose one of them.
Content works with all input types except 'radio', 'color' and 'checkbox'.
Labels will not work correctly if you forget to set the "id" input field for an element

@Component({
selector: 'app-my-component',
template: `<form [formGroup]="form">
             <vm-input placeholder="Search"
                       [type]="text" 
                       [content]="after"
                       [formControlName]="search">
                <div class="search-icon"></div>
             </vm-input>
           </form>`,
styles: ['vm-input {
          border: 2px solid grey;
          border-radius: 10px;
          padding: 5px;
          background: lightblue;
          color: green;
          font-size: 2rem;
        }']
})
export class MyComponent {

  public form!: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      search: ''
    });
    this.form.valueChanges.subscribe((value) => console.log(value))
  }
}

SCSS_tools

• vm-media - A mixin that helps with media queries.
• vm-expansion - A mixin that allows you to create animations with background or border-image.

vm_media

Observes the screen in vertical or horizontal direction and changes properties according to breakpoints.

Import 'mixins' into your scss file. Signature: vm-media($direction, $properties...).

@import "vm-angular-tools/vm-styles/mixins";

.my-class {
  @include vm-media(
    vertical,
    (display, (block, block, inline, inline)) 
    (background-color, (red, blue, green)), 
    (font-size, (14px, 16px, 18px))
  );
}

vm_expansion

Fills an element with 'background-color' or 'border-image' from center to sides.

Import 'mixins' into your scss file. Signature: vm-expansion($name, $property, $direction, $color1, $color2).

@import "vm-angular-tools/vm-styles/mixins";

.my-class {
  @include vm-expansion(my_anim, BG, horizontal, #F44336, #000000);
  animation: my_anim 0.5s ease-out 1 both;
}