@sebgroup/green-angular 6.7.1 → 6.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/v-angular/radio/index.mjs +2 -1
- package/esm2022/src/v-angular/radio/radio-group/radio-group.component.mjs +86 -0
- package/esm2022/src/v-angular/radio/radio.component.mjs +13 -3
- package/esm2022/src/v-angular/radio/radio.module.mjs +5 -4
- package/esm2022/v-angular/radio/index.mjs +2 -1
- package/esm2022/v-angular/radio/radio-group/radio-group.component.mjs +86 -0
- package/esm2022/v-angular/radio/radio.component.mjs +13 -3
- package/esm2022/v-angular/radio/radio.module.mjs +5 -4
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs +92 -6
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +92 -6
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +7 -7
- package/src/v-angular/radio/index.d.ts +1 -0
- package/src/v-angular/radio/radio-group/radio-group.component.d.ts +42 -0
- package/src/v-angular/radio/radio.component.d.ts +6 -0
- package/src/v-angular/radio/radio.module.d.ts +5 -4
- package/v-angular/radio/index.d.ts +1 -0
- package/v-angular/radio/radio-group/radio-group.component.d.ts +42 -0
- package/v-angular/radio/radio.component.d.ts +6 -0
- package/v-angular/radio/radio.module.d.ts +5 -4
|
@@ -6308,11 +6308,21 @@ class NggvRadioComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
6308
6308
|
* Sets class on host element based on size input for styling
|
|
6309
6309
|
*/
|
|
6310
6310
|
this.size = 'large';
|
|
6311
|
+
/**
|
|
6312
|
+
* Decides if error should be connected to each individual radio button.
|
|
6313
|
+
* If true, errors will be shown in nggv-radio-group component.
|
|
6314
|
+
* If false, errors will be show below each radio button
|
|
6315
|
+
*/
|
|
6316
|
+
this.isGroup = false;
|
|
6311
6317
|
}
|
|
6312
6318
|
ngOnInit() {
|
|
6313
6319
|
super.ngOnInit();
|
|
6314
6320
|
this._checkName();
|
|
6315
6321
|
this.registry.add(this.ngControl, this);
|
|
6322
|
+
// Check if nggv-radio-group is present connected to the same formControl
|
|
6323
|
+
if (Array.from(document.querySelectorAll(`nggv-radio-group[formcontrolname=${this.name}]`)).length) {
|
|
6324
|
+
this.isGroup = true;
|
|
6325
|
+
}
|
|
6316
6326
|
}
|
|
6317
6327
|
ngOnDestroy() {
|
|
6318
6328
|
this.registry.remove(this);
|
|
@@ -6351,11 +6361,11 @@ class NggvRadioComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
6351
6361
|
this.name = this.formControlName;
|
|
6352
6362
|
}
|
|
6353
6363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: NggvRadioControlRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6354
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NggvRadioComponent, selector: "nggv-radio", inputs: { thook: "thook", size: "size", formControlName: "formControlName" }, host: { properties: { "attr.data-thook": "this.thook", "class": "this.size" } }, providers: [NggvRadioControlRegistry], usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(#fff);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: #333;--gds-comp-checkbox-border-radius: 2px;--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: #333;--gds-comp-checkbox-border-color-selected: var(#fff);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);--gds-comp-radio-container-height: 1rem;--gds-comp-radio-container-width: 1rem;--gds-comp-radio-border-radius: 50%;--gds-comp-radio-ring-width: .1875rem;--gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);--gds-comp-radio-border: #333;--gds-comp-radio-border-checked: #333;--gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);--gds-comp-radio-ring: var(#fff);--gds-comp-radio-ring-checked: var(#fff);--gds-comp-radio-ring-hover: var(#fff);--gds-comp-radio-ring-checked-hover: var(#fff);--gds-comp-radio-ring-disabled: var(#fff);--gds-comp-radio-dot: transparent;--gds-comp-radio-dot-checked: #333;--gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600)}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}:host label.form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=radio]:focus-visible):focus,:host label.form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-sys-shape-corner-round);display:flex;height:1rem;width:1rem;box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-sys-shape-corner-round);background-color:transparent;transform:scale(.5)}:host label.form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.form-control input[type=radio]:not(.is-invalid):valid~i,:host label.form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2);--sg-border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.form-control input[type=radio]:not(.is-valid):invalid~i,:host label.form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error);--sg-border-color: var(--gds-sys-color-text-error)}:host label.form-control input[type=radio]:disabled~i,:host label.form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-base-500)}:host label.form-control input[type=radio]:disabled~span,:host label.form-control input[type=radio].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=radio]:disabled~span::placeholder,:host label.form-control input[type=radio].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=radio]:disabled:checked~i:after,:host label.form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-sys-color-base-600)}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
6355
6365
|
}
|
|
6356
6366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioComponent, decorators: [{
|
|
6357
6367
|
type: Component,
|
|
6358
|
-
args: [{ selector: 'nggv-radio', providers: [NggvRadioControlRegistry], template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container *transloco=\"let t; read: scope\">\n
|
|
6368
|
+
args: [{ selector: 'nggv-radio', providers: [NggvRadioControlRegistry], template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(#fff);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: #333;--gds-comp-checkbox-border-radius: 2px;--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: #333;--gds-comp-checkbox-border-color-selected: var(#fff);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);--gds-comp-radio-container-height: 1rem;--gds-comp-radio-container-width: 1rem;--gds-comp-radio-border-radius: 50%;--gds-comp-radio-ring-width: .1875rem;--gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);--gds-comp-radio-border: #333;--gds-comp-radio-border-checked: #333;--gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);--gds-comp-radio-ring: var(#fff);--gds-comp-radio-ring-checked: var(#fff);--gds-comp-radio-ring-hover: var(#fff);--gds-comp-radio-ring-checked-hover: var(#fff);--gds-comp-radio-ring-disabled: var(#fff);--gds-comp-radio-dot: transparent;--gds-comp-radio-dot-checked: #333;--gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600)}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}:host label.form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=radio]:focus-visible):focus,:host label.form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-sys-shape-corner-round);display:flex;height:1rem;width:1rem;box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-sys-shape-corner-round);background-color:transparent;transform:scale(.5)}:host label.form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.form-control input[type=radio]:not(.is-invalid):valid~i,:host label.form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2);--sg-border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.form-control input[type=radio]:not(.is-valid):invalid~i,:host label.form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error);--sg-border-color: var(--gds-sys-color-text-error)}:host label.form-control input[type=radio]:disabled~i,:host label.form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-base-500)}:host label.form-control input[type=radio]:disabled~span,:host label.form-control input[type=radio].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=radio]:disabled~span::placeholder,:host label.form-control input[type=radio].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=radio]:disabled:checked~i:after,:host label.form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-sys-color-base-600)}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
|
|
6359
6369
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
6360
6370
|
type: Self
|
|
6361
6371
|
}, {
|
|
@@ -6379,17 +6389,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6379
6389
|
type: Input
|
|
6380
6390
|
}] } });
|
|
6381
6391
|
|
|
6392
|
+
/**
|
|
6393
|
+
* Creates a wrapper around a group of radio buttons.
|
|
6394
|
+
* If there is an error to the form control connected to the radio buttons, it will be shown once below instead of below every individual radio button
|
|
6395
|
+
*/
|
|
6396
|
+
class NggvRadioGroupComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
6397
|
+
/**
|
|
6398
|
+
* Creates a new RadioComponent
|
|
6399
|
+
* @param ngControl optional FormControl provided when component is used in a form, through dependency injection.
|
|
6400
|
+
* @param cdr change detection reference for rendering purposes.
|
|
6401
|
+
*/
|
|
6402
|
+
constructor(ngControl, translocoScope, cdr) {
|
|
6403
|
+
super(ngControl, translocoScope, cdr);
|
|
6404
|
+
this.ngControl = ngControl;
|
|
6405
|
+
this.translocoScope = translocoScope;
|
|
6406
|
+
this.cdr = cdr;
|
|
6407
|
+
/**
|
|
6408
|
+
* Special property used for selecting DOM elements during automated UI testing.
|
|
6409
|
+
*/
|
|
6410
|
+
this.thook = 'radio-group';
|
|
6411
|
+
/**
|
|
6412
|
+
* Sets class on host element based on size input for styling
|
|
6413
|
+
*/
|
|
6414
|
+
this.size = 'large';
|
|
6415
|
+
/**
|
|
6416
|
+
* Sets "flex-direction" of parent of radio buttons.
|
|
6417
|
+
*/
|
|
6418
|
+
this.direction = 'column';
|
|
6419
|
+
}
|
|
6420
|
+
ngOnInit() {
|
|
6421
|
+
super.ngOnInit();
|
|
6422
|
+
this._checkName();
|
|
6423
|
+
}
|
|
6424
|
+
/** Checks that the name properties match and updates name property if only formControlName is given. */
|
|
6425
|
+
_checkName() {
|
|
6426
|
+
if (this.name &&
|
|
6427
|
+
this.formControlName &&
|
|
6428
|
+
this.name !== this.formControlName) {
|
|
6429
|
+
throw new Error(`
|
|
6430
|
+
If you define both a name and a formControlName attribute on your radio button, their values
|
|
6431
|
+
must match. Ex: <input type="radio" formControlName="food" name="food">
|
|
6432
|
+
`);
|
|
6433
|
+
}
|
|
6434
|
+
if (!this.name && this.formControlName)
|
|
6435
|
+
this.name = this.formControlName;
|
|
6436
|
+
}
|
|
6437
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioGroupComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvRadioGroupComponent, selector: "nggv-radio-group", inputs: { thook: "thook", size: "size", formControlName: "formControlName", direction: "direction" }, host: { properties: { "attr.data-thook": "this.thook", "class": "this.size" } }, usesInheritance: true, ngImport: i0, template: "<!-- RADIO BUTTONS -->\n<div [ngClass]=\"direction === 'column' ? 'direction-column' : 'direction-row'\">\n <ng-content></ng-content>\n</div>\n<!-- ERRORS -->\n<ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"ngControl?.name + '-radio-group'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n size=\"16px\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n</ng-container>\n", styles: [":host .direction-column{display:flex;flex-direction:column}:host .direction-row{display:flex;flex-direction:row}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%;font-weight:500}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
6439
|
+
}
|
|
6440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioGroupComponent, decorators: [{
|
|
6441
|
+
type: Component,
|
|
6442
|
+
args: [{ selector: 'nggv-radio-group', template: "<!-- RADIO BUTTONS -->\n<div [ngClass]=\"direction === 'column' ? 'direction-column' : 'direction-row'\">\n <ng-content></ng-content>\n</div>\n<!-- ERRORS -->\n<ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"ngControl?.name + '-radio-group'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n size=\"16px\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n</ng-container>\n", styles: [":host .direction-column{display:flex;flex-direction:column}:host .direction-row{display:flex;flex-direction:row}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%;font-weight:500}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
|
|
6443
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
6444
|
+
type: Self
|
|
6445
|
+
}, {
|
|
6446
|
+
type: Optional
|
|
6447
|
+
}] }, { type: undefined, decorators: [{
|
|
6448
|
+
type: Optional
|
|
6449
|
+
}, {
|
|
6450
|
+
type: Inject,
|
|
6451
|
+
args: [TRANSLOCO_SCOPE]
|
|
6452
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { thook: [{
|
|
6453
|
+
type: HostBinding,
|
|
6454
|
+
args: ['attr.data-thook']
|
|
6455
|
+
}, {
|
|
6456
|
+
type: Input
|
|
6457
|
+
}], size: [{
|
|
6458
|
+
type: HostBinding,
|
|
6459
|
+
args: ['class']
|
|
6460
|
+
}, {
|
|
6461
|
+
type: Input
|
|
6462
|
+
}], formControlName: [{
|
|
6463
|
+
type: Input
|
|
6464
|
+
}], direction: [{
|
|
6465
|
+
type: Input
|
|
6466
|
+
}] } });
|
|
6467
|
+
|
|
6382
6468
|
class NggvRadioModule {
|
|
6383
6469
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6384
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioModule, declarations: [NggvRadioComponent], imports: [CommonModule, NggvI18nModule$1, NggCoreWrapperModule], exports: [NggvRadioComponent] }); }
|
|
6470
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioModule, declarations: [NggvRadioComponent, NggvRadioGroupComponent], imports: [CommonModule, NggvI18nModule$1, NggCoreWrapperModule], exports: [NggvRadioComponent, NggvRadioGroupComponent] }); }
|
|
6385
6471
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioModule, imports: [CommonModule, NggvI18nModule$1, NggCoreWrapperModule] }); }
|
|
6386
6472
|
}
|
|
6387
6473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvRadioModule, decorators: [{
|
|
6388
6474
|
type: NgModule,
|
|
6389
6475
|
args: [{
|
|
6390
|
-
declarations: [NggvRadioComponent],
|
|
6476
|
+
declarations: [NggvRadioComponent, NggvRadioGroupComponent],
|
|
6391
6477
|
imports: [CommonModule, NggvI18nModule$1, NggCoreWrapperModule],
|
|
6392
|
-
exports: [NggvRadioComponent],
|
|
6478
|
+
exports: [NggvRadioComponent, NggvRadioGroupComponent],
|
|
6393
6479
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
6394
6480
|
}]
|
|
6395
6481
|
}] });
|
|
@@ -8168,5 +8254,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8168
8254
|
* Generated bundle index. Do not edit.
|
|
8169
8255
|
*/
|
|
8170
8256
|
|
|
8171
|
-
export { AccountNumberPipe, AlertComponent, AlertType, ButtonStyle, CalendarComponent, CalendarControlComponent, CalendarDateDirective, CalendarMonth, CharacterCountdownDirective, DateControlValueAccessorComponent, DateInputComponent, DatepickerComponent, DropdownUtils, InputMaskFormatPipe, IsDisabledPipe, MatchesPipe, MessageType, NggvAccountNumberPipeModule, NggvAlertModule, NggvBaseControlValueAccessorComponent, NggvBaseControlValueAccessorModule, NggvBreadcrumbsComponent, NggvBreadcrumbsModule, NggvButtonComponent, NggvButtonModule, NggvCardComponent, NggvCardModule, NggvCharacterCountdownDirectiveModule, NggvCheckboxComponent, NggvCheckboxModule, NggvDatepickerModule, NggvDialogComponent, NggvDragDropComponent, NggvDragDropModule, NggvDropdownComponent, NggvDropdownListComponent, NggvDropdownModule, NggvExternalLinkDirective, NggvExternalLinkDirectiveModule, NggvFoldOutComponent, NggvFoldOutOptionDirective, NggvI18nModule, NggvI18nTestModule, NggvInfoCircleComponent, NggvInfoCircleModule, NggvInputComponent, NggvInputMaskDirective, NggvInputMaskModule, NggvInputModule, NggvMissingHandler, NggvModalModule, NggvModule, NggvPaginationModule, NggvRadioComponent, NggvRadioControlRegistry, NggvRadioModule, NggvSlideOutComponent, NggvSlugPipeModule, NggvTableModule, NggvTabsModule, NggvTextareaComponent, NggvTextareaModule, NggvToastModule, NggvTooltipDirective, NggvTooltipModule, NggvTypeaheadDirective, NggvTypeaheadDropdownListComponent, NggvTypeaheadHighlightComponent, NggvTypeaheadInputComponent, NggvTypeaheadModule, PaginationComponent, SlugPipe, TabDirective, TableAppendableRowsTemplateDirective, TableComponent, TableDirective, TableFooterTemplateDirective, TableTemplateDirective, TabsComponent, ToastComponent, ToastMessageService, TrThookPipe, TranslocoMockInterceptor, TranslocoMockMissingHandler, TranslocoMockPipe, TranslocoMockStrategy, TranslocoMockTranspiler, ValueImpurePipe, ValuePipe, afterClosingHours, bbanPattern, createMask, firstCalendarDate, formatAccountNumber, generateDateMatrix, getDayOffset, getFormatDateMask, getLocaleDateMask, getLocaleDateString, getMonthArray, getSortedWeekDays, getYearArray, ibanPattern, isAfter, isBefore, isValid, match, setDateFormatCharacters, sortWeekDays };
|
|
8257
|
+
export { AccountNumberPipe, AlertComponent, AlertType, ButtonStyle, CalendarComponent, CalendarControlComponent, CalendarDateDirective, CalendarMonth, CharacterCountdownDirective, DateControlValueAccessorComponent, DateInputComponent, DatepickerComponent, DropdownUtils, InputMaskFormatPipe, IsDisabledPipe, MatchesPipe, MessageType, NggvAccountNumberPipeModule, NggvAlertModule, NggvBaseControlValueAccessorComponent, NggvBaseControlValueAccessorModule, NggvBreadcrumbsComponent, NggvBreadcrumbsModule, NggvButtonComponent, NggvButtonModule, NggvCardComponent, NggvCardModule, NggvCharacterCountdownDirectiveModule, NggvCheckboxComponent, NggvCheckboxModule, NggvDatepickerModule, NggvDialogComponent, NggvDragDropComponent, NggvDragDropModule, NggvDropdownComponent, NggvDropdownListComponent, NggvDropdownModule, NggvExternalLinkDirective, NggvExternalLinkDirectiveModule, NggvFoldOutComponent, NggvFoldOutOptionDirective, NggvI18nModule, NggvI18nTestModule, NggvInfoCircleComponent, NggvInfoCircleModule, NggvInputComponent, NggvInputMaskDirective, NggvInputMaskModule, NggvInputModule, NggvMissingHandler, NggvModalModule, NggvModule, NggvPaginationModule, NggvRadioComponent, NggvRadioControlRegistry, NggvRadioGroupComponent, NggvRadioModule, NggvSlideOutComponent, NggvSlugPipeModule, NggvTableModule, NggvTabsModule, NggvTextareaComponent, NggvTextareaModule, NggvToastModule, NggvTooltipDirective, NggvTooltipModule, NggvTypeaheadDirective, NggvTypeaheadDropdownListComponent, NggvTypeaheadHighlightComponent, NggvTypeaheadInputComponent, NggvTypeaheadModule, PaginationComponent, SlugPipe, TabDirective, TableAppendableRowsTemplateDirective, TableComponent, TableDirective, TableFooterTemplateDirective, TableTemplateDirective, TabsComponent, ToastComponent, ToastMessageService, TrThookPipe, TranslocoMockInterceptor, TranslocoMockMissingHandler, TranslocoMockPipe, TranslocoMockStrategy, TranslocoMockTranspiler, ValueImpurePipe, ValuePipe, afterClosingHours, bbanPattern, createMask, firstCalendarDate, formatAccountNumber, generateDateMatrix, getDayOffset, getFormatDateMask, getLocaleDateMask, getLocaleDateString, getMonthArray, getSortedWeekDays, getYearArray, ibanPattern, isAfter, isBefore, isValid, match, setDateFormatCharacters, sortWeekDays };
|
|
8172
8258
|
//# sourceMappingURL=sebgroup-green-angular-v-angular.mjs.map
|