@aquera/nile-elements 0.1.63-beta-1.2 → 0.1.64-beta-1.0
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/demo/index.html +8 -8
- package/dist/index.js +84 -84
- package/dist/nile-file-preview/nile-file-preview.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.css.esm.js +19 -2
- package/dist/nile-file-preview/nile-file-preview.esm.js +3 -3
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js +1 -1
- package/dist/nile-file-preview/nile-file-preview.template.cjs.js.map +1 -1
- package/dist/nile-file-preview/nile-file-preview.template.esm.js +22 -22
- package/dist/nile-file-preview/utils/index.cjs.js +1 -1
- package/dist/nile-file-preview/utils/index.esm.js +1 -1
- package/dist/nile-file-preview/utils/nile-file-preview.util.cjs.js +1 -1
- package/dist/nile-file-preview/utils/nile-file-preview.util.cjs.js.map +1 -1
- package/dist/nile-file-preview/utils/nile-file-preview.util.esm.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.cjs.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.css.esm.js +1 -1
- package/dist/nile-file-upload/nile-file-upload.esm.js +2 -2
- package/dist/nile-file-upload/nile-file-upload.template.cjs.js +3 -3
- package/dist/nile-file-upload/nile-file-upload.template.cjs.js.map +1 -1
- package/dist/nile-file-upload/nile-file-upload.template.esm.js +22 -22
- package/dist/nile-file-upload/utils/file-validation.util.cjs.js +2 -2
- package/dist/nile-file-upload/utils/file-validation.util.cjs.js.map +1 -1
- package/dist/nile-file-upload/utils/file-validation.util.esm.js +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.css.js +19 -2
- package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.d.ts +1 -0
- package/dist/src/nile-file-preview/nile-file-preview.js +7 -6
- package/dist/src/nile-file-preview/nile-file-preview.js.map +1 -1
- package/dist/src/nile-file-preview/nile-file-preview.template.d.ts +3 -2
- package/dist/src/nile-file-preview/nile-file-preview.template.js +16 -10
- package/dist/src/nile-file-preview/nile-file-preview.template.js.map +1 -1
- package/dist/src/nile-file-preview/utils/nile-file-preview.util.d.ts +1 -2
- package/dist/src/nile-file-preview/utils/nile-file-preview.util.js +8 -8
- package/dist/src/nile-file-preview/utils/nile-file-preview.util.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.css.js +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.css.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.d.ts +1 -0
- package/dist/src/nile-file-upload/nile-file-upload.js +7 -6
- package/dist/src/nile-file-upload/nile-file-upload.js.map +1 -1
- package/dist/src/nile-file-upload/nile-file-upload.template.d.ts +5 -4
- package/dist/src/nile-file-upload/nile-file-upload.template.js +24 -15
- package/dist/src/nile-file-upload/nile-file-upload.template.js.map +1 -1
- package/dist/src/nile-file-upload/utils/file-validation.util.d.ts +1 -0
- package/dist/src/nile-file-upload/utils/file-validation.util.js +11 -0
- package/dist/src/nile-file-upload/utils/file-validation.util.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-file-preview/nile-file-preview.css.ts +19 -2
- package/src/nile-file-preview/nile-file-preview.template.ts +23 -10
- package/src/nile-file-preview/nile-file-preview.ts +7 -6
- package/src/nile-file-preview/utils/nile-file-preview.util.ts +7 -10
- package/src/nile-file-upload/nile-file-upload.css.ts +1 -1
- package/src/nile-file-upload/nile-file-upload.template.ts +35 -17
- package/src/nile-file-upload/nile-file-upload.ts +7 -6
- package/src/nile-file-upload/utils/file-validation.util.ts +12 -0
- package/vscode-html-custom-data.json +2 -2
@@ -1,2 +1,2 @@
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","./nile-file-preview.css.cjs.js","../internal/nile-element.cjs.js","lit/decorators.js","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js","lit","./nile-file-preview.template.cjs.js"],function(_export,_context){"use strict";var t,s,i,e,h,a,r,l,o,n,p,c,m,d,f,u,y,j,v,w,_templateObject,_templateObject2,g;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _regeneratorRuntime(){"use strict";/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */_regeneratorRuntime=function _regeneratorRuntime(){return e;};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value;},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function define(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e];}try{define({},"");}catch(t){define=function define(t,e,r){return t[e]=r;};}function wrap(t,e,r,n){var i=e&&e.prototype instanceof Generator?e:Generator,a=Object.create(i.prototype),c=new Context(n||[]);return o(a,"_invoke",{value:makeInvokeMethod(t,r,c)}),a;}function tryCatch(t,e,r){try{return{type:"normal",arg:t.call(e,r)};}catch(t){return{type:"throw",arg:t};}}e.wrap=wrap;var h="suspendedStart",l="suspendedYield",f="executing",s="completed",y={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var p={};define(p,a,function(){return this;});var d=Object.getPrototypeOf,v=d&&d(d(values([])));v&&v!==r&&n.call(v,a)&&(p=v);var g=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(p);function defineIteratorMethods(t){["next","throw","return"].forEach(function(e){define(t,e,function(t){return this._invoke(e,t);});});}function AsyncIterator(t,e){function invoke(r,o,i,a){var c=tryCatch(t[r],t,o);if("throw"!==c.type){var u=c.arg,h=u.value;return h&&"object"==_typeof(h)&&n.call(h,"__await")?e.resolve(h.__await).then(function(t){invoke("next",t,i,a);},function(t){invoke("throw",t,i,a);}):e.resolve(h).then(function(t){u.value=t,i(u);},function(t){return invoke("throw",t,i,a);});}a(c.arg);}var r;o(this,"_invoke",{value:function value(t,n){function callInvokeWithMethodAndArg(){return new e(function(e,r){invoke(t,n,e,r);});}return r=r?r.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg();}});}function makeInvokeMethod(e,r,n){var o=h;return function(i,a){if(o===f)throw Error("Generator is already running");if(o===s){if("throw"===i)throw a;return{value:t,done:!0};}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=maybeInvokeDelegate(c,n);if(u){if(u===y)continue;return u;}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===h)throw o=s,n.arg;n.dispatchException(n.arg);}else"return"===n.method&&n.abrupt("return",n.arg);o=f;var p=tryCatch(e,r,n);if("normal"===p.type){if(o=n.done?s:l,p.arg===y)continue;return{value:p.arg,done:n.done};}"throw"===p.type&&(o=s,n.method="throw",n.arg=p.arg);}};}function maybeInvokeDelegate(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator["return"]&&(r.method="return",r.arg=t,maybeInvokeDelegate(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),y;var i=tryCatch(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,y;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,y):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y);}function pushTryEntry(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e);}function resetTryEntry(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e;}function Context(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(pushTryEntry,this),this.reset(!0);}function values(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function next(){for(;++o<e.length;)if(n.call(e,o))return next.value=e[o],next.done=!1,next;return next.value=t,next.done=!0,next;};return i.next=i;}}throw new TypeError(_typeof(e)+" is not iterable");}return GeneratorFunction.prototype=GeneratorFunctionPrototype,o(g,"constructor",{value:GeneratorFunctionPrototype,configurable:!0}),o(GeneratorFunctionPrototype,"constructor",{value:GeneratorFunction,configurable:!0}),GeneratorFunction.displayName=define(GeneratorFunctionPrototype,u,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===GeneratorFunction||"GeneratorFunction"===(e.displayName||e.name));},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,GeneratorFunctionPrototype):(t.__proto__=GeneratorFunctionPrototype,define(t,u,"GeneratorFunction")),t.prototype=Object.create(g),t;},e.awrap=function(t){return{__await:t};},defineIteratorMethods(AsyncIterator.prototype),define(AsyncIterator.prototype,c,function(){return this;}),e.AsyncIterator=AsyncIterator,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new AsyncIterator(wrap(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then(function(t){return t.done?t.value:a.next();});},defineIteratorMethods(g),define(g,u,"Generator"),define(g,a,function(){return this;}),define(g,"toString",function(){return"[object Generator]";}),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function next(){for(;r.length;){var t=r.pop();if(t in e)return next.value=t,next.done=!1,next;}return next.done=!0,next;};},e.values=values,Context.prototype={constructor:Context,reset:function reset(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(resetTryEntry),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t);},stop:function stop(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval;},dispatchException:function dispatchException(e){if(this.done)throw e;var r=this;function handle(n,o){return a.type="throw",a.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o;}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return handle("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}else if(c){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}}}},abrupt:function abrupt(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break;}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a);},complete:function complete(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y;},finish:function finish(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),resetTryEntry(r),y;}},"catch":function _catch(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;resetTryEntry(r);}return o;}}throw Error("illegal catch attempt");},delegateYield:function delegateYield(e,r,n){return this.delegate={iterator:values(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),y;}},e;}function asyncGeneratorStep(n,t,e,r,o,a,c){try{var i=n[a](c),u=i.value;}catch(n){return void e(n);}i.done?t(u):Promise.resolve(u).then(r,o);}function _asyncToGenerator(n){return function(){var t=this,e=arguments;return new Promise(function(r,o){var a=n.apply(t,e);function _next(n){asyncGeneratorStep(a,r,o,_next,_throw,"next",n);}function _throw(n){asyncGeneratorStep(a,r,o,_next,_throw,"throw",n);}_next(void 0);});};}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_nileFilePreviewCssCjsJs){s=_nileFilePreviewCssCjsJs.s;},function(_internalNileElementCjsJs){i=_internalNileElementCjsJs.N;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;h=_litDecoratorsJs.customElement;},function(_utilsNileFilePreviewUtilCjsJs){a=_utilsNileFilePreviewUtilCjsJs.a;r=_utilsNileFilePreviewUtilCjsJs.b;},function(_typesNileFilePreviewEnumsCjsJs){l=_typesNileFilePreviewEnumsCjsJs.F;o=_typesNileFilePreviewEnumsCjsJs.a;n=_typesNileFilePreviewEnumsCjsJs.b;p=_typesNileFilePreviewEnumsCjsJs.c;},function(_lit){c=_lit.html;},function(_nileFilePreviewTemplateCjsJs){m=_nileFilePreviewTemplateCjsJs.g;d=_nileFilePreviewTemplateCjsJs.a;f=_nileFilePreviewTemplateCjsJs.b;u=_nileFilePreviewTemplateCjsJs.c;y=_nileFilePreviewTemplateCjsJs.d;j=_nileFilePreviewTemplateCjsJs.e;v=_nileFilePreviewTemplateCjsJs.f;w=_nileFilePreviewTemplateCjsJs.h;}],execute:function execute(){_export("N",g=/*#__PURE__*/function(_i){function g(){var _this;_classCallCheck(this,g);_this=_callSuper(this,g,arguments),_this.errorMessage="",_this.fileUrl="",_this.uploadStatus=0,_this.state=l.DEFAULT,_this.variant=o.HORIZONTAL,_this.inputFileName="",_this.inputFileHtml=null,_this.originalUrl="",_this.dummyFile=new File(["sdfjbs ewhf"],"dummy.txt",{type:"text/plain"});return _this;}_inherits(g,_i);return _createClass(g,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(g,"connectedCallback",this,3)([]),this.emit(n.NILE_INIT);}},{key:"firstUpdated",value:function firstUpdated(t){_superPropGet(g,"firstUpdated",this,3)([t]),a(this);}},{key:"updated",value:function updated(t){t.has("uploadStatus")&&this.uploadStatus?this.uploadStatus<100?this.createUploadState(this.inputFile,this.uploadStatus):this.createState(this.inputFile):t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(n.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl?(this.handleFileUrl(this.fileUrl),this.emit(n.NILE_RECEIVE)):t.has("errorMessage")&&this.createState(this.inputFile);}},{key:"createUploadState",value:function createUploadState(t,s){var i=this.variant===o.HORIZONTAL;this.inputFileHtml=i?m(t,s):d(t,s),this.requestUpdate();}},{key:"handleFileUrl",value:function(){var _handleFileUrl=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(t){var _s,_i2,_e,_h,_s2;return _regeneratorRuntime().wrap(function _callee$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:this.originalUrl=t;_context2.prev=1;_context2.next=4;return fetch(t);case 4:_s=_context2.sent;_context2.next=7;return _s.blob();case 7:_i2=_context2.sent;_e=this.inputFileName||t.split("/").pop()||p.UNKNOWN_FILE_NAME;_h=new File([_i2],_e,{type:_i2.type});this.createState(_h);_context2.next=17;break;case 13:_context2.prev=13;_context2.t0=_context2["catch"](1);_s2=new File([],this.inputFileName||p.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=p.FAILED_TO_LOAD,console.error(this.errorMessage),this.inputFileHtml=this.variant===o.HORIZONTAL?f(_s2,this.errorMessage,this.originalUrl):u(_s2,this.errorMessage,this.originalUrl),this.requestUpdate();case 17:case"end":return _context2.stop();}},_callee,this,[[1,13]]);}));function handleFileUrl(_x){return _handleFileUrl.apply(this,arguments);}return handleFileUrl;}()},{key:"createState",value:function(){var _createState=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(t){var s,_i3;return _regeneratorRuntime().wrap(function _callee2$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:s=this.variant===o.HORIZONTAL;if(!this.errorMessage){_context3.next=5;break;}this.inputFileHtml=s?f(t,this.errorMessage,this.originalUrl):u(t,this.errorMessage,this.originalUrl);_context3.next=19;break;case 5:if(!t.type.startsWith("image/")){_context3.next=18;break;}_context3.prev=6;_context3.next=9;return r(t);case 9:_i3=_context3.sent;this.inputFileHtml=s?y(_i3,t,this.originalUrl):j(_i3,t,this.originalUrl);_context3.next=16;break;case 13:_context3.prev=13;_context3.t0=_context3["catch"](6);this.inputFileHtml=s?v(t,this.originalUrl):w(t,this.originalUrl);case 16:_context3.next=19;break;case 18:this.inputFileHtml=s?v(t,this.originalUrl):w(t,this.originalUrl);case 19:this.requestUpdate();case 20:case"end":return _context3.stop();}},_callee2,this,[[6,13]]);}));function createState(_x2){return _createState.apply(this,arguments);}return createState;}()},{key:"render",value:function render(){return c(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t\t","\n "])),this.inputFileHtml?this.inputFileHtml:c(_templateObject2||(_templateObject2=_taggedTemplateLiteral([""]))));}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(g,"disconnectedCallback",this,3)([]),this.emit(n.NILE_DESTROY);}}],[{key:"styles",get:function get(){return[s];}}]);}(i));t([e({type:String})],g.prototype,"errorMessage",void 0),t([e({type:Object})],g.prototype,"inputFile",void 0),t([e({type:String})],g.prototype,"fileUrl",void 0),t([e({type:Number})],g.prototype,"uploadStatus",void 0),t([e({type:String})],g.prototype,"state",void 0),t([e({type:String})],g.prototype,"variant",void 0),t([e({type:String})],g.prototype,"inputFileName",void 0),_export("N",g=t([h("nile-file-preview")],g));}};});
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","./nile-file-preview.css.cjs.js","../internal/nile-element.cjs.js","lit/decorators.js","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js","lit","./nile-file-preview.template.cjs.js"],function(_export,_context){"use strict";var t,s,i,e,h,a,r,l,o,n,p,c,m,d,f,u,y,j,v,_templateObject,_templateObject2,w;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _regeneratorRuntime(){"use strict";/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */_regeneratorRuntime=function _regeneratorRuntime(){return e;};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value;},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function define(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e];}try{define({},"");}catch(t){define=function define(t,e,r){return t[e]=r;};}function wrap(t,e,r,n){var i=e&&e.prototype instanceof Generator?e:Generator,a=Object.create(i.prototype),c=new Context(n||[]);return o(a,"_invoke",{value:makeInvokeMethod(t,r,c)}),a;}function tryCatch(t,e,r){try{return{type:"normal",arg:t.call(e,r)};}catch(t){return{type:"throw",arg:t};}}e.wrap=wrap;var h="suspendedStart",l="suspendedYield",f="executing",s="completed",y={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var p={};define(p,a,function(){return this;});var d=Object.getPrototypeOf,v=d&&d(d(values([])));v&&v!==r&&n.call(v,a)&&(p=v);var g=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(p);function defineIteratorMethods(t){["next","throw","return"].forEach(function(e){define(t,e,function(t){return this._invoke(e,t);});});}function AsyncIterator(t,e){function invoke(r,o,i,a){var c=tryCatch(t[r],t,o);if("throw"!==c.type){var u=c.arg,h=u.value;return h&&"object"==_typeof(h)&&n.call(h,"__await")?e.resolve(h.__await).then(function(t){invoke("next",t,i,a);},function(t){invoke("throw",t,i,a);}):e.resolve(h).then(function(t){u.value=t,i(u);},function(t){return invoke("throw",t,i,a);});}a(c.arg);}var r;o(this,"_invoke",{value:function value(t,n){function callInvokeWithMethodAndArg(){return new e(function(e,r){invoke(t,n,e,r);});}return r=r?r.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg();}});}function makeInvokeMethod(e,r,n){var o=h;return function(i,a){if(o===f)throw Error("Generator is already running");if(o===s){if("throw"===i)throw a;return{value:t,done:!0};}for(n.method=i,n.arg=a;;){var c=n.delegate;if(c){var u=maybeInvokeDelegate(c,n);if(u){if(u===y)continue;return u;}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===h)throw o=s,n.arg;n.dispatchException(n.arg);}else"return"===n.method&&n.abrupt("return",n.arg);o=f;var p=tryCatch(e,r,n);if("normal"===p.type){if(o=n.done?s:l,p.arg===y)continue;return{value:p.arg,done:n.done};}"throw"===p.type&&(o=s,n.method="throw",n.arg=p.arg);}};}function maybeInvokeDelegate(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator["return"]&&(r.method="return",r.arg=t,maybeInvokeDelegate(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),y;var i=tryCatch(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,y;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,y):a:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y);}function pushTryEntry(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e);}function resetTryEntry(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e;}function Context(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(pushTryEntry,this),this.reset(!0);}function values(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function next(){for(;++o<e.length;)if(n.call(e,o))return next.value=e[o],next.done=!1,next;return next.value=t,next.done=!0,next;};return i.next=i;}}throw new TypeError(_typeof(e)+" is not iterable");}return GeneratorFunction.prototype=GeneratorFunctionPrototype,o(g,"constructor",{value:GeneratorFunctionPrototype,configurable:!0}),o(GeneratorFunctionPrototype,"constructor",{value:GeneratorFunction,configurable:!0}),GeneratorFunction.displayName=define(GeneratorFunctionPrototype,u,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===GeneratorFunction||"GeneratorFunction"===(e.displayName||e.name));},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,GeneratorFunctionPrototype):(t.__proto__=GeneratorFunctionPrototype,define(t,u,"GeneratorFunction")),t.prototype=Object.create(g),t;},e.awrap=function(t){return{__await:t};},defineIteratorMethods(AsyncIterator.prototype),define(AsyncIterator.prototype,c,function(){return this;}),e.AsyncIterator=AsyncIterator,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new AsyncIterator(wrap(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then(function(t){return t.done?t.value:a.next();});},defineIteratorMethods(g),define(g,u,"Generator"),define(g,a,function(){return this;}),define(g,"toString",function(){return"[object Generator]";}),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function next(){for(;r.length;){var t=r.pop();if(t in e)return next.value=t,next.done=!1,next;}return next.done=!0,next;};},e.values=values,Context.prototype={constructor:Context,reset:function reset(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(resetTryEntry),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t);},stop:function stop(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval;},dispatchException:function dispatchException(e){if(this.done)throw e;var r=this;function handle(n,o){return a.type="throw",a.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o;}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return handle("end");if(i.tryLoc<=this.prev){var c=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}else if(c){if(this.prev<i.catchLoc)return handle(i.catchLoc,!0);}else{if(!u)throw Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return handle(i.finallyLoc);}}}},abrupt:function abrupt(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break;}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a);},complete:function complete(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y;},finish:function finish(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),resetTryEntry(r),y;}},"catch":function _catch(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;resetTryEntry(r);}return o;}}throw Error("illegal catch attempt");},delegateYield:function delegateYield(e,r,n){return this.delegate={iterator:values(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),y;}},e;}function asyncGeneratorStep(n,t,e,r,o,a,c){try{var i=n[a](c),u=i.value;}catch(n){return void e(n);}i.done?t(u):Promise.resolve(u).then(r,o);}function _asyncToGenerator(n){return function(){var t=this,e=arguments;return new Promise(function(r,o){var a=n.apply(t,e);function _next(n){asyncGeneratorStep(a,r,o,_next,_throw,"next",n);}function _throw(n){asyncGeneratorStep(a,r,o,_next,_throw,"throw",n);}_next(void 0);});};}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_nileFilePreviewCssCjsJs){s=_nileFilePreviewCssCjsJs.s;},function(_internalNileElementCjsJs){i=_internalNileElementCjsJs.N;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;h=_litDecoratorsJs.customElement;},function(_utilsNileFilePreviewUtilCjsJs){a=_utilsNileFilePreviewUtilCjsJs.a;},function(_typesNileFilePreviewEnumsCjsJs){r=_typesNileFilePreviewEnumsCjsJs.F;l=_typesNileFilePreviewEnumsCjsJs.a;o=_typesNileFilePreviewEnumsCjsJs.b;n=_typesNileFilePreviewEnumsCjsJs.c;},function(_lit){p=_lit.html;},function(_nileFilePreviewTemplateCjsJs){c=_nileFilePreviewTemplateCjsJs.g;m=_nileFilePreviewTemplateCjsJs.a;d=_nileFilePreviewTemplateCjsJs.b;f=_nileFilePreviewTemplateCjsJs.c;u=_nileFilePreviewTemplateCjsJs.d;y=_nileFilePreviewTemplateCjsJs.e;j=_nileFilePreviewTemplateCjsJs.f;v=_nileFilePreviewTemplateCjsJs.h;}],execute:function execute(){_export("N",w=/*#__PURE__*/function(_i){function w(){var _this;_classCallCheck(this,w);_this=_callSuper(this,w,arguments),_this.errorMessage="",_this.fileUrl="",_this.uploadStatus=0,_this.state=r.DEFAULT,_this.variant=l.HORIZONTAL,_this.inputFileName="",_this.inputFileHtml=null,_this.originalUrl="",_this.isStringTruncated=!1,_this.dummyFile=new File(["sdfjbs ewhf"],"dummy.txt",{type:"text/plain"});return _this;}_inherits(w,_i);return _createClass(w,[{key:"connectedCallback",value:function connectedCallback(){_superPropGet(w,"connectedCallback",this,3)([]),this.emit(o.NILE_INIT);}},{key:"firstUpdated",value:function firstUpdated(t){_superPropGet(w,"firstUpdated",this,3)([t]);}},{key:"updated",value:function updated(t){t.has("uploadStatus")&&this.uploadStatus?this.uploadStatus<100?this.createUploadState(this.inputFile,this.uploadStatus):this.createState(this.inputFile):t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(o.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl?(this.handleFileUrl(this.fileUrl),this.emit(o.NILE_RECEIVE)):t.has("errorMessage")&&this.createState(this.inputFile);}},{key:"createUploadState",value:function createUploadState(t,s){var i=this.variant===l.HORIZONTAL;this.inputFileHtml=i?c(t,s):m(t,s),this.requestUpdate();}},{key:"handleFileUrl",value:function(){var _handleFileUrl=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(t){var _s,_i2,_e,_h,_s2;return _regeneratorRuntime().wrap(function _callee$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:this.originalUrl=t;_context2.prev=1;_context2.next=4;return fetch(t);case 4:_s=_context2.sent;_context2.next=7;return _s.blob();case 7:_i2=_context2.sent;_e=this.inputFileName||t.split("/").pop()||n.UNKNOWN_FILE_NAME;_h=new File([_i2],_e,{type:_i2.type});this.createState(_h);_context2.next=17;break;case 13:_context2.prev=13;_context2.t0=_context2["catch"](1);_s2=new File([],this.inputFileName||n.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=n.FAILED_TO_LOAD,console.error(this.errorMessage),this.inputFileHtml=this.variant===l.HORIZONTAL?d(_s2,this.errorMessage,this.originalUrl,this):f(_s2,this.errorMessage,this.originalUrl,this),this.requestUpdate();case 17:case"end":return _context2.stop();}},_callee,this,[[1,13]]);}));function handleFileUrl(_x){return _handleFileUrl.apply(this,arguments);}return handleFileUrl;}()},{key:"createState",value:function(){var _createState=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(t){var s,_i3;return _regeneratorRuntime().wrap(function _callee2$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:s=this.variant===l.HORIZONTAL;if(!this.errorMessage){_context3.next=5;break;}this.inputFileHtml=s?d(t,this.errorMessage,this.originalUrl,this):f(t,this.errorMessage,this.originalUrl,this);_context3.next=19;break;case 5:if(!t.type.startsWith("image/")){_context3.next=18;break;}_context3.prev=6;_context3.next=9;return a(t);case 9:_i3=_context3.sent;this.inputFileHtml=s?u(_i3,t,this.originalUrl):y(_i3,t,this.originalUrl);_context3.next=16;break;case 13:_context3.prev=13;_context3.t0=_context3["catch"](6);this.inputFileHtml=s?j(t,this.originalUrl):v(t,this.originalUrl);case 16:_context3.next=19;break;case 18:this.inputFileHtml=s?j(t,this.originalUrl):v(t,this.originalUrl);case 19:this.requestUpdate();case 20:case"end":return _context3.stop();}},_callee2,this,[[6,13]]);}));function createState(_x2){return _createState.apply(this,arguments);}return createState;}()},{key:"render",value:function render(){return p(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\t\t\t","\n "])),this.inputFileHtml?this.inputFileHtml:p(_templateObject2||(_templateObject2=_taggedTemplateLiteral([""]))));}},{key:"disconnectedCallback",value:function disconnectedCallback(){_superPropGet(w,"disconnectedCallback",this,3)([]),this.emit(o.NILE_DESTROY);}}],[{key:"styles",get:function get(){return[s];}}]);}(i));t([e({type:String})],w.prototype,"errorMessage",void 0),t([e({type:Object})],w.prototype,"inputFile",void 0),t([e({type:String})],w.prototype,"fileUrl",void 0),t([e({type:Number})],w.prototype,"uploadStatus",void 0),t([e({type:String})],w.prototype,"state",void 0),t([e({type:String})],w.prototype,"variant",void 0),t([e({type:String})],w.prototype,"inputFileName",void 0),_export("N",w=t([h("nile-file-preview")],w));}};});
|
2
2
|
//# sourceMappingURL=nile-file-preview.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-file-preview.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {styles} from './nile-file-preview.css';\nimport NileElement from '../internal/nile-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport { fileUploadServerError, generatePreviewUrl } from './utils';\nimport { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';\nimport { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport {\n getHorizontalErrorState,\n getHorizontalNoPreviewState,\n getHorizontalPreviewState,\n getHorizontalUploadingState,\n getVerticalErrorState,\n getVerticalNoPreviewState,\n getVerticalPreviewState,\n getVerticalUploadingState\n} from './nile-file-preview.template';\n\n\n/**\n * Nile preview component.\n *\n * @tag nile-preview\n *\n */\n@customElement('nile-file-preview')\nexport class NileFilePreview extends NileElement {\n /**\n * The styles for nile-preview\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String }) errorMessage: string = \"\";\n\t@property({ type: Object }) inputFile: File; \n\t@property({ type: String }) fileUrl: string = \"\";\n\t@property({ type: Number }) uploadStatus: number = 0;\n\t@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;\n\t@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;\n @property({ type: String }) inputFileName: string = \"\";\n\tprivate inputFileHtml: TemplateResult | null = null;\n private originalUrl: string = \"\";\n\n /**\n * Render method\n * @slot This is a slot test\n */\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FilePreviewEvent.NILE_INIT);\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n fileUploadServerError(this);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if(changedProperties.has('uploadStatus') && this.uploadStatus) {\n if(this.uploadStatus < 100) {\n this.createUploadState(this.inputFile, this.uploadStatus);\n } else {\n this.createState(this.inputFile);\n }\n } else if (changedProperties.has('inputFile') && this.inputFile) {\n this.createState(this.inputFile); \n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('fileUrl') && this.fileUrl) {\n this.handleFileUrl(this.fileUrl);\n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('errorMessage')) {\n this.createState(this.inputFile);\n }\n }\n\n private createUploadState( file: File, uploadStatus: number): void {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n this.inputFileHtml = isHorizontal \n ? getHorizontalUploadingState(file, uploadStatus)\n : getVerticalUploadingState(file, uploadStatus);\n\n this.requestUpdate();\n }\n\n private async handleFileUrl(url: string): Promise<void> {\n this.originalUrl = url;\n try {\n const response = await fetch(url);\n const blob = await response.blob();\n const fileName = this.inputFileName || url.split('/').pop() || FilePreviewErrorMessages.UNKNOWN_FILE_NAME;\n const file = new File([blob], fileName, { type: blob.type });\n\n this.createState(file);\n } catch (error) {\n const dummyFile = new File([], this.inputFileName || FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });\n this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;\n console.error(this.errorMessage);\n\n this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL\n ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl)\n : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl);\n this.requestUpdate();\n }\n }\n\n\tpublic async createState(file: File): Promise<void> {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n if (!this.errorMessage) { \n if (file.type.startsWith('image/')) {\n try {\n const url = await generatePreviewUrl(file);\n this.inputFileHtml = isHorizontal\n ? getHorizontalPreviewState(url, file, this.originalUrl)\n : getVerticalPreviewState(url, file, this.originalUrl);\n } catch (error) {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl); \n }\n } else {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl);\n }\n } else {\n // this.errorMessage = !this.errorMessage\n // ? FilePreviewErrorMessages.INVALID_FORMAT\n // : FilePreviewErrorMessages.UPLOAD_CANCEL;\n\n this.inputFileHtml = isHorizontal\n ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl)\n : getVerticalErrorState(file, this.errorMessage, this.originalUrl);\n }\n this.requestUpdate();\n }\n\n private dummyFile = new File(['sdfjbs ewhf'], \"dummy.txt\", { type: \"text/plain\" });\n\n public render(): TemplateResult {\n return html`\n\t\t\t${this.inputFileHtml ?\n\t\t\t\tthis.inputFileHtml :\n\t\t\t\thtml``\n\t\t\t}\n `;\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit(FilePreviewEvent.NILE_DESTROY);\n }\n\n /* #endregion */\n}\n\nexport default NileFilePreview;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-file-preview': NileFilePreview;\n }\n}"],"names":["NileFilePreview","g","this","errorMessage","fileUrl","uploadStatus","state","FilePreviewState","DEFAULT","variant","FilePreviewVariant","HORIZONTAL","inputFileName","inputFileHtml","originalUrl","dummyFile","File","type","_this","_inherits","_i","_createClass","key","value","connectedCallback","super","emit","FilePreviewEvent","NILE_INIT","firstUpdated","_changedProperties","fileUploadServerError","updated","changedProperties","has","createUploadState","inputFile","createState","NILE_RECEIVE","handleFileUrl","file","isHorizontal","getHorizontalUploadingState","getVerticalUploadingState","requestUpdate","_handleFileUrl","_asyncToGenerator","_regeneratorRuntime","mark","_callee","url","_context2","prev","next","fetch","response","blob","fileName","split","pop","FilePreviewErrorMessages","UNKNOWN_FILE_NAME","t0","FAILED_TO_LOAD","console","error","getHorizontalErrorState","getVerticalErrorState","stop","_callee2","s","_i3","wrap","_callee2$","_context3","startsWith","generatePreviewUrl","getHorizontalPreviewState","getVerticalPreviewState","getHorizontalNoPreviewState","getVerticalNoPreviewState","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","disconnectedCallback","NILE_DESTROY","get","styles","NileElement","__decorate","property","String","prototype","Object","Number","customElement"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"nile-file-preview.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {styles} from './nile-file-preview.css';\nimport NileElement from '../internal/nile-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generatePreviewUrl, truncateString } from './utils';\nimport { FilePreviewState, FilePreviewVariant, FilePreviewErrorMessages, FilePreviewEvent } from './types';\nimport { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';\nimport {\n getHorizontalErrorState,\n getHorizontalNoPreviewState,\n getHorizontalPreviewState,\n getHorizontalUploadingState,\n getVerticalErrorState,\n getVerticalNoPreviewState,\n getVerticalPreviewState,\n getVerticalUploadingState\n} from './nile-file-preview.template';\n\n\n/**\n * Nile preview component.\n *\n * @tag nile-preview\n *\n */\n@customElement('nile-file-preview')\nexport class NileFilePreview extends NileElement {\n /**\n * The styles for nile-preview\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String }) errorMessage: string = \"\";\n\t@property({ type: Object }) inputFile: File; \n\t@property({ type: String }) fileUrl: string = \"\";\n\t@property({ type: Number }) uploadStatus: number = 0;\n\t@property({ type: String }) state: FilePreviewState = FilePreviewState.DEFAULT;\n\t@property({ type: String }) variant: FilePreviewVariant = FilePreviewVariant.HORIZONTAL;\n @property({ type: String }) inputFileName: string = \"\";\n\tprivate inputFileHtml: TemplateResult | null = null;\n private originalUrl: string = \"\";\n public isStringTruncated: boolean = false;\n\n /**\n * Render method\n * @slot This is a slot test\n */\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit(FilePreviewEvent.NILE_INIT);\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n // fileUploadServerError(this);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if(changedProperties.has('uploadStatus') && this.uploadStatus) {\n if(this.uploadStatus < 100) {\n this.createUploadState(this.inputFile, this.uploadStatus);\n } else {\n this.createState(this.inputFile);\n }\n } else if (changedProperties.has('inputFile') && this.inputFile) {\n this.createState(this.inputFile); \n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('fileUrl') && this.fileUrl) {\n this.handleFileUrl(this.fileUrl);\n this.emit(FilePreviewEvent.NILE_RECEIVE);\n\n } else if (changedProperties.has('errorMessage')) {\n this.createState(this.inputFile);\n }\n }\n\n private createUploadState( file: File, uploadStatus: number): void {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n this.inputFileHtml = isHorizontal \n ? getHorizontalUploadingState(file, uploadStatus)\n : getVerticalUploadingState(file, uploadStatus);\n\n this.requestUpdate();\n }\n\n private async handleFileUrl(url: string): Promise<void> {\n this.originalUrl = url;\n try {\n const response = await fetch(url);\n const blob = await response.blob();\n const fileName = this.inputFileName || url.split('/').pop() || FilePreviewErrorMessages.UNKNOWN_FILE_NAME;\n const file = new File([blob], fileName, { type: blob.type });\n\n this.createState(file);\n } catch (error) {\n const dummyFile = new File([], this.inputFileName || FilePreviewErrorMessages.UNKNOWN_FILE_NAME, { type: 'application/octet-stream' });\n this.errorMessage = FilePreviewErrorMessages.FAILED_TO_LOAD;\n console.error(this.errorMessage);\n\n this.inputFileHtml = this.variant === FilePreviewVariant.HORIZONTAL\n ? getHorizontalErrorState(dummyFile, this.errorMessage, this.originalUrl, this)\n : getVerticalErrorState(dummyFile, this.errorMessage, this.originalUrl, this);\n this.requestUpdate();\n }\n }\n\n\tpublic async createState(file: File): Promise<void> {\n const isHorizontal = this.variant === FilePreviewVariant.HORIZONTAL;\n\n if (!this.errorMessage) { \n if (file.type.startsWith('image/')) {\n try {\n const url = await generatePreviewUrl(file);\n this.inputFileHtml = isHorizontal\n ? getHorizontalPreviewState(url, file, this.originalUrl)\n : getVerticalPreviewState(url, file, this.originalUrl);\n } catch (error) {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl); \n }\n } else {\n this.inputFileHtml = isHorizontal\n ? getHorizontalNoPreviewState(file, this.originalUrl)\n : getVerticalNoPreviewState(file, this.originalUrl);\n }\n } else {\n // this.errorMessage = !this.errorMessage\n // ? FilePreviewErrorMessages.INVALID_FORMAT\n // : FilePreviewErrorMessages.UPLOAD_CANCEL;\n\n this.inputFileHtml = isHorizontal\n ? getHorizontalErrorState(file, this.errorMessage, this.originalUrl, this)\n : getVerticalErrorState(file, this.errorMessage, this.originalUrl, this);\n }\n this.requestUpdate();\n }\n\n private dummyFile = new File(['sdfjbs ewhf'], \"dummy.txt\", { type: \"text/plain\" });\n\n public render(): TemplateResult {\n return html`\n\t\t\t${this.inputFileHtml ?\n\t\t\t\tthis.inputFileHtml :\n\t\t\t\thtml``\n\t\t\t}\n `;\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit(FilePreviewEvent.NILE_DESTROY);\n }\n\n /* #endregion */\n}\n\nexport default NileFilePreview;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-file-preview': NileFilePreview;\n }\n}"],"names":["NileFilePreview","w","constructor","this","errorMessage","fileUrl","uploadStatus","state","FilePreviewState","DEFAULT","variant","FilePreviewVariant","HORIZONTAL","inputFileName","inputFileHtml","originalUrl","isStringTruncated","dummyFile","File","type","_this","_inherits","_i","_createClass","key","value","connectedCallback","super","emit","FilePreviewEvent","NILE_INIT","firstUpdated","_changedProperties","updated","changedProperties","has","createUploadState","inputFile","createState","NILE_RECEIVE","handleFileUrl","file","isHorizontal","getHorizontalUploadingState","getVerticalUploadingState","requestUpdate","_handleFileUrl","_asyncToGenerator","_regeneratorRuntime","mark","_callee","url","_context2","prev","next","fetch","blob","response","fileName","split","pop","FilePreviewErrorMessages","UNKNOWN_FILE_NAME","t0","FAILED_TO_LOAD","console","error","getHorizontalErrorState","getVerticalErrorState","stop","_callee2","startsWith","_context3","generatePreviewUrl","getHorizontalPreviewState","getVerticalPreviewState","getHorizontalNoPreviewState","getVerticalNoPreviewState","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","disconnectedCallback","NILE_DESTROY","get","styles","NileElement","__decorate","property","String","prototype","Object","Number","customElement"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: inline-block;\n }\n\n * {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 648px;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n .uploading {\n height: 62px;\n width: 648px;\n padding: 12px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400);\n border-radius: 4px;\n background-color: var(--nile-colors-white-base);\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n \n /* .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 0px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 538px;\n } */\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n .preview-actions {\n /* padding-right: 12px; */\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 95%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info > nile-tooltip > span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* nile-tooltip::part(base) {\n display: inline-block;\n } */\n\n /* VARTICAL STATE START */\n /* Default State */\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n /* Drag State */\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n /* Uploading State */\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state > nile-tooltip > span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n"]))));}};});
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",r=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: inline-block;\n }\n\n * {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 648px;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 648px;\n padding: 12px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400);\n border-radius: 4px;\n background-color: var(--nile-colors-white-base);\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n \n /* .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 0px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 538px;\n } */\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n .preview-actions {\n /* padding-right: 12px; */\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 95%;\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* nile-tooltip::part(base) {\n display: inline-block;\n } */\n\n /* VARTICAL STATE START */\n /* Default State */\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n /* Drag State */\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n /* Uploading State */\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n"]))));}};});
|
2
2
|
//# sourceMappingURL=nile-file-preview.css.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-file-preview.css.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n * {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 648px;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n .uploading {\n height: 62px;\n width: 648px;\n padding: 12px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400);\n border-radius: 4px;\n background-color: var(--nile-colors-white-base);\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n \n /* .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 0px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 538px;\n } */\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n .preview-actions {\n /* padding-right: 12px; */\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 95%;\n display: flex;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info > nile-tooltip > span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* nile-tooltip::part(base) {\n display: inline-block;\n } */\n\n /* VARTICAL STATE START */\n /* Default State */\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n /* Drag State */\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n /* Uploading State */\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state > nile-tooltip > span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
1
|
+
{"version":3,"file":"nile-file-preview.css.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n * {\n padding: 0px;\n margin: 0px;\n box-sizing: border-box;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 18px;\n height: auto;\n }\n\n input {\n display: none;\n }\n\n .horizontal-div {\n max-height: 62px;\n width: 648px;\n min-width: 230px;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 6px;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px dashed var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n background-color: var(--nile-colors-white-base);\n }\n \n .hover-state {\n border-color: var(--nile-colors-primary-600);\n }\n\n .vertical-div {\n height: auto;\n min-height: 156px;\n min-width: 240px;\n width: 240px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n padding: 12px;\n border-radius: var(--nile-radius-radius-xs);\n color: var(--nile-colors-dark-900);\n border: 1px dashed var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-white-base);\n position: relative; \n margin-bottom: 10px;\n }\n\n .vertical-div:hover {\n border-color: var(--nile-colors-blue-500);\n }\n\n .outer-div-border {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .inner-div {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 18px;\n box-sizing: border-box;\n }\n\n .icons-container {\n display: flex;\n gap: 4px;\n }\n\n .general-icon {\n transform: rotate(-18.11deg);\n position: relative;\n bottom: 3px;\n }\n\n .image-icon {\n transform: rotate(15deg);\n }\n\n .icon:hover {\n cursor: pointer;\n }\n\n /* Uploading State */\n nile-loader {\n line-height: 0;\n }\n\n .uploading {\n height: 62px;\n width: 648px;\n padding: 12px;\n min-width: 230px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 18px;\n box-sizing: border-box;\n border: 1px solid var(--nile-colors-neutral-400);\n border-radius: 4px;\n background-color: var(--nile-colors-white-base);\n }\n \n .uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .progress-bar-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .progress-bar-percent {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n }\n\n .progress-bar-container p {\n margin: 0px;\n }\n\n .progress-bar-container > p {\n font-size: var(--nile-type-scale-1);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .progress-bar-container .horizontal-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .progress-bar-container .vertical-file-name {\n font-size: var(--nile-type-scale-1);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-500);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 212px;\n }\n\n /* PREVIEW STATE */\n .preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .preview-inner {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .preview-image-container {\n height: 42px;\n width: 42px;\n }\n\n .preview-image-container img, iframe {\n height: 42px;\n width: 42px;\n object-fit: contain;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-neutral-400);\n }\n \n /* .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 0px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 538px;\n } */\n\n .preview nile-icon:hover {\n cursor: pointer;\n }\n\n .preview-actions {\n /* padding-right: 12px; */\n }\n\n /* NO PREVIEW STATE */\n .no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .no-preview-container {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .document-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n .document-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .preview-file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .preview-file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .preview-file-info p:last-of-type{\n color: var(--nile-colors-neutral-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 500px;\n }\n\n .no-preview > nile-icon:hover {\n cursor: pointer;\n }\n\n /* ERROR STATE */\n .error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-container {\n width: 95%;\n display: flex;\n align-items: center;\n gap: 18px;\n }\n\n .error-icon {\n height: 40px;\n width: 40px;\n border-radius: var(--nile-radius-radius-xs);\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--nile-colors-red-400);\n background-color: var(--nile-colors-red-100);\n }\n\n .error-icon nile-icon {\n height: 40px;\n width: 40px;\n }\n \n .file-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4px;\n }\n\n .file-info p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n \n .file-info nile-tooltip span, .file-info span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n max-width: 90%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n }\n\n .error > nile-icon:hover {\n cursor: pointer;\n }\n\n .file-info .horizontal-file-name {\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-dark-900);\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 538px;\n }\n\n /* nile-tooltip::part(base) {\n display: inline-block;\n } */\n\n /* VARTICAL STATE START */\n /* Default State */\n .vertical-default {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px\n }\n\n .content-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n text-align: center;\n }\n\n .content-container h4 {\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:first-child {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n .content-container p:last-child {\n margin: 0px;\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n color: var(--nile-colors-neutral-700);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 222px;\n }\n\n /* Drag State */\n .vertical-drag {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap:18px;\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-blue-700);\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-blue-500);\n }\n\n /* Uploading State */\n .vertical-uploading {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-uploading:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .loading {\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 40px;\n }\n\n .corner-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n\n /* Preview State */\n .vertical-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .image-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n object-fit: cover;\n width: 80px;\n height: 80px;\n border-radius: var(--nile-radius-radius-xs);\n }\n\n /* Vertical No Preview State */\n .vertical-no-preview {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-no-preview:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .vertical-document-icon {\n height: 80px;\n width: 80px;\n padding: 2px 3px 2px 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--nile-radius-radius-xs);\n border: 1px solid var(--nile-colors-blue-400);\n background-color: var(--nile-colors-blue-100);\n }\n\n /* Veritcal Error State */\n .vertical-error {\n border: 1px solid var(--nile-colors-neutral-400);\n }\n\n .vertical-error:hover {\n border-color: var(--nile-colors-neutral-400);\n }\n\n .error-bg {\n background-color: var(--nile-colors-red-100);\n border: 1px solid var(--nile-colors-red-400);\n }\n\n .file-info-vertical-state {\n width: 100%;\n text-align: center;\n }\n\n .file-info-vertical-state p {\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n padding-bottom: 6px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 222px;\n }\n \n .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n font-weight: var(--nile-font-weight-regular);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n max-width: 212px;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin: 0px;\n font-size: var(--nile-type-scale-3);\n font-weight: var(--nile-font-weight-regular);\n text-align: center\n }\n\n .error-p {\n color: var(--nile-colors-red-700);\n font-size: var(--nile-type-scale-2);\n width: 216px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n }\n\n .error-p p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n\n\n /* Displaing uploaded files CSS */\n .display-files {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n width: 648px;\n min-width: 230px;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-neutral-700);\n border-radius: var(--nile-radius-radius-xs);\n scrollbar-width: none;\n padding: 12px;\n }\n\n ul, li {\n width: 100%;\n }\n\n li {\n list-style-type: none;\n }\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
@@ -96,6 +96,10 @@ import{css as e}from"lit";const r=e`
|
|
96
96
|
}
|
97
97
|
|
98
98
|
/* Uploading State */
|
99
|
+
nile-loader {
|
100
|
+
line-height: 0;
|
101
|
+
}
|
102
|
+
|
99
103
|
.uploading {
|
100
104
|
height: 62px;
|
101
105
|
width: 648px;
|
@@ -177,6 +181,7 @@ import{css as e}from"lit";const r=e`
|
|
177
181
|
|
178
182
|
.preview-inner {
|
179
183
|
display: flex;
|
184
|
+
align-items: center;
|
180
185
|
gap: 18px;
|
181
186
|
}
|
182
187
|
|
@@ -243,6 +248,7 @@ import{css as e}from"lit";const r=e`
|
|
243
248
|
|
244
249
|
.no-preview-container {
|
245
250
|
display: flex;
|
251
|
+
align-items: center;
|
246
252
|
gap: 18px;
|
247
253
|
}
|
248
254
|
|
@@ -276,12 +282,22 @@ import{css as e}from"lit";const r=e`
|
|
276
282
|
margin: 0px;
|
277
283
|
font-size: var(--nile-type-scale-3);
|
278
284
|
font-weight: var(--nile-font-weight-regular);
|
285
|
+
text-align: left;
|
286
|
+
white-space: nowrap;
|
287
|
+
text-overflow: ellipsis;
|
288
|
+
overflow: hidden;
|
289
|
+
width: 500px;
|
279
290
|
}
|
280
291
|
|
281
292
|
.preview-file-info p:last-of-type{
|
282
293
|
color: var(--nile-colors-neutral-700);
|
283
294
|
font-size: var(--nile-type-scale-2);
|
284
295
|
font-weight: var(--nile-font-weight-regular);
|
296
|
+
text-align: left;
|
297
|
+
white-space: nowrap;
|
298
|
+
text-overflow: ellipsis;
|
299
|
+
overflow: hidden;
|
300
|
+
width: 500px;
|
285
301
|
}
|
286
302
|
|
287
303
|
.no-preview > nile-icon:hover {
|
@@ -300,6 +316,7 @@ import{css as e}from"lit";const r=e`
|
|
300
316
|
.error-container {
|
301
317
|
width: 95%;
|
302
318
|
display: flex;
|
319
|
+
align-items: center;
|
303
320
|
gap: 18px;
|
304
321
|
}
|
305
322
|
|
@@ -340,7 +357,7 @@ import{css as e}from"lit";const r=e`
|
|
340
357
|
width: 538px;
|
341
358
|
}
|
342
359
|
|
343
|
-
.file-info
|
360
|
+
.file-info nile-tooltip span, .file-info span {
|
344
361
|
color: var(--nile-colors-red-700);
|
345
362
|
font-size: var(--nile-type-scale-2);
|
346
363
|
font-weight: var(--nile-font-weight-regular);
|
@@ -529,7 +546,7 @@ import{css as e}from"lit";const r=e`
|
|
529
546
|
max-width: 222px;
|
530
547
|
}
|
531
548
|
|
532
|
-
.file-info-vertical-state
|
549
|
+
.file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
|
533
550
|
color: var(--nile-colors-red-700);
|
534
551
|
font-size: var(--nile-type-scale-2);
|
535
552
|
font-weight: var(--nile-font-weight-regular);
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import{__decorate as t}from"tslib";import{s}from"./nile-file-preview.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{property as e,customElement as h}from"lit/decorators.js";import{a
|
2
|
-
${this.inputFileHtml?this.inputFileHtml:
|
3
|
-
`}disconnectedCallback(){super.disconnectedCallback(),this.emit(
|
1
|
+
import{__decorate as t}from"tslib";import{s}from"./nile-file-preview.css.esm.js";import{N as i}from"../internal/nile-element.esm.js";import{property as e,customElement as h}from"lit/decorators.js";import{a}from"./utils/nile-file-preview.util.esm.js";import{F as r,a as l,b as o,c as n}from"./types/nile-file-preview.enums.esm.js";import{html as p}from"lit";import{g as c,a as m,b as d,c as f,d as u,e as y,f as v,h as w}from"./nile-file-preview.template.esm.js";let g=class extends i{constructor(){super(...arguments),this.errorMessage="",this.fileUrl="",this.uploadStatus=0,this.state=r.DEFAULT,this.variant=l.HORIZONTAL,this.inputFileName="",this.inputFileHtml=null,this.originalUrl="",this.isStringTruncated=!1,this.dummyFile=new File(["sdfjbs ewhf"],"dummy.txt",{type:"text/plain"})}static get styles(){return[s]}connectedCallback(){super.connectedCallback(),this.emit(o.NILE_INIT)}firstUpdated(t){super.firstUpdated(t)}updated(t){t.has("uploadStatus")&&this.uploadStatus?this.uploadStatus<100?this.createUploadState(this.inputFile,this.uploadStatus):this.createState(this.inputFile):t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(o.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl?(this.handleFileUrl(this.fileUrl),this.emit(o.NILE_RECEIVE)):t.has("errorMessage")&&this.createState(this.inputFile)}createUploadState(t,s){const i=this.variant===l.HORIZONTAL;this.inputFileHtml=i?c(t,s):m(t,s),this.requestUpdate()}async handleFileUrl(t){this.originalUrl=t;try{const s=await fetch(t),i=await s.blob(),e=this.inputFileName||t.split("/").pop()||n.UNKNOWN_FILE_NAME,h=new File([i],e,{type:i.type});this.createState(h)}catch(t){const s=new File([],this.inputFileName||n.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=n.FAILED_TO_LOAD,console.error(this.errorMessage),this.inputFileHtml=this.variant===l.HORIZONTAL?d(s,this.errorMessage,this.originalUrl,this):f(s,this.errorMessage,this.originalUrl,this),this.requestUpdate()}}async createState(t){const s=this.variant===l.HORIZONTAL;if(this.errorMessage)this.inputFileHtml=s?d(t,this.errorMessage,this.originalUrl,this):f(t,this.errorMessage,this.originalUrl,this);else if(t.type.startsWith("image/"))try{const i=await a(t);this.inputFileHtml=s?u(i,t,this.originalUrl):y(i,t,this.originalUrl)}catch(i){this.inputFileHtml=s?v(t,this.originalUrl):w(t,this.originalUrl)}else this.inputFileHtml=s?v(t,this.originalUrl):w(t,this.originalUrl);this.requestUpdate()}render(){return p`
|
2
|
+
${this.inputFileHtml?this.inputFileHtml:p``}
|
3
|
+
`}disconnectedCallback(){super.disconnectedCallback(),this.emit(o.NILE_DESTROY)}};t([e({type:String})],g.prototype,"errorMessage",void 0),t([e({type:Object})],g.prototype,"inputFile",void 0),t([e({type:String})],g.prototype,"fileUrl",void 0),t([e({type:Number})],g.prototype,"uploadStatus",void 0),t([e({type:String})],g.prototype,"state",void 0),t([e({type:String})],g.prototype,"variant",void 0),t([e({type:String})],g.prototype,"inputFileName",void 0),g=t([h("nile-file-preview")],g);export{g as N};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
System.register(["./nile-file-preview.css.cjs.js","lit","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js"],function(_export,_context){"use strict";var i,e,n,l,c,
|
1
|
+
System.register(["./nile-file-preview.css.cjs.js","lit","./utils/nile-file-preview.util.cjs.js","./types/nile-file-preview.enums.cjs.js"],function(_export,_context){"use strict";var i,e,n,l,c,a,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function o(n,l){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>","%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n value=\"","\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\">","</p>\n </div>\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),l,l,n.name,function(i){return e(n,i);});}function s(e,a,o){return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\">\n <div class=\"preview-image-container\">\n <img\n class=\"image-preview\"\n src=","\n alt=","\n />\n </div>\n <div class=\"preview-file-info\">\n <p>","</p>\n <p>"," • ","</p>\n </div>\n </div>\n <div class=\"preview-actions\">\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n "])),e,a.name,a.name,n(a.type),l(Number(a.size)),function(i){return c(a,i,o);});}function r(e,a){return i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\">\n <div class=\"document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\">\n <p>","</p>\n <p>"," • ","</p>\n </div>\n </div>\n <div>\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n "])),e.name,n(e.type),l(Number(e.size)),function(i){return c(e,i,a);});}function t(e,n,l,o){return a(o),i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\">\n <div class=\"error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\">\n <p class=\"horizontal-file-name\">","</p>\n ","\n </div>\n </div>\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),e.name,o.isStringTruncated?i(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["<nile-tooltip content=",">\n <span>","</span>\n </nile-tooltip>"])),n,n):i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["<span>","</span>"])),n),function(i){return c(e,i,l);});}function v(n,l){return i(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading...</p>\n <p>","%</p>\n </div>\n <nile-progress-bar value=","></nile-progress-bar>\n <p class=\"vertical-file-name\">","</p>\n </div>\n\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),l,l,n.name,function(i){return e(n,i);});}function p(e,a,o){return i(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div>\n <img\n class=\"image-preview\"\n src=","\n alt=","\n />\n </div>\n\n <div class=\"content-container\">\n <p>","</p>\n <p>"," • ","</p>\n </div>\n\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),e,a.name,a.name,n(a.type),l(Number(a.size)),function(i){return c(a,i,o);});}function d(e,a){return i(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\">\n <p>","</p>\n <p>"," • ","</p>\n </div>\n\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),e.name,n(e.type),l(Number(e.size)),function(i){return c(e,i,a);});}function m(e,n,l,o){return a(o),i(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\">\n <p class=\"vertical-file-name\">","</p>\n ","\n </div>\n\n <slot @click="," name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n "])),e.name,o.isStringTruncated?i(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["<nile-tooltip content=",">\n <span>","</span>\n </nile-tooltip>"])),n,n):i(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["<span>","</span>"])),n),function(i){return c(e,i,l);});}_export({a:v,b:t,c:m,d:s,e:p,f:r,g:o,h:d});return{setters:[function(_nileFilePreviewCssCjsJs){},function(_lit){i=_lit.html;},function(_utilsNileFilePreviewUtilCjsJs){e=_utilsNileFilePreviewUtilCjsJs.c;n=_utilsNileFilePreviewUtilCjsJs.g;l=_utilsNileFilePreviewUtilCjsJs.f;c=_utilsNileFilePreviewUtilCjsJs.r;a=_utilsNileFilePreviewUtilCjsJs.t;},function(_typesNileFilePreviewEnumsCjsJs){}],execute:function execute(){}};});
|
2
2
|
//# sourceMappingURL=nile-file-preview.template.cjs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-file-preview.template.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\">\n <div class=\"preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div class=\"preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\">\n <div class=\"document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\">\n <p>${truncateString(file.name, file?.type)}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\">\n <div class=\"error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\">\n <p class=\"horizontal-file-name\">${file.name}</p>\n <nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div>\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\">\n <p>${truncateString(file.name, file?.type)}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\">\n <p class=\"vertical-file-name\">${file.name}</p>\n <nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}"],"names":["getHorizontalUploadingState","file","uploadStatus","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","_templateObject2","getFileType","type","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","truncateString","getHorizontalErrorState","errorMessage","_templateObject4","getVerticalUploadingState","_templateObject5","getVerticalPreviewState","_templateObject6","getVerticalNoPreviewState","_templateObject7","getVerticalErrorState","_templateObject8","_export","a"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"nile-file-preview.template.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.template.ts"],"sourcesContent":["/**\n * Template File for nile-preview component\n */\n\nimport './nile-file-preview.css';\nimport { html, TemplateResult } from 'lit';\nimport { FilePreviewErrorMessages, RemoveFileDetail } from './types';\nimport { removeFile, cancelFileUpload } from './utils';\nimport { formatFileSize, truncateString, getFileType } from './utils/nile-file-preview.util';\nimport { NileFilePreview } from './nile-file-preview';\n\n export function getHorizontalUploadingState(\n file: File,\n uploadStatus: number\n ): TemplateResult {\n return html`\n <div class=\"uploading\" part=\"horizontal-uploading-state\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading File...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar\n part=\"horizontal-progress-bar\"\n value=\"${uploadStatus}\"\n ></nile-progress-bar>\n <p class=\"horizontal-file-name\">${file.name}</p>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n }\n\nexport function getHorizontalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"preview horizontal-div\" part=\"horizontal-preview-state\">\n <div class=\"preview-inner\">\n <div class=\"preview-image-container\">\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div class=\"preview-actions\">\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"no-preview horizontal-div\" part=\"horizontal-no-preview-state\">\n <div class=\"no-preview-container\">\n <div class=\"document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n <div class=\"preview-file-info\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n </div>\n <div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n </div>\n `;\n}\n\nexport function getHorizontalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"error horizontal-div\" part=\"horizontal-error-state\">\n <div class=\"error-container\">\n <div class=\"error-icon\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n <div class=\"file-info\">\n <p class=\"horizontal-file-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n </div>\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n// vertical states\nexport function getVerticalUploadingState(\n file: File,\n uploadStatus: number\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-uploading\" part=\"vertical-uploading-state\">\n <div class=\"loading\">\n <nile-loader width=\"24\" height=\"24\"></nile-loader>\n </div>\n\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-percent\">\n <p>Uploading...</p>\n <p>${uploadStatus}%</p>\n </div>\n <nile-progress-bar value=${uploadStatus}></nile-progress-bar>\n <p class=\"vertical-file-name\">${file.name}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\n\nexport function getVerticalPreviewState(\n url: string,\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-preview\" part=\"vertical-preview-state\">\n <div>\n <img\n class=\"image-preview\"\n src=${url}\n alt=${file.name}\n />\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalNoPreviewState(\n file: File,\n originalUrl: string\n): TemplateResult {\n return html`\n <div class=\"vertical-div vertical-no-preview\" part=\"vertical-no-preview-state\">\n <div class=\"vertical-document-icon\">\n <nile-icon name=\"general\" size=\"20\" color=\"var(--nile-colors-blue-500)\"></nile-icon>\n </div>\n\n <div class=\"content-container\">\n <p>${file.name}</p>\n <p>${getFileType(file.type)} • ${formatFileSize(Number(file.size))}</p>\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"trash\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}\n\nexport function getVerticalErrorState(\n file: File,\n errorMessage: string,\n originalUrl: string,\n nileFilePreview: NileFilePreview\n): TemplateResult {\n truncateString(nileFilePreview);\n return html`\n <div class=\"vertical-div vertical-error\" part=\"vertical-error-state\">\n <div class=\"vertical-document-icon error-bg\">\n <nile-icon name=\"info-icon\" size=\"20\" color=\"var(--nile-colors-red-700)\"></nile-icon>\n </div>\n\n <div class=\"file-info-vertical-state\">\n <p class=\"vertical-file-name\">${file.name}</p>\n ${\n nileFilePreview.isStringTruncated\n ? html`<nile-tooltip content=${errorMessage}>\n <span>${errorMessage}</span>\n </nile-tooltip>`\n : html`<span>${errorMessage}</span>`\n }\n </div>\n\n <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name=\"cancelIcon\">\n <nile-icon\n name=\"close\"\n size=\"14\"\n class=\"icon corner-icon\"\n ></nile-icon>\n </slot>\n </div>\n `;\n}"],"names":["getHorizontalUploadingState","file","uploadStatus","html","_templateObject","_taggedTemplateLiteral","name","e","cancelFileUpload","getHorizontalPreviewState","url","originalUrl","_templateObject2","getFileType","type","formatFileSize","Number","size","removeFile","getHorizontalNoPreviewState","_templateObject3","getHorizontalErrorState","errorMessage","nileFilePreview","truncateString","_templateObject4","isStringTruncated","_templateObject5","_templateObject6","getVerticalUploadingState","_templateObject7","getVerticalPreviewState","_templateObject8","getVerticalNoPreviewState","_templateObject9","getVerticalErrorState","_templateObject10","_templateObject11","_templateObject12","_export","a"],"mappings":"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"}
|