projects/congarevenuecloud/elements/src/lib/popover/popover.component.ts
This component can be used to show popover on an element, to provide information based on the popoverContent passed. The popoverContent is the template reference to be shown inside the popover.
import { PopoverModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [PopoverModule, ...]
})
export class AppModule {}
<apt-popover [popoverContent]="popoverTemplate" [title]="'My Popover'" [placement]="'right'" [adaptivePosition]="true" [container]="'body'" [containerClass]="Popover" [delay]="10" [triggers]="mouseenter:mouseleave focus:blur" [outsideClick]="true"
<ng-template #popoverTemplate>
OnChanges
encapsulation | ViewEncapsulation.None |
selector | apt-popover |
styleUrls | ./popover.component.scss |
templateUrl | ./popover.component.html |
Properties |
Methods |
Inputs |
constructor(cdr: ChangeDetectorRef, constraintRuleMessageService: ConstraintRuleMessageService)
|
|||||||||
Parameters :
|
adaptivePosition |
Type : boolean
|
Default value : true
|
Flag enables popover to auto adjust its positioning based on available screen space. |
constraintRules |
Type : Array<AppliedRuleActionInfo>
|
To close the popover, Defualted to false |
container |
Type : string
|
Default value : 'body'
|
selector specifying the element the popover should be appended to. |
containerClass |
Type : string
|
Default value : 'Popover'
|
Styling class to be applied to the popover container. |
delay |
Type : number
|
Default value : 0
|
Delay in milliseconds before the popover is shown. |
isClose |
Type : boolean
|
Default value : false
|
To close the popover, Defualted to false |
outsideClick |
Type : boolean
|
Default value : true
|
Closes the popover if there is a mouse click outside. Defaulted to true. |
placement |
Type : string
|
Default value : 'auto'
|
Placement decides where the popover is positioned. Default position is set to auto. Possible values are auto, top, bottom, left, right. |
popoverContent |
Type : string | TemplateRef<any>
|
Content to be displayed inside popover. Content can be string or a template reference passed. |
title |
Type : string
|
Default value : ''
|
Title to be shown on the popover |
triggers |
Type : string
|
Default value : 'click'
|
Specifies the events that should trigger the popover. Supports a space separated list of events, with click event as the default. |
addActionProductToCart | ||||||||||||||||
addActionProductToCart(product: ProductOptionComponent, rule: AppliedRuleActionInfo, loadingKey: string)
|
||||||||||||||||
Add a product to the cart based on an applied rule.
Parameters :
Returns :
void
|
closePopover |
closePopover()
|
Close the popover.
Returns :
void
|
removeActionProductFromCart | ||||||||||||||||
removeActionProductFromCart(product: ProductOptionComponent, rule: AppliedRuleActionInfo, loadingKey: string)
|
||||||||||||||||
Remove a product from the cart based on an applied rule.
Parameters :
Returns :
void
|
constraintRulePopoverTemplate |
Type : TemplateRef<any>
|
Decorators :
@ViewChild('constraintRulePopoverTemplate')
|
ViewChild property that references a TemplateRef instance, which defines the contents of a popover |
loading |
Type : object
|
Default value : {}
|
An object that stores a boolean value for each loading process in the component, used to manage asynchronous tasks |
popoverDirective |
Type : PopoverDirective
|
Decorators :
@ViewChild('pop')
|
ViewChild property that references a PopoverDirective instance, used to control a popover element |
<div class="h-100" #pop="bs-popover"
[popover]="constraintRules && constraintRules.length > 0 ? constraintRulePopoverTemplate : popoverContent"
[outsideClick]="outsideClick" [placement]="placement" [container]="container" [containerClass]="containerClass"
[triggers]="triggers" [adaptivePosition]="adaptivePosition" [popoverTitle]="title">
<ng-content></ng-content>
</div>
<ng-template #constraintRulePopoverTemplate>
<div class="p-2">
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<h5>{{'CONSTRAINT_POPOVER.PRODUCTS_INCLUDED_EXCLUDED_HEADING' |
translate}}</h5>
<button type="button" class="close closeButton" aria-label="Close" (click)="closePopover()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="popoverBody">
<carousel [interval]="0" [isAnimated]="true" [showIndicators]="true" class="mt-3">
<slide *ngFor="let rule of constraintRules">
<div *ngIf="rule?.Message">
<p class="mb-2">
{{rule?.Message}}
</p>
</div>
<div class="border-top action-product" *ngIf="rule?.ActionProducts.length > 0">
<div *ngFor="let item of rule?.ActionProducts; let i = index" class="d-flex mt-2">
<ng-container>
<div class="d-flex justify-content-between flex-grow-1">
<div class="d-flex flex-grow-1 option-details pr-3 w-75">
<div>
<p class="mt-0 mb-1">
{{item.ComponentProduct.Name}}
</p>
</div>
</div>
</div>
<div class="border-left d-flex align-items-center justify-content-end">
<div class="pl-3">
<label>{{'COMMON.PRICE' | translate}}</label>
<apt-price [record]="item" [type]="'list'"></apt-price>
</div>
<div class="pl-3"> <label for="item.Product.Id" class="mr-2 mb-0">{{'COMMON.QTY2' |
translate}}</label> <input type="number" class="form-control form-control-sm text-center w-75"
id="item.Product.Id" placeholder="1" name="quantity" [(ngModel)]="item.Quantity" />
</div>
<div class="input-group-append"> <button class="btn btn-outline-primary"
*ngIf="rule?.ConstraintRuleAction?.ActionType === 'Inclusion'"
(click)="addActionProductToCart(item, rule, item.ComponentProduct.Name + i)"
[ladda]="loading[item.ComponentProduct.Name + i]"
[attr.data-style]="'zoom-in'">{{'COMMON.ADD' | translate}}</button>
<button class="btn btn-outline-danger"
*ngIf="rule?.ConstraintRuleAction?.ActionType === 'Exclusion'"
(click)="removeActionProductFromCart(item, rule, item.ComponentProduct.Name + i)"
[ladda]="loading[item.ComponentProduct.Name + i]"
[attr.data-style]="'zoom-in'">{{'COMMON.REMOVE' | translate}}</button>
</div>
</div>
</ng-container>
</div>
</div>
</slide>
</carousel>
</div>
</div>
</ng-template>
./popover.component.scss
:host {
display: block;
}
/**
* This CSS code styles the indicators of a carousel. The indicators are arranged in a column and positioned to the right of the carousel.
*/
.carousel-indicators {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
height: 100%;
margin-right: 10px;
position: absolute;
right: -15px;
left: unset;
width: 5%;
li {
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #858282;
opacity: 0.5;
transition: opacity 0.6s ease;
&.active {
background-color: #007bff;
opacity: 1;
}
}
}
/**
*This CSS code hides the "previous" and "next" controls of a carousel.
*/
.carousel-control-prev,
.carousel-control-next {
display: none;
}
/** This CSS code styles a popover element to have a maximum width of 500 pixels. */
.popover-md {
max-width: 500px;
width: 500px;
}
/* This CSS code styles the body of a popover element */
.popoverBody {
position: relative;
}
/* This CSS code styles the action product container */
.action-product {
max-width: 95%;
}
/* This CSS code to remove outline border on slider */
.carousel:focus {
outline: none;
}