Archive commit

src/ts/components/shared/character-select/character-select.pug

@@ -0,0 +1,36 @@
+.sr-only(#ariaAnnounce aria-live="assertive")
+
+.character-select.input-group
+	input.form-control.text-center(
+		#nameInput
+		type="text"
+		[(ngModel)]="pony.name"
+		[maxlength]="maxNameLength"
+		placeholder="Name of your character"
+		aria-label="Name of your character")
+	.input-group-append
+		button.btn.btn-default(*ngIf="newButton" (click)="createNew()" [disabled]="!canNew" aria-label="Create New character")
+			| new
+		button.btn.btn-default(*ngIf="editButton" (click)="edit()" [disabled]="!canEdit" aria-label="Edit character")
+			| edit
+
+		.dropdown(dropdown #dropdown="ag-dropdown" (isOpenChange)="onToggle($event)" [focusOnOpen]="false")
+			button.btn.btn-default.dropdown-toggle.br-0(
+				[ngClass]="removeButton ? 'btn-no-round' : 'btn-no-round-left'"
+				[disabled]="!hasPonies || joining" dropdownToggle aria-label="Select character")
+			character-list.dropdown-menu(
+				*dropdownMenu (close)="dropdown.close()" (selectCharacter)="select($event)" (newCharacter)="createNew()"
+				(previewCharacter)="preview.emit($event)" [canNew]="!newButton && canNew")
+
+		button.btn.btn-danger.remove-button(
+			*ngIf="removeButton && !removing" (click)="remove()" [disabled]="!canRemove"
+			tooltip="Delete pony" aria-label="Delete pony")
+			fa-icon([icon]="deleteIcon" [fixedWidth]="true")
+		button.btn.btn-danger.cancel-remove-button(
+			*ngIf="removing" (click)="cancelRemove()"
+			tooltip="Cancel delete" aria-label="Cancel delete")
+			fa-icon([icon]="removeIcon" [fixedWidth]="true")
+		button.btn.btn-success(
+			*ngIf="removing" (click)="confirmRemove()" [disabled]="!canRemove"
+			tooltip="Confirm delete" aria-label="Confirm delete")
+			fa-icon([icon]="confirmIcon" [fixedWidth]="true")