cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
51 lines • 9.28 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;
onChange = new EventEmitter();
selectDOM = null;
messageTypes = MessageType;
constructor(renderer) {
this.renderer = renderer;
}
ngAfterViewInit() {
this.adjustDimensions();
}
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');
}
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" }, 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 [value]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (change)=\"onChange.emit($event)\">\r\n <br-item *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </br-item>\r\n </br-select>\r\n</div>\r\n", styles: [":host{width:100%}\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.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 [value]=\"value\"\r\n [placeholder]=\"placeholder\"\r\n (change)=\"onChange.emit($event)\">\r\n <br-item *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </br-item>\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
}], onChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvc2VsZWN0L3NlbGVjdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFFakcsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7O0FBTzVELE1BQU0sT0FBTyxlQUFlO0lBZWhCO0lBZEQsT0FBTyxHQUFVLEVBQUUsQ0FBQztJQUNwQixFQUFFLENBQVU7SUFDWixLQUFLLENBQVU7SUFDZixLQUFLLENBQU87SUFDWixXQUFXLENBQVU7SUFDckIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUVuQixRQUFRLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFFaEUsU0FBUyxHQUF1QixJQUFJLENBQUM7SUFFNUIsWUFBWSxHQUFHLFdBQVcsQ0FBQztJQUVwQyxZQUNVLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7SUFDMUIsQ0FBQztJQUVKLGVBQWU7UUFDWCxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRU8sZ0JBQWdCO1FBQ3RCLElBQUksQ0FBQyxTQUFTLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNyRCxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLFVBQVUsQ0FBQztRQUM5QyxNQUFNLFFBQVEsR0FBRyxVQUFVLEVBQUUsYUFBYSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxXQUFXLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDdEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLFdBQVcsRUFBRSxNQUFNLENBQUMsQ0FBQztJQUN4RCxDQUFDO3dHQTVCVSxlQUFlOzRGQUFmLGVBQWUsdU5DVDVCLHdtQkFzQkE7OzRGRGJhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTs4RUFLYixPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1lc3NhZ2VTdGF0ZSB9IGZyb20gJy4uLy4uL2VudW1zL21lc3NhZ2Utc3RhdGUuZW51bSc7XHJcbmltcG9ydCB7IE1lc3NhZ2VUeXBlIH0gZnJvbSAnLi4vLi4vZW51bXMvbWVzc2FnZS10eXBlLmVudW0nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjZmMtc2VsZWN0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vc2VsZWN0LmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQElucHV0KCkgb3B0aW9uczogYW55W10gPSBbXTtcclxuICBASW5wdXQoKSBpZD86IHN0cmluZztcclxuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcclxuICBASW5wdXQoKSB2YWx1ZT86IGFueTtcclxuICBASW5wdXQoKSBwbGFjZWhvbGRlcj86IHN0cmluZztcclxuICBASW5wdXQoKSBsYWJlbElubGluZSA9IGZhbHNlO1xyXG5cclxuICBAT3V0cHV0KCkgb25DaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIHNlbGVjdERPTTogSFRNTEVsZW1lbnQgfCBudWxsID0gbnVsbDtcclxuXHJcbiAgcmVhZG9ubHkgbWVzc2FnZVR5cGVzID0gTWVzc2FnZVR5cGU7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyXHJcbiAgKSB7fVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICAgIHRoaXMuYWRqdXN0RGltZW5zaW9ucygpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhZGp1c3REaW1lbnNpb25zKCk6IHZvaWQge1xyXG4gICAgdGhpcy5zZWxlY3RET00gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdici1zZWxlY3QnKTtcclxuICAgIGNvbnN0IHNoYWRvd1Jvb3QgPSB0aGlzLnNlbGVjdERPTT8uc2hhZG93Um9vdDtcclxuICAgIGNvbnN0IGJyU2VsZWN0ID0gc2hhZG93Um9vdD8ucXVlcnlTZWxlY3RvcignLmJyLXNlbGVjdCcpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShiclNlbGVjdCwgJ21heC13aWR0aCcsICcxMDAlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKGJyU2VsZWN0LCAnbWluLXdpZHRoJywgJ2F1dG8nKTtcclxuICB9XHJcblxyXG59XHJcbiIsIjxkaXZcclxuICBbZnhMYXlvdXRdPVwibGFiZWxJbmxpbmUgPyAncm93JyA6ICdjb2x1bW4nXCJcclxuICBbZnhMYXlvdXRBbGlnbl09XCJsYWJlbElubGluZSA/ICdjZW50ZXIgY2VudGVyJyA6ICcnXCI+XHJcbiAgPGxhYmVsXHJcbiAgICAqbmdJZj1cImxhYmVsXCJcclxuICAgIGNsYXNzPVwiaW5wdXQtbGFiZWxcIlxyXG4gICAgc3R5bGU9XCJtYXJnaW46IDA7XCJcclxuICAgIFtmb3JdPVwiaWRcIj5cclxuICAgIHt7IGxhYmVsIH19XHJcbiAgPC9sYWJlbD5cclxuICA8YnItc2VsZWN0XHJcbiAgICBzdHlsZT1cIndpZHRoOiAxMDAlO1wiXHJcbiAgICBbaWRdPVwiaWRcIlxyXG4gICAgW29wdGlvbnNdPVwib3B0aW9uc1wiXHJcbiAgICBbdmFsdWVdPVwidmFsdWVcIlxyXG4gICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcclxuICAgIChjaGFuZ2UpPVwib25DaGFuZ2UuZW1pdCgkZXZlbnQpXCI+XHJcbiAgICA8YnItaXRlbSAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIG9wdGlvbnNcIiBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCI+XHJcbiAgICAgIHt7IG9wdGlvbi5sYWJlbCB9fVxyXG4gICAgPC9ici1pdGVtPlxyXG4gIDwvYnItc2VsZWN0PlxyXG48L2Rpdj5cclxuIl19