import { Component, HostListener, Inject, Injector, Optional } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { setListClass } from '@wm/core';
import { provideAs, provideAsWidgetRef, styler } from '@wm/components/base';
import { DatasetAwareFormComponent } from '../dataset-aware-form.component';
import { registerProps } from '../checkboxset/checkboxset.props';
import { forEach, includes } from "lodash-es";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@wm/components/base";
const _c0 = ["wmCheckboxset", ""];
const _c1 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
const _c2 = a0 => ({ "disabled": a0 });
const _c3 = a0 => ({ "collapsible-content": a0 });
const _c4 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "label", 8);
    i0.ɵɵelement(1, "input", 9)(2, "span", 10);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    const item_r2 = ctx_r3.$implicit;
    const i_r5 = ctx_r3.index;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
    i0.ɵɵadvance();
    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
    i0.ɵɵattribute("data-attr-index", i_r5);
    i0.ɵɵadvance();
    i0.ɵɵproperty("textContent", item_r2.label);
} }
function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "label", 11);
    i0.ɵɵelement(1, "input", 9)(2, "span", 12);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    const item_r2 = ctx_r3.$implicit;
    const i_r5 = ctx_r3.index;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2, ctx_r2.disabled || ctx_r2.readonly));
    i0.ɵɵadvance();
    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
    i0.ɵɵattribute("data-attr-index", i_r5);
} }
function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 5);
    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 10, "label", 7);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("active", item_r2.selected);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r2.content);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r2.content);
} }
function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
} }
function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "div", 13);
} }
function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 23);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
} }
function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 24);
} if (rf & 2) {
    const groupObj_r7 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵproperty("textContent", groupObj_r7.data.length);
} }
function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "label", 8);
    i0.ɵɵelement(1, "input", 9)(2, "span", 10);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r9 = i0.ɵɵnextContext();
    const item_r9 = ctx_r9.$implicit;
    const i_r11 = ctx_r9.index;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
    i0.ɵɵadvance();
    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
    i0.ɵɵattribute("data-attr-index", i_r11);
    i0.ɵɵadvance();
    i0.ɵɵproperty("textContent", item_r9.label);
} }
function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "label", 11);
    i0.ɵɵelement(1, "input", 9)(2, "span", 26);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r9 = i0.ɵɵnextContext();
    const item_r9 = ctx_r9.$implicit;
    const i_r11 = ctx_r9.index;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2, ctx_r2.disabled || ctx_r2.readonly));
    i0.ɵɵadvance();
    i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
    i0.ɵɵattribute("data-attr-index", i_r11);
} }
function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 25);
    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r9 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵclassProp("active", item_r9.selected);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r2.content);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r2.content);
} }
function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
    i0.ɵɵelementStart(3, "h4", 18);
    i0.ɵɵtext(4);
    i0.ɵɵelementStart(5, "div", 19);
    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 20)(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
    i0.ɵɵelementEnd()()();
    i0.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const groupObj_r7 = ctx.$implicit;
    const groupindex_r12 = ctx.index;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
    i0.ɵɵadvance();
    i0.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(9, _c3, ctx_r2.collapsible));
    i0.ɵɵadvance();
    i0.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
} }
function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 11, "li", 14);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
} }
const DEFAULT_CLS = 'app-checkboxset list-group inline';
const WIDGET_CONFIG = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS };
export class CheckboxsetComponent extends DatasetAwareFormComponent {
    static { this.initializeProps = registerProps(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.layout = '';
        styler(this.nativeElement, this);
        this.multiple = true;
    }
    onCheckboxLabelClick($event, key) {
        if (!$($event.target).is('input')) {
            return;
        }
        // construct the _model from the checked elements.
        const inputElements = this.nativeElement.querySelectorAll('input:checked');
        const keys = [];
        forEach(inputElements, ($el) => {
            // @ts-ignore
            keys.push($el.value);
        });
        this.modelByKey = keys;
        this.invokeOnTouched();
        // invoke on datavalue change.
        this.invokeOnChange(this.datavalue, $event || {}, true);
    }
    // change and blur events are added from the template
    handleEvent(node, eventName, callback, locals) {
        if (eventName === 'click') {
            this.eventManager.addEventListener(node, eventName, e => {
                if (!$(e.target).is('input')) {
                    return;
                }
                locals.$event = e;
                return callback();
            });
        }
        else if (!includes(['change'], eventName)) {
            super.handleEvent(node, eventName, callback, locals);
        }
    }
    onKeyDown($event) {
        $event.preventDefault();
        $event.target.click();
    }
    onPropertyChange(key, nv, ov) {
        if (key === 'tabindex') {
            return;
        }
        if (key === 'required') {
            this._onChange(this.datavalue);
            return;
        }
        if (key === 'itemsperrow') {
            setListClass(this);
        }
        else {
            super.onPropertyChange(key, nv, ov);
        }
    }
    static { this.ɵfac = function CheckboxsetComponent_Factory(t) { return new (t || CheckboxsetComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxsetComponent, selectors: [["", "wmCheckboxset", ""]], hostBindings: function CheckboxsetComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("keydown.enter", function CheckboxsetComponent_keydown_enter_HostBindingHandler($event) { return ctx.onKeyDown($event, "ENTER"); });
        } }, exportAs: ["wmCheckboxset"], features: [i0.ɵɵProvidersFeature([
                provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                provideAsWidgetRef(CheckboxsetComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], ["aria-hidden", "true", 1, "list-group-header", 3, "click", "id", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
            i0.ɵɵelement(1, "input", 2);
            i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            const groupedListTemplate_r13 = i0.ɵɵreference(4);
            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
            i0.ɵɵadvance();
            i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
        type: Component,
        args: [{ selector: '[wmCheckboxset]', exportAs: 'wmCheckboxset', providers: [
                    provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                    provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                    provideAsWidgetRef(CheckboxsetComponent)
                ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n                   type=\"checkbox\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n                   type=\"checkbox\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData; let groupindex = index;\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n            <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { onKeyDown: [{
            type: HostListener,
            args: ['keydown.enter', ['$event', '"ENTER"']]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckboxsetComponent, { className: "CheckboxsetComponent", filePath: "checkboxset/checkboxset.component.ts", lineNumber: 27 }); })();
//# sourceMappingURL=data:application/json;base64, 