ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
57 lines • 8.65 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class OSwitchComponent {
constructor() {
this.isDark = false;
this.isDisabled = false;
this.isSmall = false;
this.isFixed = false;
this.customClasses = '';
this.customClassesLabel = '';
this._switchValue = false;
this.switchValueChange = new EventEmitter();
}
set switchValue(value) {
this._switchValue = this.isFixed ? true : value;
}
get switchValue() {
return this._switchValue;
}
onSwitchChange() {
if (this.isFixed) {
return;
}
this.switchValue = !this.switchValue;
this.switchValueChange.emit(this.switchValue);
}
}
OSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
OSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OSwitchComponent, selector: "o-switch", inputs: { id: "id", labelOn: "labelOn", labelOff: "labelOff", isDark: "isDark", isDisabled: "isDisabled", isSmall: "isSmall", isFixed: "isFixed", customClasses: "customClasses", customClassesLabel: "customClassesLabel", switchValue: "switchValue" }, outputs: { switchValueChange: "switchValueChange" }, ngImport: i0, template: "<label\r\n class=\"switch\"\r\n [class.switch-dark]=\"isDark\"\r\n [class.switch-sm]=\"isSmall\"\r\n [style.pointerEvents]=\"isFixed ? 'none' : null\"\r\n [ngClass]=\"customClasses\"\r\n [attr.for]=\"id\"\r\n>\r\n <input type=\"checkbox\" [attr.id]=\"id\" [disabled]=\"isDisabled\" [checked]=\"switchValue\" (change)=\"onSwitchChange()\" />\r\n <span class=\"slider\"></span>\r\n <span\r\n class=\"switch-label\"\r\n [class.on]=\"switchValue\"\r\n [class.off]=\"!switchValue\"\r\n [attr.disabled]=\"isDisabled ? true : null\"\r\n [ngClass]=\"customClassesLabel\"\r\n [attr.aria-label]=\"!labelOn && !labelOff ? (switchValue ? 'Prendido' : 'Apagado') : null\"\r\n >\r\n {{ switchValue ? labelOn : labelOff }}\r\n </span>\r\n</label>\r\n", styles: ["label.switch-label[disabled=true]{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OSwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'o-switch', template: "<label\r\n class=\"switch\"\r\n [class.switch-dark]=\"isDark\"\r\n [class.switch-sm]=\"isSmall\"\r\n [style.pointerEvents]=\"isFixed ? 'none' : null\"\r\n [ngClass]=\"customClasses\"\r\n [attr.for]=\"id\"\r\n>\r\n <input type=\"checkbox\" [attr.id]=\"id\" [disabled]=\"isDisabled\" [checked]=\"switchValue\" (change)=\"onSwitchChange()\" />\r\n <span class=\"slider\"></span>\r\n <span\r\n class=\"switch-label\"\r\n [class.on]=\"switchValue\"\r\n [class.off]=\"!switchValue\"\r\n [attr.disabled]=\"isDisabled ? true : null\"\r\n [ngClass]=\"customClassesLabel\"\r\n [attr.aria-label]=\"!labelOn && !labelOff ? (switchValue ? 'Prendido' : 'Apagado') : null\"\r\n >\r\n {{ switchValue ? labelOn : labelOff }}\r\n </span>\r\n</label>\r\n", styles: ["label.switch-label[disabled=true]{cursor:not-allowed}\n"] }]
}], propDecorators: { id: [{
type: Input
}], labelOn: [{
type: Input
}], labelOff: [{
type: Input
}], isDark: [{
type: Input
}], isDisabled: [{
type: Input
}], isSmall: [{
type: Input
}], isFixed: [{
type: Input
}], customClasses: [{
type: Input
}], customClassesLabel: [{
type: Input
}], switchValue: [{
type: Input
}], switchValueChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1zd2l0Y2guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW9iZWxpc2NvL3N3aXRjaC9vLXN3aXRjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vc3dpdGNoL28tc3dpdGNoLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU92RSxNQUFNLE9BQU8sZ0JBQWdCO0lBTDdCO1FBU2tCLFdBQU0sR0FBYSxLQUFLLENBQUM7UUFDekIsZUFBVSxHQUFhLEtBQUssQ0FBQztRQUM3QixZQUFPLEdBQWEsS0FBSyxDQUFDO1FBQzFCLFlBQU8sR0FBYSxLQUFLLENBQUM7UUFDMUIsa0JBQWEsR0FBVyxFQUFFLENBQUM7UUFDM0IsdUJBQWtCLEdBQVcsRUFBRSxDQUFDO1FBRXhDLGlCQUFZLEdBQVksS0FBSyxDQUFDO1FBV3JCLHNCQUFpQixHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO0tBVXpGO0lBbkJDLElBQ1csV0FBVyxDQUFDLEtBQWM7UUFDbkMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUNsRCxDQUFDO0lBRUQsSUFBVyxXQUFXO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBSU0sY0FBYztRQUNuQixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsT0FBTztTQUNSO1FBRUQsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7UUFDckMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDaEQsQ0FBQzs7NkdBL0JVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLCtWQ1A3Qixpd0JBcUJBOzJGRGRhLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDRSxVQUFVOzhCQUtKLEVBQUU7c0JBQWpCLEtBQUs7Z0JBQ1UsT0FBTztzQkFBdEIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLO2dCQUNVLE1BQU07c0JBQXJCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxPQUFPO3NCQUF0QixLQUFLO2dCQUNVLE9BQU87c0JBQXRCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDVSxrQkFBa0I7c0JBQWpDLEtBQUs7Z0JBS0ssV0FBVztzQkFEckIsS0FBSztnQkFTVyxpQkFBaUI7c0JBQWpDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdvLXN3aXRjaCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL28tc3dpdGNoLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9vLXN3aXRjaC5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBPU3dpdGNoQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBwdWJsaWMgaWQ/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcHVibGljIGxhYmVsT24/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcHVibGljIGxhYmVsT2ZmPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBpc0Rhcms/OiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcHVibGljIGlzRGlzYWJsZWQ/OiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcHVibGljIGlzU21hbGw/OiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcHVibGljIGlzRml4ZWQ/OiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcHVibGljIGN1c3RvbUNsYXNzZXM6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBjdXN0b21DbGFzc2VzTGFiZWw6IHN0cmluZyA9ICcnO1xyXG5cclxuICBwcml2YXRlIF9zd2l0Y2hWYWx1ZTogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBzZXQgc3dpdGNoVmFsdWUodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuX3N3aXRjaFZhbHVlID0gdGhpcy5pc0ZpeGVkID8gdHJ1ZSA6IHZhbHVlO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGdldCBzd2l0Y2hWYWx1ZSgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLl9zd2l0Y2hWYWx1ZTtcclxuICB9XHJcblxyXG4gIEBPdXRwdXQoKSBwdWJsaWMgc3dpdGNoVmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgcHVibGljIG9uU3dpdGNoQ2hhbmdlKCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMuaXNGaXhlZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5zd2l0Y2hWYWx1ZSA9ICF0aGlzLnN3aXRjaFZhbHVlO1xyXG4gICAgdGhpcy5zd2l0Y2hWYWx1ZUNoYW5nZS5lbWl0KHRoaXMuc3dpdGNoVmFsdWUpO1xyXG4gIH1cclxufVxyXG4iLCI8bGFiZWxcclxuICBjbGFzcz1cInN3aXRjaFwiXHJcbiAgW2NsYXNzLnN3aXRjaC1kYXJrXT1cImlzRGFya1wiXHJcbiAgW2NsYXNzLnN3aXRjaC1zbV09XCJpc1NtYWxsXCJcclxuICBbc3R5bGUucG9pbnRlckV2ZW50c109XCJpc0ZpeGVkID8gJ25vbmUnIDogbnVsbFwiXHJcbiAgW25nQ2xhc3NdPVwiY3VzdG9tQ2xhc3Nlc1wiXHJcbiAgW2F0dHIuZm9yXT1cImlkXCJcclxuPlxyXG4gIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBbYXR0ci5pZF09XCJpZFwiIFtkaXNhYmxlZF09XCJpc0Rpc2FibGVkXCIgW2NoZWNrZWRdPVwic3dpdGNoVmFsdWVcIiAoY2hhbmdlKT1cIm9uU3dpdGNoQ2hhbmdlKClcIiAvPlxyXG4gIDxzcGFuIGNsYXNzPVwic2xpZGVyXCI+PC9zcGFuPlxyXG4gIDxzcGFuXHJcbiAgICBjbGFzcz1cInN3aXRjaC1sYWJlbFwiXHJcbiAgICBbY2xhc3Mub25dPVwic3dpdGNoVmFsdWVcIlxyXG4gICAgW2NsYXNzLm9mZl09XCIhc3dpdGNoVmFsdWVcIlxyXG4gICAgW2F0dHIuZGlzYWJsZWRdPVwiaXNEaXNhYmxlZCA/IHRydWUgOiBudWxsXCJcclxuICAgIFtuZ0NsYXNzXT1cImN1c3RvbUNsYXNzZXNMYWJlbFwiXHJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIiFsYWJlbE9uICYmICFsYWJlbE9mZiA/IChzd2l0Y2hWYWx1ZSA/ICdQcmVuZGlkbycgOiAnQXBhZ2FkbycpIDogbnVsbFwiXHJcbiAgPlxyXG4gICAge3sgc3dpdGNoVmFsdWUgPyBsYWJlbE9uIDogbGFiZWxPZmYgfX1cclxuICA8L3NwYW4+XHJcbjwvbGFiZWw+XHJcbiJdfQ==