@skyux/forms 13.4.0 → 13.4.1
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/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -2015,7 +2015,7 @@ class SkyFileAttachmentComponent {
|
|
|
2015
2015
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyFileAttachmentComponent, isStandalone: true, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", disabled: ["disabled", "disabled", booleanAttribute], 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", "required", booleanAttribute] }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
2016
2016
|
SkyFileAttachmentService,
|
|
2017
2017
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2018
|
-
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </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 #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n (cancel)=\"onFileCancel()\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon iconName=\"folder-open\" />\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 }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon\n class=\"sky-file-attachment-icon\"\n iconName=\"document\"\n iconSize=\"xl\"\n />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n class=\"sky-btn sky-btn-link-inline\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\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 }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\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</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-border: 1px solid transparent;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:0}.sky-file-attachment-delete{width:auto;height:auto;margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-default));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2018
|
+
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </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 #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n (cancel)=\"onFileCancel()\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon iconName=\"folder-open\" />\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 }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon\n class=\"sky-file-attachment-icon\"\n iconName=\"document\"\n iconSize=\"xl\"\n />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n class=\"sky-btn sky-btn-link-inline\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\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 }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\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</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-border: 1px solid transparent;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-touched) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:0}.sky-file-attachment-delete{width:auto;height:auto;margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-default));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2019
2019
|
}
|
|
2020
2020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
2021
2021
|
type: Component,
|
|
@@ -2034,7 +2034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
2034
2034
|
], providers: [
|
|
2035
2035
|
SkyFileAttachmentService,
|
|
2036
2036
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2037
|
-
], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </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 #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n (cancel)=\"onFileCancel()\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon iconName=\"folder-open\" />\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 }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon\n class=\"sky-file-attachment-icon\"\n iconName=\"document\"\n iconSize=\"xl\"\n />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n class=\"sky-btn sky-btn-link-inline\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\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 }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\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</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-border: 1px solid transparent;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-input-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:0}.sky-file-attachment-delete{width:auto;height:auto;margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-default));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"] }]
|
|
2037
|
+
], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </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 #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n (cancel)=\"onFileCancel()\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon iconName=\"folder-open\" />\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 }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon\n class=\"sky-file-attachment-icon\"\n iconName=\"document\"\n iconSize=\"xl\"\n />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n class=\"sky-btn sky-btn-link-inline\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\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 }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\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</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-border: 1px solid transparent;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-touched) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:0}.sky-file-attachment-delete{width:auto;height:auto;margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-default));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"] }]
|
|
2038
2038
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$1.NgControl, decorators: [{
|
|
2039
2039
|
type: Self
|
|
2040
2040
|
}, {
|