import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NgClass } from '@angular/common';
import { CollapseOptionComponent } from '../collapse-option/collapse-option.component';
import * as i0 from "@angular/core";
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, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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', standalone: true, imports: [NgClass, CollapseOptionComponent], 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, 