iris-ds
Version:
Joveo iris libray
290 lines (278 loc) • 18.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('iris-ds', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['iris-ds'] = {}, global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';
var AvatarComponent = /** @class */ (function () {
function AvatarComponent() {
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 = '';
}
AvatarComponent.prototype.ngOnChanges = function () {
if (!this.src) {
this.alt = this.createInitials(this.name);
this.colorCssClass = this.backgroundType + "-" + this.getBackground(this.name);
}
};
AvatarComponent.prototype.createInitials = function (name) {
return name
.trim()
.split(' ')
.slice(0, 3)
.map(function (word) { return word[0]; })
.join('');
};
AvatarComponent.prototype.getBackground = function (name) {
return this.bgColors[name.length % this.bgColors.length];
};
return AvatarComponent;
}());
AvatarComponent.decorators = [
{ type: core.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)}"]
},] }
];
AvatarComponent.ctorParameters = function () { return []; };
AvatarComponent.propDecorators = {
src: [{ type: core.Input }],
name: [{ type: core.Input }],
backgroundType: [{ type: core.Input }],
size: [{ type: core.Input }],
imgStyles: [{ type: core.Input }],
nameStyles: [{ type: core.Input }]
};
var AvatarModule = /** @class */ (function () {
function AvatarModule() {
}
return AvatarModule;
}());
AvatarModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [AvatarComponent],
imports: [common.CommonModule],
exports: [AvatarComponent]
},] }
];
// Old CODE
// <div class="dropzone-container">
// <h5 class="w500">{{title}}</h5>
// <p class="subtitle2 mt-1 mb-4">{{subtitle}}</p>
// <div class="progress" #progressBar >
// </div>
// <div>
// <div DragDrop class="dropzone" (filesChangeEmiter)="onFileChange($event)">
// <div class="text-wrapper">
// <div class="centered">
// <input type="file" name="file" id="file" (change)="onFileChange($event.target.files)" multiple>
// <label for="file"><span class="textLink">Choose a file</span> or Drag it here!</label>
// </div>
// </div>
// </div>
// </div>
// <hr>
// <div>
// <h3 mat-subheader>Files</h3>
// <div *ngFor="let file of files">
// <div>{{file.name}}</div>
// <button color="warn" (click)="deleteFile(file)">Delete</button>
// </div>
// </div>
// </div>
var DropzoneComponent = /** @class */ (function () {
function DropzoneComponent() {
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 = '';
}
DropzoneComponent.prototype.ngAfterViewInit = function () {
this.progressBar.nativeElement.hidden = true;
//state = verify / success / error
};
DropzoneComponent.prototype.ngOnChanges = function () {
this.setProgress(this.ProgressPercentage);
};
DropzoneComponent.prototype.onFileChange = function (pFileList) {
console.log("change called");
this.files = Object.keys(pFileList).map(function (key) { return pFileList[key]; });
this.progressBar.nativeElement.hidden = false;
// this.setProgressState('verify')
};
DropzoneComponent.prototype.resetFileStack = function (event) {
if (this.files.length == 0) {
console.log("set dom data to null");
event.target.value = null;
}
};
DropzoneComponent.prototype.deleteFile = function (f) {
this.files = this.files.filter(function (w) { return w.name != f.name; });
if (this.files.length == 0) {
this.progressBar.nativeElement.hidden = true;
}
};
DropzoneComponent.prototype.setProgress = function (progresspercentage) {
var totalLength = (this.progressBar.nativeElement.offsetWidth * 2) + (this.progressBar.nativeElement.offsetHeight * 2);
var input = (progresspercentage > 100) ? 100 : progresspercentage;
var borderLen = (input / 100) * totalLength;
var backgroundPos;
if (borderLen <= this.progressBar.nativeElement.offsetWidth) {
backgroundPos = (-448 + borderLen) + 'px 0px, 448px -100px, 453px 95px, 0px 100px';
}
else if (borderLen <= (this.progressBar.nativeElement.offsetWidth + this.progressBar.nativeElement.offsetHeight)) {
backgroundPos = '0px 0px, 448px ' + (-100 + (borderLen - this.progressBar.nativeElement.offsetWidth)) + 'px, 453px 95px, 0px 100px';
}
else if (borderLen <= (this.progressBar.nativeElement.offsetWidth * 2 + this.progressBar.nativeElement.offsetHeight)) {
backgroundPos = '0px 0px, 448px 0px, ' + (448 - (borderLen - this.progressBar.nativeElement.offsetWidth - this.progressBar.nativeElement.offsetHeight)) + 'px 95px, 0px 100px';
}
else {
backgroundPos = '0px 0px, 448px 0px, 0px 95px, 0px ' + (100 - (borderLen - (this.progressBar.nativeElement.offsetWidth * 2) - this.progressBar.nativeElement.offsetHeight)) + 'px';
}
this.progressBar.nativeElement.setAttribute("style", "background-position : " + backgroundPos);
};
return DropzoneComponent;
}());
DropzoneComponent.decorators = [
{ type: core.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:\"\uF00D\";color:#f5f5f5}.fileItem:hover .fileItemText{color:#f5f5f5}.fileItemIconDiv{text-align:center}.fileItemIcon:before{font-style:normal;content:\"\uF15B\";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}"]
},] }
];
DropzoneComponent.ctorParameters = function () { return []; };
DropzoneComponent.propDecorators = {
progressBar: [{ type: core.ViewChild, args: ['progressBar', { static: true },] }],
src: [{ type: core.Input }],
title: [{ type: core.Input }],
subtitle: [{ type: core.Input }],
backgroundType: [{ type: core.Input }],
size: [{ type: core.Input }],
imgStyles: [{ type: core.Input }],
nameStyles: [{ type: core.Input }],
ProgressPercentage: [{ type: core.Input }],
progressState: [{ type: core.Input }]
};
var DragDropDirective = /** @class */ (function () {
function DragDropDirective() {
//@Input() private allowed_extensions : Array<string> = ['png', 'jpg', 'bmp'];
this.filesChangeEmiter = new core.EventEmitter();
//@Output() private filesInvalidEmiter : EventEmitter<File[]> = new EventEmitter();
this.background = '#ffffff';
this.borderStyle = '2px dashed';
this.borderColor = '#E5E7EB';
this.borderRadius = '0px';
}
DragDropDirective.prototype.onDragOver = function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#42A5F5';
this.borderStyle = '2px solid';
console.log("drag over");
};
DragDropDirective.prototype.onDragLeave = function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#e5e7eb';
this.borderStyle = '2px dashed';
console.log("drag leave");
};
DragDropDirective.prototype.onDrop = function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#ffffff';
this.borderColor = '#e5e7eb';
this.borderStyle = '2px dashed';
console.log("drag drop");
debugger;
var files = evt.dataTransfer.files;
var valid_files = files;
this.filesChangeEmiter.emit(valid_files);
};
return DragDropDirective;
}());
DragDropDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[DragDrop]'
},] }
];
DragDropDirective.ctorParameters = function () { return []; };
DragDropDirective.propDecorators = {
filesChangeEmiter: [{ type: core.Output }],
background: [{ type: core.HostBinding, args: ['style.background',] }],
borderStyle: [{ type: core.HostBinding, args: ['style.border',] }],
borderColor: [{ type: core.HostBinding, args: ['style.border-color',] }],
borderRadius: [{ type: core.HostBinding, args: ['style.border-radius',] }],
onDragOver: [{ type: core.HostListener, args: ['dragover', ['$event'],] }],
onDragLeave: [{ type: core.HostListener, args: ['dragleave', ['$event'],] }],
onDrop: [{ type: core.HostListener, args: ['drop', ['$event'],] }]
};
var DropzoneModule = /** @class */ (function () {
function DropzoneModule() {
}
return DropzoneModule;
}());
DropzoneModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [DropzoneComponent, DragDropDirective],
imports: [common.CommonModule],
exports: [DropzoneComponent, DragDropDirective]
},] }
];
var IrisModule = /** @class */ (function () {
function IrisModule() {
}
return IrisModule;
}());
IrisModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
AvatarModule,
DropzoneModule,
],
exports: [
AvatarModule,
DropzoneModule
]
},] }
];
/*
* Public API Surface of iris
*/
/**
* Generated bundle index. Do not edit.
*/
exports.AvatarComponent = AvatarComponent;
exports.AvatarModule = AvatarModule;
exports.DragDropDirective = DragDropDirective;
exports.DropzoneComponent = DropzoneComponent;
exports.DropzoneModule = DropzoneModule;
exports.IrisModule = IrisModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=iris-ds.umd.js.map