cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
47 lines • 8.27 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/extended";
export class SwitchComponent {
label = '';
labelEnable = '';
labelDisable = '';
withIcon = false;
density = 'medium';
value = false;
labelPosition;
change = new EventEmitter();
id = Math.floor(Math.random() * 1000000);
constructor() {
console.log(`Switch initialized with value: ${this.value}`);
}
toggleSwitch(event) {
;
this.value = event.target.checked;
this.change.emit(this.value);
console.log(`Switch toggled: ${this.value}`);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SwitchComponent, selector: "cfc-switch", inputs: { label: "label", labelEnable: "labelEnable", labelDisable: "labelDisable", withIcon: "withIcon", density: "density", value: "value", labelPosition: "labelPosition" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"br-switch\" [ngClass]=\"{\r\n 'small': density === 'small',\r\n 'medium': density === 'medium',\r\n 'large': density === 'large',\r\n 'icon': withIcon === true,\r\n 'top': labelPosition === 'top',\r\n 'right': labelPosition === 'right',\r\n}\" role=\"presentation\">\r\n <input\r\n [attr.id]=\"id\"\r\n type=\"checkbox\"\r\n name=\"switch-default\"\r\n [checked]=\"value == true\"\r\n role=\"switch\"\r\n (change)=\"toggleSwitch($event)\"\r\n />\r\n <label *ngIf=\"label\" [attr.for]=\"id\">{{ label }}</label>\r\n <div\r\n *ngIf=\"labelEnable && labelDisable\"\r\n class=\"switch-data\"\r\n [attr.data-enabled]=\"labelEnable\"\r\n [attr.data-disabled]=\"labelDisable\"\r\n ></div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-switch', template: "<div class=\"br-switch\" [ngClass]=\"{\r\n 'small': density === 'small',\r\n 'medium': density === 'medium',\r\n 'large': density === 'large',\r\n 'icon': withIcon === true,\r\n 'top': labelPosition === 'top',\r\n 'right': labelPosition === 'right',\r\n}\" role=\"presentation\">\r\n <input\r\n [attr.id]=\"id\"\r\n type=\"checkbox\"\r\n name=\"switch-default\"\r\n [checked]=\"value == true\"\r\n role=\"switch\"\r\n (change)=\"toggleSwitch($event)\"\r\n />\r\n <label *ngIf=\"label\" [attr.for]=\"id\">{{ label }}</label>\r\n <div\r\n *ngIf=\"labelEnable && labelDisable\"\r\n class=\"switch-data\"\r\n [attr.data-enabled]=\"labelEnable\"\r\n [attr.data-disabled]=\"labelDisable\"\r\n ></div>\r\n</div>\r\n" }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], labelEnable: [{
type: Input
}], labelDisable: [{
type: Input
}], withIcon: [{
type: Input
}], density: [{
type: Input
}], value: [{
type: Input
}], labelPosition: [{
type: Input
}], change: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvc3dpdGNoL3N3aXRjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3N3aXRjaC9zd2l0Y2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU92RSxNQUFNLE9BQU8sZUFBZTtJQUNqQixLQUFLLEdBQVksRUFBRSxDQUFDO0lBQ3BCLFdBQVcsR0FBWSxFQUFFLENBQUM7SUFDMUIsWUFBWSxHQUFZLEVBQUUsQ0FBQztJQUMzQixRQUFRLEdBQWEsS0FBSyxDQUFDO0lBQzNCLE9BQU8sR0FBaUMsUUFBUSxDQUFDO0lBQ2pELEtBQUssR0FBWSxLQUFLLENBQUM7SUFDdkIsYUFBYSxDQUFtQjtJQUUvQixNQUFNLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7SUFFdEUsRUFBRSxHQUFXLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLE9BQU8sQ0FBQyxDQUFDO0lBRWpEO1FBQ0UsT0FBTyxDQUFDLEdBQUcsQ0FBQyxrQ0FBa0MsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDOUQsQ0FBQztJQUNELFlBQVksQ0FBQyxLQUFZO1FBQVMsQ0FBQztRQUNqQyxJQUFJLENBQUMsS0FBSyxHQUFJLEtBQUssQ0FBQyxNQUEyQixDQUFDLE9BQU8sQ0FBQztRQUN4RCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0IsT0FBTyxDQUFDLEdBQUcsQ0FBQyxtQkFBbUIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDL0MsQ0FBQzt3R0FwQlUsZUFBZTs0RkFBZixlQUFlLGlRQ1A1QiwrdUJBd0JBOzs0RkRqQmEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZO3dEQUtiLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLXN3aXRjaCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3N3aXRjaC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3N3aXRjaC5jb21wb25lbnQuc2NzcycsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTd2l0Y2hDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGxhYmVsPzogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgbGFiZWxFbmFibGU/OiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBsYWJlbERpc2FibGU/OiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSB3aXRoSWNvbj86IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBkZW5zaXR5OiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSc7XHJcbiAgQElucHV0KCkgdmFsdWU6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBsYWJlbFBvc2l0aW9uPzogJ3RvcCcgfCAncmlnaHQnO1xyXG5cclxuICBAT3V0cHV0KCkgY2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIGlkOiBudW1iZXIgPSBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxMDAwMDAwKTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICBjb25zb2xlLmxvZyhgU3dpdGNoIGluaXRpYWxpemVkIHdpdGggdmFsdWU6ICR7dGhpcy52YWx1ZX1gKTtcclxuICB9XHJcbiAgdG9nZ2xlU3dpdGNoKGV2ZW50OiBFdmVudCk6IHZvaWQgeztcclxuICAgIHRoaXMudmFsdWUgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLmNoZWNrZWQ7XHJcbiAgICB0aGlzLmNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xyXG4gICAgY29uc29sZS5sb2coYFN3aXRjaCB0b2dnbGVkOiAke3RoaXMudmFsdWV9YCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJici1zd2l0Y2hcIiBbbmdDbGFzc109XCJ7XHJcbiAgJ3NtYWxsJzogZGVuc2l0eSA9PT0gJ3NtYWxsJyxcclxuICAnbWVkaXVtJzogZGVuc2l0eSA9PT0gJ21lZGl1bScsXHJcbiAgJ2xhcmdlJzogZGVuc2l0eSA9PT0gJ2xhcmdlJyxcclxuICAnaWNvbic6IHdpdGhJY29uID09PSB0cnVlLFxyXG4gICd0b3AnOiBsYWJlbFBvc2l0aW9uID09PSAndG9wJyxcclxuICAncmlnaHQnOiBsYWJlbFBvc2l0aW9uID09PSAncmlnaHQnLFxyXG59XCIgcm9sZT1cInByZXNlbnRhdGlvblwiPlxyXG4gIDxpbnB1dFxyXG4gICAgW2F0dHIuaWRdPVwiaWRcIlxyXG4gICAgdHlwZT1cImNoZWNrYm94XCJcclxuICAgIG5hbWU9XCJzd2l0Y2gtZGVmYXVsdFwiXHJcbiAgICBbY2hlY2tlZF09XCJ2YWx1ZSA9PSB0cnVlXCJcclxuICAgIHJvbGU9XCJzd2l0Y2hcIlxyXG4gICAgKGNoYW5nZSk9XCJ0b2dnbGVTd2l0Y2goJGV2ZW50KVwiXHJcbiAgLz5cclxuICA8bGFiZWwgKm5nSWY9XCJsYWJlbFwiIFthdHRyLmZvcl09XCJpZFwiPnt7IGxhYmVsIH19PC9sYWJlbD5cclxuICA8ZGl2XHJcbiAgICAqbmdJZj1cImxhYmVsRW5hYmxlICYmIGxhYmVsRGlzYWJsZVwiXHJcbiAgICBjbGFzcz1cInN3aXRjaC1kYXRhXCJcclxuICAgIFthdHRyLmRhdGEtZW5hYmxlZF09XCJsYWJlbEVuYWJsZVwiXHJcbiAgICBbYXR0ci5kYXRhLWRpc2FibGVkXT1cImxhYmVsRGlzYWJsZVwiXHJcbiAgPjwvZGl2PlxyXG48L2Rpdj5cclxuIl19