@sapphire-ion/framework 1.2.41 → 1.2.43

package/src/lib/components/default/default-pagination/default-pagination.component.html

@@ -0,0 +1,52 @@
+<div id="pagination" class="flex items-center rounded-b-2xl p-2 portrait:flex-col">
+  <div class="w-full h-full items-center justify-start flex portrait:justify-center">
+    <ion-spinner [hidden]="!(loading && lstPages.length == 0)"></ion-spinner>
+    <ion-text [hidden]="loading && lstPages.length == 0">
+      <div class="flex">
+        Mostrando &nbsp;
+        <ion-skeleton-text *ngIf="loading" [animated]="true" style="width: 2ch"></ion-skeleton-text>
+        <b *ngIf="!loading">{{limit * page - limit + length}}</b>  &nbsp;
+        de 
+        @if (total != null) {
+          <b>&nbsp; {{total}} &nbsp;</b> itens
+        }
+        @else{
+          <b>&nbsp; - &nbsp; </b> itens
+        }
+      </div>
+    </ion-text>
+  </div>
+  <div class="w-full h-full items-center justify-end flex portrait:justify-center" *ngIf="total != null">
+    <button class="flex items-center" [disabled]="loading" (click)="PageSub()">
+      <ion-icon [ngClass]="{'opacity-20': page == 1}" name="chevron-back" class="cursor-pointer default transition"></ion-icon>
+    </button>
+
+    <ion-spinner *ngIf="loading && lstPages.length == 0"></ion-spinner>
+
+    <button [disabled]="loading" class="page" *ngFor="let item of lstPages" [ngClass]="{ 'selected' : page == item }" (click)="SetPage(item)"> {{item}} </button>
+
+    <button class="flex items-center" [disabled]="loading" (click)="PageAdd()">
+      <ion-icon [ngClass]="{'opacity-20': page == TotalPages }" name="chevron-forward" class="cursor-pointer default transition"></ion-icon>
+    </button>
+
+    @if (TotalPages > 5) {
+      <button [disabled]="loading" class="page" [id]="pop_id"><ion-icon name="search"></ion-icon></button>
+      <ion-popover [trigger]="pop_id" triggerAction="click">
+        <ng-template>
+          <ion-content>
+            <div class="grid grid-cols-10 pl-3">
+              <div class="col-span-8 pb-2">
+                <ion-input class="number-class" [(ngModel)]="_page" type="Number" labelPlacement="stacked" label="Página [Max. {{TotalPages}}]"></ion-input>
+              </div>
+              <div class="col-span-2">
+                <ion-button [disabled]="loading" class="size-full" size="small" (click)="SetPageManual()" style="--border-radius: 0rem">
+                  <ion-icon class="w-4 aspect-square" slot="icon-only" name="checkmark-circle"></ion-icon>
+                </ion-button>
+              </div>
+            </div>
+          </ion-content>
+        </ng-template>
+      </ion-popover>
+    }
+    </div>
+</div>

package/src/lib/components/default/default-pagination/default-pagination.component.ts

@@ -0,0 +1,118 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { GenericService } from '../../../services/generic.service';
+import { Utils } from '../../../services/utils.service';
+
+/** Componente de paginação padrão  */
+@Component({
+  selector: 'default-pagination',
+  templateUrl: './default-pagination.component.html',
+  styleUrls: ['./default-pagination.component.scss'],
+})
+export class DefaultPaginationComponent  implements OnInit {
+
+
+  total: number = 0;
+  limit: number | null = 0;
+  /** Valor total de dados */
+  @Input('total') set _total(value: number){  
+    this.total = value;
+    this.TotalPages = this.GetTotalPages();
+    this.lstPages = this.GetlstPages();
+  };
+  /** Limite de páginas */
+  @Input('limit') set _limit(value: number | null){ 
+    this.limit = value;
+    this.TotalPages = this.GetTotalPages();
+    this.lstPages = this.GetlstPages();
+  };
+
+  /** Quantidade de dados em tela */
+  @Input() length: number;
+  @Input() loading: boolean;
+  
+  /** Pagina atual (usando two way data binding) */
+  @Input() page: number;
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+  
+  /** Evento emitido na mudança de valores (Pagina) */
+  @Output('change') changeEmitter: EventEmitter<void> = new EventEmitter<void>();
+  
+  constructor(
+    private genericService: GenericService
+  ) { }
+
+  ngOnInit() {}
+  pop_id: string = "popover-id-" + Utils.GenerateGUID();
+
+  GetlstPages(): number[] {
+    if(!this.TotalPages){ return []; }
+    var startIndex: number;
+    var start: number[] = [];
+
+    startIndex = this.page - 1;
+
+    var _: number[] = [];
+    for(let i = this.TotalPages - 4; i <= this.TotalPages ; i++){
+      if(i > 0){
+        _.push(i);
+      }
+    }
+
+    for(let i = startIndex; i <= this.TotalPages && i < startIndex + 5; i++){
+      if(i > 0){
+        start.push(i);
+      }
+    }
+    if(startIndex == 0 && this.TotalPages >= 5){
+      start.push(5);
+    }
+
+    if(start[0] > _[0]){
+      return _;
+    }
+
+    return start;
+  }
+
+  GetTotalPages(): number{
+    return this.limit ? Math.ceil(this.total / this.limit) : Math.ceil(this.total / this.total)
+  }
+
+  lstPages  : number[] = [];
+  TotalPages: number = 0;
+
+  PageAdd(): void{
+    if(this.page + 1 > this.TotalPages){ return; }
+    this.SetPage(this.page + 1);
+  }
+  
+  PageSub(): void{
+    if(this.page - 1 < 1){ return; }
+    this.SetPage(this.page - 1);
+  }
+
+  SetPage(value: number): void{
+    if(value != this.page){
+      this.pageChange.emit(value);
+      this.EmitChange()
+
+      setTimeout(() => {
+        this.TotalPages = this.GetTotalPages();
+        this.lstPages = this.GetlstPages();
+      }, 100);
+    }
+  }
+
+  _page: number;
+  SetPageManual(){
+    if(this._page && this._page > 0 && this._page <= this.TotalPages){
+      this.SetPage(this._page);
+    }else{
+      this.genericService.PresentToast("Página inválida")
+    }
+  }
+
+  EmitChange(): void{
+    this.changeEmitter.emit();
+  }
+}

package/src/lib/components/default/default-table/default-table.component.html

@@ -0,0 +1,104 @@
+<div class="size-full rounded-xl flex flex-col overflow-hidden relative">
+    <loading [type]="3" [loading]="loading()"></loading>
+    <content-block text="Sem Dados" [value]="!(items.length != 0 || loading)"></content-block>
+
+     <div class="size-full shrink relative overflow-y-auto">
+        <table>
+            <thead>
+                <tr>
+                    @if(acoesTemplate){
+                        <th scope="col" class="p-2"> 
+                            Ações 
+                        </th>
+                    }
+
+                    @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {
+                        <th scope="col" class="p-2"> 
+                            <div class="flex gap-2 items-center justify-start th">
+                                @if(!noFilters()){
+                                    <th-filter class="!text-base" style="text-transform: none !important" 
+                                    *ngIf="((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())"
+                                        [field]="tfa.tf"
+                                        (change)="ChangeFilter()"
+                                    ></th-filter>
+                                }
+
+                                {{tfa.tf.header}} 
+
+                                @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){
+                                    <a [ngClass]="{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }"
+                                        class="order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition" 
+                                        (click)="SwitchOrder(tfa.tf)"
+                                    >
+                                        <ion-icon 
+                                            [class.text-primary]="tfa.ascending"
+                                            class="absolute left-0 top-0" 
+                                            name="arrow-up"
+                                        ></ion-icon> 
+                                        <ion-icon 
+                                            [class.text-primary]="tfa.descending"
+                                            class="absolute right-0 bottom-0" 
+                                            name="arrow-down"
+                                        ></ion-icon> 
+                                    </a>
+                                }
+                            </div>
+                        </th>
+                    }
+                </tr>
+            </thead>
+            <tbody>
+                @for (row of lstRows; track row.id || $index) {
+                    <tr [hidden]="loading()">
+                        @if(acoesTemplate){
+                            <td (click)="Redirect(undefined, row.item)" class="whitespace-nowrap py-1 px-3 {{row.acoesClass}}" [style]="row.acoesStyle" >
+                                <ng-container *ngTemplateOutlet="acoesTemplate; context: { $implicit: row.item }"></ng-container>
+                            </td>
+                        }
+
+                        @for (col of row.lstColumns; track col.tf.index) {
+                            <td class="{{col.class}} p-2 cursor-pointer" (click)="Redirect(col.tf, row.item)" [style]="'white-space: var(--ion-table-row-wrap);' + col.style">
+                                @if(col.tf.index == 'ativo') {
+                                    <div class="size-full flex items-center justify-start" [routerLink]="null">
+                                        <ion-toggle [checked]="col.value" [disabled]="loading()" (ionChange)="Ativar(row.id)" ></ion-toggle>
+                                    </div>
+                                }
+                                @else if (col.tf.type == InputType.Bool){
+                                    <div class="h-full flex items-center justify-start">
+                                        @if(col.tf.configuration.type == 'toggle') {
+                                            <ion-toggle [checked]="col.value" [disabled]="true"></ion-toggle>
+                                        }
+                                        @else {
+                                            <ion-checkbox [checked]="col.value" [disabled]="true"></ion-checkbox>
+                                        }
+                                    </div>
+                                }
+                                @else if (col.tf.type == InputType.File) {
+                                    <download-button [(ngModel)]="col.value" [configuration]="col.tf.configuration"></download-button>
+                                }
+                                @else if (col.loading){
+                                    <ion-spinner name="dots"></ion-spinner>
+                                } @else {
+                                    <span [ngClass]="col.class">{{ col.label }}</span>
+                                }
+                            </td>
+                        }
+                    </tr>
+                    <ng-content select="[slot=item-end]"></ng-content>
+                }
+            </tbody>
+        </table>
+     </div>
+     @if(!noPagination()){
+        <div class="shrink-0 z-[100]">
+            <default-pagination
+                [page]="page()"
+                (pageChange)="page.set($event); refresh.emit()"
+                [total]="total()"
+                [limit]="limit()"
+                [length]="items().length"
+                [loading]="loading()"
+            ></default-pagination>
+        </div>
+    }
+</div>

package/src/lib/components/default/default-table/default-table.component.ts

@@ -0,0 +1,255 @@
+import { formatNumber } from '@angular/common';
+import { Component, computed, effect, Input, input, InputSignal, model, ModelSignal, OnInit, output, OutputEmitterRef, OutputRef, Signal, TemplateRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { InputDecimalConfiguration } from '../../inputs/input-decimal/input-decimal.configuration';
+import { InputSelectConfiguration } from '../../inputs/input-select/input.select.configuration';
+import { FormatTelefoneCelular } from '../../inputs/input-telefone/input-telefone.component';
+import { StorageService } from '../../../services/web/storage.service';
+import { FormatCpfCnpj } from '../../inputs/input-cpf-cnpj/input-cpf-cnpj.component';
+import { HttpService } from '../../../services/web/http.service'
+import { TableField } from '../../../classes/inputs/table-field';
+import { Comparison, CompileLstTableField } from '../../../classes/comparison/comparison';
+import { FormatCep } from '../../inputs/input-cep/input-cep.component';
+import { InputType } from '../../inputs/input-type';
+import { Utils } from '../../../services/utils.service';
+
+type CSSStyleStringGenerator = (index: string, object: any) => string;
+
+@Component({
+  selector: 'default-table',
+  templateUrl: './default-table.component.html',
+  styleUrls: ['./default-table.component.scss'],
+})
+export class DefaultTableComponent<Service extends HttpService, T = any> implements OnInit {
+
+  @Input() acoesTemplate: TemplateRef<any>;
+  /** Template de ações, deve ser um elemento ```<ng-template>``` */
+  // acoesTemplate: InputSignal<TemplateRef<any>> = input<TemplateRef<any>>();
+
+  /** Service a ser utilizado na listagem */
+  service: InputSignal<Service> = input<Service>();
+
+  total: ModelSignal<number> = model<number>(0);
+
+  /** Número de items máximo (usando two way data binding) */
+  limit: ModelSignal<number> = model<number>();
+
+  /** Valor da pagina, setado = 1 quando troca-se o valor de limite de paginas (usando two way data binding) */
+  page: ModelSignal<number> = model<number>(1);
+
+  /** Propriedade de ordenação (usando two way data binding) */
+  orderByProperty: ModelSignal<string | null> = model<string | null>(null);
+    
+  /** Propriedade de ordenação
+   * Se = true  Ordenará de menor ao maior 
+   * Se = false Ordenará de maior ao menor (usando two way data binding) */
+  ascending: ModelSignal<boolean> = model<boolean>(true);
+
+  /** Filtros (usando two way data binding) */ 
+  filter: ModelSignal<Comparison[]> = model<Comparison[]>([]);
+
+  /** Evento emitido quando um dos dados é ativado. Emite o id do dado */  
+  ativar : OutputEmitterRef<number> = output<number>();
+  refresh: OutputEmitterRef<void> = output<void>();
+
+
+  loading: ModelSignal<boolean> = model<boolean>(false);
+
+  /** Lista de dados a ser exibidos */
+  items: ModelSignal<T[]> = model<T[]>([]);
+
+  /** Lista de campos a ser exibidos */
+  lstTableFields: ModelSignal<TableField[]> = model<TableField[]>([]);
+  lstTableFieldsAvailable: Signal<AvailableTableField[]> = computed<AvailableTableField[]>(() => { 
+    return this.lstTableFields().filter(p => !p.hidden).map(tf => {
+      return new AvailableTableField(
+        tf, 
+        this.ascending() && this.orderByProperty() == tf.index, 
+        !this.ascending() && this.orderByProperty() == tf.index
+      );
+    });
+  });
+
+  /** Remove os filtros no cabeçalho da tabela  */
+  noFilters: InputSignal<boolean> = input<boolean>(false);
+
+  /** Aplica classes de CSS na coluna de acirdo com o retorno da função passada como parametro  */
+  columnClass: InputSignal<CSSStyleStringGenerator | null> = input<CSSStyleStringGenerator | null>(null);
+
+  /** Aplica style de CSS na coluna de acirco com o retorno da função passada como parametro  */
+  columnStyle: InputSignal<CSSStyleStringGenerator | null> = input<CSSStyleStringGenerator | null>(null);
+
+  /** Remove a paginação da listagem */
+  noPagination: InputSignal<boolean> = input<boolean>(false);
+
+  /** Caminho de redirecionamento do item */
+  itemPath: InputSignal<string> = input<string>('view/:id');
+  itemClick: OutputEmitterRef<{item: T, field: TableField}> = output<{item: T, field: TableField}>();
+
+  InputType = InputType;
+
+  constructor(
+    public storageService : StorageService,
+    private activatedRoute: ActivatedRoute,
+    private router        : Router,
+  ) { 
+    effect(() => {
+      for (const tf of this.lstTableFields().filter(p => p.type == InputType.Select)) {
+        (tf.configuration as InputSelectConfiguration).loader.Refresh().then(() => this.SetLstRows());
+      }
+      this.SetLstRows();
+    });
+  }
+
+  Redirect(field: TableField | undefined, item: T): void{
+    this.itemClick.emit({item, field});
+    if(!field){
+      return;
+    } else
+    if(field.index == 'ativo'){
+      return;
+    }else
+    if(field.type  == 'File'){
+      return;
+    }else
+    if(this.itemPath()){
+      const id = item['id']; 
+      const path = this.itemPath().replace(":id", id.toString());
+      this.router.navigate([`./${path}`], { relativeTo: this.activatedRoute })
+    }
+  }
+
+  SetLstRows(){ 
+    this.lstRows = this.items().map(item => {
+      return new DefaultTableRow<T>(
+        item, 
+        item['id'],
+        this.GetColumns(item),
+        this.columnClass() ? this.columnClass()('acoes', item) : '',
+        this.columnStyle() ? this.columnStyle()('acoes', item) : '',
+      );
+    });
+  }
+  
+  lstRows: DefaultTableRow<T>[] = []; 
+
+  GetColumns(item: T): DefaultTableColumn[] {
+    return this.lstTableFields().filter(p => !p.hidden).map(tf => {
+      const value = item[tf.index];
+      const column = new DefaultTableColumn(value, tf);
+      column.class = this.columnClass() ? this.columnClass()(tf.index, item) : '';
+      column.style = this.columnStyle() ? this.columnStyle()(tf.index, item) : '';
+      
+      if(!value){ 
+        column.label = '-' 
+        return column;
+      }
+      
+      if(tf.type == InputType.Bool){
+        column.label = "<bool>"
+      } else
+      if(tf.type == InputType.Cep){
+        column.label = FormatCep(value);
+      } else
+      if(tf.type == InputType.Color){
+        column.label = value;
+      } else
+      if([InputType.Cpf, InputType.Cnpj, InputType.CpfCnpj].includes(tf.type)){
+        column.label = FormatCpfCnpj(value);
+      } else
+      if(tf.type == InputType.DateTime){
+        column.class += ' font-mono';
+        column.label = Utils.DateISOToDDMMYYYYHHMM(value);
+      } else
+      if(tf.type == InputType.Date){
+        column.class += ' font-mono';
+        column.label = Utils.DateISOToDDMMYYYYHHMM(value);
+      } else
+      if(tf.type == InputType.Time){
+        column.class += ' font-mono';
+        column.label = value;
+      } else
+      if([InputType.Decimal, InputType.Decimal, InputType.Currency, InputType.Number].includes(tf.type)){
+        const configuration: InputDecimalConfiguration = tf.configuration;
+        column.label = [
+          configuration.prefix, 
+          formatNumber(value as number, 'pt-BR', `1.${configuration.precision}-${configuration.precision}`),
+          configuration.sufix, 
+        ].join(' ');
+      } else
+      if(tf.type == InputType.File){
+        column.label = '<file>';
+      } else
+      if(tf.type == InputType.Icon){
+        column.label = 'icon';
+      } else
+      if(tf.type == InputType.Select){
+        column.label = (tf.configuration as InputSelectConfiguration).loader.GetLabel(value);
+        column.loading = !(tf.configuration as InputSelectConfiguration).loader.isLoaded;
+      } else
+      if([InputType.String, InputType.TextArea].includes(tf.type)){
+        column.label = value
+      } else
+      if([InputType.Telefone, InputType.Celular, InputType.TelefoneCelular].includes(tf.type)){
+        column.label = FormatTelefoneCelular(value);
+      }
+
+      return column;
+    });
+  }
+
+  ngOnInit() { this.SetLstRows(); }
+
+  SwitchOrder(tf: TableField): void{
+    if(this.orderByProperty() != tf.index){
+      this.orderByProperty.set(tf.index);
+      this.ascending.set(true);
+    } else 
+    if(this.ascending()){
+      this.ascending.set(false);
+    } else{ 
+      this.orderByProperty.set(null); 
+    }
+    this.refresh.emit();
+  }
+
+  ChangeFilter(): void{
+    this.filter.set(CompileLstTableField(this.lstTableFields()));
+    this.page.set(1);
+    this.refresh.emit();
+  }
+
+  Ativar(id: number): void{
+    this.ativar.emit(id);
+  }
+}
+
+class DefaultTableRow<T>{
+  constructor(
+    public item: T,
+    public id: number | undefined,
+    public lstColumns: DefaultTableColumn[],
+    public acoesClass: string = '',
+    public acoesStyle: string = '',
+  ){}
+} 
+
+class DefaultTableColumn{
+  public label: string | null
+  public loading: boolean = false;
+  public class: string = '';
+  public style: string = '';
+  constructor(
+    public value: any = null,
+    public tf: TableField,
+  ){}
+}
+
+class AvailableTableField{
+  constructor(
+    public tf: TableField,
+    public ascending: boolean,
+    public descending: boolean,
+  ){}
+}

package/src/lib/components/default/default-table/th-filter/th-filter.component.html

@@ -0,0 +1,69 @@
+<div #anchor class="h-5 aspect-square flex items-center justify-center cursor-pointer">
+  <ion-icon name="filter-circle" (click)="popover.present($event)" class="text-xl align-sub size-full" [color]="isFilterActive ? 'secondary' : 'medium' "></ion-icon>
+</div>
+
+<ion-popover class="th-filter" fill="solid" #popover triggerAction="click" (onWillDismiss)="WillDismiss()">
+  <ng-template>
+    <div class="w-72 flex flex-col gap-2 p-2" >
+      @if(!['Select', 'Bool', 'String', 'TextArea', 'Cpf', 'Cnpj', 'CpfCnpj', 'Cep'].includes(field.type)){
+        <ion-label class="w-full flex items-center justify-center">  Filtro - {{field.header}} </ion-label>
+      }
+      @switch (field.type) {
+        @case ('String') {
+          <input-string [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}" (blur)="Change()"></input-string>
+        }
+        @case ('Number') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-number (change)="Change()" [(ngModel)]="modelMinimum" label="Valor Mínimo" [configuration]="field.configuration"></input-number>
+            <input-number (change)="Change()" [(ngModel)]="modelMaximum" label="Valor Maximo" [configuration]="field.configuration"></input-number>
+          </div>
+        }
+        @case ('Decimal') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-decimal (change)="Change()" [(ngModel)]="modelMinimum" label="Valor Mínimo" [configuration]="field.configuration"></input-decimal>
+            <input-decimal (change)="Change()" [(ngModel)]="modelMaximum" label="Valor Maximo" [configuration]="field.configuration"></input-decimal>
+          </div>
+        }
+        @case ('Currency') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-currency (change)="Change()" [(ngModel)]="modelMinimum" label="Valor Mínimo" [configuration]="field.configuration"></input-currency>
+            <input-currency (change)="Change()" [(ngModel)]="modelMaximum" label="Valor Maximo" [configuration]="field.configuration"></input-currency>
+          </div>
+        }
+        @case ('Select') {
+          <input-select (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}" [configuration]="configuration"></input-select>
+        }
+        @case ('TextArea') {
+          <input-string (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-string>
+        }
+        @case ('Bool') {
+          <input-select (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}" placeholder="" [configuration]="configuration"></input-select>
+        }
+        @case ('Date') {
+          <div class="size-full grid grid-cols-1 gap-2">
+            <input-date (change)="Change()" [(ngModel)]="modelMinimum" label="Data Mínima" [configuration]="configuration"></input-date>
+            <input-date (change)="Change()" [(ngModel)]="modelMaximum" label="Data Maxima" [configuration]="configuration"></input-date>
+          </div>
+        }
+        @case ('DateTime') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-date-time (change)="Change()" [(ngModel)]="modelMinimum" label="Data Mínima" [configuration]="configuration"></input-date-time>
+            <input-date-time (change)="Change()" [(ngModel)]="modelMaximum" label="Data Maxima" [configuration]="configuration"></input-date-time>
+          </div>
+        }
+        @case("Cep") {
+          <input-cep (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cep>
+        }
+        @case ('Cpf') {
+          <input-cpf (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cpf>
+        }
+        @case ('Cnpj') {
+          <input-cnpj (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cnpj>
+        }
+        @case ('CpfCnpj') {
+          <input-cpf-cnpj (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cpf-cnpj>
+        }
+      }
+    </div>
+  </ng-template>
+</ion-popover>