\n \n Info Card\n \n
","import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';\nimport { ButtonComponentConfig } from '../button/button.model';\nimport { LabelConfig } from '../label/label.model';\n\nexport class HolidaysCardComponentConfig {\n statusLabel: LabelConfig\n statusColor: string\n relatedHolidays?: number\n approveAction: boolean\n rejectAction: boolean\n pendingaction: boolean\n editAction: boolean\n deleteAction: boolean\n historicAction: boolean\n durationLabel?: LabelConfig\n relatedHolidaysLabel?: LabelConfig\n holidaysTypeLabel?: LabelConfig\n holidays: {\n startDate: Date;\n endDate: Date;\n duration: number;\n info: string;\n reason?: string;\n }\n}\n\n@Component({\n selector: 'ui-holidays-card',\n templateUrl: './holidays-card.component.html',\n styleUrls: ['./holidays-card.component.scss']\n})\nexport class HolidaysCardComponent implements OnInit {\n @Input() config: HolidaysCardComponentConfig;\n\n @Output() onAction = new EventEmitter();\n\n actions: {\n edit: ButtonComponentConfig,\n approve: ButtonComponentConfig,\n reject: ButtonComponentConfig,\n delete: ButtonComponentConfig,\n pending: ButtonComponentConfig,\n historic: ButtonComponentConfig\n } = {\n edit: { type: \"icon\", key: \"edit\", icon: \"edit\", color: undefined },\n approve: { type: \"icon\", key: \"thumb_up_alt\", icon: \"thumb_up_alt\", color: undefined },\n reject: { type: \"icon\", key: \"thumb_down_alt\", icon: \"thumb_down_alt\", color: undefined },\n delete: { type: \"icon\", key: \"delete\", icon: \"delete\", color: undefined },\n pending: { type: \"icon\", key: \"undo\", icon: \"undo\", color: undefined },\n historic: { type: \"icon\", key: \"history\", icon: \"history\", color: undefined },\n }\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n action(action) {\n this.onAction.emit(action)\n }\n}\n","\n
\n \n
\n {{data.holidaysTypeLabel | translate}}
\n {{data.holidays.startDate | date:'dd MMMM'}} -> {{data.holidays.endDate | date:'dd MMMM'}}
\n {{data.holidays.duration}} {{(data.durationLabel || 'Day(s)') | translate}}
\n {{data.statusLabel | translate}}
\n {{data.holidays.info}}
\n {{data.holidays.reason}}
\n \n \n
\n \n
\n","import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport moment from 'moment';\n\nexport class YearSelectorComponentConfig {\n date: Date\n}\n\n@Component({\n selector: 'ui-year-selector',\n templateUrl: './year-selector.component.html',\n styleUrls: ['./year-selector.component.scss']\n})\nexport class YearSelectorComponent implements OnInit, OnChanges {\n @Input() config: YearSelectorComponentConfig;\n @Output() onYearChange = new EventEmitter();\n\n year: number = 0;\n\n constructor() {}\n\n ngOnInit(): void {\n this.year = moment(this.config.date).year();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.year = moment(this.config.date).year();\n }\n\n nextYear() {\n this.config.date = moment(this.config.date).clone().add(1, 'y').toDate();\n this.onYearChange.emit(this.config.date.getFullYear());\n }\n\n previousYear() {\n this.config.date = moment(this.config.date).clone().subtract(1, 'y').toDate();\n this.onYearChange.emit(this.config.date.getFullYear());\n }\n}\n","\n
\n\n \n {{ headerDate | date:'MMMM YYYY' }}\n \n
\n\n \n
\n \n
\n \n {{day.date | date:'EEEEE'}}\n
\n \n
\n \n
\n \n {{day.date\n | date:'dd'}}{{day.events}}\n
\n \n
","import { ButtonComponentConfig } from \"../button/button.model\"\nimport { CheckboxComponentConfig } from \"../checkbox/checkbox.component\"\nimport { DateRangePickerComponentConfig } from \"../date-range-picker/date-range-picker.component\"\nimport { InputComponentConfig } from \"../input/input.component\"\nimport { LabelComponentConfig } from \"../label/label.model\"\nimport { ScheduleComponentConfig } from \"../schedule/schedule.component\"\nimport { Product } from \"../search-product/search-product.model\"\nimport { Supplier } from \"../search-supplier/search-supplier.model\"\nimport { SelectComponentConfig } from \"../select/select.component\"\nimport { TimePickerComponentConfig } from \"../time-picker/time-picker.component\"\nimport { TreeSelectorComponentConfig } from \"../tree-selector/tree-selector.model\"\nimport { ExtraDataComponentConfig } from \"./extra-data.model\"\n\nexport enum FormComponentCode {\n Input = 'INPUT',\n Checkbox = \"CHECKBOX\",\n Label = 'LABEL',\n Select = 'SELECT',\n Button = 'BUTTON',\n DateRangePicker = 'DATE_RANGE_PICKER',\n Schedule = 'SCHEDULE',\n TimePicker = 'TIME_PICKER',\n Form = 'FORM',\n TreeSelector = 'TREE_SELECTOR',\n ExtaData = 'EXTRA_DATA'\n}\n\nexport class GenericFormComponent\n \n {{ year }}\n \n
\n\n \n\n \n
","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatDialog } from '@angular/material/dialog';\nimport { KeyboardComponent } from '../keyboard/keyboard.component';\nimport { LabelConfig } from '../label/label.model';\n\nexport class InputComponentConfig {\n key: string\n id?: string\n value: string\n label?: LabelConfig\n type: \"text\" | \"textarea\" | \"number\" | \"password\" | \"date\" | \"time\" | \"file\" | \"email\"\n placeholder?: string\n hint?: LabelConfig\n required?: boolean\n disabled?: boolean\n integer?: boolean\n formControl?: AbstractControl\n align?: 'left' | 'center' | 'right'\n onSreenKeyboard?: boolean\n numberOfRows?: number\n}\n\n@Component({\n selector: 'ui-input',\n templateUrl: './input.component.html',\n styleUrls: ['./input.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n multi: true,\n useExisting: InputComponent\n }\n ]\n})\nexport class InputComponent implements OnInit, ControlValueAccessor {\n @Input() config: InputComponentConfig;\n @Output() changeValue = new EventEmitter();\n @Output() onTabPressed = new EventEmitter();\n\n onChange(value) {\n this.changeValue.emit(value);\n };\n onTouched() { };\n touched = false;\n\n constructor(\n private dialog: MatDialog\n ) { }\n\n ngOnInit(): void { }\n\n writeValue(value: any) {\n this.config.value = value;\n }\n\n registerOnChange(onChange: any) {\n this.onChange = onChange;\n }\n\n registerOnTouched(onTouched: any) {\n this.onTouched = onTouched;\n }\n\n setDisabledState(disabled: boolean) {\n this.config.disabled = disabled;\n }\n\n uploadFile(event) {\n if (event.target.files.length > 0) {\n this.onChange(event.target.files[0]);\n }\n }\n\n openKeyboard(value) {\n const dialogRef = this.dialog.open(KeyboardComponent, {\n data: {\n layoutName: this.config.type === \"number\" ? 'numeric' : 'default',\n value: this.config.type === \"number\" ? '' : value\n }\n });\n\n dialogRef.afterClosed().subscribe((result: string | number) => {\n if (!result) {\n return;\n }\n this.config.value = result.toString();\n this.onChange(result.toString());\n });\n }\n}\n","\n \n
\n\n \n
\n{{ config.label | translate }}
\n \n \n \n
\n\n
","import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';\nimport { TreeSelectorComponentConfig, TreeSelectorItem } from './tree-selector.model';\n\n@Component({\n selector: 'ui-tree-selector',\n templateUrl: './tree-selector.component.html',\n styleUrls: ['./tree-selector.component.scss']\n})\nexport class TreeSelectorComponent implements OnInit {\n @Input() config: TreeSelectorComponentConfig;\n\n @Output() onChanges = new EventEmitter();\n\n constructor() { }\n\n ngOnInit(): void {\n const itemsWithIds = this.addDataIds(this.config.items)\n\n this.config.items = [...this.checkNodeStatus(itemsWithIds)];\n }\n\n checkNodeStatus(data: TreeSelectorItem[]) {\n return data.map(item => {\n if (item.selected) {\n item.selected = !item.selected;\n this.selectNode(item, false);\n return item;\n }\n\n if (item.children?.length) {\n item.children = this.checkNodeStatus(item.children);\n }\n\n return item;\n })\n }\n\n addDataIds(data: TreeSelectorItem[]): TreeSelectorItem[] {\n return this.config.items.map((node, index) => this.addNodeId(node, index))\n }\n\n addNodeId(node: TreeSelectorItem, index: number, prefix?: string) {\n if (prefix) {\n node.id = `${prefix}.${index}`;\n } else {\n node.id = index.toString();\n }\n\n if (node.children?.length) {\n node.children = node.children.map((child, i) => this.addNodeId(child, i, node.id))\n }\n\n return node;\n }\n\n selectNode(node, emit: boolean = true) {\n const selectedItems = this.selectNextNodes(this.config.items, node.id, !node.selected);\n this.config.items = [...this.selectPreviousNodes(selectedItems, node.id, 1, node.selected)];\n\n if (emit) {\n this.onChanges.emit(this.config.items)\n }\n }\n\n selectPreviousNodes(nodes: TreeSelectorItem[], id: string, level: number, value: boolean) {\n const idNumbers = id.split(\".\");\n\n const masterId = idNumbers.slice(0, level).join(\".\");\n\n return nodes.map(node => {\n if (node.id === id) {\n return node;\n }\n\n if (node.id === masterId) {\n this.selectPreviousNodes(node.children, id, level + 1, value);\n delete node.selected;\n delete node.partialSelected;\n\n const allNodesSelected = node.children.every(child => child.selected);\n if (allNodesSelected) {\n node.selected = true;\n return node;\n }\n\n node.partialSelected = node.children.some(child => child.selected || child.partialSelected);\n }\n\n return node;\n })\n }\n\n selectNextNodes(node: TreeSelectorItem[], id: string, value: boolean) {\n return node.map(node => {\n if (node.id === id) {\n return this.updateNextNode(node, !node.selected)\n }\n\n if (node.children?.length) {\n this.selectNextNodes(node.children, id, value);\n }\n return node;\n })\n }\n\n updateNextNode(node: TreeSelectorItem, value: boolean): TreeSelectorItem {\n delete node.selected;\n delete node.partialSelected;\n node.selected = value;\n (node.children || []).forEach(child => this.updateNextNode(child, value));\n return node;\n }\n}","\n
\n \n
\n\n {{ config.labels.noPeriods | translate }}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n \n \n
\n \n
\n {{config.title | translate}}
\n{{config.description | translate}}
\n\n\n\n {{item.title}} \n \n
\n- \n
\n
","import { Component, Input, OnInit } from '@angular/core';\nimport { LabelConfig } from '../label/label.model';\n\nexport class TitleComponentConfig {\n title: LabelConfig\n align?: 'center' | 'left' | 'right'\n}\n\n@Component({\n selector: 'ui-title',\n templateUrl: './title.component.html',\n styleUrls: ['./title.component.scss']\n})\nexport class TitleComponent implements OnInit {\n @Input() config: TitleComponentConfig;\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","{{config.title | translate}}
\n\n
\n \n
\n {{data.date | date:'YYYY-MM-dd hh:mm'}}
\n {{data.user.name}}
\n \n
\n \n
\n {{data.oldLabel | translate}}
\n{{data.old.startDate | date:'dd MMMM'}} -> {{data.old.endDate | date:'dd MMMM'}}\n
\n {{data.old.statusLabel | translate}}
\n {{data.old.info}}
\n {{data.old.reason}}
\n \n
\n {{data.newLabel | translate}}
\n{{data.new.startDate | date:'dd MMMM'}} -> {{data.new.endDate | date:'dd MMMM'}}\n
\n {{data.new.statusLabel | translate}}
\n {{data.new.info}}
\n {{data.new.reason}}
\n \n
\n","export class Product {\n\tcodes: string[]\n\tname: string\n}\n\nexport class SearchProductComponentConfig {\n\tproducts?: Product[]\n\ttext?: string\n}\n\nexport class SearchProductComponentServices {\n\tgetProducts: (description: string) => Promise{{ config.title | translate}}
\n\n {{ config.text | translate}}\n\n
\n \n \n
\n \n \n
\n{{ 'search-product.title' | translate}}
\n\n\t
\n\n\n\t
\n\n\n
\n \n
\n {{data.timesheetTypeLabel | translate}}
\n {{data.timesheet.store?.name}}
\n {{data.timesheet.startDate | date:'HH:mm'}} - {{data.timesheet.endDate | date:'HH:mm'}} ( {{diff}}h )
\n {{data.statusLabel | translate}}
\n {{data.timesheet.info}}
\n > {{data.timesheet.reason}}
\n \n
\n \n
","export class Supplier {\n\tcode: string\n\tname: string\n\ttaxPayerNumber: string\n}\n\nexport class SearchSupplierComponentConfig {\n\tsuppliers?: Supplier[]\n}\n\nexport class SearchSupplierComponentServices {\n\tgetSuppliers: (description: string) => Promise\n
\n{{config.labels[day] | translate}}
\n\n
\n \n
\n \n .\n
\n \n edit \n {{employee.name}}\n
\n \n
\n \n .\n
\n \n {{employee.diffHours}}h\n
\n \n
\n \n
\n {{hour}}h
\n \n \n \n
\n \n {{timesheet.startHour}} - {{timesheet.endHour}}\n {{config.labels.dayOff | translate}}\n
\n {{ 'search-supplier.title' | translate}}
\n\n\t
\n\n\n\t
\n\n\n\t
\n\n\n\t\t
\n\n\t\t\t
\n\t\t\n\t\t\t\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\n\t
","import { Component, Input, OnInit, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';\nimport { ButtonComponentConfig } from '../button/button.model';\nimport { LabelConfig } from '../label/label.model';\nimport { TitleComponentConfig } from '../title/title.component';\n\nexport class MetricCardComponentConfig {\n icon: ButtonComponentConfig\n redirect?: ButtonComponentConfig\n title: TitleComponentConfig\n metrics: Metric[]\n}\n\nclass Metric {\n label: LabelConfig\n value: number | string\n formattedValue?: string\n valueSuffix?: LabelConfig\n color: string\n type?: \"euro\"\n decimalCases?: number\n}\n\n@Component({\n selector: 'ui-metric-card',\n templateUrl: './metric-card.component.html',\n styleUrls: ['./metric-card.component.scss']\n})\nexport class MetricCardComponent implements OnInit, OnChanges {\n @Input() config: MetricCardComponentConfig;\n\n @Output() onOpen = new EventEmitter();\n\n constructor() { }\n\n ngOnInit(): void {\n this.config.metrics = this.config.metrics.map(metric => ({\n ...metric,\n formattedValue: this.getMetricValue(metric)\n }));\n }\n\n ngOnChanges() {\n this.ngOnInit();\n }\n\n getMetricValue(metric: Metric) {\n const decimalCases = metric.decimalCases ?? 2;\n switch (metric.type) {\n case \"euro\":\n return new Intl.NumberFormat('pt-PT', {\n style: 'currency',\n currency: 'EUR',\n minimumFractionDigits: decimalCases,\n maximumFractionDigits: decimalCases\n }).format(metric.value as number);\n default:\n if(Number.isFinite(metric.value)) {\n return new Intl.NumberFormat('pt-PT', {\n minimumFractionDigits: decimalCases,\n maximumFractionDigits: decimalCases\n }).format(metric.value as number);\n }\n\n return metric.value.toString();\n }\n }\n\n open() {\n this.onOpen.emit()\n }\n}\n","{{config.pdtLabels.readingData | translate}}
\n\t\n\t\t
\n\n
\n","import { Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';\nimport { StepperComponentConfig } from '../../public-api';\n\n@Component({\n selector: 'ui-stepper',\n templateUrl: './stepper.component.html',\n styleUrls: ['./stepper.component.scss'],\n providers:[]\n})\nexport class StepperComponent implements OnInit, OnChanges {\n @Input() config: StepperComponentConfig;\n @Input() body: TemplateRef\n
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {{ metric.label | translate}}
\n{{metric.formattedValue}} {{ metric.valueSuffix | translate}}
\n\n \n \n \n \n \n \n \n \n
\n\n{{step.title | translate}}
\n{{step.description | translate}}
\n= 992\">\n
","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { LabelConfig } from '../label/label.model';\n\nclass TimelineInterval {\n startValue: number\n endValue: number\n backgroundColor: string\n text: LabelConfig\n}\n\nexport class TimelineVizualizerComponentConfig {\n title: LabelConfig\n headers: {\n label: LabelConfig,\n value: number\n }[]\n lines: {\n label: LabelConfig,\n intervals: TimelineInterval[],\n resume?: LabelConfig,\n data?: any\n backgroundColor?: string\n }[]\n key: string\n cellWidth: number\n}\n\n@Component({\n selector: 'ui-timeline-vizualizer',\n templateUrl: './timeline-vizualizer.component.html',\n styleUrls: ['./timeline-vizualizer.component.scss']\n})\nexport class TimelineVizualizerComponent implements OnInit {\n @Input() config: TimelineVizualizerComponentConfig;\n\n @Output() onLineClick = new EventEmitter();\n\n constructor() { }\n\n ngOnInit(): void {\n this.setTableLines();\n }\n\n setTableLines() {\n this.config.lines = this.config.lines.map(line => {\n return {\n ...line,\n intervalsPosition: line.intervals.map(interval => this.calculateIntervalPosition(interval))\n }\n })\n }\n\n calculateIntervalPosition(interval: TimelineInterval) {\n if(!this.config.headers.length) {\n return;\n }\n\n const headers = this.config.headers.filter(header => header.value >= interval.startValue && header.value < interval.endValue);\n\n return {\n width: (this.config.cellWidth * (headers.length || 1)) + \"px\",\n left: (this.config.cellWidth * (interval.startValue - this.config.headers[0].value)) + \"px\",\n backgroundColor: interval.backgroundColor,\n text: interval.text\n }\n }\n\n lineClick(line) {\n this.onLineClick.emit(line)\n }\n}\n","\n
\n\n \n \n
\n \n
\n \n
\n {{step.title | translate}}
\n\n
\n {{step.description | translate}}
\n\n
\n \n
\n \n
","import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';\nimport { AccordionComponentConfig } from './accordion.model';\n\n@Component({\n selector: 'ui-accordion',\n templateUrl: './accordion.component.html',\n styleUrls: ['./accordion.component.scss']\n})\nexport class AccordionComponent implements OnInit {\n @Input() config: AccordionComponentConfig;\n @Input() title: TemplateRef\n
\n{{config.title | translate}}
\n\n
\n \n
\n \n .\n
\n \n edit \n {{line.label | translate}}\n
\n \n
\n \n .\n
\n \n {{line.resume | translate}}\n
\n \n
\n \n
\n {{header.label | translate}}
\n \n \n \n
\n \n {{interval.text | translate}}\n
\n \n \n \n \n \n \n \n\n \n \n \n \n
\n","import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatDialog } from '@angular/material/dialog';\nimport { AccordionComponentConfig } from '../accordion/accordion.model';\nimport { SelectComponentConfig } from '../select/select.component';\nimport { FormComponentCode, FormComponentConfig } from '../form/form.model';\nimport { DataTableComponentConfig, DataTableComponentConfigHeader, DataTableLine } from './data-table.model';\nimport { ButtonComponentConfig } from '../button/button.model';\nimport { FormService } from '../../services/form.service';\n\n@Component({\n selector: 'ui-data-table',\n templateUrl: './data-table.component.html',\n styleUrls: ['./data-table.component.scss']\n})\nexport class DataTableComponent implements OnInit, OnChanges {\n @Input() config: DataTableComponentConfig;\n @Input() lineHeaderTemplate: TemplateRef\n
\n\n\n\n
\n \n
\n \n
\n \n
\n\n \n
\n\n \n \n \n {{data.data.title | translate}}\n \n \n \n \n\n \n \n \n \n \n
\n \n \n \n
\n\n \n
\n | \n {{config.headers[i].label | translate}}\n | \n\n | \n
\n
\n \n
\n \n
\n \n \n
\n
\n | \n \n | \n \n \n {{header.label | translate}}\n\n \n \n \n \n \n \n \n | \n \n \n | \n
|---|---|---|
| \n | \n \n | \n \n | \n
| \n | \n ||
| \n | \n
1\">\n \n \n\n (7-1)\">\n \n\n config.page-7\">\n \n\n config.page && page.page < config.page+7\">\n \n\n \n \n\n \n
\n\n chevron_left \n
\n \n {{page.page+1}}\n
\n\n ...
\n \n {{page.page+1}}\n
\n \n {{page.page+1}}\n
\n ...
\n\n \n {{page.page+1}}\n
\n \n chevron_right \n
\n \n \n {{category.icon}} \n {{category.title | translate}}\n
\n\n \n
\n\n {{item.icon}} \n
\n {{item.label | translate}}
\n\n
\n","export class MoneySelectorComponentConfig {\n money: {\n image: string,\n value: number,\n quantity?: number,\n total?: number\n }[]\n}","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormArray, FormGroup } from '@angular/forms';\nimport { ButtonComponentConfig } from '../button/button.model';\nimport { LabelComponentConfig } from '../label/label.model';\nimport { FormListComponentConfig } from './form-list.model';\n\n@Component({\n selector: 'ui-form-list',\n templateUrl: './form-list.component.html',\n styleUrls: ['./form-list.component.scss']\n})\nexport class FormListComponent implements OnInit {\n @Input() config: FormListComponentConfig = {\n linear: true,\n forms: [],\n confirmLabel: { text: \"\" },\n confirmButton: { text: \"\" },\n addElementsButton: { text: \"\" },\n removeElementsButton: true,\n calculateTotal: () => 0\n };\n\n @Output() onConfirm = new EventEmitter();\n @Output() onAddElements = new EventEmitter();\n\t@Output() onFormArrayCreation = new EventEmitter();\n\n confirmLabel: LabelComponentConfig = {\n align: \"left\",\n label: {\n text: \"\",\n data: {\n prop1: \"\"\n }\n }\n }\n\n confirmButton: ButtonComponentConfig = {\n key: \"confirm\",\n type: \"text\",\n color: \"primary\",\n label: { text: \"confirm\" }\n }\n\n addElementsButton: ButtonComponentConfig = {\n key: \"add\",\n type: \"text\",\n color: \"primary\",\n label: { text: \"add\" }\n }\n\n removeElementsButton: ButtonComponentConfig = {\n key: \"remove\",\n type: \"icon\",\n color: undefined,\n icon: \"delete\"\n }\n\n formArray = new FormArray([]);\n\n constructor() { }\n\n ngOnInit(): void {\n this.addElementsButton.label = this.config.addElementsButton;\n this.confirmButton.label = this.config.confirmButton;\n this.confirmLabel.label = this.config.confirmLabel;\n\n this.formArray.valueChanges.subscribe(data => {\n if(this.confirmButton) {\n this.confirmButton.disabled = !this.formArray.valid;\n }\n\n if (this.config.calculateTotal) {\n this.confirmLabel = {\n ...this.confirmLabel,\n label: {\n ...this.confirmLabel.label,\n data: {\n prop1: this.config.calculateTotal(data).toFixed(2)\n }\n }\n }\n }\n })\n\n if (this.config.calculateTotal) {\n this.confirmLabel = {\n ...this.confirmLabel,\n label: {\n ...this.confirmLabel.label,\n data: {\n prop1: this.config.calculateTotal([]).toFixed(2)\n }\n }\n }\n }\n\n this.onFormArrayCreation.emit(this.formArray);\n }\n\n addForm(event: FormGroup) {\n this.formArray.push(event);\n }\n\n confirm() {\n this.onConfirm.emit(this.formArray.value);\n }\n\n addElements() {\n this.onAddElements.emit();\n }\n\n removeElement(index) {\n this.formArray.removeAt(index);\n this.config.forms.splice(index, 1);\n }\n}\n","\n
\n\n ![]()
\n\n
\n\n\n \n
\n \n
\n\n
\n","import { FormComponentConfig } from \"../form/form.model\"\nimport { LabelConfig } from \"../label/label.model\"\n\nexport class FormListComponentConfig {\n linear: boolean\n forms: FormComponentConfig[]\n confirmLabel?: LabelConfig\n confirmButton?: LabelConfig\n addElementsButton?: LabelConfig\n removeElementsButton?: Boolean\n calculateTotal?: (data: any[]) => number\n}\n","import { Component, Input, OnInit } from '@angular/core';\nimport { UiComponentsService } from '../../services/ui-components.service';\nimport { LabelConfig } from '../label/label.model';\nimport { PieChartComponentConfig } from './pie-chart.model';\n\n@Component({\n selector: 'ui-pie-chart',\n templateUrl: './pie-chart.component.html',\n styleUrls: ['./pie-chart.component.scss']\n})\nexport class PieChartComponent implements OnInit {\n @Input() config: PieChartComponentConfig;\n\n colorScheme = {\n domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']\n };\n\n euroFormatter = new Intl.NumberFormat('pt-PT', { style: 'currency', currency: 'EUR' });\n\n constructor(\n private uiComponentsService: UiComponentsService\n ) {\n\n }\n\n ngOnInit(): void {\n this.config.data = this.config.data.map(d => ({\n ...d,\n name: this.uiComponentsService.translate(d.label)\n }));\n\n if (this.config.colorScheme) {\n this.colorScheme.domain = this.config.colorScheme;\n }\n }\n\n onSelect(data): void {\n console.log('Item clicked', JSON.parse(JSON.stringify(data)));\n }\n\n onActivate(data): void {\n console.log('Activate', JSON.parse(JSON.stringify(data)));\n }\n\n onDeactivate(data): void {\n console.log('Deactivate', JSON.parse(JSON.stringify(data)));\n }\n\n formatValue(data) {\n return new Intl.NumberFormat('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(data);\n }\n\n formatEuro(data) {\n return new Intl.NumberFormat('pt-PT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(data);\n }\n}\n","\n \n \n
\n","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { UiComponentsService } from '../../services/ui-components.service';\nimport { LabelConfig } from '../label/label.model';\nimport { LineChartComponentConfig } from './line-chart.model';\n\n@Component({\n selector: 'ui-line-chart',\n templateUrl: './line-chart.component.html',\n styleUrls: ['./line-chart.component.scss']\n})\nexport class LineChartComponent implements OnInit {\n @Input() config: LineChartComponentConfig;\n @Output() onClick = new EventEmitter();\n\n multi: any[];\n\n // options\n legend: boolean = true;\n showLabels: boolean = true;\n animations: boolean = true;\n xAxis: boolean = true;\n yAxis: boolean = true;\n showYAxisLabel: boolean = true;\n showXAxisLabel: boolean = true;\n timeline: boolean = false;\n\n colorScheme = {\n domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']\n };\n\n constructor(\n private uiComponentsService: UiComponentsService\n ) {\n }\n\n ngOnInit(): void {\n this.config.data = this.config.data.map(d => ({\n ...d,\n name: this.uiComponentsService.translate(d.label),\n series: d.series.map(s => ({\n ...s,\n name: this.uiComponentsService.translate(s.label),\n }))\n }));\n\n if (this.config.colorScheme) {\n this.colorScheme.domain = this.config.colorScheme;\n }\n }\n\n onSelect(data): void {\n this.onClick.emit(data);\n }\n\n onActivate(data): void {\n //console.log('Activate', JSON.parse(JSON.stringify(data)));\n }\n\n onDeactivate(data): void {\n //console.log('Deactivate', JSON.parse(JSON.stringify(data)));\n }\n}\n","\n \n\n
\n","import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef } from '@angular/core';\nimport { TabsComponentConfig } from '../../public-api';\n\n@Component({\n selector: 'ui-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n providers:[]\n})\nexport class TabsComponent implements OnInit, OnChanges {\n @Input() config: TabsComponentConfig;\n @Input() body: TemplateRef\n \n
\n\n","import { LabelConfig } from \"../label/label.model\"\n\nexport class BottomBarComponentConfig {\n actions: BottomBarComponentConfigAction[]\n}\n\n\nexport class BottomBarComponentConfigAction {\n id?: string\n code: string\n label: LabelConfig\n icon: string\n active?: boolean\n path: string\n data?: any\n}\n","import { CommonModule } from '@angular/common';\nimport { ModuleWithProviders, NgModule } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatListModule } from '@angular/material/list';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\nimport { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA, MAT_BOTTOM_SHEET_DEFAULT_OPTIONS } from '@angular/material/bottom-sheet';\nimport { MatTableModule } from '@angular/material/table';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { ButtonComponent } from './button/button.component';\nimport { HeaderComponent } from './header/header.component';\nimport { ListMenuComponent } from './list-menu/list-menu.component';\nimport { LabelComponent } from './label/label.component';\nimport { DayRangeSelectorComponent } from './day-range-selector/day-range-selector.component';\nimport { InfoCardComponent } from './info-card/info-card.component';\nimport { HolidaysCardComponent } from './holidays-card/holidays-card.component';\nimport { CalendarComponent } from './calendar/calendar.component';\nimport { SelectComponent } from './select/select.component';\nimport { YearSelectorComponent } from './year-selector/year-selector.component';\nimport { FormComponent } from './form/form.component';\nimport { LoadingComponent } from './loading/loading.component';\nimport { CheckboxComponent } from './checkbox/checkbox.component';\nimport { DateRangePickerComponent } from './date-range-picker/date-range-picker.component';\nimport { InputComponent } from './input/input.component';\nimport { TitleComponent } from './title/title.component';\nimport { UiComponentsConfig, UiComponentsService } from '../services/ui-components.service';\nimport { TranslatePipe } from '../pipes/translate.pipe';\nimport { HistoricHolidaysCardComponent } from './historic-holidays-card/historic-holidays-card.component';\nimport { DialogComponent } from './dialog/dialog.component';\nimport { TimePickerComponent } from './time-picker/time-picker.component';\nimport { TableComponent } from './table/table.component';\nimport { ScheduleComponent } from './schedule/schedule.component';\nimport { TimesheetCardComponent } from './timesheet-card/timesheet-card.component';\nimport { MatGridListModule } from '@angular/material/grid-list';\nimport { ScheduleVizualizerComponent } from './schedule-vizualizer/schedule-vizualizer.component';\nimport { PdtDocumentBuilderComponent } from './pdt-document-builder/pdt-document-builder.component';\nimport { SearchProductComponent } from './search-product/search-product.component';\nimport { SearchSupplierComponent } from './search-supplier/search-supplier.component';\nimport { MetricCardComponent } from './metric-card/metric-card.component';\nimport { StepperComponent } from './stepper/stepper.component';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { TimelineVizualizerComponent } from './timeline-vizualizer/timeline-vizualizer.component';\nimport { DataTableComponent } from './data-table/data-table.component';\nimport { AccordionComponent } from './accordion/accordion.api';\nimport { CategoryMenuComponent } from './category-menu/category-menu.component';\nimport { MatTreeModule } from '@angular/material/tree';\nimport { TreeSelectorComponent } from './tree-selector/tree-selector.api';\nimport { MoneySelectorComponent } from './money-selector/money-selector.api';\nimport { FormListComponent } from './form-list/form-list.api';\nimport { KeyboardComponent } from './keyboard/keyboard.api';\nimport { PieChartComponent } from './pie-chart/pie-chart.component';\nimport { NgxChartsModule }from '@swimlane/ngx-charts';\nimport { LineChartComponent } from './line-chart/line-chart.component';\nimport { TabsComponent } from './tabs/tabs.component';\nimport { DateRangeToolbarComponent } from './date-range-toolbar/date-range-toolbar.component';\nimport { BottomBarComponent } from './bottom-bar/bottom-bar.api';\nimport { FormService } from '../services/form.service';\nimport { RouterModule } from '@angular/router';\n\n@NgModule({\n declarations: [\n ButtonComponent,\n HeaderComponent,\n ListMenuComponent,\n YearSelectorComponent,\n DayRangeSelectorComponent,\n InfoCardComponent,\n HolidaysCardComponent,\n HistoricHolidaysCardComponent,\n CalendarComponent,\n SelectComponent,\n FormComponent,\n LoadingComponent,\n CheckboxComponent,\n DateRangePickerComponent,\n DayRangeSelectorComponent,\n InputComponent,\n LabelComponent,\n TitleComponent,\n TranslatePipe,\n DialogComponent,\n TimePickerComponent,\n ScheduleComponent,\n TimesheetCardComponent,\n ScheduleVizualizerComponent,\n PdtDocumentBuilderComponent,\n TableComponent,\n SearchProductComponent,\n SearchSupplierComponent,\n MetricCardComponent,\n StepperComponent,\n TimelineVizualizerComponent,\n DataTableComponent,\n AccordionComponent,\n CategoryMenuComponent,\n TreeSelectorComponent,\n MoneySelectorComponent,\n FormListComponent,\n KeyboardComponent,\n PieChartComponent,\n LineChartComponent,\n TabsComponent,\n DateRangeToolbarComponent,\n BottomBarComponent\n ],\n imports: [\n CommonModule,\n RouterModule,\n MatButtonModule,\n MatIconModule,\n MatToolbarModule,\n MatListModule,\n FormsModule,\n ReactiveFormsModule,\n MatInputModule,\n MatCheckboxModule,\n MatFormFieldModule,\n MatDialogModule,\n MatCardModule,\n MatProgressSpinnerModule,\n MatDatepickerModule,\n MatNativeDateModule,\n MatExpansionModule,\n MatSelectModule,\n MatTooltipModule,\n MatBottomSheetModule,\n MatTableModule,\n MatTabsModule,\n MatButtonToggleModule,\n DragDropModule,\n MatGridListModule,\n MatSnackBarModule,\n MatStepperModule,\n MatTreeModule,\n NgxChartsModule\n ],\n exports: [\n ButtonComponent,\n HeaderComponent,\n ListMenuComponent,\n YearSelectorComponent,\n DayRangeSelectorComponent,\n InfoCardComponent,\n HolidaysCardComponent,\n HistoricHolidaysCardComponent,\n CalendarComponent,\n SelectComponent,\n FormComponent,\n LoadingComponent,\n CheckboxComponent,\n DateRangePickerComponent,\n DayRangeSelectorComponent,\n InputComponent,\n LabelComponent,\n TitleComponent,\n DialogComponent,\n TimePickerComponent,\n ScheduleComponent,\n TimesheetCardComponent,\n ScheduleVizualizerComponent,\n PdtDocumentBuilderComponent,\n TableComponent,\n SearchProductComponent,\n SearchSupplierComponent,\n MetricCardComponent,\n StepperComponent,\n TimelineVizualizerComponent,\n DataTableComponent,\n AccordionComponent,\n CategoryMenuComponent,\n TreeSelectorComponent,\n MoneySelectorComponent,\n FormListComponent,\n KeyboardComponent,\n PieChartComponent,\n LineChartComponent,\n TabsComponent,\n DateRangeToolbarComponent,\n BottomBarComponent\n ],\n providers: [\n UiComponentsService,\n FormService,\n { provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: { hasBackdrop: true } },\n { provide: MAT_BOTTOM_SHEET_DATA, useValue: {} },\n ]\n})\nexport class UiComponentsModule {\n static forRoot(config: UiComponentsConfig): ModuleWithProviders