cfc-ui-test
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
42 lines • 12.1 kB
JavaScript
import { Component, Input } from '@angular/core';
import { ButtonType } from '../../enums/button-type.enum';
import { HeaderViewMode } from '../../enums/header-view-mode.enum';
import { LogoViewMode } from '../../enums/logo-view-mode.enum';
import { SignInType } from '../../enums/sign-in-type.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../button/button.component";
import * as i3 from "../logo/logo.component";
import * as i4 from "../sign-in/sign-in.component";
import * as i5 from "../timer/timer.component";
export class HeaderComponent {
title = 'CFC Design System';
description = 'Página de testes';
timeLogOut = 1800;
hasTimer = true;
logoMode = LogoViewMode.default;
viewMode = HeaderViewMode.default;
headerViewModes = HeaderViewMode;
logoViewModes = LogoViewMode;
signinTypes = SignInType;
buttonTypes = ButtonType;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderComponent, selector: "cfc-header", inputs: { title: "title", description: "description", timeLogOut: "timeLogOut", hasTimer: "hasTimer", logoMode: "logoMode", viewMode: "viewMode" }, ngImport: i0, template: "<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", styles: [":root{--header-height: 140px}*{margin:0;padding:0;box-sizing:border-box}.cfc-header{height:120px;position:fixed;top:0;left:0;background-color:#fff;box-shadow:0 0 10px 1px #c1c1c1;padding:1rem 2rem;width:100%;height:var(--header-height);z-index:999}.cfc-header__title{font-weight:700;font-size:1rem}.cfc-header__description{font-weight:400;font-size:.9rem;padding-top:.2rem;color:#555;opacity:60%}.cfc-header__spacer{height:75px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ButtonComponent, selector: "cfc-button", inputs: ["label", "type", "submit", "circle", "density", "disabled", "block", "icon", "active", "inverted", "loading"] }, { kind: "component", type: i3.LogoComponent, selector: "cfc-logo", inputs: ["viewMode", "isClickable", "width"], outputs: ["clickEvent"] }, { kind: "component", type: i4.SignInComponent, selector: "cfc-sign-in", inputs: ["label", "type", "density", "icon", "entity", "disabled", "block", "inverted", "isLink"] }, { kind: "component", type: i5.TimerComponent, selector: "cfc-timer", inputs: ["initialTime", "timeUnit"], outputs: ["timeOutEvent", "timeEvent"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-header', template: "<header\r\n class=\"cfc-header\"\r\n [ngStyle]=\"{ 'background-color': viewMode === headerViewModes.default ? '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", styles: [":root{--header-height: 140px}*{margin:0;padding:0;box-sizing:border-box}.cfc-header{height:120px;position:fixed;top:0;left:0;background-color:#fff;box-shadow:0 0 10px 1px #c1c1c1;padding:1rem 2rem;width:100%;height:var(--header-height);z-index:999}.cfc-header__title{font-weight:700;font-size:1rem}.cfc-header__description{font-weight:400;font-size:.9rem;padding-top:.2rem;color:#555;opacity:60%}.cfc-header__spacer{height:75px;width:100%}\n"] }]
}], propDecorators: { title: [{
type: Input
}], description: [{
type: Input
}], timeLogOut: [{
type: Input
}], hasTimer: [{
type: Input
}], logoMode: [{
type: Input
}], viewMode: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy11aS9zcmMvbGliL2NvbXBvbmVudHMvaGVhZGVyL2hlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2hlYWRlci9oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzFELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNuRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDL0QsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7Ozs7O0FBTzNELE1BQU0sT0FBTyxlQUFlO0lBQ2pCLEtBQUssR0FBRyxtQkFBbUIsQ0FBQztJQUM1QixXQUFXLEdBQUcsa0JBQWtCLENBQUM7SUFDakMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUNsQixRQUFRLEdBQWEsSUFBSSxDQUFDO0lBQzFCLFFBQVEsR0FBaUIsWUFBWSxDQUFDLE9BQU8sQ0FBQztJQUM5QyxRQUFRLEdBQW1CLGNBQWMsQ0FBQyxPQUFPLENBQUM7SUFFM0QsZUFBZSxHQUEwQixjQUFjLENBQUM7SUFDeEQsYUFBYSxHQUF3QixZQUFZLENBQUM7SUFDbEQsV0FBVyxHQUFzQixVQUFVLENBQUM7SUFDNUMsV0FBVyxHQUFzQixVQUFVLENBQUM7d0dBWGpDLGVBQWU7NEZBQWYsZUFBZSxzTUNaNUIsaW9EQXlEQTs7NEZEN0NhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTs4QkFLYixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgQnV0dG9uVHlwZSB9IGZyb20gJy4uLy4uL2VudW1zL2J1dHRvbi10eXBlLmVudW0nO1xyXG5pbXBvcnQgeyBIZWFkZXJWaWV3TW9kZSB9IGZyb20gJy4uLy4uL2VudW1zL2hlYWRlci12aWV3LW1vZGUuZW51bSc7XHJcbmltcG9ydCB7IExvZ29WaWV3TW9kZSB9IGZyb20gJy4uLy4uL2VudW1zL2xvZ28tdmlldy1tb2RlLmVudW0nO1xyXG5pbXBvcnQgeyBTaWduSW5UeXBlIH0gZnJvbSAnLi4vLi4vZW51bXMvc2lnbi1pbi10eXBlLmVudW0nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjZmMtaGVhZGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vaGVhZGVyLmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgSGVhZGVyQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSB0aXRsZSA9ICdDRkMgRGVzaWduIFN5c3RlbSc7XHJcbiAgQElucHV0KCkgZGVzY3JpcHRpb24gPSAnUMOhZ2luYSBkZSB0ZXN0ZXMnO1xyXG4gIEBJbnB1dCgpIHRpbWVMb2dPdXQgPSAxODAwO1xyXG4gIEBJbnB1dCgpIGhhc1RpbWVyPzogYm9vbGVhbiA9IHRydWU7XHJcbiAgQElucHV0KCkgbG9nb01vZGU6IExvZ29WaWV3TW9kZSA9IExvZ29WaWV3TW9kZS5kZWZhdWx0O1xyXG4gIEBJbnB1dCgpIHZpZXdNb2RlOiBIZWFkZXJWaWV3TW9kZSA9IEhlYWRlclZpZXdNb2RlLmRlZmF1bHQ7XHJcblxyXG4gIGhlYWRlclZpZXdNb2RlczogdHlwZW9mIEhlYWRlclZpZXdNb2RlID0gSGVhZGVyVmlld01vZGU7XHJcbiAgbG9nb1ZpZXdNb2RlczogdHlwZW9mIExvZ29WaWV3TW9kZSA9IExvZ29WaWV3TW9kZTtcclxuICBzaWduaW5UeXBlczogdHlwZW9mIFNpZ25JblR5cGUgPSBTaWduSW5UeXBlO1xyXG4gIGJ1dHRvblR5cGVzOiB0eXBlb2YgQnV0dG9uVHlwZSA9IEJ1dHRvblR5cGU7XHJcbn1cclxuIiwiPGhlYWRlclxyXG4gIGNsYXNzPVwiY2ZjLWhlYWRlclwiXHJcbiAgW25nU3R5bGVdPVwieyAnYmFja2dyb3VuZC1jb2xvcic6IHZpZXdNb2RlID09PSBoZWFkZXJWaWV3TW9kZXMuZGVmYXVsdCA/ICd3aGl0ZScgOiAnIzBDMzI2Rid9XCJcclxuICBmeExheW91dD1cInJvd1wiXHJcbiAgZnhMYXlvdXRBbGlnbj1cInNwYWNlLWJldHdlZW4gY2VudGVyXCI+XHJcbiAgPGRpdlxyXG4gICAgZnhMYXlvdXQ9XCJyb3dcIlxyXG4gICAgZnhMYXlvdXRBbGlnbj1cImNlbnRlciBjZW50ZXJcIlxyXG4gICAgZnhMYXlvdXRHYXA9XCIxcmVtXCI+XHJcbiAgICA8Y2ZjLWJ1dHRvblxyXG4gICAgICBbaWNvbl09XCInYmFycydcIlxyXG4gICAgICBbY2lyY2xlXT1cInRydWVcIlxyXG4gICAgICBbaW52ZXJ0ZWRdPVwidmlld01vZGUgPT09IGhlYWRlclZpZXdNb2Rlcy5kZWZhdWx0XCJcclxuICAgID48L2NmYy1idXR0b24+XHJcblxyXG4gICAgPGNmYy1sb2dvXHJcbiAgICAgIFt2aWV3TW9kZV09XCJ2aWV3TW9kZSA9PT0gaGVhZGVyVmlld01vZGVzLmRlZmF1bHQgPyBsb2dvVmlld01vZGVzLmRlZmF1bHQgOiBsb2dvVmlld01vZGVzLm5ldXRyYWxcIlxyXG4gICAgPjwvY2ZjLWxvZ28+XHJcblxyXG4gICAgPGRpdj5cclxuICAgICAgPGg0XHJcbiAgICAgICAgY2xhc3M9XCJjZmMtaGVhZGVyX190aXRsZVwiXHJcbiAgICAgICAgW25nU3R5bGVdPVwieyAnY29sb3InOiB2aWV3TW9kZSA9PT0gaGVhZGVyVmlld01vZGVzLmRlZmF1bHQgPyAnYmxhY2snIDogJ3doaXRlJyB9XCI+XHJcbiAgICAgICAge3sgdGl0bGUgfX1cclxuICAgICAgPC9oND5cclxuICAgICAgPHBcclxuICAgICAgICBjbGFzcz1cImNmYy1oZWFkZXJfX2Rlc2NyaXB0aW9uXCJcclxuICAgICAgICBbbmdTdHlsZV09XCJ7ICdjb2xvcic6IHZpZXdNb2RlID09PSBoZWFkZXJWaWV3TW9kZXMuZGVmYXVsdCA/ICcjNTU1NTU1JyA6ICd3aGl0ZScgfVwiPlxyXG4gICAgICAgIHt7IGRlc2NyaXB0aW9uIH19XHJcbiAgICAgIDwvcD5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG5cclxuICA8ZGl2XHJcbiAgICBmeExheW91dD1cInJvd1wiXHJcbiAgICBmeExheW91dEFsaWduPVwiY2VudGVyIGNlbnRlclwiXHJcbiAgICBmeExheW91dEdhcD1cIjEuNXJlbVwiPlxyXG4gICAgPGNmYy10aW1lclxyXG4gICAgICBbaW5pdGlhbFRpbWVdPVwidGltZUxvZ091dFwiXHJcbiAgICA+PC9jZmMtdGltZXI+XHJcblxyXG4gICAgPGNmYy1idXR0b25cclxuICAgICAgKm5nSWY9XCJ2aWV3TW9kZSA9PT0gaGVhZGVyVmlld01vZGVzLmRlZmF1bHRcIlxyXG4gICAgICBbaWNvbl09XCInYm9vaydcIlxyXG4gICAgICBbY2lyY2xlXT1cInRydWVcIlxyXG4gICAgICBbaW52ZXJ0ZWRdPVwidHJ1ZVwiXHJcbiAgICA+PC9jZmMtYnV0dG9uPlxyXG5cclxuICAgIDxjZmMtc2lnbi1pblxyXG4gICAgICBbbGFiZWxdPVwiJ1VzZXIgbmFtZSdcIlxyXG4gICAgICBbdHlwZV09XCJzaWduaW5UeXBlcy5wcmltYXJ5XCJcclxuICAgICAgW2ludmVydGVkXT1cInZpZXdNb2RlID09PSBoZWFkZXJWaWV3TW9kZXMuZGVmYXVsdFwiXHJcbiAgICA+PC9jZmMtc2lnbi1pbj5cclxuICA8L2Rpdj5cclxuPC9oZWFkZXI+XHJcblxyXG48ZGl2IGNsYXNzPVwiY2ZjLWhlYWRlcl9fc3BhY2VyXCI+PC9kaXY+XHJcbiJdfQ==