/**
 * @author Stephen Jones <stephen.jones@alertlogic.com>
 * @copyright Alert Logic, Inc 2020
 */
import { Input, Output, Component, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
const _c0 = ["container"];
function AlSelectorComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "input", 3);
    i0.ɵɵlistener("change", function AlSelectorComponent_ng_template_5_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.handleChange($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(1, "label", 4);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r2 = ctx.$implicit;
    const i_r3 = ctx.index;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵpropertyInterpolate("id", ctx_r1.uniqueID(i_r3));
    i0.ɵɵpropertyInterpolate("name", ctx_r1.uniqueName());
    i0.ɵɵpropertyInterpolate("value", item_r2.value);
    i0.ɵɵproperty("checked", item_r2.selected === true);
    i0.ɵɵadvance(1);
    i0.ɵɵpropertyInterpolate("for", ctx_r1.uniqueID(i_r3));
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(item_r2.name);
} }
/*
 *
 */
export class AlSelectorComponent {
    constructor() {
        this.title = '';
        this.selectors = [];
        this.selected = new EventEmitter();
        this.selectorCount = 0;
        /*
        * Radios need a shared name to make the selection mutually exclusive.
        * Generate a name based of the count of al-selectors
        */
        this.uniqueName = () => {
            return `radioALSelector-${this.selectorCount}`;
        };
        /*
         * Each radio needs a unique id so that clickin the label
         * selects the radio
        */
        this.uniqueID = (index) => {
            return `radioALSelector-${this.selectorCount}-${index}`;
        };
        /*
         * Radio button selection handler
         */
        this.handleChange = (e) => {
            const target = e.target;
            this.selected.emit(target.value);
        };
        /*
         * Deselect the selection
         */
        this.clear = () => {
            const el = this.container.nativeElement;
            const selectedRadio = el.querySelector('input:checked');
            if (selectedRadio) {
                selectedRadio.checked = false;
            }
        };
        /*
         * Gets a count of al-selectors on the page to facilitate generating
         * a unique input name
         */
        this.globalSelectorCount = () => {
            return document.getElementsByTagName('al-selector').length;
        };
    }
    ngOnInit() {
        this.selectorCount = this.globalSelectorCount();
    }
}
/** @nocollapse */ AlSelectorComponent.ɵfac = function AlSelectorComponent_Factory(t) { return new (t || AlSelectorComponent)(); };
/** @nocollapse */ AlSelectorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: AlSelectorComponent, selectors: [["al-selector"]], viewQuery: function AlSelectorComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵstaticViewQuery(_c0, true);
    } if (rf & 2) {
        var _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
    } }, inputs: { title: "title", selectors: "selectors" }, outputs: { selected: "selected" }, decls: 6, vars: 2, consts: [[1, "selector-container"], ["container", ""], ["ngFor", "", 3, "ngForOf"], ["type", "radio", 3, "id", "name", "value", "checked", "change"], [3, "for"]], template: function AlSelectorComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0, 1);
        i0.ɵɵelementStart(2, "fieldset");
        i0.ɵɵelementStart(3, "legend");
        i0.ɵɵtext(4);
        i0.ɵɵelementEnd();
        i0.ɵɵtemplate(5, AlSelectorComponent_ng_template_5_Template, 3, 6, "ng-template", 2);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵadvance(4);
        i0.ɵɵtextInterpolate(ctx.title);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngForOf", ctx.selectors);
    } }, directives: [i1.NgForOf], styles: [".selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]{position:relative;margin:0;padding:18px 0 0;border:0}.selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%]{position:absolute;top:0;left:0;min-width:200px;font-size:12px;color:#868686}.selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{display:inline-block;background-color:#ededed;padding:10px 6px;cursor:pointer;font-size:14px;min-width:25px;text-align:center}.selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]{opacity:0;width:0;margin:0 2px 0 0}.selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]:checked + label[_ngcontent-%COMP%]{color:#fff;background-color:#57a0d7}.darkMode[_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%], .darkMode   [_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%]{color:#ededed}.darkMode[_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   label[_ngcontent-%COMP%], .darkMode   [_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{background-color:#6c6c6c;color:#ededed}.darkMode[_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]:checked + label[_ngcontent-%COMP%], .darkMode   [_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]:checked + label[_ngcontent-%COMP%]{background-color:#57a0d7}.blueMode[_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%], .blueMode   [_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%]{color:#ededed}.blueMode[_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%] > label[_ngcontent-%COMP%], .blueMode   [_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%] > label[_ngcontent-%COMP%]{background-color:#536984;color:#ededed}.blueMode[_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]:checked + label[_ngcontent-%COMP%], .blueMode   [_nghost-%COMP%]   .selector-container[_ngcontent-%COMP%]   fieldset[_ngcontent-%COMP%]   input[type=radio][_ngcontent-%COMP%]:checked + label[_ngcontent-%COMP%]{background-color:#57a0d7}"] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(AlSelectorComponent, [{
        type: Component,
        args: [{
                selector: 'al-selector',
                templateUrl: './al-selector.component.html',
                styleUrls: ['./al-selector.component.scss']
            }]
    }], null, { title: [{
            type: Input
        }], selectors: [{
            type: Input
        }], selected: [{
            type: Output
        }], container: [{
            type: ViewChild,
            args: ['container', { static: true }]
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 