iris-ds/bundles/iris-ds.umd.min.js

Joveo iris libray

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("iris-ds",["exports","@angular/core","@angular/common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["iris-ds"]={},e.ng.core,e.ng.common)}(this,(function(e,t,r){"use strict";var o=function(){function e(){this.src="",this.name="",this.backgroundType="solid",this.size="medium",this.imgStyles={},this.nameStyles={},this.alt="",this.bgColors=["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","amber","orange","deep-orange"],this.colorCssClass=""}return e.prototype.ngOnChanges=function(){this.src||(this.alt=this.createInitials(this.name),this.colorCssClass=this.backgroundType+"-"+this.getBackground(this.name))},e.prototype.createInitials=function(e){return e.trim().split(" ").slice(0,3).map((function(e){return e[0]})).join("")},e.prototype.getBackground=function(e){return this.bgColors[e.length%this.bgColors.length]},e}();o.decorators=[{type:t.Component,args:[{selector:"iris-avatar",template:'\n    <div [ngClass]="size">\n      <img [ngClass]="size"\n        *ngIf="src; else initials"\n        [src]="src"\n        [alt]="alt"\n        [ngStyle]="imgStyles"\n      />\n      <ng-template #initials>\n        <div [ngStyle]="nameStyles"\n            class="initials"\n            [ngClass]="colorCssClass">\n          <span>{{ alt }}</span>\n        </div>\n      </ng-template>\n    </div>\n  ',styles:[".small{font-size:10px;width:24px;height:24px}.medium{font-size:14px;width:32px;height:32px}.large{font-size:16px;width:40px;height:40px}.initials,img{border-radius:50%;height:100%;width:100%}.initials{display:grid;place-items:center}.solid-red{background:#f44336;color:#fff}.solid-pink{background:#e91e63;color:#fff}.solid-purple{background:#9c27b0;color:#fff}.solid-deep-purple{background:#673ab7;color:#fff}.solid-indigo{background:#3f51b5;color:#fff}.solid-blue{background:#2196f3;color:#fff}.solid-light-blue{background:#03a9f4;color:#fff}.solid-cyan{background:#00bcd4;color:#fff}.solid-teal{background:#009688;color:#fff}.solid-green{background:#4caf50;color:#fff}.solid-light-green{background:#8bc34a;color:#fff}.solid-lime{background:#cddc39;color:#fff}.solid-amber{background:#ffc107;color:#fff}.solid-orange{background:#ff9800;color:#fff}.solid-deep-orange{background:#ff5722;color:#fff}.subtle-red{background:#ffcdd2;color:rgba(0,0,0,.87)}.subtle-pink{background:#f8bbd0;color:rgba(0,0,0,.87)}.subtle-purple{background:#e1bee7;color:rgba(0,0,0,.87)}.subtle-deep-purple{background:#d1c4e9;color:rgba(0,0,0,.87)}.subtle-indigo{background:#c5cae9;color:rgba(0,0,0,.87)}.subtle-blue{background:#bbdefb;color:rgba(0,0,0,.87)}.subtle-light-blue{background:#b3e5fc;color:rgba(0,0,0,.87)}.subtle-cyan{background:#b2ebf2;color:rgba(0,0,0,.87)}.subtle-teal{background:#b2dfdb;color:rgba(0,0,0,.87)}.subtle-green{background:#c8e6c9;color:rgba(0,0,0,.87)}.subtle-light-green{background:#dcedc8;color:rgba(0,0,0,.87)}.subtle-lime{background:#f0f4c3;color:rgba(0,0,0,.87)}.subtle-amber{background:#ffecb3;color:rgba(0,0,0,.87)}.subtle-orange{background:#ffe0b2;color:rgba(0,0,0,.87)}.subtle-deep-orange{background:#ffccbc;color:rgba(0,0,0,.87)}"]}]}],o.ctorParameters=function(){return[]},o.propDecorators={src:[{type:t.Input}],name:[{type:t.Input}],backgroundType:[{type:t.Input}],size:[{type:t.Input}],imgStyles:[{type:t.Input}],nameStyles:[{type:t.Input}]};var n=function(){};n.decorators=[{type:t.NgModule,args:[{declarations:[o],imports:[r.CommonModule],exports:[o]}]}];var i=function(){function e(){this.files=[],this.src="",this.title="",this.subtitle="",this.backgroundType="solid",this.size="medium",this.imgStyles={},this.nameStyles={},this.progressState="verify",this.alt="",this.bgColors=["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","amber","orange","deep-orange"],this.colorCssClass=""}return e.prototype.ngAfterViewInit=function(){this.progressBar.nativeElement.hidden=!0},e.prototype.ngOnChanges=function(){this.setProgress(this.ProgressPercentage)},e.prototype.onFileChange=function(e){console.log("change called"),this.files=Object.keys(e).map((function(t){return e[t]})),this.progressBar.nativeElement.hidden=!1},e.prototype.resetFileStack=function(e){0==this.files.length&&(console.log("set dom data to null"),e.target.value=null)},e.prototype.deleteFile=function(e){this.files=this.files.filter((function(t){return t.name!=e.name})),0==this.files.length&&(this.progressBar.nativeElement.hidden=!0)},e.prototype.setProgress=function(e){var t,r=(e>100?100:e)/100*(2*this.progressBar.nativeElement.offsetWidth+2*this.progressBar.nativeElement.offsetHeight);t=r<=this.progressBar.nativeElement.offsetWidth?-448+r+"px 0px, 448px -100px, 453px 95px, 0px 100px":r<=this.progressBar.nativeElement.offsetWidth+this.progressBar.nativeElement.offsetHeight?"0px 0px, 448px "+(r-this.progressBar.nativeElement.offsetWidth-100)+"px, 453px 95px, 0px 100px":r<=2*this.progressBar.nativeElement.offsetWidth+this.progressBar.nativeElement.offsetHeight?"0px 0px, 448px 0px, "+(448-(r-this.progressBar.nativeElement.offsetWidth-this.progressBar.nativeElement.offsetHeight))+"px 95px, 0px 100px":"0px 0px, 448px 0px, 0px 95px, 0px "+(100-(r-2*this.progressBar.nativeElement.offsetWidth-this.progressBar.nativeElement.offsetHeight))+"px",this.progressBar.nativeElement.setAttribute("style","background-position : "+t)},e}();i.decorators=[{type:t.Component,args:[{selector:"iris-dropzone",template:'\n    <div class="dropzone-container">\n      <h5 class="iris-h5 w500">{{title}}</h5>\n      <p class="iris-body2 mt-1 mb-4">{{subtitle}}</p>\n      <div class="{{ \'progress \' + progressState }}" #progressBar>\n        <div class="filenamecontainer">\n            <div *ngFor="let file of files">\n                <div class="filename">{{file.name}}</div>\n                <button color="warn" (click)="deleteFile(file)"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n                <path d="M10.0003 1.66602C5.39199 1.66602 1.66699 5.39102 1.66699 9.99935C1.66699 14.6077 5.39199 18.3327 10.0003 18.3327C14.6087 18.3327 18.3337 14.6077 18.3337 9.99935C18.3337 5.39102 14.6087 1.66602 10.0003 1.66602ZM14.167 12.991L12.992 14.166L10.0003 11.1744L7.00866 14.166L5.83366 12.991L8.82533 9.99935L5.83366 7.00768L7.00866 5.83268L10.0003 8.82435L12.992 5.83268L14.167 7.00768L11.1753 9.99935L14.167 12.991Z" fill="#718096"/>\n                </svg>\n                </button>\n            </div>\n        </div>\n      </div>\n      <div>\n        <div DragDrop class="dropzone" (filesChangeEmiter)="onFileChange($event)">\n          <div class="text-wrapper">\n            <div class="centered">\n              <input type="file" name="file" id="file" (change)="onFileChange($event.target.files)" (click)="resetFileStack($event)">\n              <label for="file"><span class="textLink">Choose a file</span> or Drag it here!</label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ',styles:['@charset "UTF-8";.iris-h6{font-size:.6rem}.iris-h5,.iris-h6{color:#212121;margin:0}.iris-h5{font-size:1.2rem}.iris-h4{font-size:1.8rem}.iris-h3,.iris-h4{color:#212121;margin:0}.iris-h3{font-size:2.4rem}.iris-h2{font-size:3rem}.iris-h1,.iris-h2{color:#212121;margin:0}.iris-h1{font-size:3.6rem}.iris-subtitle1{font-size:1rem!important;color:#424242;font-weight:500;line-height:1.2rem}.iris-subtitle2{font-size:.9rem!important;color:#424242;font-weight:500}.iris-body1{line-height:1.2rem}.iris-body1,.iris-body2{font-size:.9rem!important;color:#616161;font-weight:400}.iris-caption{font-size:.75rem}.iris-caption,.iris-overline{color:#616161;font-weight:400}.iris-overline{font-size:.65rem}.w100{font-weight:100}.w200{font-weight:200}.w400{font-weight:400}.w500{font-weight:500}.w600{font-weight:600}.w700{font-weight:700}.dropzone{height:96px;display:table;background-color:#fff}.dropzone,.dropzone-container{width:448px}input[type=file]{display:none}.textLink{color:#2196f3;font-weight:600;cursor:pointer}.text-wrapper{display:table-cell;vertical-align:middle}.centered{font-size:1rem;text-align:center;color:#616161}.fileItem{width:calc(25% - 6px);overflow:hidden;height:-moz-fit-content;height:fit-content;margin:3px;padding:10px;display:block;position:relative;float:left;border:2px dashed #789;border-radius:5px;transition:.3s ease}.fileItem:hover{border:2px solid #c33838;background-color:rgba(195,56,56,.7490196078431373)}.fileItem:hover .fileItemIcon:before{content:"";color:#f5f5f5}.fileItem:hover .fileItemText{color:#f5f5f5}.fileItemIconDiv{text-align:center}.fileItemIcon:before{font-style:normal;content:"";color:#789;font-family:Font Awesome\\ 5 Free;font-weight:900}.fileItemText{text-align:center;margin-top:10px;height:40px}.filename{color:#4a5568;font-weight:500;float:left}.filenamecontainer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;background:#fff;width:calc(100% - 6px);margin-left:2px;margin-top:40px}.progress{height:100px;position:absolute;width:453px;margin-top:0;background-size:100% 5px,5px 100%,100% 5px,5px 100%!important;background-repeat:no-repeat!important;animation:progress 4s linear forwards}.progress.verify{background:linear-gradient(90deg,#42a5f5 99.99%,transparent),linear-gradient(180deg,#42a5f5 99.99%,transparent),linear-gradient(90deg,#42a5f5 99.99%,transparent),linear-gradient(180deg,#42a5f5 99.99%,transparent)}.progress.success{background:linear-gradient(90deg,#81c784 99.99%,transparent),linear-gradient(180deg,#81c784 99.99%,transparent),linear-gradient(90deg,#81c784 99.99%,transparent),linear-gradient(180deg,#81c784 99.99%,transparent)}.progress.error{background:linear-gradient(90deg,#e57373 99.99%,transparent),linear-gradient(180deg,#e57373 99.99%,transparent),linear-gradient(90deg,#e57373 99.99%,transparent),linear-gradient(180deg,#e57373 99.99%,transparent)}button{background:none;border:0;cursor:pointer}']}]}],i.ctorParameters=function(){return[]},i.propDecorators={progressBar:[{type:t.ViewChild,args:["progressBar",{static:!0}]}],src:[{type:t.Input}],title:[{type:t.Input}],subtitle:[{type:t.Input}],backgroundType:[{type:t.Input}],size:[{type:t.Input}],imgStyles:[{type:t.Input}],nameStyles:[{type:t.Input}],ProgressPercentage:[{type:t.Input}],progressState:[{type:t.Input}]};var s=function(){function e(){this.filesChangeEmiter=new t.EventEmitter,this.background="#ffffff",this.borderStyle="2px dashed",this.borderColor="#E5E7EB",this.borderRadius="0px"}return e.prototype.onDragOver=function(e){e.preventDefault(),e.stopPropagation(),this.background="#ffffff",this.borderColor="#42A5F5",this.borderStyle="2px solid",console.log("drag over")},e.prototype.onDragLeave=function(e){e.preventDefault(),e.stopPropagation(),this.background="#ffffff",this.borderColor="#e5e7eb",this.borderStyle="2px dashed",console.log("drag leave")},e.prototype.onDrop=function(e){e.preventDefault(),e.stopPropagation(),this.background="#ffffff",this.borderColor="#e5e7eb",this.borderStyle="2px dashed",console.log("drag drop");var t=e.dataTransfer.files;this.filesChangeEmiter.emit(t)},e}();s.decorators=[{type:t.Directive,args:[{selector:"[DragDrop]"}]}],s.ctorParameters=function(){return[]},s.propDecorators={filesChangeEmiter:[{type:t.Output}],background:[{type:t.HostBinding,args:["style.background"]}],borderStyle:[{type:t.HostBinding,args:["style.border"]}],borderColor:[{type:t.HostBinding,args:["style.border-color"]}],borderRadius:[{type:t.HostBinding,args:["style.border-radius"]}],onDragOver:[{type:t.HostListener,args:["dragover",["$event"]]}],onDragLeave:[{type:t.HostListener,args:["dragleave",["$event"]]}],onDrop:[{type:t.HostListener,args:["drop",["$event"]]}]};var a=function(){};a.decorators=[{type:t.NgModule,args:[{declarations:[i,s],imports:[r.CommonModule],exports:[i,s]}]}];var l=function(){};l.decorators=[{type:t.NgModule,args:[{imports:[n,a],exports:[n,a]}]}],e.AvatarComponent=o,e.AvatarModule=n,e.DragDropDirective=s,e.DropzoneComponent=i,e.DropzoneModule=a,e.IrisModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=iris-ds.umd.min.js.map