@lucca-front/ng 21.1.3 → 21.1.4
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/lucca-front-ng-api.mjs +2 -2
- package/fesm2022/lucca-front-ng-api.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-bubble-icon.mjs +2 -2
- package/fesm2022/lucca-front-ng-bubble-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs +2 -2
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-callout.mjs +17 -12
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-data-table.mjs +2 -2
- package/fesm2022/lucca-front-ng-data-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date.mjs +2 -2
- package/fesm2022/lucca-front-ng-date.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date2.mjs +6 -6
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-department.mjs +2 -2
- package/fesm2022/lucca-front-ng-department.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +2 -2
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-divider.mjs +2 -2
- package/fesm2022/lucca-front-ng-divider.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dropdown.mjs +2 -1
- package/fesm2022/lucca-front-ng-dropdown.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-empty-state.mjs +4 -4
- package/fesm2022/lucca-front-ng-empty-state.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-establishment.mjs +2 -2
- package/fesm2022/lucca-front-ng-establishment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs +6 -6
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-filter-pills.mjs +2 -2
- package/fesm2022/lucca-front-ng-filter-pills.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs +3 -3
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +7 -7
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-gauge.mjs +2 -2
- package/fesm2022/lucca-front-ng-gauge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-index-table.mjs +2 -2
- package/fesm2022/lucca-front-ng-index-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +2 -2
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-page-header.mjs +2 -2
- package/fesm2022/lucca-front-ng-page-header.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-pagination.mjs +2 -2
- package/fesm2022/lucca-front-ng-pagination.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popover2.mjs +4 -4
- package/fesm2022/lucca-front-ng-popover2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-resource-card.mjs +2 -2
- package/fesm2022/lucca-front-ng-resource-card.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-select.mjs +2 -2
- package/fesm2022/lucca-front-ng-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs +2 -2
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +16 -14
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-software-icon.mjs +1 -0
- package/fesm2022/lucca-front-ng-software-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-sortable-list.mjs +4 -4
- package/fesm2022/lucca-front-ng-sortable-list.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +3 -3
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +11 -7
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/package.json +4 -4
- package/schematics/lib/typescript-ast.js +1 -1
- package/schematics/new-icons/mapping.js +0 -3
- package/src/definitions/select/_select-input.scss +1 -1
- package/types/lucca-front-ng-bubble-icon.d.ts +2 -2
- package/types/lucca-front-ng-bubble-illustration.d.ts +1 -1
- package/types/lucca-front-ng-callout.d.ts +9 -2
- package/types/lucca-front-ng-forms.d.ts +0 -1
- package/types/lucca-front-ng-software-icon.d.ts +2 -2
- package/types/lucca-front-ng-user.d.ts +1 -1
|
@@ -314,13 +314,13 @@ class FileEntryComponent {
|
|
|
314
314
|
return this.deleteFile$.observed;
|
|
315
315
|
}
|
|
316
316
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FileEntryComponent, isStandalone: true, selector: "lu-file-entry", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, downloadURL: { classPropertyName: "downloadURL", publicName: "downloadURL", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordChange: "passwordChange", deleteFile: "deleteFile" }, host: { classAttribute: "pr-u-displayContents" }, ngImport: i0, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [class]=\"dlClasses()\">\n\t@if (!media()) {\n\t\t<dt class=\"fileEntry-filename\">\n\t\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t\t</dt>\n\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t<dd class=\"fileEntry-inlineMessage\">\n\t\t\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</dd>\n\t\t} @else {\n\t\t\t<dd class=\"fileEntry-description\">\n\t\t\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span\n\t\t\t\t><span class=\"pr-u-mask\"> \u2013 </span>\n\t\t\t\t<lu-divider vertical />\n\t\t\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t\t\t</dd>\n\t\t}\n\t}\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t\t@if (media()) {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@if (previewUrl() && state() !== \"error\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (state() === \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (!previewUrl() && state() !== \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"fileEntry-status-content-inside-svg\"\n\t\t\t\t\t\t\t[attr.src]=\"iconOverride() || fileEntryIconSrc()\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (displayFileName() && media()) {\n\t\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t\t<dd class=\"fileEntry-toolbar\">\n\t\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t\t@if (downloadURL()) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().download\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().downloadFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t\t@if (deletable) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().delete\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().deleteFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n\t<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t\t<div class=\"box-arrow mod-neutral\"></div>\n\t\t<lu-form-field [label]=\"intl().password\">\n\t\t\t<div class=\"fileEntry_box-field\">\n\t\t\t\t<lu-text-input\n\t\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\t\trequired\n\t\t\t\t\thasClearer\n\t\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t\t/>\n\t\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl().confirmPassword }}</button>\n\t\t\t</div>\n\t\t</lu-form-field>\n\t</div>\n}\n", styles: ["@layer components{.fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--pr-t-border-radius-default);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-block-size:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);inline-size:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--pr-t-border-radius-50);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-inline-size:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-inline-size:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pr-t-border-radius-50);max-inline-size:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-inline-size:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-inline-size:fit-content}}@layer mods{.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "component", type: DividerComponent, selector: "lu-divider", inputs: ["separatorRole", "vertical", "size", "withRole"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FileEntryComponent, isStandalone: true, selector: "lu-file-entry", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, downloadURL: { classPropertyName: "downloadURL", publicName: "downloadURL", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordChange: "passwordChange", deleteFile: "deleteFile" }, host: { classAttribute: "pr-u-displayContents" }, ngImport: i0, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [class]=\"dlClasses()\">\n\t@if (!media()) {\n\t\t<dt class=\"fileEntry-filename\">\n\t\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t\t</dt>\n\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t<dd class=\"fileEntry-inlineMessage\">\n\t\t\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</dd>\n\t\t} @else {\n\t\t\t<dd class=\"fileEntry-description\">\n\t\t\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span\n\t\t\t\t><span class=\"pr-u-mask\"> \u2013 </span>\n\t\t\t\t<lu-divider vertical class=\"fileEntry-description-divider\" />\n\t\t\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t\t\t</dd>\n\t\t}\n\t}\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t\t@if (media()) {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@if (previewUrl() && state() !== \"error\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (state() === \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (!previewUrl() && state() !== \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"fileEntry-status-content-inside-svg\"\n\t\t\t\t\t\t\t[attr.src]=\"iconOverride() || fileEntryIconSrc()\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (displayFileName() && media()) {\n\t\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t\t<dd class=\"fileEntry-toolbar\">\n\t\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t\t@if (downloadURL()) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().download\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().downloadFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t\t@if (deletable) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().delete\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().deleteFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n\t<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t\t<div class=\"box-arrow mod-neutral\"></div>\n\t\t<lu-form-field [label]=\"intl().password\">\n\t\t\t<div class=\"fileEntry_box-field\">\n\t\t\t\t<lu-text-input\n\t\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\t\trequired\n\t\t\t\t\thasClearer\n\t\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t\t/>\n\t\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl().confirmPassword }}</button>\n\t\t\t</div>\n\t\t</lu-form-field>\n\t</div>\n}\n", styles: ["@layer components{.fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--pr-t-border-radius-default);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-block-size:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);inline-size:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--pr-t-border-radius-50);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-inline-size:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-inline-size:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pr-t-border-radius-50);max-inline-size:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-inline-size:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-inline-size:fit-content}}@layer mods{.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}}@layer mods{.fileEntry-description-divider.divider.mod-vertical{--components-divider-marginBlock: var(--pr-t-spacings-25);--components-divider-marginInline: 0}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}@layer mods{.fileToolbar .fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar .fileToolbar-list-item-button.button:hover,.fileToolbar .fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar .fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar .fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar .fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar .fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-borderRadius: 4px;--components-button-padding: var(--pr-t-spacings-75)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "component", type: DividerComponent, selector: "lu-divider", inputs: ["separatorRole", "vertical", "size", "withRole"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
318
318
|
}
|
|
319
319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileEntryComponent, decorators: [{
|
|
320
320
|
type: Component,
|
|
321
321
|
args: [{ selector: 'lu-file-entry', encapsulation: ViewEncapsulation.None, imports: [IconComponent, LuTooltipModule, ButtonComponent, InlineMessageComponent, DividerComponent, FormFieldComponent, TextInputComponent, FormsModule, IntlParamsPipe], host: {
|
|
322
322
|
class: 'pr-u-displayContents',
|
|
323
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [class]=\"dlClasses()\">\n\t@if (!media()) {\n\t\t<dt class=\"fileEntry-filename\">\n\t\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t\t</dt>\n\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t<dd class=\"fileEntry-inlineMessage\">\n\t\t\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</dd>\n\t\t} @else {\n\t\t\t<dd class=\"fileEntry-description\">\n\t\t\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span\n\t\t\t\t><span class=\"pr-u-mask\"> \u2013 </span>\n\t\t\t\t<lu-divider vertical />\n\t\t\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t\t\t</dd>\n\t\t}\n\t}\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t\t@if (media()) {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@if (previewUrl() && state() !== \"error\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (state() === \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (!previewUrl() && state() !== \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"fileEntry-status-content-inside-svg\"\n\t\t\t\t\t\t\t[attr.src]=\"iconOverride() || fileEntryIconSrc()\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (displayFileName() && media()) {\n\t\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t\t<dd class=\"fileEntry-toolbar\">\n\t\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t\t@if (downloadURL()) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().download\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().downloadFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t\t@if (deletable) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().delete\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().deleteFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n\t<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t\t<div class=\"box-arrow mod-neutral\"></div>\n\t\t<lu-form-field [label]=\"intl().password\">\n\t\t\t<div class=\"fileEntry_box-field\">\n\t\t\t\t<lu-text-input\n\t\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\t\trequired\n\t\t\t\t\thasClearer\n\t\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t\t/>\n\t\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl().confirmPassword }}</button>\n\t\t\t</div>\n\t\t</lu-form-field>\n\t</div>\n}\n", styles: ["@layer components{.fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--pr-t-border-radius-default);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-block-size:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);inline-size:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--pr-t-border-radius-50);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-inline-size:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-inline-size:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pr-t-border-radius-50);max-inline-size:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-inline-size:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-inline-size:fit-content}}@layer mods{.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"] }]
|
|
323
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [class]=\"dlClasses()\">\n\t@if (!media()) {\n\t\t<dt class=\"fileEntry-filename\">\n\t\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t\t</dt>\n\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t<dd class=\"fileEntry-inlineMessage\">\n\t\t\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</dd>\n\t\t} @else {\n\t\t\t<dd class=\"fileEntry-description\">\n\t\t\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span\n\t\t\t\t><span class=\"pr-u-mask\"> \u2013 </span>\n\t\t\t\t<lu-divider vertical class=\"fileEntry-description-divider\" />\n\t\t\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t\t\t</dd>\n\t\t}\n\t}\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t\t@if (media()) {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@if (previewUrl() && state() !== \"error\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (state() === \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (!previewUrl() && state() !== \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"fileEntry-status-content-inside-svg\"\n\t\t\t\t\t\t\t[attr.src]=\"iconOverride() || fileEntryIconSrc()\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (displayFileName() && media()) {\n\t\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t\t<dd class=\"fileEntry-toolbar\">\n\t\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t\t@if (downloadURL()) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().download\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().downloadFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t\t@if (deletable) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl().delete\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl().deleteFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n\t<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t\t<div class=\"box-arrow mod-neutral\"></div>\n\t\t<lu-form-field [label]=\"intl().password\">\n\t\t\t<div class=\"fileEntry_box-field\">\n\t\t\t\t<lu-text-input\n\t\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\t\trequired\n\t\t\t\t\thasClearer\n\t\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t\t/>\n\t\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl().confirmPassword }}</button>\n\t\t\t</div>\n\t\t</lu-form-field>\n\t</div>\n}\n", styles: ["@layer components{.fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--pr-t-border-radius-default);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-block-size:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);inline-size:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--pr-t-border-radius-50);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-inline-size:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-inline-size:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pr-t-border-radius-50);max-inline-size:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-inline-size:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-inline-size:fit-content}}@layer mods{.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}}@layer mods{.fileEntry-description-divider.divider.mod-vertical{--components-divider-marginBlock: var(--pr-t-spacings-25);--components-divider-marginInline: 0}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}@layer mods{.fileToolbar .fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar .fileToolbar-list-item-button.button:hover,.fileToolbar .fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar .fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar .fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar .fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar .fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-borderRadius: 4px;--components-button-padding: var(--pr-t-spacings-75)}}\n"] }]
|
|
324
324
|
}], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], displayFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFileName", required: false }] }], inlineMessageError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineMessageError", required: false }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOverride", required: false }] }], downloadURL: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadURL", required: false }] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], passwordChange: [{ type: i0.Output, args: ["passwordChange"] }], media: [{ type: i0.Input, args: [{ isSignal: true, alias: "media", required: false }] }], deleteFile: [{ type: i0.Output, args: ["deleteFile"] }], previewUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewUrl", required: false }] }] } });
|
|
325
325
|
function extractFileExtension(type) {
|
|
326
326
|
switch (type) {
|
|
@@ -339,13 +339,13 @@ function extractFileExtension(type) {
|
|
|
339
339
|
|
|
340
340
|
class MultiFileUploadComponent extends BaseFileUploadComponent {
|
|
341
341
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
342
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MultiFileUploadComponent, isStandalone: true, selector: "lu-multi-file-upload", host: { properties: { "class.mod-structure": "structure()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"false\">\n\t<input\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\tmultiple=\"multiple\"\n\t\t#inputRef\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.other\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\tintl().acceptedFormat.one\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.other | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.other }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.other }}</span>\n</div>\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: BubbleIllustrationComponent, selector: "lu-bubble-illustration", inputs: ["illustration", "palette", "size", "action"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
342
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MultiFileUploadComponent, isStandalone: true, selector: "lu-multi-file-upload", host: { properties: { "class.mod-structure": "structure()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"false\">\n\t<input\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\tmultiple=\"multiple\"\n\t\t#inputRef\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.other\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\tintl().acceptedFormat.one\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.other | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.other }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.other }}</span>\n</div>\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}@layer mods{.fileToolbar .fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar .fileToolbar-list-item-button.button:hover,.fileToolbar .fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar .fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar .fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar .fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar .fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-borderRadius: 4px;--components-button-padding: var(--pr-t-spacings-75)}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: BubbleIllustrationComponent, selector: "lu-bubble-illustration", inputs: ["illustration", "palette", "size", "action"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
343
343
|
}
|
|
344
344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiFileUploadComponent, decorators: [{
|
|
345
345
|
type: Component,
|
|
346
346
|
args: [{ selector: 'lu-multi-file-upload', encapsulation: ViewEncapsulation.None, host: {
|
|
347
347
|
'[class.mod-structure]': 'structure()',
|
|
348
|
-
}, imports: [InputDirective, LuTooltipModule, IntlParamsPipe, BubbleIllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"false\">\n\t<input\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\tmultiple=\"multiple\"\n\t\t#inputRef\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.other\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\tintl().acceptedFormat.one\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.other | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.other }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.other }}</span>\n</div>\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"] }]
|
|
348
|
+
}, imports: [InputDirective, LuTooltipModule, IntlParamsPipe, BubbleIllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"false\">\n\t<input\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\tmultiple=\"multiple\"\n\t\t#inputRef\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.other\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\tintl().acceptedFormat.one\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.other | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.other }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.other }}</span>\n</div>\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}@layer mods{.fileToolbar .fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar .fileToolbar-list-item-button.button:hover,.fileToolbar .fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar .fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar .fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar .fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar .fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-borderRadius: 4px;--components-button-padding: var(--pr-t-spacings-75)}}\n"] }]
|
|
349
349
|
}] });
|
|
350
350
|
|
|
351
351
|
class SingleFileUploadComponent extends BaseFileUploadComponent {
|
|
@@ -359,13 +359,13 @@ class SingleFileUploadComponent extends BaseFileUploadComponent {
|
|
|
359
359
|
this.displayFileName = input(false, { ...(ngDevMode ? { debugName: "displayFileName" } : {}), transform: booleanAttribute });
|
|
360
360
|
}
|
|
361
361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SingleFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SingleFileUploadComponent, isStandalone: true, selector: "lu-single-file-upload", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFile: "deleteFile" }, host: { properties: { "class.mod-structure": "structure()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"!!entry()\">\n\t<input\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\t[attr.disabled]=\"!!entry() ? 'disabled' : null\"\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.one\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\t{{ intl().acceptedFormat.one }}\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.one | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.one }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.one }}</span>\n</div>\n@if (entry()) {\n\t<lu-file-entry\n\t\t[media]=\"size() === null\"\n\t\t[previewUrl]=\"previewUrl()\"\n\t\t[entry]=\"entry()\"\n\t\t[state]=\"state()\"\n\t\t(deleteFile)=\"deleteFile.emit()\"\n\t\t[inlineMessageError]=\"inlineMessageError()\"\n\t\t[displayFileName]=\"displayFileName()\"\n\t/>\n}\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: FileEntryComponent, selector: "lu-file-entry", inputs: ["intl", "state", "displayFileName", "inlineMessageError", "entry", "size", "iconOverride", "downloadURL", "password", "media", "previewUrl"], outputs: ["passwordChange", "deleteFile"] }, { kind: "component", type: BubbleIllustrationComponent, selector: "lu-bubble-illustration", inputs: ["illustration", "palette", "size", "action"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SingleFileUploadComponent, isStandalone: true, selector: "lu-single-file-upload", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFile: "deleteFile" }, host: { properties: { "class.mod-structure": "structure()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"!!entry()\">\n\t<input\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\t[attr.disabled]=\"!!entry() ? 'disabled' : null\"\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.one\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\t{{ intl().acceptedFormat.one }}\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.one | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.one }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.one }}</span>\n</div>\n@if (entry()) {\n\t<lu-file-entry\n\t\t[media]=\"size() === null\"\n\t\t[previewUrl]=\"previewUrl()\"\n\t\t[entry]=\"entry()\"\n\t\t[state]=\"state()\"\n\t\t(deleteFile)=\"deleteFile.emit()\"\n\t\t[inlineMessageError]=\"inlineMessageError()\"\n\t\t[displayFileName]=\"displayFileName()\"\n\t/>\n}\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}@layer mods{.fileToolbar .fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar .fileToolbar-list-item-button.button:hover,.fileToolbar .fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar .fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar .fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar .fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar .fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-borderRadius: 4px;--components-button-padding: var(--pr-t-spacings-75)}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: FileEntryComponent, selector: "lu-file-entry", inputs: ["intl", "state", "displayFileName", "inlineMessageError", "entry", "size", "iconOverride", "downloadURL", "password", "media", "previewUrl"], outputs: ["passwordChange", "deleteFile"] }, { kind: "component", type: BubbleIllustrationComponent, selector: "lu-bubble-illustration", inputs: ["illustration", "palette", "size", "action"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
363
363
|
}
|
|
364
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SingleFileUploadComponent, decorators: [{
|
|
365
365
|
type: Component,
|
|
366
366
|
args: [{ selector: 'lu-single-file-upload', encapsulation: ViewEncapsulation.None, host: {
|
|
367
367
|
'[class.mod-structure]': 'structure()',
|
|
368
|
-
}, imports: [InputDirective, LuTooltipModule, FileEntryComponent, IntlParamsPipe, BubbleIllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"!!entry()\">\n\t<input\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\t[attr.disabled]=\"!!entry() ? 'disabled' : null\"\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.one\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\t{{ intl().acceptedFormat.one }}\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.one | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.one }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.one }}</span>\n</div>\n@if (entry()) {\n\t<lu-file-entry\n\t\t[media]=\"size() === null\"\n\t\t[previewUrl]=\"previewUrl()\"\n\t\t[entry]=\"entry()\"\n\t\t[state]=\"state()\"\n\t\t(deleteFile)=\"deleteFile.emit()\"\n\t\t[inlineMessageError]=\"inlineMessageError()\"\n\t\t[displayFileName]=\"displayFileName()\"\n\t/>\n}\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"] }]
|
|
368
|
+
}, imports: [InputDirective, LuTooltipModule, FileEntryComponent, IntlParamsPipe, BubbleIllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fileUpload\" [class.is-droppable]=\"droppable\" [class.mod-S]=\"size() === 'S'\" [class.is-hidden]=\"!!entry()\">\n\t<input\n\t\tclass=\"fileUpload-input\"\n\t\ttype=\"file\"\n\t\ttitle=\"\"\n\t\t[attr.accept]=\"acceptAttribute().length > 0 ? acceptAttribute() : null\"\n\t\tluInput\n\t\t(dragenter)=\"droppable = true\"\n\t\t(dragleave)=\"droppable = false\"\n\t\t(change)=\"filesChange($event)\"\n\t\t[attr.disabled]=\"!!entry() ? 'disabled' : null\"\n\t\t[attr.aria-describedby]=\"'fileUpload-instruction-' + idSuffix\"\n\t/>\n\t<div class=\"fileUpload-status\">\n\t\t<lu-bubble-illustration [illustration]=\"illus()\" action size=\"L\" />\n\t</div>\n\t<div class=\"fileUpload-instruction\" [attr.id]=\"'fileUpload-instruction-' + idSuffix\">\n\t\t<span class=\"fileUpload-instruction-action\" aria-hidden=\"true\" [innerHTML]=\"intl().dropOrClick.one\"></span>\n\t\t@if (acceptNames().length) {\n\t\t\t<span class=\"fileUpload-instruction-formats\">\n\t\t\t\t@if (acceptNames().length > 1 || acceptAll()) {\n\t\t\t\t\t{{ intl().acceptedFormat.other }}\n\t\t\t\t} @else {\n\t\t\t\t\t{{ intl().acceptedFormat.one }}\n\t\t\t\t}\n\t\t\t\t{{ acceptNames().join(\", \") }}.\n\t\t\t</span>\n\t\t}\n\t\t@if (fileMaxSize()) {\n\t\t\t<span class=\"fileUpload-instruction-size\">{{ intl().maxWeight.one | intlParams: { maxSizeDisplay: maxSizeDisplay() } }}</span>\n\t\t}\n\t\t<span class=\"pr-u-mask\">{{ intl().fileUploadedListed.one }}</span>\n\t</div>\n\t<span class=\"fileUpload-button button\" [class.mod-filled]=\"buttonFilled()\" aria-hidden=\"true\">{{ intl().selectFile.one }}</span>\n</div>\n@if (entry()) {\n\t<lu-file-entry\n\t\t[media]=\"size() === null\"\n\t\t[previewUrl]=\"previewUrl()\"\n\t\t[entry]=\"entry()\"\n\t\t[state]=\"state()\"\n\t\t(deleteFile)=\"deleteFile.emit()\"\n\t\t[inlineMessageError]=\"inlineMessageError()\"\n\t\t[displayFileName]=\"displayFileName()\"\n\t/>\n}\n", styles: ["@layer components{.fileUpload{--components-fileUpload-button-display: block;--components-fileUpload-button-visibility: visible;--components-fileUpload-padding: var(--pr-t-spacings-300);--components-fileUpload-textAlign: center;--components-fileUpload-flexDirection: column;--components-fileUpload-borderRadius: var(--pr-t-border-radius-input);--components-fileUpload-instruction-display: flex;--components-fileUpload-instruction-alignItems: center;--fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);--components-fileUpload-width: auto;--components-fileUpload-display: flex;--components-fileUpload-instruction-maxWidth: 30rem;--components-fileUpload-instruction-action-fontWeight: 400;--components-fileUpload-instruction-action-color: inherit;--components-fileUpload-borderColor: var(--palettes-neutral-300);--components-fileUpload-borderStyle: dashed;--components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);--components-fileUpload-alignItems: center;--components-fileUpload-instruction-filename-color: inherit;--components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);--components-fileUpload-minHeight: 21.5rem;--components-fileUpload-instruction-filename-position: relative;--components-fileUpload-justifyContent: center;--components-fileUpload-status-img-inset: var(--pr-t-spacings-75);--components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);position:relative;border:1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);overflow:hidden;border-radius:var(--components-fileUpload-borderRadius);background-color:var(--components-fileUpload-backgroundColor);padding:var(--components-fileUpload-padding);text-align:var(--components-fileUpload-textAlign);display:var(--components-fileUpload-display);flex-direction:var(--components-fileUpload-flexDirection);align-items:var(--components-fileUpload-alignItems);justify-content:var(--components-fileUpload-justifyContent);gap:var(--pr-t-spacings-200);color:var(--pr-t-color-text);min-block-size:var(--components-fileUpload-minHeight)}.fileUpload:has(.fileUpload-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fileUpload-status{min-inline-size:var(--pr-t-spacings-600);min-block-size:var(--pr-t-spacings-600);display:flex;align-items:center;justify-content:center;--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600))}.fileUpload-status-preview{position:absolute;inset:var(--components-fileUpload-status-img-inset);inline-size:var(--components-fileUpload-status-img-size);block-size:var(--components-fileUpload-status-img-size);border-radius:var(--pr-t-border-radius-50);background-color:var(--palettes-neutral-25);display:flex;overflow:hidden}.fileUpload-status-preview-img{object-fit:cover;opacity:.08;inline-size:100%;block-size:100%}.fileUpload-input{position:absolute;inset:calc(var(--pr-t-spacings-400) * -1) 0 0;opacity:.0001;cursor:pointer;z-index:1}.fileUpload-instruction{display:var(--components-fileUpload-instruction-display);flex-direction:column;align-items:var(--components-fileUpload-instruction-alignItems);max-inline-size:var(--components-fileUpload-instruction-maxWidth);line-height:var(--pr-t-font-body-S-lineHeight)}.fileUpload-instruction-action{display:block;margin-bottom:var(--fileUpload-instruction-action-marginBottom);line-height:var(--pr-t-font-body-M-lineHeight)}.fileUpload-instruction-action span{color:var(--components-fileUpload-instruction-action-color);font-weight:var(--components-fileUpload-instruction-action-fontWeight)}.fileUpload-instruction-size,.fileUpload-instruction-formats{color:var(--palettes-neutral-600);font-size:var(--pr-t-font-body-S-fontSize);vertical-align:top}.fileUpload-button.button{visibility:var(--components-fileUpload-button-visibility);display:var(--components-fileUpload-button-display)}.fileUpload-button.button:not(.mod-filled){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fileUpload-button.button:not(.mod-filled):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fileUpload-button.button:not(.mod-filled):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileUpload-button.button:not(.mod-filled):focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fileUpload-button.button:not(.mod-filled):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fileUpload-button.button:not(.mod-filled){--palettes-text: var(--palettes-product-text);--palettes-0: var(--palettes-product-0);--palettes-25: var(--palettes-product-25);--palettes-50: var(--palettes-product-50);--palettes-100: var(--palettes-product-100);--palettes-200: var(--palettes-product-200);--palettes-300: var(--palettes-product-300);--palettes-400: var(--palettes-product-400);--palettes-500: var(--palettes-product-500);--palettes-600: var(--palettes-product-600);--palettes-700: var(--palettes-product-700);--palettes-800: var(--palettes-product-800);--palettes-900: var(--palettes-product-900)}.fileUpload-instruction-filename{display:block;font-weight:var(--pr-t-font-fontWeight-semibold);color:var(--components-fileUpload-instruction-filename-color);margin-block-start:var(--components-fileUpload-instruction-filename-marginTop);inset-block-end:var(--pr-t-spacings-100);position:var(--components-fileUpload-instruction-filename-position)}}@layer mods{.fileUpload.mod-dropzone{position:fixed;inset:var(--pr-t-spacings-200)}.fileUpload.mod-structure{--components-fileUpload-borderRadius: var(--pr-t-border-radius-structure)}.fileUpload.mod-S{--components-fileUpload-button-display: none;--components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);--components-fileUpload-textAlign: left;--components-fileUpload-flexDirection: row;--components-fileUpload-instruction-alignItems: stretch;--components-fileUpload-instruction-display: block;--components-fileUpload-instruction-maxWidth: none;--components-fileUpload-instruction-action-fontWeight: 600;--fileUpload-instruction-action-marginBottom: 0;--components-fileUpload-instruction-action-color: var(--palettes-product-700);--components-fileUpload-alignItems: flex-start;--components-fileUpload-minHeight: none;--components-fileUpload-instruction-filename-position: static;--components-fileUpload-instruction-filename-marginTop: 0;--components-fileUpload-justifyContent: flex-start;--components-fileUpload-status-img-inset: 0;--components-fileUpload-status-img-size: var(--pr-t-spacings-600)}.fileUpload.mod-S.is-loading{--components-fileUpload-instruction-display: block}.fileUpload:hover{--components-fileUpload-borderColor: var(--palettes-product-600)}.fileUpload.is-loading{--components-fileUpload-instruction-display: none;--components-fileUpload-button-display: none}.fileUpload.is-hidden{--components-fileUpload-display: none}.fileUpload.is-success{--components-fileUpload-instruction-filename-color: var(--palettes-success-800);--components-fileUpload-button-visibility: hidden}.fileUpload.is-error{--components-fileUpload-instruction-filename-color: var(--palettes-critical-800);--components-fileUpload-backgroundColor: var(--palettes-critical-50);--components-fileUpload-borderColor: var(--palettes-critical-400)}.fileUpload.is-error:hover{--components-fileUpload-borderColor: var(--palettes-critical-600)}.fileUpload.is-droppable{--components-fileUpload-borderStyle: solid;--components-fileUpload-backgroundColor: var(--palettes-product-50);--components-fileUpload-borderColor: var(--palettes-product-600)}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}@layer mods{.fileToolbar .fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.fileToolbar .fileToolbar-list-item-button.button:hover,.fileToolbar .fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar .fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar .fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar .fileToolbar-list-item-button.button{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.fileToolbar .fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}.fileToolbar .fileToolbar-list-item-button.button{--components-button-borderRadius: 4px;--components-button-padding: var(--pr-t-spacings-75)}}\n"] }]
|
|
369
369
|
}], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], inlineMessageError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineMessageError", required: false }] }], previewUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewUrl", required: false }] }], deleteFile: [{ type: i0.Output, args: ["deleteFile"] }], displayFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFileName", required: false }] }] } });
|
|
370
370
|
|
|
371
371
|
/**
|