@skyux/forms 13.0.0-alpha.4 → 13.0.0-alpha.5
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
|
@@ -1133,7 +1133,7 @@ class SkyCheckboxComponent {
|
|
|
1133
1133
|
multi: true,
|
|
1134
1134
|
},
|
|
1135
1135
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1136
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], 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 }\"\n >\n <input\n #inputEl\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 />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': iconName,\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 @if (iconName) {\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n } @else {\n @if (indeterminate) {\n <sky-icon\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n iconName=\"square\"\n variant=\"solid\"\n iconSize=\"s\"\n />\n } @else if (checked) {\n <sky-icon\n class=\"sky-checkbox-icon-modern-checked\"\n iconName=\"checkmark\"\n iconSize=\"s\"\n />\n }\n }\n </span>\n\n @if (labelText) {\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n } @else {\n <ng-content select=\"sky-checkbox-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<span #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-checkbox-hint-text sky-checkbox-form-margin\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</span>\n<sky-form-errors\n [class.sky-checkbox-form-margin]=\"labelText && control?.errors\"\n [id]=\"errorId\"\n [errors]=\"control?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"control?.touched\"\n [dirty]=\"control?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-cmp-theme-default{display:inline-block}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-form-field-stacked.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:inline-block}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern .sky-switch:not(:has(~.sky-control-help-container)):not(:has(.sky-switch-control-icon)):has(sky-checkbox-label-text-label){margin-right:0}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper{display:flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-help-inline{display:inline-flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-label{padding-left:var(--sky-space-gap-label-s)}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-switch-control{border-radius:var(--sky-comp-checkbox-border-radius)}:host-context(.sky-theme-modern) .sky-checkbox-hint-text{margin-top:var(--sky-space-gap-stacked_supplemental-xs)}:host-context(.sky-theme-modern) .sky-checkbox-form-margin{display:block;margin-left:var(--sky-space-inset-switch)}:host-context(.sky-theme-modern) :host.sky-form-field-stacked.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-space-gap-form-s)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["
|
|
1136
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], 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 }\"\n >\n <input\n #inputEl\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 />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': iconName,\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 @if (iconName) {\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n } @else {\n @if (indeterminate) {\n <sky-icon\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n iconName=\"square\"\n variant=\"solid\"\n iconSize=\"s\"\n />\n } @else if (checked) {\n <sky-icon\n class=\"sky-checkbox-icon-modern-checked\"\n iconName=\"checkmark\"\n iconSize=\"s\"\n />\n }\n }\n </span>\n\n @if (labelText) {\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n } @else {\n <ng-content select=\"sky-checkbox-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<span #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-checkbox-hint-text sky-checkbox-form-margin\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</span>\n<sky-form-errors\n [class.sky-checkbox-form-margin]=\"labelText && control?.errors\"\n [id]=\"errorId\"\n [errors]=\"control?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"control?.touched\"\n [dirty]=\"control?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-cmp-theme-default{display:inline-block}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-form-field-stacked.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:inline-block}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern .sky-switch:not(:has(~.sky-control-help-container)):not(:has(.sky-switch-control-icon)):has(sky-checkbox-label-text-label){margin-right:0}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper{display:flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-help-inline{display:inline-flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-label{padding-left:var(--sky-space-gap-label-s)}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-switch-control{border-radius:var(--sky-comp-checkbox-border-radius)}:host-context(.sky-theme-modern) .sky-checkbox-hint-text{margin-top:var(--sky-space-gap-stacked_supplemental-xs)}:host-context(.sky-theme-modern) .sky-checkbox-form-margin{display:block;margin-left:var(--sky-space-inset-switch)}:host-context(.sky-theme-modern) :host.sky-form-field-stacked.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-space-gap-form-s)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }] }); }
|
|
1137
1137
|
}
|
|
1138
1138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
1139
1139
|
type: Component,
|
|
@@ -2005,7 +2005,7 @@ class SkyFileAttachmentComponent {
|
|
|
2005
2005
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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: [
|
|
2006
2006
|
SkyFileAttachmentService,
|
|
2007
2007
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2008
|
-
], 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 />\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 [attr.title]=\"fileName\" (click)=\"emitClick()\">\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: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { 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: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { 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: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2008
|
+
], 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 />\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 [attr.title]=\"fileName\" (click)=\"emitClick()\">\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: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { 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: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { 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: i5.λ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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2009
2009
|
}
|
|
2010
2010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
2011
2011
|
type: Component,
|
|
@@ -2946,7 +2946,7 @@ class SkyFileDropComponent {
|
|
|
2946
2946
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", linkUploadHintText: "linkUploadHintText", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", noClick: "noClick", allowLinks: "allowLinks", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
2947
2947
|
SkyFileAttachmentService,
|
|
2948
2948
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2949
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset class=\"sky-file-drop-wrapper\">\n @if (labelText) {\n <legend\n class=\"sky-control-label sky-font-body-default\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-file-drop-label-text\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n @if (isRequired) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n ></button>\n\n <input\n #fileInput\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n />\n\n @if (customEl.children.length === 0) {\n <div class=\"sky-file-drop-contents sky-file-drop-upload-contents\">\n <div class=\"sky-file-drop-contents-not-over\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"arrow-upload\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon sky-file-upload-icon-target\"\n iconName=\"target\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_invalid_file'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon sky-file-upload-icon-close\"\n iconName=\"prohibited\"\n iconSize=\"xl\"\n />\n </div>\n </div>\n }\n\n <div #customEl class=\"sky-file-drop-contents-custom\">\n <ng-content />\n </div>\n </div>\n @if (allowLinks) {\n <div class=\"sky-file-drop-col\">\n <div class=\"sky-file-drop-contents\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_label'\n | skyLibResources\n }}\n </div>\n </div>\n <sky-input-box [hintText]=\"linkUploadHintText\">\n <input\n type=\"text\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </sky-input-box>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-file-drop-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</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n [dirty]=\"ngControl?.dirty\"\n [errors]=\"ngControl?.errors\"\n>\n <ng-content select=\"sky-form-error\" />\n @for (rejectedFile of rejectedFiles; track rejectedFile.url) {\n <div>\n @if (rejectedFile.errorType === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : rejectedFile.errorParam\n \"\n />\n } @else if (rejectedFile.errorType === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (rejectedFile.errorType === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (\n rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n ) {\n <sky-form-error\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n }\n </div>\n }\n</sky-form-errors>\n", styles: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-drag-contents-border-style: dashed;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:var(--sky-override-file-drop-drag-contents-border-style, solid);border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;max-height:auto;color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-comp-override-input-box-group-background-color-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-style-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-style-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-default));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { 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: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { 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: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: SkyInputBoxControlDirective, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
2949
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset class=\"sky-file-drop-wrapper\">\n @if (labelText) {\n <legend\n class=\"sky-control-label sky-font-body-default\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-file-drop-label-text\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n @if (isRequired) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n ></button>\n\n <input\n #fileInput\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n />\n\n @if (customEl.children.length === 0) {\n <div class=\"sky-file-drop-contents sky-file-drop-upload-contents\">\n <div class=\"sky-file-drop-contents-not-over\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"arrow-upload\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon sky-file-upload-icon-target\"\n iconName=\"target\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_invalid_file'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon sky-file-upload-icon-close\"\n iconName=\"prohibited\"\n iconSize=\"xl\"\n />\n </div>\n </div>\n }\n\n <div #customEl class=\"sky-file-drop-contents-custom\">\n <ng-content />\n </div>\n </div>\n @if (allowLinks) {\n <div class=\"sky-file-drop-col\">\n <div class=\"sky-file-drop-contents\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_label'\n | skyLibResources\n }}\n </div>\n </div>\n <sky-input-box [hintText]=\"linkUploadHintText\">\n <input\n type=\"text\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </sky-input-box>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-file-drop-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</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n [dirty]=\"ngControl?.dirty\"\n [errors]=\"ngControl?.errors\"\n>\n <ng-content select=\"sky-form-error\" />\n @for (rejectedFile of rejectedFiles; track rejectedFile.url) {\n <div>\n @if (rejectedFile.errorType === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : rejectedFile.errorParam\n \"\n />\n } @else if (rejectedFile.errorType === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (rejectedFile.errorType === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (\n rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n ) {\n <sky-form-error\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n }\n </div>\n }\n</sky-form-errors>\n", styles: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-drag-contents-border-style: dashed;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:var(--sky-override-file-drop-drag-contents-border-style, solid);border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;max-height:auto;color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-comp-override-input-box-group-background-color-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-style-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-style-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-default));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { 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: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { 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: i5.λ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: SkyInputBoxModule }, { kind: "component", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: SkyInputBoxControlDirective, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
2950
2950
|
}
|
|
2951
2951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyFileDropComponent, decorators: [{
|
|
2952
2952
|
type: Component,
|
|
@@ -3155,11 +3155,11 @@ class SkyFileItemComponent {
|
|
|
3155
3155
|
}
|
|
3156
3156
|
}
|
|
3157
3157
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n @if (isImage) {\n <div class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n } @else {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xxxl\" [iconName]=\"icon\" />\n </div>\n }\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n </div>\n}\n", styles: [".sky-file-item:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-style-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-style-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["
|
|
3158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n @if (isImage) {\n <div class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n } @else if (icon) {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xxxl\" [iconName]=\"icon\" />\n </div>\n }\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n </div>\n}\n", styles: [".sky-file-item:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-style-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-style-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
|
|
3159
3159
|
}
|
|
3160
3160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyFileItemComponent, decorators: [{
|
|
3161
3161
|
type: Component,
|
|
3162
|
-
args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n @if (isImage) {\n <div class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n } @else {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xxxl\" [iconName]=\"icon\" />\n </div>\n }\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n </div>\n}\n", styles: [".sky-file-item:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-style-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-style-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"] }]
|
|
3162
|
+
args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n @if (isImage) {\n <div class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n } @else if (icon) {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xxxl\" [iconName]=\"icon\" />\n </div>\n }\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n </div>\n}\n", styles: [".sky-file-item:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-style-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-style-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"] }]
|
|
3163
3163
|
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
|
|
3164
3164
|
type: Input
|
|
3165
3165
|
}], deleteFile: [{
|
|
@@ -3540,7 +3540,7 @@ class SkyRadioComponent {
|
|
|
3540
3540
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3541
3541
|
#onTouchedCallback;
|
|
3542
3542
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3543
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyRadioComponent, isStandalone: false, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", iconName: "iconName", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': iconName,\n 'sky-rounded-corners': iconName,\n 'sky-rounded-circle': !iconName,\n 'sky-switch-control-info': iconName && radioType === 'info',\n 'sky-switch-control-success': iconName && radioType === 'success',\n 'sky-switch-control-warning': iconName && radioType === 'warning',\n 'sky-switch-control-danger': iconName && radioType === 'danger'\n }\"\n >\n @if (iconName) {\n <sky-icon [iconName]=\"iconName\" />\n }\n </span>\n @if (labelText) {\n <span\n class=\"sky-switch-label sky-radio-label-text\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n >{{ labelText }}</span\n >\n } @else {\n <ng-content select=\"sky-radio-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-radio-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", styles: [".sky-radio-outer-wrapper:not(.sky-theme-modern *){--sky-override-radio-border-color-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-checked-active: 2px;--sky-override-radio-border-width-checked-hover: 2px;--sky-override-radio-border-color-icon-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-icon-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-icon-checked-active: 2px;--sky-override-radio-icon-border-radius: 50%;--sky-override-radio-icon-color-disabled: #000000;--sky-override-radio-icon-color-selected: #000000;--sky-override-radio-icon-size: 10px;--sky-override-radio-label-margin-right: var(--sky-margin-inline-xs)}:host.sky-cmp-theme-default{--sky-override-radio-group-radio-bottom-margin: var(--sky-margin-stacked-sm);--sky-override-radio-hint-text-inset: var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-override-radio-group-radio-bottom-margin, var(--sky-space-gap-form-s))}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch:not(:has(~.sky-control-help-container)) .sky-switch-label{margin-right:var(--sky-override-radio-label-margin-right, 0)}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:var(--sky-override-radio-icon-size, var(--sky-size-icon-xxs));height:var(--sky-override-radio-icon-size, var(--sky-size-icon-xxs));background:var(--sky-override-radio-icon-color-selected, var(--sky-color-icon-inverse));border-radius:var(--sky-override-radio-icon-border-radius, var(--sky-border-radius-round))}.sky-radio-input:disabled+.sky-switch-control:not(.sky-switch-control-icon):after{background-color:var(--sky-override-radio-icon-color-disabled, var(--sky-color-text-deemphasized))}.sky-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-active, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control.sky-switch-control-icon{border-width:var(--sky-override-radio-border-width-icon-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-icon-checked-active, var(--sky-color-border-selected))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-hover, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-hover, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control.sky-switch-control-icon{border-color:var(--sky-override-radio-border-color-icon-checked-hover, var(--sky-color-border-selected))}.sky-radio-hint-text{margin:var(--sky-override-radio-hint-text-inset, var(--sky-space-gap-stacked_supplemental-xs) 0 0 var(--sky-space-inset-switch))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["
|
|
3543
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyRadioComponent, isStandalone: false, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", iconName: "iconName", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': iconName,\n 'sky-rounded-corners': iconName,\n 'sky-rounded-circle': !iconName,\n 'sky-switch-control-info': iconName && radioType === 'info',\n 'sky-switch-control-success': iconName && radioType === 'success',\n 'sky-switch-control-warning': iconName && radioType === 'warning',\n 'sky-switch-control-danger': iconName && radioType === 'danger'\n }\"\n >\n @if (iconName) {\n <sky-icon [iconName]=\"iconName\" />\n }\n </span>\n @if (labelText) {\n <span\n class=\"sky-switch-label sky-radio-label-text\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n >{{ labelText }}</span\n >\n } @else {\n <ng-content select=\"sky-radio-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-radio-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", styles: [".sky-radio-outer-wrapper:not(.sky-theme-modern *){--sky-override-radio-border-color-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-checked-active: 2px;--sky-override-radio-border-width-checked-hover: 2px;--sky-override-radio-border-color-icon-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-icon-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-icon-checked-active: 2px;--sky-override-radio-icon-border-radius: 50%;--sky-override-radio-icon-color-disabled: #000000;--sky-override-radio-icon-color-selected: #000000;--sky-override-radio-icon-size: 10px;--sky-override-radio-label-margin-right: var(--sky-margin-inline-xs)}:host.sky-cmp-theme-default{--sky-override-radio-group-radio-bottom-margin: var(--sky-margin-stacked-sm);--sky-override-radio-hint-text-inset: var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-override-radio-group-radio-bottom-margin, var(--sky-space-gap-form-s))}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch:not(:has(~.sky-control-help-container)) .sky-switch-label{margin-right:var(--sky-override-radio-label-margin-right, 0)}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:var(--sky-override-radio-icon-size, var(--sky-size-icon-xxs));height:var(--sky-override-radio-icon-size, var(--sky-size-icon-xxs));background:var(--sky-override-radio-icon-color-selected, var(--sky-color-icon-inverse));border-radius:var(--sky-override-radio-icon-border-radius, var(--sky-border-radius-round))}.sky-radio-input:disabled+.sky-switch-control:not(.sky-switch-control-icon):after{background-color:var(--sky-override-radio-icon-color-disabled, var(--sky-color-text-deemphasized))}.sky-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-active, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control.sky-switch-control-icon{border-width:var(--sky-override-radio-border-width-icon-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-icon-checked-active, var(--sky-color-border-selected))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-hover, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-hover, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control.sky-switch-control-icon{border-color:var(--sky-override-radio-border-color-icon-checked-hover, var(--sky-color-border-selected))}.sky-radio-hint-text{margin:var(--sky-override-radio-hint-text-inset, var(--sky-space-gap-stacked_supplemental-xs) 0 0 var(--sky-space-inset-switch))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3544
3544
|
}
|
|
3545
3545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyRadioComponent, decorators: [{
|
|
3546
3546
|
type: Component,
|