File

projects/congarevenuecloud/elements/src/lib/popover/popover.component.ts

Description

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.

Preview

Usage

Example :
import { PopoverModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [PopoverModule, ...]
})
export class AppModule {}
Example :

<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>

My Popover header
My Popover message.

Implements

OnChanges

Metadata

Index

Properties
Methods
Inputs

Constructor

constructor(cdr: ChangeDetectorRef, constraintRuleMessageService: ConstraintRuleMessageService)
Parameters :
Name Type Optional
cdr ChangeDetectorRef No
constraintRuleMessageService ConstraintRuleMessageService No

Inputs

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.

Methods

addActionProductToCart
addActionProductToCart(product: ProductOptionComponent, rule: AppliedRuleActionInfo, loadingKey: string)

Add a product to the cart based on an applied rule.

Parameters :
Name Type Optional Description
product ProductOptionComponent No

The product to add to the cart.

rule AppliedRuleActionInfo No

The rule that is applied to the product.

loadingKey string No

A params to use to track loading state.

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 :
Name Type Optional Description
product ProductOptionComponent No

The product to remove from the cart.

rule AppliedRuleActionInfo No

The rule that is applied to the product.

loadingKey string No

A params to use to track loading state.

Returns : void

Properties

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">&times;</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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""