blumjs/components/select/option.component.ts

A UI Package for Angular2

import {Component, OnInit, Input, Output, EventEmitter, ElementRef} from "@angular/core";
@Component({
    selector: 'bl-option',
    template: `
        <a (click)="select()" *ngIf="!hidden" [ngClass]="disabled ? 'disabled':''">
            <ng-content></ng-content>
        </a>
    `,
    styles: [`
        a {
            color: black;
            padding: 10px 10px;
            text-decoration: none;
            display: block;
            font-size: 0.9em;
        }
        
        a:hover {
            background: rgb(67, 148, 103);
            color: white;
            cursor: pointer;
        }
        
        .disabled {
            color: grey;
        }
        
        .disabled:hover {
            background-color: white;
            color: black;
            cursor: not-allowed;
        }
    `]
})
export class OptionComponent implements OnInit {
    @Input() disabled: boolean = false;
    @Input() pinned: boolean = false;
    @Input() value: any;

    @Output() onSelect: EventEmitter<OptionComponent> = new EventEmitter<OptionComponent>();

    private selected: boolean = false;
    hidden: boolean = false;


    constructor(private el: ElementRef) {
    }

    ngOnInit(): void {
    }

    select() {
        if(this.disabled)
            return;
        this.selected = true;
        this.onSelect.emit(this);
    }

    public getText(): string{
        return this.el.nativeElement.innerText;
    }
}