UNPKG

iris-ds

Version:

Joveo iris libray

1 lines 14.5 kB
{"__symbolic":"module","version":4,"metadata":{"AvatarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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)}"]}]}],"members":{"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"backgroundType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"imgStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"nameStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"createInitials":[{"__symbolic":"method"}],"getBackground":[{"__symbolic":"method"}]}},"AvatarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AvatarComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"AvatarComponent"}]}]}],"members":{}},"DropzoneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"progressBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":3},"arguments":["progressBar",{"static":true}]}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"subtitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"backgroundType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"imgStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"nameStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"ProgressPercentage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"progressState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onFileChange":[{"__symbolic":"method"}],"resetFileStack":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"setProgress":[{"__symbolic":"method"}]}},"DropzoneModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DropzoneComponent"},{"__symbolic":"reference","name":"DragDropDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"DropzoneComponent"},{"__symbolic":"reference","name":"DragDropDirective"}]}]}],"members":{}},"DragDropDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[DragDrop]"}]}],"members":{"filesChangeEmiter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":8,"character":3}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":10,"character":3},"arguments":["style.background"]}]}],"borderStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":11,"character":3},"arguments":["style.border"]}]}],"borderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":12,"character":3},"arguments":["style.border-color"]}]}],"borderRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":13,"character":3},"arguments":["style.border-radius"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":17,"character":3},"arguments":["dragover",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":26,"character":3},"arguments":["dragleave",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":35,"character":3},"arguments":["drop",["$event"]]}]}]}},"IrisModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","name":"AvatarModule"},{"__symbolic":"reference","name":"DropzoneModule"}],"exports":[{"__symbolic":"reference","name":"AvatarModule"},{"__symbolic":"reference","name":"DropzoneModule"}]}]}],"members":{}}},"origins":{"AvatarComponent":"./lib/avatar/avatar.component","AvatarModule":"./lib/avatar/avatar.module","DropzoneComponent":"./lib/dropzone/dropzone.component","DropzoneModule":"./lib/dropzone/dropzone.module","DragDropDirective":"./lib/dropzone/dragdrop.directive","IrisModule":"./lib/iris.module"},"importAs":"iris-ds"}