@skyux/forms 10.0.0 → 10.1.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/index.d.ts CHANGED
@@ -28,6 +28,7 @@ export { SkyCharacterCounterInputDirective as λ2 } from './lib/modules/characte
28
28
  export { SkyCharacterCounterScreenReaderPipe as λ23 } from './lib/modules/character-counter/character-counter-screen-reader.pipe';
29
29
  export { SkyCheckboxLabelComponent as λ4 } from './lib/modules/checkbox/checkbox-label.component';
30
30
  export { SkyCheckboxComponent as λ3 } from './lib/modules/checkbox/checkbox.component';
31
+ export { SkyCheckboxGroupComponent as λ24 } from './lib/modules/checkbox/checkbox-group.component';
31
32
  export { SkyFileAttachmentLabelComponent as λ6 } from './lib/modules/file-attachment/file-attachment-label.component';
32
33
  export { SkyFileAttachmentComponent as λ7 } from './lib/modules/file-attachment/file-attachment.component';
33
34
  export { SkyFileDropComponent as λ8 } from './lib/modules/file-attachment/file-drop.component';
@@ -0,0 +1,36 @@
1
+ import { FormGroup } from '@angular/forms';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * Organizes checkboxes into a group.
5
+ */
6
+ export declare class SkyCheckboxGroupComponent {
7
+ #private;
8
+ /**
9
+ * The text to display as the checkbox group's label.
10
+ * @preview
11
+ */
12
+ labelText: string;
13
+ /**
14
+ * Indicates whether to hide the `labelText`.
15
+ * @preview
16
+ */
17
+ labelHidden: boolean;
18
+ /**
19
+ * Whether the checkbox group is stacked on another form component. When specified, the appropriate
20
+ * vertical spacing is automatically added to the checkbox group.
21
+ * @preview
22
+ */
23
+ set stacked(value: boolean);
24
+ get stacked(): boolean;
25
+ /**
26
+ * The form group that contains the group of checkboxes.
27
+ * @preview
28
+ */
29
+ formGroup: FormGroup;
30
+ protected errorId: string;
31
+ protected formErrorsDataId: string;
32
+ static ɵfac: i0.ɵɵFactoryDeclaration<SkyCheckboxGroupComponent, never>;
33
+ static ɵcmp: i0.ɵɵComponentDeclaration<SkyCheckboxGroupComponent, "sky-checkbox-group", never, { "labelText": { "alias": "labelText"; "required": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": true; }; }, {}, never, ["sky-checkbox[icon]", "sky-checkbox", "sky-form-error"], true, never>;
34
+ static ngAcceptInputType_labelHidden: unknown;
35
+ static ngAcceptInputType_stacked: unknown;
36
+ }
@@ -59,8 +59,7 @@ export declare class SkyCheckboxComponent implements ControlValueAccessor, OnIni
59
59
  change: EventEmitter<SkyCheckboxChange>;
60
60
  /**
61
61
  * The icon to display in place of the checkbox. To group icon checkboxes
62
- * like in the demo, place the `sky-switch-icon-group` class on the direct parent
63
- * element of the checkboxes.
62
+ * like in the demo, place the checkboxes within a `sky-checkbox-group`.
64
63
  */
65
64
  icon: string | undefined;
66
65
  /**
@@ -4,13 +4,14 @@ import * as i2 from "./checkbox-label.component";
4
4
  import * as i3 from "./checkbox-label-text-label.component";
5
5
  import * as i4 from "@angular/common";
6
6
  import * as i5 from "@angular/forms";
7
- import * as i6 from "../form-error/form-error.module";
8
- import * as i7 from "../form-error/form-errors.module";
9
- import * as i8 from "../shared/sky-forms-resources.module";
10
- import * as i9 from "@skyux/indicators";
11
- import * as i10 from "@skyux/core";
7
+ import * as i6 from "./checkbox-group.component";
8
+ import * as i7 from "../form-error/form-error.module";
9
+ import * as i8 from "../form-error/form-errors.module";
10
+ import * as i9 from "../shared/sky-forms-resources.module";
11
+ import * as i10 from "@skyux/indicators";
12
+ import * as i11 from "@skyux/core";
12
13
  export declare class SkyCheckboxModule {
13
14
  static ɵfac: i0.ɵɵFactoryDeclaration<SkyCheckboxModule, never>;
14
- static ɵmod: i0.ɵɵNgModuleDeclaration<SkyCheckboxModule, [typeof i1.SkyCheckboxComponent, typeof i2.SkyCheckboxLabelComponent, typeof i3.SkyCheckboxLabelTextLabelComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.SkyFormErrorModule, typeof i7.SkyFormErrorsModule, typeof i8.SkyFormsResourcesModule, typeof i9.SkyIconModule, typeof i10.SkyTrimModule], [typeof i1.SkyCheckboxComponent, typeof i2.SkyCheckboxLabelComponent, typeof i6.SkyFormErrorModule]>;
15
+ static ɵmod: i0.ɵɵNgModuleDeclaration<SkyCheckboxModule, [typeof i1.SkyCheckboxComponent, typeof i2.SkyCheckboxLabelComponent, typeof i3.SkyCheckboxLabelTextLabelComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.SkyCheckboxGroupComponent, typeof i7.SkyFormErrorModule, typeof i8.SkyFormErrorsModule, typeof i9.SkyFormsResourcesModule, typeof i10.SkyIconModule, typeof i11.SkyTrimModule], [typeof i1.SkyCheckboxComponent, typeof i2.SkyCheckboxLabelComponent, typeof i6.SkyCheckboxGroupComponent, typeof i7.SkyFormErrorModule]>;
15
16
  static ɵinj: i0.ɵɵInjectorDeclaration<SkyCheckboxModule>;
16
17
  }
@@ -76,6 +76,16 @@ export declare class SkyFileDropComponent implements OnDestroy {
76
76
  * Whether to display the option to attach files from URLs rather than from local devices.
77
77
  */
78
78
  allowLinks: boolean | undefined;
79
+ /**
80
+ * The text to display as the file attachment's label.
81
+ * @preview
82
+ */
83
+ labelText: string | undefined;
84
+ /**
85
+ * Whether to hide `labelText` from view.
86
+ * @preview
87
+ */
88
+ labelHidden: boolean;
79
89
  inputEl: ElementRef | undefined;
80
90
  rejectedOver: boolean;
81
91
  acceptedOver: boolean;
@@ -91,5 +101,6 @@ export declare class SkyFileDropComponent implements OnDestroy {
91
101
  addLink(event: Event): void;
92
102
  onLinkBlur(): void;
93
103
  static ɵfac: i0.ɵɵFactoryDeclaration<SkyFileDropComponent, never>;
94
- 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; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
104
+ 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; }; }, { "filesChanged": "filesChanged"; "linkInputBlur": "linkInputBlur"; "linkChanged": "linkChanged"; }, never, ["*"], false, never>;
105
+ static ngAcceptInputType_labelHidden: unknown;
95
106
  }
@@ -3,9 +3,11 @@ import * as i0 from "@angular/core";
3
3
  * Specifies a label for the radio button. To display a help button beside the label, include a help button element,
4
4
  * such as `sky-help-inline`, in the `sky-radio-label` element and a `sky-control-help` CSS class on that help button
5
5
  * element.
6
+ * @deprecated Use `labelText` input on `sky-radio-component` instead.
6
7
  */
7
8
  export declare class SkyRadioLabelComponent {
8
9
  onClick(event: MouseEvent): void;
10
+ constructor();
9
11
  static ɵfac: i0.ɵɵFactoryDeclaration<SkyRadioLabelComponent, never>;
10
12
  static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioLabelComponent, "sky-radio-label", never, {}, {}, never, ["*", ".sky-control-help"], false, never>;
11
13
  }
@@ -39,16 +39,20 @@ export declare class SkyRadioComponent implements OnDestroy, ControlValueAccesso
39
39
  * when the radio button does not include a visible label. You must set this property for icon
40
40
  * radio buttons. If the radio button includes a visible label, use `labelledBy` instead.
41
41
  * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).
42
+ * @deprecated Use `labelText` instead.
42
43
  */
43
- label: string | undefined;
44
+ set label(value: string | undefined);
45
+ get label(): string | undefined;
44
46
  /**
45
47
  * The HTML element ID of the element that labels
46
48
  * the radio button. This sets the radio button's `aria-labelledby` attribute to provide a text equivalent for screen readers
47
49
  * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
48
50
  * If the radio button does not include a visible label, use `label` instead.
49
51
  * For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby).
52
+ * @deprecated Use `labelText` instead.
50
53
  */
51
- labelledBy: string | undefined;
54
+ set labelledBy(value: string | undefined);
55
+ get labelledBy(): string | undefined;
52
56
  /**
53
57
  * This property is deprecated in favor of the `name` property on the `sky-radio-group element`.
54
58
  * We recommend using the `sky-radio-group` element with all radio buttons, but if you opt not to,
@@ -91,6 +95,16 @@ export declare class SkyRadioComponent implements OnDestroy, ControlValueAccesso
91
95
  */
92
96
  get radioType(): SkyRadioType;
93
97
  set radioType(value: SkyRadioType | undefined);
98
+ /**
99
+ * The text to display as the radio button's label. Use this instead of the `sky-radio-label` when the label is text-only.
100
+ * @preview
101
+ */
102
+ labelText: string | undefined;
103
+ /**
104
+ * Indicates whether to hide the `labelText`.
105
+ * @preview
106
+ */
107
+ labelHidden: boolean;
94
108
  /**
95
109
  * Fires when users select a radio button.
96
110
  */
@@ -121,5 +135,6 @@ export declare class SkyRadioComponent implements OnDestroy, ControlValueAccesso
121
135
  onInputChange(event: Event): void;
122
136
  onInputFocusChange(): void;
123
137
  static ɵfac: i0.ɵɵFactoryDeclaration<SkyRadioComponent, never>;
124
- static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioComponent, "sky-radio", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "radioType": { "alias": "radioType"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; }, never, ["sky-radio-label"], false, never>;
138
+ static ɵcmp: i0.ɵɵComponentDeclaration<SkyRadioComponent, "sky-radio", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "radioType": { "alias": "radioType"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelHidden": { "alias": "labelHidden"; "required": false; }; }, { "change": "change"; "checkedChange": "checkedChange"; "disabledChange": "disabledChange"; }, never, ["sky-radio-label"], false, never>;
139
+ static ngAcceptInputType_labelHidden: unknown;
125
140
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/forms",
3
- "version": "10.0.0",
3
+ "version": "10.1.0",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -41,12 +41,12 @@
41
41
  "@angular/core": "^17.3.1",
42
42
  "@angular/forms": "^17.3.1",
43
43
  "@angular/platform-browser": "^17.3.1",
44
- "@skyux-sdk/testing": "10.0.0",
45
- "@skyux/core": "10.0.0",
46
- "@skyux/i18n": "10.0.0",
47
- "@skyux/indicators": "10.0.0",
48
- "@skyux/popovers": "10.0.0",
49
- "@skyux/theme": "10.0.0"
44
+ "@skyux-sdk/testing": "10.1.0",
45
+ "@skyux/core": "10.1.0",
46
+ "@skyux/i18n": "10.1.0",
47
+ "@skyux/indicators": "10.1.0",
48
+ "@skyux/popovers": "10.1.0",
49
+ "@skyux/theme": "10.1.0"
50
50
  },
51
51
  "dependencies": {
52
52
  "tslib": "^2.6.2"