File
projects/congarevenuecloud/elements/src/lib/button/asset-dropdown-button/asset-dropdown-button.component.ts
Description
This component is a work in progress.
The asset dropdown button is used to create a split dropdown button with all of the enabled ABO actions on the storefront record. By default the first action in the list of enabled actions is set as the primary action on the button, however, users can set the desired primary action with the 'primaryAction' input. An onClick event is emitted when a user clicks on the main button or one in the dropdown.
Preview
Usage
Example :import { ButtonModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [ButtonModule, ...]
})
export class AppModule {}```typescript
<apt-asset-dropdown-button
[buttonType]="'btn-outline-primary'"
[setDisabled]="isDisabled"
[setTooltipText]="'Asset selection disabled.'"
(onClick)="handleAssetDropdownClick($event)"
></apt-asset-dropdown-button>
Implements
OnInit
Metadata
| selector | apt-asset-dropdown-button |
| styleUrls | ./asset-dropdown-button.component.scss |
| templateUrl | ./asset-dropdown-button.component.html |
Index
Inputs |
Outputs |
Constructor
constructor(userService: UserService, storefrontService: StorefrontService, translateService: TranslateService)
|
||||||||||||
|
Parameters :
|
Inputs
| buttonType |
Type : string
|
Default value : 'btn-primary'
|
|
Bootstrap class name for the button type. |
| configurationType |
Type : string
|
|
value of asset configuration type |
| hasAttributes |
Type : boolean
|
|
Does this product has attributes |
| operation |
Type : string
|
|
Value of the operation type. |
| priceType |
Type : string
|
|
value of asset price type |
| primaryAction |
Type : string
|
|
Override for what the primary action of this button is. This will set what is on the face of the button. |
| setDisabled |
Type : boolean
|
Default value : false
|
|
Flag to check if this button should be set to disabled. |
| setTooltipText |
Type : string
|
|
The text to show on the tooltip when this button is disabled. |
Outputs
| onClick |
Type : EventEmitter<any>
|
|
Event emitter for when an action is clicked. |
<ng-container *ngIf="view$ | async as view">
<div
*ngIf="!view.isLoggedIn || setDisabled"
[tooltip]="setTooltipText ? setTooltipText : view.buttonTooltip"
container="body"
>
<button
*ngIf = "view.enabledActions.length > 0"
class="btn btn-block btn-link px-4 btn-sm"
[ngClass]="buttonType"
disabled="true"
>
{{ ('BUTTON.' + view.enabledActions[0]) | translate }}
</button>
</div>
<div
*ngIf="view.isLoggedIn && !setDisabled"
class="btn-group btn-block"
>
<button *ngIf="view.enabledActions.length >= 1"
class="btn btn-block px-4 btn-sm w-100 mr-1"
[ngClass]="buttonType"
(click)="onClick.emit(view.enabledActions[0])"
>
{{ ('BUTTON.' + view.enabledActions[0]) | translate }}
</button>
<button
*ngIf="view.enabledActions.length > 1"
class="btn btn-sm px-2 dropdown-toggle-split"
[ngClass]="buttonType"
data-toggle="dropdown"
data-reference="parent"
aria-haspopup="true"
aria-expanded="false"
>
<small class="downArrow"><i class="fa fa-caret-down"></i></small>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button
*ngFor="let action of view.enabledActions | slice:1"
class="dropdown-item"
[class.text-danger]="action === 'Terminate'"
(click)="onClick.emit(action)"
>
{{ ('BUTTON.' + action) | translate }}
</button>
</div>
</div>
</ng-container>
./asset-dropdown-button.component.scss