nereo-material/bundles/nereo-material.umd.min.js

This project contains [Material Design](https://material.io/design/) components built with Angular and Angular Material. Its goal is to provide components that are not yet implemented in [Angular Material](https://material.angular.io/).

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("rxjs"),require("@angular/common"),require("@angular/material/icon"),require("@angular/material/button"),require("@angular/material/toolbar"),require("@angular/material/tooltip"),require("@angular/material/menu"),require("@angular/material/progress-spinner"),require("@angular/material/card"),require("@angular/material/list"),require("@angular/animations")):"function"==typeof define&&define.amd?define("nereo-material",["exports","@angular/core","rxjs","@angular/common","@angular/material/icon","@angular/material/button","@angular/material/toolbar","@angular/material/tooltip","@angular/material/menu","@angular/material/progress-spinner","@angular/material/card","@angular/material/list","@angular/animations"],n):n((t=t||self)["nereo-material"]={},t.ng.core,t.rxjs,t.ng.common,t.ng.material.icon,t.ng.material.button,t.ng.material.toolbar,t.ng.material.tooltip,t.ng.material.menu,t.ng.material.progressSpinner,t.ng.material.card,t.ng.material.list,t.ng.animations)}(this,(function(t,n,e,o,a,i,r,c,s,l,p,m,d){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var u;function g(t,n,e,o){var a,i=arguments.length,r=i<3?n:null===o?o=Object.getOwnPropertyDescriptor(n,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,n,e,o);else for(var c=t.length-1;c>=0;c--)(a=t[c])&&(r=(i<3?a(r):i>3?a(n,e,r):a(n,e))||r);return i>3&&r&&Object.defineProperty(n,e,r),r}function y(t,n){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,n)}(u=t.ContextualToolbarDisplayMode||(t.ContextualToolbarDisplayMode={})).icons="icons",u.text="text",u.all="all";var f=function(){function o(){this.displayMode=t.ContextualToolbarDisplayMode.icons,this.selectedAction=new n.EventEmitter,this.clearSelection=new n.EventEmitter,this.classesToApply={},this.progressMessage=new e.BehaviorSubject(null)}return o.prototype.ngOnInit=function(){this.setContextualization()},o.prototype.showButtonIcon=function(){return console.log("Display Mode",this.displayMode),this.displayMode!=t.ContextualToolbarDisplayMode.text},o.prototype.showButtonText=function(){return this.displayMode!=t.ContextualToolbarDisplayMode.icons},o.prototype.setContextualization=function(){this.classesToApply={"page-contextual-toolbar":"card"!=this.contextualizeTo,"card-contextual-toolbar":"card"==this.contextualizeTo}},o.prototype.setProgress=function(t){this.progressMessage.next(t)},o.prototype.stopProgress=function(){this.progressMessage.next(null)},o.prototype.actionSelected=function(t){this.selectedAction.emit(t)},o.prototype.clear=function(){this.clearSelection.emit()},g([n.Input(),y("design:type",Number)],o.prototype,"count",void 0),g([n.Input(),y("design:type",Array)],o.prototype,"actions",void 0),g([n.Input(),y("design:type",String)],o.prototype,"displayMode",void 0),g([n.Input(),y("design:type",Array)],o.prototype,"moreActions",void 0),g([n.Input(),y("design:type",String)],o.prototype,"contextualizeTo",void 0),g([n.Output(),y("design:type",Object)],o.prototype,"selectedAction",void 0),g([n.Output(),y("design:type",Object)],o.prototype,"clearSelection",void 0),o=g([n.Component({selector:"nm-contextual-toolbar",template:'<mat-toolbar *ngIf="count > 0" [ngClass]="classesToApply">\n  <ng-container *ngIf="progressMessage | async; then progressMode; else defaultMode">\n  </ng-container>\n  <ng-template #defaultMode>\n    <button mat-icon-button (click)="clear()">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <span i18n="@@contextualSelectedItems">{{count}} selected</span>\n\n    <span class="spacer"></span>\n    \n    <button mat-icon-button \n            *ngFor="let action of actions" \n            (click)="actionSelected(action)"\n            [class.textButton]="showButtonText()">\n      <mat-icon [matTooltip]="action.tooltip ? action.tooltip : action.name"\n                *ngIf="showButtonIcon()">{{action.icon}}</mat-icon>\n      <span *ngIf="showButtonText()">{{action.text}}</span>\n    </button>\n    \n    <button mat-icon-button *ngIf="moreActions" [matMenuTriggerFor]="menu">\n      <mat-icon matTooltip="more" i18n-matTooltip="@@moreActions">more_vert</mat-icon>\n    </button>\n    <mat-menu #menu="matMenu" yPosition="below">\n      <button mat-menu-item \n              *ngFor="let moreAction of moreActions" \n              (click)="actionSelected(moreAction.name)">{{moreAction.tooltip ? moreAction.tooltip: moreAction.name}}</button>\n    </mat-menu>\n  </ng-template>\n  <ng-template #progressMode>\n    <mat-spinner [diameter]=\'24\'></mat-spinner>\n    {{ progressMessage | async }}\n    <span class="spacer"></span>\n  </ng-template>\n</mat-toolbar>',styles:[":host mat-toolbar{background-color:var(--primary-lighter,#f5f5f5)!important;color:var(--primary,#000);left:0;top:0;width:100%;z-index:999}:host mat-toolbar>div{align-items:center;display:flex;width:100%}:host .page-contextual-toolbar{position:fixed}:host .textButton{margin-right:16px;text-transform:uppercase;width:auto}:host .textButton ::ng-deep .mat-button-wrapper{align-items:center;display:flex;gap:4px}:host mat-spinner{margin-left:8px;margin-right:8px}:host .card-contextual-toolbar{position:absolute}:host .spacer{flex:1 1 auto}"]}),y("design:paramtypes",[])],o)}(),b=function(){function t(){}return t=g([n.NgModule({imports:[o.CommonModule,r.MatToolbarModule,i.MatButtonModule,a.MatIconModule,c.MatTooltipModule,s.MatMenuModule,l.MatProgressSpinnerModule],declarations:[f],exports:[f]})],t)}(),h=function(){function t(){this.mainActionClick=new n.EventEmitter,this.secondaryActionClick=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.mainActionClicked=function(){this.mainActionClick.emit()},t.prototype.secondaryActionClicked=function(){this.secondaryActionClick.emit()},g([n.Input(),y("design:type",Boolean)],t.prototype,"show",void 0),g([n.Input(),y("design:type",String)],t.prototype,"icon",void 0),g([n.Input(),y("design:type",String)],t.prototype,"firstSentence",void 0),g([n.Input(),y("design:type",String)],t.prototype,"secondSentence",void 0),g([n.Input(),y("design:type",String)],t.prototype,"mainActionText",void 0),g([n.Input(),y("design:type",String)],t.prototype,"secondaryActionText",void 0),g([n.Output(),y("design:type",Object)],t.prototype,"mainActionClick",void 0),g([n.Output(),y("design:type",Object)],t.prototype,"secondaryActionClick",void 0),t=g([n.Component({selector:"nm-banner",template:'\n  <mat-card *ngIf="show">\n    <mat-card-content>\n        <mat-list>\n        <mat-list-item>\n            <mat-icon matListIcon color="primary" *ngIf="icon">{{icon}}</mat-icon>\n            <div id="banner-text-container">\n                <p matLine>{{firstSentence}}</p>\n                <p matLine *ngIf="secondSentence">{{secondSentence}}</p>\n            </div>\n        </mat-list-item>    \n        </mat-list>\n        <div id="banner-actions">\n            <button mat-button color="primary" (click)="secondaryActionClicked()" *ngIf="secondaryActionText">{{secondaryActionText}}</button>  \n            <button mat-button color="primary" (click)="mainActionClicked()">{{mainActionText}}</button>\n        </div>\n    </mat-card-content>\n    </mat-card>\n  ',styles:["\n    mat-card {\n        height: 52px;\n        padding: 0;\n    }\n    \n    mat-card-content{\n        align-items: center;\n        display: flex;\n        justify-content: space-between;\n        margin: 0 auto;\n        max-width: 90%;\n        flex-wrap: wrap;\n    }\n    \n    #banner-text-container {\n        margin-left: 24px;\n    }\n\n    #banner-text-container p{\n        font-size: 14px;\n        margin: 3px 0;\n    }\n\n    #banner-actions button{\n        text-transform: uppercase !important;\n    }\n         \n    mat-card-content,\n    mat-list,\n    mat-list-item {\n        height: 100% !important;\n        padding: 0;\n    }\n\n    .mat-list, .mat-list-item, .mat-list-text{\n        flex-direction: row !important;\n    }\n\n    @media(max-width:959px){\n        mat-card {\n            height: 112px;\n        }\n        \n        mat-card-content,\n        mat-list,\n        mat-list-item {\n            height: auto !important;\n            max-width: 100% !important;\n            width: 100% !important;\n        }    \n\n        mat-list-item {\n            margin: 12px 0 !important;\n        }\n\n        #banner-text-container {\n            margin-left: 16px !important;\n        }\n\n        #banner-actions {\n            justify-content: flex-end;\n            display: flex;\n            width: 100%;\n        } \n    }\n  "]}),y("design:paramtypes",[])],t)}(),x=function(){function t(){}return t=g([n.NgModule({imports:[o.CommonModule,p.MatCardModule,m.MatListModule,a.MatIconModule,i.MatButtonModule],declarations:[h],exports:[h]})],t)}(),v=function(){function t(){this.backLayerMinHeight=56,this.frontLayerMinHeight=42}return t.prototype.reveal=function(){var t=this.getBackLayer(),n=this.getFrontLayer(),e=this.getToolbar(),o=n.offsetTop,a=e.offsetHeight+t.offsetHeight;this.animateFrontLayerDown(n,o,a)},t.prototype.conceal=function(){var t=this.getFrontLayer(),n=t.offsetTop,e=this.backLayerMinHeight;this.animateFrontLayerUp(t,n,e)},t.prototype.getBackLayer=function(){return document.querySelector("nm-backdrop-back-layer-content")},t.prototype.getFrontLayer=function(){return document.querySelector("nm-backdrop-front-layer")},t.prototype.getToolbar=function(){return document.querySelector("mat-toolbar")},t.prototype.getWindowHeight=function(){return document.documentElement.clientHeight},t.prototype.animateFrontLayerDown=function(t,n,e){var o=n,a=this.getWindowHeight()-this.frontLayerMinHeight,i=setInterval((function(){o>=e||o>=a?(t.style.top=e>=a?a+"px":e+"px",clearInterval(i)):(o=e>n?o+10:o-10,t.style.top=o+"px")}),3)},t.prototype.animateFrontLayerUp=function(t,n,e){var o=n,a=setInterval((function(){o<=e?(t.style.top=e+"px",clearInterval(a)):(o=e>n?o+10:o-10,t.style.top=o+"px")}),3)},t=g([n.Component({selector:"nm-backdrop",template:'\n    <ng-content select="nm-backdrop-back-layer"></ng-content>\n    <ng-content select="nm-backdrop-front-layer"></ng-content>\n  ',styles:["\n    :host {\n        width: 100%;\n    }\n  "]}),y("design:paramtypes",[])],t)}(),M=function(){function t(){}return t=g([n.Component({selector:"nm-backdrop-back-layer",template:'\n    <ng-content select="nm-backdrop-back-layer-toolbar"></ng-content>\n    <ng-content select="nm-backdrop-back-layer-content"></ng-content>\n  ',styles:["\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 56px;      \n      width: 100%;\n    }\n  "]})],t)}(),k=function(){function t(){}return t=g([n.Component({selector:"nm-backdrop-back-layer-content",template:"\n    <ng-content></ng-content>\n  ",styles:["\n    :host{\n      overflow-y: auto;\n    }\n  "]})],t)}(),C=function(){function t(){}return t=g([n.Component({selector:"nm-backdrop-back-layer-toolbar",template:"<ng-content></ng-content>",styles:[""]})],t)}(),A=function(){function t(){}return t=g([n.Component({selector:"nm-backdrop-front-layer",template:'\n    <ng-content select="nm-backdrop-front-layer-subtitle"></ng-content>\n    <ng-content select="nm-backdrop-front-layer-content"></ng-content>    \n  ',styles:["\n    :host{\n        border-top-left-radius: 16px;\n        border-top-right-radius: 16px;\n        bottom: 0;\n        height: 100%;\n        overflow: hidden;        \n        position: fixed;\n        top: 56px;\n        width: 100%;\n    }\n  "]})],t)}(),I=function(){function t(){}return t=g([n.Component({selector:"nm-backdrop-front-layer-subtitle",template:'<ng-container>\n              <ng-content select="mat-icon" class="subtitle-icon"></ng-content>\n              <ng-content select="span"></ng-content>\n              <span class="spacer"></span>\n              <ng-content select="button"></ng-content>\n             </ng-container>',styles:["\n    :host{\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      margin: 12px 16px;      \n      width: auto;\n    }\n    \n    :host ::ng-deep mat-icon{\n      margin-right: 8px;\n    }\n\n    :host ::ng-deep span {\n      font-size: 1.2rem;\n    }\n\n    :host ::ng-deep .spacer {\n      flex: 1 1 auto;\n    }\n  "]})],t)}(),w=function(){function t(){}return t=g([n.Component({selector:"nm-backdrop-front-layer-content",template:"<ng-content></ng-content>",styles:["\n    :host{\n        display: flex;\n        height: 100%;\n        overflow-y: auto;\n        width: 100%;\n    }\n  "]})],t)}(),S=function(){function t(){}return t=g([n.NgModule({imports:[o.CommonModule],declarations:[v,M,k,C,A,I,w],exports:[v,M,k,C,A,I,w]})],t)}(),B=[d.trigger("fabButtonAnimation",[d.state("inactive",d.style({transform:"rotate(0deg)"})),d.state("active",d.style({transform:"rotate(180deg)"})),d.transition("* <=> *",d.animate("200ms cubic-bezier(0.4, 0.0, 0.2, 1)"))]),d.trigger("speedDialStagger",[d.transition("* => *",[d.query(":enter",d.style({opacity:0}),{optional:!0}),d.query(":enter",d.stagger("40ms",[d.animate("200ms cubic-bezier(0.4, 0.0, 0.2, 1)",d.keyframes([d.style({opacity:0,transform:"translateY(10px)"}),d.style({opacity:1,transform:"translateY(0)"})]))]),{optional:!0}),d.query(":leave",d.animate("200ms cubic-bezier(0.4, 0.0, 0.2, 1)",d.keyframes([d.style({opacity:1}),d.style({opacity:0})])),{optional:!0})])])],T=function(){function t(){this.selectedAction=new n.EventEmitter,this.showActions=!1,this.displayedIcon="",this.fabSpeedDialState="",this.isCorrectActionsNumber=!0}return t.prototype.ngOnInit=function(){this.displayedIcon=this.mainIcon,this.checkActions()},t.prototype.checkActions=function(){this.actions.length<3?(console.error("A speed dial should include at least three options."),this.isCorrectActionsNumber=!1):this.actions.length>6&&(console.error("A speed dial should include no more than six options."),this.isCorrectActionsNumber=!1)},t.prototype.toggleSpeedDial=function(){this.showActions=!this.showActions,this.showActions?(this.fabSpeedDialState="active",this.displayedIcon="close",document.getElementById("nm-fab-speed-dial-button-overlay").classList.add("nm-fab-speed-dial-overlay")):(this.fabSpeedDialState="inactive",this.displayedIcon=this.mainIcon,document.getElementById("nm-fab-speed-dial-button-overlay").classList.remove("nm-fab-speed-dial-overlay"))},t.prototype.actionSelected=function(t){this.selectedAction.emit(t),this.toggleSpeedDial()},g([n.Input(),y("design:type",String)],t.prototype,"mainIcon",void 0),g([n.Input(),y("design:type",Array)],t.prototype,"actions",void 0),g([n.Output(),y("design:type",Object)],t.prototype,"selectedAction",void 0),t=g([n.Component({selector:"nm-fab-speed-dial",template:'\n\t\t<div *ngIf="isCorrectActionsNumber">\n            <div id="nm-fab-speed-dial-button-overlay"></div>\n            <div class="nm-fab-speed-dial-button-component">\n                <div *ngIf="showActions" [@speedDialStagger]="actions.length" class="nm-fab-speed-dial-menu-actions">\n                    <div *ngFor="let action of actions" class="nm-fab-speed-dial-mini-button">\n                        <mat-card class="nm-fab-speed-dial-card-action" *ngIf="action.name">\n                            {{ action.name }}\n                        </mat-card>\n                        <button mat-mini-fab color="primary" (click)="actionSelected(action)"> \n                            <mat-icon>{{ action.icon }}</mat-icon>\n                        </button>\n                    </div>\n                </div>\n                <button mat-fab color="primary" (click)="toggleSpeedDial()">\n                    <mat-icon [@fabButtonAnimation]="{value: fabSpeedDialState}">{{ displayedIcon }}</mat-icon>\n                </button>\n            </div>\n        </div>\n\t\t',animations:B,styles:["\n    .nm-fab-speed-dial-button-component {\n        position: fixed;\n        bottom: 16px;\n        right: 16px;\n        text-align: right;\n    }\n    .nm-fab-speed-dial-mini-button {\n        display: flex;\n        align-items: flex-end;\n        margin-bottom: 16px;\n    }\n    .nm-fab-speed-dial-card-action {\n        margin-right: 16px;\n        padding: 12px;\n        text-align: center;\n        padding-right: 16px;\n        padding-left: 16px;\n    }\n    .nm-fab-speed-dial-menu-actions {\n        flex-direction: column-reverse;\n        display: flex;\n        align-items: flex-end;\n        margin-right: 8px;\n        position: relative;\n        bottom: 56px;\n    }\n    .nm-fab-speed-dial-overlay {\n        width: 100%;\n        height: 100%;\n        position: fixed;\n        left: 0;\n        top: 0;\n        z-index: 0;\n\t\tbackground: rgba(0, 0, 0, 0.32);\n    }\n  "]}),y("design:paramtypes",[])],t)}(),L=function(){function t(){}return t=g([n.NgModule({imports:[o.CommonModule,i.MatButtonModule,a.MatIconModule,p.MatCardModule],declarations:[T],exports:[T]})],t)}();t.BackdropBackLayerComponent=M,t.BackdropBackLayerContentComponent=k,t.BackdropBackLayerToolbarComponent=C,t.BackdropComponent=v,t.BackdropFrontLayerComponent=A,t.BackdropFrontLayerContentComponent=w,t.BackdropFrontLayerSubtitleComponent=I,t.BackdropModule=S,t.BannerComponent=h,t.BannerModule=x,t.ContextualToolbarComponent=f,t.ContextualToolbarModule=b,t.FabSpeedDialComponent=T,t.FabSpeedDialModule=L,t.ɵa=B,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=nereo-material.umd.min.js.map