@cause-911/material/bundles/cause-911-material.umd.min.js

Run `npm install @cause-911/material --save` to add this library to your project

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/material"),require("@angular/common"),require("@angular/platform-browser"),require("@angular/platform-browser/animations"),require("@angular/forms"),require("@fortawesome/angular-fontawesome"),require("@cause-911/core"),require("@angular/animations"),require("@angular/router")):"function"==typeof define&&define.amd?define("@cause-911/material",["exports","@angular/core","@angular/material","@angular/common","@angular/platform-browser","@angular/platform-browser/animations","@angular/forms","@fortawesome/angular-fontawesome","@cause-911/core","@angular/animations","@angular/router"],t):t(((e=e||self)["cause-911"]=e["cause-911"]||{},e["cause-911"].material={}),e.ng.core,e.ng.material,e.ng.common,e.ng.platformBrowser,e.ng.platformBrowser.animations,e.ng.forms,e.angularFontawesome,e.core$1,e.ng.animations,e.ng.router)}(this,function(e,t,n,i,o,a,s,r,l,u,d){"use strict";var c=function(){this.buttons=[]},p=function(){function e(e,t){this.dialogRef=e,this.data=t}return e.prototype.ngOnInit=function(){},e.prototype.onClick=function(e){this.dialogRef.close(e)},e.decorators=[{type:t.Component,args:[{selector:"cause-simple-dialog",template:'<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]="data.message"></div>\n</div>\n<div mat-dialog-actions *ngIf="data.buttons">\n  <button *ngFor="let label of data.buttons; let i = index" mat-raised-button (click)="onClick(i)">{{label}}</button>\n</div>',styles:["div[mat-dialog-actions]{margin-top:20px;text-align:center}"]}]}],e.ctorParameters=function(){return[{type:n.MatDialogRef},{type:c,decorators:[{type:t.Inject,args:[n.MAT_DIALOG_DATA]}]}]},e}(),m=function(){function e(e){var t=this;this.menuItems=[],this.version="",this.keepMenuExpanded=!1,this.hostElement=e.nativeElement,this.hostElement.addEventListener("mouseover",function(e){return t.onMouseOver(e)}),this.hostElement.addEventListener("mouseout",function(e){return t.onMouseOut(e)}),this.setDisplayMenu()}return e.prototype.ngOnInit=function(){},e.prototype.onResize=function(e){this.setDisplayMenu()},e.prototype.onMenuItemClick=function(){window.innerWidth<1e3&&this.hideOnMobile()},e.prototype.hideOnMobile=function(){this.hostElement.classList.remove("mobile"),this.hostElement.classList.add("hidden")},e.prototype.showOnMobile=function(){this.hostElement.classList.remove("hidden"),this.hostElement.classList.add("mobile")},e.prototype.onToggleCollapse=function(){this.keepMenuExpanded?(this.onCollpseMenu(),this.hostElement.classList.remove("keepExpanded")):(this.onExpandedMenu(),this.hostElement.classList.add("keepExpanded")),this.keepMenuExpanded=!this.keepMenuExpanded,localStorage.setItem("cause-menu-status",this.keepMenuExpanded?"expanded":"collapsed")},e.prototype.setDisplayMenu=function(){this.hostElement.className="",window.innerWidth<1e3?this.hostElement.classList.add("hidden"):("expanded"===localStorage.getItem("cause-menu-status")&&(this.keepMenuExpanded=!0,this.hostElement.classList.add("keepExpanded")),this.hostElement.classList.add(this.keepMenuExpanded?"expanded":"collapsed"))},e.prototype.onMouseOver=function(e){this.keepMenuExpanded||this.onExpandedMenu(),e.stopPropagation()},e.prototype.onMouseOut=function(e){this.keepMenuExpanded||this.onCollpseMenu(),e.stopPropagation()},e.prototype.onExpandedMenu=function(){window.innerWidth>=1e3&&(this.hostElement.classList.remove("collapsed"),this.hostElement.classList.add("expanded"))},e.prototype.onCollpseMenu=function(){window.innerWidth>=1e3&&(this.hostElement.classList.remove("expanded"),this.hostElement.classList.add("collapsed"))},e.decorators=[{type:t.Component,args:[{selector:"cause-menu-sidebar",template:'<div>\n    <button mat-icon-button class="close" (click)="hideOnMobile()">\n        <mat-icon>clear</mat-icon>\n    </button>\n    <ng-content select="[header]"></ng-content>\n</div>\n<div>\n    <ng-content select="[beforeMenu]"></ng-content>\n    <cause-menu-vertical #menu [menuItems]="menuItems" (itemClick)="onMenuItemClick()"></cause-menu-vertical>\n    <ng-content select="[afterMenu]"></ng-content>\n</div>\n<div *ngIf="version" class="version">\n    <div class="double-arrow" (click)="onToggleCollapse()"></div>\n    <span class="full">{{\'material.version\' | translate}} {{version}}</span>\n    <span class="abbr">{{version}}</span>\n</div>\n',styles:[':host{height:100%;flex-direction:column;display:flex;transition:.1s ease-out;overflow:hidden;scrollbar-width:5px;scrollbar-color:rgba(0,0,0,.1) rgba(0,0,0,.2)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{border-radius:5px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(0,0,0,.2);outline:#708090 solid 1px}:host>div{flex:1}:host>div:first-child{flex:0 0 auto}:host>div:nth-child(2){flex-grow:1;overflow:hidden auto}:host>div:last-child{max-height:1em}:host.hidden{width:0;min-width:0;max-width:0}:host.mobile{width:275px;min-width:275px;max-width:275px;position:absolute;z-index:10}:host.collapsed{width:75px;min-width:75px;max-width:75px}:host.expanded{width:275px;min-width:275px;max-width:275px}:host .close{display:none}:host.mobile .close{right:0;display:inline-block;position:absolute}.double-arrow{height:2.9em;line-height:2.9em;cursor:pointer;position:absolute;opacity:.25;margin-top:-1em}.double-arrow:hover{opacity:1}:host.collapsed .double-arrow:before,:host.expanded .double-arrow:before{font-family:"Material Icons";content:"double_arrow";font-size:2.9em;text-align:right}:host.collapsed .double-arrow{margin-left:10px}:host.expanded .double-arrow{margin-left:200px}:host.collapsed ::ng-deep .menu-caption,:host.collapsed ::ng-deep .submenu{display:none}:host.keepExpanded .double-arrow{transform:rotate(180deg);opacity:1}.version{bottom:0;padding:1em}.abbr,.full{display:none}:host.collapsed .abbr{display:inline}:host.expanded .full,:host.mobile .full{display:inline}@media only screen and (max-width:1000px){.double-arrow{display:none}}']}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={menuItems:[{type:t.Input}],version:[{type:t.Input}],onResize:[{type:t.HostListener,args:["window:resize",["$event"]]}]},e}(),h=function(e,t,n){void 0===n&&(n=""),this.label=e,this.path=t,this.icon=n,this.childs=[]},g=function(){function e(){}return e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),f=function(){function e(){}return e.prototype.ngOnInit=function(){},e.decorators=[{type:t.Component,args:[{selector:"cause-material",template:"<div>{{'core.noGenericComponentOnThisLibrary' | translate}}</div>"}]}],e.ctorParameters=function(){return[]},e}(),b=function(){function e(e,n){this.translateService=e,this.dialog=n,this.readend=new t.EventEmitter,this.accept="",this.multiple=!1,this.icon="",this.text="",this.labels={}}return e.prototype.ngOnInit=function(){var e=this;this.icon||this.text||this.translateService.get(["material.select","material.dialogTitle","material.dialogMessage"]).subscribe(function(t){e.labels=t,e.text=t["material.select"]})},e.prototype.onSelectFile=function(e){for(var t=this,n=function(n,i){var o=e.target.files[n],a=new FileReader;a.onerror=function(e){return t.onError(e)},a.onload=function(e){return t.onReadEnd(o,e)},a.readAsDataURL(o)},i=0,o=e.target.files.length;i<o;i++)n(i);e.target.files.length&&this.dialog.open(p,{width:"250px",disableClose:!0,data:{title:this.labels["material.dialogTitle"],message:this.labels["material.dialogMessage"]}})},e.prototype.openDialog=function(e){this.file&&this.file.nativeElement.click(),e.stopPropagation()},e.prototype.onError=function(e){throw e},e.prototype.onReadEnd=function(e,t){this.dialog.closeAll(),this.readend.emit({name:e.name,size:e.size,type:e.type,lastModifiedDate:e.lastModifiedDate,content:t.target.result,file:e})},e.decorators=[{type:t.Component,args:[{selector:"cause-input-file",template:'<button mat-raised-button (click)="openDialog($event)">\n    <mat-icon *ngIf="icon">{{icon}}</mat-icon>\n    <span *ngIf="text">{{text}}</span>\n</button>\n<ng-container *ngIf="multiple; else notMultipleInput">\n  <input #file type="file" (change)="onSelectFile($event)" [accept]="accept" multiple="multiple" />\n</ng-container>\n\n<ng-template #notMultipleInput>\n  <input #file type="file" (change)="onSelectFile($event)" [accept]="accept" />\n</ng-template>',styles:[":host input{display:none}"]}]}],e.ctorParameters=function(){return[{type:l.TranslateService},{type:n.MatDialog}]},e.propDecorators={file:[{type:t.ViewChild,args:["file",{static:!1}]}],readend:[{type:t.Output}],accept:[{type:t.Input}],multiple:[{type:t.Input}],icon:[{type:t.Input}],text:[{type:t.Input}]},e}(),v=function(){function e(e,t){this.translate=t,this.value=[],this.forms=[],this.labels=[],this.selectedIndex=0,this.config=e.getConfig()}return e.prototype.ngOnInit=function(){var e=this;this.translate.get(this.config.languages).subscribe(function(t){for(var n in t)t[n]&&e.labels.push(t[n]);e.initializeForms()})},e.prototype.onTagChanged=function(e){console.log("cause-material",e),console.log("cause-material",this.value),console.log("cause-material",this.forms)},e.prototype.getErrorMessage=function(e){return this.forms[e].hasError("required")?"error.required":""},e.prototype.initializeForms=function(){var e=this;this.labels.forEach(function(t,n){e.forms[n]=new s.FormControl("",[s.Validators.required]),e.forms[n].setValue(e.value[n]||"")})},e.decorators=[{type:t.Component,args:[{selector:"cause-input-multiple-langue",template:'<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="onTagChanged($event)">\n  <mat-tab *ngFor="let lang of labels; let i = index" [label]="lang">\n    <mat-form-field hideRequiredMarker="never">\n      <input matInput [placeholder]="lang" [formControl]="forms[i]" required="required">\n      <mat-error *ngIf="forms[i].invalid">{{getErrorMessage(i) | translate}}</mat-error>\n    </mat-form-field>\n  </mat-tab>\n</mat-tab-group>',styles:[".mat-form-field{width:100%}"]}]}],e.ctorParameters=function(){return[{type:l.CoreService},{type:l.TranslateService}]},e.propDecorators={value:[{type:t.Input}]},e}(),y=function(){function e(){this.height="150px",this.autoPlay=!0,this.timer=null,this.items=[],this.states=[],this.selectedIndex=0}return Object.defineProperty(e.prototype,"images",{get:function(){return this.items},set:function(e){this.items=e,this.restart()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.container.nativeElement.style.height=this.height,this.container.nativeElement.style.width="100%"},e.prototype.getState=function(e){return this.states[e]?this.states[e]:this.selectedIndex===e?"in":"out"},e.prototype.restart=function(){var e=this;this.timer&&window.clearInterval(this.timer),this.images&&this.images.length&&(this.timer=window.setInterval(function(){return e.changed("next")},5e3))},e.prototype.next=function(){this.selectedIndex<this.items.length-1?this.selectedIndex++:this.selectedIndex=0},e.prototype.changed=function(e){this.states[this.selectedIndex]="out",this[e](),this.states[this.selectedIndex]="in"},e.decorators=[{type:t.Component,args:[{selector:"cause-slideshow",template:'<div #container class="slideshow">\n  <div *ngFor="let url of images; let index = index;" [@slideLeftRight]="getState(index)">\n    <img [src]="url" />\n  </div>\n</div>',animations:[u.trigger("slideUpDown",[u.state("in",u.style({transform:"translateY(0%)"})),u.state("out",u.style({transform:"translateY(-100%)"})),u.transition("in => out",[u.animate("500ms ease-in")]),u.transition("out => in",[u.style({transform:"translateY(100%)"}),u.animate("500ms ease-in")])]),u.trigger("slideLeftRight",[u.state("in",u.style({transform:"translateX(0%)"})),u.state("out",u.style({transform:"translateX(-100%)"})),u.transition("in => out",[u.animate("500ms ease-in")]),u.transition("out => in",[u.style({transform:"translateX(100%)"}),u.animate("500ms ease-in")])])],styles:[".slideshow{margin:0 auto;position:relative;overflow:hidden}.slideshow>div{width:100%;height:100%;position:absolute}img{max-height:100%;max-width:100%;margin:0 auto;display:block}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={container:[{type:t.ViewChild,args:["container",{static:!0}]}],height:[{type:t.Input}],autoPlay:[{type:t.Input}],images:[{type:t.Input}]},e}(),x=function(){function e(e){var n=this;this.router=e,this.itemClick=new t.EventEmitter,this.menuItems=[],this.router.events.subscribe(function(e){e instanceof d.NavigationEnd&&n.selectActiveRoute(e)})}return e.prototype.ngOnInit=function(){},e.prototype.goTo=function(e,t){this.router.navigate([e]),this.itemClick.emit(),t.stopPropagation()},e.prototype.selectActiveRoute=function(e){this.menuItems.forEach(function(t){e.url&&(t.activated=e.url===t.path||t.childs.length&&e.url.indexOf(t.path)>-1),t.childs.forEach(function(t){e.url&&(t.activated=e.url===t.path||e.urlAfterRedirects===t.path)})})},e.decorators=[{type:t.Component,args:[{selector:"cause-menu-vertical",template:'<h4 *ngFor="let menu of menuItems" [class]="menu.activated ? \'selected\' : \'\'">\n    <div (click)="goTo(menu.path, $event)" class="menu">\n        <div *ngIf="menu.icon" class="menu-icon">\n            <fa-icon *ngIf="menu.icon.filter !== undefined" [icon]="menu.icon"></fa-icon>\n            <img *ngIf="menu.icon.filter === undefined" [src]="menu.icon" />\n        </div>\n        <div *ngIf="menu.label" class="menu-caption">\n            <span>{{menu.label | translate}}</span>\n        </div>\n    </div>\n    <div *ngIf="menu.childs.length && menu.activated" class="submenu">\n        <div\n            *ngFor="let submenu of menu.childs"\n            [class]="submenu.activated ? \'menu selected\' : \'menu\'"\n            (click)="goTo(submenu.path, $event)">\n            <div *ngIf="!submenu.icon" class="menu-dot">&bull;</div>\n            <div *ngIf="submenu.icon" class="menu-icon">\n                <fa-icon *ngIf="submenu.icon.filter !== undefined" [icon]="submenu.icon"></fa-icon>\n                <img *ngIf="submenu.icon.filter === undefined" [src]="submenu.icon" />\n            </div>\n            <div *ngIf="submenu.label" class="menu-caption">\n                <span>{{submenu.label | translate}}</span>\n            </div>\n        </div>\n    </div>\n</h4>\n',styles:['.menu,.submenu{cursor:pointer}h4{margin:0;padding:0}h4 .menu{padding:1em 0;display:flex;flex-direction:row}h4 .menu>div{flex:1 1 auto;-ms-grid-row-align:center;align-self:center}.menu-dot{max-width:1.1em;text-align:center;margin-right:.5em;font-size:2em}.menu-icon{max-width:60px;text-align:center;margin-right:.5em}.submenu{margin-left:1em}.submenu .menu{padding:0;font-size:.9em;line-height:2.2em}.submenu .menu::before{content:"";margin-left:1.1em;width:.1em;height:2.5em;position:relative;background:#fff;margin-right:-1.17em}']}]}],e.ctorParameters=function(){return[{type:d.Router}]},e.propDecorators={itemClick:[{type:t.Output}],menuItems:[{type:t.Input}]},e}(),w=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[f,b,v,m,x,p,y],entryComponents:[p],exports:[f,b,v,m,p,y],imports:[o.BrowserModule,a.BrowserAnimationsModule,i.CommonModule,s.FormsModule,s.ReactiveFormsModule,n.MatButtonModule,n.MatFormFieldModule,n.MatIconModule,n.MatInputModule,n.MatTabsModule,r.FontAwesomeModule,l.CauseCoreModule]}]}],e}();e.CauseMaterialModule=w,e.MaterialComponent=f,e.MaterialService=g,e.MenuItem=h,e.MenuSidebarComponent=m,e.SimpleDialogComponent=p,e.ɵa=c,e.ɵb=b,e.ɵc=v,e.ɵd=x,e.ɵe=y,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=cause-911-material.umd.min.js.map