ngx-uploader-wrapper/src/ngx-uploader-wrapper.component.metadata.json

An Angular component wrapper for ngx-uploader

[{"__symbolic":"module","version":4,"metadata":{"NgxUploaderWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"ngx-uploader-wrapper","template":"\n    <div class=\"upload-box\">\n      <div class=\"upload-box-content\">\n        <div class=\"drop-container\" ngFileDrop [options]=\"options\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\n          <span [innerHTML]=\"dragText\"></span>\n          <label class=\"upload-button\">\n            <input type=\"file\" ngFileSelect [options]=\"options\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [accept]=\"accept\" multiple> {{ browseText }}\n          </label>\n        </div>\n        <div class=\"upload-item\" *ngFor=\"let f of files | merge:filesUploaded; let i = index;\">\n          <div class=\"upload-item-content\">\n            <div class=\"filename\">\n              <i class=\"ionicon ion-ios-copy\"></i>\n              <span>{{ f.name }}</span>\n            </div>\n            <div class=\"progress-content\">\n              <div class=\"progress\">\n                <span class=\"bar\" [style.width]=\"f?.progress?.data?.percentage + '%'\" [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                <span class=\"upload\" *ngIf=\"f.progress?.data?.startTime === null && !auto\" (click)=\"uploadFile(f, i)\">\n                  <i class=\"ionicon ion-ios-cloud-upload\"></i> {{ fileUploadText }}\n                </span>\n              </div>\n            </div>\n            <div class=\"progress-text-content\">\n              <span class=\"progress-text\" [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                <span>{{ f.progress?.data?.percentage }}% </span>\n                <span *ngIf=\"f.progress?.data?.percentage === 0\" [innerHTML]=\"filePendingText\"></span>\n                <span *ngIf=\"f.progress?.data?.percentage !== 0 && f.progress?.data?.percentage !== 100\" [innerHTML]=\"fileUploadingText\"></span>\n                <span *ngIf=\"f.progress?.data?.percentage === 100\" [innerHTML]=\"fileDoneText\"></span>\n              </span>\n              <span class=\"speed-and-eta-text\" *ngIf=\"f.progress?.data?.startTime !== null && f.progress?.data?.endTime === null\">\n                <span>{{ f.progress?.data?.speedHuman }} </span>\n                <span>{{ f.progress?.data?.etaHuman }}</span>\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    .hero {\n      background: transparent;\n    }\n\n    .upload-box {\n      width: 100%;\n      height: auto;\n      display: inline-block;\n      border-radius: 10px;\n      background: white;\n    }\n\n    .upload-box .upload-box-content .upload-item, .upload-box .upload-box-content .drop-container {\n      width: 100%;\n      height: 150px;\n    }\n\n    .upload-box .upload-box-content .drop-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: calc(100% - 8px - 8px);\n      border: 4px dashed #555;\n      margin: 8px;\n    }\n\n    .upload-box .upload-box-content .drop-container span {\n      font-size: 16px;\n      font-weight: 400;\n      color: #8793A2;\n    }\n\n    .upload-box .upload-box-content .drop-container .upload-button {\n      display: inline-block;\n      border: none;\n      outline: none;\n      cursor: pointer;\n      font-weight: 600;\n      padding: 0 2px;\n    }\n\n    .upload-box .upload-box-content .drop-container .upload-button input {\n      display: none;\n    }\n\n    .upload-box .upload-box-content .upload-item {\n      display: flex;\n      align-items: center;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content {\n      width: 100%;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .filename {\n      display: flex;\n      align-items: center;\n      margin: 0 30px;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .filename i {\n      color: #8793A2;\n      opacity: .8;\n      font-size: 24px;\n      margin-right: 12px;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .filename span {\n      color: #8793A2;\n      font-size: 14px;\n      font-weight: 400;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-content {\n      display: flex;\n      align-items: center;\n      margin: 10px 30px;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 18px;\n      border-radius: 10px;\n      background: #dcdcdc;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .bar {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: inherit;\n      background: linear-gradient(90deg, #13ebff 0%, #6cefbd 100%);\n      border-top-left-radius: inherit;\n      border-bottom-left-radius: inherit;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .bar.is-done {\n      background: #a0d100;\n      border-top-right-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .upload {\n      border-top-right-radius: inherit;\n      border-bottom-right-radius: inherit;\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: inherit;\n      width: 100px;\n      background: #86af00;\n      font-size: 14px;\n      padding: 0 10px;\n      cursor: pointer;\n      color: white;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-content .progress .upload:hover {\n      background: #638201;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin: 10px 30px 0;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content .progress-text {\n      font-size: 13px;\n      font-weight: 600;\n      color: #4250f4;\n      transition: color 200ms ease-out;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content .progress-text.is-done {\n      color: #a0d100;\n    }\n\n    .upload-box .upload-box-content .upload-item .upload-item-content .progress-text-content .speed-and-eta-text {\n      font-size: 13px;\n      font-weight: 600;\n      color: #8793A2;\n    }\n\n    .upload-box .help-text {\n      width: 100%;\n      display: inline-block;\n      padding: 10px 30px;\n      font-size: 12px;\n      color: #8793A2;\n      box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.6);\n    }\n\n    .upload-box .help-text span {\n      display: block;\n      text-align: center;\n      margin: 5px 0;\n    }\n\n    .upload-box .help-text span img {\n      display: block;\n      width: 30px;\n      margin: 0 auto 5px auto;\n    }\n  "]}]}],"members":{"concurrency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":225,"character":3}}]}],"maxUploads":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":226,"character":3}}]}],"method":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":227,"character":3}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":228,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":229,"character":3}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":230,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":231,"character":3}}]}],"auto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":232,"character":3}}]}],"dragText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":233,"character":3}}]}],"browseText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":3}}]}],"fileUploadText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":235,"character":3}}]}],"filePendingText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":3}}]}],"fileUploadingText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":237,"character":3}}]}],"fileDoneText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":238,"character":3}}]}],"onFileEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":239,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onUploadOutput":[{"__symbolic":"method"}],"startUpload":[{"__symbolic":"method"}],"cancelUpload":[{"__symbolic":"method"}],"removeFile":[{"__symbolic":"method"}],"removeAllFiles":[{"__symbolic":"method"}],"uploadFile":[{"__symbolic":"method"}]}},"MergePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":327,"character":1},"arguments":[{"name":"merge"}]}],"members":{"transform":[{"__symbolic":"method"}]}}}}]