import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../../checkbox/checkbox.component";
export class SelectOptionComponent {
    constructor(element) {
        this.element = element;
        this.label = '';
        this.disabled = false;
        this.multiple = false;
        this.selected = false;
        this.selectedChange = new EventEmitter();
        this.role = 'option';
        this.active = false;
    }
    ngOnInit() {
    }
    adjustScroll() {
        this.element.nativeElement.scrollIntoView({
            block: 'center',
        });
    }
    setActiveStyles() {
        this.active = true;
    }
    setInactiveStyles() {
        this.active = false;
    }
    get tabindex() {
        if (this.disabled) {
            return null;
        }
        return -1;
    }
    onEnter(event) {
        event.stopPropagation();
        this.select();
    }
    select(value) {
        if (!this.disabled) {
            const result = value !== undefined ? value : this.multiple ? !this.selected : true;
            this.selectedChange.next(result);
        }
    }
    getLabel() {
        return this.label;
    }
}
SelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: SelectOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
SelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: SelectOptionComponent, selector: "ui-select-option", inputs: { label: "label", disabled: "disabled", multiple: "multiple", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown.enter": "onEnter($event)" }, properties: { "attr.role": "this.role", "class.active": "this.active", "attr.tabindex": "this.tabindex" } }, ngImport: i0, template: "<label class=\"value value--multiple\" *ngIf=\"multiple else basicValue\">\n  <span class=\"value__wrapper\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </span>\n  <span class=\"value__right\">\n    <ui-checkbox [ngModel]=\"selected\" (ngModelChange)=\"select($event)\" [disabled]=\"disabled\"></ui-checkbox>\n  </span>\n</label>\n\n<ng-template #basicValue>\n  <div class=\"value\" (click)=\"select()\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;outline:none;min-height:var(--field-option-height);cursor:pointer;overflow:hidden;border-radius:var(--field-border-radius-inner);color:var(--field-value-color);line-height:var(--field-line-height)}:host:hover{background:var(--select-color-hover)}:host.active{background:var(--select-color-hover)}:host.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}.value{flex:1;padding:12px;line-height:1.2;cursor:pointer;max-width:100%}.value--multiple{display:flex;justify-content:space-between;align-items:center}.value__wrapper{flex:1}.value__right{padding-left:8px}.check-icon{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.CheckboxComponent, selector: "ui-checkbox", inputs: ["name", "value", "required", "disabled"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: SelectOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ui-select-option', template: "<label class=\"value value--multiple\" *ngIf=\"multiple else basicValue\">\n  <span class=\"value__wrapper\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </span>\n  <span class=\"value__right\">\n    <ui-checkbox [ngModel]=\"selected\" (ngModelChange)=\"select($event)\" [disabled]=\"disabled\"></ui-checkbox>\n  </span>\n</label>\n\n<ng-template #basicValue>\n  <div class=\"value\" (click)=\"select()\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;outline:none;min-height:var(--field-option-height);cursor:pointer;overflow:hidden;border-radius:var(--field-border-radius-inner);color:var(--field-value-color);line-height:var(--field-line-height)}:host:hover{background:var(--select-color-hover)}:host.active{background:var(--select-color-hover)}:host.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}.value{flex:1;padding:12px;line-height:1.2;cursor:pointer;max-width:100%}.value--multiple{display:flex;justify-content:space-between;align-items:center}.value__wrapper{flex:1}.value__right{padding-left:8px}.check-icon{padding-left:12px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
                type: Input
            }], disabled: [{
                type: Input
            }], multiple: [{
                type: Input
            }], selected: [{
                type: Input
            }], selectedChange: [{
                type: Output
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], active: [{
                type: HostBinding,
                args: ['class.active']
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], onEnter: [{
                type: HostListener,
                args: ['keydown.enter', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 