@skyux/forms 10.11.0 → 10.13.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 +3153 -2892
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/modules/checkbox/checkbox-group.component.mjs +8 -15
- package/esm2022/lib/modules/checkbox/checkbox.component.mjs +16 -4
- package/esm2022/lib/modules/field-group/field-group.component.mjs +2 -2
- package/esm2022/lib/modules/file-attachment/file-attachment.component.mjs +16 -5
- package/esm2022/lib/modules/file-attachment/file-drop.component.mjs +16 -4
- package/esm2022/lib/modules/radio/radio-group.component.mjs +23 -7
- package/esm2022/lib/modules/radio/radio.component.mjs +3 -3
- package/esm2022/lib/modules/required-state/required-state.directive.mjs +34 -0
- package/esm2022/lib/modules/toggle-switch/toggle-switch.component.mjs +1 -1
- package/fesm2022/skyux-forms.mjs +107 -33
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/modules/checkbox/checkbox-group.component.d.ts +1 -2
- package/lib/modules/checkbox/checkbox.component.d.ts +9 -1
- package/lib/modules/file-attachment/file-attachment.component.d.ts +8 -1
- package/lib/modules/file-attachment/file-drop.component.d.ts +8 -1
- package/lib/modules/radio/radio-group.component.d.ts +22 -2
- package/lib/modules/required-state/required-state.directive.d.ts +17 -0
- package/package.json +8 -8
package/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export { SkyInputBoxModule } from './lib/modules/input-box/input-box.module';
|
|
|
20
20
|
export { SkyRadioModule } from './lib/modules/radio/radio.module';
|
|
21
21
|
export { SkyRadioChange } from './lib/modules/radio/types/radio-change';
|
|
22
22
|
export { SkyRadioType } from './lib/modules/radio/types/radio-type';
|
|
23
|
+
export { SkyRequiredStateDirective } from './lib/modules/required-state/required-state.directive';
|
|
23
24
|
export { SkySelectionBoxModule } from './lib/modules/selection-box/selection-box.module';
|
|
24
25
|
export { SkySelectionBoxGridAlignItems } from './lib/modules/selection-box/types/selection-box-grid-align-items';
|
|
25
26
|
export { SkySelectionBoxGridAlignItemsType } from './lib/modules/selection-box/types/selection-box-grid-align-items-type';
|
|
@@ -45,8 +45,7 @@ export declare class SkyCheckboxGroupComponent {
|
|
|
45
45
|
* vertical spacing is automatically added to the checkbox group.
|
|
46
46
|
* @preview
|
|
47
47
|
*/
|
|
48
|
-
|
|
49
|
-
get stacked(): boolean;
|
|
48
|
+
stacked: boolean;
|
|
50
49
|
/**
|
|
51
50
|
* The form group that contains the group of checkboxes.
|
|
52
51
|
* @preview
|
|
@@ -127,6 +127,13 @@ export declare class SkyCheckboxComponent implements ControlValueAccessor, OnIni
|
|
|
127
127
|
* @preview
|
|
128
128
|
*/
|
|
129
129
|
hintText: string | undefined;
|
|
130
|
+
/**
|
|
131
|
+
* Whether the checkbox is stacked on another form component. When specified, the appropriate
|
|
132
|
+
* vertical spacing is automatically added to the checkbox. If the checkbox is within a checkbox group,
|
|
133
|
+
* set `stacked` on the checkbox group component instead.
|
|
134
|
+
* @preview
|
|
135
|
+
*/
|
|
136
|
+
stacked: boolean;
|
|
130
137
|
/**
|
|
131
138
|
* Fires when users select or deselect the checkbox.
|
|
132
139
|
*/
|
|
@@ -173,6 +180,7 @@ export declare class SkyCheckboxComponent implements ControlValueAccessor, OnIni
|
|
|
173
180
|
/** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
|
|
174
181
|
onTouched: () => any;
|
|
175
182
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyCheckboxComponent, never>;
|
|
176
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxComponent, "sky-checkbox", never, { "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "name": { "alias": "name"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "checkboxType": { "alias": "checkboxType"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; "indeterminateChange": "indeterminateChange"; }, never, ["sky-checkbox-label", "sky-form-error"], false, never>;
|
|
183
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxComponent, "sky-checkbox", never, { "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "name": { "alias": "name"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "checkboxType": { "alias": "checkboxType"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; "indeterminateChange": "indeterminateChange"; }, never, ["sky-checkbox-label", "sky-form-error"], false, never>;
|
|
177
184
|
static ngAcceptInputType_labelHidden: unknown;
|
|
185
|
+
static ngAcceptInputType_stacked: unknown;
|
|
178
186
|
}
|
|
@@ -69,6 +69,12 @@ export declare class SkyFileAttachmentComponent implements AfterViewInit, AfterC
|
|
|
69
69
|
*/
|
|
70
70
|
set minFileSize(value: number | undefined);
|
|
71
71
|
get minFileSize(): number;
|
|
72
|
+
/**
|
|
73
|
+
* Whether the single file attachment is stacked on another form component. When specified,
|
|
74
|
+
* the appropriate vertical spacing is automatically added to the single file attachment.
|
|
75
|
+
* @preview
|
|
76
|
+
*/
|
|
77
|
+
stacked: boolean;
|
|
72
78
|
/**
|
|
73
79
|
* The custom validation function. This validation runs alongside the internal
|
|
74
80
|
* file validation. This function takes a `SkyFileItem` object as a parameter.
|
|
@@ -134,6 +140,7 @@ export declare class SkyFileAttachmentComponent implements AfterViewInit, AfterC
|
|
|
134
140
|
setDisabledState(isDisabled: boolean): void;
|
|
135
141
|
emitClick(): void;
|
|
136
142
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyFileAttachmentComponent, [null, null, null, { optional: true; self: true; }, { optional: true; }]>;
|
|
137
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileAttachmentComponent, "sky-file-attachment", never, { "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "fileChange": "fileChange"; "fileClick": "fileClick"; }, ["labelComponents"], ["sky-form-error", "sky-file-attachment-label"], false, never>;
|
|
143
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileAttachmentComponent, "sky-file-attachment", never, { "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "fileChange": "fileChange"; "fileClick": "fileClick"; }, ["labelComponents"], ["sky-form-error", "sky-file-attachment-label"], false, never>;
|
|
138
144
|
static ngAcceptInputType_labelHidden: unknown;
|
|
145
|
+
static ngAcceptInputType_stacked: unknown;
|
|
139
146
|
}
|
|
@@ -116,6 +116,12 @@ export declare class SkyFileDropComponent implements OnInit, OnDestroy {
|
|
|
116
116
|
* @preview
|
|
117
117
|
*/
|
|
118
118
|
helpPopoverTitle: string | undefined;
|
|
119
|
+
/**
|
|
120
|
+
* Whether the file attachment is stacked on another form component. When specified, the appropriate
|
|
121
|
+
* vertical spacing is automatically added to the file attachment.
|
|
122
|
+
* @preview
|
|
123
|
+
*/
|
|
124
|
+
stacked: boolean;
|
|
119
125
|
inputEl: ElementRef | undefined;
|
|
120
126
|
display: string | undefined;
|
|
121
127
|
rejectedOver: boolean;
|
|
@@ -135,7 +141,8 @@ export declare class SkyFileDropComponent implements OnInit, OnDestroy {
|
|
|
135
141
|
addLink(event: Event): void;
|
|
136
142
|
onLinkBlur(): void;
|
|
137
143
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyFileDropComponent, never>;
|
|
138
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileDropComponent, "sky-file-drop", never, { "fileUploadAriaLabel": { "alias": "fileUploadAriaLabel"; "required": false; }; "linkUploadAriaLabel": { "alias": "linkUploadAriaLabel"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "noClick": { "alias": "noClick"; "required": false; }; "allowLinks": { "alias": "allowLinks"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "required": { "alias": "required"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
|
|
144
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkyFileDropComponent, "sky-file-drop", never, { "fileUploadAriaLabel": { "alias": "fileUploadAriaLabel"; "required": false; }; "linkUploadAriaLabel": { "alias": "linkUploadAriaLabel"; "required": false; }; "minFileSize": { "alias": "minFileSize"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "noClick": { "alias": "noClick"; "required": false; }; "allowLinks": { "alias": "allowLinks"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "required": { "alias": "required"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
|
|
139
145
|
static ngAcceptInputType_labelHidden: unknown;
|
|
140
146
|
static ngAcceptInputType_required: unknown;
|
|
147
|
+
static ngAcceptInputType_stacked: unknown;
|
|
141
148
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
|
|
1
|
+
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
|
|
2
2
|
import { NgControl } from '@angular/forms';
|
|
3
3
|
import { SkyRadioGroupIdService } from './radio-group-id.service';
|
|
4
4
|
import { SkyRadioComponent } from './radio.component';
|
|
@@ -55,6 +55,12 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
|
|
|
55
55
|
* @default false
|
|
56
56
|
*/
|
|
57
57
|
required: boolean | undefined;
|
|
58
|
+
/**
|
|
59
|
+
* Whether the radio button group is stacked on another form component. When specified,
|
|
60
|
+
* the appropriate vertical spacing is automatically added to the radio button group.
|
|
61
|
+
* @preview
|
|
62
|
+
*/
|
|
63
|
+
stacked: boolean;
|
|
58
64
|
/**
|
|
59
65
|
* The value of the radio button to select by default when the group loads.
|
|
60
66
|
* The value corresponds to the `value` property of an individual `sky-radio` element within the
|
|
@@ -87,6 +93,19 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
|
|
|
87
93
|
* @preview
|
|
88
94
|
*/
|
|
89
95
|
hintText: string | undefined;
|
|
96
|
+
/**
|
|
97
|
+
* The content of the help popover. When specified along with `labelText`, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
|
|
98
|
+
* button is added to radio group. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)
|
|
99
|
+
* when clicked using the specified content and optional title.
|
|
100
|
+
* @preview
|
|
101
|
+
*/
|
|
102
|
+
helpPopoverContent: string | TemplateRef<unknown> | undefined;
|
|
103
|
+
/**
|
|
104
|
+
* The title of the help popover. This property only applies when `helpPopoverContent` is
|
|
105
|
+
* also specified.
|
|
106
|
+
* @preview
|
|
107
|
+
*/
|
|
108
|
+
helpPopoverTitle: string | undefined;
|
|
90
109
|
/**
|
|
91
110
|
* Our radio components are usually implemented using an unordered list. This is an
|
|
92
111
|
* accessibility violation because the unordered list has an implicit role which
|
|
@@ -113,6 +132,7 @@ export declare class SkyRadioGroupComponent implements AfterContentInit, AfterVi
|
|
|
113
132
|
registerOnChange(fn: (value: any) => void): void;
|
|
114
133
|
registerOnTouched(fn: any): void;
|
|
115
134
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyRadioGroupComponent, [null, null, { optional: true; self: true; }]>;
|
|
116
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioGroupComponent, "sky-radio-group", never, { "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; }, {}, ["radios"], ["*", "sky-form-error"], false, never>;
|
|
135
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioGroupComponent, "sky-radio-group", never, { "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "hintText": { "alias": "hintText"; "required": false; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; }; }, {}, ["radios"], ["*", "sky-form-error"], false, never>;
|
|
136
|
+
static ngAcceptInputType_stacked: unknown;
|
|
117
137
|
static ngAcceptInputType_labelHidden: unknown;
|
|
118
138
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
/**
|
|
3
|
+
* A host directive used to capture the "required" state of the host's form control.
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
export declare class SkyRequiredStateDirective {
|
|
7
|
+
#private;
|
|
8
|
+
required: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Whether the `required` attribute is set to `true`, or the control includes
|
|
11
|
+
* the `Validators.required` validator.
|
|
12
|
+
*/
|
|
13
|
+
isRequired(): boolean;
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkyRequiredStateDirective, never>;
|
|
15
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SkyRequiredStateDirective, never, never, { "required": { "alias": "required"; "required": false; }; }, {}, never, never, true, never>;
|
|
16
|
+
static ngAcceptInputType_required: unknown;
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/forms",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.13.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
"@angular/core": "^17.3.4",
|
|
42
42
|
"@angular/forms": "^17.3.4",
|
|
43
43
|
"@angular/platform-browser": "^17.3.4",
|
|
44
|
-
"@skyux-sdk/testing": "10.
|
|
45
|
-
"@skyux/core": "10.
|
|
46
|
-
"@skyux/help-inline": "10.
|
|
47
|
-
"@skyux/i18n": "10.
|
|
48
|
-
"@skyux/indicators": "10.
|
|
49
|
-
"@skyux/popovers": "10.
|
|
50
|
-
"@skyux/theme": "10.
|
|
44
|
+
"@skyux-sdk/testing": "10.13.0",
|
|
45
|
+
"@skyux/core": "10.13.0",
|
|
46
|
+
"@skyux/help-inline": "10.13.0",
|
|
47
|
+
"@skyux/i18n": "10.13.0",
|
|
48
|
+
"@skyux/indicators": "10.13.0",
|
|
49
|
+
"@skyux/popovers": "10.13.0",
|
|
50
|
+
"@skyux/theme": "10.13.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"tslib": "^2.6.2"
|