@obliczeniowo/elementary
Version:
Library made in Angular version 19
193 lines (187 loc) • 13.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, HostBinding, Output, HostListener, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
class RadioComponent {
error = false;
value;
option;
invalid = false;
disabled = false;
changed = new EventEmitter();
clicked(event) {
if (this.disabled) {
return;
}
this.value = this.option.id;
this.onChange(this.value);
this.changed.emit(this.value);
}
onChange = (value) => { };
onTouched = () => { };
ngOnInit() {
}
registerOnValidatorChange(fn) { this.onChange = fn; }
writeValue(value) {
this.value = value;
this.onChange(this.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: "19.0.4", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: RadioComponent, isStandalone: false, selector: "obl-radio", inputs: { error: "error", value: "value", option: "option", invalid: "invalid", disabled: "disabled" }, outputs: { changed: "changed" }, host: { listeners: { "click": "clicked($event)" }, properties: { "class.error": "this.error", "class.disabled": "this.disabled" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: RadioComponent
},
], ngImport: i0, template: "<svg\r\n width=\"100%\"\r\n viewBox=\"0 0 6.3499999 6.3500002\"\r\n [class.checked]=\"value === option.id\"\r\n>\r\n <path\r\n style=\"stroke-width: 0.8\"\r\n d=\"M 5.5562499,3.175 A 2.3812499,2.3812499 0 0 1 3.175,5.5562499 2.3812499,2.3812499 0 0 1 0.79375005,3.175 2.3812499,2.3812499 0 0 1 3.175,0.79375005 2.3812499,2.3812499 0 0 1 5.5562499,3.175 Z\"\r\n />\r\n @if (value === option.id) {\r\n <circle cx=\"3.175\" cy=\"3.175\" r=\"1.25\" />\r\n }\r\n</svg>\r\n<ng-content></ng-content>\r\n", styles: [":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}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{display:flex;align-items:center;cursor:pointer;padding-right:5px;white-space:nowrap}:host svg{width:15px;margin:5px}:host svg path{stroke:var(--default-radio-color);fill:none}:host svg circle{fill:var(--default-radio-color)}:host.disabled{color:var(--disabled-color)}:host.disabled svg circle{fill:var(--disabled-color)}:host.disabled svg path{stroke:var(--disabled-color)}:host.error{color:var(--obl-default-error-color)}:host.error svg circle{fill:var(--obl-default-error-color)}:host.error svg path{stroke:var(--obl-default-error-color)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: RadioComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-radio', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: RadioComponent
},
], standalone: false, template: "<svg\r\n width=\"100%\"\r\n viewBox=\"0 0 6.3499999 6.3500002\"\r\n [class.checked]=\"value === option.id\"\r\n>\r\n <path\r\n style=\"stroke-width: 0.8\"\r\n d=\"M 5.5562499,3.175 A 2.3812499,2.3812499 0 0 1 3.175,5.5562499 2.3812499,2.3812499 0 0 1 0.79375005,3.175 2.3812499,2.3812499 0 0 1 3.175,0.79375005 2.3812499,2.3812499 0 0 1 5.5562499,3.175 Z\"\r\n />\r\n @if (value === option.id) {\r\n <circle cx=\"3.175\" cy=\"3.175\" r=\"1.25\" />\r\n }\r\n</svg>\r\n<ng-content></ng-content>\r\n", styles: [":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}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{display:flex;align-items:center;cursor:pointer;padding-right:5px;white-space:nowrap}:host svg{width:15px;margin:5px}:host svg path{stroke:var(--default-radio-color);fill:none}:host svg circle{fill:var(--default-radio-color)}:host.disabled{color:var(--disabled-color)}:host.disabled svg circle{fill:var(--disabled-color)}:host.disabled svg path{stroke:var(--disabled-color)}:host.error{color:var(--obl-default-error-color)}:host.error svg circle{fill:var(--obl-default-error-color)}:host.error svg path{stroke:var(--obl-default-error-color)}\n"] }]
}], propDecorators: { error: [{
type: Input
}, {
type: HostBinding,
args: ['class.error']
}], value: [{
type: Input
}], option: [{
type: Input
}], invalid: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], changed: [{
type: Output
}], clicked: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class RadioGroupComponent {
options;
value;
label;
disabled = false;
direction = 'row';
abstractControl;
changed = new EventEmitter();
get error() {
return this.abstractControl?.touched && this.abstractControl.errors || null;
}
onChange = (value) => { };
onTouched = () => { };
validate(control) {
this.abstractControl = control;
return null;
}
registerOnValidatorChange(fn) { this.onChange = fn; }
writeValue(value) {
this.value = value;
this.onChange(this.value);
this.changed.emit(this.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: "19.0.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: RadioGroupComponent, isStandalone: false, selector: "obl-radio-group", inputs: { options: "options", value: "value", label: "label", disabled: "disabled", direction: "direction" }, outputs: { changed: "changed" }, host: { properties: { "class.disabled": "this.disabled", "style.flex-direction": "this.direction", "class.error": "this.error" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: RadioGroupComponent
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: RadioGroupComponent
}
], ngImport: i0, template: "<h2>{{ label }}</h2>\r\n\r\n@for (option of options; track option.id) {\r\n <obl-radio\r\n [option]=\"option\"\r\n [value]=\"value\"\r\n [error]=\"!!error\"\r\n [disabled]=\"disabled\"\r\n (changed)=\"writeValue($event)\"\r\n >{{ option.text }}\r\n </obl-radio>\r\n}", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{display:flex;font-size:var(--obl-font-size)}:host h2{font-size:var(--obl-font-size);padding-left:25px;margin:0 0 5px}\n"], dependencies: [{ kind: "component", type: RadioComponent, selector: "obl-radio", inputs: ["error", "value", "option", "invalid", "disabled"], outputs: ["changed"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-radio-group', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: RadioGroupComponent
},
{
provide: NG_VALIDATORS,
multi: true,
useExisting: RadioGroupComponent
}
], standalone: false, template: "<h2>{{ label }}</h2>\r\n\r\n@for (option of options; track option.id) {\r\n <obl-radio\r\n [option]=\"option\"\r\n [value]=\"value\"\r\n [error]=\"!!error\"\r\n [disabled]=\"disabled\"\r\n (changed)=\"writeValue($event)\"\r\n >{{ option.text }}\r\n </obl-radio>\r\n}", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host{display:flex;font-size:var(--obl-font-size)}:host h2{font-size:var(--obl-font-size);padding-left:25px;margin:0 0 5px}\n"] }]
}], propDecorators: { options: [{
type: Input
}], value: [{
type: Input
}], label: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], direction: [{
type: Input
}, {
type: HostBinding,
args: ['style.flex-direction']
}], changed: [{
type: Output
}], error: [{
type: HostBinding,
args: ['class.error']
}] } });
class RadioModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: RadioModule, declarations: [RadioComponent,
RadioGroupComponent], imports: [CommonModule], exports: [RadioComponent,
RadioGroupComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: RadioModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: RadioModule, decorators: [{
type: NgModule,
args: [{
declarations: [
RadioComponent,
RadioGroupComponent
],
imports: [
CommonModule
],
exports: [
RadioComponent,
RadioGroupComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RadioComponent, RadioGroupComponent, RadioModule };
//# sourceMappingURL=obliczeniowo-elementary-radio.mjs.map