iptdevs-design-system
Version:
Library common elements into IPT Plattform.
47 lines • 7 kB
JavaScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class CheckboxComponent {
constructor() {
this.checkboxOption = false;
this.onChecked = new EventEmitter();
}
set control(value) {
if (this.formControl !== value) {
this.formControl = value;
}
}
}
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CheckboxComponent, selector: "ipt-checkbox", inputs: { checkboxOption: "checkboxOption", control: "control" }, outputs: { onChecked: "onChecked" }, ngImport: i0, template: `
<label class="cont">
<input
class="checkbox"
[formControl]="formControl"
[checked]="checkboxOption"
(click)="onChecked.emit($event)"
type="checkbox">
<span></span>
</label>
`, isInline: true, styles: [".cont{display:flex;align-items:center;transform:scale(1)}@media screen and (min-width: 320px){input[type=checkbox]{height:1rem;width:1.1rem;margin:5px;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;background-color:#1c77f733;border-radius:15%;cursor:pointer;overflow:hidden}input[type=checkbox]:after{content:\"\";display:block;height:.4rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white;opacity:0;transform:rotate(45deg) translate(-50%,-50%);position:absolute;top:50%;left:20%;transition:.25s ease}input[type=checkbox]:before{content:\"\";display:block;height:0;width:0;background-color:#1c77f7;border-radius:50%;opacity:.5;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;transition:.3s ease}input[type=checkbox]:checked:before{height:130%;width:130%;opacity:100%}input[type=checkbox]:checked:after{opacity:100%}span{font-size:1rem}}@media screen and (min-width: 375px){input[type=checkbox]{height:1.2rem;width:1.3rem}input[type=checkbox]:after{height:.5rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}@media screen and (min-width: 1024px){input[type=checkbox]{height:1.3rem;width:1.4rem}input[type=checkbox]:after{height:.6rem;width:.3rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-checkbox', template: `
<label class="cont">
<input
class="checkbox"
[formControl]="formControl"
[checked]="checkboxOption"
(click)="onChecked.emit($event)"
type="checkbox">
<span></span>
</label>
`, styles: [".cont{display:flex;align-items:center;transform:scale(1)}@media screen and (min-width: 320px){input[type=checkbox]{height:1rem;width:1.1rem;margin:5px;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;background-color:#1c77f733;border-radius:15%;cursor:pointer;overflow:hidden}input[type=checkbox]:after{content:\"\";display:block;height:.4rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white;opacity:0;transform:rotate(45deg) translate(-50%,-50%);position:absolute;top:50%;left:20%;transition:.25s ease}input[type=checkbox]:before{content:\"\";display:block;height:0;width:0;background-color:#1c77f7;border-radius:50%;opacity:.5;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;transition:.3s ease}input[type=checkbox]:checked:before{height:130%;width:130%;opacity:100%}input[type=checkbox]:checked:after{opacity:100%}span{font-size:1rem}}@media screen and (min-width: 375px){input[type=checkbox]{height:1.2rem;width:1.3rem}input[type=checkbox]:after{height:.5rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}@media screen and (min-width: 1024px){input[type=checkbox]{height:1.3rem;width:1.4rem}input[type=checkbox]:after{height:.6rem;width:.3rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}\n"] }]
}], propDecorators: { checkboxOption: [{
type: Input
}], control: [{
type: Input
}], onChecked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQW1CdkUsTUFBTSxPQUFPLGlCQUFpQjtJQWhCOUI7UUFrQlcsbUJBQWMsR0FBWSxLQUFLLENBQUM7UUFPL0IsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7S0FJakQ7SUFWQyxJQUFhLE9BQU8sQ0FBQyxLQUFzQjtRQUN6QyxJQUFJLElBQUksQ0FBQyxXQUFXLEtBQUssS0FBSyxFQUFFO1lBQzlCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBb0IsQ0FBQztTQUN6QztJQUNILENBQUM7OzhHQVBVLGlCQUFpQjtrR0FBakIsaUJBQWlCLDJKQWRsQjs7Ozs7Ozs7OztHQVVUOzJGQUlVLGlCQUFpQjtrQkFoQjdCLFNBQVM7K0JBQ0UsY0FBYyxZQUNkOzs7Ozs7Ozs7O0dBVVQ7OEJBTVEsY0FBYztzQkFBdEIsS0FBSztnQkFDTyxPQUFPO3NCQUFuQixLQUFLO2dCQU1JLFNBQVM7c0JBQWxCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIEZvcm1Db250cm9sIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2lwdC1jaGVja2JveCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGxhYmVsIGNsYXNzPVwiY29udFwiPlxuICAgICAgPGlucHV0XG4gICAgICAgIGNsYXNzPVwiY2hlY2tib3hcIlxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICBbY2hlY2tlZF09XCJjaGVja2JveE9wdGlvblwiXG4gICAgICAgIChjbGljayk9XCJvbkNoZWNrZWQuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCI+XG4gICAgICA8c3Bhbj48L3NwYW4+XG4gICAgPC9sYWJlbD5cbiAgYCxcbiAgc3R5bGVVcmxzOiBbJy4vY2hlY2tib3guY3NzJ11cbn0pXG5cbmV4cG9ydCBjbGFzcyBDaGVja2JveENvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgY2hlY2tib3hPcHRpb246IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2V0IGNvbnRyb2wodmFsdWU6IEFic3RyYWN0Q29udHJvbCkge1xuICAgIGlmICh0aGlzLmZvcm1Db250cm9sICE9PSB2YWx1ZSkge1xuICAgICAgdGhpcy5mb3JtQ29udHJvbCA9IHZhbHVlIGFzIEZvcm1Db250cm9sO1xuICAgIH1cbiAgfVxuXG4gIEBPdXRwdXQoKSBvbkNoZWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xuXG4gIGZvcm1Db250cm9sITogRm9ybUNvbnRyb2w7XG5cbn1cbiJdfQ==