cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
3,082 lines • 383 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, ChangeDetectionStrategy, Injectable, Optional, Inject, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import * as i2$1 from '@angular/forms';
import { NgControl, Validators, 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 i3 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 = [];
homeUrl;
/** 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();
});
}
getHomeUrl() {
if (!this.homeUrl) {
return '/';
}
return this.homeUrl;
}
/** 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", inputs: { homeUrl: "homeUrl" }, 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]=\"getHomeUrl()\"\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]=\"getHomeUrl()\"\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 }], propDecorators: { homeUrl: [{
type: Input
}] } });
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: i3.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: i3.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: i3.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: i3.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: i3.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: i3.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: i3.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: i3.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 = {}));
class CustomValueAccessor {
injector;
id = crypto.randomUUID();
disabled = false;
required = false;
ngControl;
innerValue;
onChange = () => { };
onTouched = () => { };
constructor(injector) {
this.injector = injector;
this.ngControl = this.injector.get(NgControl, null);
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
ngOnInit() {
if (this.ngControl?.control?.validator) {
const validatorResult = this.ngControl?.control?.validator(this.ngControl?.control ?? undefined);
this.required = !!validatorResult?.[Validators.required.name];
}
}
get value() {
return this.innerValue;
}
get valid() {
return this.ngControl?.valid;
}
get invalid() {
return this.ngControl?.invalid;
}
get hasErrors() {
if (this.ngControl) {
const { invalid, dirty, touched } = this.ngControl;
return invalid && (dirty || touched);
}
return false;
}
set value(value) {
if (this.innerValue !== value) {
this.innerValue = value;
this.onChange(value);
}
}
writeValue(value) {
this.innerValue = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomValueAccessor, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomValueAccessor, selector: "ng-component", ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomValueAccessor, decorators: [{
type: Component,
args: [{
template: '',
}]
}], ctorParameters: () => [{ type: i0.Injector }] });
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @angular-eslint/no-output-on-prefix */
class InputComponent extends CustomValueAccessor {
buttonAriaLabel = '';
formControlName = null;
isPassword = false;
isHighlight = false;
inverted = false;
labelInline = false;
state = InputState.default;
density = InputDensity.medium;
buttonIcon;
label;
type;
placeholder;
icon;
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: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputComponent, selector: "cfc-input", inputs: { 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: { onInput: "onInput", onIconClicked: "onIconClicked", onIconSubmited: "onIconSubmited" }, usesInheritance: true, 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($event)\" />\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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.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($event)\" />\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: { 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
}], 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 {
router;
isMenuVisible = false;
menuItems = [];
constructor(router) {
this.router = router;
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.closeMenu();
}
});
}
ngOnInit() {
this.menuItems.forEach((menuItem) => {
menuItem.isOpen = false; // Initialize all menus as closed
});
}
toggleMenu() {
this.isMenuVisible = !this.isMenuVisible;
}
closeMenu() {
this.isMenuVisible = false;
}
toggleSubMenu(menuItem) {
menuItem.isOpen = !menuItem.isOpen;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "cfc-menu", inputs: { isMenuVisible: "isMenuVisible", menuItems: "menuItems" }, ngImport: i0, template: "<div class=\"row\">\r\n <div\r\n class=\"br-menu fixed\"\r\n [ngClass]=\"{'active': isMenuVisible}\"\r\n id=\"main-navigation\">\r\n <div class=\"menu-container menu-option\">\r\n <div class=\"menu-panel\">\r\n <nav class=\"menu-body\" role=\"tree\">\r\n <ng-container *ngFor=\"let menuItem of menuItems\">\r\n <div\r\n class=\"menu-folder\">\r\n <a\r\n class=\"menu-item d-flex align-items-center\"\r\n [id]=\"menuItem.id\"\r\n (click)=\"toggleSubMenu(menuItem)\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"menuItem.iconName\"\r\n [ngClass]=\"'fas fa-' + menuItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ menuItem.label }}\r\n </span>\r\n <span class=\"support\">\r\n <i\r\n [ngClass]=\"{\r\n 'fas fa-angle-down': !menuItem.isOpen,\r\n 'fas fa-angle-top': menuItem.isOpen\r\n }\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n </a>\r\n </div>\r\n <ul\r\n *ngIf=\"menuItem.isOpen\">\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </ng-container>\r\n <!-- <div class=\"menu-folder\">\r\n <a\r\n class=\"menu-item\"\r\n role=\"treeitem\">\r\n <span class=\"icon\"><i class=\"fas fa-bell\" aria-hidden=\"true\"></i></span>\r\n <span class=\"content\">Camada 1</span>\r\n </a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </div>\r\n <div class=\"menu-folder\"><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-bell\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 1</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </div>\r\n <div class=\"menu-folder\"><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-bell\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 1</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </div> -->\r\n </nav>\r\n </div>\r\n <div\r\n class=\"menu-scrim\"\r\n data-dismiss=\"menu\"\r\n tabindex=\"0\"\r\n (click)=\"toggleMenu()\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div\r\n class=\"br-menu fixed\"\r\n [ngClass]=\"{'active': isMenuVisible}\"\r\n id=\"main-navigation\">\r\n <div class=\"menu-container menu-option\">\r\n <div class=\"menu-painel\">\r\n <nav class=\"menu-body\" role=\"tree\">\r\n <div class=\"menu-folder\">\r\n <ul>\r\n <ng-container *ngFor=\"let menuItem of menuItems\">\r\n <li class=\"divider\">\r\n <div\r\n *ngIf=\"menuItem.list; else linkTemplate\"\r\n fxLayout=\"column\"\r\n class=\"menu-item\">\r\n <a\r\n [id]=\"menuItem.id\"\r\n (click)=\"toggleSubMenu(menuItem)\"\r\n class=\"d-flex align-items-center\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"menuItem.iconName\"\r\n [ngClass]=\"'fas fa-' + menuItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ menuItem.label }}\r\n </span>\r\n <span class=\"support\">\r\n <i\r\n [ngClass]=\"{\r\n 'fas fa-angle-down': !menuItem.isOpen,\r\n 'fas fa-angle-top': menuItem.isOpen\r\n }\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <ul\r\n *ngIf=\"menuItem.isOpen\"\r\n class=\"meni\">\r\n <li *ngFor=\"let subItem of menuItem.list\">\r\n <a\r\n [routerLink]=\"subItem.url\"\r\n class=\"menu-item\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"subItem.iconName\"\r\n [ngClass]=\"'fas fa-' + subItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ subItem.label }}\r\n </span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ng-template #linkTemplate>\r\n <a\r\n [id]=\"menuItem.id\"\r\n [routerLink]=\"menuItem.url\"\r\n class=\"menu-item\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"menuItem.iconName\"\r\n [ngClass]=\"'fas fa-' + menuItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ menuItem.label }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </nav>\r\n </div>\r\n <div\r\n class=\"menu-scrim\"\r\n data-dismiss=\"menu\"\r\n tabindex=\"0\"\r\n (click)=\"toggleMenu()\">\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n\r\n\r\n <div class=\"col\">\r\n <div class=\"d-flex align-items-center\">\r\n <div>\r\n <button\r\n class=\"br-button small circle\"\r\n type=\"button\"\r\n aria-label=\"Menu\"\r\n data-toggle=\"menu\"\r\n data-target=\"#main-navigation\"\r\n (click)=\"toggleMenu()\">\r\n <i\r\n class=\"fas fa-bars\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".row{margin:10px!important}.menu-option{position:fixed;margin-top:70px;width:100%;box-shadow:0 4px 8px #0000001a;z-index:998}a{text-decoration:none!important}.menu-item{border-bottom:1px solid #dcdcdc}.br-menu{--menu-background-submenu: none}.br-menu .menu-painel{--focus-offset: calc(var(--spacing-scale-half)* -1);background:var(--background);display:flex;flex-direction:column;max-height:100vh;position:fixed;top:69px;min-width:270px;z-index:999;height:100vh}.br-menu .menu-scrim{min-height:100vh}.menu-folder .submenu{padding-left:1rem}\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: i3.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=\"row\">\r\n <div\r\n class=\"br-menu fixed\"\r\n [ngClass]=\"{'active': isMenuVisible}\"\r\n id=\"main-navigation\">\r\n <div class=\"menu-container menu-option\">\r\n <div class=\"menu-panel\">\r\n <nav class=\"menu-body\" role=\"tree\">\r\n <ng-container *ngFor=\"let menuItem of menuItems\">\r\n <div\r\n class=\"menu-folder\">\r\n <a\r\n class=\"menu-item d-flex align-items-center\"\r\n [id]=\"menuItem.id\"\r\n (click)=\"toggleSubMenu(menuItem)\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"menuItem.iconName\"\r\n [ngClass]=\"'fas fa-' + menuItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ menuItem.label }}\r\n </span>\r\n <span class=\"support\">\r\n <i\r\n [ngClass]=\"{\r\n 'fas fa-angle-down': !menuItem.isOpen,\r\n 'fas fa-angle-top': menuItem.isOpen\r\n }\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n </a>\r\n </div>\r\n <ul\r\n *ngIf=\"menuItem.isOpen\">\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </ng-container>\r\n <!-- <div class=\"menu-folder\">\r\n <a\r\n class=\"menu-item\"\r\n role=\"treeitem\">\r\n <span class=\"icon\"><i class=\"fas fa-bell\" aria-hidden=\"true\"></i></span>\r\n <span class=\"content\">Camada 1</span>\r\n </a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </div>\r\n <div class=\"menu-folder\"><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-bell\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 1</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </div>\r\n <div class=\"menu-folder\"><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-bell\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 1</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-heart\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-address-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"icon\"><i class=\"fas fa-tree\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a>\r\n <ul>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\" role=\"treeitem\"><span class=\"content\">Camada 4</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-moon\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 3</span></a></li>\r\n </ul>\r\n </li>\r\n <li><a class=\"menu-item\" href=\"javascript: void(0)\"><span class=\"icon\"><i class=\"fas fa-archive\" aria-hidden=\"true\"></i></span><span class=\"content\">Camada 2</span></a></li>\r\n </ul>\r\n </div> -->\r\n </nav>\r\n </div>\r\n <div\r\n class=\"menu-scrim\"\r\n data-dismiss=\"menu\"\r\n tabindex=\"0\"\r\n (click)=\"toggleMenu()\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div\r\n class=\"br-menu fixed\"\r\n [ngClass]=\"{'active': isMenuVisible}\"\r\n id=\"main-navigation\">\r\n <div class=\"menu-container menu-option\">\r\n <div class=\"menu-painel\">\r\n <nav class=\"menu-body\" role=\"tree\">\r\n <div class=\"menu-folder\">\r\n <ul>\r\n <ng-container *ngFor=\"let menuItem of menuItems\">\r\n <li class=\"divider\">\r\n <div\r\n *ngIf=\"menuItem.list; else linkTemplate\"\r\n fxLayout=\"column\"\r\n class=\"menu-item\">\r\n <a\r\n [id]=\"menuItem.id\"\r\n (click)=\"toggleSubMenu(menuItem)\"\r\n class=\"d-flex align-items-center\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"menuItem.iconName\"\r\n [ngClass]=\"'fas fa-' + menuItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ menuItem.label }}\r\n </span>\r\n <span class=\"support\">\r\n <i\r\n [ngClass]=\"{\r\n 'fas fa-angle-down': !menuItem.isOpen,\r\n 'fas fa-angle-top': menuItem.isOpen\r\n }\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <ul\r\n *ngIf=\"menuItem.isOpen\"\r\n class=\"meni\">\r\n <li *ngFor=\"let subItem of menuItem.list\">\r\n <a\r\n [routerLink]=\"subItem.url\"\r\n class=\"menu-item\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"subItem.iconName\"\r\n [ngClass]=\"'fas fa-' + subItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ subItem.label }}\r\n </span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ng-template #linkTemplate>\r\n <a\r\n [id]=\"menuItem.id\"\r\n [routerLink]=\"menuItem.url\"\r\n class=\"menu-item\"\r\n role=\"treeitem\">\r\n <span class=\"icon\">\r\n <i\r\n *ngIf=\"menuItem.iconName\"\r\n [ngClass]=\"'fas fa-' + menuItem.iconName\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </span>\r\n <span class=\"content\">\r\n {{ menuItem.label }}\r\n </span>\r\n </a>\r\n </ng-template>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </nav>\r\n </div>\r\n <div\r\n class=\"menu-scrim\"\r\n data-dismiss=\"menu\"\r\n tabindex=\"0\"\r\n (click)=\"toggleMenu()\">\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n\r\n\r\n <div class=\"col\">\r\n <div class=\"d-flex align-items-center\">\r\n <div>\r\n <button\r\n class=\"br-button small circle\"\r\n type=\"button\"\r\n aria-label=\"Menu\"\r\n data-toggle=\"menu\"\r\n data-target=\"#main-navigation\"\r\n (click)=\"toggleMenu()\">\r\n <i\r\n class=\"fas fa-bars\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".row{margin:10px!important}.menu-option{position:fixed;margin-top:70px;width:100%;box-shadow:0 4px 8px #0000001a;z-index:998}a{text-decoration:none!important}.menu-item{border-bottom:1px solid #dcdcdc}.br-menu{--menu-background-submenu: none}.br-menu .menu-painel{--focus-offset: calc(var(--spacing-scale-half)* -1);background:var(--background);display:flex;flex-direction:column;max-height:100vh;position:fixed;top:69px;min-width:270px;z-index:999;height:100vh}.br-menu .menu-scrim{min-height:100vh}.menu-folder .submenu{padding-left:1rem}\n"] }]
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { isMenuVisible: [{
type: Input
}], menuItems: [{
type: Input
}] } });
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: i3.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: i3.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: i3.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;
multiple = false;
onChange = new EventEmitter();
selectDOM = null;
messageTypes = MessageType;
constructor(renderer) {
this.renderer = renderer;
}
ngAfterViewInit() {
this.adjustDimensions();
if (this.multiple) {
this.insertCheckBoxProperties();
}
}
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');
}
insertCheckBoxProperties() {
this.options = this.options.map((option) => {
return {
value: option.value,
label: option.label,
selected: option.selected ? true : false,
};
});
}
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", multiple: "multiple" }, 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 [multiple]=\"multiple\"\r\n [value]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n [options]=\"options\"\r\n (change)=\"onChange.emit($event)\">\r\n </br-select>\r\n</div>\r\n", styles: [":host{width:100%}\n"], 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"] }] });
}
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 [multiple]=\"multiple\"\r\n [value]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n [options]=\"options\"\r\n (change)=\"onChange.emit($event)\">\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
}], multiple: [{
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, label: '1', selected: true }];
constructor(cdr) {
this.cdr = cdr;
}
ngOnInit() {
this.updateAllItems();
this.updatePagination();
this.updateDisplayedData();
}
ngOnChanges(changes) {
if (changes['data'] || changes['allPages'] || changes['itemsPerPage'] || changes['allItems']) {
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.allItems = this.data.length;
this.default = true;
}
else {
this.default = false;
}
if (this.default) {
this.allPages = Math.ceil(this.allItems / this.itemsPerPage);
}
}
updateAllItems() {
this.allItems = this.allItems !== 0 ? this.allItems : this.data.length;
}
changeItemsPerPage(event) {
this.itemsPerPage = event.detail[0].label;
this.itemsPerPageChange.emit(event.detail[0].value);
this.currentPage = 1;
this.updateDisplayedData();
}
updatePagination() {
this.pagesArray = [];
const total = this.allPages || Math.ceil(this.allItems / this.itemsPerPage);
for (let i = 1; i <= total; i++) {
this.pagesArray.push({ value: i, label: `${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\"\r\n aria-label=\"pagina\u00E7\u00E3o\"\r\n [attr.data-total]=\"allItems\"\r\n [attr.data-current]=\"currentPage\"\r\n [attr.data-per-page]=\"itemsPerPage\">\r\n\r\n <div class=\"pagination-per-page\">\r\n <p\r\n class=\"mx-3 mb-0 d-flex align-items-center\"\r\n style=\"font-size: 14px; font-weight: 400;\">\r\n Exibir\r\n </p>\r\n <cfc-select\r\n id=\"pagination-per-page\"\r\n style=\"min-width: 100px; width: min-content;\"\r\n [options]=\"itemsPerPageOptions\"\r\n [(ngModel)]=\"itemsPerPageOptions\"\r\n (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 {{ currentPage }}-{{ allPages }} de {{ allItems }} itens\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-per-page\">\r\n <p\r\n class=\"mr-3 mb-0 d-flex align-items-center\"\r\n style=\"font-size: 14px; font-weight: 400;\">\r\n P\u00E1gina\r\n </p>\r\n <cfc-select\r\n style=\"min-width: 100px; width: min-content;\"\r\n ariaLabel=\"Exibir P\u00E1gina\"\r\n id=\"go-to-selection\"\r\n [disabled]=\"allPages === 1\"\r\n [value]=\"currentPage\"\r\n [options]=\"pagesArray\"\r\n (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\r\n class=\"br-button circle\"\r\n type=\"button\"\r\n aria-label=\"Voltar p\u00E1gina\"\r\n (click)=\"prevPage()\"\r\n >\r\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button\r\n class=\"br-button circle\"\r\n type=\"button\"\r\n aria-label=\"P\u00E1gina seguinte\"\r\n (click)=\"nextPage()\"\r\n >\r\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n</nav>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "multiple"], 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\"\r\n aria-label=\"pagina\u00E7\u00E3o\"\r\n [attr.data-total]=\"allItems\"\r\n [attr.data-current]=\"currentPage\"\r\n [attr.data-per-page]=\"itemsPerPage\">\r\n\r\n <div class=\"pagination-per-page\">\r\n <p\r\n class=\"mx-3 mb-0 d-flex align-items-center\"\r\n style=\"font-size: 14px; font-weight: 400;\">\r\n Exibir\r\n </p>\r\n <cfc-select\r\n id=\"pagination-per-page\"\r\n style=\"min-width: 100px; width: min-content;\"\r\n [options]=\"itemsPerPageOptions\"\r\n [(ngModel)]=\"itemsPerPageOptions\"\r\n (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 {{ currentPage }}-{{ allPages }} de {{ allItems }} itens\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-per-page\">\r\n <p\r\n class=\"mr-3 mb-0 d-flex align-items-center\"\r\n style=\"font-size: 14px; font-weight: 400;\">\r\n P\u00E1gina\r\n </p>\r\n <cfc-select\r\n style=\"min-width: 100px; width: min-content;\"\r\n ariaLabel=\"Exibir P\u00E1gina\"\r\n id=\"go-to-selection\"\r\n [disabled]=\"allPages === 1\"\r\n [value]=\"currentPage\"\r\n [options]=\"pagesArray\"\r\n (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\r\n class=\"br-button circle\"\r\n type=\"button\"\r\n aria-label=\"Voltar p\u00E1gina\"\r\n (click)=\"prevPage()\"\r\n >\r\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button\r\n class=\"br-button circle\"\r\n type=\"button\"\r\n aria-label=\"P\u00E1gina seguinte\"\r\n (click)=\"nextPage()\"\r\n >\r\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n</nav>\r\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: i3.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: i3.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 {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TooltipComponent, selector: "cfc-tooltip", ngImport: i0, template: "<br-tooltip>tooltip</br-tooltip>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-tooltip', template: "<br-tooltip>tooltip</br-tooltip>\r\n" }]
}] });
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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.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", inputs: ["homeUrl"] }, { 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: ["buttonAriaLabel", "formControlName", "isPassword", "isHighlight", "inverted", "labelInline", "state", "density", "buttonIcon", "label", "type", "placeholder", "icon"], outputs: ["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: ["isMenuVisible", "menuItems"] }, { 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", "multiple"], 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" }, { 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", inputs: ["homeUrl"] }] });
}
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