@skyux/forms 10.0.0 → 10.2.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 +3152 -2366
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/modules/checkbox/checkbox-group.component.mjs +59 -0
- package/esm2022/lib/modules/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/modules/checkbox/checkbox.module.mjs +7 -1
- package/esm2022/lib/modules/file-attachment/file-attachments.module.mjs +5 -3
- package/esm2022/lib/modules/file-attachment/file-drop.component.mjs +32 -7
- package/esm2022/lib/modules/file-attachment/file-size.pipe.mjs +7 -7
- package/esm2022/lib/modules/file-attachment/file-validate-function.mjs +1 -1
- package/esm2022/lib/modules/form-error/form-errors.component.mjs +3 -3
- package/esm2022/lib/modules/radio/radio-label.component.mjs +11 -3
- package/esm2022/lib/modules/radio/radio.component.mjs +56 -4
- package/esm2022/lib/modules/shared/sky-forms-resources.module.mjs +10 -1
- package/fesm2022/skyux-forms.mjs +166 -19
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/modules/checkbox/checkbox-group.component.d.ts +36 -0
- package/lib/modules/checkbox/checkbox.component.d.ts +1 -2
- package/lib/modules/checkbox/checkbox.module.d.ts +7 -6
- package/lib/modules/file-attachment/file-attachments.module.d.ts +1 -1
- package/lib/modules/file-attachment/file-drop.component.d.ts +16 -1
- package/lib/modules/file-attachment/file-validate-function.d.ts +3 -0
- package/lib/modules/radio/radio-label.component.d.ts +2 -0
- package/lib/modules/radio/radio.component.d.ts +18 -3
- package/package.json +7 -7
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, DecimalPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, EventEmitter, ChangeDetectorRef,
|
|
4
|
+
import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, booleanAttribute, EventEmitter, ChangeDetectorRef, ElementRef, Output, ViewChild, Injectable, Self, Optional, ContentChildren, TemplateRef, RendererFactory2, Renderer2, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
|
|
5
5
|
import * as i2$1 from '@angular/forms';
|
|
6
6
|
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, NgControl, Validators, FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import * as i2 from '@skyux/i18n';
|
|
@@ -102,12 +102,21 @@ const RESOURCES = {
|
|
|
102
102
|
skyux_file_attachment_file_type_error_label_text: {
|
|
103
103
|
message: 'Please upload a file of type {0}.',
|
|
104
104
|
},
|
|
105
|
+
skyux_file_attachment_file_type_error_label_text_with_name: {
|
|
106
|
+
message: '{0}: Please upload a file of type {1}.',
|
|
107
|
+
},
|
|
105
108
|
skyux_file_attachment_max_file_size_error_label_text: {
|
|
106
109
|
message: 'Please upload a file under {0}KB.',
|
|
107
110
|
},
|
|
111
|
+
skyux_file_attachment_max_file_size_error_label_text_with_name: {
|
|
112
|
+
message: '{0}: Please upload a file under {1}KB.',
|
|
113
|
+
},
|
|
108
114
|
skyux_file_attachment_min_file_size_error_label_text: {
|
|
109
115
|
message: 'Please upload a file over {0}KB.',
|
|
110
116
|
},
|
|
117
|
+
skyux_file_attachment_min_file_size_error_label_text_with_name: {
|
|
118
|
+
message: '{0}: Please upload a file over {1}KB.',
|
|
119
|
+
},
|
|
111
120
|
skyux_file_attachment_label_no_file_chosen: { message: 'No file chosen.' },
|
|
112
121
|
skyux_input_box_help_inline_aria_label: {
|
|
113
122
|
message: 'Show help content for {0}',
|
|
@@ -435,7 +444,7 @@ class SkyFormErrorsComponent {
|
|
|
435
444
|
this.ariaRelevant = 'all';
|
|
436
445
|
}
|
|
437
446
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", showErrors: ["showErrors", "showErrors", coerceBooleanProperty] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "<ng-container *ngIf=\"labelText && showErrors
|
|
447
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", showErrors: ["showErrors", "showErrors", coerceBooleanProperty] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "<ng-container *ngIf=\"labelText && showErrors\">\n <ng-container *ngIf=\"errors\">\n <sky-form-error\n *ngIf=\"errors['required']\"\n errorName=\"required\"\n [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n />\n\n <sky-form-error\n *ngIf=\"errors['maxlength'] as maxLengthError\"\n errorName=\"maxlength\"\n [errorText]=\"\n 'skyux_form_error_maxlength'\n | skyLibResources: labelText : maxLengthError.requiredLength\n \"\n />\n\n <sky-form-error\n *ngIf=\"errors['minlength'] as minLengthError\"\n errorName=\"minlength\"\n [errorText]=\"\n 'skyux_form_error_minlength'\n | skyLibResources: labelText : minLengthError.requiredLength\n \"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyDate']\"\n errorName=\"date\"\n [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyEmail']\"\n errorName=\"email\"\n [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyPhoneField']\"\n errorName=\"phone\"\n [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyTime']\"\n errorName=\"time\"\n [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyUrl']\"\n errorName=\"url\"\n [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n />\n </ng-container>\n <ng-content />\n</ng-container>\n", styles: [":host,sky-status-indicator{display:block;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
439
448
|
}
|
|
440
449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
|
|
441
450
|
type: Component,
|
|
@@ -444,7 +453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
444
453
|
SkyIdModule,
|
|
445
454
|
SkyFormErrorComponent,
|
|
446
455
|
SkyFormsResourcesModule,
|
|
447
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"labelText && showErrors
|
|
456
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"labelText && showErrors\">\n <ng-container *ngIf=\"errors\">\n <sky-form-error\n *ngIf=\"errors['required']\"\n errorName=\"required\"\n [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n />\n\n <sky-form-error\n *ngIf=\"errors['maxlength'] as maxLengthError\"\n errorName=\"maxlength\"\n [errorText]=\"\n 'skyux_form_error_maxlength'\n | skyLibResources: labelText : maxLengthError.requiredLength\n \"\n />\n\n <sky-form-error\n *ngIf=\"errors['minlength'] as minLengthError\"\n errorName=\"minlength\"\n [errorText]=\"\n 'skyux_form_error_minlength'\n | skyLibResources: labelText : minLengthError.requiredLength\n \"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyDate']\"\n errorName=\"date\"\n [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyEmail']\"\n errorName=\"email\"\n [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyPhoneField']\"\n errorName=\"phone\"\n [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyTime']\"\n errorName=\"time\"\n [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyUrl']\"\n errorName=\"url\"\n [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n />\n </ng-container>\n <ng-content />\n</ng-container>\n", styles: [":host,sky-status-indicator{display:block;line-height:normal}\n"] }]
|
|
448
457
|
}], propDecorators: { errors: [{
|
|
449
458
|
type: Input
|
|
450
459
|
}], labelText: [{
|
|
@@ -479,6 +488,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
479
488
|
}]
|
|
480
489
|
}] });
|
|
481
490
|
|
|
491
|
+
/**
|
|
492
|
+
* Organizes checkboxes into a group.
|
|
493
|
+
*/
|
|
494
|
+
class SkyCheckboxGroupComponent {
|
|
495
|
+
constructor() {
|
|
496
|
+
/**
|
|
497
|
+
* Indicates whether to hide the `labelText`.
|
|
498
|
+
* @preview
|
|
499
|
+
*/
|
|
500
|
+
this.labelHidden = false;
|
|
501
|
+
this.#_stacked = false;
|
|
502
|
+
this.#idSvc = inject(SkyIdService);
|
|
503
|
+
this.errorId = this.#idSvc.generateId();
|
|
504
|
+
this.formErrorsDataId = 'checkbox-group-form-errors';
|
|
505
|
+
}
|
|
506
|
+
/**
|
|
507
|
+
* Whether the checkbox group is stacked on another form component. When specified, the appropriate
|
|
508
|
+
* vertical spacing is automatically added to the checkbox group.
|
|
509
|
+
* @preview
|
|
510
|
+
*/
|
|
511
|
+
set stacked(value) {
|
|
512
|
+
this.#_stacked = value;
|
|
513
|
+
}
|
|
514
|
+
get stacked() {
|
|
515
|
+
return this.#_stacked;
|
|
516
|
+
}
|
|
517
|
+
#_stacked;
|
|
518
|
+
#idSvc;
|
|
519
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], formGroup: "formGroup" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], ngImport: i0, template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup.errors\"\n [attr.aria-errormessage]=\"labelText && formGroup.errors ? errorId : undefined\"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{ 'sky-screen-reader-only': labelHidden }\"\n >\n {{ labelText }}\n </legend>\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 *ngIf=\"labelText && formGroup.errors\"\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup.errors\"\n [labelText]=\"labelText\"\n [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }] }); }
|
|
521
|
+
}
|
|
522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
|
|
523
|
+
type: Component,
|
|
524
|
+
args: [{ selector: 'sky-checkbox-group', standalone: true, imports: [CommonModule, SkyFormErrorsModule], providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup.errors\"\n [attr.aria-errormessage]=\"labelText && formGroup.errors ? errorId : undefined\"\n>\n <legend\n class=\"sky-control-label\"\n [ngClass]=\"{ 'sky-screen-reader-only': labelHidden }\"\n >\n {{ labelText }}\n </legend>\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 *ngIf=\"labelText && formGroup.errors\"\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup.errors\"\n [labelText]=\"labelText\"\n [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}\n"] }]
|
|
525
|
+
}], propDecorators: { labelText: [{
|
|
526
|
+
type: Input,
|
|
527
|
+
args: [{ required: true }]
|
|
528
|
+
}], labelHidden: [{
|
|
529
|
+
type: Input,
|
|
530
|
+
args: [{ transform: booleanAttribute }]
|
|
531
|
+
}], stacked: [{
|
|
532
|
+
type: Input,
|
|
533
|
+
args: [{ transform: booleanAttribute }]
|
|
534
|
+
}, {
|
|
535
|
+
type: HostBinding,
|
|
536
|
+
args: ['class.sky-margin-stacked-lg']
|
|
537
|
+
}], formGroup: [{
|
|
538
|
+
type: Input,
|
|
539
|
+
args: [{ required: true }]
|
|
540
|
+
}] } });
|
|
541
|
+
|
|
482
542
|
/**
|
|
483
543
|
@internal
|
|
484
544
|
*/
|
|
@@ -869,11 +929,11 @@ class SkyCheckboxComponent {
|
|
|
869
929
|
}
|
|
870
930
|
}
|
|
871
931
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
872
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: "required", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': required,\n 'sky-switch-disabled': disabled\n }\"\n>\n <input\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n labelText && ngControl?.errors ? errorId : undefined\n \"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n</label>\n<sky-form-errors\n *ngIf=\"labelText && ngControl?.errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
932
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: "required", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': required,\n 'sky-switch-disabled': disabled\n }\"\n>\n <input\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n labelText && ngControl?.errors ? errorId : undefined\n \"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n</label>\n<sky-form-errors\n *ngIf=\"labelText && ngControl?.errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
873
933
|
}
|
|
874
934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
875
935
|
type: Component,
|
|
876
|
-
args: [{ selector: 'sky-checkbox', providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': required,\n 'sky-switch-disabled': disabled\n }\"\n>\n <input\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n labelText && ngControl?.errors ? errorId : undefined\n \"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n</label>\n<sky-form-errors\n *ngIf=\"labelText && ngControl?.errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"] }]
|
|
936
|
+
args: [{ selector: 'sky-checkbox', providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': required,\n 'sky-switch-disabled': disabled\n }\"\n>\n <input\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n labelText && ngControl?.errors ? errorId : undefined\n \"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n</label>\n<sky-form-errors\n *ngIf=\"labelText && ngControl?.errors\"\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"] }]
|
|
877
937
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
878
938
|
type: Input
|
|
879
939
|
}], labelledBy: [{
|
|
@@ -920,15 +980,18 @@ class SkyCheckboxModule {
|
|
|
920
980
|
SkyCheckboxLabelComponent,
|
|
921
981
|
SkyCheckboxLabelTextLabelComponent], imports: [CommonModule,
|
|
922
982
|
FormsModule,
|
|
983
|
+
SkyCheckboxGroupComponent,
|
|
923
984
|
SkyFormErrorModule,
|
|
924
985
|
SkyFormErrorsModule,
|
|
925
986
|
SkyFormsResourcesModule,
|
|
926
987
|
SkyIconModule,
|
|
927
988
|
SkyTrimModule], exports: [SkyCheckboxComponent,
|
|
928
989
|
SkyCheckboxLabelComponent,
|
|
990
|
+
SkyCheckboxGroupComponent,
|
|
929
991
|
SkyFormErrorModule] }); }
|
|
930
992
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule,
|
|
931
993
|
FormsModule,
|
|
994
|
+
SkyCheckboxGroupComponent,
|
|
932
995
|
SkyFormErrorModule,
|
|
933
996
|
SkyFormErrorsModule,
|
|
934
997
|
SkyFormsResourcesModule,
|
|
@@ -946,6 +1009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
946
1009
|
imports: [
|
|
947
1010
|
CommonModule,
|
|
948
1011
|
FormsModule,
|
|
1012
|
+
SkyCheckboxGroupComponent,
|
|
949
1013
|
SkyFormErrorModule,
|
|
950
1014
|
SkyFormErrorsModule,
|
|
951
1015
|
SkyFormsResourcesModule,
|
|
@@ -955,6 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
955
1019
|
exports: [
|
|
956
1020
|
SkyCheckboxComponent,
|
|
957
1021
|
SkyCheckboxLabelComponent,
|
|
1022
|
+
SkyCheckboxGroupComponent,
|
|
958
1023
|
SkyFormErrorModule,
|
|
959
1024
|
],
|
|
960
1025
|
}]
|
|
@@ -1610,6 +1675,11 @@ class SkyFileDropComponent {
|
|
|
1610
1675
|
* Whether to display the option to attach files from URLs rather than from local devices.
|
|
1611
1676
|
*/
|
|
1612
1677
|
this.allowLinks = false;
|
|
1678
|
+
/**
|
|
1679
|
+
* Whether to hide `labelText` from view.
|
|
1680
|
+
* @preview
|
|
1681
|
+
*/
|
|
1682
|
+
this.labelHidden = false;
|
|
1613
1683
|
this.rejectedOver = false;
|
|
1614
1684
|
this.acceptedOver = false;
|
|
1615
1685
|
this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT;
|
|
@@ -1617,6 +1687,9 @@ class SkyFileDropComponent {
|
|
|
1617
1687
|
this.#fileAttachmentService = inject(SkyFileAttachmentService);
|
|
1618
1688
|
this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
|
|
1619
1689
|
this.#resourcesSvc = inject(SkyLibResourcesService);
|
|
1690
|
+
this.#idSvc = inject(SkyIdService);
|
|
1691
|
+
this.errorId = this.#idSvc.generateId();
|
|
1692
|
+
this.rejectedFiles = [];
|
|
1620
1693
|
}
|
|
1621
1694
|
/**
|
|
1622
1695
|
* The minimum size in bytes for valid files.
|
|
@@ -1644,6 +1717,7 @@ class SkyFileDropComponent {
|
|
|
1644
1717
|
#fileAttachmentService;
|
|
1645
1718
|
#liveAnnouncerSvc;
|
|
1646
1719
|
#resourcesSvc;
|
|
1720
|
+
#idSvc;
|
|
1647
1721
|
ngOnDestroy() {
|
|
1648
1722
|
this.filesChanged.complete();
|
|
1649
1723
|
this.linkChanged.complete();
|
|
@@ -1780,14 +1854,21 @@ class SkyFileDropComponent {
|
|
|
1780
1854
|
this.#loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
|
|
1781
1855
|
}
|
|
1782
1856
|
}
|
|
1857
|
+
this.rejectedFiles = rejectedFileArray;
|
|
1783
1858
|
}
|
|
1784
1859
|
}
|
|
1785
1860
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [
|
|
1862
|
+
SkyFileAttachmentService,
|
|
1863
|
+
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1864
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n <legend\n *ngIf=\"labelText\"\n class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n >\n {{ labelText }}\n </legend>\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n ></button>\n\n <input\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content />\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_link_label' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-margin-stacked-xs\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText.id\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </div>\n <div\n skyId\n #hintText=\"skyId\"\n class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n }}\n </div>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [showErrors]=\"rejectedFiles.length\"\n>\n <div *ngFor=\"let rejectedFile of rejectedFiles\">\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'fileType'\"\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n </div>\n</sky-form-errors>\n", styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1787
1865
|
}
|
|
1788
1866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileDropComponent, decorators: [{
|
|
1789
1867
|
type: Component,
|
|
1790
|
-
args: [{ selector: 'sky-file-drop', providers: [
|
|
1868
|
+
args: [{ selector: 'sky-file-drop', providers: [
|
|
1869
|
+
SkyFileAttachmentService,
|
|
1870
|
+
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1871
|
+
], template: "<fieldset>\n <legend\n *ngIf=\"labelText\"\n class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n >\n {{ labelText }}\n </legend>\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n ></button>\n\n <input\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content />\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_link_label' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-margin-stacked-xs\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText.id\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </div>\n <div\n skyId\n #hintText=\"skyId\"\n class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n }}\n </div>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [showErrors]=\"rejectedFiles.length\"\n>\n <div *ngFor=\"let rejectedFile of rejectedFiles\">\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'fileType'\"\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n </div>\n</sky-form-errors>\n", styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
|
|
1791
1872
|
}], propDecorators: { filesChanged: [{
|
|
1792
1873
|
type: Output
|
|
1793
1874
|
}], linkInputBlur: [{
|
|
@@ -1812,6 +1893,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
1812
1893
|
type: Input
|
|
1813
1894
|
}], allowLinks: [{
|
|
1814
1895
|
type: Input
|
|
1896
|
+
}], labelText: [{
|
|
1897
|
+
type: Input
|
|
1898
|
+
}], labelHidden: [{
|
|
1899
|
+
type: Input,
|
|
1900
|
+
args: [{ transform: booleanAttribute }]
|
|
1815
1901
|
}], inputEl: [{
|
|
1816
1902
|
type: ViewChild,
|
|
1817
1903
|
args: ['fileInput']
|
|
@@ -1835,21 +1921,21 @@ class SkyFileSizePipe {
|
|
|
1835
1921
|
if (Math.abs(input) === 1) {
|
|
1836
1922
|
template = 'skyux_file_attachment_file_size_b_singular';
|
|
1837
1923
|
}
|
|
1838
|
-
else if (input <
|
|
1924
|
+
else if (input < 1024) {
|
|
1839
1925
|
template = 'skyux_file_attachment_file_size_b_plural';
|
|
1840
1926
|
}
|
|
1841
|
-
else if (input <
|
|
1927
|
+
else if (input < Math.pow(1024, 2)) {
|
|
1842
1928
|
template = 'skyux_file_attachment_file_size_kb';
|
|
1843
|
-
dividend =
|
|
1929
|
+
dividend = 1024;
|
|
1844
1930
|
}
|
|
1845
|
-
else if (input <
|
|
1931
|
+
else if (input < Math.pow(1024, 3)) {
|
|
1846
1932
|
template = 'skyux_file_attachment_file_size_mb';
|
|
1847
|
-
dividend =
|
|
1933
|
+
dividend = Math.pow(1024, 2);
|
|
1848
1934
|
decimalPlaces = 1;
|
|
1849
1935
|
}
|
|
1850
1936
|
else {
|
|
1851
1937
|
template = 'skyux_file_attachment_file_size_gb';
|
|
1852
|
-
dividend =
|
|
1938
|
+
dividend = Math.pow(1024, 3);
|
|
1853
1939
|
decimalPlaces = 1;
|
|
1854
1940
|
}
|
|
1855
1941
|
const roundedSize = Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
|
|
@@ -2034,7 +2120,8 @@ class SkyFileAttachmentsModule {
|
|
|
2034
2120
|
SkyFileAttachmentLabelComponent,
|
|
2035
2121
|
SkyFileDropComponent,
|
|
2036
2122
|
SkyFileItemComponent,
|
|
2037
|
-
SkyFileSizePipe
|
|
2123
|
+
SkyFileSizePipe,
|
|
2124
|
+
SkyFormErrorModule] }); }
|
|
2038
2125
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileAttachmentsModule, providers: [DecimalPipe, SkyFileItemService], imports: [CommonModule,
|
|
2039
2126
|
FormsModule,
|
|
2040
2127
|
SkyFormsResourcesModule,
|
|
@@ -2043,7 +2130,7 @@ class SkyFileAttachmentsModule {
|
|
|
2043
2130
|
SkyIconModule,
|
|
2044
2131
|
SkyIdModule,
|
|
2045
2132
|
SkyThemeModule,
|
|
2046
|
-
SkyTrimModule] }); }
|
|
2133
|
+
SkyTrimModule, SkyFormErrorModule] }); }
|
|
2047
2134
|
}
|
|
2048
2135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
|
|
2049
2136
|
type: NgModule,
|
|
@@ -2072,6 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
2072
2159
|
SkyFileDropComponent,
|
|
2073
2160
|
SkyFileItemComponent,
|
|
2074
2161
|
SkyFileSizePipe,
|
|
2162
|
+
SkyFormErrorModule,
|
|
2075
2163
|
],
|
|
2076
2164
|
providers: [DecimalPipe, SkyFileItemService],
|
|
2077
2165
|
}]
|
|
@@ -2651,6 +2739,46 @@ class SkyRadioComponent {
|
|
|
2651
2739
|
}
|
|
2652
2740
|
this.#radioGroupIdSvc?.register(this.#defaultId, this.inputId);
|
|
2653
2741
|
}
|
|
2742
|
+
/**
|
|
2743
|
+
* The ARIA label for the radio button. This sets the radio button's `aria-label`
|
|
2744
|
+
* attribute to provide a text equivalent for screen readers [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
|
|
2745
|
+
* when the radio button does not include a visible label. You must set this property for icon
|
|
2746
|
+
* radio buttons. If the radio button includes a visible label, use `labelledBy` instead.
|
|
2747
|
+
* For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).
|
|
2748
|
+
* @deprecated Use `labelText` instead.
|
|
2749
|
+
*/
|
|
2750
|
+
set label(value) {
|
|
2751
|
+
this.#_label = value;
|
|
2752
|
+
if (value) {
|
|
2753
|
+
this.#logger.deprecated('SkyRadioComponent.label', {
|
|
2754
|
+
deprecationMajorVersion: 10,
|
|
2755
|
+
replacementRecommendation: 'Use the `labelText` input instead.',
|
|
2756
|
+
});
|
|
2757
|
+
}
|
|
2758
|
+
}
|
|
2759
|
+
get label() {
|
|
2760
|
+
return this.#_label;
|
|
2761
|
+
}
|
|
2762
|
+
/**
|
|
2763
|
+
* The HTML element ID of the element that labels
|
|
2764
|
+
* the radio button. This sets the radio button's `aria-labelledby` attribute to provide a text equivalent for screen readers
|
|
2765
|
+
* [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
2766
|
+
* If the radio button does not include a visible label, use `label` instead.
|
|
2767
|
+
* For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby).
|
|
2768
|
+
* @deprecated Use `labelText` instead.
|
|
2769
|
+
*/
|
|
2770
|
+
set labelledBy(value) {
|
|
2771
|
+
this.#_labelledBy = value;
|
|
2772
|
+
if (value) {
|
|
2773
|
+
this.#logger.deprecated('SkyRadioComponent.labelledBy', {
|
|
2774
|
+
deprecationMajorVersion: 10,
|
|
2775
|
+
replacementRecommendation: 'Use the `labelText` input instead.',
|
|
2776
|
+
});
|
|
2777
|
+
}
|
|
2778
|
+
}
|
|
2779
|
+
get labelledBy() {
|
|
2780
|
+
return this.#_labelledBy;
|
|
2781
|
+
}
|
|
2654
2782
|
/**
|
|
2655
2783
|
* This property is deprecated in favor of the `name` property on the `sky-radio-group element`.
|
|
2656
2784
|
* We recommend using the `sky-radio-group` element with all radio buttons, but if you opt not to,
|
|
@@ -2749,6 +2877,8 @@ class SkyRadioComponent {
|
|
|
2749
2877
|
#_selectedValue;
|
|
2750
2878
|
#_tabindex;
|
|
2751
2879
|
#_value;
|
|
2880
|
+
#_label;
|
|
2881
|
+
#_labelledBy;
|
|
2752
2882
|
#changeDetector;
|
|
2753
2883
|
#defaultId;
|
|
2754
2884
|
#radioGroupIdSvc;
|
|
@@ -2758,6 +2888,11 @@ class SkyRadioComponent {
|
|
|
2758
2888
|
* Fires when users focus off a radio button.
|
|
2759
2889
|
*/
|
|
2760
2890
|
this.blur = new Subject();
|
|
2891
|
+
/**
|
|
2892
|
+
* Indicates whether to hide the `labelText`.
|
|
2893
|
+
* @preview
|
|
2894
|
+
*/
|
|
2895
|
+
this.labelHidden = false;
|
|
2761
2896
|
/**
|
|
2762
2897
|
* Fires when users select a radio button.
|
|
2763
2898
|
*/
|
|
@@ -2842,11 +2977,11 @@ class SkyRadioComponent {
|
|
|
2842
2977
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2843
2978
|
#onTouchedCallback;
|
|
2844
2979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2845
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n>\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-container *ngIf=\"labelText; else labelElement\">\n <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-radio-label\" />\n </ng-template>\n</label>\n", styles: [":host{display:inline-block}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2846
2981
|
}
|
|
2847
2982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyRadioComponent, decorators: [{
|
|
2848
2983
|
type: Component,
|
|
2849
|
-
args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n>\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-content select=\"sky-radio-label\" />\n</label>\n", styles: [":host{display:inline-block}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"] }]
|
|
2984
|
+
args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n>\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-container *ngIf=\"labelText; else labelElement\">\n <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-radio-label\" />\n </ng-template>\n</label>\n", styles: [":host{display:inline-block}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"] }]
|
|
2850
2985
|
}], ctorParameters: () => [], propDecorators: { checked: [{
|
|
2851
2986
|
type: Input
|
|
2852
2987
|
}], disabled: [{
|
|
@@ -2867,6 +3002,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
2867
3002
|
type: Input
|
|
2868
3003
|
}], radioType: [{
|
|
2869
3004
|
type: Input
|
|
3005
|
+
}], labelText: [{
|
|
3006
|
+
type: Input
|
|
3007
|
+
}], labelHidden: [{
|
|
3008
|
+
type: Input,
|
|
3009
|
+
args: [{ transform: booleanAttribute }]
|
|
2870
3010
|
}], change: [{
|
|
2871
3011
|
type: Output
|
|
2872
3012
|
}], checkedChange: [{
|
|
@@ -3192,6 +3332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
3192
3332
|
* Specifies a label for the radio button. To display a help button beside the label, include a help button element,
|
|
3193
3333
|
* such as `sky-help-inline`, in the `sky-radio-label` element and a `sky-control-help` CSS class on that help button
|
|
3194
3334
|
* element.
|
|
3335
|
+
* @deprecated Use `labelText` input on `sky-radio-component` instead.
|
|
3195
3336
|
*/
|
|
3196
3337
|
class SkyRadioLabelComponent {
|
|
3197
3338
|
// When clicking on a checkbox label, Angular registers two click events.
|
|
@@ -3200,13 +3341,19 @@ class SkyRadioLabelComponent {
|
|
|
3200
3341
|
onClick(event) {
|
|
3201
3342
|
event.stopPropagation();
|
|
3202
3343
|
}
|
|
3344
|
+
constructor() {
|
|
3345
|
+
inject(SkyLogService).deprecated('SkyToggleSwitchLabelComponent', {
|
|
3346
|
+
deprecationMajorVersion: 10,
|
|
3347
|
+
replacementRecommendation: 'To add a label to radio button, use the `labelText` input on the radio button component instead.',
|
|
3348
|
+
});
|
|
3349
|
+
}
|
|
3203
3350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3204
3351
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }] }); }
|
|
3205
3352
|
}
|
|
3206
3353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
|
|
3207
3354
|
type: Component,
|
|
3208
3355
|
args: [{ selector: 'sky-radio-label', template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n" }]
|
|
3209
|
-
}], propDecorators: { onClick: [{
|
|
3356
|
+
}], ctorParameters: () => [], propDecorators: { onClick: [{
|
|
3210
3357
|
type: HostListener,
|
|
3211
3358
|
args: ['click', ['$event']]
|
|
3212
3359
|
}] } });
|
|
@@ -3928,5 +4075,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
3928
4075
|
* Generated bundle index. Do not edit.
|
|
3929
4076
|
*/
|
|
3930
4077
|
|
|
3931
|
-
export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFileAttachmentsModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchLabelComponent as λ18, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentLabelComponent as λ6, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
|
|
4078
|
+
export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFileAttachmentsModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchLabelComponent as λ18, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentLabelComponent as λ6, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
|
|
3932
4079
|
//# sourceMappingURL=skyux-forms.mjs.map
|