@skyux/forms 10.13.0 → 10.15.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 +1739 -1517
- package/esm2022/lib/modules/checkbox/checkbox.component.mjs +45 -44
- package/esm2022/lib/modules/file-attachment/file-attachment.component.mjs +6 -4
- package/esm2022/lib/modules/form-error/form-errors.component.mjs +3 -3
- package/esm2022/lib/modules/shared/sky-forms-resources.module.mjs +7 -1
- package/esm2022/testing/input-box/input-box-harness.mjs +15 -3
- package/fesm2022/skyux-forms-testing.mjs +14 -2
- package/fesm2022/skyux-forms-testing.mjs.map +1 -1
- package/fesm2022/skyux-forms.mjs +57 -48
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/lib/modules/checkbox/checkbox.component.d.ts +7 -5
- package/lib/modules/file-attachment/file-attachment.component.d.ts +7 -1
- package/package.json +8 -8
- package/testing/input-box/input-box-harness.d.ts +9 -1
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { CommonModule, DecimalPipe } from '@angular/common';
|
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, booleanAttribute, Injectable, EventEmitter, ChangeDetectorRef, ElementRef, Output, ViewChild, numberAttribute, Self, Optional, ContentChildren, TemplateRef, RendererFactory2, Renderer2, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
|
|
5
5
|
import * as i2$2 from '@angular/forms';
|
|
6
|
-
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule,
|
|
6
|
+
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormControlDirective, FormControlName, NgModel, NgControl } from '@angular/forms';
|
|
7
7
|
import * as i2 from '@skyux/i18n';
|
|
8
8
|
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
9
9
|
import * as i1$1 from '@skyux/core';
|
|
@@ -38,6 +38,12 @@ const RESOURCES = {
|
|
|
38
38
|
message: 'Limit {0} to {1} character(s).',
|
|
39
39
|
},
|
|
40
40
|
skyux_form_error_date: { message: 'Select or enter a valid date.' },
|
|
41
|
+
skyux_form_error_date_max: {
|
|
42
|
+
message: 'Select or enter a date before max date.',
|
|
43
|
+
},
|
|
44
|
+
skyux_form_error_date_min: {
|
|
45
|
+
message: 'Select or enter a date after min date.',
|
|
46
|
+
},
|
|
41
47
|
skyux_form_error_email: {
|
|
42
48
|
message: 'Enter an email address with a valid format.',
|
|
43
49
|
},
|
|
@@ -448,7 +454,7 @@ class SkyFormErrorsComponent {
|
|
|
448
454
|
this.ariaRelevant = 'all';
|
|
449
455
|
}
|
|
450
456
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
451
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", 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=\"
|
|
457
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", 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'] && errors['skyDate']['invalid']\"\n errorName=\"invalidDate\"\n [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyDate'] && errors['skyDate']['minDate']\"\n errorName=\"minDate\"\n [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyDate'] && errors['skyDate']['maxDate']\"\n errorName=\"maxDate\"\n [errorText]=\"'skyux_form_error_date_max' | 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 }); }
|
|
452
458
|
}
|
|
453
459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
|
|
454
460
|
type: Component,
|
|
@@ -457,7 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
457
463
|
SkyIdModule,
|
|
458
464
|
SkyFormErrorComponent,
|
|
459
465
|
SkyFormsResourcesModule,
|
|
460
|
-
], 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=\"
|
|
466
|
+
], 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'] && errors['skyDate']['invalid']\"\n errorName=\"invalidDate\"\n [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyDate'] && errors['skyDate']['minDate']\"\n errorName=\"minDate\"\n [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n />\n\n <sky-form-error\n *ngIf=\"errors['skyDate'] && errors['skyDate']['maxDate']\"\n errorName=\"maxDate\"\n [errorText]=\"'skyux_form_error_date_max' | 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"] }]
|
|
461
467
|
}], propDecorators: { errors: [{
|
|
462
468
|
type: Input
|
|
463
469
|
}], labelText: [{
|
|
@@ -753,20 +759,6 @@ class SkyCheckboxComponent {
|
|
|
753
759
|
get indeterminate() {
|
|
754
760
|
return this.#_indeterminate;
|
|
755
761
|
}
|
|
756
|
-
/**
|
|
757
|
-
* Whether the input is required for form validation.
|
|
758
|
-
* When you set this property to `true`, the component adds `aria-required` and `required`
|
|
759
|
-
* attributes to the input element so that forms display an invalid state until the input element
|
|
760
|
-
* is complete.
|
|
761
|
-
* @default false
|
|
762
|
-
*/
|
|
763
|
-
set required(value) {
|
|
764
|
-
this.#_required = SkyFormsUtility.coerceBooleanProperty(value);
|
|
765
|
-
this.#setValidators();
|
|
766
|
-
}
|
|
767
|
-
get required() {
|
|
768
|
-
return this.#_required;
|
|
769
|
-
}
|
|
770
762
|
/**
|
|
771
763
|
* Fires when users select or deselect the checkbox.
|
|
772
764
|
*/
|
|
@@ -795,6 +787,11 @@ class SkyCheckboxComponent {
|
|
|
795
787
|
get inputEl() {
|
|
796
788
|
return this.#_inputEl;
|
|
797
789
|
}
|
|
790
|
+
get isCheckboxRequired() {
|
|
791
|
+
return !!(this.required ||
|
|
792
|
+
this.control?.hasValidator(Validators.requiredTrue) ||
|
|
793
|
+
this.control?.hasValidator(Validators.required));
|
|
794
|
+
}
|
|
798
795
|
#checkedChange;
|
|
799
796
|
#checkedChangeObs;
|
|
800
797
|
#disabledChange;
|
|
@@ -807,7 +804,6 @@ class SkyCheckboxComponent {
|
|
|
807
804
|
#_indeterminate;
|
|
808
805
|
#_inputEl;
|
|
809
806
|
#_name;
|
|
810
|
-
#_required;
|
|
811
807
|
#_label;
|
|
812
808
|
#_labelledBy;
|
|
813
809
|
#changeDetector;
|
|
@@ -825,6 +821,14 @@ class SkyCheckboxComponent {
|
|
|
825
821
|
* Fires when the selected value changes.
|
|
826
822
|
*/
|
|
827
823
|
this.change = new EventEmitter();
|
|
824
|
+
/**
|
|
825
|
+
* Whether the input is required for form validation.
|
|
826
|
+
* When you set this property to `true`, the component adds `aria-required` and `required`
|
|
827
|
+
* attributes to the input element so that forms display an invalid state until the input element
|
|
828
|
+
* is complete.
|
|
829
|
+
* @default false
|
|
830
|
+
*/
|
|
831
|
+
this.required = false;
|
|
828
832
|
/**
|
|
829
833
|
* Indicates whether to hide the `labelText`.
|
|
830
834
|
* @preview
|
|
@@ -843,15 +847,10 @@ class SkyCheckboxComponent {
|
|
|
843
847
|
this.#_disabled = false;
|
|
844
848
|
this.#_indeterminate = false;
|
|
845
849
|
this.#_name = '';
|
|
846
|
-
this.#_required = false;
|
|
847
850
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
848
851
|
this.#idSvc = inject(SkyIdService);
|
|
849
852
|
this.#defaultId = this.#idSvc.generateId();
|
|
850
853
|
this.#logger = inject(SkyLogService);
|
|
851
|
-
this.ngControl = inject(NgControl, {
|
|
852
|
-
optional: true,
|
|
853
|
-
self: true,
|
|
854
|
-
});
|
|
855
854
|
this.#labelTextRequired = inject(SkyFormFieldLabelTextRequiredService, {
|
|
856
855
|
optional: true,
|
|
857
856
|
});
|
|
@@ -862,9 +861,6 @@ class SkyCheckboxComponent {
|
|
|
862
861
|
this.onTouched = () => { };
|
|
863
862
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
864
863
|
this.#controlValueAccessorChangeFn = (value) => { };
|
|
865
|
-
if (this.ngControl) {
|
|
866
|
-
this.ngControl.valueAccessor = this;
|
|
867
|
-
}
|
|
868
864
|
this.#checkedChange = new BehaviorSubject(this.checked);
|
|
869
865
|
this.#disabledChange = new BehaviorSubject(this.disabled);
|
|
870
866
|
this.#indeterminateChange = new BehaviorSubject(this.disabled);
|
|
@@ -875,15 +871,21 @@ class SkyCheckboxComponent {
|
|
|
875
871
|
this.name = this.#defaultId;
|
|
876
872
|
}
|
|
877
873
|
ngOnInit() {
|
|
878
|
-
if (this.ngControl) {
|
|
879
|
-
this.required =
|
|
880
|
-
this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);
|
|
881
|
-
}
|
|
882
874
|
if (this.#labelTextRequired && !this.labelText) {
|
|
883
875
|
this.display = 'none';
|
|
884
876
|
}
|
|
885
877
|
this.#labelTextRequired?.validateLabelText(this.labelText);
|
|
886
878
|
}
|
|
879
|
+
validate(control) {
|
|
880
|
+
this.control ||= control;
|
|
881
|
+
// In template-driven forms, Angular's native 'required' attribute directive only works
|
|
882
|
+
// on `input[type="checkbox"]` selectors, so we need to write the validation logic ourselves.
|
|
883
|
+
// Also, we're treating Validators.required the same as Validators.requiredTrue internally, so
|
|
884
|
+
// we need to account for that decision in our custom validator.
|
|
885
|
+
return this.isCheckboxRequired && control.value !== true
|
|
886
|
+
? { required: true }
|
|
887
|
+
: null;
|
|
888
|
+
}
|
|
887
889
|
/**
|
|
888
890
|
* Implemented as part of ControlValueAccessor.
|
|
889
891
|
*/
|
|
@@ -938,24 +940,28 @@ class SkyCheckboxComponent {
|
|
|
938
940
|
#toggle() {
|
|
939
941
|
this.checked = !this.checked;
|
|
940
942
|
}
|
|
941
|
-
#setValidators() {
|
|
942
|
-
if (this.required &&
|
|
943
|
-
!this.ngControl?.control?.hasValidator(Validators.requiredTrue)) {
|
|
944
|
-
this.ngControl?.control?.addValidators(Validators.requiredTrue);
|
|
945
|
-
this.ngControl?.control?.updateValueAndValidity();
|
|
946
|
-
}
|
|
947
|
-
else if (!this.required &&
|
|
948
|
-
this.ngControl?.control?.hasValidator(Validators.requiredTrue)) {
|
|
949
|
-
this.ngControl.control.removeValidators(Validators.requiredTrue);
|
|
950
|
-
this.ngControl.control?.updateValueAndValidity();
|
|
951
|
-
}
|
|
952
|
-
}
|
|
953
943
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: "required", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
|
|
944
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: ["required", "required", booleanAttribute], labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
|
|
945
|
+
{ provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
|
|
946
|
+
{
|
|
947
|
+
provide: NG_VALUE_ACCESSOR,
|
|
948
|
+
useExisting: SkyCheckboxComponent,
|
|
949
|
+
multi: true,
|
|
950
|
+
},
|
|
951
|
+
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
952
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span class=\"sky-checkbox-outer-wrapper\">\n <label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': isCheckboxRequired,\n 'sky-switch-disabled': disabled,\n 'sky-margin-inline-xs': labelText && !icon\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]=\"isCheckboxRequired\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n [attr.aria-invalid]=\"!!control?.errors\"\n [attr.aria-errormessage]=\"\n labelText && control?.errors ? errorId : undefined\n \"\n [ngClass]=\"{\n 'sky-switch-invalid':\n (control?.touched || control?.dirty) && control?.errors\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-help-inline\n *ngIf=\"helpPopoverContent && labelText\"\n class=\"sky-checkbox-help-inline\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n >\n {{ hintText }}\n </div>\n</span>\n<sky-form-errors\n class=\"sky-checkbox-form-margin\"\n *ngIf=\"labelText && control?.errors\"\n [id]=\"errorId\"\n [errors]=\"control?.errors\"\n [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n [showErrors]=\"control?.touched || control?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-outer-wrapper{display:inline-flex}:host.sky-margin-stacked-lg{display:block}.sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin{margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}: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: i2$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { 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: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
955
953
|
}
|
|
956
954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
957
955
|
type: Component,
|
|
958
|
-
args: [{ selector: 'sky-checkbox', providers: [
|
|
956
|
+
args: [{ selector: 'sky-checkbox', providers: [
|
|
957
|
+
{ provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
|
|
958
|
+
{
|
|
959
|
+
provide: NG_VALUE_ACCESSOR,
|
|
960
|
+
useExisting: SkyCheckboxComponent,
|
|
961
|
+
multi: true,
|
|
962
|
+
},
|
|
963
|
+
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
964
|
+
], template: "<span class=\"sky-checkbox-outer-wrapper\">\n <label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': isCheckboxRequired,\n 'sky-switch-disabled': disabled,\n 'sky-margin-inline-xs': labelText && !icon\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]=\"isCheckboxRequired\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n [attr.aria-invalid]=\"!!control?.errors\"\n [attr.aria-errormessage]=\"\n labelText && control?.errors ? errorId : undefined\n \"\n [ngClass]=\"{\n 'sky-switch-invalid':\n (control?.touched || control?.dirty) && control?.errors\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-help-inline\n *ngIf=\"helpPopoverContent && labelText\"\n class=\"sky-checkbox-help-inline\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n >\n {{ hintText }}\n </div>\n</span>\n<sky-form-errors\n class=\"sky-checkbox-form-margin\"\n *ngIf=\"labelText && control?.errors\"\n [id]=\"errorId\"\n [errors]=\"control?.errors\"\n [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n [showErrors]=\"control?.touched || control?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-outer-wrapper{display:inline-flex}:host.sky-margin-stacked-lg{display:block}.sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin{margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}: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"] }]
|
|
959
965
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
960
966
|
type: Input
|
|
961
967
|
}], labelledBy: [{
|
|
@@ -983,7 +989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
983
989
|
}], indeterminate: [{
|
|
984
990
|
type: Input
|
|
985
991
|
}], required: [{
|
|
986
|
-
type: Input
|
|
992
|
+
type: Input,
|
|
993
|
+
args: [{ transform: booleanAttribute }]
|
|
987
994
|
}], labelText: [{
|
|
988
995
|
type: Input
|
|
989
996
|
}], labelHidden: [{
|
|
@@ -1722,17 +1729,17 @@ class SkyFileAttachmentComponent {
|
|
|
1722
1729
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1723
1730
|
#onTouched;
|
|
1724
1731
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i2$2.NgControl, optional: true, self: true }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
|
|
1732
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
|
|
1726
1733
|
SkyFileAttachmentService,
|
|
1727
1734
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1728
|
-
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.id]=\"labelElementId\"\n [ngClass]=\"{\n 'sky-control-label-required': !labelText && required && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"required && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n [attr.id]=\"fileDropDescriptionElementId\"\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n skyId\n [attr.aria-describedby]=\"\n (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n \"\n [attr.aria-label]=\"\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n \"\n [attr.aria-labelledby]=\"\n attachButton.id +\n ' ' +\n (labelText\n ? labelElementId\n : hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n #attachButton=\"skyId\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFile>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n skyId\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n \"\n [attr.aria-labelledby]=\"\n deleteButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n #deleteButton=\"skyId\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n [id]=\"errorId\"\n [errors]=\"\n ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n \"\n [labelText]=\"labelText\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\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: 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: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i2$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1735
|
+
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.id]=\"labelElementId\"\n [ngClass]=\"{\n 'sky-control-label-required': !labelText && required && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"required && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n [attr.id]=\"fileDropDescriptionElementId\"\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n skyId\n [attr.aria-describedby]=\"\n (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n \"\n [attr.aria-label]=\"\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n \"\n [attr.aria-labelledby]=\"\n attachButton.id +\n ' ' +\n (labelText\n ? labelElementId\n : hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n #attachButton=\"skyId\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFile>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n skyId\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n \"\n [attr.aria-labelledby]=\"\n deleteButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n #deleteButton=\"skyId\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n [id]=\"errorId\"\n [errors]=\"\n ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n \"\n [labelText]=\"labelText\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\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: 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: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: i2$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "labelText", "popoverContent", "popoverTitle", "helpKey"], outputs: ["actionClick"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1729
1736
|
}
|
|
1730
1737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
1731
1738
|
type: Component,
|
|
1732
1739
|
args: [{ selector: 'sky-file-attachment', providers: [
|
|
1733
1740
|
SkyFileAttachmentService,
|
|
1734
1741
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1735
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.id]=\"labelElementId\"\n [ngClass]=\"{\n 'sky-control-label-required': !labelText && required && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"required && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n [attr.id]=\"fileDropDescriptionElementId\"\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n skyId\n [attr.aria-describedby]=\"\n (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n \"\n [attr.aria-label]=\"\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n \"\n [attr.aria-labelledby]=\"\n attachButton.id +\n ' ' +\n (labelText\n ? labelElementId\n : hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n #attachButton=\"skyId\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFile>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n skyId\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n \"\n [attr.aria-labelledby]=\"\n deleteButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n #deleteButton=\"skyId\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n [id]=\"errorId\"\n [errors]=\"\n ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n \"\n [labelText]=\"labelText\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"] }]
|
|
1742
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.id]=\"labelElementId\"\n [ngClass]=\"{\n 'sky-control-label-required': !labelText && required && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"required && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n [attr.id]=\"fileDropDescriptionElementId\"\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n skyId\n [attr.aria-describedby]=\"\n (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n \"\n [attr.aria-label]=\"\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n \"\n [attr.aria-labelledby]=\"\n attachButton.id +\n ' ' +\n (labelText\n ? labelElementId\n : hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n #attachButton=\"skyId\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFile>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n skyId\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n \"\n [attr.aria-labelledby]=\"\n deleteButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n #deleteButton=\"skyId\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n [id]=\"errorId\"\n [errors]=\"\n ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n \"\n [labelText]=\"labelText\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"] }]
|
|
1736
1743
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$2.NgControl, decorators: [{
|
|
1737
1744
|
type: Self
|
|
1738
1745
|
}, {
|
|
@@ -1747,6 +1754,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1747
1754
|
type: Input
|
|
1748
1755
|
}], helpPopoverTitle: [{
|
|
1749
1756
|
type: Input
|
|
1757
|
+
}], helpKey: [{
|
|
1758
|
+
type: Input
|
|
1750
1759
|
}], labelText: [{
|
|
1751
1760
|
type: Input
|
|
1752
1761
|
}], labelHidden: [{
|