@ipi-soft/ng-components
Version:
Custom Angular Components
41 lines (37 loc) • 9.05 kB
JavaScript
import { NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TooltipPosition, IpiTooltipDirective } from '@ipi-soft/ng-components/tooltip';
class IpiRadioButtonComponent {
constructor() {
this.selectChange = new EventEmitter();
// random ID for name of the radiobutton so no collision happen with other radio components
this.buttonGroupId = Math.random();
this.tooltipPositionAbove = TooltipPosition.Above;
}
onChange(item) {
this.selectChange.emit(item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IpiRadioButtonComponent, isStandalone: true, selector: "ipi-radio-button", inputs: { options: "options" }, outputs: { selectChange: "selectChange" }, ngImport: i0, template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item) {\n <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n \n <span>{{ item.label }}</span>\n </label>\n }\n </div>\n } @else {\n <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item; let i = $index) {\n <label class=\"radio-button\">\n <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <svg class=\"tooltip-icon\" [ipiTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </label>\n }\n </div>\n }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--ipi-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--ipi-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--ipi-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--ipi-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--ipi-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--ipi-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-radio-button-tooltip-icon-fill, transparent);stroke:var(--ipi-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiRadioButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-radio-button', imports: [
NgClass,
FormsModule,
ReactiveFormsModule,
IpiTooltipDirective,
], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item) {\n <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n \n <span>{{ item.label }}</span>\n </label>\n }\n </div>\n } @else {\n <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item; let i = $index) {\n <label class=\"radio-button\">\n <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <svg class=\"tooltip-icon\" [ipiTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </label>\n }\n </div>\n }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--ipi-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--ipi-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--ipi-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--ipi-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--ipi-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--ipi-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-radio-button-tooltip-icon-fill, transparent);stroke:var(--ipi-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"] }]
}], propDecorators: { options: [{
type: Input
}], selectChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { IpiRadioButtonComponent };
//# sourceMappingURL=ipi-soft-ng-components-radiobutton.mjs.map