projects/progress-button-showcase/src/app/app.component.html
<div class="ydd-main-container">
<div class="ydd-main-content">
<div class="ydd-page-content">
<div class="ydd-page-preview">
<div class="item">
<ng-scrollbar visibility="hover">
<div class="ydd-page-preview-item-description">
<markdown [src]="'https://raw.githubusercontent.com/udede/ydd-progress-button/master/README.md'"></markdown>
</div>
</ng-scrollbar>
<div class="ydd-page-preview-item-content">
<div class="open-settings-icon" (click)="isSidebarSettingsOpen=true"></div>
<ydd-progress-button (action)="run($event)" [progress]="progressData" [design]="designData">
Submit
</ydd-progress-button>
</div>
</div>
<div class="settings" [ngClass]="{'open':(isSidebarSettingsOpen)}">
<div class="close-settings-icon" (click)="isSidebarSettingsOpen=false"></div>
<div class="settings-header">
<a href="https://www.npmjs.com/package/progress-button" target="_blank" class="repo-link">
<img [src]="'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAABACAYAAACgGR3JAAABAUlEQVR4nO3dQQqDQBAAwTHk/19O7vGigsKmq17gLM2eBnebmc+sbTvw9avPOKE5b/X649lgR/CkCJ4UwZMieFIET4rgSRE8KYInRfCkCJ4UwZPyfmDYI0tPv1Zcgjo756qLXmfmvDLjrefohidF8KQInhTBkyJ4UgRPiuBJETwpgidF8KQInhTBkyJ4UgRPiuBJETwpgidF8KQInhTBkyJ4UgRPiuBJETwpT/yIqcILegtww5MieFIET4rgSRE8KYInRfCkCJ4UwZMieFIET4rgSbnywt6Knljsqpzl0tzwpAieFMGTInhSBE+K4EkRPCmCJ0XwpAieFMGTIng6ZuYLDFMJgUMNpzgAAAAASUVORK5CYII='" alt="Npm Logo"/>
</a>
<a href="https://github.com/udede/ydd-progress-button" target="_blank" class="repo-link">
<img [src]="'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABACAYAAACunKHjAAAFg0lEQVR4nNWba4hVVRTHfx4lnRTLBtMmLMoeZE+HRi2i0qKsPlSCRfS0Mix6qH00DKIHhF96QEWGQfSiYqAR+lImNZHVKFZOZSghlkXaaNPDpsSJPbOuHs9ee9997jn33HN/8P+yz95rr73uuft9RlAMxwMzgNOBk4EpwGTgSGCMeDAA7AF+AbYDW4Be4HPgh4L8rAuXAM8C3wODGbUVeA64DCjqx8vEscATwM4cGu9SH7ACOK6MATCv/jsOx+upLuAky5sGMAp4oQEBSOrlWF9TOHOBfsWpRulv4Jqig7CyRAFI6jXL2zowOadRoN7aJv1WXTgH+KsJglDRf8B5eQfCTIb2KZU1g2ZbramRdmC/0uBumTd0ALcALwG7lXz1Up/Ueav4cAzwoaOuC7IGYYqncXOt3MNcL1NkrUweMtPt+Vatw8x22N8LnGLlTsFGxajR5gATjynlsuphqxabrx11GJ8Ps3ILo6yUg7wCnG2lDtNjpdgsA9YA78uT/eLkeuA74Ffgd1lsIU6OBybKbHG61N8iZS+Sv2M1PgPOUPKYN+INYJ71xMONSkTjetxd1ML8hZbKSjMtY6QPuDBFuYcUf+O6yyrhYAKwSzEQ13K9aClYovgb159AW9LRSPH8UaDVSj2U8VZKeWip4snYkDf6LCWCmjqtkuUhdBHonWy9rhTQ9JOvB24wXyj+aupyuRn6NlQU3OkUSLvip0+zKq7F+4g7Uvr7rZXSeDbK8BnKwmQ+M0z97IlcUoWv+1Nghukdis+azDzmqLjpeUoml54ucRAqXOfwXdPN8YKhPe0fwCSr2nKyTvFf06tx7zcrGTStaJIgGG5T/NdkFogjTYFpykOXXGuPMjJB+gBXW+LqiGTnKQTTI3/ZRIEw2wcfW6k60yN5I0JIMyyVhfWBfkwzgZhqJev0qqnlJmTfxDA1kl2oELY1YSB2WCk6bZFs0Yewu8AG5EV/oJ3WKMWSep+VUn5CfR4bpTgzLOtq08doz7M4oyMZS0M4ulGtycDEwKKDkZxehZBpO7xBhPq8N5KDkhA6mjAQM6wUnf5I7iyFYLbTjyiwEVkZneK4b1eUYn5g1vnXWqnl5eoUU4PtkRzzh3J/EwXiASvFzVAMrlRWYz7d5zRXHu70+K9p6CzVnCIPKA99ai9xEE4D/vX4runAeutT5aFPPwYcAjWCcXIn0+d7Ul8R28X+IKXT5l7EBnmbykKr+HRiSn8OaftMJVIh+ge4yjJdPJfKfmotbZiT9LZHyRSqd1NMZ/PEbMe9ncHvbzRfFisZB+WiuLlO+Lzca9DyVLSqnrfZYrSJP5oPabTMsiwHHXsUI8monR+w6/0JcC9wqlVL7ZiefRGwVqmvFg1IX6ey3GGwW7no0aXk0/Qb8GbAcb2LFz33uLLoSUd9Q7TISbdWwU7lgsUmJZ+mdVZN4XQq9rKqL3nUp7HQU0nyDtMsJY8mb/Sr8KBiL6sW+6s8yEeeihYl8l6u5ElqqVVDOLcr9rIo5CLcAc70VLTFyj28e7VKrv1qZW6ySoRT7WJbWs1M64DvL5J8KyocLvsWCyTPDTmMHHkGYollPZCnFGOVziZ0rZ+VvAKxMqsjqxWjg3IOWsTOdh6BWGNZrYHIM/3eKsveMgeiN8/PnEZUGUk65XbsSKvk8NxknJUaTpZA9KQ420hFtS/5+uXUfLWoW9LvsSzVPxDvWZZy5hGl0mpyjTL1CkRhN3sulq/qNCc03W1ZCCdNIMw85opaKtHuYoewVnaE3grMP2il5E+XrB/q/pdwca5skWm/UEULHGVDmK/Yi2tTPT5iy8Icx5U+czR/Qga7k+TTgqTdDZ7PqUqBmVI/I5s8Zk/TnDhlxTTYBMPsS5qdqdB7X2EA/wO4WSD7SJrI9AAAAABJRU5ErkJggg=='" alt="Github Logo"/>
</a>
<code (click)="copyClipboard('npm i progress-button')" [ngClass]="{'copied':clipboardCopied}">npm i progress-button</code>
</div>
<ng-scrollbar visibility="hover">
<div class="settings-content">
<form [formGroup]="settingsForm" novalidate>
<h2>Settings</h2>
<h3>Data</h3>
<div class="ydd-page-preview-settings-field">
<label>Animation</label>
<div class="field">
<ng-select class="ydd-select" formControlName="animation" [clearable]="false">
<ng-option value="fill">Fill</ng-option>
<ng-option value="shrink">Shrink</ng-option>
<ng-option value="rotate-angle-bottom">Rotate Angle Bottom</ng-option>
<ng-option value="rotate-angle-top">Rotate Angle Top</ng-option>
<ng-option value="rotate-angle-left">Rotate Angle Left</ng-option>
<ng-option value="rotate-angle-right">Rotate Angle Right</ng-option>
<ng-option value="rotate-side-down">Rotate Side Down</ng-option>
<ng-option value="rotate-side-up">Rotate Side Up</ng-option>
<ng-option value="rotate-side-left">Rotate Side Left</ng-option>
<ng-option value="rotate-side-right">Rotate Side Right</ng-option>
<ng-option value="rotate-back">Rotate Back</ng-option>
<ng-option value="flip-open">Flip Open</ng-option>
<ng-option value="slide-down">Slide Down</ng-option>
<ng-option value="move-up">Move Up</ng-option>
<ng-option value="top-line">Top Line</ng-option>
<ng-option value="lateral-lines">Lateral Lines</ng-option>
</ng-select>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Direction</label>
<div class="field" [ngClass]="[(progressData.animation === 'lateral-lines')?'disabled':'']">
<ng-select class="ydd-select" formControlName="direction" [clearable]="false">
<ng-option value="horizontal">Horizontal</ng-option>
<ng-option value="vertical">Vertical</ng-option>
</ng-select>
<small *ngIf="(progressData.animation === 'lateral-lines')">
This property is always vertical when Lateral Lines animation is selected
</small>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Status</label>
<div class="field">
<ng-select class="ydd-select" formControlName="status" [clearable]="false">
<ng-option value="success">Success</ng-option>
<ng-option value="error">Error</ng-option>
</ng-select>
</div>
</div>
<h3>Design</h3>
<div class="ydd-page-preview-settings-field">
<label>Background</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="background" name="background" type="text"/>
<span [ngStyle]="{background:settingsForm.value.background}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Text Color</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="color" name="color" type="text"/>
<span [ngStyle]="{background:settingsForm.value.color}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Success Background</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="successBackground" name="successBackground" type="text"/>
<span [ngStyle]="{background:settingsForm.value.successBackground}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Error Background</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="errorBackground" name="errorBackground" type="text"/>
<span [ngStyle]="{background:settingsForm.value.errorBackground}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Success Icon</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="successIconColor" name="successIconColor" type="text"/>
<span [ngStyle]="{background:settingsForm.value.successIconColor}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Error Icon</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="errorIconColor" name="errorIconColor" type="text"/>
<span [ngStyle]="{background:settingsForm.value.errorIconColor}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Progress Background</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="progressBackground" name="progressBackground" type="text"/>
<span [ngStyle]="{background:settingsForm.value.progressBackground}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Progress Inner Background</label>
<div class="field ydd-color-preview">
<input class="ydd-input-text" formControlName="progressInnerBackground" name="progressInnerBackground" type="text"/>
<span [ngStyle]="{background:settingsForm.value.progressInnerBackground}"></span>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Line Sizes</label>
<div class="field" [ngClass]="[(!isLinesSize())?'disabled':'']">
<ng-select class="ydd-select" formControlName="linesSize" [clearable]="false">
<ng-option value="5">5px</ng-option>
<ng-option value="10">10px</ng-option>
<ng-option value="20">20px</ng-option>
</ng-select>
<small *ngIf="!isLinesSize()">
This property is disabled with the current animation
</small>
</div>
</div>
<div class="ydd-page-preview-settings-field">
<label>Border Radius</label>
<div class="field" [ngClass]="[(isRotateAnimation())?'disabled':'']">
<ng-select class="ydd-select" formControlName="radius" [clearable]="false">
<ng-option value="0">None</ng-option>
<ng-option value="10">10px</ng-option>
<ng-option value="20">20px</ng-option>
<ng-option value="50">50px</ng-option>
</ng-select>
<small *ngIf="isRotateAnimation()">This property is disabled with the current animation</small>
</div>
</div>
</form>
</div>
</ng-scrollbar>
</div>
</div>
</div>
</div>
</div>