@sebgroup/green-angular 5.13.0 → 5.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/v-angular/drag-drop/drag-drop.component.mjs +2 -2
- package/esm2022/v-angular/drag-drop/drag-drop.component.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -449,11 +449,11 @@ export class NggvDragDropComponent {
|
|
|
449
449
|
}, 3000);
|
|
450
450
|
}
|
|
451
451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDragDropComponent, selector: "nggv-drag-drop", inputs: { thook: "thook", service: "service", accept: "accept", disableRemove: "disableRemove", fileLimit: "fileLimit", multiple: "multiple", list: "list", throttle: "throttle", retryAttempts: "retryAttempts", selectable: "selectable", stateMap: "stateMap", fetchStatuses: "fetchStatuses", errorCodes: "errorCodes" }, outputs: { stateChange: "stateChange", detailsClick: "detailsClick" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "deleteModalRef", first: true, predicate: ["deleteModalRef"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"], dependencies: [{ kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.NggvDialogComponent, selector: "nggv-dialog", inputs: ["thook", "shown", "initiallyShown", "heading", "title", "content", "autoClose", "payload", "dialogTitleId", "dialogBodyId", "closeModalOnEscape", "closeButtonAriaLabel", "buttons"], outputs: ["nggvCloseEvent", "nggvPositiveEvent", "nggvNeutralEvent", "nggvNegativeEvent"], exportAs: ["dialog"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.ValuePipe, name: "value" }] }); }
|
|
452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDragDropComponent, selector: "nggv-drag-drop", inputs: { thook: "thook", service: "service", accept: "accept", disableRemove: "disableRemove", fileLimit: "fileLimit", multiple: "multiple", list: "list", throttle: "throttle", retryAttempts: "retryAttempts", selectable: "selectable", stateMap: "stateMap", fetchStatuses: "fetchStatuses", errorCodes: "errorCodes" }, outputs: { stateChange: "stateChange", detailsClick: "detailsClick" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "deleteModalRef", first: true, predicate: ["deleteModalRef"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em;overflow-wrap:anywhere}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"], dependencies: [{ kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.NggvDialogComponent, selector: "nggv-dialog", inputs: ["thook", "shown", "initiallyShown", "heading", "title", "content", "autoClose", "payload", "dialogTitleId", "dialogBodyId", "closeModalOnEscape", "closeButtonAriaLabel", "buttons"], outputs: ["nggvCloseEvent", "nggvPositiveEvent", "nggvNeutralEvent", "nggvNegativeEvent"], exportAs: ["dialog"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.ValuePipe, name: "value" }] }); }
|
|
453
453
|
}
|
|
454
454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropComponent, decorators: [{
|
|
455
455
|
type: Component,
|
|
456
|
-
args: [{ selector: 'nggv-drag-drop', template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"] }]
|
|
456
|
+
args: [{ selector: 'nggv-drag-drop', template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em;overflow-wrap:anywhere}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"] }]
|
|
457
457
|
}], propDecorators: { deleteModalRef: [{
|
|
458
458
|
type: ViewChild,
|
|
459
459
|
args: ['deleteModalRef']
|
|
@@ -449,11 +449,11 @@ export class NggvDragDropComponent {
|
|
|
449
449
|
}, 3000);
|
|
450
450
|
}
|
|
451
451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDragDropComponent, selector: "nggv-drag-drop", inputs: { thook: "thook", service: "service", accept: "accept", disableRemove: "disableRemove", fileLimit: "fileLimit", multiple: "multiple", list: "list", throttle: "throttle", retryAttempts: "retryAttempts", selectable: "selectable", stateMap: "stateMap", fetchStatuses: "fetchStatuses", errorCodes: "errorCodes" }, outputs: { stateChange: "stateChange", detailsClick: "detailsClick" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "deleteModalRef", first: true, predicate: ["deleteModalRef"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"], dependencies: [{ kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.NggvDialogComponent, selector: "nggv-dialog", inputs: ["thook", "shown", "initiallyShown", "heading", "title", "content", "autoClose", "payload", "dialogTitleId", "dialogBodyId", "closeModalOnEscape", "closeButtonAriaLabel", "buttons"], outputs: ["nggvCloseEvent", "nggvPositiveEvent", "nggvNeutralEvent", "nggvNegativeEvent"], exportAs: ["dialog"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.ValuePipe, name: "value" }] }); }
|
|
452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDragDropComponent, selector: "nggv-drag-drop", inputs: { thook: "thook", service: "service", accept: "accept", disableRemove: "disableRemove", fileLimit: "fileLimit", multiple: "multiple", list: "list", throttle: "throttle", retryAttempts: "retryAttempts", selectable: "selectable", stateMap: "stateMap", fetchStatuses: "fetchStatuses", errorCodes: "errorCodes" }, outputs: { stateChange: "stateChange", detailsClick: "detailsClick" }, host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" }, properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "deleteModalRef", first: true, predicate: ["deleteModalRef"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em;overflow-wrap:anywhere}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"], dependencies: [{ kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.NggvDialogComponent, selector: "nggv-dialog", inputs: ["thook", "shown", "initiallyShown", "heading", "title", "content", "autoClose", "payload", "dialogTitleId", "dialogBodyId", "closeModalOnEscape", "closeButtonAriaLabel", "buttons"], outputs: ["nggvCloseEvent", "nggvPositiveEvent", "nggvNeutralEvent", "nggvNegativeEvent"], exportAs: ["dialog"] }, { kind: "directive", type: i3.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.ValuePipe, name: "value" }] }); }
|
|
453
453
|
}
|
|
454
454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDragDropComponent, decorators: [{
|
|
455
455
|
type: Component,
|
|
456
|
-
args: [{ selector: 'nggv-drag-drop', template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"] }]
|
|
456
|
+
args: [{ selector: 'nggv-drag-drop', template: "<ng-container *transloco=\"let t\">\n <form enctype=\"multipart/form-data\" #dragDropForm>\n <div class=\"gds-drag-drop\">\n <input\n class=\"gds-drag-drop__input\"\n id=\"drag-drop\"\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple && list\"\n (change)=\"onDrop($event)\"\n />\n <label\n [ngClass]=\"{\n 'gds-drag-drop__label': true,\n 'gds-drag-drop__label--above': componentState === 'over',\n }\"\n for=\"drag-drop\"\n [attr.data-thook]=\"thook + '-picker'\"\n [attr.aria-busy]=\"loading\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (dragend)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n [ngSwitch]=\"componentState\"\n >\n <!-- COMPONENT STATE NORMAL -->\n <ng-template [ngSwitchCase]=\"'normal'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n ><em>{{ t('dragDrop.label.fileChoose') }}</em>\n <ng-template [ngIf]=\"isDragDropAvailable\">\n {{ t('dragDrop.label.fileDrag') }}</ng-template\n >\n </ng-template>\n\n <!-- COMPONENT STATE OVER -->\n <ng-template [ngSwitchCase]=\"'over'\">\n <gds-icon-cloud-upload *nggCoreElement></gds-icon-cloud-upload\n >{{ t('dragDrop.label.fileDrop') }}\n </ng-template>\n\n <!-- COMPONENT STATE UPLOADING -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <strong class=\"filename\">{{ lastFile?.fileName }}</strong>\n\n <!-- UPLOADING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngIf]=\"lastFile?.uploadState === 'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: lastFile,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n </ng-template>\n\n <!-- COMPONENT STATE DONE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n {{ t('dragDrop.label.fileUploaded', { filename: lastFile?.fileName })\n }}<gds-icon-checkmark *nggCoreElement></gds-icon-checkmark>\n </ng-template>\n </label>\n\n <!-- LIST -->\n <table\n class=\"gds-table file-list\"\n [attr.data-thook]=\"thook + '-file-list'\"\n *ngIf=\"list\"\n >\n <thead>\n <tr>\n <th *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n id=\"select-all\"\n />\n <label for=\"select-all\"></label>\n </div>\n </th>\n <th class=\"gds-table__primary-col col-name\">\n {{ t('dragDrop.label.fileName') }}\n </th>\n <th class=\"col-status\">\n {{ t('dragDrop.label.fileStatus') }}\n </th>\n <th class=\"col-actions\"></th>\n </tr>\n </thead>\n <tbody>\n <tr\n [attr.data-thook]=\"thook + '-file'\"\n *ngFor=\"let file of files | value\"\n >\n <td *ngIf=\"selectable\">\n <div class=\"gds-field-checkbox-wrap\">\n <input\n type=\"checkbox\"\n aria-label=\"Field label\"\n [id]=\"'file-checkbox-' + file.id\"\n />\n <label [for]=\"'file-checkbox-' + file.id\"></label>\n </div>\n </td>\n <td\n class=\"gds-table__primary-col\"\n [attr.data-thook]=\"thook + '-file-name'\"\n >\n {{ file.fileName }}\n </td>\n <td\n [attr.data-thook]=\"thook + '-file-status'\"\n [ngSwitch]=\"file.uploadState\"\n >\n <!-- UPLOADING STATE -->\n <ng-template [ngSwitchCase]=\"'uploading'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- UPLOADED STATE -->\n <ng-template [ngSwitchCase]=\"'uploaded'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateUploaded'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- VALIDATING STATE -->\n <ng-template [ngSwitchCase]=\"'validating'\">\n <ng-template\n [ngTemplateOutlet]=\"progressTemplate\"\n [ngTemplateOutletContext]=\"{\n file: file,\n text: t('dragDrop.text.fileStateValidating'),\n }\"\n ></ng-template>\n </ng-template>\n\n <!-- ABORTED STATE -->\n <ng-template [ngSwitchCase]=\"'aborted'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n </ng-template>\n\n <!-- ERROR STATE -->\n <ng-template [ngSwitchCase]=\"'error'\">\n <span\n class=\"error-text\"\n [transloco]=\"\n 'dragDrop.error.' + file.internalStatusReasonCode\n \"\n [translocoParams]=\"translateParams(file)\"\n *ngIf=\"file.internalStatusReasonCode\"\n ></span>\n <br />\n <a\n (click)=\"detailsClick.emit(file)\"\n style=\"cursor: pointer\"\n *ngIf=\"\n file.statusReasonInformation &&\n file.statusReasonInformation.length\n \"\n >\n {{ t('dragDrop.link.viewDetails') }}\n </a>\n </ng-template>\n\n <!-- DONE STATE -->\n <ng-template [ngSwitchCase]=\"'done'\">\n <span class=\"success-text\">{{\n t('dragDrop.text.fileStateDone')\n }}</span>\n </ng-template>\n </td>\n\n <td class=\"gds-table__numeric-col\">\n <a\n class=\"remove\"\n tabindex=\"0\"\n (click)=\"onRemove(file.id, file.uploadState)\"\n *ngIf=\"!disableRemove.includes(file.uploadState)\"\n >\n <gds-icon-cross-small *nggCoreElement></gds-icon-cross-small>\n </a>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </form>\n\n <nggv-dialog\n #deleteModalRef\n [title]=\"t('dragDrop.text.fileCancelModalTitle')\"\n [content]=\"\n t('dragDrop.text.fileCancelModalContent', {\n name: markedForDeletion?.fileName,\n })\n \"\n [payload]=\"markedForDeletion\"\n [buttons]=\"{\n negative: 'dragDrop.text.fileCancelConfirm',\n positive: 'dragDrop.text.fileCancelDeny',\n }\"\n (nggvNegativeEvent)=\"onConfirmRemove($any($event))\"\n ></nggv-dialog>\n\n <!-- PROGRESS TEMPLATE -->\n\n <ng-template\n #progressTemplate\n let-file=\"\n file\"\n let-text=\"text\"\n >\n <div class=\"progress-wrapper\">\n <progress\n class=\"gds-progress-bar progress\"\n max=\"100\"\n [value]=\"file.progress\"\n >\n {{\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </progress>\n <ng-template [ngIf]=\"stateMap.validating.length\">\n <div\n class=\"gds-progress-indicator indicator\"\n *ngIf=\"uploadStateIsArray(stateMap.validating); else singleValidation\"\n >\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"i <= stateMap.validating.indexOf(file.status)\"\n *ngFor=\"let state of stateMap.validating; let i = index\"\n ></div>\n </div>\n </ng-template>\n <ng-template #singleValidation>\n <div class=\"gds-progress-indicator indicator\">\n <!-- eslint-disable @angular-eslint/template/eqeqeq -->\n <div\n class=\"gds-progress-indicator__step\"\n [class.-done]=\"file.status == stateMap.validating\"\n ></div>\n <!-- eslint-enable @angular-eslint/template/eqeqeq -->\n </div>\n </ng-template>\n </div>\n <span class=\"progress-text\">\n {{\n text ||\n t('dragDrop.text.fileStateUploading', {\n uploaded:\n (file.raw?.size * (file.progress / 100)) / 1024 | number: '0.0-0',\n size: file.raw?.size / 1024 | number: '0.0-0',\n progress: file.progress,\n unit: 'kB',\n })\n }}\n </span>\n </ng-template>\n</ng-container>\n", styles: [":host .gds-drag-drop{width:100%}:host .gds-drag-drop__input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}:host .gds-drag-drop__label{display:flex;justify-content:center;align-items:center;gap:.5rem;border:2px dashed #868686;font-weight:500;padding:2.25em 1.5em;overflow-wrap:anywhere}:host .gds-drag-drop__input+.gds-drag-drop__label em{font-style:normal;color:#0092e1;cursor:pointer}:host .gds-drag-drop table,:host .gds-drag-drop .gds-table{margin-top:2.25em}:host .gds-table{width:100%;font-family:SEBSansSerif,Arial,sans-serif;border-spacing:0}:host .gds-table th,:host .gds-table td{text-align:left;border-bottom:1px solid #e9e9e9}:host .gds-table thead{color:#333;font-size:1em}:host .gds-table thead tr{min-height:2em}:host .gds-table thead th,:host .gds-table thead td{border-bottom:1px solid #cecece;font-weight:500}:host .gds-table tbody{font-size:1em}:host .gds-table tbody tr{height:2.5em;border-bottom:1px solid #adadad}:host .gds-table tbody tr:hover td,:host .gds-table tbody tr:hover th{background-color:#f8f8f8}:host .gds-table tfoot{font-weight:500;font-size:1em}:host .gds-table tfoot tr{height:2.5em}:host .gds-table tfoot td{border-top:1px solid #cecece;border-bottom-width:0}:host tr .gds-table__numeric-col{text-align:right}:host tr .gds-table__negative-col{color:#bb000c}:host tr .gds-table__primary-col{color:#000}:host .gds-table__sortable-col{cursor:pointer;white-space:nowrap;margin-left:.5em}:host .gds-table__sortable-col:after{content:\"\";display:inline-block;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\");background-repeat:no-repeat;margin-left:.25rem;width:.625rem;height:1rem;vertical-align:text-bottom}:host .gds-table__sortable-col:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23adadad' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23007ac7' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--asc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23cecece' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%2341b0ee' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%23007ac7' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23adadad' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table__sortable-col--desc:hover:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 644'%3E%3Cpath fill='%2341b0ee' transform='translate(0 260)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath fill='%23cecece' transform='translate(0 -120)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E\")}:host .gds-table .gds-field-checkbox-wrap{width:2.5rem}:host .gds-table .gds-field-checkbox-wrap label{box-shadow:none!important}:host .gds-table--fixed-l-col{overflow:auto;display:block;position:relative;max-width:100%}:host .gds-table--fixed-l-col td,:host .gds-table--fixed-l-col th{width:auto!important;min-width:150px}:host .gds-table--fixed-l-col td:first-child,:host .gds-table--fixed-l-col th:first-child{position:sticky;left:0;background-color:#fff;border-right:1px solid #e9e9e9}:host .gds-table--fixed-l-col thead th{top:0;z-index:1;position:sticky;background-color:#fff}:host .gds-table--fixed-l-col thead th:first-child{z-index:2}:host .gds-progress-bar{appearance:none;height:.3125rem;width:100%;position:relative;overflow:hidden;color:#45b400;border-width:0;background-color:#e9e9e9}:host .gds-progress-bar:before{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:.3125rem;background-color:#45b400;animation:gds-progressbar-loading 2s linear infinite}:host .gds-progress-bar::-webkit-progress-value{background-color:transparent}:host .gds-progress-bar::-moz-progress-bar{background-color:transparent}:host .gds-progress-bar::-ms-fill{background-color:transparent;border-width:0}:host .gds-progress-bar::-webkit-progress-bar{background-color:#e9e9e9}@keyframes gds-progressbar-loading{0%{left:-30%;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}:host .gds-progress-bar[value]:before{content:none}:host .gds-progress-bar[value]::-webkit-progress-value{background-color:#45b400}:host .gds-progress-bar[value]::-moz-progress-bar{background-color:#45b400}:host .gds-progress-bar[value]::-ms-fill{background-color:#45b400}:host .gds-progress-indicator{display:flex;width:100%}:host .gds-progress-indicator__step{flex-grow:1;height:.5rem;margin-right:.125rem;background-color:#e9e9e9}:host .gds-progress-indicator__step.-done{background-color:#45b400}:host .gds-progress-indicator__step:last-child{margin-right:0}:host .file-list th:first-child,:host .file-list td:first-child{width:auto}:host .filename{display:block;margin-bottom:.5rem}:host .col-name{width:40%}:host .col-status{width:30%}:host .col-actions{width:.1%}:host .progress-wrapper{display:flex}:host .progress,:host .indicator{height:.5rem}:host .gds-progress-indicator__step{margin-right:0}:host .progress{color:#45b400}:host .progress::-webkit-progress-value{background-color:#45b400}:host .progress::-moz-progress-bar{background-color:#45b400}:host .progress::-ms-fill{background-color:#45b400}:host .progress-text{display:block;margin-top:.125rem}:host .error-text{color:#bb000c}:host .success-text{color:#308800}:host .remove{padding:0 .5rem;font-size:1.5em;color:#868686;cursor:pointer;display:grid;place-content:center}:host .remove:hover,:host .remove:focus{color:#bb000c}\n"] }]
|
|
457
457
|
}], propDecorators: { deleteModalRef: [{
|
|
458
458
|
type: ViewChild,
|
|
459
459
|
args: ['deleteModalRef']
|