import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, ContentChild, contentChildren, EventEmitter, Input, Output, viewChild, } from '@angular/core';
import { ObjectCardFieldComponent } from './elements/field/object-card-field.component';
import { ObjectCardMainComponent } from './elements/main/object-card-main.component';
import { Breakpoints } from '@seniorsistemas/angular-components/utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@seniorsistemas/angular-components/tooltip";
import * as i3 from "@seniorsistemas/angular-components/shared";
export class ObjectCardComponent {
    static nextIdSeed = 0;
    static _nextId = ObjectCardComponent.nextIdSeed;
    static getNextId() {
        return this._nextId++;
    }
    id = `s-object-card-${ObjectCardComponent.getNextId()}`;
    expanded = false;
    expandTooltip = 'Abrir painel';
    collapseTooltip = 'Fechar painel';
    fieldsMinWidth = 200;
    severity = 'default';
    borderButtonOptions;
    expandedChange = new EventEmitter();
    main = null;
    fields = contentChildren(ObjectCardFieldComponent, { descendants: true });
    container = viewChild.required('contentContainer');
    cardMainContainer = viewChild.required('cardMainContainer');
    iconContainer = viewChild.required('iconContainer');
    maxVisibleFields = 0;
    ngAfterContentChecked() {
        this.update();
    }
    update() {
        const windowWidth = window.innerWidth;
        const containerWidth = this.container().nativeElement.getBoundingClientRect().width;
        const mainFieldWidth = this.cardMainContainer().nativeElement.getBoundingClientRect().width;
        let remainingSpace = containerWidth - mainFieldWidth;
        const fieldsMinWidth = this.fieldsMinWidth;
        const expandIconWidth = this.iconContainer().nativeElement.getBoundingClientRect().width;
        let maxFieldQtd;
        if (windowWidth <= Breakpoints.SM_MAX) {
            maxFieldQtd = 0;
        }
        else {
            maxFieldQtd = Math.floor(remainingSpace / fieldsMinWidth);
        }
        const hasExpandIcon = maxFieldQtd < this.fields().length;
        if (hasExpandIcon) {
            this.iconContainer().nativeElement.style.display = 'flex';
            remainingSpace = remainingSpace - expandIconWidth;
            maxFieldQtd = Math.floor(remainingSpace / fieldsMinWidth);
        }
        else {
            this.iconContainer().nativeElement.style.display = 'none';
        }
        this.maxVisibleFields = maxFieldQtd;
        if (maxFieldQtd >= this.fields().length && this.expanded) {
            this.collapse();
        }
    }
    toggle() {
        this.expanded ? this.collapse() : this.expand();
    }
    expand() {
        this.expanded = true;
        this.expandedChange.emit(this.expanded);
    }
    collapse() {
        this.expanded = false;
        this.expandedChange.emit(this.expanded);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ObjectCardComponent, selector: "s-object-card", inputs: { id: "id", expanded: "expanded", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", fieldsMinWidth: "fieldsMinWidth", severity: "severity", borderButtonOptions: "borderButtonOptions" }, outputs: { expandedChange: "expandedChange" }, queries: [{ propertyName: "fields", predicate: ObjectCardFieldComponent, descendants: true, isSignal: true }, { propertyName: "main", first: true, predicate: ObjectCardMainComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }, { propertyName: "cardMainContainer", first: true, predicate: ["cardMainContainer"], descendants: true, isSignal: true }, { propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"object-card-container\"\n>\n    @if (borderButtonOptions?.visible ? borderButtonOptions?.visible(severity) : false) {\n        <s-border-button\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"object-card__border-button\"\n            [@BorderButtonAnimation]\n        ></s-border-button>\n    }\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        #contentContainer\n        [ngClass]=\"{\n            'with-hidden-fields': fields().length > maxVisibleFields,\n            'with-visible-fields': fields().length && maxVisibleFields,\n            'main-container--severity-default': severity === 'default',\n            'main-container--severity-info': severity === 'info',\n            'main-container--severity-warn': severity === 'warn',\n            'main-container--severity-error': severity === 'error',\n            'main-container--severity-success': severity === 'success',\n        }\"\n    >\n        <div class=\"object-content\">\n            <div\n                class=\"s-object-card-main\"\n                #cardMainContainer\n                [style.min-width.px]=\"fieldsMinWidth\"\n            >\n                <ng-content select=\"s-object-card-main\"></ng-content>\n            </div>\n\n            @if (maxVisibleFields && fields().length) {\n                <div class=\"divider\"></div>\n            }\n\n            @for (field of fields() | slice: 0 : maxVisibleFields; track field.id) {\n                <div\n                    class=\"s-object-card-field\"\n                    [style.min-width.px]=\"fieldsMinWidth\"\n                >\n                    <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n                </div>\n            }\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            #iconContainer\n            (click)=\"toggle()\"\n            [sTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        >\n            <span\n                [id]=\"id + '-expand-icon'\"\n                class=\"expand-icon fa\"\n                [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"\n            ></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default': severity === 'default',\n            'expandable-container--severity-info': severity === 'info',\n            'expandable-container--severity-warn': severity === 'warn',\n            'expandable-container--severity-error': severity === 'error',\n            'expandable-container--severity-success': severity === 'success',\n        }\"\n    >\n        <div class=\"childlist\">\n            @for (field of fields() | slice: maxVisibleFields : fields().length; track field.id) {\n                <div class=\"s-object-card-field\">\n                    <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block}:host::ng-deep .sds-badge{height:auto;white-space:normal}.container{margin-bottom:20px;position:relative}.main-container{display:flex}.main-container,.expandable-container{background-color:#fff;border:1px solid #cccccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s ease;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s ease;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s ease;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s ease;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s ease;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s ease;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s ease;border-color:#c13018}.main-container--severity-success{transition:border-color .5s ease;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:flex;text-align:center;align-items:center;cursor:pointer;padding:12px}.expand-icon{flex:1}.object-content{display:flex;width:100%}.s-object-card-main{overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width: 767px){.s-object-card-main{max-width:calc(100% - 50px)}}.childlist{width:100%;display:flex;flex-wrap:wrap;padding:1em;gap:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i3.BorderButtonComponent, selector: "s-border-button", inputs: ["severity", "options"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], animations: [
            trigger('expandableContent', [
                state('*', style({
                    height: '0',
                })),
                state('false', style({
                    height: '0',
                })),
                state('true', style({
                    height: '*',
                })),
                transition('* => true', animate('200ms ease-out')),
                transition('false <=> true', animate('200ms ease-out')),
            ]),
            trigger('BorderButtonAnimation', [
                transition(':enter', [
                    style({ transform: 'scaleY(0)', opacity: 0 }),
                    animate('300ms ease', style({ transform: 'scaleY(1)', opacity: 1 })),
                ]),
                transition(':leave', [
                    style({ transform: 'scaleY(1)', opacity: 1 }),
                    animate('300ms ease', style({ transform: 'scaleY(0)', opacity: 0 })),
                ]),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-object-card', animations: [
                        trigger('expandableContent', [
                            state('*', style({
                                height: '0',
                            })),
                            state('false', style({
                                height: '0',
                            })),
                            state('true', style({
                                height: '*',
                            })),
                            transition('* => true', animate('200ms ease-out')),
                            transition('false <=> true', animate('200ms ease-out')),
                        ]),
                        trigger('BorderButtonAnimation', [
                            transition(':enter', [
                                style({ transform: 'scaleY(0)', opacity: 0 }),
                                animate('300ms ease', style({ transform: 'scaleY(1)', opacity: 1 })),
                            ]),
                            transition(':leave', [
                                style({ transform: 'scaleY(1)', opacity: 1 }),
                                animate('300ms ease', style({ transform: 'scaleY(0)', opacity: 0 })),
                            ]),
                        ]),
                    ], template: "<div\n    [id]=\"id\"\n    class=\"object-card-container\"\n>\n    @if (borderButtonOptions?.visible ? borderButtonOptions?.visible(severity) : false) {\n        <s-border-button\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"object-card__border-button\"\n            [@BorderButtonAnimation]\n        ></s-border-button>\n    }\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        #contentContainer\n        [ngClass]=\"{\n            'with-hidden-fields': fields().length > maxVisibleFields,\n            'with-visible-fields': fields().length && maxVisibleFields,\n            'main-container--severity-default': severity === 'default',\n            'main-container--severity-info': severity === 'info',\n            'main-container--severity-warn': severity === 'warn',\n            'main-container--severity-error': severity === 'error',\n            'main-container--severity-success': severity === 'success',\n        }\"\n    >\n        <div class=\"object-content\">\n            <div\n                class=\"s-object-card-main\"\n                #cardMainContainer\n                [style.min-width.px]=\"fieldsMinWidth\"\n            >\n                <ng-content select=\"s-object-card-main\"></ng-content>\n            </div>\n\n            @if (maxVisibleFields && fields().length) {\n                <div class=\"divider\"></div>\n            }\n\n            @for (field of fields() | slice: 0 : maxVisibleFields; track field.id) {\n                <div\n                    class=\"s-object-card-field\"\n                    [style.min-width.px]=\"fieldsMinWidth\"\n                >\n                    <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n                </div>\n            }\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            #iconContainer\n            (click)=\"toggle()\"\n            [sTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        >\n            <span\n                [id]=\"id + '-expand-icon'\"\n                class=\"expand-icon fa\"\n                [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"\n            ></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default': severity === 'default',\n            'expandable-container--severity-info': severity === 'info',\n            'expandable-container--severity-warn': severity === 'warn',\n            'expandable-container--severity-error': severity === 'error',\n            'expandable-container--severity-success': severity === 'success',\n        }\"\n    >\n        <div class=\"childlist\">\n            @for (field of fields() | slice: maxVisibleFields : fields().length; track field.id) {\n                <div class=\"s-object-card-field\">\n                    <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block}:host::ng-deep .sds-badge{height:auto;white-space:normal}.container{margin-bottom:20px;position:relative}.main-container{display:flex}.main-container,.expandable-container{background-color:#fff;border:1px solid #cccccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s ease;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s ease;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s ease;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s ease;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s ease;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s ease;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s ease;border-color:#c13018}.main-container--severity-success{transition:border-color .5s ease;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:flex;text-align:center;align-items:center;cursor:pointer;padding:12px}.expand-icon{flex:1}.object-content{display:flex;width:100%}.s-object-card-main{overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width: 767px){.s-object-card-main{max-width:calc(100% - 50px)}}.childlist{width:100%;display:flex;flex-wrap:wrap;padding:1em;gap:1em}\n"] }]
        }], propDecorators: { id: [{
                type: Input
            }], expanded: [{
                type: Input
            }], expandTooltip: [{
                type: Input
            }], collapseTooltip: [{
                type: Input
            }], fieldsMinWidth: [{
                type: Input
            }], severity: [{
                type: Input
            }], borderButtonOptions: [{
                type: Input
            }], expandedChange: [{
                type: Output
            }], main: [{
                type: ContentChild,
                args: [ObjectCardMainComponent, { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 