@openexo/design-system
Version:
OpenExO design system
2 lines • 22.3 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/core"),require("@angular/material/button"),require("@angular/material/icon"),require("@angular/material/tooltip"),require("@angular/material/progress-spinner"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("@openexo/design-system",["exports","@angular/core","@angular/common","@angular/material/core","@angular/material/button","@angular/material/icon","@angular/material/tooltip","@angular/material/progress-spinner","@angular/platform-browser"],t):t(((e=e||self).openexo=e.openexo||{},e.openexo["design-system"]={}),e.ng.core,e.ng.common,e.ng.material.core,e.ng.material.button,e.ng.material.icon,e.ng.material.tooltip,e.ng.material.progressSpinner,e.ng.platformBrowser)}(this,(function(e,t,i,a,r,c,n,s,o){"use strict";var m={disabled:!0},g=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,r.MatButtonModule,c.MatIconModule],exports:[r.MatButtonModule],providers:[{provide:a.MAT_RIPPLE_GLOBAL_OPTIONS,useValue:m}]}]}],e}(),f={xs:"xs",sm:"sm",lg:"lg",xl:"xl"},p="circle";var u=function(){function e(){this.size=f.sm,this.shape=p,this.tooltipPosition="below",this.onClick=new t.EventEmitter,this.sizeAvatar=f,this.valuesCertification=[100,47,30,22,18,15]}return e.parseSizeToNumber=function(e){switch(e){case f.xs:return 24;case f.sm:return 48;case f.lg:return 96;case f.xl:return 144}},Object.defineProperty(e.prototype,"imageUrl",{get:function(){return this.src?this.src:this.item&&this.item.profilePictures?this.buildPicture(this.item.profilePictures):void 0},enumerable:!0,configurable:!0}),e.prototype.buildPicture=function(t){var i=this,a=t.find((function(t){return t.width===e.parseSizeToNumber(i.size)}));return a?a.url:void 0},Object.defineProperty(e.prototype,"imageAlt",{get:function(){return this.alt?this.alt:(this.item&&this.buildNameItem(this.item),"Avatar")},enumerable:!0,configurable:!0}),e.prototype.buildNameItem=function(e){return e.name?this.item.name:e.fullName?this.item.fullName:e.shortName?this.item.shortName:void 0},Object.defineProperty(e.prototype,"imageTooltip",{get:function(){if(this.tooltip)return this.tooltip;this.item&&this.buildNameItem(this.item)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"certificateTooltip",{get:function(){if(this.certificates&&this.certificates.length>0)return this.certificates.map((function(e){return e.name?""+e.name:e.humanizedCode?""+e.humanizedCode:void 0})).join("\n")},enumerable:!0,configurable:!0}),e.prototype.click=function(){this.onClick.emit(!0)},e.decorators=[{type:t.Component,args:[{selector:"exo-avatar",template:'<div *ngIf="!imageSet">\n <figure *ngIf="imageUrl; else icon"\n (click)="click()"\n class="avatar__figure"\n [ngClass]="[\'exo-image-\' + size]"\n >\n <img [src]="imageUrl"\n [matTooltip]="imageTooltip"\n [matTooltipPosition]="tooltipPosition"\n [ngStyle]="{width: customizedSize?.width, height: customizedSize?.height}"\n [ngClass]="[\'exo-image\', \'exo-image-\' + size, \'exo-image-shape-\' + shape]"\n [alt]="imageAlt"\n >\n </figure>\n</div>\n<ng-template #icon>\n <div>\n <mat-icon [ngClass]="[\'icon\', \'icon-size-\' + size]"\n (click)="click()"\n [matTooltip]="imageTooltip"\n [matTooltipPosition]="tooltipPosition"\n >account_circle</mat-icon>\n </div>\n</ng-template>\n\n<div class="certificates" *ngIf="certificates">\n <ng-container [ngSwitch]="size">\n <div *ngSwitchCase="sizeAvatar.sm">\n <ng-container [ngTemplateOutlet]="certificateTpl" [ngTemplateOutletContext]="{class: \'medium-avatar\', diameter: 56, stroke: 2}"></ng-container>\n </div>\n <div *ngSwitchCase="sizeAvatar.lg">\n <ng-container [ngTemplateOutlet]="certificateTpl" [ngTemplateOutletContext]="{class: \'big-avatar\', diameter: 108, stroke: 3}"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #certificateTpl let-class="class" let-diameter="diameter" let-stroke="stroke">\n <div [ngClass]="class" [matTooltip]="certificateTooltip" matTooltipClass="line-breaker">\n <mat-progress-spinner\n *ngFor="let certificate of certificates; let i=index;"\n [diameter]="diameter"\n [strokeWidth]="stroke"\n [value]="valuesCertification[certificates.length - 1]"\n [ngClass]="[\'certificate-\' + i, certificate.code, \'number-certificates-\' + certificates.length]"\n ></mat-progress-spinner>\n </div>\n</ng-template>\n\n<div *ngIf="imageSet" class="images-set">\n <div class="avatars">\n <span *ngIf="maxSetShowed < imageSet.length" class="avatar remain">\n <span class="number">\n {{imageSet.length - maxSetShowed}}+\n </span>\n </span>\n <ng-container *ngFor="let item of imageSet; let i = index">\n <span class="avatar" *ngIf="i < maxSetShowed">\n <figure *ngIf="item.src; else icon" class="avatar__figure">\n <img [src]="item.src"\n [matTooltip]="item.tooltip"\n [matTooltipPosition]="tooltipPosition"\n [ngStyle]="{width: customizedSize?.width, height: customizedSize?.height}"\n [ngClass]="[\'exo-image\', \'exo-image-\' + size, \'exo-image-shape-\' + shape]"\n >\n </figure>\n </span>\n </ng-container>\n </div>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".certificates .medium-avatar{margin-top:-52px;margin-left:-4px;width:56px;height:56px}.certificates .medium-avatar ::ng-deep circle{stroke-linecap:round}.certificates .medium-avatar ::ng-deep .CCO circle{stroke:#6ae5d5}.certificates .medium-avatar ::ng-deep .CEA circle{stroke:#ffb05c}.certificates .medium-avatar ::ng-deep .CSC circle{stroke:#0094d4}.certificates .medium-avatar ::ng-deep .CFO circle{stroke:#46464b}.certificates .medium-avatar ::ng-deep .CTR circle{stroke:#002e58}.certificates .medium-avatar ::ng-deep .CBA circle{stroke:#6f23ff}.certificates .medium-avatar ::ng-deep.number-certificates-0.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-1.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-1.certificate-1 svg{margin-top:-56px!important}.certificates .medium-avatar ::ng-deep.number-certificates-1.certificate-1 circle{transform:rotate(366deg)}.certificates .medium-avatar ::ng-deep.number-certificates-2.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-2.certificate-1 svg{margin-top:-56px!important}.certificates .medium-avatar ::ng-deep.number-certificates-2.certificate-1 circle{transform:rotate(186deg)}.certificates .medium-avatar ::ng-deep.number-certificates-2.certificate-2 svg{margin-top:-112px!important}.certificates .medium-avatar ::ng-deep.number-certificates-2.certificate-2 circle{transform:rotate(366deg)}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-1 svg{margin-top:-56px!important}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-1 circle{transform:rotate(126deg)}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-2 svg{margin-top:-112px!important}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-2 circle{transform:rotate(246deg)}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-3 svg{margin-top:-168px!important}.certificates .medium-avatar ::ng-deep.number-certificates-3.certificate-3 circle{transform:rotate(366deg)}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-1 svg{margin-top:-56px!important}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-1 circle{transform:rotate(96deg)}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-2 svg{margin-top:-112px!important}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-2 circle{transform:rotate(186deg)}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-3 svg{margin-top:-168px!important}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-3 circle{transform:rotate(276deg)}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-4 svg{margin-top:-224px!important}.certificates .medium-avatar ::ng-deep.number-certificates-4.certificate-4 circle{transform:rotate(366deg)}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-1 svg{margin-top:-56px!important}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-1 circle{transform:rotate(78deg)}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-2 svg{margin-top:-112px!important}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-2 circle{transform:rotate(150deg)}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-3 svg{margin-top:-168px!important}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-3 circle{transform:rotate(222deg)}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-4 svg{margin-top:-224px!important}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-4 circle{transform:rotate(294deg)}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-5 svg{margin-top:-280px!important}.certificates .medium-avatar ::ng-deep.number-certificates-5.certificate-5 circle{transform:rotate(366deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-0 circle{transform:rotate(6deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-1 svg{margin-top:-56px!important}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-1 circle{transform:rotate(66deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-2 svg{margin-top:-112px!important}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-2 circle{transform:rotate(126deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-3 svg{margin-top:-168px!important}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-3 circle{transform:rotate(186deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-4 svg{margin-top:-224px!important}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-4 circle{transform:rotate(246deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-5 svg{margin-top:-280px!important}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-5 circle{transform:rotate(306deg)}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-6 svg{margin-top:-336px!important}.certificates .medium-avatar ::ng-deep.number-certificates-6.certificate-6 circle{transform:rotate(366deg)}.certificates .big-avatar{margin-top:-102px;margin-left:-6px;width:108px;height:108px}.certificates .big-avatar ::ng-deep circle{stroke-linecap:round}.certificates .big-avatar ::ng-deep .CCO circle{stroke:#6ae5d5}.certificates .big-avatar ::ng-deep .CEA circle{stroke:#ffb05c}.certificates .big-avatar ::ng-deep .CSC circle{stroke:#0094d4}.certificates .big-avatar ::ng-deep .CFO circle{stroke:#46464b}.certificates .big-avatar ::ng-deep .CTR circle{stroke:#002e58}.certificates .big-avatar ::ng-deep .CBA circle{stroke:#6f23ff}.certificates .big-avatar ::ng-deep.number-certificates-0.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-1.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-1.certificate-1 svg{margin-top:-108px!important}.certificates .big-avatar ::ng-deep.number-certificates-1.certificate-1 circle{transform:rotate(366deg)}.certificates .big-avatar ::ng-deep.number-certificates-2.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-2.certificate-1 svg{margin-top:-108px!important}.certificates .big-avatar ::ng-deep.number-certificates-2.certificate-1 circle{transform:rotate(186deg)}.certificates .big-avatar ::ng-deep.number-certificates-2.certificate-2 svg{margin-top:-216px!important}.certificates .big-avatar ::ng-deep.number-certificates-2.certificate-2 circle{transform:rotate(366deg)}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-1 svg{margin-top:-108px!important}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-1 circle{transform:rotate(126deg)}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-2 svg{margin-top:-216px!important}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-2 circle{transform:rotate(246deg)}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-3 svg{margin-top:-324px!important}.certificates .big-avatar ::ng-deep.number-certificates-3.certificate-3 circle{transform:rotate(366deg)}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-1 svg{margin-top:-108px!important}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-1 circle{transform:rotate(96deg)}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-2 svg{margin-top:-216px!important}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-2 circle{transform:rotate(186deg)}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-3 svg{margin-top:-324px!important}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-3 circle{transform:rotate(276deg)}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-4 svg{margin-top:-432px!important}.certificates .big-avatar ::ng-deep.number-certificates-4.certificate-4 circle{transform:rotate(366deg)}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-1 svg{margin-top:-108px!important}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-1 circle{transform:rotate(78deg)}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-2 svg{margin-top:-216px!important}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-2 circle{transform:rotate(150deg)}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-3 svg{margin-top:-324px!important}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-3 circle{transform:rotate(222deg)}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-4 svg{margin-top:-432px!important}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-4 circle{transform:rotate(294deg)}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-5 svg{margin-top:-540px!important}.certificates .big-avatar ::ng-deep.number-certificates-5.certificate-5 circle{transform:rotate(366deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-0 circle{transform:rotate(6deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-1 svg{margin-top:-108px!important}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-1 circle{transform:rotate(66deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-2 svg{margin-top:-216px!important}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-2 circle{transform:rotate(126deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-3 svg{margin-top:-324px!important}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-3 circle{transform:rotate(186deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-4 svg{margin-top:-432px!important}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-4 circle{transform:rotate(246deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-5 svg{margin-top:-540px!important}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-5 circle{transform:rotate(306deg)}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-6 svg{margin-top:-648px!important}.certificates .big-avatar ::ng-deep.number-certificates-6.certificate-6 circle{transform:rotate(366deg)}.images-set .avatars{display:inline-flex;flex-direction:row-reverse;margin:0 0 16px 16px}.images-set .avatars .avatar{margin-left:-16px;position:relative;border:1px solid #fff;border-radius:50%;overflow:hidden;width:48px;height:48px}.images-set .avatars .avatar.remain{background-color:#3a1090;color:#fff}.images-set .avatars .avatar.remain .number{flex-direction:column;display:flex;place-content:center;align-items:center;height:100%}"]}]}],e.propDecorators={maxSetShowed:[{type:t.Input}],imageSet:[{type:t.Input}],src:[{type:t.Input}],alt:[{type:t.Input}],customizedSize:[{type:t.Input}],size:[{type:t.Input}],shape:[{type:t.Input}],item:[{type:t.Input}],tooltip:[{type:t.Input}],tooltipPosition:[{type:t.Input}],certificates:[{type:t.Input}],onClick:[{type:t.Output}]},e}();var d=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,n.MatTooltipModule,c.MatIconModule,s.MatProgressSpinnerModule],declarations:[u],exports:[u,n.MatTooltipModule,c.MatIconModule,s.MatProgressSpinnerModule]}]}],e}(),l="row",v=function(){function e(){this.direction=l,this.truncateName=!1,this.truncateDescription=!1,this.connected=!1}return Object.defineProperty(e.prototype,"systemTruncate",{get:function(){return this.truncateName||this.truncateDescription?"text-truncate":""},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Component,args:[{selector:"exo-avatar-system",template:"<div class=\"avatar-system__container\" [ngClass]=\"direction\">\n <ng-content select=\"exo-avatar\"></ng-content>\n <div class=\"avatar-system__data\" [ngClass]=\"[direction, systemTruncate] \">\n <p class=\"avatar-system__data--name\"\n [ngClass]=\"{\n 'title': avatar?.size === 'xl',\n 'subheading-2': avatar?.size === 'lg',\n 'body-2': avatar?.size === 'sm',\n 'caption-2': avatar?.size === 'xs',\n 'text-truncate': truncateName === true,\n 'connected': connected === true }\"\n [matTooltip]=\"truncateName === true ? name : undefined\"\n >\n {{ name }}\n </p>\n <p class=\"foreground-secondary-text avatar-system__data--description\"\n [ngClass]=\"{\n 'subheading-2': avatar?.size === 'xl',\n 'caption-1': avatar?.size !== 'xl',\n 'text-truncate': truncateDescription === true }\"\n [matTooltip]=\"truncateDescription === true ? description : undefined \"\n [innerHTML] = \"description\"\n >\n </p>\n </div>\n</div>\n",changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[""]}]}],e.propDecorators={name:[{type:t.Input}],description:[{type:t.Input}],direction:[{type:t.Input}],avatar:[{type:t.ContentChild,args:[u]}],truncateName:[{type:t.Input}],truncateDescription:[{type:t.Input}],connected:[{type:t.Input}]},e}();var b=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,d],declarations:[v],exports:[v]}]}],e}(),h={info:"info",success:"success",warning:"warning",danger:"danger"},x=function(){function e(e){this.sanitizer=e,this.typeAlert=h.info,this.isCloseable=!1,this.sendAction=new t.EventEmitter,this.showMessage=!0,this.typeAlertEnum=h}return e.prototype.ngOnInit=function(){this.isCloseable&&!this.closeButtonText&&console.error("If the button is closable you need indicates the text for the button in small resolutions"),this.message=this.sanitizer.bypassSecurityTrustHtml(this.message)},e.prototype.onClose=function(){this.showMessage=!1},e.prototype.onAction=function(){this.sendAction.emit()},e.decorators=[{type:t.Component,args:[{selector:"exo-alert",template:'<div *ngIf="showMessage" class="alert__container {{typeAlert}}">\n <div class="body-2 alert__description">\n <ng-container [ngSwitch]="typeAlert">\n <mat-icon *ngSwitchCase="typeAlertEnum.info" class="icon_type">info</mat-icon>\n <mat-icon *ngSwitchCase="typeAlertEnum.success" class="icon_type" >check_circle</mat-icon>\n <mat-icon *ngSwitchCase="typeAlertEnum.warning" class="icon_type">warning</mat-icon>\n <mat-icon *ngSwitchCase="typeAlertEnum.danger" class="icon_type">cancel</mat-icon>\n </ng-container>\n <div [innerHtml]="message"></div>\n </div>\n <button class="alert__action-button push-left-xs" *ngIf="actionButtonText" mat-button color="primary" (click)="onAction()">{{actionButtonText}}</button>\n <ng-container *ngIf="isCloseable">\n <mat-icon (click)="onClose()" class="push-left-xs pointer alert__close-icon">close</mat-icon>\n <button class="alert__action-button close push-left-xxs" mat-button color="primary" (click)="onClose()">{{closeButtonText}}</button>\n </ng-container>\n</div>\n\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[""]}]}],e.ctorParameters=function(){return[{type:o.DomSanitizer}]},e.propDecorators={typeAlert:[{type:t.Input}],message:[{type:t.Input}],isCloseable:[{type:t.Input}],closeButtonText:[{type:t.Input}],actionButtonText:[{type:t.Input}],sendAction:[{type:t.Output}]},e}();var y=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,c.MatIconModule,g],declarations:[x],exports:[x]}]}],e}();e.ExOAvatarModule=d,e.ExOAvatarSystemModule=b,e.ExoAlertModule=y,e.ExoAvatarSystemComponent=v,e.ExoButtonModule=g,e.ɵa=u,e.ɵb=d,e.ɵc=g,e.ɵd=x,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=openexo-design-system.umd.min.js.map