@obliczeniowo/elementary
Version:
Library made in Angular version 20
119 lines (114 loc) • 8.96 kB
JavaScript
import * as i0 from '@angular/core';
import { model, HostListener, HostBinding, Input, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
import * as i1 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
class CheckboxComponent {
value = model(false);
disabled = false;
get error() {
return this.abstractControl?.touched && this.abstractControl?.errors || null;
}
abstractControl;
clicked(event) {
if (this.disabled) {
return;
}
this.value.set(!this.value());
this.onChange(this.value());
}
onChange = (value) => { };
onTouched = () => { };
getError() {
return this.abstractControl?.errors || null;
}
validate(control) {
this.abstractControl = control;
return null;
}
registerOnValidatorChange(fn) {
this.onChange = fn;
}
writeValue(value) {
this.value.set(value);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
setDisabledState(disabled) {
this.disabled = disabled;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: CheckboxComponent, isStandalone: false, selector: "obl-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "clicked($event)" }, properties: { "class.disabled": "this.disabled", "class.error": "this.error" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: CheckboxComponent
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: CheckboxComponent
}
], ngImport: i0, template: "<obl-icon\n [name]=\"value() === 'mixed' && 'checklist-mixed' || (value() ? 'checked' : 'unchecked')\"\n></obl-icon>\n\n<ng-content></ng-content>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{--obl-icon-width: 15px;gap:5px;display:flex;align-items:center;cursor:pointer;white-space:nowrap}:host.disabled{color:var(--disabled-color);--obl-default-icon-color: var(--disabled-color)}:host.error{color:var(--obl-default-error-color);--obl-default-icon-color: var(--obl-default-error-color)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-checkbox', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: CheckboxComponent
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: CheckboxComponent
}
], standalone: false, template: "<obl-icon\n [name]=\"value() === 'mixed' && 'checklist-mixed' || (value() ? 'checked' : 'unchecked')\"\n></obl-icon>\n\n<ng-content></ng-content>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{--obl-icon-width: 15px;gap:5px;display:flex;align-items:center;cursor:pointer;white-space:nowrap}:host.disabled{color:var(--disabled-color);--obl-default-icon-color: var(--disabled-color)}:host.error{color:var(--obl-default-error-color);--obl-default-icon-color: var(--obl-default-error-color)}\n"] }]
}], propDecorators: { disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], error: [{
type: HostBinding,
args: ['class.error']
}], clicked: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class CheckboxModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule,
FormsModule,
IconsModule], exports: [CheckboxComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CheckboxModule, imports: [CommonModule,
FormsModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CheckboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [
CheckboxComponent
],
imports: [
CommonModule,
FormsModule,
IconsModule
],
exports: [
CheckboxComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CheckboxComponent, CheckboxModule };
//# sourceMappingURL=obliczeniowo-elementary-checkbox.mjs.map