import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../collapse-option/collapse-option.component";
export class CollapsedItemsComponent {
    items;
    isCollapsed = false;
    isCompleted;
    counterLabel;
    isCollapsedChange = new EventEmitter();
    onChange(event) {
        this.isCollapsed = !this.isCollapsed;
        this.isCollapsedChange.emit(this.isCollapsed);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapsedItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CollapsedItemsComponent, selector: "s-collapsed-items", inputs: { items: "items", isCollapsed: "isCollapsed", isCompleted: "isCompleted", counterLabel: "counterLabel" }, outputs: { isCollapsedChange: "isCollapsedChange" }, ngImport: i0, template: "<div class=\"collapsed-items\">\n    <div\n        class=\"collapsed-items__item\"\n        [ngClass]=\"{ 'collapsed-items__item--completed': isCompleted }\"\n    >\n        <div class=\"collapsed-items__item__icon-wrapper\">\n            <s-collapse-option\n                [isCollapsed]=\"isCollapsed\"\n                (toggleCollapsed)=\"onChange($event)\"\n            >\n            </s-collapse-option>\n            <div class=\"collapsed-items__item__icon-wrapper__line\"></div>\n        </div>\n        <div\n            class=\"collapsed-items__item__info\"\n            (click)=\"onChange(!isCollapsed)\"\n        >\n            <div class=\"collapsed-items__item__info__description\">\n                {{ items.length }} {{ counterLabel }}\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".collapsed-items .collapsed-items__item{align-items:stretch;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:20px;-webkit-user-select:none;user-select:none;cursor:pointer}.collapsed-items .collapsed-items__item .collapsed-items__item__info .collapsed-items__item__info__description{color:#428bca;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.collapsed-items .collapsed-items__item.collapsed-items__item--completed .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#0c9348}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.CollapseOptionComponent, selector: "s-collapse-option", inputs: ["isCollapsed"], outputs: ["toggleCollapsed"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapsedItemsComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-collapsed-items', template: "<div class=\"collapsed-items\">\n    <div\n        class=\"collapsed-items__item\"\n        [ngClass]=\"{ 'collapsed-items__item--completed': isCompleted }\"\n    >\n        <div class=\"collapsed-items__item__icon-wrapper\">\n            <s-collapse-option\n                [isCollapsed]=\"isCollapsed\"\n                (toggleCollapsed)=\"onChange($event)\"\n            >\n            </s-collapse-option>\n            <div class=\"collapsed-items__item__icon-wrapper__line\"></div>\n        </div>\n        <div\n            class=\"collapsed-items__item__info\"\n            (click)=\"onChange(!isCollapsed)\"\n        >\n            <div class=\"collapsed-items__item__info__description\">\n                {{ items.length }} {{ counterLabel }}\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".collapsed-items .collapsed-items__item{align-items:stretch;display:flex}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper{align-items:center;display:flex;flex-direction:column;flex-shrink:0;justify-content:center;width:56px}.collapsed-items .collapsed-items__item .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;flex-grow:1;min-height:20px;width:3px}.collapsed-items .collapsed-items__item .collapsed-items__item__info{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;margin-bottom:20px;-webkit-user-select:none;user-select:none;cursor:pointer}.collapsed-items .collapsed-items__item .collapsed-items__item__info .collapsed-items__item__info__description{color:#428bca;font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;line-height:150%}.collapsed-items .collapsed-items__item.collapsed-items__item--completed .collapsed-items__item__icon-wrapper .collapsed-items__item__icon-wrapper__line{background-color:#0c9348}\n"] }]
        }], propDecorators: { items: [{
                type: Input,
                args: [{ required: true }]
            }], isCollapsed: [{
                type: Input
            }], isCompleted: [{
                type: Input
            }], counterLabel: [{
                type: Input
            }], isCollapsedChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2VkLWl0ZW1zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy90aW1lbGluZS9zcmMvbGliL3RpbWVsaW5lL2NvbXBvbmVudHMvdmVydGljYWwtdGltZWxpbmUvY29tcG9uZW50cy9jb2xsYXBzZWQtaXRlbXMvY29sbGFwc2VkLWl0ZW1zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy90aW1lbGluZS9zcmMvbGliL3RpbWVsaW5lL2NvbXBvbmVudHMvdmVydGljYWwtdGltZWxpbmUvY29tcG9uZW50cy9jb2xsYXBzZWQtaXRlbXMvY29sbGFwc2VkLWl0ZW1zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFTdkUsTUFBTSxPQUFPLHVCQUF1QjtJQUV6QixLQUFLLENBQWtCO0lBR3ZCLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFHcEIsV0FBVyxDQUFXO0lBR3RCLFlBQVksQ0FBVTtJQUd0QixpQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0lBRWhELFFBQVEsQ0FBQyxLQUFjO1FBQzFCLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ2xELENBQUM7d0dBbkJRLHVCQUF1Qjs0RkFBdkIsdUJBQXVCLGdPQ1RwQywyeUJBdUJBOzs0RkRkYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0ksbUJBQW1COzhCQU10QixLQUFLO3NCQURYLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUlsQixXQUFXO3NCQURqQixLQUFLO2dCQUlDLFdBQVc7c0JBRGpCLEtBQUs7Z0JBSUMsWUFBWTtzQkFEbEIsS0FBSztnQkFJQyxpQkFBaUI7c0JBRHZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBUaW1lbGluZUl0ZW0gfSBmcm9tICcuLi8uLi8uLi8uLi9tb2RlbHMvdGltZWxpbmUtaXRlbSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncy1jb2xsYXBzZWQtaXRlbXMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9jb2xsYXBzZWQtaXRlbXMuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2NvbGxhcHNlZC1pdGVtcy5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xsYXBzZWRJdGVtc0NvbXBvbmVudCB7XG4gICAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSlcbiAgICBwdWJsaWMgaXRlbXMhOiBUaW1lbGluZUl0ZW1bXTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGlzQ29sbGFwc2VkID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBpc0NvbXBsZXRlZD86IGJvb2xlYW47XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBjb3VudGVyTGFiZWw/OiBzdHJpbmc7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgaXNDb2xsYXBzZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICBwdWJsaWMgb25DaGFuZ2UoZXZlbnQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc0NvbGxhcHNlZCA9ICF0aGlzLmlzQ29sbGFwc2VkO1xuICAgICAgICB0aGlzLmlzQ29sbGFwc2VkQ2hhbmdlLmVtaXQodGhpcy5pc0NvbGxhcHNlZCk7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNvbGxhcHNlZC1pdGVtc1wiPlxuICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJjb2xsYXBzZWQtaXRlbXNfX2l0ZW1cIlxuICAgICAgICBbbmdDbGFzc109XCJ7ICdjb2xsYXBzZWQtaXRlbXNfX2l0ZW0tLWNvbXBsZXRlZCc6IGlzQ29tcGxldGVkIH1cIlxuICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbGxhcHNlZC1pdGVtc19faXRlbV9faWNvbi13cmFwcGVyXCI+XG4gICAgICAgICAgICA8cy1jb2xsYXBzZS1vcHRpb25cbiAgICAgICAgICAgICAgICBbaXNDb2xsYXBzZWRdPVwiaXNDb2xsYXBzZWRcIlxuICAgICAgICAgICAgICAgICh0b2dnbGVDb2xsYXBzZWQpPVwib25DaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L3MtY29sbGFwc2Utb3B0aW9uPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbGxhcHNlZC1pdGVtc19faXRlbV9faWNvbi13cmFwcGVyX19saW5lXCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cImNvbGxhcHNlZC1pdGVtc19faXRlbV9faW5mb1wiXG4gICAgICAgICAgICAoY2xpY2spPVwib25DaGFuZ2UoIWlzQ29sbGFwc2VkKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb2xsYXBzZWQtaXRlbXNfX2l0ZW1fX2luZm9fX2Rlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgICAgICAge3sgaXRlbXMubGVuZ3RoIH19IHt7IGNvdW50ZXJMYWJlbCB9fVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=