Fabio Picheli picheli20

## counter.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { CounterComponent } from './counter.component';

describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async(() => {
    /**

## package.json
{
  ...
  "scripts": {
    ...
    "serve": "concurrently \"npm run ui-jar\" \"ng serve\"",
    "ui-jar": "node node_modules/ui-jar/dist/bin/cli.js --directory ./projects/ --includes \\.ts$",
    "docs:watch": "npm run ui-jar -- --watch"
  },
  ...
}

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>UiJar</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

## style.scss
@import '../node_modules/foo/bar/src/main.scss';

@include init($color-pallete);

## main.scss
@import './lib/counter/counter.mixing.scss';

@mixin init($color-pallete) {
  // List of all mixing that you need for this library
  @include counter($color-pallete);
}


## counter.mixing.scss
/**
$color-pallete: (
  500: #fff,
  contrast: (
    500: #000,
  ),
);
*/

@mixin counter($color-pallete) {

## counter.component.html
<button (click)="increase()" class="counter-button"> {{ text }} {{ counter }} </button>
	import { async, ComponentFixture, TestBed } from '@angular/core/testing';

	import { CounterComponent } from './counter.component';

	describe('CounterComponent', () => {
	let component: CounterComponent;
	let fixture: ComponentFixture<CounterComponent>;

	beforeEach(async(() => {
	/**
	{
	...
	"scripts": {
	...
	"serve": "concurrently \"npm run ui-jar\" \"ng serve\"",
	"ui-jar": "node node_modules/ui-jar/dist/bin/cli.js --directory ./projects/ --includes \\.ts$",
	"docs:watch": "npm run ui-jar -- --watch"
	},
	...
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>UiJar</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	</head>
	@import '../node_modules/foo/bar/src/main.scss';

	@include init($color-pallete);
	@import './lib/counter/counter.mixing.scss';

	@mixin init($color-pallete) {
	// List of all mixing that you need for this library
	@include counter($color-pallete);
	}
	/**
	$color-pallete: (
	500: #fff,
	contrast: (
	500: #000,
	),
	);
	*/

	@mixin counter($color-pallete) {