cfc-ui-test
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
145 lines • 124 kB
JavaScript
import { Component, Input, ViewChild, } 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 * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../../../components/avatar/avatar.component";
import * as i4 from "../../../components/breadcrumb/breadcrumb.component";
import * as i5 from "../../../components/button/button.component";
import * as i6 from "../../../components/card/card.component";
import * as i7 from "../../../components/carousel/carousel.component";
import * as i8 from "../../../components/checkbox/checkbox.component";
import * as i9 from "../../../components/cookie-bar/cookie-bar.component";
import * as i10 from "../../../components/datetimer-picker/datetimer-picker.component";
import * as i11 from "../../../components/divider/divider.component";
import * as i12 from "../../../components/footer/footer.component";
import * as i13 from "../../../components/header/header.component";
import * as i14 from "../../../components/input/input.component";
import * as i15 from "../../../components/list/list.component";
import * as i16 from "../../../components/logo/logo.component";
import * as i17 from "../../../components/magic-button/magic-button.component";
import * as i18 from "../../../components/menu/menu.component";
import * as i19 from "../../../components/message/message.component";
import * as i20 from "../../../components/modal/modal.component";
import * as i21 from "../../../components/notification/notification.component";
import * as i22 from "../../../components/notification-panel/notification-panel.component";
import * as i23 from "../../../components/page-content/page-content.component";
import * as i24 from "../../../components/pagination/pagination.component";
import * as i25 from "../../../components/radio/radio.component";
import * as i26 from "../../../components/scrim/scrim.component";
import * as i27 from "../../../components/select/select.component";
import * as i28 from "../../../components/sign-in/sign-in.component";
import * as i29 from "../../../components/skiplink/skiplink.component";
import * as i30 from "../../../components/slider/slider.component";
import * as i31 from "../../../components/switch/switch.component";
import * as i32 from "../../../components/tab/tab.component";
import * as i33 from "../../../components/table/table.component";
import * as i34 from "../../../components/tag/tag.component";
import * as i35 from "../../../components/textarea/textarea.component";
import * as i36 from "../../../components/timer/timer.component";
import * as i37 from "../../../components/tooltip/tooltip.component";
import * as i38 from "../../../components/upload/upload.component";
import * as i39 from "../../../components/wizard/wizard.component";
export class TestComponentComponent {
// inputs and outputs
selectedComponent = '';
// viewChieldren
button;
// cfc-avatar
avatarName = 'avatar';
avatarDensity = AvatarDensity.medium;
avatarTooltipText = 'avatar tooltip';
avatarTooltipPlace = TooltipPlace.bottom;
avatarImageUrl = 'https://picsum.photos/id/823/400';
avatarIconic = false;
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.primary;
buttonTooltipText = 'button tooltip text';
buttonSubmit = true;
buttonCircle = false;
buttonDensity = ButtonDensity.middle;
buttonDisabled = false;
buttonBlock = false;
buttonIcon = 'clock';
buttonActive = true;
buttonInverted = false;
buttonLoading = false;
buttonTypes = Object.values(ButtonType);
buttonDensities = Object.values(ButtonDensity);
buttonClickEvent = () => alert('button event dispared!');
// cfc-header
headerTitle = 'Testando Header';
headerDescription = 'Esse é apenas um teste';
headerViewMode = HeaderViewMode.default;
headerViewModes = Object.values(HeaderViewMode);
// cfc-logo
logoWidth = 100;
logoIsClickable = false;
logoViewMode = LogoViewMode.default;
logoViewModes = Object.values(LogoViewMode);
logoClickEvent = () => alert('a logo está clicável');
// cfc-sign0in
signInLabel = 'sing in';
signInType = SignInType.primary;
signInDensity = SignInDensity.middle;
signInIcon = 'user';
signInEntity = '';
signInDisabled = false;
signInBlock = false;
signInInverted = false;
signInIsLink = false;
signInTypes = Object.values(SignInType);
signInDensities = Object.values(SignInDensity);
// cfc-timer
timer = 120;
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" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<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\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 <!-- header -->\r\n <ng-container *ngIf=\"selectedComponent === '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\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- logo -->\r\n <ng-container *ngIf=\"selectedComponent === '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 <!-- sign-in -->\r\n <ng-container *ngIf=\"selectedComponent === '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=\"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)]=\"signInIcon\"\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=\"disabled\">\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=\"inverted\">\r\n inverted\r\n </label>\r\n <select\r\n class=\"test-component__input\"\r\n id=\"inverted\"\r\n [(ngModel)]=\"signInInverted\"\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=\"isLink\">\r\n isLink\r\n </label>\r\n <select\r\n class=\"test-component__input\"\r\n id=\"isLink\"\r\n [(ngModel)]=\"signInIsLink\"\r\n name=\"isLink\">\r\n <option\r\n [value]=\"true\">\r\n isLink\r\n </option>\r\n <option\r\n [value]=\"false\">\r\n not isLink\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- timer -->\r\n <ng-container *ngIf=\"selectedComponent === 'timer'\">\r\n <div\r\n fxLayout=\"column\"\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 type=\"number\"\r\n [(ngModel)]=\"timer\"\r\n name=\"timer\">\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 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 style=\"text-align: center;\">Nenhum componente selecionado ainda</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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.AvatarComponent, selector: "cfc-avatar", inputs: ["name", "density", "tooltipText", "tooltipPlace", "iconic", "imageUrl"] }, { kind: "component", type: i4.BreadcrumbComponent, selector: "cfc-breadcrumb", inputs: ["label", "links"] }, { kind: "component", type: i5.ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"] }, { kind: "component", type: i6.CardComponent, selector: "cfc-card" }, { kind: "component", type: i7.CarouselComponent, selector: "cfc-carousel" }, { kind: "component", type: i8.CheckboxComponent, selector: "cfc-checkbox" }, { kind: "component", type: i9.CookieBarComponent, selector: "cfc-cookie-bar" }, { kind: "component", type: i10.DatetimerPickerComponent, selector: "cfc-datetimer-picker" }, { kind: "component", type: i11.DividerComponent, selector: "cfc-divider" }, { kind: "component", type: i12.FooterComponent, selector: "cfc-footer" }, { kind: "component", type: i13.HeaderComponent, selector: "cfc-header", inputs: ["title", "description", "timeLogOut", "hasTimer", "logoMode", "viewMode"] }, { kind: "component", type: i14.InputComponent, selector: "cfc-input" }, { kind: "component", type: i15.ListComponent, selector: "cfc-list" }, { kind: "component", type: i16.LogoComponent, selector: "cfc-logo", inputs: ["viewMode", "isClickable", "width"], outputs: ["clickEvent"] }, { kind: "component", type: i17.MagicButtonComponent, selector: "cfc-magic-button" }, { kind: "component", type: i18.MenuComponent, selector: "cfc-menu" }, { kind: "component", type: i19.MessageComponent, selector: "cfc-message" }, { kind: "component", type: i20.ModalComponent, selector: "cfc-modal" }, { kind: "component", type: i21.NotificationComponent, selector: "cfc-notification" }, { kind: "component", type: i22.NotificationPanelComponent, selector: "cfc-notification-panel" }, { kind: "component", type: i23.PageContentComponent, selector: "cfc-page-content" }, { kind: "component", type: i24.PaginationComponent, selector: "cfc-pagination" }, { kind: "component", type: i25.RadioComponent, selector: "cfc-radio" }, { kind: "component", type: i26.ScrimComponent, selector: "cfc-scrim" }, { kind: "component", type: i27.SelectComponent, selector: "cfc-select" }, { kind: "component", type: i28.SignInComponent, selector: "cfc-sign-in", inputs: ["label", "type", "density", "icon", "entity", "disabled", "block", "inverted", "isLink"] }, { kind: "component", type: i29.SkiplinkComponent, selector: "cfc-skiplink" }, { kind: "component", type: i30.SliderComponent, selector: "cfc-slider" }, { kind: "component", type: i31.SwitchComponent, selector: "cfc-switch" }, { kind: "component", type: i32.TabComponent, selector: "cfc-tab" }, { kind: "component", type: i33.TableComponent, selector: "cfc-table" }, { kind: "component", type: i34.TagComponent, selector: "cfc-tag" }, { kind: "component", type: i35.TextareaComponent, selector: "cfc-textarea" }, { kind: "component", type: i36.TimerComponent, selector: "cfc-timer", inputs: ["initialTime", "timeUnit"], outputs: ["timeOutEvent", "timeEvent"] }, { kind: "component", type: i37.TooltipComponent, selector: "cfc-tooltip" }, { kind: "component", type: i38.UploadComponent, selector: "cfc-upload" }, { kind: "component", type: i39.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; 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