@duoduo-oba/ng-devui/toast/ng-devui-toast.metadata.json

DevUI components based on Angular

{"__symbolic":"module","version":4,"metadata":{"Message":{"__symbolic":"interface"},"ToastComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"d-toast","template":"<div #container [ngClass]=\"'devui-toast'\" [style.zIndex]=\"zIndex\" [ngStyle]=\"style\" [class]=\"styleClass\">\r\n  <div\r\n    #msgel\r\n    *ngFor=\"let msg of value; let i = index\"\r\n    class=\"devui-toast-item-container\"\r\n    aria-live=\"polite\"\r\n    [ngClass]=\"{\r\n      'devui-toast-message-info': msg.severity == 'info',\r\n      'devui-toast-message-warn': msg.severity == 'warn',\r\n      'devui-toast-message-error': msg.severity == 'error',\r\n      'devui-toast-message-success': msg.severity == 'success'\r\n    }\"\r\n  >\r\n    <div class=\"devui-toast-item\" [ngSwitch]=\"msg.severity\" (mouseenter)=\"interrupt(i)\" (mouseleave)=\"removeReset()\">\r\n      <div class=\"devui-toast-icon-close\" (click)=\"removeThrottle(i, msgel)\">\r\n        <svg\r\n          width=\"16px\"\r\n          height=\"16px\"\r\n          viewBox=\"0 0 14 14\"\r\n          version=\"1.1\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        >\r\n          <defs>\r\n            <polygon\r\n              id=\"path-1\"\r\n              points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\r\n            ></polygon>\r\n          </defs>\r\n          <g id=\"error\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n            <mask id=\"mask-2\" fill=\"white\">\r\n              <use xlink:href=\"#path-1\"></use>\r\n            </mask>\r\n            <use id=\"Mask\" class=\"devui-toast-close-icon\" xlink:href=\"#path-1\"></use>\r\n          </g>\r\n        </svg>\r\n      </div>\r\n      <span\r\n        class=\"devui-toast-image\"\r\n        [ngClass]=\"{\r\n          'devui-toast-image-info': msg.severity === 'info',\r\n          'devui-toast-image-warning': msg.severity === 'warn',\r\n          'devui-toast-image-error': msg.severity === 'error',\r\n          'devui-toast-image-success': msg.severity === 'success'\r\n        }\"\r\n      >\r\n        <ng-container *ngSwitchCase=\"'info'\">\r\n          <svg\r\n            width=\"16px\"\r\n            height=\"16px\"\r\n            viewBox=\"0 0 16 16\"\r\n            version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          >\r\n            <g id=\"info\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n              <path class=\"devui-toast-image-info-path\" d=\"M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z\" id=\"info\"></path>\r\n            </g>\r\n          </svg>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'warn'\">\r\n          <svg\r\n            width=\"16px\"\r\n            height=\"16px\"\r\n            viewBox=\"0 0 16 16\"\r\n            version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          >\r\n            <g id=\"warning\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n              <path\r\n                class=\"devui-toast-image-warning-path\"\r\n                d=\"M7,3 L9,3 L9,10 L7,10 L7,3 Z M7,11 L9,11 L9,13 L7,13 L7,11 Z\"\r\n                id=\"warn\"\r\n              ></path>\r\n            </g>\r\n          </svg>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'error'\">\r\n          <svg\r\n            width=\"16px\"\r\n            height=\"16px\"\r\n            viewBox=\"0 0 16 16\"\r\n            version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          >\r\n            <defs>\r\n              <polygon\r\n                id=\"path-e\"\r\n                points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\r\n              ></polygon>\r\n            </defs>\r\n            <g id=\"error\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n              <mask id=\"mask-2\" fill=\"white\">\r\n                <use xlink:href=\"#path-e\"></use>\r\n              </mask>\r\n              <use id=\"Mask\" class=\"devui-toast-image-error-path\" xlink:href=\"#path-e\"></use>\r\n            </g>\r\n          </svg>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'success'\">\r\n          <svg\r\n            width=\"16px\"\r\n            height=\"16px\"\r\n            viewBox=\"0 0 16 16\"\r\n            version=\"1.1\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          >\r\n            <defs>\r\n              <polygon\r\n                id=\"path-s\"\r\n                points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\r\n              ></polygon>\r\n            </defs>\r\n            <g id=\"correct\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n              <mask id=\"mask-2\" fill=\"white\">\r\n                <use xlink:href=\"#path-s\"></use>\r\n              </mask>\r\n              <use id=\"Mask\" class=\"devui-toast-image-success-path\" xlink:href=\"#path-s\"></use>\r\n            </g>\r\n          </svg>\r\n        </ng-container>\r\n      </span>\r\n      <div class=\"devui-toast-message\">\r\n        <span class=\"devui-toast-title\">{{ msg.summary }}</span>\r\n        <p *ngIf=\"msg.detail\" [innerHTML]=\"msg.detail | safe: 'html'\"></p>\r\n      </div>\r\n      <div style=\"clear: both;\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n","styles":[":host::ng-deep a:link,:host::ng-deep a:visited{color:#5e7ce0}:host::ng-deep a:active,:host::ng-deep a:hover{color:#344899}.devui-toast{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word}.devui-toast-item-container{position:relative;margin:0 0 10px;opacity:.95;box-shadow:0 12px 24px rgba(41,48,64,.2);border-radius:.25em;color:#dfe1e6}.devui-toast-item{position:relative;display:block;padding:8px 1em}.devui-toast-item p{padding:0;margin:0}.devui-toast-icon-close{position:absolute;top:7px;right:10px;cursor:pointer}.devui-toast-icon-close .devui-toast-close-icon{fill:#fff}.devui-toast-title{font-size:14px;padding:0 0 .5em;display:block;font-weight:700}.devui-toast-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:10px;top:10px;padding:0}.devui-toast-image.devui-toast-image-warning{background-color:#fac20a}.devui-toast-image.devui-toast-image-info{background-color:#5e7ce0}.devui-toast-image.devui-toast-image-error{background-color:#f66f6a}.devui-toast-image.devui-toast-image-success{background-color:#50d4ab}.devui-toast-image .devui-toast-image-error-path,.devui-toast-image .devui-toast-image-info-path,.devui-toast-image .devui-toast-image-success-path,.devui-toast-image .devui-toast-image-warning-path{fill:#fff}.devui-toast-message{padding:0 0 .25em;margin-left:20px}.devui-toast-message p{font-size:12px}.devui-toast .devui-toast-message-error,.devui-toast .devui-toast-message-info,.devui-toast .devui-toast-message-success,.devui-toast .devui-toast-message-warn{background-color:#464d6e}"]}]}],"members":{"sticky":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"life":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"closeEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"containerViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":25,"character":3},"arguments":["container",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":25},{"__symbolic":"reference","name":"ToastService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"handleValueChange":[{"__symbolic":"method"}],"interrupt":[{"__symbolic":"method"}],"resetDelay":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"removeAll":[{"__symbolic":"method"}],"removeThrottle":[{"__symbolic":"method"}],"removeReset":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ToastModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","module":"ng-devui/utils","name":"SafePipeModule","line":10,"character":4}],"exports":[{"__symbolic":"reference","name":"ToastComponent"}],"declarations":[{"__symbolic":"reference","name":"ToastComponent"}],"providers":[{"__symbolic":"reference","name":"ToastService"}]}]}],"members":{}},"ToastService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1}}],"members":{"fadeIn":[{"__symbolic":"method"}],"fadeOut":[{"__symbolic":"method"}]},"statics":{"zIndex":1060}}},"origins":{"Message":"./toast.component","ToastComponent":"./toast.component","ToastModule":"./toast.module","ToastService":"./toast.service"},"importAs":"ng-devui/toast"}