cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
578 lines • 275 kB
JavaScript
import { Component, Input, } from '@angular/core';
import { LogoViewMode } from '../../../enums/logo-view-mode.enum';
import { ButtonType } from '../../../enums/button-type.enum';
import { ButtonDensity } from '../../../enums/button-density.enum';
import { SignInType } from '../../../enums/sign-in-type.enum';
import { SignInDensity } from '../../../enums/sign-in-density.enum';
import { AvatarDensity } from '../../../enums/avatar-density.enum';
import { TooltipPlace } from '../../../enums/tooltip-place.enum';
import { HeaderViewMode } from '../../../enums/header-view-mode.enum';
import { InputState } from '../../../enums/input-state.enum';
import { InputDensity } from '../../../enums/input-density.enum';
import { AvatarType } from '../../../enums/avatar-type.enum';
import { DividerMode } from '../../../enums/divider-mode.enum';
import { DividerType } from '../../../enums/divider-type.enum';
import { DividerAxis } from '../../../enums/divider-axis.enum';
import { DividerDensity } from '../../../enums/divider-density.enum';
import { SignInMode } from '../../../enums/sign-in-mode.enum';
import { TimerType } from '../../../enums/timer-type.enum';
import { MessageType } from '../../../enums/message-type.enum';
import { MessageState } from '../../../enums/message-state.enum';
import { CheckboxOptionState } from '../../../enums/checkbox-option-state.enum';
import { CheckboxOptionType } from '../../../enums/checkbox-option-type.enum';
import { LoadingDensity } from '../../../enums/loading-density.enum';
import { ItemType } from '../../../enums/item-type.enum';
import { IllustrationType } from '../../../enums/illustration-type.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/flex-layout/flex";
import * as i4 from "../../../components/avatar/avatar.component";
import * as i5 from "../../../components/breadcrumb/breadcrumb.component";
import * as i6 from "../../../components/button/button.component";
import * as i7 from "../../../components/card/card.component";
import * as i8 from "../../../components/carousel/carousel.component";
import * as i9 from "../../../components/collapse/collapse.component";
import * as i10 from "../../../components/cookie-bar/cookie-bar.component";
import * as i11 from "../../../components/datetimer-picker/datetimer-picker.component";
import * as i12 from "../../../components/divider/divider.component";
import * as i13 from "../../../components/footer/footer.component";
import * as i14 from "../../../components/header/header.component";
import * as i15 from "../../../components/icon/icon.component";
import * as i16 from "../../../components/input/input.component";
import * as i17 from "../../../components/item/item.component";
import * as i18 from "../../../components/list/list.component";
import * as i19 from "../../../components/loading/loading.component";
import * as i20 from "../../../components/logo/logo.component";
import * as i21 from "../../../components/magic-button/magic-button.component";
import * as i22 from "../../../components/menu/menu.component";
import * as i23 from "../../../components/message/message.component";
import * as i24 from "../../../components/modal/modal.component";
import * as i25 from "../../../components/notification/notification.component";
import * as i26 from "../../../components/notification-panel/notification-panel.component";
import * as i27 from "../../../components/page-content/page-content.component";
import * as i28 from "../../../components/pagination/pagination.component";
import * as i29 from "../../../components/radio/radio.component";
import * as i30 from "../../../components/scrim/scrim.component";
import * as i31 from "../../../components/select/select.component";
import * as i32 from "../../../components/sign-in/sign-in.component";
import * as i33 from "../../../components/skiplink/skiplink.component";
import * as i34 from "../../../components/slider/slider.component";
import * as i35 from "../../../components/switch/switch.component";
import * as i36 from "../../../components/tab/tab.component";
import * as i37 from "../../../components/table/table.component";
import * as i38 from "../../../components/tag/tag.component";
import * as i39 from "../../../components/textarea/textarea.component";
import * as i40 from "../../../components/timer/timer.component";
import * as i41 from "../../../components/tooltip/tooltip.component";
import * as i42 from "../../../components/upload/upload.component";
import * as i43 from "../../../components/wizard/wizard.component";
export 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 = {
label: '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-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.label }},\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: 100p