@openexo/design-system
Version:
OpenExO design system
610 lines (591 loc) • 35 kB
JavaScript
import { NgModule, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { DomSanitizer } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* Generated from: lib/button/button.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const globalRippleConfig = {
disabled: true,
};
const ɵ0 = globalRippleConfig;
class ExoButtonModule {
}
ExoButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
],
exports: [
MatButtonModule,
],
providers: [
{ provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: ɵ0 },
],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/button/public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/button/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar/avatar.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const SizeAvatarEnum = {
xs: "xs",
sm: "sm",
lg: "lg",
xl: "xl",
};
/** @enum {string} */
const ShapeEnum = {
circle: "circle",
rect: "rect",
};
/**
* @record
*/
function Certificate() { }
if (false) {
/** @type {?} */
Certificate.prototype.code;
/** @type {?} */
Certificate.prototype.name;
/** @type {?|undefined} */
Certificate.prototype.humanizedCode;
}
/** @enum {string} */
const CertificateEnum = {
FOUNDATION: "CFO",
CONSULTANT: "CCO",
SPRINT_COACH: "CSC",
AMBASSADOR: "CEA",
TRAINER: "CTR",
BOARD_ADVISOR: "CBA",
};
class ExOAvatarComponent {
constructor() {
/**
* By default will use SizeAvatarEnum.sm
* (xs (24px), sm(48px), lg(96px), xl(144px))
*/
this.size = SizeAvatarEnum.sm;
/**
* Shape of the avatar. By default will be circle.
*/
this.shape = ShapeEnum.circle;
/**
* Position where the tooltip will show. By default is below.
*/
this.tooltipPosition = 'below';
/**
* In other case, will emit an event and the parent will take the control (For example, to show a menu when click)
*/
this.onClick = new EventEmitter();
this.sizeAvatar = SizeAvatarEnum;
// If we increase a new certificate, we need add the new size of stroke.
this.valuesCertification = [
100, 47, 30, 22, 18, 15,
];
}
/**
* Sizes defined in the profile_picture array.
* @param {?} size Must be xs, sm, lg, xl. If you need other, talk with design.
* @return {?}
*/
static parseSizeToNumber(size) {
switch (size) {
case SizeAvatarEnum.xs:
return 24;
case SizeAvatarEnum.sm:
return 48;
case SizeAvatarEnum.lg:
return 96;
case SizeAvatarEnum.xl:
return 144;
}
}
/**
* @return {?}
*/
get imageUrl() {
if (this.src) {
return this.src;
}
if (this.item && this.item.profilePictures) {
return this.buildPicture(this.item.profilePictures);
}
return undefined;
}
/**
* @param {?} profilePictures
* @return {?}
*/
buildPicture(profilePictures) {
/** @type {?} */
const picture = profilePictures.find((/**
* @param {?} pic
* @return {?}
*/
pic => pic.width === ExOAvatarComponent.parseSizeToNumber(this.size)));
return picture ? picture.url : undefined;
}
/**
* @return {?}
*/
get imageAlt() {
if (this.alt) {
return this.alt;
}
if (this.item) {
this.buildNameItem(this.item);
}
return 'Avatar';
}
/**
* Return name, fullName or shortName(in that order) from items to use in the Alt attr from image and the tooltips.
* @param {?} item
* @return {?}
*/
buildNameItem(item) {
if (item.name) {
return this.item.name;
}
if (item.fullName) {
return this.item.fullName;
}
if (item.shortName) {
return this.item.shortName;
}
}
/**
* @return {?}
*/
get imageTooltip() {
if (this.tooltip) {
return this.tooltip;
}
if (this.item) {
this.buildNameItem(this.item);
}
return undefined;
}
/**
* @return {?}
*/
get certificateTooltip() {
if (this.certificates && this.certificates.length > 0) {
return this.certificates.map((/**
* @param {?} certificate
* @return {?}
*/
(certificate) => {
if (certificate.name) {
return `${certificate.name}`;
}
if (certificate.humanizedCode) {
return `${certificate.humanizedCode}`;
}
})).join('\n');
}
}
/**
* @return {?}
*/
click() {
this.onClick.emit(true);
}
}
ExOAvatarComponent.decorators = [
{ type: 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: 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%}"]
}] }
];
ExOAvatarComponent.propDecorators = {
maxSetShowed: [{ type: Input }],
imageSet: [{ type: Input }],
src: [{ type: Input }],
alt: [{ type: Input }],
customizedSize: [{ type: Input }],
size: [{ type: Input }],
shape: [{ type: Input }],
item: [{ type: Input }],
tooltip: [{ type: Input }],
tooltipPosition: [{ type: Input }],
certificates: [{ type: Input }],
onClick: [{ type: Output }]
};
if (false) {
/**
* Number that set the maximum of shown avatars
* @type {?}
*/
ExOAvatarComponent.prototype.maxSetShowed;
/**
* Custom array to load.
* You need to pass a tuple [{src, tooltip}] in array
* @type {?}
*/
ExOAvatarComponent.prototype.imageSet;
/**
* Custom src to load.
* If you send the user, will take from the user.profilePictures array with
* the size defined on the input size.
* @type {?}
*/
ExOAvatarComponent.prototype.src;
/**
* If you want add a custom alt to image. If you send the user, will take user.fullName by default.
* @type {?}
*/
ExOAvatarComponent.prototype.alt;
/**
* The component has defined 4 sizes by default (xs (24px), sm(48px), lg(96px), xl(144px)), but if you need
* other sizes you can send as { width: '40px', height: '40px'} and will overwrite the default sizes.
* @type {?}
*/
ExOAvatarComponent.prototype.customizedSize;
/**
* By default will use SizeAvatarEnum.sm
* (xs (24px), sm(48px), lg(96px), xl(144px))
* @type {?}
*/
ExOAvatarComponent.prototype.size;
/**
* Shape of the avatar. By default will be circle.
* @type {?}
*/
ExOAvatarComponent.prototype.shape;
/**
* Item can be a user or group, etc... If you send a item, you will get the info from alt, src, etc from the item.
* @type {?}
*/
ExOAvatarComponent.prototype.item;
/**
* Show tooltip in the image, if you send user will take the user.fullName by default.
* @type {?}
*/
ExOAvatarComponent.prototype.tooltip;
/**
* Position where the tooltip will show. By default is below.
* @type {?}
*/
ExOAvatarComponent.prototype.tooltipPosition;
/**
* Certificates only will work with the standards sizes, so this input can't combine with customizedSize.
* In the same way, only will work with the default shape (circle).
* @type {?}
*/
ExOAvatarComponent.prototype.certificates;
/**
* In other case, will emit an event and the parent will take the control (For example, to show a menu when click)
* @type {?}
*/
ExOAvatarComponent.prototype.onClick;
/** @type {?} */
ExOAvatarComponent.prototype.sizeAvatar;
/** @type {?} */
ExOAvatarComponent.prototype.valuesCertification;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar/avatar.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ExOAvatarModule {
}
ExOAvatarModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatTooltipModule,
MatIconModule,
MatProgressSpinnerModule,
],
declarations: [
ExOAvatarComponent,
],
exports: [
ExOAvatarComponent,
MatTooltipModule,
MatIconModule,
MatProgressSpinnerModule,
],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar/public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar-system/avatar-system.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const ExOAvatarSystemDirectionEnum = {
row: "row",
column: "column",
};
class ExoAvatarSystemComponent {
constructor() {
this.direction = ExOAvatarSystemDirectionEnum.row;
this.truncateName = false;
this.truncateDescription = false;
this.connected = false;
}
/**
* @return {?}
*/
get systemTruncate() {
return (this.truncateName || this.truncateDescription) ? 'text-truncate' : '';
}
}
ExoAvatarSystemComponent.decorators = [
{ type: 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: ChangeDetectionStrategy.OnPush,
styles: [""]
}] }
];
ExoAvatarSystemComponent.propDecorators = {
name: [{ type: Input }],
description: [{ type: Input }],
direction: [{ type: Input }],
avatar: [{ type: ContentChild, args: [ExOAvatarComponent,] }],
truncateName: [{ type: Input }],
truncateDescription: [{ type: Input }],
connected: [{ type: Input }]
};
if (false) {
/** @type {?} */
ExoAvatarSystemComponent.prototype.name;
/** @type {?} */
ExoAvatarSystemComponent.prototype.description;
/** @type {?} */
ExoAvatarSystemComponent.prototype.direction;
/** @type {?} */
ExoAvatarSystemComponent.prototype.avatar;
/** @type {?} */
ExoAvatarSystemComponent.prototype.truncateName;
/** @type {?} */
ExoAvatarSystemComponent.prototype.truncateDescription;
/** @type {?} */
ExoAvatarSystemComponent.prototype.connected;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar-system/avatar-system.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ExOAvatarSystemModule {
}
ExOAvatarSystemModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ExOAvatarModule,
],
declarations: [
ExoAvatarSystemComponent,
],
exports: [
ExoAvatarSystemComponent,
],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar-system/public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/avatar-system/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/alert/alert.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const TypeAlertEnum = {
info: "info",
success: "success",
warning: "warning",
danger: "danger",
};
class AlertComponent {
/**
* @param {?} sanitizer
*/
constructor(sanitizer) {
this.sanitizer = sanitizer;
/**
* Type of alert to show. By default is info type
*/
this.typeAlert = TypeAlertEnum.info;
/**
* Indicates if the alert can be closed.
*/
this.isCloseable = false;
/**
* Emit an event when the user click on a button with action
*/
this.sendAction = new EventEmitter();
this.showMessage = true;
this.typeAlertEnum = TypeAlertEnum;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.isCloseable && !this.closeButtonText) {
console.error('If the button is closable you need indicates the text for the button in small resolutions');
}
this.message = (/** @type {?} */ (this.sanitizer.bypassSecurityTrustHtml(this.message)));
}
/**
* Action to hide the alert
* @return {?}
*/
onClose() {
this.showMessage = false;
}
/**
* @return {?}
*/
onAction() {
this.sendAction.emit();
}
}
AlertComponent.decorators = [
{ type: 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: ChangeDetectionStrategy.OnPush,
styles: [""]
}] }
];
/** @nocollapse */
AlertComponent.ctorParameters = () => [
{ type: DomSanitizer }
];
AlertComponent.propDecorators = {
typeAlert: [{ type: Input }],
message: [{ type: Input }],
isCloseable: [{ type: Input }],
closeButtonText: [{ type: Input }],
actionButtonText: [{ type: Input }],
sendAction: [{ type: Output }]
};
if (false) {
/**
* Type of alert to show. By default is info type
* @type {?}
*/
AlertComponent.prototype.typeAlert;
/**
* Message to show inside of alert.
* @type {?}
*/
AlertComponent.prototype.message;
/**
* Indicates if the alert can be closed.
* @type {?}
*/
AlertComponent.prototype.isCloseable;
/**
* Text for the button Close
* @type {?}
*/
AlertComponent.prototype.closeButtonText;
/**
* Text for the button with action
* @type {?}
*/
AlertComponent.prototype.actionButtonText;
/**
* Emit an event when the user click on a button with action
* @type {?}
*/
AlertComponent.prototype.sendAction;
/** @type {?} */
AlertComponent.prototype.showMessage;
/** @type {?} */
AlertComponent.prototype.typeAlertEnum;
/**
* @type {?}
* @private
*/
AlertComponent.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/alert/alert.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ExoAlertModule {
}
ExoAlertModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MatIconModule,
ExoButtonModule,
],
declarations: [AlertComponent],
exports: [AlertComponent],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/alert/public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/alert/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: openexo-design-system.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ExOAvatarModule, ExOAvatarSystemModule, ExoAlertModule, ExoAvatarSystemComponent, ExoButtonModule, ExOAvatarComponent as ɵa, ExOAvatarModule as ɵb, ExoButtonModule as ɵc, AlertComponent as ɵd };
//# sourceMappingURL=openexo-design-system.js.map