import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, input, TemplateRef, Component, Input, Output, ContentChild, ViewChild, HostListener, contentChildren, viewChild, NgModule } from '@angular/core';
import * as i2$1 from '@seniorsistemas/angular-components/thumbnail';
import { ThumbnailComponent, ThumbnailModule } from '@seniorsistemas/angular-components/thumbnail';
import * as i2 from '@seniorsistemas/angular-components/tooltip';
import { TooltipModule } from '@seniorsistemas/angular-components/tooltip';
import * as i3 from '@seniorsistemas/angular-components/button';
import { ButtonModule } from '@seniorsistemas/angular-components/button';
import * as i4 from '@seniorsistemas/angular-components/badge';
import { BadgeModule } from '@seniorsistemas/angular-components/badge';
import { Breakpoints } from '@seniorsistemas/angular-components/utils';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i3$1 from '@seniorsistemas/angular-components/shared';
import { BorderButtonModule } from '@seniorsistemas/angular-components/shared';

class ObjectCardFieldComponent {
    static nextId = 0;
    id = `s-object-card-field-${ObjectCardFieldComponent.nextId++}`;
    imageSource;
    imageAlt;
    iconClass;
    label;
    description;
    buttonLabel;
    buttonModel = [];
    buttonClick = new EventEmitter();
    thumbnailComponent = null;
    content = null;
    badge = input('');
    badgeColor = input('blue');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ObjectCardFieldComponent, selector: "s-object-card-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, imageSource: { classPropertyName: "imageSource", publicName: "imageSource", isSignal: false, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: false, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: false, isRequired: false, transformFunction: null }, buttonModel: { classPropertyName: "buttonModel", publicName: "buttonModel", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, queries: [{ propertyName: "thumbnailComponent", first: true, predicate: ThumbnailComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template>\n    <div class=\"container\">\n        <ng-content select=\"s-thumbnail\"></ng-content>\n        @if (!thumbnailComponent && (imageSource || iconClass)) {\n            <s-thumbnail\n                [id]=\"id + '-thumbnail'\"\n                [imageSource]=\"imageSource\"\n                [imageAlt]=\"imageAlt || label\"\n                [iconClass]=\"iconClass ?? ''\"\n                size=\"small\"\n            ></s-thumbnail>\n        }\n\n        <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n\n            @if (!labelTemplate.children.length) {\n                <span\n                    [id]=\"id + '-label'\"\n                    class=\"label\"\n                    [sTooltip]=\"label\"\n                    >{{ label }}</span\n                >\n            }\n\n            <div #descriptionTemplate>\n                @if (!badge()) {\n                    <ng-content select=\"[descriptionTemplate]\"></ng-content>\n                }\n            </div>\n            @if (!descriptionTemplate.children.length) {\n                <span\n                    [id]=\"id + '-description'\"\n                    class=\"description\"\n                    [sTooltip]=\"description\"\n                    >{{ description }}</span\n                >\n            }\n\n            @if (badge()) {\n                <s-badge\n                    [text]=\"badge()\"\n                    [color]=\"badgeColor()\"\n                    [enableTruncateText]=\"true\"\n                >\n                </s-badge>\n            }\n            @if (buttonLabel) {\n                <s-button\n                    [id]=\"id + '-button'\"\n                    styleClass=\"object-card-button\"\n                    priority=\"link\"\n                    [label]=\"buttonLabel\"\n                    [menuOptions]=\"buttonModel\"\n                    size=\"small\"\n                    (clicked)=\"buttonClick.emit($event)\"\n                ></s-button>\n            }\n        </div>\n    </div>\n</ng-template>\n\n", styles: [".container{align-items:center;display:flex;height:100%}.info-container{margin-left:10px}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{color:#999;display:block}.info-container .description{display:block}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.info-container{flex:1}}@media (max-width: 767px){.info-container,.info-container span{white-space:normal}}.info-container:only-child{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i2.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i2$1.ThumbnailComponent, selector: "s-thumbnail", inputs: ["id", "size", "imageSource", "imageFallback", "imageAlt", "iconClass", "hasAction", "actionIconClass", "isTile", "isBrand"] }, { kind: "component", type: i3.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel"], outputs: ["clicked"] }, { kind: "component", type: i4.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-object-card-field', template: "<ng-template>\n    <div class=\"container\">\n        <ng-content select=\"s-thumbnail\"></ng-content>\n        @if (!thumbnailComponent && (imageSource || iconClass)) {\n            <s-thumbnail\n                [id]=\"id + '-thumbnail'\"\n                [imageSource]=\"imageSource\"\n                [imageAlt]=\"imageAlt || label\"\n                [iconClass]=\"iconClass ?? ''\"\n                size=\"small\"\n            ></s-thumbnail>\n        }\n\n        <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n\n            @if (!labelTemplate.children.length) {\n                <span\n                    [id]=\"id + '-label'\"\n                    class=\"label\"\n                    [sTooltip]=\"label\"\n                    >{{ label }}</span\n                >\n            }\n\n            <div #descriptionTemplate>\n                @if (!badge()) {\n                    <ng-content select=\"[descriptionTemplate]\"></ng-content>\n                }\n            </div>\n            @if (!descriptionTemplate.children.length) {\n                <span\n                    [id]=\"id + '-description'\"\n                    class=\"description\"\n                    [sTooltip]=\"description\"\n                    >{{ description }}</span\n                >\n            }\n\n            @if (badge()) {\n                <s-badge\n                    [text]=\"badge()\"\n                    [color]=\"badgeColor()\"\n                    [enableTruncateText]=\"true\"\n                >\n                </s-badge>\n            }\n            @if (buttonLabel) {\n                <s-button\n                    [id]=\"id + '-button'\"\n                    styleClass=\"object-card-button\"\n                    priority=\"link\"\n                    [label]=\"buttonLabel\"\n                    [menuOptions]=\"buttonModel\"\n                    size=\"small\"\n                    (clicked)=\"buttonClick.emit($event)\"\n                ></s-button>\n            }\n        </div>\n    </div>\n</ng-template>\n\n", styles: [".container{align-items:center;display:flex;height:100%}.info-container{margin-left:10px}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{color:#999;display:block}.info-container .description{display:block}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.info-container{flex:1}}@media (max-width: 767px){.info-container,.info-container span{white-space:normal}}.info-container:only-child{margin-left:0}\n"] }]
        }], propDecorators: { id: [{
                type: Input
            }], imageSource: [{
                type: Input
            }], imageAlt: [{
                type: Input
            }], iconClass: [{
                type: Input
            }], label: [{
                type: Input
            }], description: [{
                type: Input
            }], buttonLabel: [{
                type: Input
            }], buttonModel: [{
                type: Input
            }], buttonClick: [{
                type: Output
            }], thumbnailComponent: [{
                type: ContentChild,
                args: [ThumbnailComponent, { static: true }]
            }], content: [{
                type: ViewChild,
                args: [TemplateRef, { static: true }]
            }] } });

class ObjectCardMainComponent {
    static nextIdSeed = 0;
    static _nextId = ObjectCardMainComponent.nextIdSeed;
    static getNextId() {
        return this._nextId++;
    }
    id = `s-object-card-main-${ObjectCardMainComponent.getNextId()}`;
    imageSource;
    imageFallback;
    imageAlt;
    iconClass = 'fa fa-picture-o';
    hasThumbnail = true;
    hasDescription = true;
    isBrand = false;
    label;
    description;
    buttonLabel;
    buttonModel = [];
    buttonClick = new EventEmitter();
    thumbnailComponent = null;
    _thumbnailSize = 'medium';
    get thumbnailSize() {
        return this._thumbnailSize;
    }
    set thumbnailSize(value) {
        this._thumbnailSize = value;
        if (this.thumbnailComponent) {
            this.thumbnailComponent.size = value;
        }
    }
    onResize() {
        this.update();
    }
    ngAfterContentInit() {
        this.update();
    }
    update() {
        this.thumbnailSize = window.innerWidth <= Breakpoints.SM_MAX ? 'small' : 'medium';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ObjectCardMainComponent, selector: "s-object-card-main", inputs: { id: "id", imageSource: "imageSource", imageFallback: "imageFallback", imageAlt: "imageAlt", iconClass: "iconClass", hasThumbnail: "hasThumbnail", hasDescription: "hasDescription", isBrand: "isBrand", label: "label", description: "description", buttonLabel: "buttonLabel", buttonModel: "buttonModel" }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "thumbnailComponent", first: true, predicate: ThumbnailComponent, descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasThumbnail\">\n    <ng-content select=\"s-thumbnail\"></ng-content>\n    <s-thumbnail\n        [id]=\"id + '-thumbnail'\"\n        [imageSource]=\"imageSource\"\n        [imageFallback]=\"imageFallback\"\n        [imageAlt]=\"imageAlt || label\"\n        [iconClass]=\"iconClass\"\n        [size]=\"thumbnailSize\"\n        *ngIf=\"!thumbnailComponent\"\n        [isBrand]=\"isBrand\"\n    ></s-thumbnail>\n</ng-container>\n\n<ng-container *ngIf=\"hasDescription\">\n    <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-label'\"\n                *ngIf=\"!labelTemplate.children.length\"\n                class=\"label\"\n                [sTooltip]=\"label\"\n                tooltipPosition=\"top\"\n                [showDelay]=\"500\"\n                >{{ label }}</span\n            >\n\n            <div #descriptionTemplate><ng-content select=\"[descriptionTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-description'\"\n                *ngIf=\"!descriptionTemplate.children.length\"\n                class=\"description\"\n                [sTooltip]=\"description\"\n                tooltipPosition=\"top\"\n                [showDelay]=\"500\"\n                >{{ description }}</span\n            >\n            <s-button\n                [id]=\"id + '-button'\"\n                *ngIf=\"buttonLabel\"\n                styleClass=\"object-card-button\"\n                priority=\"link\"\n                [label]=\"buttonLabel\"\n                [menuOptions]=\"buttonModel\"\n                size=\"small\"\n                (clicked)=\"buttonClick.emit($event)\"\n            ></s-button>\n        </div>\n</ng-container>\n", styles: [":host{align-items:center;display:flex;min-height:70px}.info-container{margin-left:10px;flex:1}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{display:block;font-weight:700}.info-container .description{color:#999;display:block}@media (max-width: 767px){.info-container,.info-container span{white-space:normal}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i2$1.ThumbnailComponent, selector: "s-thumbnail", inputs: ["id", "size", "imageSource", "imageFallback", "imageAlt", "iconClass", "hasAction", "actionIconClass", "isTile", "isBrand"] }, { kind: "component", type: i3.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel"], outputs: ["clicked"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardMainComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-object-card-main', template: "<ng-container *ngIf=\"hasThumbnail\">\n    <ng-content select=\"s-thumbnail\"></ng-content>\n    <s-thumbnail\n        [id]=\"id + '-thumbnail'\"\n        [imageSource]=\"imageSource\"\n        [imageFallback]=\"imageFallback\"\n        [imageAlt]=\"imageAlt || label\"\n        [iconClass]=\"iconClass\"\n        [size]=\"thumbnailSize\"\n        *ngIf=\"!thumbnailComponent\"\n        [isBrand]=\"isBrand\"\n    ></s-thumbnail>\n</ng-container>\n\n<ng-container *ngIf=\"hasDescription\">\n    <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-label'\"\n                *ngIf=\"!labelTemplate.children.length\"\n                class=\"label\"\n                [sTooltip]=\"label\"\n                tooltipPosition=\"top\"\n                [showDelay]=\"500\"\n                >{{ label }}</span\n            >\n\n            <div #descriptionTemplate><ng-content select=\"[descriptionTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-description'\"\n                *ngIf=\"!descriptionTemplate.children.length\"\n                class=\"description\"\n                [sTooltip]=\"description\"\n                tooltipPosition=\"top\"\n                [showDelay]=\"500\"\n                >{{ description }}</span\n            >\n            <s-button\n                [id]=\"id + '-button'\"\n                *ngIf=\"buttonLabel\"\n                styleClass=\"object-card-button\"\n                priority=\"link\"\n                [label]=\"buttonLabel\"\n                [menuOptions]=\"buttonModel\"\n                size=\"small\"\n                (clicked)=\"buttonClick.emit($event)\"\n            ></s-button>\n        </div>\n</ng-container>\n", styles: [":host{align-items:center;display:flex;min-height:70px}.info-container{margin-left:10px;flex:1}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{display:block;font-weight:700}.info-container .description{color:#999;display:block}@media (max-width: 767px){.info-container,.info-container span{white-space:normal}}\n"] }]
        }], propDecorators: { id: [{
                type: Input
            }], imageSource: [{
                type: Input
            }], imageFallback: [{
                type: Input
            }], imageAlt: [{
                type: Input
            }], iconClass: [{
                type: Input
            }], hasThumbnail: [{
                type: Input
            }], hasDescription: [{
                type: Input
            }], isBrand: [{
                type: Input
            }], label: [{
                type: Input
            }], description: [{
                type: Input
            }], buttonLabel: [{
                type: Input
            }], buttonModel: [{
                type: Input
            }], buttonClick: [{
                type: Output
            }], thumbnailComponent: [{
                type: ContentChild,
                args: [ThumbnailComponent, { static: true }]
            }], onResize: [{
                type: HostListener,
                args: ['window:resize']
            }] } });

/**
 * @description Card de exibição de objeto com setor principal, campos extras e
 * painel expansível. Calcula automaticamente quantos campos cábem visíveis
 * conforme a largura do container e suporta nível de severidade.
 *
 * @example
 * ```html
 * <s-object-card [severity]="'info'" [expanded]="false">
 *   <s-object-card-main label="Nome" value="João" />
 *   <s-object-card-field label="CPF" value="000.000.000-00" />
 * </s-object-card>
 * ```
 *
 * @category Structure
 */
class ObjectCardComponent {
    static nextIdSeed = 0;
    static _nextId = ObjectCardComponent.nextIdSeed;
    static getNextId() {
        return this._nextId++;
    }
    /** @description Identificador do componente no DOM. Gerado automaticamente se não informado. */
    id = `s-object-card-${ObjectCardComponent.getNextId()}`;
    /** @description Define se o painel expansível está aberto. @default false */
    expanded = false;
    /** @description Tooltip do botão de expandir. @default 'Abrir painel' */
    expandTooltip = 'Abrir painel';
    /** @description Tooltip do botão de colapsar. @default 'Fechar painel' */
    collapseTooltip = 'Fechar painel';
    /** @description Largura mínima em pixels de cada campo visível. @default 200 */
    fieldsMinWidth = 200;
    /** @description Nível de severidade que altera o estilo visual. @default 'default' */
    severity = 'default';
    /** @description Opções de configuração do botão de borda lateral. */
    borderButtonOptions;
    /** @description Emitido quando o estado de expansão muda, com o novo valor booleano. */
    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$1.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 }]
            }] } });

class ObjectCardModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardModule, declarations: [ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent], imports: [CommonModule, TooltipModule, ThumbnailModule, ButtonModule, BorderButtonModule, BadgeModule], exports: [ThumbnailModule, ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardModule, imports: [CommonModule, TooltipModule, ThumbnailModule, ButtonModule, BorderButtonModule, BadgeModule, ThumbnailModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ObjectCardModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, TooltipModule, ThumbnailModule, ButtonModule, BorderButtonModule, BadgeModule],
                    declarations: [ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
                    exports: [ThumbnailModule, ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule };
//# sourceMappingURL=seniorsistemas-angular-components-object-card.mjs.map
