cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
66 lines • 10.6 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MessageType } from '../../enums/message-type.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/flex";
export class SelectComponent {
renderer;
options = [];
id;
label;
value;
placeholder;
labelInline = false;
multiple = false;
onChange = new EventEmitter();
selectDOM = null;
messageTypes = MessageType;
constructor(renderer) {
this.renderer = renderer;
}
ngAfterViewInit() {
this.adjustDimensions();
if (this.multiple) {
this.insertCheckBoxProperties();
}
}
adjustDimensions() {
this.selectDOM = document.querySelector('br-select');
const shadowRoot = this.selectDOM?.shadowRoot;
const brSelect = shadowRoot?.querySelector('.br-select');
this.renderer.setStyle(brSelect, 'max-width', '100%');
this.renderer.setStyle(brSelect, 'min-width', 'auto');
}
insertCheckBoxProperties() {
this.options = this.options.map((option) => {
return {
value: option.value,
label: option.label,
selected: option.selected ? true : false,
};
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectComponent, selector: "cfc-select", inputs: { options: "options", id: "id", label: "label", value: "value", placeholder: "placeholder", labelInline: "labelInline", multiple: "multiple" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\r\n [fxLayout]=\"labelInline ? 'row' : 'column'\"\r\n [fxLayoutAlign]=\"labelInline ? 'center center' : ''\">\r\n <label\r\n *ngIf=\"label\"\r\n class=\"input-label\"\r\n style=\"margin: 0;\"\r\n [for]=\"id\">\r\n {{ label }}\r\n </label>\r\n <br-select\r\n style=\"width: 100%;\"\r\n [id]=\"id\"\r\n [options]=\"options\"\r\n [multiple]=\"multiple\"\r\n [value]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n [options]=\"options\"\r\n (change)=\"onChange.emit($event)\">\r\n </br-select>\r\n</div>\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-select', template: "<div\r\n [fxLayout]=\"labelInline ? 'row' : 'column'\"\r\n [fxLayoutAlign]=\"labelInline ? 'center center' : ''\">\r\n <label\r\n *ngIf=\"label\"\r\n class=\"input-label\"\r\n style=\"margin: 0;\"\r\n [for]=\"id\">\r\n {{ label }}\r\n </label>\r\n <br-select\r\n style=\"width: 100%;\"\r\n [id]=\"id\"\r\n [options]=\"options\"\r\n [multiple]=\"multiple\"\r\n [value]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n [options]=\"options\"\r\n (change)=\"onChange.emit($event)\">\r\n </br-select>\r\n</div>\r\n", styles: [":host{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { options: [{
type: Input
}], id: [{
type: Input
}], label: [{
type: Input
}], value: [{
type: Input
}], placeholder: [{
type: Input
}], labelInline: [{
type: Input
}], multiple: [{
type: Input
}], onChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvc2VsZWN0L3NlbGVjdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFFakcsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7O0FBYTVELE1BQU0sT0FBTyxlQUFlO0lBZ0JoQjtJQWZELE9BQU8sR0FBbUIsRUFBRSxDQUFDO0lBQzdCLEVBQUUsQ0FBVTtJQUNaLEtBQUssQ0FBVTtJQUNmLEtBQUssQ0FBTztJQUNaLFdBQVcsQ0FBVTtJQUNyQixXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFFaEIsUUFBUSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0lBRWhFLFNBQVMsR0FBdUIsSUFBSSxDQUFDO0lBRTVCLFlBQVksR0FBRyxXQUFXLENBQUM7SUFFcEMsWUFDVSxRQUFtQjtRQUFuQixhQUFRLEdBQVIsUUFBUSxDQUFXO0lBQzFCLENBQUM7SUFFSixlQUFlO1FBQ1gsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFDbEMsQ0FBQztJQUNMLENBQUM7SUFFTyxnQkFBZ0I7UUFDdEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3JELE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUUsVUFBVSxDQUFDO1FBQzlDLE1BQU0sUUFBUSxHQUFHLFVBQVUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDekQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLFdBQVcsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsV0FBVyxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFFTyx3QkFBd0I7UUFDOUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFO1lBQ3pDLE9BQU87Z0JBQ0wsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLO2dCQUNuQixLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUs7Z0JBQ25CLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUEsQ0FBQyxDQUFDLEtBQUs7YUFDeEMsQ0FBQTtRQUNILENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQzt3R0ExQ1UsZUFBZTs0RkFBZixlQUFlLDZPQ2Y1QiwyaUJBcUJBOzs0RkROYSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVk7OEVBS2IsT0FBTztzQkFBZixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1lc3NhZ2VTdGF0ZSB9IGZyb20gJy4uLy4uL2VudW1zL21lc3NhZ2Utc3RhdGUuZW51bSc7XHJcbmltcG9ydCB7IE1lc3NhZ2VUeXBlIH0gZnJvbSAnLi4vLi4vZW51bXMvbWVzc2FnZS10eXBlLmVudW0nO1xyXG5cclxudHlwZSBzZWxlY3RPcHRpb24gPSB7XHJcbiAgdmFsdWU6IGFueSxcclxuICBsYWJlbD86IHN0cmluZyxcclxuICBzZWxlY3RlZD86IGJvb2xlYW5cclxufVxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjZmMtc2VsZWN0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vc2VsZWN0LmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQElucHV0KCkgb3B0aW9uczogc2VsZWN0T3B0aW9uW10gPSBbXTtcclxuICBASW5wdXQoKSBpZD86IHN0cmluZztcclxuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcclxuICBASW5wdXQoKSB2YWx1ZT86IGFueTtcclxuICBASW5wdXQoKSBwbGFjZWhvbGRlcj86IHN0cmluZztcclxuICBASW5wdXQoKSBsYWJlbElubGluZSA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIG11bHRpcGxlID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKSBvbkNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgc2VsZWN0RE9NOiBIVE1MRWxlbWVudCB8IG51bGwgPSBudWxsO1xyXG5cclxuICByZWFkb25seSBtZXNzYWdlVHlwZXMgPSBNZXNzYWdlVHlwZTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjJcclxuICApIHt9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgICAgdGhpcy5hZGp1c3REaW1lbnNpb25zKCk7XHJcbiAgICAgIGlmICh0aGlzLm11bHRpcGxlKSB7XHJcbiAgICAgICAgdGhpcy5pbnNlcnRDaGVja0JveFByb3BlcnRpZXMoKTtcclxuICAgICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhZGp1c3REaW1lbnNpb25zKCk6IHZvaWQge1xyXG4gICAgdGhpcy5zZWxlY3RET00gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdici1zZWxlY3QnKTtcclxuICAgIGNvbnN0IHNoYWRvd1Jvb3QgPSB0aGlzLnNlbGVjdERPTT8uc2hhZG93Um9vdDtcclxuICAgIGNvbnN0IGJyU2VsZWN0ID0gc2hhZG93Um9vdD8ucXVlcnlTZWxlY3RvcignLmJyLXNlbGVjdCcpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShiclNlbGVjdCwgJ21heC13aWR0aCcsICcxMDAlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKGJyU2VsZWN0LCAnbWluLXdpZHRoJywgJ2F1dG8nKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgaW5zZXJ0Q2hlY2tCb3hQcm9wZXJ0aWVzKCk6IHZvaWQge1xyXG4gICAgdGhpcy5vcHRpb25zID0gdGhpcy5vcHRpb25zLm1hcCgob3B0aW9uKSA9PiB7XHJcbiAgICAgIHJldHVybiB7XHJcbiAgICAgICAgdmFsdWU6IG9wdGlvbi52YWx1ZSxcclxuICAgICAgICBsYWJlbDogb3B0aW9uLmxhYmVsLFxyXG4gICAgICAgIHNlbGVjdGVkOiBvcHRpb24uc2VsZWN0ZWQgPyB0cnVlOiBmYWxzZSxcclxuICAgICAgfVxyXG4gICAgfSlcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXZcclxuICBbZnhMYXlvdXRdPVwibGFiZWxJbmxpbmUgPyAncm93JyA6ICdjb2x1bW4nXCJcclxuICBbZnhMYXlvdXRBbGlnbl09XCJsYWJlbElubGluZSA/ICdjZW50ZXIgY2VudGVyJyA6ICcnXCI+XHJcbiAgPGxhYmVsXHJcbiAgICAqbmdJZj1cImxhYmVsXCJcclxuICAgIGNsYXNzPVwiaW5wdXQtbGFiZWxcIlxyXG4gICAgc3R5bGU9XCJtYXJnaW46IDA7XCJcclxuICAgIFtmb3JdPVwiaWRcIj5cclxuICAgIHt7IGxhYmVsIH19XHJcbiAgPC9sYWJlbD5cclxuICA8YnItc2VsZWN0XHJcbiAgICBzdHlsZT1cIndpZHRoOiAxMDAlO1wiXHJcbiAgICBbaWRdPVwiaWRcIlxyXG4gICAgW29wdGlvbnNdPVwib3B0aW9uc1wiXHJcbiAgICBbbXVsdGlwbGVdPVwibXVsdGlwbGVcIlxyXG4gICAgW3ZhbHVlXT1cInZhbHVlXCJcclxuICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXHJcbiAgICBbb3B0aW9uc109XCJvcHRpb25zXCJcclxuICAgIChjaGFuZ2UpPVwib25DaGFuZ2UuZW1pdCgkZXZlbnQpXCI+XHJcbiAgPC9ici1zZWxlY3Q+XHJcbjwvZGl2PlxyXG4iXX0=