@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1 lines • 14.5 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"PopoverModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"ng-devui/position","name":"PositioningModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"PopoverComponent"},{"__symbolic":"reference","name":"PopoverDirective"}],"declarations":[{"__symbolic":"reference","name":"PopoverComponent"},{"__symbolic":"reference","name":"PopoverDirective"}],"entryComponents":[{"__symbolic":"reference","name":"PopoverComponent"}]}]}],"members":{}},"PopoverComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"d-popover","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":14,"character":4},"arguments":["state",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":15,"character":6},"arguments":["void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":15,"character":20},"arguments":[{"opacity":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":16,"character":6},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":16,"character":23},"arguments":[{"opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":17,"character":6},"arguments":["* => visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":19,"character":8},"arguments":["150ms cubic-bezier(0.0, 0.0, 0.2, 1)"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":21,"character":6},"arguments":["visible => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":21,"character":33},"arguments":["150ms cubic-bezier(0.4, 0.0, 1, 1)"]}]}]]}],"template":"<div class=\"arrow\"></div>\r\n<div class=\"devui-popover-content\">\r\n <span class=\"devui-popover-icon\" *ngIf=\"popType && popType !== 'default'\">\r\n <svg\r\n *ngIf=\"popType === 'success'\"\r\n class=\"devui-icon devui-icon-success\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\r\n <path d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\" fill-rule=\"nonzero\"></path>\r\n <polygon\r\n stroke-width=\"0.4\"\r\n fill-rule=\"nonzero\"\r\n points=\"8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"popType === 'warning'\"\r\n class=\"devui-icon devui-icon-warning\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n points=\"7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313\"\r\n ></polygon>\r\n <path\r\n d=\"M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"popType === 'info'\"\r\n class=\"devui-icon devui-icon-info\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\r\n <g stroke-width=\"1\">\r\n <path\r\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf=\"popType === 'error'\"\r\n class=\"devui-icon devui-icon-error\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\r\n <path\r\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <div class=\"devui-popover-main-content\" [ngClass]=\"{ 'with-icon': popType && popType !== 'default' }\" [innerHTML]=\"content\"></div>\r\n</div>\r\n","styles":[":host.devui-popover{font-size:12px;position:absolute;top:0;left:0;line-height:20px;border:none;border-radius:2px;z-index:1060;background-color:#464d6e;color:#dfe1e6;overflow-wrap:break-word}:host.devui-popover>.arrow{border-width:8px}:host.devui-popover>.arrow,:host.devui-popover>.arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}:host.devui-popover>.arrow::after{content:''}:host.devui-popover.top>.arrow{left:50%;margin-left:-7px;border-bottom-width:0;border-top-color:#464d6e;bottom:-8px}:host.devui-popover.right>.arrow{top:50%;left:-8px;margin-top:-8px;border-left-width:0;border-right-color:#464d6e}:host.devui-popover.bottom>.arrow{left:50%;margin-left:-7px;border-top-width:0;border-bottom-color:#464d6e;top:-8px}:host.devui-popover.left>.arrow{top:50%;right:-8px;margin-top:-8px;border-right-width:0;border-left-color:#464d6e}:host.devui-popover.top{margin-top:-10px;box-shadow:-5px 5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.bottom{margin-top:10px;box-shadow:5px -5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.left{margin-left:-10px;box-shadow:5px -5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.right{margin-left:10px;box-shadow:-5px 5px 20px 0 rgba(41,48,64,.2)}.devui-popover-icon{display:block;position:absolute;left:12px;top:8px}.devui-popover-icon svg.devui-icon{width:16px;height:16px}.devui-popover-main-content.with-icon{text-indent:20px}.devui-icon.devui-icon-success>g>path{fill:#50d4ab}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon,.devui-icon.devui-icon-warning>g>polygon{fill:#fff}.devui-icon.devui-icon-warning>g>path{fill:#fac20a}.devui-icon.devui-icon-info>g>g{fill:#5e7ce0}.devui-icon.devui-icon-info>g>circle{fill:#fff}.devui-icon.devui-icon-error>g>path{fill:#f66f6a}.devui-icon.devui-icon-error>g>circle{fill:#fff}.devui-popover-content{padding:5px 14px}"]}]}],"members":{"triggerElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"showAnimate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"scrollElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"zIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"popType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":37,"character":3},"arguments":["style.display"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":38,"character":3},"arguments":["class"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":41,"character":3},"arguments":["@state"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":49,"character":22},{"__symbolic":"reference","module":"ng-devui/position","name":"PositionService","line":50,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":51,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"onHidden":[{"__symbolic":"method"}],"onAnimationEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":99,"character":3},"arguments":["@state.done",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}]}},"PopoverDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[dPopover]","exportAs":"dPopover"}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"controlled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"showAnimate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"scrollElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"zIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"popType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"hoverToContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":78,"character":41},{"__symbolic":"reference","module":"ng-devui/overlay-container","name":"OverlayContainerRef","line":79,"character":43},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":80,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":81,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":82,"character":48}]}],"createPopover":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}]}}},"origins":{"PopoverModule":"./popover.module","PopoverComponent":"./popover.component","PopoverDirective":"./popover.directive"},"importAs":"ng-devui/popover"}