import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UIJarModule } from 'ui-jar';

enableProdMode();
platformBrowserDynamic().bootstrapModule(UIJarModule);

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

/**
 * @group Forms
 * @component Checkbox
 * @description 
 * <div>It's possible use <b>html</b> in the description</div>
 */
@Component({
    selector: 'x-checkbox',
    templateUrl: './checkbox.component.html',
    styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent {
    @Input('isDisabled') isDisabled: boolean = false;
    label: string = 'Item A';

    ...
}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CheckboxComponent } from './checkbox.component';

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

    beforeEach(async(() => {
        /** 
         * @uijar CheckboxComponent
         */
        TestBed.configureTestingModule({
            declarations: [CheckboxComponent]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(CheckboxComponent);
            fixture.detectChanges();      
        });
    }));

    /** @uijarexample Add custom title to example here */
    it('should create component with "isDisabled" set to true', () => {
        fixture.componentInstance.isDisabled = true;
        fixture.componentInstance.label = 'Item A';

        ...
    });

    /** @uijarexample Add custom title to example here */
    it('should create component with "isDisabled" set to false', () => {
        fixture.componentInstance.isDisabled = false;
        fixture.componentInstance.label = 'Item A';

        ...
    });
});

import { Component } from '@angular/core';

/**
 * @group Buttons & indicators
 * @component Buttons
 */
@Component({
    selector: 'button[buttonA]',
    template: '<ng-content></ng-content>',
    styleUrls: ['./button.scss']
})
export class ButtonComponent {
    ...
}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { ButtonsModule } from './buttons.module';

describe('ButtonComponent', () => {
    let fixture: ComponentFixture<ButtonComponentTestHost>;

    beforeEach(async(() => {
        /**
        * @uijar ButtonComponent
        * @hostcomponent ButtonComponentTestHost
        */
        TestBed.configureTestingModule({
            imports: [ButtonsModule],
            declarations: [ButtonComponentTestHost]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(ButtonComponentTestHost);
            fixture.detectChanges();
        });
    }));

    /** @uijarexample Add custom title to example here */
    it('should create standard button', () => {
        fixture.componentInstance.buttonText = 'Standard button';

        ...
    });
});

@Component({
    selector: 'x-button-test-host',
    template: `<button buttonA>{{buttonText}}</button>`
})
class ButtonComponentTestHost {
    buttonText: string;
}

import { Component } from '@angular/core';

/**
 * @group Buttons & indicators
 * @component Buttons
 */
@Component({
    selector: 'button[buttonA]',
    template: '<ng-content></ng-content>',
    styleUrls: ['./button.scss']
})
export class ButtonComponent {
    ...
}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { ButtonsModule } from './buttons.module';

describe('ButtonComponent', () => {
    beforeEach(async(() => {
        /**
         * @uijar ButtonComponent
         */
        TestBed.configureTestingModule({
            imports: [ButtonsModule],
            declarations: [ButtonComponentTestHost, ButtonComponentAnotherTestHost]
        }).compileComponents();
    }));

    /**
     * @uijarexample Add custom title to example here
     * @hostcomponent ButtonComponentTestHost
     */
    it('should create standard button', () => {
        const fixture: ComponentFixture<ButtonComponentTestHost> = TestBed.createComponent(ButtonComponentTestHost);
        fixture.componentInstance.buttonText = 'Standard button';

        ...
    });

    /**
     * @uijarexample Another example with different host component
     * @hostcomponent ButtonComponentAnotherTestHost
     */
    it('should create standard button', () => {
        const fixture: ComponentFixture<ButtonComponentAnotherTestHost> = TestBed.createComponent(ButtonComponentAnotherTestHost);
        fixture.componentInstance.title = 'Custom title';
        fixture.componentInstance.buttonText = 'Standard button';

        ...
    });
});

@Component({
    selector: 'x-button-test-host',
    template: `<button buttonA>{{buttonText}}</button>`
})
class ButtonComponentTestHost {
    buttonText: string;
}

@Component({
    selector: 'x-button-another-test-host',
    template: `
    <h1>{{title}}</h1>
    <button buttonA>{{buttonText}}</button>`
})
class ButtonComponentAnotherTestHost {
    buttonText: string;
    title: string;
}

import { Component, Renderer2, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';

/**
 * @group Icons
 * @component Icon
 */
@Component({
    selector: 'x-icon',
    template: '<ng-content></ng-content>',
    styleUrls: ['./icon.scss']
})
export class IconComponent {
    private _name: string;

    @Input()
    set name(value: string) {
        this._name = value;
        this.setSvgIcon(this._name);
    }

    constructor(private http: HttpClient, private renderer: Renderer2,
                private elementRef: ElementRef) { }

    private setSvgIcon(name: string): void {
        this.getSvgIcon(name).subscribe((svgIcon) => {
            this.renderer.appendChild(this.elementRef.nativeElement, svgIcon);
        });

        ...
    }

    private getSvgIcon(name: string): Observable<SVGElement> {
        return this.http.get(`/cdn/url/${name}.svg`).pipe(map((response) => { ... }));
    }

    ...
}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { HttpClientTestingModule, HttpTestingController, TestRequest } from '@angular/common/http/testing';
import { IconComponent } from './icon.component';

describe('IconComponent', () => {
  let fixture: ComponentFixture<IconComponent>;
  let httpMock: HttpTestingController;

    beforeEach(async(() => {
        /**
        * @uijar IconComponent
        */
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            declarations: [IconComponent],
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(IconComponent);
            httpMock = fixture.componentRef.injector.get(HttpTestingController);
            fixture.detectChanges();
        });
    }));

    /** @uijarexample Add custom title to example here */
    it('should load icon', () => {
        fixture.componentInstance.name = 'icon-name';
        const request: TestRequest = httpMock.expectOne('/cdn/url/icon-name.svg');
        request.flush('<svg>...</svg>');

        ...
    });

    /** @uijarexample Add custom title to example here */
    it('should return error when trying to load invalid icon', () => {
        fixture.componentInstance.name = 'icon-does-not-exist';
        const request: TestRequest = httpMock.expectOne('/cdn/url/icon-does-not-exist.svg');
        request.error(new ErrorEvent('404 - Not Found', {
            error: new Error('Icon not found'),
            message: 'Icon not found'
        }));

        ...
    });
});

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

/**
 * @group Forms
 * @component Checkbox
 */
@Component({
    selector: 'x-checkbox',
    templateUrl: './checkbox.component.html',
    styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent {
    /** Indicates whether checkbox is disabled or not */
    @Input('isDisabled') isDisabled: boolean = false;

    ...
}