@skyux/forms 10.5.0 → 10.6.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 +2140 -2091
- package/esm2022/lib/modules/checkbox/checkbox-group.component.mjs +13 -3
- package/esm2022/lib/modules/file-attachment/file-attachment.component.mjs +3 -3
- package/esm2022/lib/modules/shared/sky-forms-resources.module.mjs +3 -1
- package/fesm2022/skyux-forms.mjs +14 -4
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/lib/modules/checkbox/checkbox-group.component.d.ts +7 -1
- package/package.json +7 -7
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -31,6 +31,7 @@ const RESOURCES = {
|
|
|
31
31
|
skyux_character_count_over_limit: {
|
|
32
32
|
message: 'You are over the character limit.',
|
|
33
33
|
},
|
|
34
|
+
skyux_checkbox_group_required: { message: 'Required' },
|
|
34
35
|
skyux_form_error_character_count: {
|
|
35
36
|
message: 'Limit {0} to {1} character(s).',
|
|
36
37
|
},
|
|
@@ -118,6 +119,7 @@ const RESOURCES = {
|
|
|
118
119
|
message: '{0}: Please upload a file over {1}KB.',
|
|
119
120
|
},
|
|
120
121
|
skyux_file_attachment_label_no_file_chosen: { message: 'No file chosen.' },
|
|
122
|
+
skyux_file_attachment_required: { message: 'Required' },
|
|
121
123
|
skyux_input_box_help_inline_aria_label: {
|
|
122
124
|
message: 'Show help content for {0}',
|
|
123
125
|
},
|
|
@@ -498,6 +500,11 @@ class SkyCheckboxGroupComponent {
|
|
|
498
500
|
* @preview
|
|
499
501
|
*/
|
|
500
502
|
this.labelHidden = false;
|
|
503
|
+
/**
|
|
504
|
+
* Whether the checkbox group is required.
|
|
505
|
+
* @preview
|
|
506
|
+
*/
|
|
507
|
+
this.required = false;
|
|
501
508
|
this.#_stacked = false;
|
|
502
509
|
this.#idSvc = inject(SkyIdService);
|
|
503
510
|
this.errorId = this.#idSvc.generateId();
|
|
@@ -517,17 +524,20 @@ class SkyCheckboxGroupComponent {
|
|
|
517
524
|
#_stacked;
|
|
518
525
|
#idSvc;
|
|
519
526
|
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]=\"{
|
|
527
|
+
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], required: ["required", "required", 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]=\"{\n 'sky-screen-reader-only': labelHidden,\n 'sky-control-label-required': required\n }\"\n >\n {{ labelText\n }}<span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_checkbox_group_required' | skyLibResources\n }}</span>\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"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
521
528
|
}
|
|
522
529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
|
|
523
530
|
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]=\"{
|
|
531
|
+
args: [{ selector: 'sky-checkbox-group', standalone: true, imports: [CommonModule, SkyFormErrorsModule, SkyFormsResourcesModule], 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]=\"{\n 'sky-screen-reader-only': labelHidden,\n 'sky-control-label-required': required\n }\"\n >\n {{ labelText\n }}<span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_checkbox_group_required' | skyLibResources\n }}</span>\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
532
|
}], propDecorators: { labelText: [{
|
|
526
533
|
type: Input,
|
|
527
534
|
args: [{ required: true }]
|
|
528
535
|
}], labelHidden: [{
|
|
529
536
|
type: Input,
|
|
530
537
|
args: [{ transform: booleanAttribute }]
|
|
538
|
+
}], required: [{
|
|
539
|
+
type: Input,
|
|
540
|
+
args: [{ transform: booleanAttribute }]
|
|
531
541
|
}], stacked: [{
|
|
532
542
|
type: Input,
|
|
533
543
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1637,14 +1647,14 @@ class SkyFileAttachmentComponent {
|
|
|
1637
1647
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], maxFileSize: "maxFileSize", minFileSize: "minFileSize", validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, providers: [
|
|
1638
1648
|
SkyFileAttachmentService,
|
|
1639
1649
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1640
|
-
], 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': required && (hasLabelComponent || labelText)\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span *ngIf=\"!labelHidden\" class=\"sky-control-label\">{{\n labelText\n }}</span>\n </ng-container>\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-file-attachment-drop-description\"\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]=\"fileDropDescriptionElementId\"\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\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: [".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-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1650
|
+
], 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': required && (hasLabelComponent || labelText)\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span *ngIf=\"!labelHidden\" class=\"sky-control-label\">{{\n labelText\n }}</span>\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-file-attachment-drop-description\"\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]=\"fileDropDescriptionElementId\"\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\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: [".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-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1641
1651
|
}
|
|
1642
1652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
1643
1653
|
type: Component,
|
|
1644
1654
|
args: [{ selector: 'sky-file-attachment', providers: [
|
|
1645
1655
|
SkyFileAttachmentService,
|
|
1646
1656
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1647
|
-
], 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': required && (hasLabelComponent || labelText)\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span *ngIf=\"!labelHidden\" class=\"sky-control-label\">{{\n labelText\n }}</span>\n </ng-container>\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-file-attachment-drop-description\"\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]=\"fileDropDescriptionElementId\"\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\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: [".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-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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"] }]
|
|
1657
|
+
], 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': required && (hasLabelComponent || labelText)\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span *ngIf=\"!labelHidden\" class=\"sky-control-label\">{{\n labelText\n }}</span>\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-file-attachment-drop-description\"\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]=\"fileDropDescriptionElementId\"\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\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: [".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-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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"] }]
|
|
1648
1658
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$1.NgControl, decorators: [{
|
|
1649
1659
|
type: Self
|
|
1650
1660
|
}, {
|