sb-element
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.1. It is a component library constructed around the SCSS library [Sb-Theming](https://github.com/SeverinBuchser/SbTheming) and supports [Angular Schematics]
68 lines • 10.4 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Color, mixinClassName, mixinColor, mixinDisable, mixinFocus } from '../../core';
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "../../icon/icon/icon.component";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
const SbCheckboxCore = mixinFocus(mixinDisable(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-checkbox'), Color.PRIMARY)));
export class SbCheckboxComponent extends SbCheckboxCore {
constructor(elementRef, themeService) {
super(elementRef, themeService);
this.name = '';
this.label = '';
this.checked = false;
this.onChange = () => { };
this.onTouch = () => { };
}
set value(value) {
if (value !== this.checked && !this.disabled) {
this.checked = value;
this.onChange(value);
}
}
get value() {
return this.checked;
}
writeValue(value) {
if (value !== this.checked && !this.disabled) {
this.checked = value;
}
}
registerOnChange(fn) { this.onChange = fn; }
registerOnTouched(fn) { this.onTouch = fn; }
onBlur() { this.onTouch(); }
}
SbCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbCheckboxComponent, selector: "sb-checkbox", inputs: { color: "color", disabled: "disabled", name: "name", label: "label" }, outputs: { focus: "focus", blur: "blur" }, host: { properties: { "class.disabled": "disabled" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbCheckboxComponent,
multi: true
}], usesInheritance: true, ngImport: i0, template: "<label>\n <div [ngClass]=\"className + '__checkbox'\">\n <input\n type=\"checkbox\"\n [name]=\"name\"\n [value]=\"label\"\n [(ngModel)]=\"value\"\n (focus)=\"setFocusedState(true)\"\n (blur)=\"setFocusedState(false)\"\n [disabled]=\"disabled\"/>\n <sb-icon [ngClass]=\"className + '__checkmark'\"></sb-icon>\n </div>\n <span>{{ label }}</span>\n</label>\n", components: [{ type: i2.SbIconComponent, selector: "sb-icon", inputs: ["size", "color", "icon", "isOutline"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-checkbox', encapsulation: ViewEncapsulation.None, host: {
'[class.disabled]': 'disabled'
}, inputs: [
'color',
'disabled'
], outputs: [
'focus',
'blur'
], providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbCheckboxComponent,
multi: true
}], template: "<label>\n <div [ngClass]=\"className + '__checkbox'\">\n <input\n type=\"checkbox\"\n [name]=\"name\"\n [value]=\"label\"\n [(ngModel)]=\"value\"\n (focus)=\"setFocusedState(true)\"\n (blur)=\"setFocusedState(false)\"\n [disabled]=\"disabled\"/>\n <sb-icon [ngClass]=\"className + '__checkmark'\"></sb-icon>\n </div>\n <span>{{ label }}</span>\n</label>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }]; }, propDecorators: { name: [{
type: Input
}], label: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc2ItZWxlbWVudC9zcmMvbGliL2Zvcm1zL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9mb3Jtcy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLEtBQUssRUFBRSxjQUFjLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQWtCLE1BQU0sWUFBWSxDQUFDOzs7Ozs7QUFFekcsTUFBTSxjQUFjLEdBQUcsVUFBVSxDQUMvQixZQUFZLENBQ1YsVUFBVSxDQUNSLGNBQWMsQ0FDWjtJQUNFLFlBQ1MsV0FBdUIsRUFDdkIsYUFBNkI7UUFEN0IsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsa0JBQWEsR0FBYixhQUFhLENBQWdCO0lBQUcsQ0FBQztDQUMzQyxFQUFFLGFBQWEsQ0FDakIsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUNqQixDQUNGLENBQ0YsQ0FBQztBQXVCRixNQUFNLE9BQU8sbUJBQW9CLFNBQVEsY0FBYztJQXVCckQsWUFDRSxVQUFzQixFQUN0QixZQUE0QjtRQUU1QixLQUFLLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBeEIzQixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBR2xCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFFbEIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQVl6QixhQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3pCLFlBQU8sR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFPaEMsQ0FBQztJQWxCRCxJQUFJLEtBQUssQ0FBQyxLQUFjO1FBQ3RCLElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQzVDLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1lBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDdEI7SUFDSCxDQUFDO0lBQ0QsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFZTSxVQUFVLENBQUMsS0FBYztRQUM5QixJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUM1QyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztTQUN0QjtJQUNILENBQUM7SUFFTSxnQkFBZ0IsQ0FBQyxFQUFPLElBQVUsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUEsQ0FBQyxDQUFDO0lBQ3RELGlCQUFpQixDQUFDLEVBQU8sSUFBVSxJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQSxDQUFDLENBQUM7SUFDdEQsTUFBTSxLQUFXLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQSxDQUFDLENBQUM7O2dIQXRDN0IsbUJBQW1CO29HQUFuQixtQkFBbUIseU5BTm5CLENBQUM7WUFDVixPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxtQkFBbUI7WUFDaEMsS0FBSyxFQUFFLElBQUk7U0FDWixDQUFDLGlEQ3JDSix5WkFjQTsyRkR5QmEsbUJBQW1CO2tCQXJCL0IsU0FBUzsrQkFDRSxhQUFhLGlCQUVSLGlCQUFpQixDQUFDLElBQUksUUFDL0I7d0JBQ0osa0JBQWtCLEVBQUUsVUFBVTtxQkFDL0IsVUFDTzt3QkFDTixPQUFPO3dCQUNQLFVBQVU7cUJBQ1gsV0FDUTt3QkFDUCxPQUFPO3dCQUNQLE1BQU07cUJBQ1AsYUFDVSxDQUFDOzRCQUNWLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcscUJBQXFCOzRCQUNoQyxLQUFLLEVBQUUsSUFBSTt5QkFDWixDQUFDOzhIQUtLLElBQUk7c0JBRFYsS0FBSztnQkFJQyxLQUFLO3NCQURYLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ29sb3IsIG1peGluQ2xhc3NOYW1lLCBtaXhpbkNvbG9yLCBtaXhpbkRpc2FibGUsIG1peGluRm9jdXMsIFNiVGhlbWVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vY29yZSc7XG5cbmNvbnN0IFNiQ2hlY2tib3hDb3JlID0gbWl4aW5Gb2N1cyhcbiAgbWl4aW5EaXNhYmxlKFxuICAgIG1peGluQ29sb3IoXG4gICAgICBtaXhpbkNsYXNzTmFtZShcbiAgICAgICAgY2xhc3Mge1xuICAgICAgICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICAgICAgcHVibGljIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgICAgICAgICAgcHVibGljIF90aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlKSB7fVxuICAgICAgICB9LCAnc2ItY2hlY2tib3gnXG4gICAgICApLCBDb2xvci5QUklNQVJZXG4gICAgKVxuICApXG4pO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLmRpc2FibGVkXSc6ICdkaXNhYmxlZCdcbiAgfSxcbiAgaW5wdXRzOiBbXG4gICAgJ2NvbG9yJyxcbiAgICAnZGlzYWJsZWQnXG4gIF0sXG4gIG91dHB1dHM6IFtcbiAgICAnZm9jdXMnLFxuICAgICdibHVyJ1xuICBdLFxuICBwcm92aWRlcnM6IFt7XG4gICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgdXNlRXhpc3Rpbmc6IFNiQ2hlY2tib3hDb21wb25lbnQsXG4gICAgbXVsdGk6IHRydWVcbiAgfV1cbn0pXG5leHBvcnQgY2xhc3MgU2JDaGVja2JveENvbXBvbmVudCBleHRlbmRzIFNiQ2hlY2tib3hDb3JlIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBuYW1lOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICBwdWJsaWMgbGFiZWw6IHN0cmluZyA9ICcnO1xuXG4gIHByaXZhdGUgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIHNldCB2YWx1ZSh2YWx1ZTogYm9vbGVhbikge1xuICAgIGlmICh2YWx1ZSAhPT0gdGhpcy5jaGVja2VkICYmICF0aGlzLmRpc2FibGVkKSB7XG4gICAgICB0aGlzLmNoZWNrZWQgPSB2YWx1ZTtcbiAgICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgIH1cbiAgfVxuICBnZXQgdmFsdWUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY2hlY2tlZDtcbiAgfVxuXG4gIHByaXZhdGUgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xuICBwcml2YXRlIG9uVG91Y2g6IGFueSA9ICgpID0+IHt9O1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgdGhlbWVTZXJ2aWNlOiBTYlRoZW1lU2VydmljZVxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCB0aGVtZVNlcnZpY2UpO1xuICB9XG5cbiAgcHVibGljIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICBpZiAodmFsdWUgIT09IHRoaXMuY2hlY2tlZCAmJiAhdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy5jaGVja2VkID0gdmFsdWU7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQgeyB0aGlzLm9uQ2hhbmdlID0gZm4gfVxuICBwdWJsaWMgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQgeyB0aGlzLm9uVG91Y2ggPSBmbiB9XG4gIHB1YmxpYyBvbkJsdXIoKTogdm9pZCB7IHRoaXMub25Ub3VjaCgpIH1cblxufVxuIiwiPGxhYmVsPlxuICA8ZGl2IFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2NoZWNrYm94J1wiPlxuICAgIDxpbnB1dFxuICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgIFtuYW1lXT1cIm5hbWVcIlxuICAgICAgW3ZhbHVlXT1cImxhYmVsXCJcbiAgICAgIFsobmdNb2RlbCldPVwidmFsdWVcIlxuICAgICAgKGZvY3VzKT1cInNldEZvY3VzZWRTdGF0ZSh0cnVlKVwiXG4gICAgICAoYmx1cik9XCJzZXRGb2N1c2VkU3RhdGUoZmFsc2UpXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiLz5cbiAgICA8c2ItaWNvbiBbbmdDbGFzc109XCJjbGFzc05hbWUgKyAnX19jaGVja21hcmsnXCI+JiN4ZTVjYTs8L3NiLWljb24+XG4gIDwvZGl2PlxuICA8c3Bhbj57eyBsYWJlbCB9fTwvc3Bhbj5cbjwvbGFiZWw+XG4iXX0=