import { Component, Input } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { WidgetBaseComponent } from '@sunbird-cb/resolver-v2';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CardCompetencyComponent extends WidgetBaseComponent {
    constructor() {
        super();
        this.competencyArea = '';
        this.isExpanded = false;
    }
    ngOnInit() {
    }
    handleToggleSize(_viewMore) {
        this.isExpanded = !this.isExpanded;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardCompetencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardCompetencyComponent, selector: "ws-widget-card-competency", inputs: { widgetData: "widgetData", competencyArea: "competencyArea" }, usesInheritance: true, ngImport: i0, template: "<div [@expandCollapse]=\"isExpanded ? 'expanded' : 'collapsed'\" [ngClass]=\"{'expanded': isExpanded}\" >\n    <div class=\"competency-passbook-theme\" [ngClass]=\"{'behavioural': (widgetData?.competencyArea?.toLowerCase() === 'behavioural' || widgetData?.competencyArea?.toLowerCase() === 'behavioral'), 'functional': widgetData?.competencyArea?.toLowerCase() === 'functional', 'domain': widgetData?.competencyArea?.toLowerCase() === 'domain', 'shadow-md': isExpanded}\">\n        <div class=\"detail\">\n            <div class=\"flex flex-col gap-2\">\n                <div class=\"text-base font-bold ellipsis\" title=\"{{ widgetData?.content?.key }}\">{{ widgetData?.content?.key }}</div>\n                <div class=\"flex flex-wrap gap-4 chip-container\">\n                    <ng-container *ngFor=\"let subTheme of widgetData?.content?.value; let i = index\">\n                        <div class=\"chip rounded-full text-xs\" [ngClass]=\"{'hidden': (i >= 1 && !isExpanded), 'chip-ellipsis': !isExpanded && widgetData?.content?.value?.length > 1 }\" title=\"{{ subTheme }}\">\n                            {{ subTheme }}\n                        </div>\n                    </ng-container>\n                    <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"widgetData?.content?.value?.length > 1 && !isExpanded\" (click)=\"handleToggleSize()\">\n                        View more\n                    </div>\n                    <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"isExpanded\" (click)=\"handleToggleSize()\">\n                        View less\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".behavioural{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-passbook-theme{width:100%;max-width:344px;min-width:320px;height:92px;border-radius:8px 8px 12px 12px}.ellipsis{white-space:nowrap;width:280px;overflow:hidden;text-overflow:ellipsis}.detail{width:100%;max-width:344px;background-color:#fff;border-radius:8px;position:relative;top:4px;height:inherit;border:1px solid rgba(0,0,0,.08)}.detail>div{padding:12px 16px 16px}.detail .chip-container .chip{border:1px solid #1b4ca1;color:#1b4ca1;line-height:14px;padding:4px 8px;white-space:normal}.chip-ellipsis{white-space:nowrap!important;max-width:100px;overflow:hidden;text-overflow:ellipsis}.expanded{padding-bottom:12px}.expanded .competency-passbook-theme{max-width:372px;width:100%;min-height:92px;height:auto}.expanded .competency-passbook-theme .detail{width:100%;max-width:inherit;min-height:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
            trigger('expandCollapse', [
                state('collapsed', style({
                    height: '104px',
                    width: '320px',
                })),
                state('expanded', style({
                    minHeight: '120px',
                    width: '372px',
                    height: 'auto',
                })),
                transition('collapsed <=> expanded', [
                    animate('0.5s'),
                ]),
            ]),
        ] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardCompetencyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-card-competency', animations: [
                        trigger('expandCollapse', [
                            state('collapsed', style({
                                height: '104px',
                                width: '320px',
                            })),
                            state('expanded', style({
                                minHeight: '120px',
                                width: '372px',
                                height: 'auto',
                            })),
                            transition('collapsed <=> expanded', [
                                animate('0.5s'),
                            ]),
                        ]),
                    ], template: "<div [@expandCollapse]=\"isExpanded ? 'expanded' : 'collapsed'\" [ngClass]=\"{'expanded': isExpanded}\" >\n    <div class=\"competency-passbook-theme\" [ngClass]=\"{'behavioural': (widgetData?.competencyArea?.toLowerCase() === 'behavioural' || widgetData?.competencyArea?.toLowerCase() === 'behavioral'), 'functional': widgetData?.competencyArea?.toLowerCase() === 'functional', 'domain': widgetData?.competencyArea?.toLowerCase() === 'domain', 'shadow-md': isExpanded}\">\n        <div class=\"detail\">\n            <div class=\"flex flex-col gap-2\">\n                <div class=\"text-base font-bold ellipsis\" title=\"{{ widgetData?.content?.key }}\">{{ widgetData?.content?.key }}</div>\n                <div class=\"flex flex-wrap gap-4 chip-container\">\n                    <ng-container *ngFor=\"let subTheme of widgetData?.content?.value; let i = index\">\n                        <div class=\"chip rounded-full text-xs\" [ngClass]=\"{'hidden': (i >= 1 && !isExpanded), 'chip-ellipsis': !isExpanded && widgetData?.content?.value?.length > 1 }\" title=\"{{ subTheme }}\">\n                            {{ subTheme }}\n                        </div>\n                    </ng-container>\n                    <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"widgetData?.content?.value?.length > 1 && !isExpanded\" (click)=\"handleToggleSize()\">\n                        View more\n                    </div>\n                    <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"isExpanded\" (click)=\"handleToggleSize()\">\n                        View less\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".behavioural{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-passbook-theme{width:100%;max-width:344px;min-width:320px;height:92px;border-radius:8px 8px 12px 12px}.ellipsis{white-space:nowrap;width:280px;overflow:hidden;text-overflow:ellipsis}.detail{width:100%;max-width:344px;background-color:#fff;border-radius:8px;position:relative;top:4px;height:inherit;border:1px solid rgba(0,0,0,.08)}.detail>div{padding:12px 16px 16px}.detail .chip-container .chip{border:1px solid #1b4ca1;color:#1b4ca1;line-height:14px;padding:4px 8px;white-space:normal}.chip-ellipsis{white-space:nowrap!important;max-width:100px;overflow:hidden;text-overflow:ellipsis}.expanded{padding-bottom:12px}.expanded .competency-passbook-theme{max-width:372px;width:100%;min-height:92px;height:auto}.expanded .competency-passbook-theme .detail{width:100%;max-width:inherit;min-height:inherit;height:inherit}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { widgetData: [{
                type: Input
            }], competencyArea: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 