cfc-ui-test
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
1 lines • 125 kB
Source Map (JSON)
{"version":3,"file":"cfc-ui-test.mjs","sources":["../../../projects/cfc-ui/src/lib/enums/avatar-density.enum.ts","../../../projects/cfc-ui/src/lib/enums/tooltip-place.enum.ts","../../../projects/cfc-ui/src/lib/directives/controller.directive.ts","../../../projects/cfc-ui/src/lib/components/avatar/avatar.component.ts","../../../projects/cfc-ui/src/lib/components/avatar/avatar.component.html","../../../projects/cfc-ui/src/lib/components/breadcrumb/breadcrumb.component.ts","../../../projects/cfc-ui/src/lib/components/breadcrumb/breadcrumb.component.html","../../../projects/cfc-ui/src/lib/enums/button-type.enum.ts","../../../projects/cfc-ui/src/lib/enums/button-density.enum.ts","../../../projects/cfc-ui/src/lib/components/button/button.component.ts","../../../projects/cfc-ui/src/lib/components/button/button.component.html","../../../projects/cfc-ui/src/lib/components/card/card.component.ts","../../../projects/cfc-ui/src/lib/components/card/card.component.html","../../../projects/cfc-ui/src/lib/components/carousel/carousel.component.ts","../../../projects/cfc-ui/src/lib/components/carousel/carousel.component.html","../../../projects/cfc-ui/src/lib/cfc-ui-root.component.ts","../../../projects/cfc-ui/src/lib/pages/storybook/storybook.component.ts","../../../projects/cfc-ui/src/lib/pages/storybook/storybook.component.html","../../../projects/cfc-ui/src/lib/constants/components.model.ts","../../../projects/cfc-ui/src/lib/pages/cfc-test-page/components-list/components-list.component.ts","../../../projects/cfc-ui/src/lib/pages/cfc-test-page/components-list/components-list.component.html","../../../projects/cfc-ui/src/lib/enums/logo-view-mode.enum.ts","../../../projects/cfc-ui/src/lib/enums/sign-in-type.enum.ts","../../../projects/cfc-ui/src/lib/enums/sign-in-density.enum.ts","../../../projects/cfc-ui/src/lib/enums/header-view-mode.enum.ts","../../../projects/cfc-ui/src/lib/components/checkbox/checkbox.component.ts","../../../projects/cfc-ui/src/lib/components/checkbox/checkbox.component.html","../../../projects/cfc-ui/src/lib/components/cookie-bar/cookie-bar.component.ts","../../../projects/cfc-ui/src/lib/components/cookie-bar/cookie-bar.component.html","../../../projects/cfc-ui/src/lib/components/datetimer-picker/datetimer-picker.component.ts","../../../projects/cfc-ui/src/lib/components/datetimer-picker/datetimer-picker.component.html","../../../projects/cfc-ui/src/lib/components/divider/divider.component.ts","../../../projects/cfc-ui/src/lib/components/divider/divider.component.html","../../../projects/cfc-ui/src/lib/components/footer/footer.component.ts","../../../projects/cfc-ui/src/lib/components/footer/footer.component.html","../../../projects/cfc-ui/src/lib/components/logo/logo.component.ts","../../../projects/cfc-ui/src/lib/components/logo/logo.component.html","../../../projects/cfc-ui/src/lib/components/sign-in/sign-in.component.ts","../../../projects/cfc-ui/src/lib/components/sign-in/sign-in.component.html","../../../projects/cfc-ui/src/lib/components/timer/timer.component.ts","../../../projects/cfc-ui/src/lib/components/timer/timer.component.html","../../../projects/cfc-ui/src/lib/components/header/header.component.ts","../../../projects/cfc-ui/src/lib/components/header/header.component.html","../../../projects/cfc-ui/src/lib/components/input/input.component.ts","../../../projects/cfc-ui/src/lib/components/input/input.component.html","../../../projects/cfc-ui/src/lib/components/list/list.component.ts","../../../projects/cfc-ui/src/lib/components/list/list.component.html","../../../projects/cfc-ui/src/lib/components/magic-button/magic-button.component.ts","../../../projects/cfc-ui/src/lib/components/magic-button/magic-button.component.html","../../../projects/cfc-ui/src/lib/components/menu/menu.component.ts","../../../projects/cfc-ui/src/lib/components/menu/menu.component.html","../../../projects/cfc-ui/src/lib/components/message/message.component.ts","../../../projects/cfc-ui/src/lib/components/message/message.component.html","../../../projects/cfc-ui/src/lib/components/modal/modal.component.ts","../../../projects/cfc-ui/src/lib/components/modal/modal.component.html","../../../projects/cfc-ui/src/lib/components/notification/notification.component.ts","../../../projects/cfc-ui/src/lib/components/notification/notification.component.html","../../../projects/cfc-ui/src/lib/components/notification-panel/notification-panel.component.ts","../../../projects/cfc-ui/src/lib/components/notification-panel/notification-panel.component.html","../../../projects/cfc-ui/src/lib/components/page-content/page-content.component.ts","../../../projects/cfc-ui/src/lib/components/page-content/page-content.component.html","../../../projects/cfc-ui/src/lib/components/pagination/pagination.component.ts","../../../projects/cfc-ui/src/lib/components/pagination/pagination.component.html","../../../projects/cfc-ui/src/lib/components/radio/radio.component.ts","../../../projects/cfc-ui/src/lib/components/radio/radio.component.html","../../../projects/cfc-ui/src/lib/components/scrim/scrim.component.ts","../../../projects/cfc-ui/src/lib/components/scrim/scrim.component.html","../../../projects/cfc-ui/src/lib/components/select/select.component.ts","../../../projects/cfc-ui/src/lib/components/select/select.component.html","../../../projects/cfc-ui/src/lib/components/skiplink/skiplink.component.ts","../../../projects/cfc-ui/src/lib/components/skiplink/skiplink.component.html","../../../projects/cfc-ui/src/lib/components/slider/slider.component.ts","../../../projects/cfc-ui/src/lib/components/slider/slider.component.html","../../../projects/cfc-ui/src/lib/components/switch/switch.component.ts","../../../projects/cfc-ui/src/lib/components/switch/switch.component.html","../../../projects/cfc-ui/src/lib/components/tab/tab.component.ts","../../../projects/cfc-ui/src/lib/components/tab/tab.component.html","../../../projects/cfc-ui/src/lib/components/table/table.component.ts","../../../projects/cfc-ui/src/lib/components/table/table.component.html","../../../projects/cfc-ui/src/lib/components/tag/tag.component.ts","../../../projects/cfc-ui/src/lib/components/tag/tag.component.html","../../../projects/cfc-ui/src/lib/components/textarea/textarea.component.ts","../../../projects/cfc-ui/src/lib/components/textarea/textarea.component.html","../../../projects/cfc-ui/src/lib/components/tooltip/tooltip.component.ts","../../../projects/cfc-ui/src/lib/components/tooltip/tooltip.component.html","../../../projects/cfc-ui/src/lib/components/upload/upload.component.ts","../../../projects/cfc-ui/src/lib/components/upload/upload.component.html","../../../projects/cfc-ui/src/lib/components/wizard/wizard.component.ts","../../../projects/cfc-ui/src/lib/components/wizard/wizard.component.html","../../../projects/cfc-ui/src/lib/pages/cfc-test-page/test-component/test-component.component.ts","../../../projects/cfc-ui/src/lib/pages/cfc-test-page/test-component/test-component.component.html","../../../projects/cfc-ui/src/lib/pages/cfc-test-page/test-page.component.ts","../../../projects/cfc-ui/src/lib/pages/cfc-test-page/test-page.component.html","../../../projects/cfc-ui/src/lib/cfc-ui.routing.module.ts","../../../projects/cfc-ui/src/lib/providers/daysjs-date-adapter.ts","../../../projects/cfc-ui/src/lib/cfc-ui.module.ts","../../../projects/cfc-ui/src/public-api.ts","../../../projects/cfc-ui/src/cfc-ui-test.ts"],"sourcesContent":["export enum AvatarDensity {\r\n large = \"large\",\r\n medium = \"medium\",\r\n small = \"small\"\r\n}\r\n","export enum TooltipPlace {\r\n top = \"top\",\r\n right = \"right\",\r\n bottom = \"bottom\",\r\n left = \"left\"\r\n}\r\n","import { Directive, ElementRef, Input, OnChanges } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[cfcDirectiveController]'\r\n})\r\nexport class ControllerDirective implements OnChanges {\r\n @Input() directiveName?: string;\r\n @Input() directiveNames?: string[];\r\n @Input() applyDirective?: boolean;\r\n @Input() applyDirectives?: boolean[];\r\n\r\n constructor(\r\n private el: ElementRef,\r\n ) { }\r\n\r\n ngOnChanges(): void {\r\n this.controlDirectives();\r\n }\r\n\r\n private controlDirectives(): void {\r\n if (this.applyDirective && this.directiveName) {\r\n this.updateDirective(this.applyDirective, this.directiveName);\r\n } else {\r\n this.updateDirectives();\r\n }\r\n\r\n }\r\n\r\n private updateDirective(directiveFlag: string | boolean, directiveName: string): void {\r\n if ((typeof directiveFlag === 'boolean' && directiveFlag) || (typeof directiveFlag === 'string' && directiveFlag === 'true')) {\r\n this.el.nativeElement.setAttribute(directiveName, '');\r\n } else {\r\n this.el.nativeElement.removeAttribute(directiveName);\r\n }\r\n }\r\n\r\n private updateDirectives(): void {\r\n if (!this.directiveNames) return;\r\n if (Array.isArray(this.directiveNames)) {\r\n this.directiveNames.forEach((directiveName: string, index: number) => {\r\n if (this.applyDirectives && Array.isArray(this.applyDirectives)) {\r\n this.updateDirective(this.applyDirectives[index], directiveName);\r\n }\r\n });\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { AvatarDensity } from '../../enums/avatar-density.enum';\r\nimport { TooltipPlace } from '../../enums/tooltip-place.enum';\r\n\r\n@Component({\r\n selector: 'cfc-avatar',\r\n templateUrl: './avatar.component.html',\r\n styleUrl: './avatar.component.scss'\r\n})\r\nexport class AvatarComponent {\r\n @Input() name!: string;\r\n @Input() density: AvatarDensity = AvatarDensity.medium;\r\n @Input() tooltipText?: string = 'tooltip CFC';\r\n @Input() tooltipPlace?: TooltipPlace = TooltipPlace.bottom;\r\n @Input() iconic = false;\r\n @Input() imageUrl?: string = '';\r\n}\r\n","<br-avatar\r\n cfcDirectiveController\r\n directiveName=\"iconic\"\r\n [applyDirective]=\"iconic\"\r\n [name]=\"name\"\r\n [density]=\"density\"\r\n tooltip\r\n [tooltip-text]=\"tooltipText\"\r\n [tooltip-place]=\"tooltipPlace\"\r\n [image]=\"imageUrl\"\r\n></br-avatar>\r\n","import { Component, Input } from '@angular/core';\r\nimport { BreadcrumbLink } from '../../models/breadcrumb.model';\r\n\r\n@Component({\r\n selector: 'cfc-breadcrumb',\r\n templateUrl: './breadcrumb.component.html',\r\n styleUrl: './breadcrumb.component.scss'\r\n})\r\nexport class BreadcrumbComponent {\r\n @Input() label!: string;\r\n @Input() links!: BreadcrumbLink[];\r\n}\r\n","<br-breadcrumb\r\n [label]=\"label\"\r\n [links]=\"links\"\r\n></br-breadcrumb>\r\n","export enum ButtonType {\r\n primary = \"primary\",\r\n secondary = \"secondary\"\r\n}\r\n","export enum ButtonDensity {\r\n large = \"large\",\r\n middle = \"middle\",\r\n small = \"small\",\r\n xsmall = \"xsmall\"\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { ButtonType } from '../../enums/button-type.enum';\r\nimport { ButtonDensity } from '../../enums/button-density.enum';\r\n\r\n@Component({\r\n selector: 'cfc-button',\r\n templateUrl: './button.component.html',\r\n styleUrl: './button.component.scss'\r\n})\r\nexport class ButtonComponent {\r\n @Input() label = 'button';\r\n @Input() type: ButtonType = ButtonType.primary;\r\n @Input() submit = false;\r\n @Input() circle = false;\r\n @Input() density: ButtonDensity = ButtonDensity.middle;\r\n @Input() disabled = false;\r\n @Input() block = false;\r\n @Input() icon = '';\r\n @Input() active = true;\r\n @Input() inverted = false;\r\n @Input() loading = false;\r\n\r\n}\r\n","<br-button\r\n cfcDirectiveController\r\n [directiveNames]=\"[\r\n 'circle',\r\n 'submit',\r\n 'disabled',\r\n 'block',\r\n 'active',\r\n 'inverted',\r\n 'loading'\r\n ]\"\r\n [applyDirectives]=\"[\r\n circle,\r\n submit,\r\n disabled,\r\n block,\r\n active,\r\n inverted,\r\n loading\r\n ]\"\r\n [label]=\"label\"\r\n [type]=\"type\"\r\n [icon]=\"icon\"\r\n [density]=\"density\"\r\n></br-button>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-card',\r\n templateUrl: './card.component.html',\r\n styleUrl: './card.component.scss'\r\n})\r\nexport class CardComponent { }\r\n","<br-card>\r\n\r\n</br-card>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-carousel',\r\n templateUrl: './carousel.component.html',\r\n styleUrl: './carousel.component.scss'\r\n})\r\nexport class CarouselComponent {\r\n\r\n}\r\n","<br-carousel></br-carousel>\r\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'cfc-ui-root',\n template: `\n <router-outlet></router-outlet>\n `,\n styles: ``\n})\nexport class CfcUiRootComponent { }\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'cfc-storybook',\n templateUrl: './storybook.component.html',\n styleUrls: ['./storybook.component.scss']\n})\nexport class StorybookComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n","<p>\n storybook works!\n</p>\n","export const components: string[] = [\r\n 'alert',\r\n 'avatar',\r\n 'breadcrumb',\r\n 'button',\r\n 'card',\r\n 'carousel',\r\n 'checkbox',\r\n 'collapse',\r\n 'cookie-bar',\r\n 'datetimer-picker',\r\n 'divider',\r\n 'footer',\r\n 'header',\r\n 'icon',\r\n 'input',\r\n 'list',\r\n 'logo',\r\n 'magic-button',\r\n 'menu',\r\n 'message',\r\n 'modal',\r\n 'notification',\r\n 'notification-panel',\r\n 'page-content',\r\n 'pagination',\r\n 'radio',\r\n 'scrim',\r\n 'select',\r\n 'sign-in',\r\n 'skiplink',\r\n 'slider',\r\n 'switch',\r\n 'tab',\r\n 'table',\r\n 'tag',\r\n 'textarea',\r\n 'timer',\r\n 'tooltip',\r\n 'upload',\r\n 'wizard'\r\n].sort();\r\n","import { ChangeDetectorRef, Component, EventEmitter, Output } from '@angular/core';\r\nimport { components } from '../../../constants/components.model';\r\n\r\n@Component({\r\n selector: 'cfc-components-list',\r\n templateUrl: './components-list.component.html',\r\n styleUrl: './components-list.component.scss'\r\n})\r\nexport class ComponentsListComponent {\r\n @Output() selectedComponent = new EventEmitter<string>();\r\n\r\n componentList: string[] = components;\r\n\r\n constructor(\r\n private cdr: ChangeDetectorRef\r\n ) { }\r\n\r\n onSelectComponent(componentName: string): void {\r\n this.selectedComponent.emit(componentName);\r\n this.cdr.detectChanges();\r\n }\r\n\r\n}\r\n","<!-- 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 componentName of componentList\"\r\n class=\"components-list__component-name\"\r\n (click)=\"onSelectComponent(componentName)\">\r\n <span>\r\n {{ componentName }}\r\n </span>\r\n </p>\r\n</div>\r\n","export enum LogoViewMode {\r\n default = \"default\",\r\n neutral = \"neutral\",\r\n voluntary = \"voluntary\"\r\n}\r\n","export enum SignInType {\r\n primary = \"primary\",\r\n secondary = \"secondary\"\r\n}\r\n","export enum SignInDensity {\r\n large = \"large\",\r\n middle = \"middle\",\r\n small = \"small\"\r\n}\r\n","export enum HeaderViewMode {\r\n default = \"default\",\r\n constrast = \"contrast\"\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-checkbox',\r\n templateUrl: './checkbox.component.html',\r\n styleUrl: './checkbox.component.scss'\r\n})\r\nexport class CheckboxComponent {\r\n\r\n}\r\n","<br-checkbox></br-checkbox>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-cookie-bar',\r\n templateUrl: './cookie-bar.component.html',\r\n styleUrl: './cookie-bar.component.scss'\r\n})\r\nexport class CookieBarComponent {\r\n\r\n}\r\n","<br-cookiebar></br-cookiebar>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-datetimer-picker',\r\n templateUrl: './datetimer-picker.component.html',\r\n styleUrl: './datetimer-picker.component.scss'\r\n})\r\nexport class DatetimerPickerComponent {\r\n\r\n}\r\n","<br-datetimer-picker/>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-divider',\r\n templateUrl: './divider.component.html',\r\n styleUrl: './divider.component.scss'\r\n})\r\nexport class DividerComponent {\r\n\r\n}\r\n","<br-divider />\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-footer',\r\n templateUrl: './footer.component.html',\r\n styleUrl: './footer.component.scss'\r\n})\r\nexport class FooterComponent {\r\n\r\n}\r\n","<p>footer works!</p>\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n OnChanges,\r\n Output,\r\n SimpleChanges,\r\n} from '@angular/core';\r\n\r\nimport { LogoViewMode } from '../../enums/logo-view-mode.enum';\r\n\r\n@Component({\r\n selector: 'cfc-logo',\r\n templateUrl: './logo.component.html',\r\n styleUrl: './logo.component.scss',\r\n changeDetection: ChangeDetectionStrategy.Default\r\n})\r\nexport class LogoComponent implements OnChanges {\r\n\r\n @Input() viewMode: LogoViewMode = LogoViewMode.default;\r\n @Input() isClickable = false;\r\n @Input() width?: number;\r\n\r\n @Output() clickEvent: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n logoViewMode: typeof LogoViewMode = LogoViewMode;\r\n\r\n get svgPath(): string {\r\n switch (this.viewMode) {\r\n case LogoViewMode.default:\r\n return './assets/logo-default.svg';\r\n case LogoViewMode.neutral:\r\n return './assets/logo-neutral.svg';\r\n case LogoViewMode.voluntary:\r\n return './assets/logo-voluntary.svg';\r\n default:\r\n throw new Error(`ViewMode inválido: ${this.viewMode}`);\r\n }\r\n }\r\n\r\n get svgWidth(): string {\r\n return this.width ? `${this.width}px` : '100%';\r\n }\r\n\r\n constructor(\r\n private cdr: ChangeDetectorRef\r\n ) {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['isClickable']) {\r\n this.cdr.markForCheck();\r\n }\r\n }\r\n\r\n onClick() {\r\n if (this.clickEvent) this.clickEvent.emit();\r\n }\r\n\r\n}\r\n","<!-- 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","import { Component, Input } from '@angular/core';\r\nimport { SignInType } from '../../enums/sign-in-type.enum';\r\nimport { SignInDensity } from '../../enums/sign-in-density.enum';\r\n\r\n@Component({\r\n selector: 'cfc-sign-in',\r\n templateUrl: './sign-in.component.html',\r\n styleUrl: './sign-in.component.scss'\r\n})\r\nexport class SignInComponent {\r\n @Input() label = '';\r\n @Input() type: SignInType = SignInType.primary;\r\n @Input() density:SignInDensity = SignInDensity.middle;\r\n @Input() icon = 'user';\r\n // @Input() image = '';\r\n @Input() entity = '';\r\n @Input() disabled = false;\r\n @Input() block = false;\r\n @Input() inverted = false;\r\n @Input() isLink = false;\r\n}\r\n","<br-sign-in\r\n cfcDirectiveController\r\n [directiveNames]=\"[\r\n 'disabled',\r\n 'block',\r\n 'inverted',\r\n 'isLink'\r\n ]\"\r\n [applyDirectives]=\"[\r\n disabled,\r\n block,\r\n inverted,\r\n isLink\r\n ]\"\r\n [label]=\"label\"\r\n [type]=\"type\"\r\n [density]=\"density\"\r\n [icon]=\"icon\"\r\n [entity]=\"entity\"\r\n active\r\n></br-sign-in>\r\n","import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-timer',\r\n templateUrl: './timer.component.html',\r\n styleUrl: './timer.component.scss'\r\n})\r\nexport class TimerComponent implements OnInit, OnDestroy {\r\n\r\n @Input() initialTime = 20;\r\n @Input() timeUnit = '';\r\n @Output() timeOutEvent: EventEmitter<void> = new EventEmitter<void>();\r\n @Output() timeEvent: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n displayTime = '00:00';\r\n private intervalId!: ReturnType<typeof setTimeout>;\r\n\r\n ngOnInit(): void {\r\n console.log(this.initialTime)\r\n this.startTimer();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stopTimer();\r\n }\r\n\r\n startTimer(): void {\r\n let remainingTime = this.initialTime;\r\n\r\n this.updateDisplayTime(remainingTime);\r\n\r\n this.intervalId = setInterval(() => {\r\n remainingTime--;\r\n\r\n if (remainingTime < 0) {\r\n this.stopTimer();\r\n return;\r\n }\r\n\r\n this.updateDisplayTime(remainingTime);\r\n }, 1000);\r\n }\r\n\r\n stopTimer() {\r\n clearInterval(this.intervalId);\r\n this.timeOutEvent.emit();\r\n }\r\n\r\n updateDisplayTime(seconds: number) {\r\n const minutes = Math.floor(seconds / 60);\r\n const remainingSeconds = seconds % 60;\r\n\r\n this.displayTime = `${this.padZero(minutes)}:${this.padZero(remainingSeconds)}`;\r\n this.timeEvent.emit();\r\n }\r\n\r\n private padZero(number: number): string {\r\n return number < 10 ? `0${number.toString()}` : `${number.toString()}`;\r\n }\r\n\r\n}\r\n","<br-button\r\n style=\"color: black; pointer-events: none;\"\r\n [label]=\"displayTime\"\r\n icon=\"clock\"\r\n type=\"primary\"\r\n inverted\r\n active\r\n></br-button>\r\n","import { Component, Input } from '@angular/core';\r\n\r\nimport { ButtonType } from '../../enums/button-type.enum';\r\nimport { HeaderViewMode } from '../../enums/header-view-mode.enum';\r\nimport { LogoViewMode } from '../../enums/logo-view-mode.enum';\r\nimport { SignInType } from '../../enums/sign-in-type.enum';\r\n\r\n@Component({\r\n selector: 'cfc-header',\r\n templateUrl: './header.component.html',\r\n styleUrl: './header.component.scss'\r\n})\r\nexport class HeaderComponent {\r\n @Input() title = 'CFC Design System';\r\n @Input() description = 'Página de testes';\r\n @Input() timeLogOut = 1800;\r\n @Input() hasTimer?: boolean = true;\r\n @Input() logoMode: LogoViewMode = LogoViewMode.default;\r\n @Input() viewMode: HeaderViewMode = HeaderViewMode.default;\r\n\r\n headerViewModes: typeof HeaderViewMode = HeaderViewMode;\r\n logoViewModes: typeof LogoViewMode = LogoViewMode;\r\n signinTypes: typeof SignInType = SignInType;\r\n buttonTypes: typeof ButtonType = ButtonType;\r\n}\r\n","<header\r\n class=\"cfc-header\"\r\n [ngStyle]=\"{ 'background-color': viewMode === headerViewModes.default ? 'white' : '#0C326F'}\"\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 <cfc-button\r\n [icon]=\"'bars'\"\r\n [circle]=\"true\"\r\n [inverted]=\"viewMode === headerViewModes.default\"\r\n ></cfc-button>\r\n\r\n <cfc-logo\r\n [viewMode]=\"viewMode === headerViewModes.default ? logoViewModes.default : logoViewModes.neutral\"\r\n ></cfc-logo>\r\n\r\n <div>\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 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 <div\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"1.5rem\">\r\n <cfc-timer\r\n [initialTime]=\"timeLogOut\"\r\n ></cfc-timer>\r\n\r\n <cfc-button\r\n *ngIf=\"viewMode === headerViewModes.default\"\r\n [icon]=\"'book'\"\r\n [circle]=\"true\"\r\n [inverted]=\"true\"\r\n ></cfc-button>\r\n\r\n <cfc-sign-in\r\n [label]=\"'User name'\"\r\n [type]=\"signinTypes.primary\"\r\n [inverted]=\"viewMode === headerViewModes.default\"\r\n ></cfc-sign-in>\r\n </div>\r\n</header>\r\n\r\n<div class=\"cfc-header__spacer\"></div>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-input',\r\n templateUrl: './input.component.html',\r\n styleUrl: './input.component.scss'\r\n})\r\nexport class InputComponent {\r\n\r\n}\r\n","<br-input></br-input>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-list',\r\n templateUrl: './list.component.html',\r\n styleUrl: './list.component.scss'\r\n})\r\nexport class ListComponent {\r\n\r\n}\r\n","<br-list>\r\n <br-item>item 1</br-item>\r\n <br-item>item 2</br-item>\r\n <br-item>item 3</br-item>\r\n</br-list>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-magic-button',\r\n templateUrl: './magic-button.component.html',\r\n styleUrl: './magic-button.component.scss'\r\n})\r\nexport class MagicButtonComponent {\r\n\r\n}\r\n","<br-magic-button label=\"botão mágico\"/>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-menu',\r\n templateUrl: './menu.component.html',\r\n styleUrl: './menu.component.scss'\r\n})\r\nexport class MenuComponent {\r\n\r\n}\r\n","<br-menu>\r\n <br-menu-item>item 1</br-menu-item>\r\n <br-menu-item>item 2</br-menu-item>\r\n <br-menu-item>item 3</br-menu-item>\r\n</br-menu>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-message',\r\n templateUrl: './message.component.html',\r\n styleUrl: './message.component.scss'\r\n})\r\nexport class MessageComponent {\r\n\r\n}\r\n","<br-message>mensagem</br-message>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-modal',\r\n templateUrl: './modal.component.html',\r\n styleUrl: './modal.component.scss'\r\n})\r\nexport class ModalComponent {\r\n\r\n}\r\n","<br-modal>modal</br-modal>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-notification',\r\n templateUrl: './notification.component.html',\r\n styleUrl: './notification.component.scss'\r\n})\r\nexport class NotificationComponent {\r\n\r\n}\r\n","<br-notification>notificação</br-notification>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-notification-panel',\r\n templateUrl: './notification-panel.component.html',\r\n styleUrl: './notification-panel.component.scss'\r\n})\r\nexport class NotificationPanelComponent {\r\n\r\n}\r\n","<br-notification-panel>\r\n <br-notification>notificação 1</br-notification>\r\n <br-notification>notificação 2</br-notification>\r\n <br-notification>notificação 3</br-notification>\r\n</br-notification-panel>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-page-content',\r\n templateUrl: './page-content.component.html',\r\n styleUrl: './page-content.component.scss'\r\n})\r\nexport class PageContentComponent {}\r\n","<div class=\"container-out\">\r\n <ng-content></ng-content>\r\n</div>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-pagination',\r\n templateUrl: './pagination.component.html',\r\n styleUrl: './pagination.component.scss'\r\n})\r\nexport class PaginationComponent {\r\n\r\n}\r\n","<br-pagination></br-pagination>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-radio',\r\n templateUrl: './radio.component.html',\r\n styleUrl: './radio.component.scss'\r\n})\r\nexport class RadioComponent {\r\n\r\n}\r\n","<br-radio label=\"raio\"/>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-scrim',\r\n templateUrl: './scrim.component.html',\r\n styleUrl: './scrim.component.scss'\r\n})\r\nexport class ScrimComponent {\r\n\r\n}\r\n","<br-scrim />\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-select',\r\n templateUrl: './select.component.html',\r\n styleUrl: './select.component.scss'\r\n})\r\nexport class SelectComponent {\r\n\r\n}\r\n","<br-select />\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-skiplink',\r\n templateUrl: './skiplink.component.html',\r\n styleUrl: './skiplink.component.scss'\r\n})\r\nexport class SkiplinkComponent {\r\n\r\n}\r\n","<br-skiplink>skiplink</br-skiplink>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-slider',\r\n templateUrl: './slider.component.html',\r\n styleUrl: './slider.component.scss'\r\n})\r\nexport class SliderComponent {\r\n\r\n}\r\n","<br-slider label=\"slider\" min=\"0\" max=\"100\"> </br-slider>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-switch',\r\n templateUrl: './switch.component.html',\r\n styleUrl: './switch.component.scss'\r\n})\r\nexport class SwitchComponent {\r\n\r\n}\r\n","<br-switch label=\"switch\" />\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-tab',\r\n templateUrl: './tab.component.html',\r\n styleUrl: './tab.component.scss'\r\n})\r\nexport class TabComponent {\r\n\r\n}\r\n","<br-tab>\r\n <br-tab-item>opção 1</br-tab-item>\r\n <br-tab-item>opção 2</br-tab-item>\r\n <br-tab-item>opção 3</br-tab-item>\r\n</br-tab>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-table',\r\n templateUrl: './table.component.html',\r\n styleUrl: './table.component.scss'\r\n})\r\nexport class TableComponent {\r\n\r\n}\r\n","<br-table>\r\n <br-table-header>tabela</br-table-header>\r\n</br-table>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-tag',\r\n templateUrl: './tag.component.html',\r\n styleUrl: './tag.component.scss'\r\n})\r\nexport class TagComponent {\r\n\r\n}\r\n","<br-tag>tag</br-tag>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-textarea',\r\n templateUrl: './textarea.component.html',\r\n styleUrl: './textarea.component.scss'\r\n})\r\nexport class TextareaComponent {\r\n\r\n}\r\n","<br-textarea>área de texto</br-textarea>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-tooltip',\r\n templateUrl: './tooltip.component.html',\r\n styleUrl: './tooltip.component.scss'\r\n})\r\nexport class TooltipComponent {\r\n\r\n}\r\n","<br-tooltip>tooltip</br-tooltip>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-upload',\r\n templateUrl: './upload.component.html',\r\n styleUrl: './upload.component.scss'\r\n})\r\nexport class UploadComponent {\r\n\r\n}\r\n","<br-upload>upload</br-upload>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-wizard',\r\n templateUrl: './wizard.component.html',\r\n styleUrl: './wizard.component.scss'\r\n})\r\nexport class WizardComponent {\r\n\r\n}\r\n","<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","import {\r\n Component,\r\n ElementRef,\r\n Input,\r\n ViewChild,\r\n} from '@angular/core';\r\nimport { LogoViewMode } from '../../../enums/logo-view-mode.enum';\r\nimport { ButtonType } from '../../../enums/button-type.enum';\r\nimport { ButtonDensity } from '../../../enums/button-density.enum';\r\nimport { SignInType } from '../../../enums/sign-in-type.enum';\r\nimport { SignInDensity } from '../../../enums/sign-in-density.enum';\r\nimport { AvatarDensity } from '../../../enums/avatar-density.enum';\r\nimport { TooltipPlace } from '../../../enums/tooltip-place.enum';\r\nimport { BreadcrumbLink } from '../../../models/breadcrumb.model';\r\nimport { HeaderViewMode } from '../../../enums/header-view-mode.enum';\r\n\r\n@Component({\r\n selector: 'cfc-test-component',\r\n templateUrl: './test-component.component.html',\r\n styleUrl: './test-component.component.scss',\r\n})\r\nexport class TestComponentComponent {\r\n\r\n // inputs and outputs\r\n @Input() selectedComponent?: string = '';\r\n\r\n // viewChieldren\r\n @ViewChild('button') button?: ElementRef;\r\n\r\n // cfc-avatar\r\n avatarName = 'avatar'\r\n avatarDensity: AvatarDensity = AvatarDensity.medium;\r\n avatarTooltipText = 'avatar tooltip';\r\n avatarTooltipPlace: TooltipPlace = TooltipPlace.bottom;\r\n avatarImageUrl = 'https://picsum.photos/id/823/400';\r\n avatarIconic = false;\r\n avatarDensities: AvatarDensity[] = Object.values(AvatarDensity);\r\n avatarTooltipPlaces: TooltipPlace[] = Object.values(TooltipPlace);\r\n\r\n // cfc-breadcrumb\r\n breadcrumbLabel = 'breadcrumb';\r\n breadcrumbLinks: BreadcrumbLink[] = [\r\n {\r\n label: 'Página Inicial',\r\n url: '/',\r\n target: '_blank',\r\n home: true\r\n },\r\n {\r\n label: 'Página Ancestral 01',\r\n url: '#',\r\n target: '_blank'\r\n },\r\n {\r\n label: 'Página Ancestral 02',\r\n url: '#',\r\n target: '_blank'\r\n },\r\n {\r\n label: 'Página Atual',\r\n active: true\r\n }\r\n ];\r\n breadcrumbLinksString = JSON.stringify(this.breadcrumbLinks, null, 2);\r\n updateBreadCrumbLinks(): void {\r\n this.breadcrumbLinks = JSON.parse(this.breadcrumbLinksString);\r\n }\r\n\r\n // cfc-button\r\n buttonLabel = 'button';\r\n buttonType: ButtonType = ButtonType.primary;\r\n buttonTooltipText = 'button tooltip text';\r\n buttonSubmit = true;\r\n buttonCircle = false;\r\n buttonDensity: ButtonDensity = ButtonDensity.middle;\r\n buttonDisabled = false;\r\n buttonBlock = false;\r\n buttonIcon = 'clock';\r\n buttonActive = true;\r\n buttonInverted = false;\r\n buttonLoading = false;\r\n buttonTypes: ButtonType[] = Object.values(ButtonType);\r\n buttonDensities: ButtonDensity[] = Object.values(ButtonDensity);\r\n buttonClickEvent = () => alert('button event dispared!');\r\n\r\n // cfc-header\r\n headerTitle = 'Testando Header';\r\n headerDescription = 'Esse é apenas um teste';\r\n headerViewMode: HeaderViewMode = HeaderViewMode.default;\r\n headerViewModes: HeaderViewMode[] = Object.values(HeaderViewMode);\r\n\r\n // cfc-logo\r\n logoWidth = 100;\r\n logoIsClickable = false;\r\n logoViewMode: LogoViewMode = LogoViewMode.default;\r\n logoViewModes: LogoViewMode[] = Object.values(LogoViewMode);\r\n logoClickEvent?: () => void = () => alert('a logo está clicável');\r\n\r\n // cfc-sign0in\r\n signInLabel = 'sing in';\r\n signInType: SignInType = SignInType.primary;\r\n signInDensity: SignInDensity = SignInDensity.middle;\r\n signInIcon = 'user';\r\n signInEntity = '';\r\n signInDisabled = false;\r\n signInBlock = false;\r\n signInInverted = false;\r\n signInIsLink = false;\r\n signInTypes: SignInType[] = Object.values(SignInType);\r\n signInDensities: SignInDensity[] = Object.values(SignInDensity);\r\n\r\n // cfc-timer\r\n timer = 120;\r\n onTimeEvent = () => {\r\n this.timer--;\r\n };\r\n onTimeOutEvent = () => {\r\n alert('encerrou a contagem regressiva');\r\n window.location.reload();\r\n };\r\n\r\n}\r\n","<ng-container *ngIf=\"selectedComponent; 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 }}</h2>\r\n\r\n <cfc-avatar\r\n *ngIf=\"selectedComponent === 'avatar'\"\r\n tooltip\r\n [iconic]=\"avatarIconic\"\r\n [name]=\"avatarName\"\r\n [density]=\"avatarDensity\"\r\n [tooltipText]=\"avatarTooltipText\"\r\n [tooltipPlace]=\"avatarTooltipPlace\"\r\n [imageUrl]=\"avatarImageUrl\"\r\n ></cfc-avatar>\r\n\r\n <cfc-breadcrumb\r\n *ngIf=\"selectedComponent === 'breadcrumb'\"\r\n [label]=\"breadcrumbLabel\"\r\n [links]=\"breadcrumbLinks\"\r\n ></cfc-breadcrumb>\r\n\r\n <cfc-button\r\n *ngIf=\"selectedComponent === 'button'\"\r\n id=\"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 === 'card'\"\r\n ></cfc-card>\r\n\r\n <cfc-carousel\r\n *ngIf=\"selectedComponent === 'carousel'\"\r\n ></cfc-carousel>\r\n\r\n <cfc-checkbox\r\n *ngIf=\"selectedComponent === 'checkbox'\"\r\n ></cfc-checkbox>\r\n\r\n <cfc-cookie-bar\r\n *ngIf=\"selectedComponent === 'cookie-bar'\"\r\n ></cfc-cookie-bar>\r\n\r\n <cfc-datetimer-picker\r\n *ngIf=\"selectedComponent === 'datetimer-picker'\"\r\n ></cfc-datetimer-picker>\r\n\r\n <cfc-divider\r\n *ngIf=\"selectedComponent === 'divider'\"\r\n ></cfc-divider>\r\n\r\n <cfc-footer\r\n *ngIf=\"selectedComponent === 'footer'\"\r\n ></cfc-footer>\r\n\r\n <cfc-header\r\n *ngIf=\"selectedComponent === 'header'\"\r\n [title]=\"headerTitle\"\r\n [description]=\"headerDescription\"\r\n [viewMode]=\"headerViewMode\"\r\n ></cfc-header>\r\n\r\n <cfc-input\r\n *ngIf=\"selectedComponent === 'input'\"\r\n ></cfc-input>\r\n\r\n <cfc-list\r\n *ngIf=\"selectedComponent === 'list'\"\r\n ></cfc-list>\r\n\r\n <cfc-logo\r\n *ngIf=\"selectedComponent === 'logo'\"\r\n [width]=\"logoWidth\"\r\n [viewMode]=\"logoViewMode\"\r\n [isClickable]=\"logoIsClickable\"\r\n ></cfc-logo>\r\n\r\n <cfc-magic-button\r\n *ngIf=\"selectedComponent === 'magic-button'\"\r\n ></cfc-magic-button>\r\n\r\n <cfc-menu\r\n *ngIf=\"selectedComponent === 'menu'\"\r\n ></cfc-menu>\r\n\r\n <cfc-message\r\n *ngIf=\"selectedComponent === 'message'\"\r\n ></cfc-message>\r\n\r\n <cfc-modal\r\n *ngIf=\"selectedComponent === 'modal'\"\r\n ></cfc-modal>\r\n\r\n <cfc-notification\r\n *ngIf=\"selectedComponent === 'notification'\"\r\n ></cfc-notification>\r\n\r\n <cfc-notification-panel\r\n *ngIf=\"selectedComponent === 'notification-panel'\"\r\n ></cfc-notification-panel>\r\n\r\n <cfc-page-content\r\n *ngIf=\"selectedComponent === 'page-content'\"\r\n ></cfc-page-content>\r\n\r\n <cfc-pagination\r\n *ngIf=\"selectedComponent === 'pagination'\"\r\n ></cfc-pagination>\r\n\r\n <cfc-radio\r\n *ngIf=\"selectedComponent === 'radio'\"\r\n ></cfc-radio>\r\n\r\n <cfc-scrim\r\n *ngIf=\"selectedComponent === 'scrim'\"\r\n ></cfc-scrim>\r\n\r\n <cfc-select\r\n *ngIf=\"selectedComponent === 'select'\"\r\n ></cfc-select>\r\n\r\n <cfc-sign-in\r\n *ngIf=\"selectedComponent === 'sign-in'\"\r\n [label]=\"signInLabel\"\r\n [type]=\"signInType\"\r\n [density]=\"signInDensity\"\r\n [icon]=\"signInIcon\"\r\n [entity]=\"signInEntity\"\r\n [disabled]=\"signInDisabled\"\r\n [block]=\"signInBlock\"\r\n [inverted]=\"signInInverted\"\r\n [isLink]=\"signInIsLink\"\r\n ></cfc-sign-in>\r\n\r\n <cfc-skiplink\r\n *ngIf=\"selectedComponent === 'skiplink'\"\r\n ></cfc-skiplink>\r\n\r\n <cfc-slider\r\n *ngIf=\"selectedComponent === 'slider'\"\r\n ></cfc-slider>\r\n\r\n <cfc-switch\r\n *ngIf=\"selectedComponent === 'switch'\"\r\n ></cfc-switch>\r\n\r\n <cfc-tab\r\n *ngIf=\"selectedComponent === 'tab'\"\r\n ></cfc-tab>\r\n\r\n <cfc-table\r\n *ngIf=\"selectedComponent === 'table'\"\r\n ></cfc-table>\r\n\r\n <cfc-tag\r\n *ngIf=\"selectedComponent === 'tag'\"\r\n ></cfc-tag>\r\n\r\n <cfc-textarea\r\n *ngIf=\"selectedComponent === 'textarea'\"\r\n ></cfc-textarea>\r\n\r\n <cfc-timer\r\n *ngIf=\"selectedComponent === 'timer'\"\r\n [initialTime]=\"timer\"\r\n (timeEvent)=\"onTimeEvent()\"\r\n (timeOutEvent)=\"onTimeOutEvent()\"\r\n ></cfc-timer>\r\n\r\n <cfc-tooltip\r\n *ngIf=\"selectedComponent === 'tooltip'\"\r\n ></cfc-tooltip>\r\n\r\n <cfc-upload\r\n *ngIf=\"selectedComponent === 'upload'\"\r\n ></cfc-upload>\r\n\r\n <cfc-wizard\r\n *ngIf=\"selectedComponent === 'wizard'\"\r\n ></cfc-wizard>\r\n\r\n <hr class=\"test-component__divider\">\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 === '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=\"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 fxLayout=\"column\"\r\n fxLayoutAlign=\"center center\">\r\n <label\r\n for=\"iconic\">\r\n iconic\r\n </label>\r\n <select\r\n class=\"test-component__input\"\r\n id=\"iconic\"\r\n [(ngModel)]=\"avatarIconic\"\r\n name=\"iconic\">\r\n <option\r\n [value]=\"true\">\r\n iconic\r\n </option>\r\n <option\r\n [value]=\"false\">\r\n not iconic\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=\"tooltopText\">\r\n tooltopText\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)]=\"avatarTooltipText\"\r\n name=\"tooltipText\">\r\n </div>\r\n <div\r\n fxLayout=\"column\"\r\n fxLayoutAlign=\"center center\">\r\n <label\r\n for=\"tooltipPlace\">\r\n tooltipPlace\r\n </label>\r\n <select\r\n class=\"test-component__input\"\r\n id=\"tooltipPlace\"\r\n [(ngModel)]=\"avatarTooltipPlace\"\r\n name=\"tooltipPlace\">\r\n <option\r\n *ngFor=\"let tooltipPlace of avatarTooltipPlaces\"\r\n [value]=\"tooltipPlace\">\r\n {{ tooltipPlace }}\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 === '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 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=\"links\">\r\n links\r\n </label>\r\n <textarea\r\n class=\"test-component__input\"\r\n style=\"width: 300px !important; height: 300px;\"\r\n type=\"text\"\r\n [(ngModel)]=\"breadcrumbLinksString\"\r\n (ngModelChange)=\"updateBreadCrumbLinks()\"\r\n name=\"links\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- button -->\r\n <ng-container *ngIf=\"selectedComponent === '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\