import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, ChangeDetectionStrategy, Injectable, HostListener, Optional, Inject, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import * as i2$2 from '@angular/forms';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { filter, BehaviorSubject, interval } from 'rxjs';
import * as i2 from '@angular/flex-layout/flex';
import * as i2$1 from '@angular/flex-layout/extended';
import { FlexLayoutModule } from '@angular/flex-layout';
import { map, takeWhile } from 'rxjs/operators';
import { provideHttpClient } from '@angular/common/http';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import localeData from 'dayjs/plugin/localeData';

var AvatarDensity;
(function (AvatarDensity) {
    AvatarDensity["large"] = "large";
    AvatarDensity["medium"] = "medium";
    AvatarDensity["small"] = "small";
})(AvatarDensity || (AvatarDensity = {}));

var AvatarType;
(function (AvatarType) {
    AvatarType["letter"] = "letter";
    AvatarType["icon"] = "icon";
    AvatarType["image"] = "image";
})(AvatarType || (AvatarType = {}));

class AvatarComponent {
    type = AvatarType.icon;
    name;
    density = AvatarDensity.medium;
    imageUrl = '';
    avatarTypes = AvatarType;
    avatarDensities = AvatarDensity;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AvatarComponent, selector: "cfc-avatar", inputs: { type: "type", name: "name", density: "density", imageUrl: "imageUrl" }, ngImport: i0, template: "<span\r\n  class=\"br-avatar mr-3\"\r\n  [title]=\"name\"\r\n  [class.medium]=\"density === avatarDensities.medium\"\r\n  [class.large]=\"density === avatarDensities.large\"\r\n>\r\n  <span\r\n    *ngIf=\"type === avatarTypes.icon\"\r\n    class=\"content\"\r\n  >\r\n    <i\r\n      class=\"fas fa-user bg-blue-warn-20\"\r\n      aria-hidden=\"true\"\r\n    ></i>\r\n  </span>\r\n  <span\r\n    *ngIf=\"type === avatarTypes.letter\"\r\n    class=\"content bg-violet-50 text-pure-0\"\r\n  >\r\n    {{ name[0] | uppercase }}\r\n  </span>\r\n  <span\r\n    *ngIf=\"type === avatarTypes.image\"\r\n    class=\"content\"\r\n  >\r\n    <img\r\n      [src]=\"imageUrl\"\r\n      alt=\"Avatar\"\r\n    />\r\n  </span>\r\n</span>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-avatar', template: "<span\r\n  class=\"br-avatar mr-3\"\r\n  [title]=\"name\"\r\n  [class.medium]=\"density === avatarDensities.medium\"\r\n  [class.large]=\"density === avatarDensities.large\"\r\n>\r\n  <span\r\n    *ngIf=\"type === avatarTypes.icon\"\r\n    class=\"content\"\r\n  >\r\n    <i\r\n      class=\"fas fa-user bg-blue-warn-20\"\r\n      aria-hidden=\"true\"\r\n    ></i>\r\n  </span>\r\n  <span\r\n    *ngIf=\"type === avatarTypes.letter\"\r\n    class=\"content bg-violet-50 text-pure-0\"\r\n  >\r\n    {{ name[0] | uppercase }}\r\n  </span>\r\n  <span\r\n    *ngIf=\"type === avatarTypes.image\"\r\n    class=\"content\"\r\n  >\r\n    <img\r\n      [src]=\"imageUrl\"\r\n      alt=\"Avatar\"\r\n    />\r\n  </span>\r\n</span>\r\n" }]
        }], propDecorators: { type: [{
                type: Input
            }], name: [{
                type: Input
            }], density: [{
                type: Input
            }], imageUrl: [{
                type: Input
            }] } });

class BreadcrumbComponent {
    router;
    activatedRoute;
    /** Lista de breadcrumbs gerados */
    links = [];
    /** Inscrição para monitorar mudanças na rota */
    routeSubscription;
    constructor(router, activatedRoute) {
        this.router = router;
        this.activatedRoute = activatedRoute;
    }
    /** Inicializa o componente e observa mudanças de rota */
    ngOnInit() {
        this.updateBreadcrumbs();
        this.routeSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
            this.updateBreadcrumbs();
        });
    }
    /** Atualiza os breadcrumbs com base na rota ativa */
    updateBreadcrumbs() {
        const breadcrumbs = this.buildBreadcrumbs(this.router.routerState.root);
        this.removeLastBreadcrumbUrl(breadcrumbs);
        this.links = breadcrumbs;
    }
    /**
     * Constrói os breadcrumbs recursivamente com base nas rotas ativadas.
     * @param route Rota ativa.
     * @param breadcrumbs Lista de breadcrumbs acumulada.
     * @returns Lista de BreadcrumbLink atualizada.
     */
    buildBreadcrumbs(route, breadcrumbs = []) {
        route.children.forEach((child) => {
            const routeSegment = this.getRouteURL(child);
            const label = this.getBreadcrumbLabel(child.snapshot.data);
            const fullPath = this.buildFullPath(routeSegment, breadcrumbs);
            if (label && !this.isDuplicateBreadcrumb(breadcrumbs, label)) {
                breadcrumbs.push({ label, url: fullPath, target: '_self' });
            }
            this.buildBreadcrumbs(child, breadcrumbs);
        });
        return breadcrumbs;
    }
    /**
     * Obtém o segmento da URL da rota atual.
     * @param route Rota atual.
     * @returns Segmento da URL ou string vazia.
     */
    getRouteURL(route) {
        return route.snapshot.url.length > 0
            ? route.snapshot.url.map(segment => segment.path).join('/')
            : '';
    }
    /**
     * Constrói o caminho completo concatenando segmentos anteriores.
     * @param routeSegment Segmento atual da rota.
     * @param breadcrumbs Lista de breadcrumbs acumulada.
     * @returns Caminho completo da URL.
     */
    buildFullPath(routeSegment, breadcrumbs) {
        if (!routeSegment)
            return '';
        const previousPath = breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].url : '';
        return previousPath ? `${previousPath}/${routeSegment}` : `/${routeSegment}`;
    }
    /**
     * Obtém o rótulo do breadcrumb a partir dos dados da rota.
     * @param data Dados da rota.
     * @returns Rótulo do breadcrumb ou null.
     */
    getBreadcrumbLabel(data) {
        const label = data['breadcrumb'];
        return label && typeof label === 'string' && label.trim() ? label.trim() : null;
    }
    /**
     * Remove a URL do último breadcrumb para evitar que seja clicável.
     * @param breadcrumbs Lista de breadcrumbs.
     */
    removeLastBreadcrumbUrl(breadcrumbs) {
        if (breadcrumbs.length > 0) {
            breadcrumbs[breadcrumbs.length - 1].url = undefined;
        }
    }
    /**
     * Verifica se um breadcrumb já existe na lista para evitar duplicatas.
     * @param breadcrumbs Lista de breadcrumbs acumulada.
     * @param label Nome do breadcrumb a verificar.
     * @returns Verdadeiro se o breadcrumb já existir, falso caso contrário.
     */
    isDuplicateBreadcrumb(breadcrumbs, label) {
        return breadcrumbs.some(bc => bc.label === label);
    }
    /** Cancela a inscrição ao destruir o componente */
    ngOnDestroy() {
        this.routeSubscription?.unsubscribe();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BreadcrumbComponent, selector: "cfc-breadcrumb", ngImport: i0, template: "<nav\r\n  class=\"br-breadcrumb\"\r\n  aria-label=\"Breadcrumbs\">\r\n  <ul\r\n    class=\"crumb-list\"\r\n    style=\"padding-left: 0;\"\r\n    role=\"list\">\r\n    <li\r\n      class=\"crumb\">\r\n      <a\r\n        class=\"br-button circle\"\r\n        href=\"/\"\r\n        target=\"_self\">\r\n        <i class=\"fas fa-home\"></i>\r\n      </a>\r\n    </li>\r\n\r\n    <li\r\n      class=\"crumb\"\r\n      *ngFor=\"let link of links; let last = last\">\r\n      <i\r\n        class=\"icon fas fa-chevron-right\">\r\n      </i>\r\n\r\n      <a\r\n        *ngIf=\"!last\"\r\n        [href]=\"link.url\"\r\n        [target]=\"link.target\">\r\n        <span>\r\n          {{ link.label | titlecase }}\r\n        </span>\r\n      </a>\r\n\r\n\r\n      <span\r\n        *ngIf=\"last\"\r\n        tabindex=\"0\"\r\n        aria-current=\"page\">\r\n        {{ link.label | titlecase }}\r\n      </span>\r\n\r\n    </li>\r\n  </ul>\r\n</nav>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-breadcrumb', template: "<nav\r\n  class=\"br-breadcrumb\"\r\n  aria-label=\"Breadcrumbs\">\r\n  <ul\r\n    class=\"crumb-list\"\r\n    style=\"padding-left: 0;\"\r\n    role=\"list\">\r\n    <li\r\n      class=\"crumb\">\r\n      <a\r\n        class=\"br-button circle\"\r\n        href=\"/\"\r\n        target=\"_self\">\r\n        <i class=\"fas fa-home\"></i>\r\n      </a>\r\n    </li>\r\n\r\n    <li\r\n      class=\"crumb\"\r\n      *ngFor=\"let link of links; let last = last\">\r\n      <i\r\n        class=\"icon fas fa-chevron-right\">\r\n      </i>\r\n\r\n      <a\r\n        *ngIf=\"!last\"\r\n        [href]=\"link.url\"\r\n        [target]=\"link.target\">\r\n        <span>\r\n          {{ link.label | titlecase }}\r\n        </span>\r\n      </a>\r\n\r\n\r\n      <span\r\n        *ngIf=\"last\"\r\n        tabindex=\"0\"\r\n        aria-current=\"page\">\r\n        {{ link.label | titlecase }}\r\n      </span>\r\n\r\n    </li>\r\n  </ul>\r\n</nav>\r\n" }]
        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }] });

var ButtonType;
(function (ButtonType) {
    ButtonType["primary"] = "primary";
    ButtonType["secondary"] = "secondary";
    ButtonType["tertiary"] = "tertiary";
    ButtonType["danger"] = "danger";
})(ButtonType || (ButtonType = {}));

var ButtonDensity;
(function (ButtonDensity) {
    ButtonDensity["large"] = "large";
    ButtonDensity["middle"] = "middle";
    ButtonDensity["small"] = "small";
    ButtonDensity["xsmall"] = "xsmall";
})(ButtonDensity || (ButtonDensity = {}));

class ButtonComponent {
    cdr;
    label = 'button';
    type = ButtonType.primary;
    submit = false;
    circle = false;
    density = ButtonDensity.middle;
    disabled = false;
    block = false;
    icon = '';
    active = false;
    inverted = false;
    loading = false;
    onClick = new EventEmitter();
    buttonTypes = ButtonType;
    constructor(cdr) {
        this.cdr = cdr;
    }
    ngOnChanges(changes) {
        if (changes['type']) {
            this.cdr.detectChanges();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "cfc-button", inputs: { label: "label", type: "type", submit: "submit", circle: "circle", density: "density", disabled: "disabled", block: "block", icon: "icon", active: "active", inverted: "inverted", loading: "loading" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\r\n  class=\"br-button\"\r\n  [ngClass]=\"{\r\n    'primary': type === buttonTypes.primary,\r\n    'secondary': type === buttonTypes.secondary,\r\n    'tertiary': type === buttonTypes.tertiary,\r\n    'danger': type === buttonTypes.danger,\r\n    'circle': circle,\r\n    'block': block,\r\n    'loading': loading,\r\n    'active': active,\r\n    'dark-mode': inverted\r\n  }\"\r\n  [disabled]=\"disabled\"\r\n  [attr.aria-label]=\"icon ? label : null\"\r\n  [type]=\"submit ? 'submit' : 'button'\"\r\n  fxLayoutGap=\"0.3rem\"\r\n  (click)=\"onClick.emit()\">\r\n  <i\r\n    *ngIf=\"icon\"\r\n    [class]=\"'fas fa-' + icon\"\r\n    aria-hidden=\"true\"\r\n  ></i>\r\n  <span\r\n    *ngIf=\"!circle\">\r\n    {{ label }}\r\n  </span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-button', template: "<button\r\n  class=\"br-button\"\r\n  [ngClass]=\"{\r\n    'primary': type === buttonTypes.primary,\r\n    'secondary': type === buttonTypes.secondary,\r\n    'tertiary': type === buttonTypes.tertiary,\r\n    'danger': type === buttonTypes.danger,\r\n    'circle': circle,\r\n    'block': block,\r\n    'loading': loading,\r\n    'active': active,\r\n    'dark-mode': inverted\r\n  }\"\r\n  [disabled]=\"disabled\"\r\n  [attr.aria-label]=\"icon ? label : null\"\r\n  [type]=\"submit ? 'submit' : 'button'\"\r\n  fxLayoutGap=\"0.3rem\"\r\n  (click)=\"onClick.emit()\">\r\n  <i\r\n    *ngIf=\"icon\"\r\n    [class]=\"'fas fa-' + icon\"\r\n    aria-hidden=\"true\"\r\n  ></i>\r\n  <span\r\n    *ngIf=\"!circle\">\r\n    {{ label }}\r\n  </span>\r\n</button>\r\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                type: Input
            }], type: [{
                type: Input
            }], submit: [{
                type: Input
            }], circle: [{
                type: Input
            }], density: [{
                type: Input
            }], disabled: [{
                type: Input
            }], block: [{
                type: Input
            }], icon: [{
                type: Input
            }], active: [{
                type: Input
            }], inverted: [{
                type: Input
            }], loading: [{
                type: Input
            }], onClick: [{
                type: Output
            }] } });

class CardContentComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardContentComponent, selector: "cfc-card-content", ngImport: i0, template: "<div class=\"card-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-card-content', template: "<div class=\"card-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
        }] });

class CardComponent {
    hover = false;
    disabled = false;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardComponent, selector: "cfc-card", inputs: { hover: "hover", disabled: "disabled" }, ngImport: i0, template: "<div class=\"br-card\">\r\n  <div class=\"br-card\"\r\n    [class.hover]=\"hover\"\r\n    [class.disabled]=\"disabled\">\r\n    <ng-content select=\"cfc-card-header\"></ng-content>\r\n    <cfc-card-content>\r\n      <ng-content select=\"cfc-card-content\"></ng-content>\r\n    </cfc-card-content>\r\n    <ng-content select=\"cfc-card-footer\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: CardContentComponent, selector: "cfc-card-content" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-card', template: "<div class=\"br-card\">\r\n  <div class=\"br-card\"\r\n    [class.hover]=\"hover\"\r\n    [class.disabled]=\"disabled\">\r\n    <ng-content select=\"cfc-card-header\"></ng-content>\r\n    <cfc-card-content>\r\n      <ng-content select=\"cfc-card-content\"></ng-content>\r\n    </cfc-card-content>\r\n    <ng-content select=\"cfc-card-footer\"></ng-content>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { hover: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });

class CarouselComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselComponent, selector: "cfc-carousel", ngImport: i0, template: "<br-carousel></br-carousel>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-carousel', template: "<br-carousel></br-carousel>\r\n" }]
        }] });

class CfcDsRootComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CfcDsRootComponent, selector: "cfc-ds-root", ngImport: i0, template: `
    <router-outlet></router-outlet>
  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsRootComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-ds-root', template: `
    <router-outlet></router-outlet>
  ` }]
        }] });

class CheckboxesComponent {
    label;
    description;
    options;
    mode = 'column';
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxesComponent, selector: "cfc-checkboxes", inputs: { label: "label", description: "description", options: "options", mode: "mode" }, ngImport: i0, template: "<p\r\n  class=\"label mb-0\">\r\n  {{ label }}\r\n</p>\r\n<p\r\n  class=\"text-down-01\">\r\n  {{ description }}\r\n</p>\r\n<div\r\n  [fxLayout]=\"mode\"\r\n  fxLayoutAlign=\"start start\">\r\n  <ng-content\r\n    select=\"[cfc-checkbox-option]\">\r\n  </ng-content>\r\n</div>\r\n<div\r\n  class=\"mt-3\">\r\n  <span\r\n    class=\"feedback warning\"\r\n    role=\"alert\">\r\n    <i\r\n      class=\"fas fa-exclamation-triangle\"\r\n      aria-hidden=\"true\">\r\n    </i>\r\n    Texto de mensagem\r\n  </span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-checkboxes', template: "<p\r\n  class=\"label mb-0\">\r\n  {{ label }}\r\n</p>\r\n<p\r\n  class=\"text-down-01\">\r\n  {{ description }}\r\n</p>\r\n<div\r\n  [fxLayout]=\"mode\"\r\n  fxLayoutAlign=\"start start\">\r\n  <ng-content\r\n    select=\"[cfc-checkbox-option]\">\r\n  </ng-content>\r\n</div>\r\n<div\r\n  class=\"mt-3\">\r\n  <span\r\n    class=\"feedback warning\"\r\n    role=\"alert\">\r\n    <i\r\n      class=\"fas fa-exclamation-triangle\"\r\n      aria-hidden=\"true\">\r\n    </i>\r\n    Texto de mensagem\r\n  </span>\r\n</div>\r\n" }]
        }], propDecorators: { label: [{
                type: Input
            }], description: [{
                type: Input
            }], options: [{
                type: Input
            }], mode: [{
                type: Input
            }] } });

const components = [
    { id: 1, name: 'avatar', clickEventName: 'setComponent', isAlready: true },
    { id: 2, name: 'breadcrumb', clickEventName: 'setComponent', isAlready: true },
    { id: 3, name: 'button', clickEventName: 'setComponent', isAlready: true },
    { id: 4, name: 'card', clickEventName: 'setComponent', isAlready: false },
    { id: 5, name: 'carousel', clickEventName: 'setComponent', isAlready: false },
    { id: 6, name: 'checkboxes', clickEventName: 'setComponent', isAlready: false },
    { id: 7, name: 'checkbox', clickEventName: 'setComponent', isAlready: true },
    { id: 8, name: 'collapse', clickEventName: 'setComponent', isAlready: false },
    { id: 9, name: 'cookie-bar', clickEventName: 'setComponent', isAlready: false },
    { id: 10, name: 'datetimer-picker', clickEventName: 'setComponent', isAlready: false },
    { id: 11, name: 'divider', clickEventName: 'setComponent', isAlready: true },
    { id: 12, name: 'footer', clickEventName: 'setComponent', isAlready: false },
    { id: 13, name: 'header', clickEventName: 'setComponent', isAlready: true },
    { id: 15, name: 'icon', clickEventName: 'setComponent', isAlready: true },
    { id: 16, name: 'illustration-state', clickEventName: 'setComponent', isAlready: true },
    { id: 16, name: 'input', clickEventName: 'setComponent', isAlready: true },
    { id: 14, name: 'item', clickEventName: 'setComponent', isAlready: true },
    { id: 17, name: 'list', clickEventName: 'setComponent', isAlready: false },
    { id: 18, name: 'loading', clickEventName: 'setComponent', isAlready: true },
    { id: 19, name: 'logo', clickEventName: 'setComponent', isAlready: true },
    { id: 20, name: 'magic-button', clickEventName: 'setComponent', isAlready: false },
    { id: 21, name: 'menu', clickEventName: 'setComponent', isAlready: false },
    { id: 22, name: 'message', clickEventName: 'setComponent', isAlready: true },
    { id: 23, name: 'modal', clickEventName: 'setComponent', isAlready: false },
    { id: 24, name: 'notification', clickEventName: 'setComponent', isAlready: false },
    { id: 25, name: 'notification-panel', clickEventName: 'setComponent', isAlready: false },
    { id: 26, name: 'pagination', clickEventName: 'setComponent', isAlready: false },
    { id: 27, name: 'radio', clickEventName: 'setComponent', isAlready: false },
    { id: 28, name: 'scrim', clickEventName: 'setComponent', isAlready: false },
    { id: 29, name: 'select', clickEventName: 'setComponent', isAlready: false },
    { id: 30, name: 'sign-in', clickEventName: 'setComponent', isAlready: true },
    { id: 31, name: 'skiplink', clickEventName: 'setComponent', isAlready: false },
    { id: 32, name: 'slider', clickEventName: 'setComponent', isAlready: false },
    { id: 33, name: 'switch', clickEventName: 'setComponent', isAlready: false },
    { id: 34, name: 'tab', clickEventName: 'setComponent', isAlready: false },
    { id: 35, name: 'table', clickEventName: 'setComponent', isAlready: false },
    { id: 36, name: 'tag', clickEventName: 'setComponent', isAlready: false },
    { id: 37, name: 'textarea', clickEventName: 'setComponent', isAlready: false },
    { id: 38, name: 'template-error', clickEventName: 'setComponent', isAlready: false },
    { id: 39, name: 'timer', clickEventName: 'setComponent', isAlready: true },
    { id: 40, name: 'tooltip', clickEventName: 'setComponent', isAlready: false },
    { id: 41, name: 'upload', clickEventName: 'setComponent', isAlready: false },
    { id: 42, name: 'wizard', clickEventName: 'setComponent', isAlready: false }
].sort();

class ComponentsListComponent {
    cdr;
    selectedComponent = new EventEmitter();
    componentList = components;
    constructor(cdr) {
        this.cdr = cdr;
    }
    onSelectComponent(component) {
        this.selectedComponent.emit(component);
        this.cdr.detectChanges();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ComponentsListComponent, selector: "cfc-components-list", outputs: { selectedComponent: "selectedComponent" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n  fxLayout=\"column\">\r\n  <p\r\n    *ngFor=\"let component of componentList\"\r\n    class=\"components-list__component-name\"\r\n    (click)=\"onSelectComponent(component)\">\r\n    <span\r\n      [class.components-list__component-name--is-already]=\"component.isAlready\">\r\n      {{ component.name }}\r\n    </span>\r\n  </p>\r\n</div>\r\n", styles: [".components-list__component-name{width:max-content;text-wrap:nowrap;cursor:pointer;transition:all ease-in .25s;border-bottom:1px solid transparent}.components-list__component-name--is-already{font-weight:700}.components-list__component-name:hover{border-color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-components-list', template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n  fxLayout=\"column\">\r\n  <p\r\n    *ngFor=\"let component of componentList\"\r\n    class=\"components-list__component-name\"\r\n    (click)=\"onSelectComponent(component)\">\r\n    <span\r\n      [class.components-list__component-name--is-already]=\"component.isAlready\">\r\n      {{ component.name }}\r\n    </span>\r\n  </p>\r\n</div>\r\n", styles: [".components-list__component-name{width:max-content;text-wrap:nowrap;cursor:pointer;transition:all ease-in .25s;border-bottom:1px solid transparent}.components-list__component-name--is-already{font-weight:700}.components-list__component-name:hover{border-color:#000}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedComponent: [{
                type: Output
            }] } });

class CookieBarComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CookieBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CookieBarComponent, selector: "cfc-cookie-bar", ngImport: i0, template: "<br-cookiebar></br-cookiebar>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CookieBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-cookie-bar', template: "<br-cookiebar></br-cookiebar>\r\n" }]
        }] });

class DatetimerPickerComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimerPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatetimerPickerComponent, selector: "cfc-datetimer-picker", ngImport: i0, template: "<br-datetimer-picker/>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimerPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-datetimer-picker', template: "<br-datetimer-picker/>\r\n" }]
        }] });

var DividerMode;
(function (DividerMode) {
    DividerMode["line"] = "line";
    DividerMode["dashed"] = "dashed";
})(DividerMode || (DividerMode = {}));

var DividerType;
(function (DividerType) {
    DividerType["primary"] = "primary";
    DividerType["secondary"] = "secondary";
})(DividerType || (DividerType = {}));

var DividerAxis;
(function (DividerAxis) {
    DividerAxis["horizontal"] = "horizontal";
    DividerAxis["vertical"] = "vertical";
})(DividerAxis || (DividerAxis = {}));

var DividerDensity;
(function (DividerDensity) {
    DividerDensity["large"] = "large";
    DividerDensity["medium"] = "medium";
    DividerDensity["small"] = "small";
})(DividerDensity || (DividerDensity = {}));

class DividerComponent {
    height;
    width;
    mode = DividerMode.line;
    type = DividerType.primary;
    axis = DividerAxis.horizontal;
    density = DividerDensity.small;
    dividerModes = DividerMode;
    dividerTypes = DividerType;
    dividerAxis = DividerAxis;
    dividerDensities = DividerDensity;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DividerComponent, selector: "cfc-divider", inputs: { height: "height", width: "width", mode: "mode", type: "type", axis: "axis", density: "density" }, ngImport: i0, template: "<span\r\n  class=\"br-divider my-3\"\r\n  [ngStyle]=\"{\r\n    height: axis === dividerAxis.vertical ? (height ? height : '100%') : 'max-content',\r\n    width: axis === dividerAxis.horizontal ? (width ? width : '100%') : 'max-content'\r\n  }\"\r\n  [class.dashed]=\"mode === dividerModes.dashed\"\r\n  [class.vertical]=\"axis ===  dividerAxis.vertical\"\r\n  [ngClass]=\"{\r\n    'mx-3': axis === dividerAxis.vertical,\r\n    'my-3': axis === dividerAxis.horizontal,\r\n    'sm': density === dividerDensities.small,\r\n    'md': density === dividerDensities.medium,\r\n    'lg': density === dividerDensities.large,\r\n    'dark-mode': type === dividerTypes.secondary\r\n  }\"\r\n></span>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DividerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-divider', template: "<span\r\n  class=\"br-divider my-3\"\r\n  [ngStyle]=\"{\r\n    height: axis === dividerAxis.vertical ? (height ? height : '100%') : 'max-content',\r\n    width: axis === dividerAxis.horizontal ? (width ? width : '100%') : 'max-content'\r\n  }\"\r\n  [class.dashed]=\"mode === dividerModes.dashed\"\r\n  [class.vertical]=\"axis ===  dividerAxis.vertical\"\r\n  [ngClass]=\"{\r\n    'mx-3': axis === dividerAxis.vertical,\r\n    'my-3': axis === dividerAxis.horizontal,\r\n    'sm': density === dividerDensities.small,\r\n    'md': density === dividerDensities.medium,\r\n    'lg': density === dividerDensities.large,\r\n    'dark-mode': type === dividerTypes.secondary\r\n  }\"\r\n></span>\r\n" }]
        }], propDecorators: { height: [{
                type: Input
            }], width: [{
                type: Input
            }], mode: [{
                type: Input
            }], type: [{
                type: Input
            }], axis: [{
                type: Input
            }], density: [{
                type: Input
            }] } });

class FooterComponent {
    renderer;
    projectName;
    projectVersion;
    root;
    height = 'max-content';
    position = 'absolute';
    contentHeight = 0;
    windowHeight = 0;
    mutationObserver;
    resizeObserver;
    constructor(renderer) {
        this.renderer = renderer;
    }
    ngOnInit() {
        this.initObservers();
    }
    ngAfterViewInit() {
        this.checkFooterPosition();
    }
    ngOnDestroy() {
        this.mutationObserver?.disconnect();
        this.resizeObserver?.disconnect();
    }
    /**
     * INICIALIZA OS OBSERVERS PARA MONITORAR ALTERAÇÕES NA PÁGINA
     */
    initObservers() {
        this.mutationObserver = new MutationObserver(() => this.checkFooterPosition());
        this.mutationObserver.observe(document.body, {
            childList: true,
            subtree: true,
        });
        this.resizeObserver = new ResizeObserver(() => this.checkFooterPosition());
        this.resizeObserver.observe(document.body);
    }
    /**
     * VERIFICA E AJUSTA A POSIÇÃO DO FOOTER SE NECESSÁRIO
     */
    checkFooterPosition() {
        if (!this.root)
            return;
        const footerHeight = +this.root.nativeElement.offsetHeight;
        const newContentHeight = document.body.scrollHeight;
        const newWindowHeight = window.innerHeight;
        // VERIFICA SE O TAMANHO DA PÁGINA MUDOU
        if (newContentHeight !== this.contentHeight || newWindowHeight !== this.windowHeight) {
            this.contentHeight = newContentHeight;
            this.windowHeight = newWindowHeight;
            const position = newContentHeight <= (newWindowHeight - footerHeight) ? 'absolute' : 'relative';
            this.renderer.setStyle(this.root.nativeElement, 'position', position);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, selector: "cfc-footer", inputs: { projectName: "projectName", projectVersion: "projectVersion" }, host: { properties: { "style.height": "this.position" } }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true }], ngImport: i0, template: "<footer class=\"footer\">\r\n  <p>\r\n    Conselho Federal de Contabilidade - {{ projectName }} - Vers\u00E3o: {{ projectVersion }}\r\n  </p>\r\n  <p>\r\n    Todos os direitos reservados.\r\n  </p>\r\n</footer>\r\n", styles: [":host{left:0;bottom:0;position:absolute;width:100%}.footer{position:relative;min-width:100%;background-color:#fff;border-top:1px solid rgba(204,204,204,.801);box-shadow:0 0 8px 1px #c1c1c180;padding:1rem 2.5rem;text-align:center}.footer p{font-family:Rawline;font-size:11.67px;font-weight:400;line-height:16.15px;text-align:center;text-underline-position:from-font;text-decoration-skip-ink:none;margin:0;padding:0}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-footer', template: "<footer class=\"footer\">\r\n  <p>\r\n    Conselho Federal de Contabilidade - {{ projectName }} - Vers\u00E3o: {{ projectVersion }}\r\n  </p>\r\n  <p>\r\n    Todos os direitos reservados.\r\n  </p>\r\n</footer>\r\n", styles: [":host{left:0;bottom:0;position:absolute;width:100%}.footer{position:relative;min-width:100%;background-color:#fff;border-top:1px solid rgba(204,204,204,.801);box-shadow:0 0 8px 1px #c1c1c180;padding:1rem 2.5rem;text-align:center}.footer p{font-family:Rawline;font-size:11.67px;font-weight:400;line-height:16.15px;text-align:center;text-underline-position:from-font;text-decoration-skip-ink:none;margin:0;padding:0}\n"] }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { projectName: [{
                type: Input
            }], projectVersion: [{
                type: Input
            }], root: [{
                type: ViewChild,
                args: ['root', { static: false }]
            }], height: [{
                type: HostBinding,
                args: ['style.height']
            }], position: [{
                type: HostBinding,
                args: ['style.height']
            }] } });

var LogoViewMode;
(function (LogoViewMode) {
    LogoViewMode["default"] = "default";
    LogoViewMode["neutral"] = "neutral";
    LogoViewMode["voluntary"] = "voluntary";
    LogoViewMode["external"] = "external";
})(LogoViewMode || (LogoViewMode = {}));

var HeaderViewMode;
(function (HeaderViewMode) {
    HeaderViewMode["default"] = "default";
    HeaderViewMode["contrast"] = "contrast";
})(HeaderViewMode || (HeaderViewMode = {}));

var SignInType;
(function (SignInType) {
    SignInType["primary"] = "primary";
    SignInType["secondary"] = "secondary";
})(SignInType || (SignInType = {}));

var TimerType;
(function (TimerType) {
    TimerType["primary"] = "primary";
    TimerType["secondary"] = "secondary";
})(TimerType || (TimerType = {}));

var SignInMode;
(function (SignInMode) {
    SignInMode["internal"] = "internal";
    SignInMode["externalTxt"] = "externalTxt";
    SignInMode["externalImg"] = "externalImg";
    SignInMode["logout"] = "logout";
})(SignInMode || (SignInMode = {}));

class LogoComponent {
    viewMode = LogoViewMode.default;
    isClickable = false;
    width;
    imageUrl;
    clickEvent = new EventEmitter();
    get svgPath() {
        switch (this.viewMode) {
            case LogoViewMode.default:
                return '../../../assets/logo-default.svg';
            case LogoViewMode.neutral:
                return '../../../assets/logo-neutral.svg';
            case LogoViewMode.voluntary:
                return '../../../assets/logo-voluntary.svg';
            case LogoViewMode.external:
                if (this.imageUrl) {
                    return this.imageUrl;
                }
                else {
                    console.error(`imageUrl must not be empty`);
                    return '../../../assets/logo-default.svg';
                }
            default:
                throw new Error(`invalid ViewMode: ${this.viewMode}`);
        }
    }
    get svgWidth() {
        return this.width ? `${this.width}px` : '100%';
    }
    onClick() {
        if (this.clickEvent)
            this.clickEvent.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoComponent, selector: "cfc-logo", inputs: { viewMode: "viewMode", isClickable: "isClickable", width: "width", imageUrl: "imageUrl" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<img\r\n  alt=\"logo do conselho federal de contabilidade\"\r\n  [src]=\"svgPath\"\r\n  [style.cursor]=\"isClickable ? 'pointer' : 'default'\"\r\n  [style.width]=\"svgWidth\"\r\n  (click)=\"isClickable ? onClick(): undefined\"\r\n>\r\n", styles: ["svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-logo', changeDetection: ChangeDetectionStrategy.Default, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<img\r\n  alt=\"logo do conselho federal de contabilidade\"\r\n  [src]=\"svgPath\"\r\n  [style.cursor]=\"isClickable ? 'pointer' : 'default'\"\r\n  [style.width]=\"svgWidth\"\r\n  (click)=\"isClickable ? onClick(): undefined\"\r\n>\r\n", styles: ["svg{display:block}\n"] }]
        }], propDecorators: { viewMode: [{
                type: Input
            }], isClickable: [{
                type: Input
            }], width: [{
                type: Input
            }], imageUrl: [{
                type: Input
            }], clickEvent: [{
                type: Output
            }] } });

var SignInDensity;
(function (SignInDensity) {
    SignInDensity["large"] = "large";
    SignInDensity["middle"] = "middle";
    SignInDensity["small"] = "small";
})(SignInDensity || (SignInDensity = {}));

class SignInComponent {
    elementRef;
    label = 'user';
    type = SignInType.secondary;
    density = SignInDensity.middle;
    mode = SignInMode.internal;
    disabled = false;
    active = false;
    block = false;
    circle = false;
    externalImageUrl = '';
    externalLabel;
    onClick = new EventEmitter();
    onLogout = new EventEmitter();
    initialWidth = '';
    isLogoutVisible = false;
    signinTypes = SignInType;
    signinDensities = SignInDensity;
    signinModes = SignInMode;
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    ngAfterViewInit() {
        this.initialWidth = `${this.elementRef.nativeElement.offsetWidth}px`;
    }
    showLogout(isVisible) {
        this.isLogoutVisible = isVisible && this.mode === this.signinModes.logout;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignInComponent, selector: "cfc-sign-in", inputs: { label: "label", type: "type", density: "density", mode: "mode", disabled: "disabled", active: "active", block: "block", circle: "circle", externalImageUrl: "externalImageUrl", externalLabel: "externalLabel" }, outputs: { onClick: "onClick", onLogout: "onLogout" }, host: { properties: { "style.width": "this.initialWidth" } }, ngImport: i0, template: "<div\r\n  (mouseenter)=\"showLogout(true)\"\r\n  (mouseleave)=\"showLogout(false)\">\r\n\r\n  <button\r\n    class=\"br-sign-in\"\r\n    style=\"width: 100%;\"\r\n    [ngClass]=\"density\"\r\n    [class.primary]=\"type === signinTypes.primary\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"active\"\r\n    [class.circle]=\"circle\"\r\n    [class.block]=\"block\"\r\n    type=\"button\"\r\n    fxLayoutGap=\"0.3rem\"\r\n    (click)=\"!isLogoutVisible ? onClick.emit($event) : onLogout.emit($event)\">\r\n    <i\r\n      *ngIf=\"!circle && (mode === signinModes.internal || mode === signinModes.logout)\"\r\n      [ngClass]=\"!isLogoutVisible ? 'fas fa-user' : 'fas fa-sign-out-alt'\"\r\n      aria-hidden=\"true\">\r\n    </i>\r\n    <span\r\n      style=\"font-size: 14px;\"\r\n      *ngIf=\"!circle\">\r\n      {{ !isLogoutVisible ? label : 'Sair' }}\r\n    </span>\r\n    <img\r\n      *ngIf=\"!isLogoutVisible && !circle && mode === signinModes.externalImg\"\r\n      [src]=\"externalImageUrl\"\r\n      alt=\"Descri\u00E7\u00E3o da minha imagem\"\r\n      style=\"margin-left: 0.5rem;\"/>\r\n    <span\r\n      *ngIf=\"!isLogoutVisible && !circle && externalLabel && mode === signinModes.externalTxt\"\r\n      class=\"text-black\"\r\n      style=\"margin-left: 0.5rem;\">\r\n      {{ externalLabel }}\r\n    </span>\r\n  </button>\r\n</div>\r\n", styles: [":host{transition:width .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-sign-in', template: "<div\r\n  (mouseenter)=\"showLogout(true)\"\r\n  (mouseleave)=\"showLogout(false)\">\r\n\r\n  <button\r\n    class=\"br-sign-in\"\r\n    style=\"width: 100%;\"\r\n    [ngClass]=\"density\"\r\n    [class.primary]=\"type === signinTypes.primary\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"active\"\r\n    [class.circle]=\"circle\"\r\n    [class.block]=\"block\"\r\n    type=\"button\"\r\n    fxLayoutGap=\"0.3rem\"\r\n    (click)=\"!isLogoutVisible ? onClick.emit($event) : onLogout.emit($event)\">\r\n    <i\r\n      *ngIf=\"!circle && (mode === signinModes.internal || mode === signinModes.logout)\"\r\n      [ngClass]=\"!isLogoutVisible ? 'fas fa-user' : 'fas fa-sign-out-alt'\"\r\n      aria-hidden=\"true\">\r\n    </i>\r\n    <span\r\n      style=\"font-size: 14px;\"\r\n      *ngIf=\"!circle\">\r\n      {{ !isLogoutVisible ? label : 'Sair' }}\r\n    </span>\r\n    <img\r\n      *ngIf=\"!isLogoutVisible && !circle && mode === signinModes.externalImg\"\r\n      [src]=\"externalImageUrl\"\r\n      alt=\"Descri\u00E7\u00E3o da minha imagem\"\r\n      style=\"margin-left: 0.5rem;\"/>\r\n    <span\r\n      *ngIf=\"!isLogoutVisible && !circle && externalLabel && mode === signinModes.externalTxt\"\r\n      class=\"text-black\"\r\n      style=\"margin-left: 0.5rem;\">\r\n      {{ externalLabel }}\r\n    </span>\r\n  </button>\r\n</div>\r\n", styles: [":host{transition:width .3s ease-in-out}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                type: Input
            }], type: [{
                type: Input
            }], density: [{
                type: Input
            }], mode: [{
                type: Input
            }], disabled: [{
                type: Input
            }], active: [{
                type: Input
            }], block: [{
                type: Input
            }], circle: [{
                type: Input
            }], externalImageUrl: [{
                type: Input
            }], externalLabel: [{
                type: Input
            }], onClick: [{
                type: Output
            }], onLogout: [{
                type: Output
            }], initialWidth: [{
                type: HostBinding,
                args: ['style.width']
            }] } });

class TimerService {
    countdown$ = new BehaviorSubject(null);
    subscription = null;
    /**
     * CONVERTE TEMPO DE DIFERENTES FORMATOS PARA SEGUNDOS
     * @param time String no formato 'dias:hh:mm:ss', 'hh:mm:ss', 'mm:ss' ou número em segundos.
     */
    parseTimeToSeconds(time) {
        if (typeof time === 'number') {
            return time;
        }
        const parts = time.split(':').map(Number).reverse();
        const [seconds = 0, minutes = 0, hours = 0, days = 0] = parts;
        return seconds + minutes * 60 + hours * 3600 + days * 86400;
    }
    /**
     * INICIA A CONTAGEM REGRESSIVA
     * @param time Tempo no formato 'dias:hh:mm:ss', 'hh:mm:ss', 'mm:ss' ou número em segundos.
     */
    startCountdown(time) {
        const totalSeconds = this.parseTimeToSeconds(time);
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
        this.countdown$.next(totalSeconds);
        this.subscription = interval(1000)
            .pipe(map((elapsed) => totalSeconds - elapsed), takeWhile((timeLeft) => timeLeft >= 0))
            .subscribe({
            next: (timeLeft) => this.countdown$.next(timeLeft),
            complete: () => this.countdown$.next(0),
        });
    }
    /**
     * RETORNA O STREAM DO TEMPO RESTANTE
     */
    getCountdown() {
        return this.countdown$.asObservable();
    }
    /**
     * INTERROMPE A CONTAGEM
     */
    stopCountdown() {
        if (this.subscription) {
            this.subscription.unsubscribe();
            this.subscription = null;
        }
        this.countdown$.next(null);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimerService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class TimerComponent {
    timerService;
    type = TimerType.primary;
    initialTime = '0:30:00';
    criticalTime = 300;
    isGlobal = false;
    timeOutEvent = new EventEmitter();
    timeEvent = new EventEmitter();
    timeCriticalEvent = new EventEmitter();
    displayTime = '30:00';
    criticalTimeIsOut = false;
    timerTypes = TimerType;
    remainingTimeSubscription;
    localRemainingTime = 0;
    constructor(timerService) {
        this.timerService = timerService;
    }
    ngOnInit() {
        this.startTimer();
    }
    ngOnDestroy() {
        if (this.isGlobal) {
            this.timerService.stopCountdown();
            this.remainingTimeSubscription.unsubscribe();
        }
    }
    startTimer() {
        if (this.isGlobal) {
            this.timerService.startCountdown(this.initialTime);
            this.remainingTimeSubscription = this.timerService.getCountdown().subscribe((remainingTime) => {
                if (remainingTime !== null) {
                    this.updateDisplayTime(remainingTime);
                    if (!this.criticalTimeIsOut && remainingTime <= this.criticalTime) {
                        this.timeCriticalEvent.emit();
                        this.criticalTimeIsOut = true;
                    }
                    if (remainingTime <= 0) {
                        this.timeOutEvent.emit();
                    }
                    else {
                        this.timeEvent.emit();
                    }
                }
            });
        }
        else {
            // Contagem local quando isGlobal = false
            this.localRemainingTime = this.parseTimeToSeconds(this.initialTime);
            this.startLocalCountdown();
        }
    }
    startLocalCountdown() {
        const intervalId = setInterval(() => {
            this.localRemainingTime--;
            this.updateDisplayTime(this.localRemainingTime);
            if (!this.criticalTimeIsOut && this.localRemainingTime <= this.criticalTime) {
                this.timeCriticalEvent.emit();
                this.criticalTimeIsOut = true;
            }
            if (this.localRemainingTime <= 0) {
                clearInterval(intervalId);
                this.timeOutEvent.emit();
            }
            else {
                this.timeEvent.emit();
            }
        }, 1000);
    }
    updateDisplayTime(seconds) {
        const days = Math.floor(seconds / 86400);
        const hours = Math.floor((seconds % 86400) / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = seconds % 60;
        this.displayTime =
            days > 0
                ? `${days} dias`
                : `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(remainingSeconds)}`;
    }
    padZero(number) {
        return number < 10 ? `0${number}` : `${number}`;
    }
    parseTimeToSeconds(time) {
        if (typeof time === 'number') {
            return time;
        }
        const parts = time.split(':').map(Number).reverse();
        const [seconds = 0, minutes = 0, hours = 0, days = 0] = parts;
        return seconds + minutes * 60 + hours * 3600 + days * 86400;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimerComponent, deps: [{ token: TimerService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimerComponent, selector: "cfc-timer", inputs: { type: "type", initialTime: "initialTime", criticalTime: "criticalTime", isGlobal: "isGlobal" }, outputs: { timeOutEvent: "timeOutEvent", timeEvent: "timeEvent", timeCriticalEvent: "timeCriticalEvent" }, ngImport: i0, template: "<button\r\n  class=\"br-button\"\r\n  style=\"pointer-events: none; cursor: default; min-width: 9.3rem;\"\r\n  [ngClass]=\"{\r\n    'bg-gray-2': (type === timerTypes.primary && !criticalTimeIsOut),\r\n    'bg-yellow-5': (type === timerTypes.primary && criticalTimeIsOut),\r\n    'text-pure-100': type === timerTypes.primary,\r\n    'bg-blue-warm-60': (type === timerTypes.secondary && !criticalTimeIsOut),\r\n    'bg-red-warm-20': (type === timerTypes.secondary && criticalTimeIsOut),\r\n    'text-blue-warm-60': (type === timerTypes.secondary && criticalTimeIsOut),\r\n    'text-pure-0': type === timerTypes.secondary && !criticalTimeIsOut\r\n  }\"\r\n  fxLayoutGap=\"0.1rem\"\r\n  fxLayoutAlign=\"start center\">\r\n  <i class=\"fas fa-clock\"></i>\r\n  <span style=\"font-size: 14px;\">{{ displayTime }}</span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-timer', template: "<button\r\n  class=\"br-button\"\r\n  style=\"pointer-events: none; cursor: default; min-width: 9.3rem;\"\r\n  [ngClass]=\"{\r\n    'bg-gray-2': (type === timerTypes.primary && !criticalTimeIsOut),\r\n    'bg-yellow-5': (type === timerTypes.primary && criticalTimeIsOut),\r\n    'text-pure-100': type === timerTypes.primary,\r\n    'bg-blue-warm-60': (type === timerTypes.secondary && !criticalTimeIsOut),\r\n    'bg-red-warm-20': (type === timerTypes.secondary && criticalTimeIsOut),\r\n    'text-blue-warm-60': (type === timerTypes.secondary && criticalTimeIsOut),\r\n    'text-pure-0': type === timerTypes.secondary && !criticalTimeIsOut\r\n  }\"\r\n  fxLayoutGap=\"0.1rem\"\r\n  fxLayoutAlign=\"start center\">\r\n  <i class=\"fas fa-clock\"></i>\r\n  <span style=\"font-size: 14px;\">{{ displayTime }}</span>\r\n</button>\r\n" }]
        }], ctorParameters: () => [{ type: TimerService }], propDecorators: { type: [{
                type: Input
            }], initialTime: [{
                type: Input
            }], criticalTime: [{
                type: Input
            }], isGlobal: [{
                type: Input
            }], timeOutEvent: [{
                type: Output
            }], timeEvent: [{
                type: Output
            }], timeCriticalEvent: [{
                type: Output
            }] } });

class HeaderComponent {
    router;
    viewMode = HeaderViewMode.default;
    hasMenu = true;
    // logo
    hasLogo = true;
    logoViewMode = LogoViewMode.default;
    logoUrl = '';
    // title and description
    title;
    description;
    // timer
    hasTimer = false;
    timeLogout = 1800;
    timeCritical = 300;
    // action bar
    hasNotificationIcon = true;
    userName = 'Entrar';
    signinMode = SignInMode.logout;
    menuEvent = new EventEmitter;
    criticalTimeEvent = new EventEmitter;
    timeOutEvent = new EventEmitter;
    timeEvent = new EventEmitter;
    notificationIconEvent = new EventEmitter;
    signinEvent = new EventEmitter;
    logoutEvent = new EventEmitter;
    headerViewModes = HeaderViewMode;
    logoViewModes = LogoViewMode;
    dividerModes = DividerMode;
    dividerTypes = DividerType;
    dividerDensities = DividerDensity;
    dividerAxis = DividerAxis;
    signinTypes = SignInType;
    signinModes = SignInMode;
    buttonTypes = ButtonType;
    timerTypes = TimerType;
    logoIsClickable = false;
    get firstAndLastName() {
        const splitedName = this.userName.trim().split(' ');
        if (splitedName.length === 1) {
            return splitedName[0];
        }
        else {
            return `${splitedName[0]} ${splitedName[splitedName.length - 1]}`;
        }
    }
    constructor(router) {
        this.router = router;
    }
    ngOnInit() {
        this.logoIsClickable = this.router.url === '/';
    }
    toggleMenu() {
        this.menuEvent.emit();
    }
    goToHome() {
        if (this.router.url !== '/') {
            this.router.navigate(['/']);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderComponent, selector: "cfc-header", inputs: { viewMode: "viewMode", hasMenu: "hasMenu", hasLogo: "hasLogo", logoViewMode: "logoViewMode", logoUrl: "logoUrl", title: "title", description: "description", hasTimer: "hasTimer", timeLogout: "timeLogout", timeCritical: "timeCritical", hasNotificationIcon: "hasNotificationIcon", userName: "userName", signinMode: "signinMode" }, outputs: { menuEvent: "menuEvent", criticalTimeEvent: "criticalTimeEvent", timeOutEvent: "timeOutEvent", timeEvent: "timeEvent", notificationIconEvent: "notificationIconEvent", signinEvent: "signinEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<header\r\n  class=\"cfc-header\"\r\n  [ngStyle]=\"{ 'background-color': viewMode === headerViewModes.default\r\n    ? 'white'\r\n    : '#0C326F'\r\n  }\"\r\n  fxLayout=\"row\"\r\n  fxLayoutAlign=\"space-between center\">\r\n  <div\r\n    fxLayout=\"row\"\r\n    fxLayoutAlign=\"center center\"\r\n    fxLayoutGap=\"1rem\">\r\n\r\n    <!-- MENU -->\r\n    <cfc-button\r\n      *ngIf=\"hasMenu\"\r\n      [icon]=\"'bars'\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      [circle]=\"true\"\r\n      [inverted]=\"viewMode === headerViewModes.contrast\"\r\n      aria-label=\"menu\"\r\n      data-toggle=\"menu\"\r\n      data-target=\"#menu-aside\"\r\n      is-push=\"true\"\r\n      id=\"push\"\r\n      [attr.show-menu]=\"'true'\"\r\n      (click)=\"toggleMenu()\">\r\n    </cfc-button>\r\n\r\n    <!-- LOGO -->\r\n    <cfc-logo\r\n      *ngIf=\"hasLogo\"\r\n      [viewMode]=\"logoViewMode\"\r\n      [imageUrl]=\"logoViewMode === logoViewModes.external ? logoUrl : undefined\"\r\n      (clickEvent)=\"goToHome()\"\r\n    ></cfc-logo>\r\n\r\n    <!-- TITLE AND DESCRIPTION -->\r\n    <div\r\n      fxLayout=\"column\"\r\n      fxLayoutAlign=\"center start\">\r\n      <h4\r\n        class=\"cfc-header__title\"\r\n        [ngStyle]=\"{ 'color': viewMode === headerViewModes.default ? 'black' : 'white' }\">\r\n        {{ title }}\r\n      </h4>\r\n      <p\r\n        *ngIf=\"description\"\r\n        class=\"cfc-header__description\"\r\n        [ngStyle]=\"{ 'color': viewMode === headerViewModes.default ? '#555555' : 'white' }\">\r\n        {{ description }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- ACTION BAR -->\r\n  <div\r\n    fxLayout=\"row\"\r\n    fxLayoutAlign=\"center center\"\r\n    fxLayoutGap=\"0.5rem\">\r\n\r\n    <cfc-timer\r\n      *ngIf=\"hasTimer\"\r\n      [type]=\"viewMode === headerViewModes.default\r\n        ? timerTypes.primary\r\n        : timerTypes.secondary\r\n      \"\r\n      [initialTime]=\"timeLogout\"\r\n      [criticalTime]=\"timeCritical\"\r\n      [isGlobal]=\"true\"\r\n      (timeCriticalEvent)=\"criticalTimeEvent.emit()\"\r\n      (timeOutEvent)=\"timeOutEvent.emit()\"\r\n      (timeEvent)=\"timeEvent.emit()\"\r\n    ></cfc-timer>\r\n\r\n    <cfc-button\r\n      *ngIf=\"hasNotificationIcon\"\r\n      sytle=\"min-width: 22rem;\"\r\n      icon=\"bell\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      [inverted]=\"viewMode === headerViewModes.contrast\"\r\n      [circle]=\"true\"\r\n      (click)=\"notificationIconEvent.emit()\"\r\n      data-toggle=\"menu\"\r\n      data-target=\"#push\"\r\n    ></cfc-button>\r\n\r\n    <cfc-divider\r\n      *ngIf=\"!hasNotificationIcon\"\r\n      [mode]=\"dividerModes.line\"\r\n      [type]=\"viewMode === headerViewModes.default\r\n        ? dividerTypes.primary\r\n        : dividerTypes.secondary\r\n      \"\r\n      [density]=\"dividerDensities.large\"\r\n      [axis]=\"dividerAxis.vertical\"\r\n    ></cfc-divider>\r\n\r\n    <cfc-sign-in\r\n      class=\"cfc-header__signin\"\r\n      [label]=\"firstAndLastName\"\r\n      [type]=\"signinTypes.secondary\"\r\n      [mode]=\"signinMode\"\r\n      (onClick)=\"signinEvent.emit()\"\r\n      (onLogout)=\"logoutEvent.emit()\"\r\n    ></cfc-sign-in>\r\n  </div>\r\n</header>\r\n\r\n<div class=\"cfc-header__spacer\"></div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.cfc-header{position:fixed;top:0;left:0;background-color:#fff;box-shadow:0 0 8px 1px #c1c1c1;padding:1rem 2.5rem;width:100%;height:5rem;z-index:999}.cfc-header__title{font-weight:700;font-size:1rem}.cfc-header__description{font-weight:400;font-size:.9rem;padding-top:.2rem;color:#555;opacity:60%}.cfc-header__spacer{position:relative;height:5rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "cfc-divider", inputs: ["height", "width", "mode", "type", "axis", "density"] }, { kind: "component", type: LogoComponent, selector: "cfc-logo", inputs: ["viewMode", "isClickable", "width", "imageUrl"], outputs: ["clickEvent"] }, { kind: "component", type: SignInComponent, selector: "cfc-sign-in", inputs: ["label", "type", "density", "mode", "disabled", "active", "block", "circle", "externalImageUrl", "externalLabel"], outputs: ["onClick", "onLogout"] }, { kind: "component", type: TimerComponent, selector: "cfc-timer", inputs: ["type", "initialTime", "criticalTime", "isGlobal"], outputs: ["timeOutEvent", "timeEvent", "timeCriticalEvent"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-header', template: "<header\r\n  class=\"cfc-header\"\r\n  [ngStyle]=\"{ 'background-color': viewMode === headerViewModes.default\r\n    ? 'white'\r\n    : '#0C326F'\r\n  }\"\r\n  fxLayout=\"row\"\r\n  fxLayoutAlign=\"space-between center\">\r\n  <div\r\n    fxLayout=\"row\"\r\n    fxLayoutAlign=\"center center\"\r\n    fxLayoutGap=\"1rem\">\r\n\r\n    <!-- MENU -->\r\n    <cfc-button\r\n      *ngIf=\"hasMenu\"\r\n      [icon]=\"'bars'\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      [circle]=\"true\"\r\n      [inverted]=\"viewMode === headerViewModes.contrast\"\r\n      aria-label=\"menu\"\r\n      data-toggle=\"menu\"\r\n      data-target=\"#menu-aside\"\r\n      is-push=\"true\"\r\n      id=\"push\"\r\n      [attr.show-menu]=\"'true'\"\r\n      (click)=\"toggleMenu()\">\r\n    </cfc-button>\r\n\r\n    <!-- LOGO -->\r\n    <cfc-logo\r\n      *ngIf=\"hasLogo\"\r\n      [viewMode]=\"logoViewMode\"\r\n      [imageUrl]=\"logoViewMode === logoViewModes.external ? logoUrl : undefined\"\r\n      (clickEvent)=\"goToHome()\"\r\n    ></cfc-logo>\r\n\r\n    <!-- TITLE AND DESCRIPTION -->\r\n    <div\r\n      fxLayout=\"column\"\r\n      fxLayoutAlign=\"center start\">\r\n      <h4\r\n        class=\"cfc-header__title\"\r\n        [ngStyle]=\"{ 'color': viewMode === headerViewModes.default ? 'black' : 'white' }\">\r\n        {{ title }}\r\n      </h4>\r\n      <p\r\n        *ngIf=\"description\"\r\n        class=\"cfc-header__description\"\r\n        [ngStyle]=\"{ 'color': viewMode === headerViewModes.default ? '#555555' : 'white' }\">\r\n        {{ description }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- ACTION BAR -->\r\n  <div\r\n    fxLayout=\"row\"\r\n    fxLayoutAlign=\"center center\"\r\n    fxLayoutGap=\"0.5rem\">\r\n\r\n    <cfc-timer\r\n      *ngIf=\"hasTimer\"\r\n      [type]=\"viewMode === headerViewModes.default\r\n        ? timerTypes.primary\r\n        : timerTypes.secondary\r\n      \"\r\n      [initialTime]=\"timeLogout\"\r\n      [criticalTime]=\"timeCritical\"\r\n      [isGlobal]=\"true\"\r\n      (timeCriticalEvent)=\"criticalTimeEvent.emit()\"\r\n      (timeOutEvent)=\"timeOutEvent.emit()\"\r\n      (timeEvent)=\"timeEvent.emit()\"\r\n    ></cfc-timer>\r\n\r\n    <cfc-button\r\n      *ngIf=\"hasNotificationIcon\"\r\n      sytle=\"min-width: 22rem;\"\r\n      icon=\"bell\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      [inverted]=\"viewMode === headerViewModes.contrast\"\r\n      [circle]=\"true\"\r\n      (click)=\"notificationIconEvent.emit()\"\r\n      data-toggle=\"menu\"\r\n      data-target=\"#push\"\r\n    ></cfc-button>\r\n\r\n    <cfc-divider\r\n      *ngIf=\"!hasNotificationIcon\"\r\n      [mode]=\"dividerModes.line\"\r\n      [type]=\"viewMode === headerViewModes.default\r\n        ? dividerTypes.primary\r\n        : dividerTypes.secondary\r\n      \"\r\n      [density]=\"dividerDensities.large\"\r\n      [axis]=\"dividerAxis.vertical\"\r\n    ></cfc-divider>\r\n\r\n    <cfc-sign-in\r\n      class=\"cfc-header__signin\"\r\n      [label]=\"firstAndLastName\"\r\n      [type]=\"signinTypes.secondary\"\r\n      [mode]=\"signinMode\"\r\n      (onClick)=\"signinEvent.emit()\"\r\n      (onLogout)=\"logoutEvent.emit()\"\r\n    ></cfc-sign-in>\r\n  </div>\r\n</header>\r\n\r\n<div class=\"cfc-header__spacer\"></div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.cfc-header{position:fixed;top:0;left:0;background-color:#fff;box-shadow:0 0 8px 1px #c1c1c1;padding:1rem 2.5rem;width:100%;height:5rem;z-index:999}.cfc-header__title{font-weight:700;font-size:1rem}.cfc-header__description{font-weight:400;font-size:.9rem;padding-top:.2rem;color:#555;opacity:60%}.cfc-header__spacer{position:relative;height:5rem;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { viewMode: [{
                type: Input
            }], hasMenu: [{
                type: Input
            }], hasLogo: [{
                type: Input
            }], logoViewMode: [{
                type: Input
            }], logoUrl: [{
                type: Input
            }], title: [{
                type: Input
            }], description: [{
                type: Input
            }], hasTimer: [{
                type: Input
            }], timeLogout: [{
                type: Input
            }], timeCritical: [{
                type: Input
            }], hasNotificationIcon: [{
                type: Input
            }], userName: [{
                type: Input
            }], signinMode: [{
                type: Input
            }], menuEvent: [{
                type: Output
            }], criticalTimeEvent: [{
                type: Output
            }], timeOutEvent: [{
                type: Output
            }], timeEvent: [{
                type: Output
            }], notificationIconEvent: [{
                type: Output
            }], signinEvent: [{
                type: Output
            }], logoutEvent: [{
                type: Output
            }] } });

class IconComponent {
    iconName;
    familyName = 'fas';
    className;
    size;
    color;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconComponent, selector: "cfc-icon", inputs: { iconName: "iconName", familyName: "familyName", className: "className", size: "size", color: "color" }, ngImport: i0, template: "<i [class]=\"familyName + ' fa-' + iconName\"\r\n  [ngClass]=\"className\"\r\n  [ngStyle]=\"{\r\n    '--size': size,\r\n    '--color': color\r\n  }\"\r\n  aria-hidden=\"true\"\r\n>\r\n", styles: ["i{width:100%}i:before{display:block;font-size:var(--size);color:var(--color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-icon', template: "<i [class]=\"familyName + ' fa-' + iconName\"\r\n  [ngClass]=\"className\"\r\n  [ngStyle]=\"{\r\n    '--size': size,\r\n    '--color': color\r\n  }\"\r\n  aria-hidden=\"true\"\r\n>\r\n", styles: ["i{width:100%}i:before{display:block;font-size:var(--size);color:var(--color)}\n"] }]
        }], propDecorators: { iconName: [{
                type: Input
            }], familyName: [{
                type: Input
            }], className: [{
                type: Input
            }], size: [{
                type: Input
            }], color: [{
                type: Input
            }] } });

var InputState;
(function (InputState) {
    InputState["default"] = "default";
    InputState["info"] = "info";
    InputState["warning"] = "warning";
    InputState["danger"] = "danger";
    InputState["success"] = "success";
})(InputState || (InputState = {}));

var InputDensity;
(function (InputDensity) {
    InputDensity["large"] = "large";
    InputDensity["medium"] = "medium";
    InputDensity["small"] = "small";
})(InputDensity || (InputDensity = {}));

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @angular-eslint/no-output-on-prefix */
class InputComponent {
    value;
    disabled = false;
    buttonAriaLabel = '';
    formControlName = null;
    isPassword = false;
    isHighlight = false;
    inverted = false;
    labelInline = false;
    state = InputState.default;
    density = InputDensity.medium;
    buttonIcon;
    label;
    type;
    placeholder;
    icon;
    onChange = new EventEmitter();
    onInput = new EventEmitter();
    onIconClicked = new EventEmitter();
    onIconSubmited = new EventEmitter();
    inputDensities = InputDensity;
    inputStates = InputState;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputComponent, selector: "cfc-input", inputs: { value: "value", disabled: "disabled", buttonAriaLabel: "buttonAriaLabel", formControlName: "formControlName", isPassword: "isPassword", isHighlight: "isHighlight", inverted: "inverted", labelInline: "labelInline", state: "state", density: "density", buttonIcon: "buttonIcon", label: "label", type: "type", placeholder: "placeholder", icon: "icon" }, outputs: { onChange: "onChange", onInput: "onInput", onIconClicked: "onIconClicked", onIconSubmited: "onIconSubmited" }, ngImport: i0, template: "<div\r\n  class=\"br-input\"\r\n  [class.input-inline]=\"labelInline\"\r\n  [class.input-button]=\"labelInline\"\r\n  [ngClass]=\"state\">\r\n  <div\r\n    *ngIf=\"label\"\r\n    class=\"input-label\">\r\n    <label\r\n      class=\"text-nowrap\"\r\n      [for]=\"'input-'+(icon ? icon + '-' : '')+density\">\r\n      {{ label }}\r\n    </label>\r\n  </div>\r\n  <div\r\n    class=\"input-content\">\r\n    <div\r\n      class=\"input-group\">\r\n      <div\r\n        *ngIf=\"icon\"\r\n        class=\"input-icon\">\r\n        <i\r\n          [class]=\"'fas fa-' + icon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n      </div>\r\n\r\n      <input\r\n        [id]=\"'input-icon'+(density !== inputDensities.medium ? '-' + density : '')\"\r\n        [type]=\"isPassword ? 'password' : type\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"formControlName\"\r\n        [value]=\"value ? value : ''\"\r\n        (ngModelChange)=\"onChange.emit()\" />\r\n\r\n      <button\r\n        *ngIf=\"buttonIcon\"\r\n        class=\"br-button\"\r\n        type=\"button\"\r\n        [ariaLabel]=\"buttonAriaLabel\">\r\n        <i\r\n          [class]=\"'fa fa-' + buttonIcon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-input', template: "<div\r\n  class=\"br-input\"\r\n  [class.input-inline]=\"labelInline\"\r\n  [class.input-button]=\"labelInline\"\r\n  [ngClass]=\"state\">\r\n  <div\r\n    *ngIf=\"label\"\r\n    class=\"input-label\">\r\n    <label\r\n      class=\"text-nowrap\"\r\n      [for]=\"'input-'+(icon ? icon + '-' : '')+density\">\r\n      {{ label }}\r\n    </label>\r\n  </div>\r\n  <div\r\n    class=\"input-content\">\r\n    <div\r\n      class=\"input-group\">\r\n      <div\r\n        *ngIf=\"icon\"\r\n        class=\"input-icon\">\r\n        <i\r\n          [class]=\"'fas fa-' + icon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n      </div>\r\n\r\n      <input\r\n        [id]=\"'input-icon'+(density !== inputDensities.medium ? '-' + density : '')\"\r\n        [type]=\"isPassword ? 'password' : type\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"formControlName\"\r\n        [value]=\"value ? value : ''\"\r\n        (ngModelChange)=\"onChange.emit()\" />\r\n\r\n      <button\r\n        *ngIf=\"buttonIcon\"\r\n        class=\"br-button\"\r\n        type=\"button\"\r\n        [ariaLabel]=\"buttonAriaLabel\">\r\n        <i\r\n          [class]=\"'fa fa-' + buttonIcon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { value: [{
                type: Input
            }], disabled: [{
                type: Input
            }], buttonAriaLabel: [{
                type: Input
            }], formControlName: [{
                type: Input
            }], isPassword: [{
                type: Input
            }], isHighlight: [{
                type: Input
            }], inverted: [{
                type: Input
            }], labelInline: [{
                type: Input
            }], state: [{
                type: Input
            }], density: [{
                type: Input
            }], buttonIcon: [{
                type: Input
            }], label: [{
                type: Input
            }], type: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], icon: [{
                type: Input
            }], onChange: [{
                type: Output
            }], onInput: [{
                type: Output
            }], onIconClicked: [{
                type: Output
            }], onIconSubmited: [{
                type: Output
            }] } });

class ListComponent {
    title;
    ngAfterContentInit() {
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListComponent, selector: "cfc-list", ngImport: i0, template: "<div\r\n  class=\"br-list\"\r\n  role=\"list\"\r\n  fxLayout=\"column\">\r\n  <ng-container *ngIf=\"title\">\r\n    <div\r\n      class=\"header\">\r\n      <div\r\n        class=\"title\">\r\n        {{ title }}\r\n      </div>\r\n    </div>\r\n\r\n    <span\r\n      class=\"br-divider\">\r\n    </span>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-list', template: "<div\r\n  class=\"br-list\"\r\n  role=\"list\"\r\n  fxLayout=\"column\">\r\n  <ng-container *ngIf=\"title\">\r\n    <div\r\n      class=\"header\">\r\n      <div\r\n        class=\"title\">\r\n        {{ title }}\r\n      </div>\r\n    </div>\r\n\r\n    <span\r\n      class=\"br-divider\">\r\n    </span>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n\r\n</div>\r\n" }]
        }] });

class MagicButtonComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MagicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MagicButtonComponent, selector: "cfc-magic-button", ngImport: i0, template: "<br-magic-button label=\"bot\u00E3o m\u00E1gico\"/>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MagicButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-magic-button', template: "<br-magic-button label=\"bot\u00E3o m\u00E1gico\"/>\r\n" }]
        }] });

class MenuComponent {
    menuItems = [];
    closeOnOutsideClick = false;
    itemSelected = new EventEmitter();
    menuToggle = new EventEmitter();
    showMenuItems = false;
    navigatedHistory = [];
    toggleMenu() {
        this.showMenuItems = !this.showMenuItems;
        if (!this.showMenuItems) {
            this.menuItems.forEach((item) => (item.toggle = false));
            this.navigatedHistory = [];
        }
    }
    resetMenuState() {
        this.menuItems.forEach((item) => (item.toggle = false));
        this.navigatedHistory = [];
        this.showMenuItems = false;
    }
    onDocumentClick(event) {
        if (this.closeOnOutsideClick && this.showMenuItems) {
            const clickedElement = event.target;
            const menuElement = document.querySelector('.menu-container');
            // Adicionar verificação explícita para null
            if (menuElement && !menuElement.contains(clickedElement)) {
                this.showMenuItems = false;
                this.menuToggle.emit(this.showMenuItems); // Emite o estado atualizado
                this.resetMenuState();
            }
        }
    }
    expandItem(item) {
        item.toggle = !item.toggle;
    }
    navigateToSubMenu(subItem) {
        this.navigatedHistory.push(subItem);
    }
    goBack() {
        if (this.navigatedHistory.length > 1) {
            this.navigatedHistory.pop();
        }
        else {
            this.navigatedHistory = [];
        }
    }
    selectSubItem(item) {
        this.itemSelected.emit(item);
        console.log(`Subitem selected: ${item.name}`);
    }
    get currentNavigatedItem() {
        return this.navigatedHistory[this.navigatedHistory.length - 1] || null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "cfc-menu", inputs: { menuItems: "menuItems", closeOnOutsideClick: "closeOnOutsideClick" }, outputs: { itemSelected: "itemSelected", menuToggle: "menuToggle" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"menu-container\">\r\n  <!-- Modo Principal (Expans\u00E3o) -->\r\n  <div *ngIf=\"navigatedHistory.length === 0\">\r\n    <!-- Cabe\u00E7alho do Menu -->\r\n    <div class=\"menu-header\">\r\n      <button class=\"menu-toggle\" (click)=\"toggleMenu()\">\r\n        <i class=\"fas fa-bars\"></i>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Lista Principal de Itens -->\r\n    <ul class=\"menu-list\" *ngIf=\"showMenuItems\">\r\n      <li *ngFor=\"let item of menuItems\" class=\"menu-item\">\r\n        <div class=\"menu-item-header\" (click)=\"expandItem(item)\">\r\n          <i *ngIf=\"item.iconName\" class=\"fas\" [ngClass]=\"item.iconName\"></i>\r\n          <span>{{ item.name }}</span>\r\n          <i *ngIf=\"item.subItems\" class=\"fas fa-chevron-down\" [ngClass]=\"{'rotated': item.toggle}\"></i>\r\n        </div>\r\n\r\n        <!-- Submenu (Expans\u00E3o) -->\r\n        <ul *ngIf=\"item.toggle && item.subItems\" class=\"sub-menu\">\r\n          <li *ngFor=\"let subItem of item.subItems\" class=\"submenu-item\">\r\n            <div class=\"submenu-item-header\" (click)=\"navigateToSubMenu(subItem)\">\r\n              <i *ngIf=\"subItem.iconName\" class=\"fas\" [ngClass]=\"subItem.iconName\"></i>\r\n              <span>{{ subItem.name }}</span>\r\n              <i *ngIf=\"subItem.subItems\" class=\"fas fa-chevron-right\"></i>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n  <!-- Modo de Navega\u00E7\u00E3o -->\r\n  <div *ngIf=\"currentNavigatedItem\" class=\"navigation-mode\">\r\n    <!-- Cabe\u00E7alho da Navega\u00E7\u00E3o -->\r\n    <div class=\"navigation-header\">\r\n      <button class=\"back-button\" (click)=\"goBack()\">\r\n        <i class=\"fas fa-chevron-left\"></i>\r\n      </button>\r\n      <span class=\"navigation-title\">{{ currentNavigatedItem.name }}</span>\r\n      <i *ngIf=\"currentNavigatedItem.iconName\" class=\"navigation-icon fas\" [ngClass]=\"currentNavigatedItem.iconName\"></i>\r\n    </div>\r\n\r\n    <!-- Lista de SubItens Navegados -->\r\n    <ul class=\"navigation-list\">\r\n      <li *ngFor=\"let subSubItem of currentNavigatedItem.subItems\" class=\"navigation-item\">\r\n        <div class=\"navigation-item-inner\" (click)=\"navigateToSubMenu(subSubItem)\">\r\n          <i *ngIf=\"subSubItem.iconName\" class=\"fas\" [ngClass]=\"subSubItem.iconName\"></i>\r\n          <span>{{ subSubItem.name }}</span>\r\n          <i *ngIf=\"subSubItem.subItems\" class=\"fas fa-chevron-right\"></i>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.menu-container{border-radius:8px;min-width:316px;font-family:Arial,sans-serif;transition:all .3s ease-in-out;color:#1351b4;font-weight:300}.menu-header{display:flex;padding:8px}.menu-toggle{background:none;border:none;cursor:pointer;color:#0056b3;font-size:24px}.menu-toggle:hover{background-color:#d0e4ff;border-radius:50%}.menu-list{list-style:none;padding:0;margin:0}.menu-item{width:100%;cursor:pointer;display:flex;align-items:center;flex-direction:column;transition:background-color .3s;border-bottom:1px solid #ccc}.menu-item-header{display:flex;align-items:center;gap:8px;width:100%;padding:20px 10px}.menu-item-header:hover{background-color:#d0e4ff70}.menu-item-header i:first-child{color:#0056b3;font-size:18px}.menu-item-header span{flex-grow:1}.menu-item-header i:last-child{color:#0056b3;font-size:16px;margin-left:auto}.sub-menu{list-style:none;width:100%;padding:0;background-color:#f8f8f8}.sub-menu .submenu-item{cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding-left:20px}.sub-menu .submenu-item:hover{background-color:#d0e4ff70}.submenu-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 10px}.submenu-item-header span{flex-grow:1}.navigation-mode{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;min-width:316px}.navigation-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e0e0e0;padding:20px 10px}.back-button{background:none;border:none;cursor:pointer;color:#0056b3;font-size:18px;padding:0}.back-button:hover{text-decoration:underline}.navigation-title{flex-grow:1;font-size:16px;font-weight:300;color:#0056b3;text-align:center}.navigation-icon{color:#0056b3;font-size:18px}.navigation-list{list-style:none;padding:0;margin:0;background-color:#f8f8f8}.navigation-item{display:flex;align-items:center;gap:8px;width:100%;padding:20px 15px}.navigation-item:hover{background-color:#d0e4ff;color:#0056b3}.navigation-item-inner{display:flex;align-items:center;width:100%}.navigation-item-inner span{flex-grow:1}.navigation-item-inner i:last-child{margin-left:auto;color:#0056b3;font-size:16px}\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"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-menu', template: "<div class=\"menu-container\">\r\n  <!-- Modo Principal (Expans\u00E3o) -->\r\n  <div *ngIf=\"navigatedHistory.length === 0\">\r\n    <!-- Cabe\u00E7alho do Menu -->\r\n    <div class=\"menu-header\">\r\n      <button class=\"menu-toggle\" (click)=\"toggleMenu()\">\r\n        <i class=\"fas fa-bars\"></i>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Lista Principal de Itens -->\r\n    <ul class=\"menu-list\" *ngIf=\"showMenuItems\">\r\n      <li *ngFor=\"let item of menuItems\" class=\"menu-item\">\r\n        <div class=\"menu-item-header\" (click)=\"expandItem(item)\">\r\n          <i *ngIf=\"item.iconName\" class=\"fas\" [ngClass]=\"item.iconName\"></i>\r\n          <span>{{ item.name }}</span>\r\n          <i *ngIf=\"item.subItems\" class=\"fas fa-chevron-down\" [ngClass]=\"{'rotated': item.toggle}\"></i>\r\n        </div>\r\n\r\n        <!-- Submenu (Expans\u00E3o) -->\r\n        <ul *ngIf=\"item.toggle && item.subItems\" class=\"sub-menu\">\r\n          <li *ngFor=\"let subItem of item.subItems\" class=\"submenu-item\">\r\n            <div class=\"submenu-item-header\" (click)=\"navigateToSubMenu(subItem)\">\r\n              <i *ngIf=\"subItem.iconName\" class=\"fas\" [ngClass]=\"subItem.iconName\"></i>\r\n              <span>{{ subItem.name }}</span>\r\n              <i *ngIf=\"subItem.subItems\" class=\"fas fa-chevron-right\"></i>\r\n            </div>\r\n          </li>\r\n        </ul>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n  <!-- Modo de Navega\u00E7\u00E3o -->\r\n  <div *ngIf=\"currentNavigatedItem\" class=\"navigation-mode\">\r\n    <!-- Cabe\u00E7alho da Navega\u00E7\u00E3o -->\r\n    <div class=\"navigation-header\">\r\n      <button class=\"back-button\" (click)=\"goBack()\">\r\n        <i class=\"fas fa-chevron-left\"></i>\r\n      </button>\r\n      <span class=\"navigation-title\">{{ currentNavigatedItem.name }}</span>\r\n      <i *ngIf=\"currentNavigatedItem.iconName\" class=\"navigation-icon fas\" [ngClass]=\"currentNavigatedItem.iconName\"></i>\r\n    </div>\r\n\r\n    <!-- Lista de SubItens Navegados -->\r\n    <ul class=\"navigation-list\">\r\n      <li *ngFor=\"let subSubItem of currentNavigatedItem.subItems\" class=\"navigation-item\">\r\n        <div class=\"navigation-item-inner\" (click)=\"navigateToSubMenu(subSubItem)\">\r\n          <i *ngIf=\"subSubItem.iconName\" class=\"fas\" [ngClass]=\"subSubItem.iconName\"></i>\r\n          <span>{{ subSubItem.name }}</span>\r\n          <i *ngIf=\"subSubItem.subItems\" class=\"fas fa-chevron-right\"></i>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.menu-container{border-radius:8px;min-width:316px;font-family:Arial,sans-serif;transition:all .3s ease-in-out;color:#1351b4;font-weight:300}.menu-header{display:flex;padding:8px}.menu-toggle{background:none;border:none;cursor:pointer;color:#0056b3;font-size:24px}.menu-toggle:hover{background-color:#d0e4ff;border-radius:50%}.menu-list{list-style:none;padding:0;margin:0}.menu-item{width:100%;cursor:pointer;display:flex;align-items:center;flex-direction:column;transition:background-color .3s;border-bottom:1px solid #ccc}.menu-item-header{display:flex;align-items:center;gap:8px;width:100%;padding:20px 10px}.menu-item-header:hover{background-color:#d0e4ff70}.menu-item-header i:first-child{color:#0056b3;font-size:18px}.menu-item-header span{flex-grow:1}.menu-item-header i:last-child{color:#0056b3;font-size:16px;margin-left:auto}.sub-menu{list-style:none;width:100%;padding:0;background-color:#f8f8f8}.sub-menu .submenu-item{cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding-left:20px}.sub-menu .submenu-item:hover{background-color:#d0e4ff70}.submenu-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 10px}.submenu-item-header span{flex-grow:1}.navigation-mode{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;min-width:316px}.navigation-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e0e0e0;padding:20px 10px}.back-button{background:none;border:none;cursor:pointer;color:#0056b3;font-size:18px;padding:0}.back-button:hover{text-decoration:underline}.navigation-title{flex-grow:1;font-size:16px;font-weight:300;color:#0056b3;text-align:center}.navigation-icon{color:#0056b3;font-size:18px}.navigation-list{list-style:none;padding:0;margin:0;background-color:#f8f8f8}.navigation-item{display:flex;align-items:center;gap:8px;width:100%;padding:20px 15px}.navigation-item:hover{background-color:#d0e4ff;color:#0056b3}.navigation-item-inner{display:flex;align-items:center;width:100%}.navigation-item-inner span{flex-grow:1}.navigation-item-inner i:last-child{margin-left:auto;color:#0056b3;font-size:16px}\n"] }]
        }], propDecorators: { menuItems: [{
                type: Input
            }], closeOnOutsideClick: [{
                type: Input
            }], itemSelected: [{
                type: Output
            }], menuToggle: [{
                type: Output
            }], onDocumentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

var MessageState;
(function (MessageState) {
    MessageState["danger"] = "danger";
    MessageState["success"] = "success";
    MessageState["info"] = "info";
    MessageState["warning"] = "warning";
})(MessageState || (MessageState = {}));

var MessageType;
(function (MessageType) {
    MessageType["alert"] = "alert";
    MessageType["feedback"] = "feedback";
})(MessageType || (MessageType = {}));

class MessageComponent {
    elementRef;
    message;
    description;
    state = MessageState.warning;
    type = MessageType.alert;
    horizontalPosition = 'right';
    verticalPosition = 'top';
    verticalOffset = '0.1rem';
    horizontalOffset = '0.1rem';
    displayTime = 5000;
    isTemporary;
    position = 'fixed';
    zIndex = 1000;
    display = 'none';
    get topPosition() {
        return this.verticalPosition === 'top' ? this.verticalOffset : null;
    }
    get bottomPosition() {
        return this.verticalPosition === 'bottom' ? this.verticalOffset : null;
    }
    get leftPosition() {
        return this.horizontalPosition === 'left' ? this.horizontalOffset : null;
    }
    get rightPosition() {
        return this.horizontalPosition === 'right' ? this.horizontalOffset : null;
    }
    isVisible = false;
    messageTypes = MessageType;
    closeTimeoutId;
    ngOnInit() {
        if (this.isTemporary === undefined) {
            this.isTemporary = this.type === this.messageTypes.feedback;
        }
    }
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    ngOnChanges(changes) {
        if (changes['type']) {
            if (this.type === this.messageTypes.alert) {
                this.elementRef.nativeElement.style.width = '100%';
            }
            else {
                this.elementRef.nativeElement.style.width = 'auto';
            }
        }
    }
    get icon() {
        switch (this.state) {
            case MessageState.danger:
                return 'fas fa-times-circle';
            case MessageState.info:
                return 'fas fa-info-circle';
            case MessageState.success:
                return 'fas fa-check-circle';
            default:
                return 'fas fa-exclamation-triangle';
        }
    }
    /**
     * Método público para abrir a mensagem.
     * Reinicia o temporizador de fechamento caso a mensagem seja temporária.
     */
    openMessage() {
        this.isVisible = true;
        this.display = 'flex';
        if (this.isTemporary) {
            this.restartCloseTimer();
        }
    }
    /**
     * Método público para fechar a mensagem manualmente.
     */
    closeMessage() {
        this.isVisible = false;
        if (this.isTemporary) {
            clearTimeout(this.closeTimeoutId);
        }
        setTimeout(() => this.display = 'none', 200);
    }
    restartCloseTimer() {
        clearTimeout(this.closeTimeoutId);
        this.closeTimeoutId = setTimeout(() => {
            this.closeMessage();
        }, this.displayTime);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MessageComponent, selector: "cfc-message", inputs: { message: "message", description: "description", state: "state", type: "type", horizontalPosition: "horizontalPosition", verticalPosition: "verticalPosition", verticalOffset: "verticalOffset", horizontalOffset: "horizontalOffset", displayTime: "displayTime", isTemporary: "isTemporary" }, host: { properties: { "style.position": "this.position", "style.zIndex": "this.zIndex", "style.display": "this.display", "style.top": "this.topPosition", "style.bottom": "this.bottomPosition", "style.left": "this.leftPosition", "style.right": "this.rightPosition" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isTemporary || isVisible\">\r\n  <ng-container *ngIf=\"type === messageTypes.alert; else feedback\">\r\n    <div\r\n      class=\"br-message message-container\"\r\n      style=\"width: 100%;\"\r\n      [class.fade-out]=\"!isVisible\"\r\n      [ngClass]=\"state\">\r\n      <div\r\n        class=\"icon\">\r\n        <i\r\n          [ngClass]=\"icon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n      </div>\r\n      <div\r\n        class=\"content\"\r\n        [ariaLabel]=\"message + ' ' + description\"\r\n        role=\"alert\">\r\n        <span\r\n          class=\"message-title\">\r\n          {{ message }}\r\n        </span>\r\n        <span\r\n          *ngIf=\"description\"\r\n          class=\"message-body\">\r\n          {{ description }}\r\n        </span>\r\n      </div>\r\n      <div class=\"close\">\r\n        <button\r\n          class=\"br-button circle small\"\r\n          type=\"button\"\r\n          aria-label=\"Fechar a messagem alterta\"\r\n          (click)=\"closeMessage()\"\r\n        >\r\n          <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #feedback>\r\n    <div\r\n      class=\"message-container mb-3\"\r\n      [class.fade-out]=\"!isVisible\">\r\n      <span\r\n        class=\"feedback\"\r\n        [ngClass]=\"state\"\r\n        role=\"alert\">\r\n        <i\r\n          [ngClass]=\"icon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n        {{ message }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: ["@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.message-container{animation:slideDown .3s ease-out}.fade-out{animation:fadeOut .3s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-message', template: "<ng-container *ngIf=\"isTemporary || isVisible\">\r\n  <ng-container *ngIf=\"type === messageTypes.alert; else feedback\">\r\n    <div\r\n      class=\"br-message message-container\"\r\n      style=\"width: 100%;\"\r\n      [class.fade-out]=\"!isVisible\"\r\n      [ngClass]=\"state\">\r\n      <div\r\n        class=\"icon\">\r\n        <i\r\n          [ngClass]=\"icon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n      </div>\r\n      <div\r\n        class=\"content\"\r\n        [ariaLabel]=\"message + ' ' + description\"\r\n        role=\"alert\">\r\n        <span\r\n          class=\"message-title\">\r\n          {{ message }}\r\n        </span>\r\n        <span\r\n          *ngIf=\"description\"\r\n          class=\"message-body\">\r\n          {{ description }}\r\n        </span>\r\n      </div>\r\n      <div class=\"close\">\r\n        <button\r\n          class=\"br-button circle small\"\r\n          type=\"button\"\r\n          aria-label=\"Fechar a messagem alterta\"\r\n          (click)=\"closeMessage()\"\r\n        >\r\n          <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #feedback>\r\n    <div\r\n      class=\"message-container mb-3\"\r\n      [class.fade-out]=\"!isVisible\">\r\n      <span\r\n        class=\"feedback\"\r\n        [ngClass]=\"state\"\r\n        role=\"alert\">\r\n        <i\r\n          [ngClass]=\"icon\"\r\n          aria-hidden=\"true\">\r\n        </i>\r\n        {{ message }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: ["@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.message-container{animation:slideDown .3s ease-out}.fade-out{animation:fadeOut .3s ease-out}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
                type: Input
            }], description: [{
                type: Input
            }], state: [{
                type: Input
            }], type: [{
                type: Input
            }], horizontalPosition: [{
                type: Input
            }], verticalPosition: [{
                type: Input
            }], verticalOffset: [{
                type: Input
            }], horizontalOffset: [{
                type: Input
            }], displayTime: [{
                type: Input
            }], isTemporary: [{
                type: Input
            }], position: [{
                type: HostBinding,
                args: ['style.position']
            }], zIndex: [{
                type: HostBinding,
                args: ['style.zIndex']
            }], display: [{
                type: HostBinding,
                args: ['style.display']
            }], topPosition: [{
                type: HostBinding,
                args: ['style.top']
            }], bottomPosition: [{
                type: HostBinding,
                args: ['style.bottom']
            }], leftPosition: [{
                type: HostBinding,
                args: ['style.left']
            }], rightPosition: [{
                type: HostBinding,
                args: ['style.right']
            }] } });

var ModalDensity;
(function (ModalDensity) {
    ModalDensity["small"] = "small";
    ModalDensity["medium"] = "medium";
})(ModalDensity || (ModalDensity = {}));

var ModalType;
(function (ModalType) {
    ModalType["dialog"] = "dialog";
    ModalType["scroll"] = "scroll";
    ModalType["default"] = "default";
})(ModalType || (ModalType = {}));

class ScrimComponent {
    isVisible = true;
    isClosable = true;
    display = 'block';
    open() {
        this.isVisible = true;
        this.display = 'block';
    }
    close() {
        this.isVisible = false;
        this.display = 'none';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrimComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScrimComponent, selector: "cfc-scrim", inputs: { isVisible: "isVisible", isClosable: "isClosable" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<div\r\n  class=\"full-screen-overlay\"\r\n  *ngIf=\"isVisible\"\r\n  (click)=\"isClosable ? close() : null\">\r\n</div>\r\n", styles: [".full-screen-overlay{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background:#00000073;-webkit-backdrop-filter:blur(.1px);backdrop-filter:blur(.1px);z-index:1000}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrimComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-scrim', template: "<div\r\n  class=\"full-screen-overlay\"\r\n  *ngIf=\"isVisible\"\r\n  (click)=\"isClosable ? close() : null\">\r\n</div>\r\n", styles: [".full-screen-overlay{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background:#00000073;-webkit-backdrop-filter:blur(.1px);backdrop-filter:blur(.1px);z-index:1000}\n"] }]
        }], propDecorators: { isVisible: [{
                type: Input
            }], isClosable: [{
                type: Input
            }], display: [{
                type: HostBinding,
                args: ['style.display']
            }] } });

class ModalComponent {
    type = ModalType.dialog;
    title;
    isClosable = true;
    density = ModalDensity.medium;
    primaryActionLabel;
    primaryActionIcon;
    secondaryActionLabel;
    secondaryActionIcon;
    hasOverlay = false;
    width = 'auto';
    height = 'auto';
    onPrimaryAction = new EventEmitter();
    onSecondaryAction = new EventEmitter();
    isOpened = true;
    buttonTypes = ButtonType;
    modalTypes = ModalType;
    modalDensities = ModalDensity;
    open() {
        this.isOpened = true;
    }
    close() {
        this.isOpened = false;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalComponent, selector: "cfc-modal", inputs: { type: "type", title: "title", isClosable: "isClosable", density: "density", primaryActionLabel: "primaryActionLabel", primaryActionIcon: "primaryActionIcon", secondaryActionLabel: "secondaryActionLabel", secondaryActionIcon: "secondaryActionIcon", hasOverlay: "hasOverlay", width: "width", height: "height" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, ngImport: i0, template: "<div\r\n  *ngIf=\"isOpened\"\r\n  class=\"br-modal\"\r\n  [ngClass]=\"{\r\n    density,\r\n    'has-overlay': hasOverlay\r\n  }\"\r\n  [ngStyle]=\"{\r\n    'width': width,\r\n    'height': height\r\n  }\"\r\n  role=\"dialog\"\r\n  [attr.aria-modal]=\"true\"\r\n  aria-labelledby=\"modalalerttitle\"\r\n>\r\n  <div\r\n    class=\"br-modal-header\"\r\n    fxLayout=\"row\"\r\n    fxLayoutAlign=\"space-between center\">\r\n    <div\r\n      class=\"modal-title\"\r\n      id=\"modalalerttitle\">\r\n      {{ title }}\r\n    </div>\r\n    <cfc-button\r\n      *ngIf=\"isClosable\"\r\n      [circle]=\"true\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      icon=\"fas fa-times\"\r\n      data-dismiss=\"br-modal\"\r\n      aria-label=\"Fechar\"\r\n      (onClick)=\"close()\">\r\n    </cfc-button>\r\n  </div>\r\n\r\n  <main class=\"br-modal-body\">\r\n    <ng-content></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"br-modal-footer justify-content-end\"\r\n    fxLayoutGap=\"0.5rem\"\r\n    [fxLayoutAlign]=\"\r\n      type === modalTypes.dialog\r\n        ? 'space-between end'\r\n        : 'end end'\r\n    \">\r\n    <cfc-button\r\n      *ngIf=\"secondaryActionLabel\"\r\n      [label]=\"secondaryActionLabel\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      [icon]=\"secondaryActionIcon ?? ''\"\r\n      (onClick)=\"onSecondaryAction ? onSecondaryAction.emit() : close()\">\r\n    </cfc-button>\r\n    <cfc-button\r\n      [label]=\"primaryActionLabel\"\r\n      [type]=\"buttonTypes.primary\"\r\n      [icon]=\"primaryActionIcon\"\r\n      (onClick)=\"onPrimaryAction.emit()\">\r\n    </cfc-button>\r\n  </footer>\r\n</div>\r\n\r\n<cfc-scrim\r\n  [isVisible]=\"hasOverlay && isOpened\"\r\n  [isClosable]=\"isClosable\"\r\n></cfc-scrim>\r\n", styles: [".has-overlay{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;z-index:1001}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"], outputs: ["onClick"] }, { kind: "component", type: ScrimComponent, selector: "cfc-scrim", inputs: ["isVisible", "isClosable"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-modal', template: "<div\r\n  *ngIf=\"isOpened\"\r\n  class=\"br-modal\"\r\n  [ngClass]=\"{\r\n    density,\r\n    'has-overlay': hasOverlay\r\n  }\"\r\n  [ngStyle]=\"{\r\n    'width': width,\r\n    'height': height\r\n  }\"\r\n  role=\"dialog\"\r\n  [attr.aria-modal]=\"true\"\r\n  aria-labelledby=\"modalalerttitle\"\r\n>\r\n  <div\r\n    class=\"br-modal-header\"\r\n    fxLayout=\"row\"\r\n    fxLayoutAlign=\"space-between center\">\r\n    <div\r\n      class=\"modal-title\"\r\n      id=\"modalalerttitle\">\r\n      {{ title }}\r\n    </div>\r\n    <cfc-button\r\n      *ngIf=\"isClosable\"\r\n      [circle]=\"true\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      icon=\"fas fa-times\"\r\n      data-dismiss=\"br-modal\"\r\n      aria-label=\"Fechar\"\r\n      (onClick)=\"close()\">\r\n    </cfc-button>\r\n  </div>\r\n\r\n  <main class=\"br-modal-body\">\r\n    <ng-content></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"br-modal-footer justify-content-end\"\r\n    fxLayoutGap=\"0.5rem\"\r\n    [fxLayoutAlign]=\"\r\n      type === modalTypes.dialog\r\n        ? 'space-between end'\r\n        : 'end end'\r\n    \">\r\n    <cfc-button\r\n      *ngIf=\"secondaryActionLabel\"\r\n      [label]=\"secondaryActionLabel\"\r\n      [type]=\"buttonTypes.tertiary\"\r\n      [icon]=\"secondaryActionIcon ?? ''\"\r\n      (onClick)=\"onSecondaryAction ? onSecondaryAction.emit() : close()\">\r\n    </cfc-button>\r\n    <cfc-button\r\n      [label]=\"primaryActionLabel\"\r\n      [type]=\"buttonTypes.primary\"\r\n      [icon]=\"primaryActionIcon\"\r\n      (onClick)=\"onPrimaryAction.emit()\">\r\n    </cfc-button>\r\n  </footer>\r\n</div>\r\n\r\n<cfc-scrim\r\n  [isVisible]=\"hasOverlay && isOpened\"\r\n  [isClosable]=\"isClosable\"\r\n></cfc-scrim>\r\n", styles: [".has-overlay{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;z-index:1001}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], title: [{
                type: Input
            }], isClosable: [{
                type: Input
            }], density: [{
                type: Input
            }], primaryActionLabel: [{
                type: Input
            }], primaryActionIcon: [{
                type: Input
            }], secondaryActionLabel: [{
                type: Input
            }], secondaryActionIcon: [{
                type: Input
            }], hasOverlay: [{
                type: Input
            }], width: [{
                type: Input
            }], height: [{
                type: Input
            }], onPrimaryAction: [{
                type: Output
            }], onSecondaryAction: [{
                type: Output
            }] } });

class NotificationComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotificationComponent, selector: "cfc-notification", ngImport: i0, template: "<br-notification>notifica\u00E7\u00E3o</br-notification>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-notification', template: "<br-notification>notifica\u00E7\u00E3o</br-notification>\r\n" }]
        }] });

class NotificationPanelComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NotificationPanelComponent, selector: "cfc-notification-panel", ngImport: i0, template: "<br-notification-panel>\r\n  <br-notification>notifica\u00E7\u00E3o 1</br-notification>\r\n  <br-notification>notifica\u00E7\u00E3o 2</br-notification>\r\n  <br-notification>notifica\u00E7\u00E3o 3</br-notification>\r\n</br-notification-panel>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationPanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-notification-panel', template: "<br-notification-panel>\r\n  <br-notification>notifica\u00E7\u00E3o 1</br-notification>\r\n  <br-notification>notifica\u00E7\u00E3o 2</br-notification>\r\n  <br-notification>notifica\u00E7\u00E3o 3</br-notification>\r\n</br-notification-panel>\r\n" }]
        }] });

class PageContentComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PageContentComponent, selector: "cfc-page-content", ngImport: i0, template: "<main class=\"container-out\" fxFlex=\"grow\">\r\n  <ng-content></ng-content>\r\n</main>\r\n", styles: [".container-out{display:grid;margin:0;padding:1rem 2.5rem 5rem;box-sizing:border-box;min-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-page-content', template: "<main class=\"container-out\" fxFlex=\"grow\">\r\n  <ng-content></ng-content>\r\n</main>\r\n", styles: [".container-out{display:grid;margin:0;padding:1rem 2.5rem 5rem;box-sizing:border-box;min-height:100%}\n"] }]
        }] });

class SelectComponent {
    renderer;
    options = [];
    id;
    label;
    value;
    placeholder;
    labelInline = false;
    onChange = new EventEmitter();
    selectDOM = null;
    messageTypes = MessageType;
    constructor(renderer) {
        this.renderer = renderer;
    }
    ngAfterViewInit() {
        this.adjustDimensions();
    }
    adjustDimensions() {
        this.selectDOM = document.querySelector('br-select');
        const shadowRoot = this.selectDOM?.shadowRoot;
        const brSelect = shadowRoot?.querySelector('.br-select');
        this.renderer.setStyle(brSelect, 'max-width', '100%');
        this.renderer.setStyle(brSelect, 'min-width', 'auto');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectComponent, selector: "cfc-select", inputs: { options: "options", id: "id", label: "label", value: "value", placeholder: "placeholder", labelInline: "labelInline" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\r\n  [fxLayout]=\"labelInline ? 'row' : 'column'\"\r\n  [fxLayoutAlign]=\"labelInline ? 'center center' : ''\">\r\n  <label\r\n    *ngIf=\"label\"\r\n    class=\"input-label\"\r\n    style=\"margin: 0;\"\r\n    [for]=\"id\">\r\n    {{ label }}\r\n  </label>\r\n  <br-select\r\n    style=\"width: 100%;\"\r\n    [id]=\"id\"\r\n    [options]=\"options\"\r\n    [value]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"onChange.emit($event)\">\r\n    <br-item *ngFor=\"let option of options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </br-item>\r\n  </br-select>\r\n</div>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-select', template: "<div\r\n  [fxLayout]=\"labelInline ? 'row' : 'column'\"\r\n  [fxLayoutAlign]=\"labelInline ? 'center center' : ''\">\r\n  <label\r\n    *ngIf=\"label\"\r\n    class=\"input-label\"\r\n    style=\"margin: 0;\"\r\n    [for]=\"id\">\r\n    {{ label }}\r\n  </label>\r\n  <br-select\r\n    style=\"width: 100%;\"\r\n    [id]=\"id\"\r\n    [options]=\"options\"\r\n    [value]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"onChange.emit($event)\">\r\n    <br-item *ngFor=\"let option of options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </br-item>\r\n  </br-select>\r\n</div>\r\n", styles: [":host{width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { options: [{
                type: Input
            }], id: [{
                type: Input
            }], label: [{
                type: Input
            }], value: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], labelInline: [{
                type: Input
            }], onChange: [{
                type: Output
            }] } });

class PaginationComponent {
    cdr;
    data = [];
    itemsPerPageOptions = [
        { value: 10, label: '10', selected: true },
        { value: 20, label: '20', selected: false },
        { value: 30, label: '30', selected: false },
    ];
    allPages = 1;
    itemsPerPage = 10;
    allItems = 0;
    pageChange = new EventEmitter();
    itemsPerPageChange = new EventEmitter();
    default = false;
    currentPage = 1;
    displayedData = [];
    pagesArray = [{ value: 1, selected: true }];
    constructor(cdr) {
        this.cdr = cdr;
    }
    ngOnInit() {
        this.updateAllItems();
        this.updatePagination();
        this.updateDisplayedData();
    }
    ngOnChanges(changes) {
        if (changes['data'] || changes['allItems']) {
            this.updateAllItems();
        }
        if (changes['data'] || changes['allPages'] || changes['itemsPerPage'] || changes['allItems']) {
            this.itemsPerPage = Number(this.itemsPerPage) || 10;
            this.initializeDefaults();
            this.updatePagination();
            this.updateDisplayedData();
            this.cdr.detectChanges();
        }
    }
    prevPage() {
        if (this.currentPage > 1) {
            this.currentPage--;
            this.updatePageSelection();
        }
    }
    nextPage() {
        if (this.currentPage < this.allPages) {
            this.currentPage++;
            this.updatePageSelection();
        }
    }
    goToPage(page) {
        if (typeof page === 'number' && page >= 1 && page <= this.allPages) {
            this.currentPage = page;
            this.pageChange.emit(page);
        }
        else if (typeof page.detail[0] === 'number') {
            this.currentPage = +page.detail[0];
            this.pageChange.emit(+page.detail[0]);
        }
        this.updatePageSelection();
    }
    updatePageSelection() {
        this.pageChange.emit(this.currentPage);
        this.pagesArray.forEach(page => {
            page.selected = page.value === this.currentPage;
        });
        this.updateDisplayedData();
    }
    initializeDefaults() {
        if (this.allItems <= 0 && this.data && this.data.length > 0) {
            this.allItems = this.data.length;
            this.default = true;
        }
        if (this.allItems > 0) {
            this.allPages = Math.ceil(this.allItems / this.itemsPerPage);
        }
    }
    updateAllItems() {
        if (this.allItems <= 0 && this.data && this.data.length > 0) {
            this.allItems = this.data.length;
        }
        if (this.allItems < 0) {
            this.allItems = 0;
        }
    }
    changeItemsPerPage(event) {
        this.itemsPerPage = Number(event.detail[0].value);
        this.itemsPerPageChange.emit(this.itemsPerPage);
        this.currentPage = 1;
        this.allPages = Math.ceil(this.allItems / this.itemsPerPage);
        this.updatePagination();
        this.updateDisplayedData();
        this.cdr.detectChanges();
    }
    updatePagination() {
        this.pagesArray = [];
        if (this.allItems <= 0 && this.data && this.data.length > 0) {
            this.allItems = this.data.length;
        }
        this.allPages = Math.ceil(this.allItems / this.itemsPerPage) || 1;
        for (let i = 1; i <= this.allPages; i++) {
            this.pagesArray.push({ value: i, selected: i === this.currentPage });
        }
    }
    updateDisplayedData() {
        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
        const endIndex = startIndex + this.itemsPerPage;
        if (this.default) {
            this.displayedData = this.data.slice(startIndex, endIndex);
        }
        else {
            this.displayedData = [...this.data];
        }
        this.cdr.detectChanges();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, selector: "cfc-pagination", inputs: { data: "data", itemsPerPageOptions: "itemsPerPageOptions", allPages: "allPages", itemsPerPage: "itemsPerPage", allItems: "allItems" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, usesOnChanges: true, ngImport: i0, template: "<span class=\"br-divider sm-block\"></span>\r\n\r\n<nav class=\"br-pagination sm-block\" aria-label=\"pagina\u00E7\u00E3o\" [attr.data-total]=\"allItems\"\r\n  [attr.data-current]=\"currentPage\" [attr.data-per-page]=\"itemsPerPage\">\r\n\r\n  <div class=\"part\">\r\n    <div class=\"pagination-per-page\">\r\n      <p class=\"mx-3 mb-0 d-flex align-items-center\" style=\"font-size: 14px; font-weight: 400;\">\r\n        Exibir\r\n      </p>\r\n      <cfc-select id=\"pagination-per-page\" style=\"min-width: 100px; width: min-content;\" [options]=\"itemsPerPageOptions\"\r\n        [(ngModel)]=\"itemsPerPageOptions\" (onChange)=\"changeItemsPerPage($event)\">\r\n      </cfc-select>\r\n    </div>\r\n\r\n    <span class=\"br-divider d-none d-sm-block mx-3\"></span>\r\n\r\n    <div class=\"pagination-information d-sm-flex\">\r\n      P\u00E1gina {{ currentPage }} de {{ allPages }} ({{ allItems }} itens)\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"part\">\r\n    <div class=\"pagination-per-page\">\r\n      <p class=\"mr-3 mb-0 d-flex align-items-center\" style=\"font-size: 14px; font-weight: 400;\">\r\n        P\u00E1gina\r\n      </p>\r\n      <cfc-select style=\"min-width: 100px; width: min-content;\" ariaLabel=\"Exibir P\u00E1gina\" id=\"go-to-selection\"\r\n        [disabled]=\"allPages === 1\" [value]=\"currentPage\" [options]=\"pagesArray\" (onChange)=\"goToPage($event)\">\r\n      </cfc-select>\r\n      <!-- <div class=\"br-select\" [class.disabled]=\"allPages === 1\">\r\n      <div class=\"br-input\">\r\n        <label for=\"go-to-selection\">P\u00E1gina</label>\r\n        <input\r\n          id=\"go-to-selection\"\r\n          type=\"text\"\r\n          [value]=\"currentPage\"\r\n          [placeholder]=\"currentPage\"\r\n          readonly\r\n        />\r\n        <button\r\n          class=\"br-button\"\r\n          type=\"button\"\r\n          aria-label=\"Exibir lista\"\r\n          tabindex=\"-2\"\r\n          data-trigger=\"data-trigger\"\r\n        >\r\n          <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"br-list\" tabindex=\"-2\">\r\n        <div\r\n          class=\"br-item\"\r\n          tabindex=\"-2\"\r\n          *ngFor=\"let page of pagesArray\"\r\n          (click)=\"goToPage(page.value)\"\r\n        >\r\n          <div class=\"br-radio\">\r\n            <input\r\n              [id]=\"'go-to-' + page.value\"\r\n              type=\"radio\"\r\n              name=\"go-to\"\r\n              [value]=\"page.value\"\r\n              [checked]=\"page.selected\"\r\n            />\r\n            <label [for]=\"'go-to-' + page.value\">{{ page.value }}</label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n    </div>\r\n\r\n    <span class=\"br-divider d-none d-sm-block mx-3\"></span>\r\n\r\n    <div class=\"pagination-arrows ml-auto ml-sm-0 mr-1\">\r\n      <button class=\"br-button circle\" type=\"button\" aria-label=\"Voltar p\u00E1gina\" (click)=\"prevPage()\">\r\n        <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <button class=\"br-button circle\" type=\"button\" aria-label=\"P\u00E1gina seguinte\" (click)=\"nextPage()\">\r\n        <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".br-pagination{display:flex;justify-content:space-between;width:100%}.part{display:flex;align-items:center;padding:10px 20px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "cfc-select", inputs: ["options", "id", "label", "value", "placeholder", "labelInline"], outputs: ["onChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-pagination', template: "<span class=\"br-divider sm-block\"></span>\r\n\r\n<nav class=\"br-pagination sm-block\" aria-label=\"pagina\u00E7\u00E3o\" [attr.data-total]=\"allItems\"\r\n  [attr.data-current]=\"currentPage\" [attr.data-per-page]=\"itemsPerPage\">\r\n\r\n  <div class=\"part\">\r\n    <div class=\"pagination-per-page\">\r\n      <p class=\"mx-3 mb-0 d-flex align-items-center\" style=\"font-size: 14px; font-weight: 400;\">\r\n        Exibir\r\n      </p>\r\n      <cfc-select id=\"pagination-per-page\" style=\"min-width: 100px; width: min-content;\" [options]=\"itemsPerPageOptions\"\r\n        [(ngModel)]=\"itemsPerPageOptions\" (onChange)=\"changeItemsPerPage($event)\">\r\n      </cfc-select>\r\n    </div>\r\n\r\n    <span class=\"br-divider d-none d-sm-block mx-3\"></span>\r\n\r\n    <div class=\"pagination-information d-sm-flex\">\r\n      P\u00E1gina {{ currentPage }} de {{ allPages }} ({{ allItems }} itens)\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"part\">\r\n    <div class=\"pagination-per-page\">\r\n      <p class=\"mr-3 mb-0 d-flex align-items-center\" style=\"font-size: 14px; font-weight: 400;\">\r\n        P\u00E1gina\r\n      </p>\r\n      <cfc-select style=\"min-width: 100px; width: min-content;\" ariaLabel=\"Exibir P\u00E1gina\" id=\"go-to-selection\"\r\n        [disabled]=\"allPages === 1\" [value]=\"currentPage\" [options]=\"pagesArray\" (onChange)=\"goToPage($event)\">\r\n      </cfc-select>\r\n      <!-- <div class=\"br-select\" [class.disabled]=\"allPages === 1\">\r\n      <div class=\"br-input\">\r\n        <label for=\"go-to-selection\">P\u00E1gina</label>\r\n        <input\r\n          id=\"go-to-selection\"\r\n          type=\"text\"\r\n          [value]=\"currentPage\"\r\n          [placeholder]=\"currentPage\"\r\n          readonly\r\n        />\r\n        <button\r\n          class=\"br-button\"\r\n          type=\"button\"\r\n          aria-label=\"Exibir lista\"\r\n          tabindex=\"-2\"\r\n          data-trigger=\"data-trigger\"\r\n        >\r\n          <i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n      <div class=\"br-list\" tabindex=\"-2\">\r\n        <div\r\n          class=\"br-item\"\r\n          tabindex=\"-2\"\r\n          *ngFor=\"let page of pagesArray\"\r\n          (click)=\"goToPage(page.value)\"\r\n        >\r\n          <div class=\"br-radio\">\r\n            <input\r\n              [id]=\"'go-to-' + page.value\"\r\n              type=\"radio\"\r\n              name=\"go-to\"\r\n              [value]=\"page.value\"\r\n              [checked]=\"page.selected\"\r\n            />\r\n            <label [for]=\"'go-to-' + page.value\">{{ page.value }}</label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n    </div>\r\n\r\n    <span class=\"br-divider d-none d-sm-block mx-3\"></span>\r\n\r\n    <div class=\"pagination-arrows ml-auto ml-sm-0 mr-1\">\r\n      <button class=\"br-button circle\" type=\"button\" aria-label=\"Voltar p\u00E1gina\" (click)=\"prevPage()\">\r\n        <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <button class=\"br-button circle\" type=\"button\" aria-label=\"P\u00E1gina seguinte\" (click)=\"nextPage()\">\r\n        <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".br-pagination{display:flex;justify-content:space-between;width:100%}.part{display:flex;align-items:center;padding:10px 20px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
                type: Input
            }], itemsPerPageOptions: [{
                type: Input
            }], allPages: [{
                type: Input
            }], itemsPerPage: [{
                type: Input
            }], allItems: [{
                type: Input
            }], pageChange: [{
                type: Output
            }], itemsPerPageChange: [{
                type: Output
            }] } });

class RadioComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioComponent, selector: "cfc-radio", ngImport: i0, template: "<br-radio label=\"raio\"/>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-radio', template: "<br-radio label=\"raio\"/>\r\n" }]
        }] });

class SkiplinkComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkiplinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkiplinkComponent, selector: "cfc-skiplink", ngImport: i0, template: "<br-skiplink>skiplink</br-skiplink>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkiplinkComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-skiplink', template: "<br-skiplink>skiplink</br-skiplink>\r\n" }]
        }] });

class SliderComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SliderComponent, selector: "cfc-slider", ngImport: i0, template: "<br-slider label=\"slider\" min=\"0\" max=\"100\"> </br-slider>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-slider', template: "<br-slider label=\"slider\" min=\"0\" max=\"100\"> </br-slider>\r\n" }]
        }] });

class SwitchComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SwitchComponent, selector: "cfc-switch", ngImport: i0, template: "<br-switch label=\"switch\" />\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-switch', template: "<br-switch label=\"switch\" />\r\n" }]
        }] });

class TabComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabComponent, selector: "cfc-tab", ngImport: i0, template: "<br-tab>\r\n  <br-tab-item>op\u00E7\u00E3o 1</br-tab-item>\r\n  <br-tab-item>op\u00E7\u00E3o 2</br-tab-item>\r\n  <br-tab-item>op\u00E7\u00E3o 3</br-tab-item>\r\n</br-tab>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-tab', template: "<br-tab>\r\n  <br-tab-item>op\u00E7\u00E3o 1</br-tab-item>\r\n  <br-tab-item>op\u00E7\u00E3o 2</br-tab-item>\r\n  <br-tab-item>op\u00E7\u00E3o 3</br-tab-item>\r\n</br-tab>\r\n" }]
        }] });

class TableComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "cfc-table", ngImport: i0, template: "<br-table>\r\n  <br-table-header>tabela</br-table-header>\r\n</br-table>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-table', template: "<br-table>\r\n  <br-table-header>tabela</br-table-header>\r\n</br-table>\r\n" }]
        }] });

class TagComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TagComponent, selector: "cfc-tag", ngImport: i0, template: "<br-tag>tag</br-tag>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-tag', template: "<br-tag>tag</br-tag>\r\n" }]
        }] });

var TooltipPlace;
(function (TooltipPlace) {
    TooltipPlace["top"] = "top";
    TooltipPlace["right"] = "right";
    TooltipPlace["bottom"] = "bottom";
    TooltipPlace["left"] = "left";
})(TooltipPlace || (TooltipPlace = {}));

var CheckboxOptionState;
(function (CheckboxOptionState) {
    CheckboxOptionState["default"] = "default";
    CheckboxOptionState["disabled"] = "disabled";
    CheckboxOptionState["invalid"] = "invalid";
    CheckboxOptionState["valid"] = "valid";
})(CheckboxOptionState || (CheckboxOptionState = {}));

var CheckboxOptionType;
(function (CheckboxOptionType) {
    CheckboxOptionType["withRightLabel"] = "withRightLabel";
    CheckboxOptionType["withAboveLabel"] = "withAboveLabel";
    CheckboxOptionType["withLeftLabel"] = "withLeftLabel";
    CheckboxOptionType["withBelowLabel"] = "withBelowLabel";
    CheckboxOptionType["withoutLabel"] = "wiyhoutLabel";
})(CheckboxOptionType || (CheckboxOptionType = {}));

var LoadingDensity;
(function (LoadingDensity) {
    LoadingDensity["medium"] = "medium";
    LoadingDensity["small"] = "small";
})(LoadingDensity || (LoadingDensity = {}));

var ItemType;
(function (ItemType) {
    ItemType["default"] = "default";
    ItemType["button"] = "button";
    ItemType["link"] = "link";
})(ItemType || (ItemType = {}));

var IllustrationType;
(function (IllustrationType) {
    IllustrationType["externalUrl"] = "externalUrl";
    IllustrationType["requirementNotFound"] = "requirementNotFound";
})(IllustrationType || (IllustrationType = {}));

class CheckboxOptionComponent {
    type = CheckboxOptionType.withRightLabel;
    state = CheckboxOptionState.default;
    option;
    checked = false;
    checkedChange = new EventEmitter();
    checkboxOptionStates = CheckboxOptionState;
    checkboxOptionTypes = CheckboxOptionType;
    // get layout(): string {
    //   switch (this.type) {
    //     case this.checkboxOptionTypes.withRightLabel:
    //       return 'column';
    //     case this.checkboxOptionTypes.withLeftLabel:
    //       return 'row-reverse';
    //     case this.checkboxOptionTypes.withBelowLabel:
    //       return 'column';
    //     default:
    //       return 'column-reverse';
    //   }
    // }
    onCheckboxChange(event) {
        const target = event.target;
        this.checked = target.checked;
        this.checkedChange.emit(this.checked);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxOptionComponent, selector: "cfc-checkbox-option", inputs: { type: "type", state: "state", option: "option", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div\r\n  class=\"br-checkbox\"\r\n  [ngClass]=\"state\">\r\n  <input\r\n    type=\"checkbox\"\r\n    [id]=\"option.name\"\r\n    [name]=\"option.name\"\r\n    [ariaLabel]=\"option.value\"\r\n    [checked]=\"checked\"\r\n    [disabled]=\"state === checkboxOptionStates.disabled\"\r\n    (change)=\"onCheckboxChange($event)\"\r\n  />\r\n  <label\r\n    *ngIf=\"type !== checkboxOptionTypes.withoutLabel\"\r\n    [for]=\"option.name\">\r\n    {{ option.name }}\r\n  </label>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-checkbox-option', template: "<div\r\n  class=\"br-checkbox\"\r\n  [ngClass]=\"state\">\r\n  <input\r\n    type=\"checkbox\"\r\n    [id]=\"option.name\"\r\n    [name]=\"option.name\"\r\n    [ariaLabel]=\"option.value\"\r\n    [checked]=\"checked\"\r\n    [disabled]=\"state === checkboxOptionStates.disabled\"\r\n    (change)=\"onCheckboxChange($event)\"\r\n  />\r\n  <label\r\n    *ngIf=\"type !== checkboxOptionTypes.withoutLabel\"\r\n    [for]=\"option.name\">\r\n    {{ option.name }}\r\n  </label>\r\n</div>\r\n" }]
        }], propDecorators: { type: [{
                type: Input
            }], state: [{
                type: Input
            }], option: [{
                type: Input
            }], checked: [{
                type: Input
            }], checkedChange: [{
                type: Output
            }] } });

// import { Collapse } from 'bootstrap'; // Import the Collapse class from Bootstrap
class CollapseComponent {
    collapseDiv;
    ngOnInit() {
        const triggers = this.collapseDiv.nativeElement.querySelectorAll('[data-bs-toggle="collapse"]');
        triggers.forEach((trigger) => {
            const collapseElement = trigger.nextElementSibling;
            // const collapse = new Collapse(collapseElement, {
            //   toggle: true, // Enable toggling behavior
            // });
        });
    }
    open() {
        // const collapses = this.collapseDiv.nativeElement.querySelectorAll('.collapse');
        // collapses.forEach((collapse: HTMLElement) => {
        //   const collapseInstance = Collapse.getInstance(collapse);
        //   if (collapseInstance) {
        //     collapseInstance.show();
        //   }
        // });
    }
    close() {
        // const collapses = this.collapseDiv.nativeElement.querySelectorAll('.collapse');
        // collapses.forEach((collapse: HTMLElement) => {
        //   const collapseInstance = Collapse.getInstance(collapse);
        //   if (collapseInstance) {
        //     collapseInstance.hide();
        //   }
        // });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CollapseComponent, selector: "cfc-collapse", viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapseDiv"], descendants: true, static: true }], ngImport: i0, template: "\r\n<div class=\"collapse-example\">\r\n  <div class=\"br-list\" role=\"list\" data-sub=\"data-sub\">\r\n    <div class=\"br-item\" role=\"listitem\" tabindex=\"0\" data-toggle=\"collapse\" data-target=\"c-l1\">\r\n      <div class=\"content\">\r\n        <div class=\"flex-fill\">R\u00D3TULO 01</div><i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"br-list\" id=\"c-l1\" role=\"list\" hidden=\"hidden\" data-sub=\"data-sub\">\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n    </div>\r\n    <div class=\"br-item\" role=\"listitem\" tabindex=\"0\" data-toggle=\"collapse\" data-target=\"c-l2\">\r\n      <div class=\"content\">\r\n        <div class=\"flex-fill\">R\u00D3TULO 02</div><i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"br-list\" id=\"c-l2\" role=\"list\" hidden=\"hidden\" data-sub=\"data-sub\">\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n    </div>\r\n    <div class=\"br-item\" role=\"listitem\" tabindex=\"0\" data-toggle=\"collapse\" data-target=\"c-l3\">\r\n      <div class=\"content\">\r\n        <div class=\"flex-fill\">R\u00D3TULO 03</div><i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"br-list\" id=\"c-l3\" role=\"list\" hidden=\"hidden\" data-sub=\"data-sub\">\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapseComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-collapse', template: "\r\n<div class=\"collapse-example\">\r\n  <div class=\"br-list\" role=\"list\" data-sub=\"data-sub\">\r\n    <div class=\"br-item\" role=\"listitem\" tabindex=\"0\" data-toggle=\"collapse\" data-target=\"c-l1\">\r\n      <div class=\"content\">\r\n        <div class=\"flex-fill\">R\u00D3TULO 01</div><i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"br-list\" id=\"c-l1\" role=\"list\" hidden=\"hidden\" data-sub=\"data-sub\">\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n    </div>\r\n    <div class=\"br-item\" role=\"listitem\" tabindex=\"0\" data-toggle=\"collapse\" data-target=\"c-l2\">\r\n      <div class=\"content\">\r\n        <div class=\"flex-fill\">R\u00D3TULO 02</div><i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"br-list\" id=\"c-l2\" role=\"list\" hidden=\"hidden\" data-sub=\"data-sub\">\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n    </div>\r\n    <div class=\"br-item\" role=\"listitem\" tabindex=\"0\" data-toggle=\"collapse\" data-target=\"c-l3\">\r\n      <div class=\"content\">\r\n        <div class=\"flex-fill\">R\u00D3TULO 03</div><i class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"br-list\" id=\"c-l3\" role=\"list\" hidden=\"hidden\" data-sub=\"data-sub\">\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n      <div class=\"br-item\" role=\"listitem\">\r\n        <div class=\"row align-items-center\">\r\n          <div class=\"col-auto\"><i class=\"fas fa-heartbeat\" aria-hidden=\"true\"></i>\r\n          </div>\r\n          <div class=\"col\">Sub-item</div>\r\n        </div>\r\n      </div><span class=\"br-divider\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { collapseDiv: [{
                type: ViewChild,
                args: ['collapseDiv', { static: true }]
            }] } });

class ItemComponent {
    type = ItemType.default;
    disabled = false;
    selected = false;
    hasDivider = true;
    url;
    clickEvent = new EventEmitter();
    types = ItemType;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ItemComponent, selector: "cfc-item", inputs: { type: "type", disabled: "disabled", selected: "selected", hasDivider: "hasDivider", url: "url" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  <div\r\n    *ngSwitchCase=\"types.default\"\r\n    class=\"br-item\"\r\n    data-toggle=\"selection\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.selected]=\"selected\">\r\n    <ng-content select=\"[default]\"></ng-content>\r\n  </div>\r\n\r\n  <button\r\n    *ngSwitchCase=\"types.button\"\r\n    class=\"br-item\"\r\n    type=\"button\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.selected]=\"selected\"\r\n    (click)=\"clickEvent.emit()\">\r\n    <ng-content select=\"[button]\"></ng-content>\r\n  </button>\r\n\r\n  <a\r\n    *ngSwitchCase=\"types.link\"\r\n    class=\"br-item\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.selected]=\"selected\"\r\n    [href]=\"url\">\r\n    <ng-content select=\"[link]\"></ng-content>\r\n  </a>\r\n</ng-container>\r\n\r\n<span *ngIf=\"hasDivider\" class=\"br-divider\"></span>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-item', template: "<ng-container [ngSwitch]=\"type\">\r\n  <div\r\n    *ngSwitchCase=\"types.default\"\r\n    class=\"br-item\"\r\n    data-toggle=\"selection\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.selected]=\"selected\">\r\n    <ng-content select=\"[default]\"></ng-content>\r\n  </div>\r\n\r\n  <button\r\n    *ngSwitchCase=\"types.button\"\r\n    class=\"br-item\"\r\n    type=\"button\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.selected]=\"selected\"\r\n    (click)=\"clickEvent.emit()\">\r\n    <ng-content select=\"[button]\"></ng-content>\r\n  </button>\r\n\r\n  <a\r\n    *ngSwitchCase=\"types.link\"\r\n    class=\"br-item\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.selected]=\"selected\"\r\n    [href]=\"url\">\r\n    <ng-content select=\"[link]\"></ng-content>\r\n  </a>\r\n</ng-container>\r\n\r\n<span *ngIf=\"hasDivider\" class=\"br-divider\"></span>\r\n" }]
        }], propDecorators: { type: [{
                type: Input
            }], disabled: [{
                type: Input
            }], selected: [{
                type: Input
            }], hasDivider: [{
                type: Input
            }], url: [{
                type: Input
            }], clickEvent: [{
                type: Output
            }] } });

class LoadingService {
    isLoading$ = new BehaviorSubject({ isLoading: false, isFullScreen: false });
    loadingStack = [];
    show(isFullScreen = false) {
        this.loadingStack.push({ isLoading: true, isFullScreen });
        this.updateLoadingState();
    }
    hide() {
        this.loadingStack.pop();
        this.updateLoadingState();
    }
    updateLoadingState() {
        const currentState = this.loadingStack[this.loadingStack.length - 1] || { isLoading: false, isFullScreen: false };
        this.isLoading$.next(currentState);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class LoadingComponent {
    loadingService;
    density = LoadingDensity.medium;
    progress;
    minValue = 0;
    maxValue = 100;
    isFullScreen = true;
    loadingSubscription;
    constructor(loadingService) {
        this.loadingService = loadingService;
    }
    ngOnInit() {
        // this.loadingSubscription = this.loadingService.isLoading$.subscribe(
        //   ({ isLoading, isFullScreen }) => {
        //     this.isFullScreen = isFullScreen;
        //     if (isLoading) {
        //     } else {
        //     }
        //   }
        // );
    }
    ngOnDestroy() {
        // this.loadingSubscription?.unsubscribe();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingComponent, deps: [{ token: LoadingService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoadingComponent, selector: "cfc-loading", inputs: { density: "density", progress: "progress", minValue: "minValue", maxValue: "maxValue" }, ngImport: i0, template: "<cfc-scrim [isVisible]=\"isFullScreen\"></cfc-scrim>\r\n\r\n<div\r\n  class=\"br-loading\"\r\n  role=\"progressbar\"\r\n  [ariaLabel]=\"progress ? 'Carregando em ' + progress + '%' : 'Carregando...'\"\r\n  [attr.data-progress]=\"progress\"\r\n  [attr.aria-valuemin]=\"progress ? minValue : undefined\"\r\n  [attr.aria-valuemax]=\"progress ? maxValue : undefined\"\r\n  [ngClass]=\"density\">\r\n  <ng-container *ngIf=\"progress\">\r\n    <div class=\"br-loading-mask full\">\r\n      <div class=\"br-loading-fill\"></div>\r\n    </div>\r\n    <div class=\"br-loading-mask\">\r\n      <div class=\"br-loading-fill\"></div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".full-screen-overlay{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background:#00000073;-webkit-backdrop-filter:blur(.1px);backdrop-filter:blur(.1px);z-index:1000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: ScrimComponent, selector: "cfc-scrim", inputs: ["isVisible", "isClosable"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-loading', template: "<cfc-scrim [isVisible]=\"isFullScreen\"></cfc-scrim>\r\n\r\n<div\r\n  class=\"br-loading\"\r\n  role=\"progressbar\"\r\n  [ariaLabel]=\"progress ? 'Carregando em ' + progress + '%' : 'Carregando...'\"\r\n  [attr.data-progress]=\"progress\"\r\n  [attr.aria-valuemin]=\"progress ? minValue : undefined\"\r\n  [attr.aria-valuemax]=\"progress ? maxValue : undefined\"\r\n  [ngClass]=\"density\">\r\n  <ng-container *ngIf=\"progress\">\r\n    <div class=\"br-loading-mask full\">\r\n      <div class=\"br-loading-fill\"></div>\r\n    </div>\r\n    <div class=\"br-loading-mask\">\r\n      <div class=\"br-loading-fill\"></div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".full-screen-overlay{position:fixed;top:0;left:0;width:100dvw;height:100dvh;background:#00000073;-webkit-backdrop-filter:blur(.1px);backdrop-filter:blur(.1px);z-index:1000}\n"] }]
        }], ctorParameters: () => [{ type: LoadingService }], propDecorators: { density: [{
                type: Input
            }], progress: [{
                type: Input
            }], minValue: [{
                type: Input
            }], maxValue: [{
                type: Input
            }] } });

class TextareaComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextareaComponent, selector: "cfc-textarea", ngImport: i0, template: "<br-textarea>\u00E1rea de texto</br-textarea>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-textarea', template: "<br-textarea>\u00E1rea de texto</br-textarea>\r\n" }]
        }] });

class TooltipComponent {
    el;
    renderer;
    tooltipText = '';
    type = 'info';
    isVisible = false;
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
    }
    onMouseEnter() {
        this.isVisible = true;
    }
    onMouseLeave() {
        this.isVisible = false;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TooltipComponent, selector: "cfc-tooltip", inputs: { tooltipText: "tooltipText", type: "type" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<span class=\"tooltip-container\">\r\n    <ng-content></ng-content>\r\n    <div class=\"tooltip\" [class]=\"type\" *ngIf=\"isVisible\">\r\n        <div class=\"tooltip-arrow\"></div>\r\n\r\n        {{ tooltipText }}\r\n    </div>\r\n</span>", styles: [".tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:relative;display:inline-block;z-index:1000}.tooltip{position:absolute;padding:10px;border-radius:5px;bottom:100%;left:50%;transform:translate(-50%);white-space:nowrap;opacity:1;transition:opacity .3s;color:#fff;margin-bottom:8px}.tooltip-arrow{position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid;bottom:-8px;left:50%;transform:translate(-50%);margin-left:10px}.tooltip.success{background-color:#168821}.tooltip.success .tooltip-arrow{border-top-color:#168821}.tooltip.error{background-color:#e52207}.tooltip.error .tooltip-arrow{border-top-color:#e52207}.tooltip.info{background-color:#1351b4}.tooltip.info .tooltip-arrow{border-top-color:#1351b4}.tooltip.warning{background-color:#ffcd07;color:#333}.tooltip.warning .tooltip-arrow{border-top-color:#ffcd07}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-tooltip', template: "<span class=\"tooltip-container\">\r\n    <ng-content></ng-content>\r\n    <div class=\"tooltip\" [class]=\"type\" *ngIf=\"isVisible\">\r\n        <div class=\"tooltip-arrow\"></div>\r\n\r\n        {{ tooltipText }}\r\n    </div>\r\n</span>", styles: [".tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:relative;display:inline-block;z-index:1000}.tooltip{position:absolute;padding:10px;border-radius:5px;bottom:100%;left:50%;transform:translate(-50%);white-space:nowrap;opacity:1;transition:opacity .3s;color:#fff;margin-bottom:8px}.tooltip-arrow{position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid;bottom:-8px;left:50%;transform:translate(-50%);margin-left:10px}.tooltip.success{background-color:#168821}.tooltip.success .tooltip-arrow{border-top-color:#168821}.tooltip.error{background-color:#e52207}.tooltip.error .tooltip-arrow{border-top-color:#e52207}.tooltip.info{background-color:#1351b4}.tooltip.info .tooltip-arrow{border-top-color:#1351b4}.tooltip.warning{background-color:#ffcd07;color:#333}.tooltip.warning .tooltip-arrow{border-top-color:#ffcd07}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipText: [{
                type: Input
            }], type: [{
                type: Input
            }], onMouseEnter: [{
                type: HostListener,
                args: ['mouseenter']
            }], onMouseLeave: [{
                type: HostListener,
                args: ['mouseleave']
            }] } });

class UploadComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UploadComponent, selector: "cfc-upload", ngImport: i0, template: "<br-upload>upload</br-upload>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-upload', template: "<br-upload>upload</br-upload>\r\n" }]
        }] });

class WizardComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WizardComponent, selector: "cfc-wizard", ngImport: i0, template: "<br-wizard>\r\n  <br-step>passo 1</br-step>\r\n  <br-step>passo 2</br-step>\r\n  <br-step>passo 3</br-step>\r\n</br-wizard>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WizardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-wizard', template: "<br-wizard>\r\n  <br-step>passo 1</br-step>\r\n  <br-step>passo 2</br-step>\r\n  <br-step>passo 3</br-step>\r\n</br-wizard>\r\n" }]
        }] });

class TestComponentComponent {
    // inputs and outputs
    selectedComponent = {
        id: 0,
        name: '',
        clickEventName: 'setComponent',
        isAlready: false
    };
    // cfc-avatar
    avatarType = AvatarType.icon;
    avatarName = 'avatar';
    avatarDensity = AvatarDensity.medium;
    avatarImageUrl = 'https://picsum.photos/id/823/400';
    avatarTypes = Object.values(AvatarType);
    avatarDensities = Object.values(AvatarDensity);
    avatarTooltipPlaces = Object.values(TooltipPlace);
    // cfc-breadcrumb
    breadcrumbLabel = 'breadcrumb';
    breadcrumbLinks = [
        {
            label: 'Página Inicial',
            url: '/',
            target: '_blank',
            home: true
        },
        {
            label: 'Página Ancestral 01',
            url: '#',
            target: '_blank'
        },
        {
            label: 'Página Ancestral 02',
            url: '#',
            target: '_blank'
        },
        {
            label: 'Página Atual',
            active: true
        }
    ];
    breadcrumbLinksString = JSON.stringify(this.breadcrumbLinks, null, 2);
    updateBreadCrumbLinks() {
        this.breadcrumbLinks = JSON.parse(this.breadcrumbLinksString);
    }
    // cfc-button
    buttonLabel = 'button';
    buttonType = ButtonType.tertiary;
    buttonSubmit = false;
    buttonCircle = false;
    buttonDensity = ButtonDensity.middle;
    buttonDisabled = false;
    buttonBlock = false;
    buttonIcon = 'clock';
    buttonActive = false;
    buttonInverted = false;
    buttonLoading = false;
    buttonTypes = Object.values(ButtonType);
    buttonDensities = Object.values(ButtonDensity);
    buttonClickEvent = () => alert('button event dispared!');
    // cfc-card
    cardDisabled = false;
    cardHover = false;
    // cfc-checkbox-option
    checkboxOptionState = CheckboxOptionState.default;
    checkboxOptionType = CheckboxOptionType.withRightLabel;
    checkboxOptionChecked = false;
    checkboxOptionOption = {
        name: 'OPÇÃO1',
        value: 'opção 1',
        checked: false
    };
    checkboxOptionStates = Object.values(CheckboxOptionState);
    checkboxOptionTypes = Object.values(CheckboxOptionType);
    // cfc-divider
    dividerMode = DividerMode.line;
    dividerType = DividerType.primary;
    dividerAxis = DividerAxis.horizontal;
    dividerDensity = DividerDensity.small;
    dividerModes = Object.values(DividerMode);
    dividerTypes = Object.values(DividerType);
    dividerAxises = Object.values(DividerAxis);
    dividerDensities = Object.values(DividerDensity);
    // cfc-footer
    footerProjectName = 'EPC';
    footerProjectVersion = '1.0.0';
    // cfc-header
    headerTitle = 'Testando Header';
    headerDescription = 'Esse é apenas um teste';
    headerUserName = 'Ana Freitas';
    headerHasMenu = false;
    headerHasTimer = true;
    headerHasBookIcon = true;
    headerTimeOut = 30;
    headerTimeCritical = 20;
    headerLogoViewMode = LogoViewMode.default;
    headerViewMode = HeaderViewMode.default;
    headerViewModes = Object.values(HeaderViewMode);
    headerLogoViewModes = Object.values(LogoViewMode);
    headerClickEvent = () => alert('logo is clicked');
    // cfc-icon
    iconName = 'home';
    iconFamilyName = 'fas';
    iconClassName = '';
    iconSize = '20px';
    iconColor = 'blue';
    // cfc-input
    inputLabel = 'input-label';
    inputType = 'text';
    inputPlaceholder = 'placeholder';
    inputState = InputState.info;
    inputDensity = InputDensity.medium;
    inputDisabled = false;
    inputButtonIcon = 'clock';
    inputIsPassword = false;
    inputLabelInline = false;
    inputIcon = 'user';
    inputValue = 'value';
    inputStates = Object.values(InputState);
    inputDensities = Object.values(InputDensity);
    inputOnChange = () => alert('input value is changed');
    inputOnInput = () => alert('input value is submited');
    inputOnIconClicked = () => alert('input icon os clicked');
    inputOnIconSubmited = () => alert('input icon submited the value');
    // cfc-item
    itemType = ItemType.default;
    itemDisabled = false;
    itemSelected = false;
    itemHasDivider = true;
    itemContent = 'Item 1';
    itemUrl = 'https://www.google.com';
    itemTypes = Object.values(ItemType);
    // cfc-loading
    loadingDensity = LoadingDensity.medium;
    loadingProgress;
    loadingDensities = Object.values(LoadingDensity);
    // cfc-logo
    logoWidth = 100;
    logoIsClickable = false;
    logoViewMode = LogoViewMode.default;
    logoViewModes = Object.values(LogoViewMode);
    logoClickEvent = () => alert('a logo está clicável');
    // cfc-menu
    menuItems = [
        {
            id: 1,
            iconName: 'folder',
            name: 'Capacitadora',
            list: [
                {
                    iconName: 'laptop',
                    name: 'Gerenciamento',
                    url: 'capacitadora/gerenciamento',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'comment',
                    name: 'Homologação',
                    url: 'capacitadora/homologacao',
                    clickEventlabel: 'navigate',
                },
            ],
        },
        {
            id: 2,
            iconName: 'folder',
            name: 'Minhas Atividades',
            list: [
                {
                    iconName: 'list',
                    name: 'Curso',
                    url: 'minhas-atividades/curso',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Evento',
                    url: 'minhas-atividades/evento',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Docência e Orientação',
                    url: 'minhas-atividades/docencia',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Participação em bancas',
                    url: 'minhas-atividades/bancas',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Comissão',
                    url: 'minhas-atividades/comissao',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Curso Exterior',
                    url: 'minhas-atividades/curso-exterior',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Produção Intelectual',
                    url: 'minhas-atividades/producao-intelectual',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'list',
                    name: 'Pós, Grad. e Extensão',
                    url: 'minhas-atividades/pos-graduacao',
                    clickEventlabel: 'navigate',
                },
            ],
        },
        {
            id: 3,
            iconName: 'folder',
            name: 'Homologacao',
            list: [
                {
                    iconName: 'clone',
                    name: 'Curso',
                    url: 'homologacao/curso',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Evento',
                    url: 'homologacao/evento',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Docência e Orientação',
                    url: 'homologacao/docencia',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Participacao em bancas',
                    url: 'homologacao/banca',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Comissão',
                    url: 'homologacao/comissao',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Curso Exterior',
                    url: 'homologacao/exterior',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Produção Intelectual',
                    url: 'homologacao/producao-intelectual',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'clone',
                    name: 'Pós, Grad. e Extensão',
                    url: 'homologacao/pos-graduacao',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'book',
                    name: 'Câmara Plenária',
                    url: 'homologacao/camara-plenaria',
                    clickEventlabel: 'navigate',
                },
            ],
        },
        {
            id: 4,
            iconName: 'folder',
            name: 'Cadastros',
            list: [
                {
                    iconName: 'user-plus',
                    name: 'Abrangência',
                    url: 'cadastro/abrangencia',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'calendar-check',
                    name: 'Área',
                    url: 'cadastro/area',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'book',
                    name: 'Área Temática',
                    url: 'cadastro/area-tematica',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'calendar-check',
                    name: 'Critério de Avaliação',
                    url: 'cadastro/criterio-avaliacao',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'calendar-check',
                    name: 'Formação Acadêmica',
                    url: 'cadastro/formacao-academica',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'calendar-check',
                    name: 'Instituição',
                    url: 'cadastro/instituicao',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'calendar-check',
                    name: 'Instrutor',
                    url: 'cadastro/instrutor',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'bars',
                    name: 'Modalidade',
                    url: 'cadastro/modalidade',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'briefcase',
                    name: 'Público Alvo',
                    url: 'cadastro/publico-alvo',
                    clickEventlabel: 'navigate',
                },
            ],
        },
        {
            id: 5,
            iconName: 'folder',
            name: 'Prestação de Contas',
            list: [
                {
                    iconName: 'wallet',
                    name: 'Rel. Atividades',
                    url: 'prestacao/atividades',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Profissionais',
                    url: 'prestacao/profissionais',
                    clickEventlabel: 'navigate',
                },
                // {
                //   iconName: 'wallet',
                //   name: 'Rel. Profissionais 2017',
                //   url: '#',
                //   clickEventlabel: 'navigate',
                // },
                {
                    iconName: 'wallet',
                    name: 'Rel. Atividades Físico',
                    url: 'prestacao/atividades-fisico',
                    clickEventlabel: 'navigate',
                },
            ],
        },
        {
            id: 6,
            iconName: 'folder',
            name: 'Relatório Gerencial',
            list: [
                {
                    iconName: 'wallet',
                    name: 'Rel. Prestação de Conta',
                    url: 'relatorio/prestacao-conta',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Atividades Julgadas',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Atividades por Atas',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Prof. CNAI e CNPC',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Part. por Curso',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Turma por Curso',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Curso por Capac.',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Part. por Evento',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Evento por Cap',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Edição de Evento',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'wallet',
                    name: 'Rel. Edição de Evento',
                    url: '#',
                    clickEventlabel: 'navigate',
                },
                {
                    iconName: 'folder',
                    name: 'Relatório de Gestor',
                    list: [
                        {
                            iconName: 'wallet',
                            name: 'Ativ. Aguard. Análise',
                            url: '#',
                            clickEventlabel: 'navigate',
                        },
                        {
                            iconName: 'wallet',
                            name: 'Ativ. em Análise',
                            url: '#',
                            clickEventlabel: 'navigate',
                        },
                        {
                            iconName: 'wallet',
                            name: 'Ativ. Julg. Membro',
                            url: '#',
                            clickEventlabel: 'navigate',
                        },
                    ],
                },
            ],
        },
    ];
    // cfc-message
    messageType = MessageType.feedback;
    messageState = MessageState.warning;
    messageMessage = 'Mensagem de alerta.';
    messageDescription = 'Descrição da mensagem de alerta';
    messageTypes = Object.values(MessageType);
    messageStates = Object.values(MessageState);
    // cfc-select
    selectLabel = 'Select Label';
    selectPlaceholder = 'selecione o item';
    selectFeedbackMessage = 'feedback auxiliar de controle';
    selectFeedbackState = MessageState.warning;
    // cfc-sign-in
    signInLabel = 'cfc label';
    signInType = SignInType.primary;
    signInDensity = SignInDensity.middle;
    signInMode = SignInMode.internal;
    signInDisabled = false;
    signInBlock = false;
    signInCircle = false;
    signInExternalLabel = 'gov.br';
    signInExternalImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg';
    signInTypes = Object.values(SignInType);
    signInDensities = Object.values(SignInDensity);
    signInModes = Object.values(SignInMode);
    // cfc-template-error
    illustrations = IllustrationType;
    // cfc-timer
    timerType = TimerType.primary;
    timer = 120;
    timerCritical = 115;
    timerTypes = Object.values(TimerType);
    onTimeEvent = () => {
        this.timer--;
    };
    onTimeOutEvent = () => {
        alert('encerrou a contagem regressiva');
        window.location.reload();
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestComponentComponent, selector: "cfc-test-component", inputs: { selectedComponent: "selectedComponent" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedComponent.name; else noComponentSelected\">\r\n  <div\r\n    fxFlex=\"grow\"\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"stretch center\"\r\n    fxLayoutGap=\"1rem\">\r\n\r\n    <h2 style=\"font-weight: 700;\">cfc-{{ selectedComponent.name }}</h2>\r\n\r\n    <cfc-avatar\r\n      *ngIf=\"selectedComponent.name === 'avatar'\"\r\n      [type]=\"avatarType\"\r\n      [name]=\"avatarName\"\r\n      [density]=\"avatarDensity\"\r\n      [imageUrl]=\"avatarImageUrl\"\r\n    ></cfc-avatar>\r\n\r\n    <cfc-breadcrumb\r\n      *ngIf=\"selectedComponent.name === 'breadcrumb'\"\r\n      [label]=\"breadcrumbLabel\"\r\n    ></cfc-breadcrumb>\r\n\r\n    <cfc-button\r\n      *ngIf=\"selectedComponent.name === 'button'\"\r\n      [label]=\"buttonLabel\"\r\n      [type]=\"buttonType\"\r\n      [submit]=\"buttonSubmit\"\r\n      [circle]=\"buttonCircle\"\r\n      [density]=\"buttonDensity\"\r\n      [disabled]=\"buttonDisabled\"\r\n      [block]=\"buttonBlock\"\r\n      [icon]=\"buttonIcon\"\r\n      [active]=\"buttonActive\"\r\n      [inverted]=\"buttonInverted\"\r\n      [loading]=\"buttonLoading\"\r\n      (click)=\"buttonClickEvent()\"\r\n    ></cfc-button>\r\n\r\n    <cfc-card\r\n      *ngIf=\"selectedComponent.name === 'card'\"\r\n      [disabled]=\"cardDisabled\"\r\n      [hover]=\"cardHover\"\r\n    ></cfc-card>\r\n\r\n    <cfc-carousel\r\n      *ngIf=\"selectedComponent.name === 'carousel'\"\r\n    ></cfc-carousel>\r\n\r\n    <cfc-checkboxes\r\n      *ngIf=\"selectedComponent.name === 'checkboxes'\"\r\n    ></cfc-checkboxes>\r\n\r\n    <cfc-checkbox-option\r\n      *ngIf=\"selectedComponent.name === 'checkbox-option'\"\r\n      [state]=\"checkboxOptionState\"\r\n      [type]=\"checkboxOptionType\"\r\n      [option]=\"checkboxOptionOption\"\r\n      [(checked)]=\"checkboxOptionChecked\"\r\n    ></cfc-checkbox-option>\r\n\r\n    <cfc-collapse\r\n      *ngIf=\"selectedComponent.name === 'collapse'\"\r\n    ></cfc-collapse>\r\n\r\n    <cfc-cookie-bar\r\n      *ngIf=\"selectedComponent.name === 'cookie-bar'\"\r\n    ></cfc-cookie-bar>\r\n\r\n    <cfc-datetimer-picker\r\n      *ngIf=\"selectedComponent.name === 'datetimer-picker'\"\r\n    ></cfc-datetimer-picker>\r\n\r\n    <div *ngIf=\"selectedComponent.name === 'divider'\"\r\n      [fxLayout]=\"dividerAxis === 'horizontal' ? 'column' : 'row'\">\r\n      <div>Uma coisa</div>\r\n      <cfc-divider\r\n        [mode]=\"dividerMode\"\r\n        [type]=\"dividerType\"\r\n        [axis]=\"dividerAxis\"\r\n        [density]=\"dividerDensity\"\r\n      ></cfc-divider>\r\n      <div>Ou outra</div>\r\n    </div>\r\n\r\n    <cfc-footer\r\n      *ngIf=\"selectedComponent.name === 'footer'\"\r\n      [projectName]=\"footerProjectName\"\r\n      [projectVersion]=\"footerProjectVersion\"\r\n    ></cfc-footer>\r\n\r\n    <cfc-header\r\n      *ngIf=\"selectedComponent.name === 'header'\"\r\n      [title]=\"headerTitle\"\r\n      [description]=\"headerDescription\"\r\n      [userName]=\"headerUserName\"\r\n      [viewMode]=\"headerViewMode\"\r\n      [hasMenu]=\"headerHasMenu\"\r\n      [hasTimer]=\"headerHasTimer\"\r\n      [hasBookIcon]=\"headerHasBookIcon\"\r\n      [logoViewMode]=\"headerLogoViewMode\"\r\n      [timeLogout]=\"headerTimeOut\"\r\n      [timeCritical]=\"headerTimeCritical\"\r\n      (criticalTimeEvent)=\"headerClickEvent()\"\r\n    ></cfc-header>\r\n\r\n    <cfc-icon\r\n      *ngIf=\"selectedComponent.name === 'icon'\"\r\n      [iconName]=\"iconName\"\r\n      [familyName]=\"iconFamilyName\"\r\n      [className]=\"iconClassName\"\r\n      [size]=\"iconSize\"\r\n      [color]=\"iconColor\"\r\n    ></cfc-icon>\r\n\r\n    <cfc-input\r\n      *ngIf=\"selectedComponent.name === 'input'\"\r\n      [disabled]=\"inputDisabled\"\r\n      [density]=\"inputDensity\"\r\n      [isPassword]=\"inputIsPassword\"\r\n      [label]=\"inputLabel\"\r\n      [type]=\"inputType\"\r\n      [buttonIcon]=\"inputButtonIcon\"\r\n      [placeholder]=\"inputPlaceholder\"\r\n      [labelInline]=\"inputLabelInline\"\r\n      [state]=\"inputState\"\r\n      [icon]=\"inputIcon\"\r\n      (onChange)=\"inputOnChange()\"\r\n      (onInput)=\"inputOnInput()\"\r\n      (onIconClicked)=\"inputOnIconClicked()\"\r\n      (onIconSubmited)=\"inputOnIconSubmited()\"\r\n    ></cfc-input>\r\n\r\n    <cfc-item\r\n      *ngIf=\"selectedComponent.name === 'item'\"\r\n      [type]=\"itemType\"\r\n      [disabled]=\"itemDisabled\"\r\n      [selected]=\"itemSelected\"\r\n      [hasDivider]=\"itemHasDivider\"\r\n      [url]=\"itemUrl\">\r\n      <span default>\r\n        {{ itemContent }}\r\n      </span>\r\n      <span button>\r\n        {{ itemContent }}\r\n      </span>\r\n      <span link>\r\n        {{ itemContent }}\r\n      </span>\r\n    </cfc-item>\r\n\r\n    <cfc-loading\r\n      *ngIf=\"selectedComponent.name === 'loading'\"\r\n      [density]=\"loadingDensity\"\r\n      [progress]=\"loadingProgress\"\r\n    ></cfc-loading>\r\n\r\n    <cfc-list\r\n      *ngIf=\"selectedComponent.name === 'list'\"\r\n      [title]=\"'Minha Lista'\">\r\n      <cfc-list-item>\r\n        Item 1\r\n      </cfc-list-item>\r\n      <cfc-list-item>\r\n        Item 2\r\n      </cfc-list-item>\r\n      <cfc-list-item>\r\n        <strong>Item 3 com conte\u00FAdo personalizado</strong>\r\n      </cfc-list-item>\r\n    </cfc-list>\r\n\r\n    <cfc-logo\r\n      *ngIf=\"selectedComponent.name === 'logo'\"\r\n      [width]=\"logoWidth\"\r\n      [viewMode]=\"logoViewMode\"\r\n      [isClickable]=\"logoIsClickable\"\r\n      (clickEvent)=\"logoClickEvent\"\r\n    ></cfc-logo>\r\n\r\n    <cfc-magic-button\r\n      *ngIf=\"selectedComponent.name === 'magic-button'\"\r\n    ></cfc-magic-button>\r\n\r\n    <cfc-menu\r\n      *ngIf=\"selectedComponent.name === 'menu'\"\r\n      [menuItems]=\"menuItems\"\r\n    ></cfc-menu>\r\n\r\n    <cfc-message\r\n      #message\r\n      [hidden]=\"selectedComponent.name !== 'message'\"\r\n      [type]=\"messageType\"\r\n      [state]=\"messageState\"\r\n      [message]=\"messageMessage\"\r\n      [description]=\"messageDescription\"\r\n    ></cfc-message>\r\n\r\n    <cfc-modal\r\n      *ngIf=\"selectedComponent.name === 'modal'\"\r\n    ></cfc-modal>\r\n\r\n    <cfc-notification\r\n      *ngIf=\"selectedComponent.name === 'notification'\"\r\n    ></cfc-notification>\r\n\r\n    <cfc-notification-panel\r\n      *ngIf=\"selectedComponent.name === 'notification-panel'\"\r\n    ></cfc-notification-panel>\r\n\r\n    <cfc-page-content\r\n      *ngIf=\"selectedComponent.name === 'page-content'\"\r\n    ></cfc-page-content>\r\n\r\n    <cfc-pagination\r\n      *ngIf=\"selectedComponent.name === 'pagination'\"\r\n    ></cfc-pagination>\r\n\r\n    <cfc-radio\r\n      *ngIf=\"selectedComponent.name === 'radio'\"\r\n    ></cfc-radio>\r\n\r\n    <cfc-scrim\r\n      *ngIf=\"selectedComponent.name === 'scrim'\"\r\n    ></cfc-scrim>\r\n\r\n    <cfc-select\r\n      *ngIf=\"selectedComponent.name === 'select'\"\r\n      [placeholder]=\"selectPlaceholder\"\r\n      [label]=\"selectLabel\"\r\n      [feedbackMessage]=\"selectFeedbackMessage\"\r\n      [feedbackState]=\"selectFeedbackState\"\r\n    ></cfc-select>\r\n\r\n    <cfc-sign-in\r\n      *ngIf=\"selectedComponent.name === 'sign-in'\"\r\n      [label]=\"signInLabel\"\r\n      [type]=\"signInType\"\r\n      [density]=\"signInDensity\"\r\n      [mode]=\"signInMode\"\r\n      [disabled]=\"signInDisabled\"\r\n      [block]=\"signInBlock\"\r\n      [circle]=\"signInCircle\"\r\n      [externalImageUrl]=\"signInExternalImageUrl\"\r\n      [externalLabel]=\"signInExternalLabel\"\r\n    ></cfc-sign-in>\r\n\r\n    <cfc-skiplink\r\n      *ngIf=\"selectedComponent.name === 'skiplink'\"\r\n    ></cfc-skiplink>\r\n\r\n    <cfc-slider\r\n      *ngIf=\"selectedComponent.name === 'slider'\"\r\n    ></cfc-slider>\r\n\r\n    <cfc-switch\r\n      *ngIf=\"selectedComponent.name === 'switch'\"\r\n    ></cfc-switch>\r\n\r\n    <cfc-tab\r\n      *ngIf=\"selectedComponent.name === 'tab'\"\r\n    ></cfc-tab>\r\n\r\n    <cfc-table\r\n      *ngIf=\"selectedComponent.name === 'table'\"\r\n    ></cfc-table>\r\n\r\n    <cfc-tag\r\n      *ngIf=\"selectedComponent.name === 'tag'\"\r\n    ></cfc-tag>\r\n\r\n    <cfc-template-error\r\n      *ngIf=\"selectedComponent.name === 'template-error'\"\r\n      illustrationUrl=\"assets/illustrations/error19.png\"\r\n      [principalText]=\"'Lorem Ipsum'\"\r\n      [secondaryText]=\"'Lorem Ipsum'\"\r\n      [suportText]=\"'Lorem Ipsum'\"\r\n    ></cfc-template-error>\r\n\r\n    <cfc-textarea\r\n      *ngIf=\"selectedComponent.name === 'textarea'\"\r\n    ></cfc-textarea>\r\n\r\n    <cfc-timer\r\n      *ngIf=\"selectedComponent.name === 'timer'\"\r\n      [type]=\"timerType\"\r\n      [initialTime]=\"timer\"\r\n      [criticalTime]=\"timerCritical\"\r\n      (timeEvent)=\"onTimeEvent()\"\r\n      (timeOutEvent)=\"onTimeOutEvent()\"\r\n    ></cfc-timer>\r\n\r\n    <cfc-tooltip\r\n      *ngIf=\"selectedComponent.name === 'tooltip'\"\r\n    ></cfc-tooltip>\r\n\r\n    <cfc-upload\r\n      *ngIf=\"selectedComponent.name === 'upload'\"\r\n    ></cfc-upload>\r\n\r\n    <cfc-wizard\r\n      *ngIf=\"selectedComponent.name === 'wizard'\"\r\n    ></cfc-wizard>\r\n\r\n    <div style=\"width: 100%;\">\r\n      <cfc-divider></cfc-divider>\r\n    </div>\r\n\r\n    <form\r\n      fxLayout=\"row\"\r\n      fxLayoutAlign=\"center center\"\r\n      fxLayoutGap=\"0.5rem\">\r\n\r\n      <!-- avatar -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'avatar'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"avatarType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of avatarTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"name\">\r\n                name\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"avatarName\"\r\n                name=\"name\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"avatarDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of avatarDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"imageUrl\">\r\n                imageUrl\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 300px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"avatarImageUrl\"\r\n                name=\"imageUrl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- breadcrumb -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'breadcrumb'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"breadcrumbLabel\"\r\n                name=\"label\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- button -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'button'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"buttonLabel\"\r\n                name=\"label\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"buttonType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of buttonTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"buttonDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of buttonDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"icon\">\r\n                icon\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"buttonIcon\"\r\n                name=\"icon\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"circle\">\r\n                circle\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"circle\"\r\n                [(ngModel)]=\"buttonCircle\"\r\n                name=\"circle\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  circle\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not circle\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"submit\">\r\n                submit\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"submit\"\r\n                [(ngModel)]=\"buttonSubmit\"\r\n                name=\"submit\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  submit\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not submit\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"disabled\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"buttonDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"block\">\r\n                block\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"block\"\r\n                [(ngModel)]=\"buttonBlock\"\r\n                name=\"block\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  block\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not block\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"inverted\">\r\n                inverted\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"inverted\"\r\n                [(ngModel)]=\"buttonInverted\"\r\n                name=\"inverted\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  inverted\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not inverted\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"actived\">\r\n                active\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"active\"\r\n                [(ngModel)]=\"buttonActive\"\r\n                name=\"active\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  actived\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  inactived\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"loading\">\r\n                loading\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"loading\"\r\n                [(ngModel)]=\"buttonLoading\"\r\n                name=\"loading\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  loading\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not loading\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- checkbox-option -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'checkbox-option'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"state\">\r\n                state\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"state\"\r\n                [(ngModel)]=\"checkboxOptionState\"\r\n                name=\"state\">\r\n                <option\r\n                  *ngFor=\"let state of checkboxOptionStates\"\r\n                  [value]=\"state\">\r\n                  {{ state }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <!-- <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"checkboxOptionType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of checkboxOptionTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div> -->\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"option\">\r\n                option\r\n              </label>\r\n              <textarea\r\n                class=\"test-component__input\"\r\n                style=\"height: 90px; white-space: pre-wrap; font-family: monospace;\"\r\n                id=\"option\"\r\n                name=\"option\"\r\n                readonly>\r\n{\r\n  name: {{ checkboxOptionOption.name }},\r\n  value: {{ checkboxOptionOption.value }}\r\n}</textarea>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"checkedChange\">\r\n                checkedChange\r\n              </label>\r\n              <textarea\r\n                class=\"test-component__input\"\r\n                style=\"height: 70px; width: 220px; white-space: pre-wrap; font-family: monospace;\"\r\n                type=\"text\"\r\n                name=\"checkedChange\"\r\n                readonly>\r\n{{ checkboxOptionChecked }}\r\n{{ checkboxOptionOption.value }}{{ !checkboxOptionChecked ? ' n\u00E3o' : '' }} selecionada.</textarea>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- divider -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'divider'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"mode\">\r\n                mode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"mode\"\r\n                [(ngModel)]=\"dividerMode\"\r\n                name=\"mode\">\r\n                <option\r\n                  *ngFor=\"let mode of dividerModes\"\r\n                  [value]=\"mode\">\r\n                  {{ mode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"dividerType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of dividerTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"axis\">\r\n                axis\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"axis\"\r\n                [(ngModel)]=\"dividerAxis\"\r\n                name=\"axis\">\r\n                <option\r\n                  *ngFor=\"let axis of dividerAxises\"\r\n                  [value]=\"axis\">\r\n                  {{ axis }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"dividerDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of dividerDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- header -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'header'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"title\">\r\n                title\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"headerTitle\"\r\n                name=\"title\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"description\">\r\n                description\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"headerDescription\"\r\n                name=\"description\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"viewMode\">\r\n                viewMode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                [(ngModel)]=\"headerViewMode\"\r\n                name=\"viewMode\">\r\n                <option\r\n                  *ngFor=\"let viewMode of headerViewModes\"\r\n                  [value]=\"viewMode\">\r\n                  {{ viewMode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"userName\">\r\n                userName\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"headerUserName\"\r\n                name=\"userName\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"timeOut\">\r\n                timeOut\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"number\"\r\n                [(ngModel)]=\"headerTimeOut\"\r\n                name=\"timeOut\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"logoMode\">\r\n                logoMode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                [(ngModel)]=\"headerLogoViewMode\"\r\n                name=\"logoMode\">\r\n                <option\r\n                  *ngFor=\"let logoMode of headerLogoViewModes\"\r\n                  [value]=\"logoMode\">\r\n                  {{ logoMode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- icon -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'icon'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"iconName\">\r\n                iconName\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconName\"\r\n                name=\"iconName\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"familyName\">\r\n                familyName\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconFamilyName\"\r\n                name=\"familyName\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"className\">\r\n                className\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconClassName\"\r\n                name=\"className\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"size\">\r\n                size\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconSize\"\r\n                name=\"size\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"color\">\r\n                color\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconColor\"\r\n                name=\"color\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- input -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'input'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputLabel\"\r\n                name=\"label\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"state\">\r\n                state\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"state\"\r\n                [(ngModel)]=\"inputState\"\r\n                name=\"state\">\r\n                <option\r\n                  *ngFor=\"let type of inputStates\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"inputDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of inputDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"placeholder\">\r\n                placeholder\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputPlaceholder\"\r\n                name=\"placeholder\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"ispassword\">\r\n                ispassword\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"ispassword\"\r\n                [(ngModel)]=\"inputIsPassword\"\r\n                name=\"ispassword\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  ispassword\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not ispassword\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"disabled\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"inputDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"labelInline\">\r\n                labelInline\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"labelInline\"\r\n                [(ngModel)]=\"inputLabelInline\"\r\n                name=\"labelInline\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  row\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  column\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"iconButton\">\r\n                iconButton\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputButtonIcon\"\r\n                name=\"iconButton\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"iconButton\">\r\n                icon\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputIcon\"\r\n                name=\"icon\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- item -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'item'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"content\">\r\n                content\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"itemContent\"\r\n                name=\"content\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"itemType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of itemTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"disabled\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"itemDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"url\">\r\n                url\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"itemUrl\"\r\n                name=\"url\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"selected\">\r\n                selected\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"selected\"\r\n                [(ngModel)]=\"itemSelected\"\r\n                name=\"selected\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  selected\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not selected\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"hasDivider\">\r\n                hasDivider\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"hasDivider\"\r\n                [(ngModel)]=\"itemHasDivider\"\r\n                name=\"hasDivider\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  divider\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not divider\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- loading -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'loading'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"density\">\r\n            density\r\n          </label>\r\n          <select\r\n            class=\"test-component__input\"\r\n            [(ngModel)]=\"loadingDensity\"\r\n            name=\"density\">\r\n            <option\r\n              *ngFor=\"let density of loadingDensities\"\r\n              [value]=\"density\">\r\n              {{ density }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"progress\">\r\n            progress\r\n          </label>\r\n          <input\r\n            class=\"test-component__input\"\r\n            style=\"width: 100px !important;\"\r\n            type=\"number\"\r\n            [(ngModel)]=\"loadingProgress\"\r\n            name=\"progress\">\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- logo -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'logo'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"viewMode\">\r\n            viewMode\r\n          </label>\r\n          <select\r\n            class=\"test-component__input\"\r\n            [(ngModel)]=\"logoViewMode\"\r\n            name=\"viewMode\">\r\n            <option\r\n              *ngFor=\"let viewMode of logoViewModes\"\r\n              [value]=\"viewMode\">\r\n              {{ viewMode }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"width\">\r\n            width\r\n          </label>\r\n          <input\r\n            class=\"test-component__input\"\r\n            style=\"width: 100px !important;\"\r\n            type=\"number\"\r\n            [(ngModel)]=\"logoWidth\"\r\n            name=\"width\">\r\n        </div>\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"clickEvent\">\r\n            clickEvent\r\n          </label>\r\n          <select\r\n            class=\"test-component__input\"\r\n            id=\"logoIsClickable\"\r\n            [(ngModel)]=\"logoIsClickable\"\r\n            name=\"clickEvent\">\r\n            <option\r\n              [value]=\"true\">\r\n              clic\u00E1vel\r\n            </option>\r\n            <option\r\n              [value]=\"false\">\r\n              n\u00E3o clic\u00E1vel\r\n            </option>\r\n          </select>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- message -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'message'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"messageType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of messageTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"state\">\r\n                state\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"state\"\r\n                [(ngModel)]=\"messageState\"\r\n                name=\"state\">\r\n                <option\r\n                  *ngFor=\"let state of messageStates\"\r\n                  [value]=\"state\">\r\n                  {{ state }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"message\">\r\n                message\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 200px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"messageMessage\"\r\n                name=\"message\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"description\">\r\n                description\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 200px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"messageDescription\"\r\n                name=\"description\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <cfc-button (click)=\"message.openMessage()\" label=\"open\"></cfc-button>\r\n            <cfc-button (click)=\"message.closeMessage()\" label=\"close\"></cfc-button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- sign-in -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'sign-in'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"signInLabel\"\r\n                name=\"label\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"signInType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of signInTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"signInDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of signInDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"mode\">\r\n                mode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"mode\"\r\n                [(ngModel)]=\"signInMode\"\r\n                name=\"mode\">\r\n                <option\r\n                  *ngFor=\"let mode of signInModes\"\r\n                  [value]=\"mode\">\r\n                  {{ mode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"hasDivider\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"signInDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"block\">\r\n                block\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"block\"\r\n                [(ngModel)]=\"signInBlock\"\r\n                name=\"block\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  block\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not block\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"circle\">\r\n                circle\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"circle\"\r\n                [(ngModel)]=\"signInCircle\"\r\n                name=\"circle\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  circle\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not circle\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"externalImageUrl\">\r\n                externalImageUrl\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 300px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"signInExternalImageUrl\"\r\n                name=\"externalImageUrl\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"externalLabel\">\r\n                externalLabel\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"signInExternalLabel\"\r\n                name=\"externalLabel\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- timer -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'timer'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"timerType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of timerTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"timer\">\r\n                timer\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                [(ngModel)]=\"timer\"\r\n                name=\"timer\"\r\n                readonly>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"timerCritical\">\r\n                timerCritical\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                [(ngModel)]=\"timerCritical\"\r\n                name=\"timerCritical\"\r\n                readonly>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"column\"\r\n            fxLayoutAlign=\"center center\">\r\n            <label\r\n              for=\"timer\">\r\n              timer\r\n            </label>\r\n            <textarea\r\n              class=\"test-component__input\"\r\n              style=\"width: 400px !important; height: max-content;\"\r\n              type=\"number\"\r\n              name=\"timer\"\r\n              readonly>\r\n              timeEvent dispared in {{ timer }} seconds.\r\n            </textarea>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #noComponentSelected>\r\n  <div>\r\n    <h4\r\n      style=\"text-align: center;\">\r\n      Nenhum componente selecionado ainda\r\n    </h4>\r\n  </div>\r\n</ng-template>\r\n", styles: [".test-component__divider{min-width:60vw}.test-component__input,.test-component__output{margin:0;width:fit-content!important;height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: AvatarComponent, selector: "cfc-avatar", inputs: ["type", "name", "density", "imageUrl"] }, { kind: "component", type: BreadcrumbComponent, selector: "cfc-breadcrumb" }, { kind: "component", type: ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"], outputs: ["onClick"] }, { kind: "component", type: CardComponent, selector: "cfc-card", inputs: ["hover", "disabled"] }, { kind: "component", type: CarouselComponent, selector: "cfc-carousel" }, { kind: "component", type: CheckboxesComponent, selector: "cfc-checkboxes", inputs: ["label", "description", "options", "mode"] }, { kind: "component", type: CheckboxOptionComponent, selector: "cfc-checkbox-option", inputs: ["type", "state", "option", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: CollapseComponent, selector: "cfc-collapse" }, { kind: "component", type: CookieBarComponent, selector: "cfc-cookie-bar" }, { kind: "component", type: DatetimerPickerComponent, selector: "cfc-datetimer-picker" }, { kind: "component", type: DividerComponent, selector: "cfc-divider", inputs: ["height", "width", "mode", "type", "axis", "density"] }, { kind: "component", type: FooterComponent, selector: "cfc-footer", inputs: ["projectName", "projectVersion"] }, { kind: "component", type: HeaderComponent, selector: "cfc-header", inputs: ["viewMode", "hasMenu", "hasLogo", "logoViewMode", "logoUrl", "title", "description", "hasTimer", "timeLogout", "timeCritical", "hasNotificationIcon", "userName", "signinMode"], outputs: ["menuEvent", "criticalTimeEvent", "timeOutEvent", "timeEvent", "notificationIconEvent", "signinEvent", "logoutEvent"] }, { kind: "component", type: IconComponent, selector: "cfc-icon", inputs: ["iconName", "familyName", "className", "size", "color"] }, { kind: "component", type: InputComponent, selector: "cfc-input", inputs: ["value", "disabled", "buttonAriaLabel", "formControlName", "isPassword", "isHighlight", "inverted", "labelInline", "state", "density", "buttonIcon", "label", "type", "placeholder", "icon"], outputs: ["onChange", "onInput", "onIconClicked", "onIconSubmited"] }, { kind: "component", type: ItemComponent, selector: "cfc-item", inputs: ["type", "disabled", "selected", "hasDivider", "url"], outputs: ["clickEvent"] }, { kind: "component", type: ListComponent, selector: "cfc-list" }, { kind: "component", type: LoadingComponent, selector: "cfc-loading", inputs: ["density", "progress", "minValue", "maxValue"] }, { kind: "component", type: LogoComponent, selector: "cfc-logo", inputs: ["viewMode", "isClickable", "width", "imageUrl"], outputs: ["clickEvent"] }, { kind: "component", type: MagicButtonComponent, selector: "cfc-magic-button" }, { kind: "component", type: MenuComponent, selector: "cfc-menu", inputs: ["menuItems", "closeOnOutsideClick"], outputs: ["itemSelected", "menuToggle"] }, { kind: "component", type: MessageComponent, selector: "cfc-message", inputs: ["message", "description", "state", "type", "horizontalPosition", "verticalPosition", "verticalOffset", "horizontalOffset", "displayTime", "isTemporary"] }, { kind: "component", type: ModalComponent, selector: "cfc-modal", inputs: ["type", "title", "isClosable", "density", "primaryActionLabel", "primaryActionIcon", "secondaryActionLabel", "secondaryActionIcon", "hasOverlay", "width", "height"], outputs: ["onPrimaryAction", "onSecondaryAction"] }, { kind: "component", type: NotificationComponent, selector: "cfc-notification" }, { kind: "component", type: NotificationPanelComponent, selector: "cfc-notification-panel" }, { kind: "component", type: PageContentComponent, selector: "cfc-page-content" }, { kind: "component", type: PaginationComponent, selector: "cfc-pagination", inputs: ["data", "itemsPerPageOptions", "allPages", "itemsPerPage", "allItems"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: RadioComponent, selector: "cfc-radio" }, { kind: "component", type: ScrimComponent, selector: "cfc-scrim", inputs: ["isVisible", "isClosable"] }, { kind: "component", type: SelectComponent, selector: "cfc-select", inputs: ["options", "id", "label", "value", "placeholder", "labelInline"], outputs: ["onChange"] }, { kind: "component", type: SignInComponent, selector: "cfc-sign-in", inputs: ["label", "type", "density", "mode", "disabled", "active", "block", "circle", "externalImageUrl", "externalLabel"], outputs: ["onClick", "onLogout"] }, { kind: "component", type: SkiplinkComponent, selector: "cfc-skiplink" }, { kind: "component", type: SliderComponent, selector: "cfc-slider" }, { kind: "component", type: SwitchComponent, selector: "cfc-switch" }, { kind: "component", type: TabComponent, selector: "cfc-tab" }, { kind: "component", type: TableComponent, selector: "cfc-table" }, { kind: "component", type: TagComponent, selector: "cfc-tag" }, { kind: "component", type: TextareaComponent, selector: "cfc-textarea" }, { kind: "component", type: TimerComponent, selector: "cfc-timer", inputs: ["type", "initialTime", "criticalTime", "isGlobal"], outputs: ["timeOutEvent", "timeEvent", "timeCriticalEvent"] }, { kind: "component", type: TooltipComponent, selector: "cfc-tooltip", inputs: ["tooltipText", "type"] }, { kind: "component", type: UploadComponent, selector: "cfc-upload" }, { kind: "component", type: WizardComponent, selector: "cfc-wizard" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestComponentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-test-component', template: "<ng-container *ngIf=\"selectedComponent.name; else noComponentSelected\">\r\n  <div\r\n    fxFlex=\"grow\"\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"stretch center\"\r\n    fxLayoutGap=\"1rem\">\r\n\r\n    <h2 style=\"font-weight: 700;\">cfc-{{ selectedComponent.name }}</h2>\r\n\r\n    <cfc-avatar\r\n      *ngIf=\"selectedComponent.name === 'avatar'\"\r\n      [type]=\"avatarType\"\r\n      [name]=\"avatarName\"\r\n      [density]=\"avatarDensity\"\r\n      [imageUrl]=\"avatarImageUrl\"\r\n    ></cfc-avatar>\r\n\r\n    <cfc-breadcrumb\r\n      *ngIf=\"selectedComponent.name === 'breadcrumb'\"\r\n      [label]=\"breadcrumbLabel\"\r\n    ></cfc-breadcrumb>\r\n\r\n    <cfc-button\r\n      *ngIf=\"selectedComponent.name === 'button'\"\r\n      [label]=\"buttonLabel\"\r\n      [type]=\"buttonType\"\r\n      [submit]=\"buttonSubmit\"\r\n      [circle]=\"buttonCircle\"\r\n      [density]=\"buttonDensity\"\r\n      [disabled]=\"buttonDisabled\"\r\n      [block]=\"buttonBlock\"\r\n      [icon]=\"buttonIcon\"\r\n      [active]=\"buttonActive\"\r\n      [inverted]=\"buttonInverted\"\r\n      [loading]=\"buttonLoading\"\r\n      (click)=\"buttonClickEvent()\"\r\n    ></cfc-button>\r\n\r\n    <cfc-card\r\n      *ngIf=\"selectedComponent.name === 'card'\"\r\n      [disabled]=\"cardDisabled\"\r\n      [hover]=\"cardHover\"\r\n    ></cfc-card>\r\n\r\n    <cfc-carousel\r\n      *ngIf=\"selectedComponent.name === 'carousel'\"\r\n    ></cfc-carousel>\r\n\r\n    <cfc-checkboxes\r\n      *ngIf=\"selectedComponent.name === 'checkboxes'\"\r\n    ></cfc-checkboxes>\r\n\r\n    <cfc-checkbox-option\r\n      *ngIf=\"selectedComponent.name === 'checkbox-option'\"\r\n      [state]=\"checkboxOptionState\"\r\n      [type]=\"checkboxOptionType\"\r\n      [option]=\"checkboxOptionOption\"\r\n      [(checked)]=\"checkboxOptionChecked\"\r\n    ></cfc-checkbox-option>\r\n\r\n    <cfc-collapse\r\n      *ngIf=\"selectedComponent.name === 'collapse'\"\r\n    ></cfc-collapse>\r\n\r\n    <cfc-cookie-bar\r\n      *ngIf=\"selectedComponent.name === 'cookie-bar'\"\r\n    ></cfc-cookie-bar>\r\n\r\n    <cfc-datetimer-picker\r\n      *ngIf=\"selectedComponent.name === 'datetimer-picker'\"\r\n    ></cfc-datetimer-picker>\r\n\r\n    <div *ngIf=\"selectedComponent.name === 'divider'\"\r\n      [fxLayout]=\"dividerAxis === 'horizontal' ? 'column' : 'row'\">\r\n      <div>Uma coisa</div>\r\n      <cfc-divider\r\n        [mode]=\"dividerMode\"\r\n        [type]=\"dividerType\"\r\n        [axis]=\"dividerAxis\"\r\n        [density]=\"dividerDensity\"\r\n      ></cfc-divider>\r\n      <div>Ou outra</div>\r\n    </div>\r\n\r\n    <cfc-footer\r\n      *ngIf=\"selectedComponent.name === 'footer'\"\r\n      [projectName]=\"footerProjectName\"\r\n      [projectVersion]=\"footerProjectVersion\"\r\n    ></cfc-footer>\r\n\r\n    <cfc-header\r\n      *ngIf=\"selectedComponent.name === 'header'\"\r\n      [title]=\"headerTitle\"\r\n      [description]=\"headerDescription\"\r\n      [userName]=\"headerUserName\"\r\n      [viewMode]=\"headerViewMode\"\r\n      [hasMenu]=\"headerHasMenu\"\r\n      [hasTimer]=\"headerHasTimer\"\r\n      [hasBookIcon]=\"headerHasBookIcon\"\r\n      [logoViewMode]=\"headerLogoViewMode\"\r\n      [timeLogout]=\"headerTimeOut\"\r\n      [timeCritical]=\"headerTimeCritical\"\r\n      (criticalTimeEvent)=\"headerClickEvent()\"\r\n    ></cfc-header>\r\n\r\n    <cfc-icon\r\n      *ngIf=\"selectedComponent.name === 'icon'\"\r\n      [iconName]=\"iconName\"\r\n      [familyName]=\"iconFamilyName\"\r\n      [className]=\"iconClassName\"\r\n      [size]=\"iconSize\"\r\n      [color]=\"iconColor\"\r\n    ></cfc-icon>\r\n\r\n    <cfc-input\r\n      *ngIf=\"selectedComponent.name === 'input'\"\r\n      [disabled]=\"inputDisabled\"\r\n      [density]=\"inputDensity\"\r\n      [isPassword]=\"inputIsPassword\"\r\n      [label]=\"inputLabel\"\r\n      [type]=\"inputType\"\r\n      [buttonIcon]=\"inputButtonIcon\"\r\n      [placeholder]=\"inputPlaceholder\"\r\n      [labelInline]=\"inputLabelInline\"\r\n      [state]=\"inputState\"\r\n      [icon]=\"inputIcon\"\r\n      (onChange)=\"inputOnChange()\"\r\n      (onInput)=\"inputOnInput()\"\r\n      (onIconClicked)=\"inputOnIconClicked()\"\r\n      (onIconSubmited)=\"inputOnIconSubmited()\"\r\n    ></cfc-input>\r\n\r\n    <cfc-item\r\n      *ngIf=\"selectedComponent.name === 'item'\"\r\n      [type]=\"itemType\"\r\n      [disabled]=\"itemDisabled\"\r\n      [selected]=\"itemSelected\"\r\n      [hasDivider]=\"itemHasDivider\"\r\n      [url]=\"itemUrl\">\r\n      <span default>\r\n        {{ itemContent }}\r\n      </span>\r\n      <span button>\r\n        {{ itemContent }}\r\n      </span>\r\n      <span link>\r\n        {{ itemContent }}\r\n      </span>\r\n    </cfc-item>\r\n\r\n    <cfc-loading\r\n      *ngIf=\"selectedComponent.name === 'loading'\"\r\n      [density]=\"loadingDensity\"\r\n      [progress]=\"loadingProgress\"\r\n    ></cfc-loading>\r\n\r\n    <cfc-list\r\n      *ngIf=\"selectedComponent.name === 'list'\"\r\n      [title]=\"'Minha Lista'\">\r\n      <cfc-list-item>\r\n        Item 1\r\n      </cfc-list-item>\r\n      <cfc-list-item>\r\n        Item 2\r\n      </cfc-list-item>\r\n      <cfc-list-item>\r\n        <strong>Item 3 com conte\u00FAdo personalizado</strong>\r\n      </cfc-list-item>\r\n    </cfc-list>\r\n\r\n    <cfc-logo\r\n      *ngIf=\"selectedComponent.name === 'logo'\"\r\n      [width]=\"logoWidth\"\r\n      [viewMode]=\"logoViewMode\"\r\n      [isClickable]=\"logoIsClickable\"\r\n      (clickEvent)=\"logoClickEvent\"\r\n    ></cfc-logo>\r\n\r\n    <cfc-magic-button\r\n      *ngIf=\"selectedComponent.name === 'magic-button'\"\r\n    ></cfc-magic-button>\r\n\r\n    <cfc-menu\r\n      *ngIf=\"selectedComponent.name === 'menu'\"\r\n      [menuItems]=\"menuItems\"\r\n    ></cfc-menu>\r\n\r\n    <cfc-message\r\n      #message\r\n      [hidden]=\"selectedComponent.name !== 'message'\"\r\n      [type]=\"messageType\"\r\n      [state]=\"messageState\"\r\n      [message]=\"messageMessage\"\r\n      [description]=\"messageDescription\"\r\n    ></cfc-message>\r\n\r\n    <cfc-modal\r\n      *ngIf=\"selectedComponent.name === 'modal'\"\r\n    ></cfc-modal>\r\n\r\n    <cfc-notification\r\n      *ngIf=\"selectedComponent.name === 'notification'\"\r\n    ></cfc-notification>\r\n\r\n    <cfc-notification-panel\r\n      *ngIf=\"selectedComponent.name === 'notification-panel'\"\r\n    ></cfc-notification-panel>\r\n\r\n    <cfc-page-content\r\n      *ngIf=\"selectedComponent.name === 'page-content'\"\r\n    ></cfc-page-content>\r\n\r\n    <cfc-pagination\r\n      *ngIf=\"selectedComponent.name === 'pagination'\"\r\n    ></cfc-pagination>\r\n\r\n    <cfc-radio\r\n      *ngIf=\"selectedComponent.name === 'radio'\"\r\n    ></cfc-radio>\r\n\r\n    <cfc-scrim\r\n      *ngIf=\"selectedComponent.name === 'scrim'\"\r\n    ></cfc-scrim>\r\n\r\n    <cfc-select\r\n      *ngIf=\"selectedComponent.name === 'select'\"\r\n      [placeholder]=\"selectPlaceholder\"\r\n      [label]=\"selectLabel\"\r\n      [feedbackMessage]=\"selectFeedbackMessage\"\r\n      [feedbackState]=\"selectFeedbackState\"\r\n    ></cfc-select>\r\n\r\n    <cfc-sign-in\r\n      *ngIf=\"selectedComponent.name === 'sign-in'\"\r\n      [label]=\"signInLabel\"\r\n      [type]=\"signInType\"\r\n      [density]=\"signInDensity\"\r\n      [mode]=\"signInMode\"\r\n      [disabled]=\"signInDisabled\"\r\n      [block]=\"signInBlock\"\r\n      [circle]=\"signInCircle\"\r\n      [externalImageUrl]=\"signInExternalImageUrl\"\r\n      [externalLabel]=\"signInExternalLabel\"\r\n    ></cfc-sign-in>\r\n\r\n    <cfc-skiplink\r\n      *ngIf=\"selectedComponent.name === 'skiplink'\"\r\n    ></cfc-skiplink>\r\n\r\n    <cfc-slider\r\n      *ngIf=\"selectedComponent.name === 'slider'\"\r\n    ></cfc-slider>\r\n\r\n    <cfc-switch\r\n      *ngIf=\"selectedComponent.name === 'switch'\"\r\n    ></cfc-switch>\r\n\r\n    <cfc-tab\r\n      *ngIf=\"selectedComponent.name === 'tab'\"\r\n    ></cfc-tab>\r\n\r\n    <cfc-table\r\n      *ngIf=\"selectedComponent.name === 'table'\"\r\n    ></cfc-table>\r\n\r\n    <cfc-tag\r\n      *ngIf=\"selectedComponent.name === 'tag'\"\r\n    ></cfc-tag>\r\n\r\n    <cfc-template-error\r\n      *ngIf=\"selectedComponent.name === 'template-error'\"\r\n      illustrationUrl=\"assets/illustrations/error19.png\"\r\n      [principalText]=\"'Lorem Ipsum'\"\r\n      [secondaryText]=\"'Lorem Ipsum'\"\r\n      [suportText]=\"'Lorem Ipsum'\"\r\n    ></cfc-template-error>\r\n\r\n    <cfc-textarea\r\n      *ngIf=\"selectedComponent.name === 'textarea'\"\r\n    ></cfc-textarea>\r\n\r\n    <cfc-timer\r\n      *ngIf=\"selectedComponent.name === 'timer'\"\r\n      [type]=\"timerType\"\r\n      [initialTime]=\"timer\"\r\n      [criticalTime]=\"timerCritical\"\r\n      (timeEvent)=\"onTimeEvent()\"\r\n      (timeOutEvent)=\"onTimeOutEvent()\"\r\n    ></cfc-timer>\r\n\r\n    <cfc-tooltip\r\n      *ngIf=\"selectedComponent.name === 'tooltip'\"\r\n    ></cfc-tooltip>\r\n\r\n    <cfc-upload\r\n      *ngIf=\"selectedComponent.name === 'upload'\"\r\n    ></cfc-upload>\r\n\r\n    <cfc-wizard\r\n      *ngIf=\"selectedComponent.name === 'wizard'\"\r\n    ></cfc-wizard>\r\n\r\n    <div style=\"width: 100%;\">\r\n      <cfc-divider></cfc-divider>\r\n    </div>\r\n\r\n    <form\r\n      fxLayout=\"row\"\r\n      fxLayoutAlign=\"center center\"\r\n      fxLayoutGap=\"0.5rem\">\r\n\r\n      <!-- avatar -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'avatar'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"avatarType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of avatarTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"name\">\r\n                name\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"avatarName\"\r\n                name=\"name\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"avatarDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of avatarDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"imageUrl\">\r\n                imageUrl\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 300px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"avatarImageUrl\"\r\n                name=\"imageUrl\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- breadcrumb -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'breadcrumb'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"breadcrumbLabel\"\r\n                name=\"label\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- button -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'button'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"buttonLabel\"\r\n                name=\"label\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"buttonType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of buttonTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"buttonDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of buttonDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"icon\">\r\n                icon\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"buttonIcon\"\r\n                name=\"icon\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"circle\">\r\n                circle\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"circle\"\r\n                [(ngModel)]=\"buttonCircle\"\r\n                name=\"circle\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  circle\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not circle\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"submit\">\r\n                submit\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"submit\"\r\n                [(ngModel)]=\"buttonSubmit\"\r\n                name=\"submit\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  submit\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not submit\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"disabled\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"buttonDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"block\">\r\n                block\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"block\"\r\n                [(ngModel)]=\"buttonBlock\"\r\n                name=\"block\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  block\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not block\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"inverted\">\r\n                inverted\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"inverted\"\r\n                [(ngModel)]=\"buttonInverted\"\r\n                name=\"inverted\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  inverted\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not inverted\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"actived\">\r\n                active\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"active\"\r\n                [(ngModel)]=\"buttonActive\"\r\n                name=\"active\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  actived\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  inactived\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"loading\">\r\n                loading\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"loading\"\r\n                [(ngModel)]=\"buttonLoading\"\r\n                name=\"loading\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  loading\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not loading\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- checkbox-option -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'checkbox-option'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"state\">\r\n                state\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"state\"\r\n                [(ngModel)]=\"checkboxOptionState\"\r\n                name=\"state\">\r\n                <option\r\n                  *ngFor=\"let state of checkboxOptionStates\"\r\n                  [value]=\"state\">\r\n                  {{ state }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <!-- <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"checkboxOptionType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of checkboxOptionTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div> -->\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"option\">\r\n                option\r\n              </label>\r\n              <textarea\r\n                class=\"test-component__input\"\r\n                style=\"height: 90px; white-space: pre-wrap; font-family: monospace;\"\r\n                id=\"option\"\r\n                name=\"option\"\r\n                readonly>\r\n{\r\n  name: {{ checkboxOptionOption.name }},\r\n  value: {{ checkboxOptionOption.value }}\r\n}</textarea>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"checkedChange\">\r\n                checkedChange\r\n              </label>\r\n              <textarea\r\n                class=\"test-component__input\"\r\n                style=\"height: 70px; width: 220px; white-space: pre-wrap; font-family: monospace;\"\r\n                type=\"text\"\r\n                name=\"checkedChange\"\r\n                readonly>\r\n{{ checkboxOptionChecked }}\r\n{{ checkboxOptionOption.value }}{{ !checkboxOptionChecked ? ' n\u00E3o' : '' }} selecionada.</textarea>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- divider -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'divider'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"mode\">\r\n                mode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"mode\"\r\n                [(ngModel)]=\"dividerMode\"\r\n                name=\"mode\">\r\n                <option\r\n                  *ngFor=\"let mode of dividerModes\"\r\n                  [value]=\"mode\">\r\n                  {{ mode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"dividerType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of dividerTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"axis\">\r\n                axis\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"axis\"\r\n                [(ngModel)]=\"dividerAxis\"\r\n                name=\"axis\">\r\n                <option\r\n                  *ngFor=\"let axis of dividerAxises\"\r\n                  [value]=\"axis\">\r\n                  {{ axis }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"dividerDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of dividerDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- header -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'header'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"title\">\r\n                title\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"headerTitle\"\r\n                name=\"title\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"description\">\r\n                description\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"headerDescription\"\r\n                name=\"description\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"viewMode\">\r\n                viewMode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                [(ngModel)]=\"headerViewMode\"\r\n                name=\"viewMode\">\r\n                <option\r\n                  *ngFor=\"let viewMode of headerViewModes\"\r\n                  [value]=\"viewMode\">\r\n                  {{ viewMode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"userName\">\r\n                userName\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"headerUserName\"\r\n                name=\"userName\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"timeOut\">\r\n                timeOut\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"number\"\r\n                [(ngModel)]=\"headerTimeOut\"\r\n                name=\"timeOut\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"logoMode\">\r\n                logoMode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                [(ngModel)]=\"headerLogoViewMode\"\r\n                name=\"logoMode\">\r\n                <option\r\n                  *ngFor=\"let logoMode of headerLogoViewModes\"\r\n                  [value]=\"logoMode\">\r\n                  {{ logoMode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- icon -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'icon'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"iconName\">\r\n                iconName\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconName\"\r\n                name=\"iconName\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"familyName\">\r\n                familyName\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconFamilyName\"\r\n                name=\"familyName\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"className\">\r\n                className\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconClassName\"\r\n                name=\"className\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"size\">\r\n                size\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconSize\"\r\n                name=\"size\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"color\">\r\n                color\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"iconColor\"\r\n                name=\"color\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- input -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'input'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputLabel\"\r\n                name=\"label\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"state\">\r\n                state\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"state\"\r\n                [(ngModel)]=\"inputState\"\r\n                name=\"state\">\r\n                <option\r\n                  *ngFor=\"let type of inputStates\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"inputDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of inputDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"placeholder\">\r\n                placeholder\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputPlaceholder\"\r\n                name=\"placeholder\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"ispassword\">\r\n                ispassword\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"ispassword\"\r\n                [(ngModel)]=\"inputIsPassword\"\r\n                name=\"ispassword\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  ispassword\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not ispassword\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"disabled\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"inputDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"labelInline\">\r\n                labelInline\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"labelInline\"\r\n                [(ngModel)]=\"inputLabelInline\"\r\n                name=\"labelInline\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  row\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  column\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"iconButton\">\r\n                iconButton\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputButtonIcon\"\r\n                name=\"iconButton\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"iconButton\">\r\n                icon\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"inputIcon\"\r\n                name=\"icon\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- item -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'item'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"content\">\r\n                content\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"itemContent\"\r\n                name=\"content\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"itemType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of itemTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"disabled\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"itemDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"url\">\r\n                url\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"itemUrl\"\r\n                name=\"url\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"selected\">\r\n                selected\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"selected\"\r\n                [(ngModel)]=\"itemSelected\"\r\n                name=\"selected\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  selected\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not selected\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"hasDivider\">\r\n                hasDivider\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"hasDivider\"\r\n                [(ngModel)]=\"itemHasDivider\"\r\n                name=\"hasDivider\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  divider\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not divider\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- loading -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'loading'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"density\">\r\n            density\r\n          </label>\r\n          <select\r\n            class=\"test-component__input\"\r\n            [(ngModel)]=\"loadingDensity\"\r\n            name=\"density\">\r\n            <option\r\n              *ngFor=\"let density of loadingDensities\"\r\n              [value]=\"density\">\r\n              {{ density }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"progress\">\r\n            progress\r\n          </label>\r\n          <input\r\n            class=\"test-component__input\"\r\n            style=\"width: 100px !important;\"\r\n            type=\"number\"\r\n            [(ngModel)]=\"loadingProgress\"\r\n            name=\"progress\">\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- logo -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'logo'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"viewMode\">\r\n            viewMode\r\n          </label>\r\n          <select\r\n            class=\"test-component__input\"\r\n            [(ngModel)]=\"logoViewMode\"\r\n            name=\"viewMode\">\r\n            <option\r\n              *ngFor=\"let viewMode of logoViewModes\"\r\n              [value]=\"viewMode\">\r\n              {{ viewMode }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"width\">\r\n            width\r\n          </label>\r\n          <input\r\n            class=\"test-component__input\"\r\n            style=\"width: 100px !important;\"\r\n            type=\"number\"\r\n            [(ngModel)]=\"logoWidth\"\r\n            name=\"width\">\r\n        </div>\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\">\r\n          <label\r\n            for=\"clickEvent\">\r\n            clickEvent\r\n          </label>\r\n          <select\r\n            class=\"test-component__input\"\r\n            id=\"logoIsClickable\"\r\n            [(ngModel)]=\"logoIsClickable\"\r\n            name=\"clickEvent\">\r\n            <option\r\n              [value]=\"true\">\r\n              clic\u00E1vel\r\n            </option>\r\n            <option\r\n              [value]=\"false\">\r\n              n\u00E3o clic\u00E1vel\r\n            </option>\r\n          </select>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- message -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'message'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"messageType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of messageTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"state\">\r\n                state\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"state\"\r\n                [(ngModel)]=\"messageState\"\r\n                name=\"state\">\r\n                <option\r\n                  *ngFor=\"let state of messageStates\"\r\n                  [value]=\"state\">\r\n                  {{ state }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"message\">\r\n                message\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 200px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"messageMessage\"\r\n                name=\"message\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"description\">\r\n                description\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 200px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"messageDescription\"\r\n                name=\"description\">\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <cfc-button (click)=\"message.openMessage()\" label=\"open\"></cfc-button>\r\n            <cfc-button (click)=\"message.closeMessage()\" label=\"close\"></cfc-button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- sign-in -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'sign-in'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"label\">\r\n                label\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"signInLabel\"\r\n                name=\"label\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"signInType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of signInTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"density\">\r\n                density\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"density\"\r\n                [(ngModel)]=\"signInDensity\"\r\n                name=\"density\">\r\n                <option\r\n                  *ngFor=\"let density of signInDensities\"\r\n                  [value]=\"density\">\r\n                  {{ density }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"mode\">\r\n                mode\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"mode\"\r\n                [(ngModel)]=\"signInMode\"\r\n                name=\"mode\">\r\n                <option\r\n                  *ngFor=\"let mode of signInModes\"\r\n                  [value]=\"mode\">\r\n                  {{ mode }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"hasDivider\">\r\n                disabled\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"disabled\"\r\n                [(ngModel)]=\"signInDisabled\"\r\n                name=\"disabled\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  disabled\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  enabled\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"block\">\r\n                block\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"block\"\r\n                [(ngModel)]=\"signInBlock\"\r\n                name=\"block\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  block\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not block\r\n                </option>\r\n              </select>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"circle\">\r\n                circle\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"circle\"\r\n                [(ngModel)]=\"signInCircle\"\r\n                name=\"circle\">\r\n                <option\r\n                  [value]=\"true\">\r\n                  circle\r\n                </option>\r\n                <option\r\n                  [value]=\"false\">\r\n                  not circle\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"externalImageUrl\">\r\n                externalImageUrl\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 300px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"signInExternalImageUrl\"\r\n                name=\"externalImageUrl\">\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"externalLabel\">\r\n                externalLabel\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                type=\"text\"\r\n                [(ngModel)]=\"signInExternalLabel\"\r\n                name=\"externalLabel\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- timer -->\r\n      <ng-container *ngIf=\"selectedComponent.name === 'timer'\">\r\n        <div\r\n          fxLayout=\"column\"\r\n          fxLayoutAlign=\"center center\"\r\n          fxLayoutGap=\"0.5rem\">\r\n          <div fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"type\">\r\n                type\r\n              </label>\r\n              <select\r\n                class=\"test-component__input\"\r\n                id=\"type\"\r\n                [(ngModel)]=\"timerType\"\r\n                name=\"type\">\r\n                <option\r\n                  *ngFor=\"let type of timerTypes\"\r\n                  [value]=\"type\">\r\n                  {{ type }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"0.5rem\">\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"timer\">\r\n                timer\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                [(ngModel)]=\"timer\"\r\n                name=\"timer\"\r\n                readonly>\r\n            </div>\r\n            <div\r\n              fxLayout=\"column\"\r\n              fxLayoutAlign=\"center center\">\r\n              <label\r\n                for=\"timerCritical\">\r\n                timerCritical\r\n              </label>\r\n              <input\r\n                class=\"test-component__input\"\r\n                style=\"width: 100px !important;\"\r\n                [(ngModel)]=\"timerCritical\"\r\n                name=\"timerCritical\"\r\n                readonly>\r\n            </div>\r\n          </div>\r\n          <div\r\n            fxLayout=\"column\"\r\n            fxLayoutAlign=\"center center\">\r\n            <label\r\n              for=\"timer\">\r\n              timer\r\n            </label>\r\n            <textarea\r\n              class=\"test-component__input\"\r\n              style=\"width: 400px !important; height: max-content;\"\r\n              type=\"number\"\r\n              name=\"timer\"\r\n              readonly>\r\n              timeEvent dispared in {{ timer }} seconds.\r\n            </textarea>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #noComponentSelected>\r\n  <div>\r\n    <h4\r\n      style=\"text-align: center;\">\r\n      Nenhum componente selecionado ainda\r\n    </h4>\r\n  </div>\r\n</ng-template>\r\n", styles: [".test-component__divider{min-width:60vw}.test-component__input,.test-component__output{margin:0;width:fit-content!important;height:40px}\n"] }]
        }], propDecorators: { selectedComponent: [{
                type: Input
            }] } });

class TestPageComponent {
    cdr;
    selectedComponent = {
        id: 0,
        name: '',
        clickEventName: 'setComponent',
        isAlready: false
    };
    constructor(cdr) {
        this.cdr = cdr;
    }
    onSelectComponent(component) {
        this.selectedComponent = component;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestPageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestPageComponent, selector: "cfc-test-page", ngImport: i0, template: "<div fxLayout=\"row\">\r\n  <aside class=\"test-page__aside-menu\">\r\n    <cfc-components-list\r\n      (selectedComponent)=\"onSelectComponent($event)\"\r\n    ></cfc-components-list>\r\n  </aside>\r\n\r\n  <main\r\n    class=\"test-page__component-section\"\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"stretch center\">\r\n    <div fxLayoutAlign=\"start start\" style=\"width: 100%; margin-bottom: 1rem;\">\r\n      <cfc-breadcrumb></cfc-breadcrumb>\r\n    </div>\r\n    <cfc-test-component\r\n      [selectedComponent]='selectedComponent'\r\n    ></cfc-test-component>\r\n  </main>\r\n</div>\r\n", styles: [".test-page__aside-menu{max-height:80vh;overflow-y:scroll;scrollbar-width:thin;padding:0 4rem 2rem 0;border-right:1px solid rgb(201,201,201)}.test-page__component-section{padding:0 0 2rem 1rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: ComponentsListComponent, selector: "cfc-components-list", outputs: ["selectedComponent"] }, { kind: "component", type: TestComponentComponent, selector: "cfc-test-component", inputs: ["selectedComponent"] }, { kind: "component", type: BreadcrumbComponent, selector: "cfc-breadcrumb" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestPageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-test-page', template: "<div fxLayout=\"row\">\r\n  <aside class=\"test-page__aside-menu\">\r\n    <cfc-components-list\r\n      (selectedComponent)=\"onSelectComponent($event)\"\r\n    ></cfc-components-list>\r\n  </aside>\r\n\r\n  <main\r\n    class=\"test-page__component-section\"\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"stretch center\">\r\n    <div fxLayoutAlign=\"start start\" style=\"width: 100%; margin-bottom: 1rem;\">\r\n      <cfc-breadcrumb></cfc-breadcrumb>\r\n    </div>\r\n    <cfc-test-component\r\n      [selectedComponent]='selectedComponent'\r\n    ></cfc-test-component>\r\n  </main>\r\n</div>\r\n", styles: [".test-page__aside-menu{max-height:80vh;overflow-y:scroll;scrollbar-width:thin;padding:0 4rem 2rem 0;border-right:1px solid rgb(201,201,201)}.test-page__component-section{padding:0 0 2rem 1rem;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });

dayjs.extend(localeData);
class DayjsDateAdapter extends DateAdapter {
    locale;
    constructor(locale) {
        super();
        this.locale = locale;
        dayjs.locale(locale);
    }
    getYear(date) {
        return date.year();
    }
    getMonth(date) {
        return date.month();
    }
    getDate(date) {
        return date.date();
    }
    getDayOfWeek(date) {
        return date.day();
    }
    getMonthNames(style) {
        return style === 'long'
            ? dayjs.months()
            : dayjs.monthsShort();
    }
    getDateNames() {
        const dateNames = [];
        for (let i = 1; i <= 31; i++) {
            dateNames.push(String(i));
        }
        return dateNames;
    }
    getDayOfWeekNames(style) {
        return style === 'long'
            ? dayjs.weekdays()
            : dayjs.weekdaysShort();
    }
    getYearName(date) {
        return date.format('YYYY');
    }
    getFirstDayOfWeek() {
        return 0;
    }
    getNumDaysInMonth(date) {
        return date.daysInMonth();
    }
    clone(date) {
        return date.clone();
    }
    createDate(year, month, date) {
        // Corrigido: usar o método dayjs() para criar a data
        return dayjs(new Date(year, month, date));
    }
    today() {
        return dayjs();
    }
    parse(value, parseFormat) {
        if (value && typeof value === 'string') {
            return dayjs(value, parseFormat);
        }
        else if (value instanceof Date) {
            return dayjs(value);
        }
        else if (typeof value === 'number') {
            return dayjs(value);
        }
        else if (dayjs.isDayjs(value)) {
            return dayjs(value).locale(this.locale);
        }
        return null;
    }
    format(date, displayFormat) {
        if (!this.isValid(date)) {
            throw Error('DayjsDateAdapter: Cannot format invalid date.');
        }
        return date.locale(this.locale).format(displayFormat);
    }
    addCalendarYears(date, years) {
        return date.add(years, 'year');
    }
    addCalendarMonths(date, months) {
        return date.add(months, 'month');
    }
    addCalendarDays(date, days) {
        return date.add(days, 'day');
    }
    toIso8601(date) {
        return date.toISOString();
    }
    deserialize(value) {
        let date;
        if (value instanceof Date) {
            date = dayjs(value);
        }
        if (typeof value === 'string') {
            if (!value) {
                return null;
            }
            date = dayjs(value).locale(this.locale);
        }
        if (date && this.isValid(date)) {
            return date;
        }
        return super.deserialize(value);
    }
    isDateInstance(obj) {
        return dayjs.isDayjs(obj);
    }
    isValid(date) {
        return date && date.isValid();
    }
    invalid() {
        return dayjs(null);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayjsDateAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayjsDateAdapter });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DayjsDateAdapter, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAT_DATE_LOCALE]
                }] }] });

class ControllerDirective {
    el;
    directiveName;
    directiveNames;
    applyDirective;
    applyDirectives;
    constructor(el) {
        this.el = el;
    }
    ngOnChanges() {
        this.controlDirectives();
    }
    controlDirectives() {
        if (this.applyDirective && this.directiveName) {
            this.updateDirective(this.applyDirective, this.directiveName);
        }
        else {
            this.updateDirectives();
        }
    }
    updateDirective(directiveFlag, directiveName) {
        if ((typeof directiveFlag === 'boolean' && directiveFlag) || (typeof directiveFlag === 'string' && directiveFlag === 'true')) {
            this.el.nativeElement.setAttribute(directiveName, '');
        }
        else {
            this.el.nativeElement.removeAttribute(directiveName);
        }
    }
    updateDirectives() {
        if (!this.directiveNames)
            return;
        if (Array.isArray(this.directiveNames)) {
            this.directiveNames.forEach((directiveName, index) => {
                if (this.applyDirectives && Array.isArray(this.applyDirectives)) {
                    this.updateDirective(this.applyDirectives[index], directiveName);
                }
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ControllerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ControllerDirective, selector: "[cfcDirectiveController]", inputs: { directiveName: "directiveName", directiveNames: "directiveNames", applyDirective: "applyDirective", applyDirectives: "applyDirectives" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ControllerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[cfcDirectiveController]'
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { directiveName: [{
                type: Input
            }], directiveNames: [{
                type: Input
            }], applyDirective: [{
                type: Input
            }], applyDirectives: [{
                type: Input
            }] } });

class CardHeaderComponent {
    avatarType;
    avatarUrl;
    avatarName;
    title;
    subtitle;
    avatarDensities = AvatarDensity;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardHeaderComponent, selector: "cfc-card-header", inputs: { avatarType: "avatarType", avatarUrl: "avatarUrl", avatarName: "avatarName", title: "title", subtitle: "subtitle" }, ngImport: i0, template: "<div class=\"card-header\">\r\n  <div class=\"d-flex\">\r\n    <cfc-avatar\r\n      *ngIf=\"avatarType\"\r\n      [type]=\"avatarType\"\r\n      [imageUrl]=\"avatarUrl\"\r\n      [density]=\"avatarDensities.medium\">\r\n    </cfc-avatar>\r\n    <div class=\"ml-3\">\r\n      <div class=\"text-weight-semi-bold text-up-02\">\r\n        {{ title }}\r\n      </div>\r\n      <div>\r\n        {{ subtitle }}\r\n      </div>\r\n    </div>\r\n    <div class=\"ml-auto\">\r\n      <cfc-button\r\n        [circle]=\"true\"\r\n        icon=\"ellipsis-v\"\r\n      ></cfc-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AvatarComponent, selector: "cfc-avatar", inputs: ["type", "name", "density", "imageUrl"] }, { kind: "component", type: ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"], outputs: ["onClick"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-card-header', template: "<div class=\"card-header\">\r\n  <div class=\"d-flex\">\r\n    <cfc-avatar\r\n      *ngIf=\"avatarType\"\r\n      [type]=\"avatarType\"\r\n      [imageUrl]=\"avatarUrl\"\r\n      [density]=\"avatarDensities.medium\">\r\n    </cfc-avatar>\r\n    <div class=\"ml-3\">\r\n      <div class=\"text-weight-semi-bold text-up-02\">\r\n        {{ title }}\r\n      </div>\r\n      <div>\r\n        {{ subtitle }}\r\n      </div>\r\n    </div>\r\n    <div class=\"ml-auto\">\r\n      <cfc-button\r\n        [circle]=\"true\"\r\n        icon=\"ellipsis-v\"\r\n      ></cfc-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { avatarType: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], avatarName: [{
                type: Input
            }], title: [{
                type: Input
            }], subtitle: [{
                type: Input
            }] } });

class CardFooterComponent {
    buttonLabel;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardFooterComponent, selector: "cfc-card-footer", inputs: { buttonLabel: "buttonLabel" }, ngImport: i0, template: "<div class=\"card-footer\">\r\n  <div class=\"d-flex\">\r\n    <div>\r\n      <cfc-button\r\n        [label]=\"buttonLabel\"\r\n        [highlight]=\"true\"\r\n      ></cfc-button>\r\n    </div>\r\n    <div class=\"ml-auto\">\r\n      <cfc-button\r\n        [circle]=\"true\"\r\n        icon=\"share-alt\"\r\n      ></cfc-button>\r\n      <cfc-button\r\n        [circle]=\"true\"\r\n        icon=\"heart\"\r\n      ></cfc-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"], outputs: ["onClick"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardFooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-card-footer', template: "<div class=\"card-footer\">\r\n  <div class=\"d-flex\">\r\n    <div>\r\n      <cfc-button\r\n        [label]=\"buttonLabel\"\r\n        [highlight]=\"true\"\r\n      ></cfc-button>\r\n    </div>\r\n    <div class=\"ml-auto\">\r\n      <cfc-button\r\n        [circle]=\"true\"\r\n        icon=\"share-alt\"\r\n      ></cfc-button>\r\n      <cfc-button\r\n        [circle]=\"true\"\r\n        icon=\"heart\"\r\n      ></cfc-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { buttonLabel: [{
                type: Input
            }] } });

class IllustrationStateComponent {
    // @Input() illustration!: IllustrationType;
    illustrationUrl = '';
    primaryText;
    secondaryText;
    suportText;
    illustrations = IllustrationType;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IllustrationStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IllustrationStateComponent, selector: "cfc-illustration-state", inputs: { illustrationUrl: "illustrationUrl", primaryText: "primaryText", secondaryText: "secondaryText", suportText: "suportText" }, ngImport: i0, template: "<div\r\n  fxFlex=\"grow\"\r\n  fxFlex.gt-sm=\"grow\"\r\n  fxLayout=\"row\"\r\n  fxLayout.lt-sm=\"column\"\r\n  fxLayoutAlign=\"center center\"\r\n  class=\"mx-2 gap-3\">\r\n  <div\r\n    class=\"m-3\"\r\n    fxFlex=\"40%\">\r\n    <img\r\n      [src]=\"illustrationUrl\"\r\n      alt=\"imagem de erro\"\r\n      style=\"object-fit: cover;\"\r\n      />\r\n  </div>\r\n\r\n  <div\r\n    fxFlex.gt-sm=\"60%\"\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"start start\"\r\n    fxLayoutAlign.lt-sm=\"center center\">\r\n    <section\r\n      class=\"text-support-03\">\r\n      <p\r\n        class=\"text-up-06 text-semi-bold my-3 text-blue-warm-60 text-left\">\r\n        {{ primaryText }}\r\n      </p>\r\n    </section>\r\n    <section\r\n      *ngIf=\"secondaryText\"\r\n      class=\"text-secondary-06\">\r\n      <p\r\n        class=\"text-up-03 text-medium text-left my-3\">\r\n        {{ secondaryText }}\r\n      </p>\r\n    </section>\r\n    <section\r\n      *ngIf=\"suportText\">\r\n      <p\r\n        class=\"my-3 text-left text-sm-justify\">\r\n        {{ suportText }}\r\n      </p>\r\n    </section>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IllustrationStateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cfc-illustration-state', template: "<div\r\n  fxFlex=\"grow\"\r\n  fxFlex.gt-sm=\"grow\"\r\n  fxLayout=\"row\"\r\n  fxLayout.lt-sm=\"column\"\r\n  fxLayoutAlign=\"center center\"\r\n  class=\"mx-2 gap-3\">\r\n  <div\r\n    class=\"m-3\"\r\n    fxFlex=\"40%\">\r\n    <img\r\n      [src]=\"illustrationUrl\"\r\n      alt=\"imagem de erro\"\r\n      style=\"object-fit: cover;\"\r\n      />\r\n  </div>\r\n\r\n  <div\r\n    fxFlex.gt-sm=\"60%\"\r\n    fxLayout=\"column\"\r\n    fxLayoutAlign=\"start start\"\r\n    fxLayoutAlign.lt-sm=\"center center\">\r\n    <section\r\n      class=\"text-support-03\">\r\n      <p\r\n        class=\"text-up-06 text-semi-bold my-3 text-blue-warm-60 text-left\">\r\n        {{ primaryText }}\r\n      </p>\r\n    </section>\r\n    <section\r\n      *ngIf=\"secondaryText\"\r\n      class=\"text-secondary-06\">\r\n      <p\r\n        class=\"text-up-03 text-medium text-left my-3\">\r\n        {{ secondaryText }}\r\n      </p>\r\n    </section>\r\n    <section\r\n      *ngIf=\"suportText\">\r\n      <p\r\n        class=\"my-3 text-left text-sm-justify\">\r\n        {{ suportText }}\r\n      </p>\r\n    </section>\r\n  </div>\r\n</div>\r\n" }]
        }], propDecorators: { illustrationUrl: [{
                type: Input
            }], primaryText: [{
                type: Input
            }], secondaryText: [{
                type: Input
            }], suportText: [{
                type: Input
            }] } });

class FullWidthDirective {
    el;
    isFullWidth = true;
    constructor(el) {
        this.el = el;
    }
    get width() {
        this.el.nativeElement.style.width = this.isFullWidth ? '100%' : '';
        return this.isFullWidth ? '100%' : 'auto';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullWidthDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FullWidthDirective, selector: "[fullWidth]", inputs: { isFullWidth: "isFullWidth" }, host: { properties: { "style.width": "this.width" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FullWidthDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fullWidth]'
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isFullWidth: [{
                type: Input
            }], width: [{
                type: HostBinding,
                args: ['style.width']
            }] } });

class ClickOutsideDirective {
    elementRef;
    renderer;
    enableClickOutside = true;
    clickOutside = new EventEmitter();
    unlisten = null;
    constructor(elementRef, renderer) {
        this.elementRef = elementRef;
        this.renderer = renderer;
    }
    ngOnDestroy() {
        this.disableClickListener();
    }
    ngOnChanges(changes) {
        if (changes['enableClickOutside']) {
            if (this.enableClickOutside) {
                this.enableClickListener();
            }
            else {
                this.disableClickListener();
            }
        }
    }
    enableClickListener() {
        this.unlisten = this.renderer.listen('document', 'click', (event) => {
            this.onOutsideClick(event);
        });
    }
    disableClickListener() {
        if (this.unlisten) {
            this.unlisten();
            this.unlisten = null;
        }
    }
    onOutsideClick(event) {
        const targetElement = event.target;
        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: { enableClickOutside: "enableClickOutside" }, outputs: { clickOutside: "clickOutside" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickOutsideDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[clickOutside]',
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { enableClickOutside: [{
                type: Input
            }], clickOutside: [{
                type: Output
            }] } });

class CfcDsModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CfcDsModule, declarations: [CfcDsRootComponent,
            TestPageComponent,
            ComponentsListComponent,
            TestComponentComponent,
            AvatarComponent,
            BreadcrumbComponent,
            ButtonComponent,
            CardComponent,
            CardContentComponent,
            CardHeaderComponent,
            CardFooterComponent,
            CarouselComponent,
            CheckboxesComponent,
            CheckboxOptionComponent,
            CollapseComponent,
            CookieBarComponent,
            DatetimerPickerComponent,
            DividerComponent,
            FooterComponent,
            HeaderComponent,
            IconComponent,
            InputComponent,
            IllustrationStateComponent,
            ItemComponent,
            ListComponent,
            LoadingComponent,
            LogoComponent,
            MagicButtonComponent,
            MenuComponent,
            MessageComponent,
            ModalComponent,
            NotificationComponent,
            NotificationPanelComponent,
            PageContentComponent,
            PaginationComponent,
            RadioComponent,
            ScrimComponent,
            SelectComponent,
            SignInComponent,
            SkiplinkComponent,
            SliderComponent,
            SwitchComponent,
            TabComponent,
            TableComponent,
            TagComponent,
            TextareaComponent,
            TimerComponent,
            TooltipComponent,
            UploadComponent,
            WizardComponent,
            ClickOutsideDirective,
            ControllerDirective,
            FullWidthDirective], imports: [CommonModule,
            RouterModule,
            ReactiveFormsModule,
            FormsModule,
            FlexLayoutModule], exports: [AvatarComponent,
            BreadcrumbComponent,
            ButtonComponent,
            CardComponent,
            CarouselComponent,
            CheckboxesComponent,
            CheckboxOptionComponent,
            CollapseComponent,
            CookieBarComponent,
            DatetimerPickerComponent,
            DividerComponent,
            FooterComponent,
            HeaderComponent,
            IconComponent,
            InputComponent,
            ItemComponent,
            ListComponent,
            LoadingComponent,
            LogoComponent,
            MagicButtonComponent,
            MenuComponent,
            MessageComponent,
            ModalComponent,
            NotificationComponent,
            NotificationPanelComponent,
            PageContentComponent,
            PaginationComponent,
            RadioComponent,
            ScrimComponent,
            SelectComponent,
            SignInComponent,
            SkiplinkComponent,
            SliderComponent,
            SwitchComponent,
            TabComponent,
            TableComponent,
            TagComponent,
            IllustrationStateComponent,
            TextareaComponent,
            TimerComponent,
            TooltipComponent,
            UploadComponent,
            WizardComponent,
            ClickOutsideDirective,
            ControllerDirective,
            FullWidthDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsModule, providers: [
            provideHttpClient(),
            { provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },
            { provide: DateAdapter, useClass: DayjsDateAdapter }
        ], imports: [CommonModule,
            RouterModule,
            ReactiveFormsModule,
            FormsModule,
            FlexLayoutModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        RouterModule,
                        ReactiveFormsModule,
                        FormsModule,
                        FlexLayoutModule,
                    ],
                    declarations: [
                        CfcDsRootComponent,
                        TestPageComponent,
                        ComponentsListComponent,
                        TestComponentComponent,
                        AvatarComponent,
                        BreadcrumbComponent,
                        ButtonComponent,
                        CardComponent,
                        CardContentComponent,
                        CardHeaderComponent,
                        CardFooterComponent,
                        CarouselComponent,
                        CheckboxesComponent,
                        CheckboxOptionComponent,
                        CollapseComponent,
                        CookieBarComponent,
                        DatetimerPickerComponent,
                        DividerComponent,
                        FooterComponent,
                        HeaderComponent,
                        IconComponent,
                        InputComponent,
                        IllustrationStateComponent,
                        ItemComponent,
                        ListComponent,
                        LoadingComponent,
                        LogoComponent,
                        MagicButtonComponent,
                        MenuComponent,
                        MessageComponent,
                        ModalComponent,
                        NotificationComponent,
                        NotificationPanelComponent,
                        PageContentComponent,
                        PaginationComponent,
                        RadioComponent,
                        ScrimComponent,
                        SelectComponent,
                        SignInComponent,
                        SkiplinkComponent,
                        SliderComponent,
                        SwitchComponent,
                        TabComponent,
                        TableComponent,
                        TagComponent,
                        TextareaComponent,
                        TimerComponent,
                        TooltipComponent,
                        UploadComponent,
                        WizardComponent,
                        ClickOutsideDirective,
                        ControllerDirective,
                        FullWidthDirective
                    ],
                    exports: [
                        AvatarComponent,
                        BreadcrumbComponent,
                        ButtonComponent,
                        CardComponent,
                        CarouselComponent,
                        CheckboxesComponent,
                        CheckboxOptionComponent,
                        CollapseComponent,
                        CookieBarComponent,
                        DatetimerPickerComponent,
                        DividerComponent,
                        FooterComponent,
                        HeaderComponent,
                        IconComponent,
                        InputComponent,
                        ItemComponent,
                        ListComponent,
                        LoadingComponent,
                        LogoComponent,
                        MagicButtonComponent,
                        MenuComponent,
                        MessageComponent,
                        ModalComponent,
                        NotificationComponent,
                        NotificationPanelComponent,
                        PageContentComponent,
                        PaginationComponent,
                        RadioComponent,
                        ScrimComponent,
                        SelectComponent,
                        SignInComponent,
                        SkiplinkComponent,
                        SliderComponent,
                        SwitchComponent,
                        TabComponent,
                        TableComponent,
                        TagComponent,
                        IllustrationStateComponent,
                        TextareaComponent,
                        TimerComponent,
                        TooltipComponent,
                        UploadComponent,
                        WizardComponent,
                        ClickOutsideDirective,
                        ControllerDirective,
                        FullWidthDirective
                    ],
                    providers: [
                        provideHttpClient(),
                        { provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },
                        { provide: DateAdapter, useClass: DayjsDateAdapter }
                    ],
                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                }]
        }] });

var MenuType;
(function (MenuType) {
    MenuType["float"] = "float";
    MenuType["push"] = "push";
    MenuType["context"] = "context";
})(MenuType || (MenuType = {}));

var MenuGroupment;
(function (MenuGroupment) {
    MenuGroupment["expansion"] = "expansion";
    MenuGroupment["divider"] = "divider";
    MenuGroupment["label"] = "label";
})(MenuGroupment || (MenuGroupment = {}));

/*
 * Public API Surface of cfc-ds
*/

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

export { AvatarComponent, AvatarDensity, AvatarType, BreadcrumbComponent, ButtonComponent, ButtonDensity, ButtonType, CardComponent, CarouselComponent, CfcDsModule, CheckboxOptionComponent, CheckboxOptionState, CheckboxOptionType, CheckboxesComponent, ClickOutsideDirective, CollapseComponent, ControllerDirective, CookieBarComponent, DatetimerPickerComponent, DividerAxis, DividerComponent, DividerDensity, DividerMode, DividerType, FooterComponent, FullWidthDirective, HeaderComponent, HeaderViewMode, IconComponent, IllustrationStateComponent, IllustrationType, InputComponent, InputDensity, InputState, ItemComponent, ListComponent, LoadingComponent, LoadingService, LogoComponent, LogoViewMode, MagicButtonComponent, MenuComponent, MenuGroupment, MenuType, MessageComponent, MessageState, MessageType, ModalComponent, NotificationComponent, NotificationPanelComponent, PageContentComponent, PaginationComponent, RadioComponent, ScrimComponent, SelectComponent, SignInComponent, SignInDensity, SignInMode, SignInType, SkiplinkComponent, SliderComponent, SwitchComponent, TabComponent, TableComponent, TagComponent, TextareaComponent, TimerComponent, TimerType, TooltipComponent, UploadComponent, WizardComponent };
//# sourceMappingURL=cfc-ds.mjs.map