@skyux/forms 11.5.0 → 11.7.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/documentation.json +4435 -1413
- package/esm2022/lib/modules/checkbox/checkbox-group.component.mjs +3 -3
- package/esm2022/lib/modules/field-group/field-group.component.mjs +3 -3
- package/esm2022/lib/modules/form-error/form-error.component.mjs +3 -3
- package/esm2022/lib/modules/radio/radio-group.component.mjs +4 -3
- package/esm2022/lib/modules/shared/sky-forms-resources.module.mjs +2 -2
- package/esm2022/testing/checkbox/checkbox-group-harness-filters.mjs +2 -0
- package/esm2022/testing/checkbox/checkbox-group-harness.mjs +158 -0
- package/esm2022/testing/checkbox/checkbox-harness.mjs +9 -3
- package/esm2022/testing/public-api.mjs +2 -1
- package/esm2022/testing/radio/radio-group-harness.mjs +24 -20
- package/fesm2022/skyux-forms-testing.mjs +186 -22
- package/fesm2022/skyux-forms-testing.mjs.map +1 -1
- package/fesm2022/skyux-forms.mjs +9 -9
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/package.json +9 -9
- package/testing/checkbox/checkbox-group-harness-filters.d.ts +7 -0
- package/testing/checkbox/checkbox-group-harness.d.ts +73 -0
- package/testing/checkbox/checkbox-harness.d.ts +5 -3
- package/testing/public-api.d.ts +2 -0
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -33,7 +33,6 @@ const RESOURCES = {
|
|
|
33
33
|
skyux_character_count_over_limit: {
|
|
34
34
|
message: 'You are over the character limit.',
|
|
35
35
|
},
|
|
36
|
-
skyux_checkbox_group_required: { message: 'Required' },
|
|
37
36
|
skyux_form_error_character_count: {
|
|
38
37
|
message: 'Limit {0} to {1} character(s).',
|
|
39
38
|
},
|
|
@@ -70,6 +69,7 @@ const RESOURCES = {
|
|
|
70
69
|
skyux_form_error_required: { message: '{0} is required.' },
|
|
71
70
|
skyux_form_error_time: { message: 'Select or enter a valid time.' },
|
|
72
71
|
skyux_form_error_url: { message: 'Enter a URL with a valid format.' },
|
|
72
|
+
skyux_form_group_required: { message: 'Required' },
|
|
73
73
|
skyux_file_attachment_button_label_choose_file: { message: 'Attach file' },
|
|
74
74
|
skyux_file_attachment_button_label_choose_file_label: {
|
|
75
75
|
message: 'Attach file for',
|
|
@@ -416,7 +416,7 @@ class SkyFormErrorComponent {
|
|
|
416
416
|
{{ errorText }}
|
|
417
417
|
</sky-status-indicator>
|
|
418
418
|
}
|
|
419
|
-
`, isInline: true, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1$2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
419
|
+
`, isInline: true, styles: ["@keyframes sky-modal-error{0%,50%{max-height:0;margin-top:0;opacity:0}to{max-height:500px;opacity:1}}:host{animation:sky-modal-error .3s ease-out 1;display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1$2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
420
420
|
}
|
|
421
421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
|
|
422
422
|
type: Component,
|
|
@@ -430,7 +430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
430
430
|
{{ errorText }}
|
|
431
431
|
</sky-status-indicator>
|
|
432
432
|
}
|
|
433
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"] }]
|
|
433
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes sky-modal-error{0%,50%{max-height:0;margin-top:0;opacity:0}to{max-height:500px;opacity:1}}:host{animation:sky-modal-error .3s ease-out 1;display:block;margin-top:var(--sky-margin-stacked-xs)}\n"] }]
|
|
434
434
|
}], ctorParameters: () => [], propDecorators: { errorName: [{
|
|
435
435
|
type: Input,
|
|
436
436
|
args: [{ required: true }]
|
|
@@ -599,7 +599,7 @@ class SkyCheckboxGroupComponent {
|
|
|
599
599
|
multi: true,
|
|
600
600
|
},
|
|
601
601
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
602
|
-
], ngImport: i0, template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @
|
|
602
|
+
], ngImport: i0, template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-checkbox-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n </legend>\n <div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n !!hintText\n }\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}.sky-control-label h3,.sky-control-label h4,.sky-control-label h5{margin:0;display:inline-block}.sky-control-label span{line-height:1.1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
603
603
|
}
|
|
604
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
|
|
605
605
|
type: Component,
|
|
@@ -616,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
616
616
|
multi: true,
|
|
617
617
|
},
|
|
618
618
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
619
|
-
], template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @
|
|
619
|
+
], template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-checkbox-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n </legend>\n <div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n !!hintText\n }\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}.sky-control-label h3,.sky-control-label h4,.sky-control-label h5{margin:0;display:inline-block}.sky-control-label span{line-height:1.1}\n"] }]
|
|
620
620
|
}], propDecorators: { helpPopoverContent: [{
|
|
621
621
|
type: Input
|
|
622
622
|
}], helpPopoverTitle: [{
|
|
@@ -1166,11 +1166,11 @@ class SkyFieldGroupComponent {
|
|
|
1166
1166
|
this.headingClass = `sky-font-heading-${value}`;
|
|
1167
1167
|
}
|
|
1168
1168
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFieldGroupComponent, isStandalone: true, selector: "sky-field-group", inputs: { headingText: "headingText", hintText: "hintText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute3], headingStyle: ["headingStyle", "headingStyle", numberAttribute3], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-xl": "this.stacked" } }, ngImport: i0, template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <
|
|
1169
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyFieldGroupComponent, isStandalone: true, selector: "sky-field-group", inputs: { headingText: "headingText", hintText: "hintText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute3], headingStyle: ["headingStyle", "headingStyle", numberAttribute3], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-xl": "this.stacked" } }, ngImport: i0, template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span class=\"sky-margin-inline-xs\">\n @switch (headingLevel) {\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @default {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n }\n </span>\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n class=\"sky-field-group-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n </legend>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-field-group-hint-text sky-margin-stacked-lg sky-font-deemphasized\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <div class=\"sky-field-group-content\">\n <ng-content />\n </div>\n</fieldset>\n", styles: [":host{display:block}legend{display:flex}legend h3,legend h4{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
1170
1170
|
}
|
|
1171
1171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyFieldGroupComponent, decorators: [{
|
|
1172
1172
|
type: Component,
|
|
1173
|
-
args: [{ selector: 'sky-field-group', standalone: true, imports: [CommonModule, SkyHelpInlineModule, SkyIdModule], template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <
|
|
1173
|
+
args: [{ selector: 'sky-field-group', standalone: true, imports: [CommonModule, SkyHelpInlineModule, SkyIdModule], template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span class=\"sky-margin-inline-xs\">\n @switch (headingLevel) {\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @default {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n }\n </span>\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n class=\"sky-field-group-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n </legend>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-field-group-hint-text sky-margin-stacked-lg sky-font-deemphasized\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <div class=\"sky-field-group-content\">\n <ng-content />\n </div>\n</fieldset>\n", styles: [":host{display:block}legend{display:flex}legend h3,legend h4{margin:0}\n"] }]
|
|
1174
1174
|
}], propDecorators: { headingText: [{
|
|
1175
1175
|
type: Input,
|
|
1176
1176
|
args: [{ required: true }]
|
|
@@ -3626,14 +3626,14 @@ class SkyRadioGroupComponent {
|
|
|
3626
3626
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
|
|
3627
3627
|
SkyRadioGroupIdService,
|
|
3628
3628
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
3629
|
-
], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<fieldset\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"isRequired ? true : null\"\n [attr.required]=\"isRequired ? '' : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n headingText && ngControl?.errors ? errorId : undefined\n \"\n>\n
|
|
3629
|
+
], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<fieldset\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"isRequired ? true : null\"\n [attr.required]=\"isRequired ? '' : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n headingText && ngControl?.errors ? errorId : undefined\n \"\n>\n @if (headingText) {\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-radio-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n </legend>\n }\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-radio-group-hint-text sky-margin-stacked-lg\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <ng-content />\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}legend h3,legend h4,legend h5{margin:0;display:inline-block}legend span{line-height:1.1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
3630
3630
|
}
|
|
3631
3631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
|
|
3632
3632
|
type: Component,
|
|
3633
3633
|
args: [{ selector: 'sky-radio-group', providers: [
|
|
3634
3634
|
SkyRadioGroupIdService,
|
|
3635
3635
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
3636
|
-
], template: "<fieldset\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"isRequired ? true : null\"\n [attr.required]=\"isRequired ? '' : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n headingText && ngControl?.errors ? errorId : undefined\n \"\n>\n
|
|
3636
|
+
], template: "<fieldset\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"isRequired ? true : null\"\n [attr.required]=\"isRequired ? '' : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n headingText && ngControl?.errors ? errorId : undefined\n \"\n>\n @if (headingText) {\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-radio-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n </legend>\n }\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-radio-group-hint-text sky-margin-stacked-lg\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <ng-content />\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}legend h3,legend h4,legend h5{margin:0;display:inline-block}legend span{line-height:1.1}\n"] }]
|
|
3637
3637
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i2.NgControl, decorators: [{
|
|
3638
3638
|
type: Self
|
|
3639
3639
|
}, {
|