core/common/operation-result.component.ts
c8y-operation-result
./operation-result.component.html
number
string
boolean
<style> .stroke-anim { animation: stroke-anim 0.75s ease-in-out 0s 1 forwards; } .check-anim { animation: check-anim 0.35s ease-in-out 0.5s 1 forwards; } .symbol-anim { animation: symbol-anim 0.35s ease-in-out 0.5s 1 forwards; } @keyframes stroke-anim { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } } @keyframes check-anim { 0% { stroke-dashoffset: 28; } 100% { stroke-dashoffset: 0; } } @keyframes symbol-anim { 0% { stroke-dashoffset: 7; } 100% { stroke-dashoffset: 0; } } .delay-05 { animation-delay: 0.5s; } </style> <div class="d-flex a-i-center p-24 m-24 p-b-0" [ngClass]="{ 'd-col j-c-center': vertical }"> <svg *ngIf="type === 'success'" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"> <polyline stroke="var(--input-validation-success, #008800)" stroke-width="2" stroke-linejoin="round" points="7.8678862 11.508 11.9656988 15.984 20.2137797 7.44836856" class="check-anim" stroke-dasharray="28" stroke-dashoffset="28" ></polyline> <path d="M18.3656773,3.02795925 C16.5689809,1.75089408 14.3721808,1 12,1 C5.92486775,1 1,5.92486775 1,12 C1,18.0751322 5.92486775,23 12,23 C18.0751322,23 23,18.0751322 23,12" id="Path" class="stroke-anim" stroke="var(--input-validation-success, #008800)" stroke-width="2" stroke-dasharray="60" stroke-dashoffset="60" ></path> </g> </svg> <svg *ngIf="type === 'error'" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }"> <g id="Artboard-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <line x1="12" y1="13.5356315" x2="12" y2="7" id="Path-2" stroke="var(--input-validation-error, #E0000E)" class="symbol-anim" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="7" stroke-dashoffset="7" ></line> <line x1="12" y1="17.7678157" x2="12" y2="17.2321843" id="Path-2" stroke="var(--input-validation-error, #E0000E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="7" stroke-dashoffset="7" class="symbol-anim" ></line> <circle id="Oval" stroke="var(--input-validation-error, #E0000E)" stroke-width="2" cx="12" cy="12" r="11" class="stroke-anim" stroke-dasharray="70" stroke-dashoffset="70" stroke-linejoin="round" ></circle> </g> </svg> <svg *ngIf="type === 'warning'" viewBox="0 0 24 24" [ngStyle]="{ 'max-width.px': size || 64 }"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <line x1="12" y1="13.5356315" x2="12" y2="7" id="Path-2" stroke="var(--input-validation-warning, #FF801F)" class="symbol-anim" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="7" stroke-dashoffset="7" ></line> <line x1="12" y1="17.7678157" x2="12" y2="17.2321843" id="Path-2" stroke="var(--input-validation-warning, #FF801F)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="7" stroke-dashoffset="7" class="symbol-anim" ></line> <g fill-rule="nonzero" stroke="var(--input-validation-warning, #FF801F)" stroke-width="2" class="stroke-anim" stroke-dashoffset="1000" stroke-dasharray="90" stroke-linecap="round" stroke-linejoin="round" stroke-linejoin="round" > <path d="M12,1 L23,21 L1,21 L12,1 Z" id="Path"></path> </g> </g> </svg> <p *ngIf="text" class="text-center text-medium animated fadeIn delay-05 m-8"> {{ text }} </p> </div>