@sapphire-ion/framework 1.2.43 → 1.2.44

package/src/lib/components/popover/sion-popover/sion-popover.component.html

@@ -1,21 +0,0 @@
-<div #popoverWrapper 
-  class="popover-wrapper translucid-border"
-  [style.height]="height"
-  [style.width]="width"
-  [ngClass]="{
-      'bg-light'        : fill == 'solid',
-      'bg-transparent'  : fill == 'outline',
-      'bg-light/90'     : fill == 'blur',
-      '!border-0'       : fill == 'clear',
-    }"
-> 
-  <div #popoverArrow class="popover-arrow size-4 translucid-border"
-    [ngClass]="{
-      'bg-light'        : fill == 'solid',
-      'bg-transparent'  : fill == 'outline',
-      'bg-light/90'     : fill == 'blur',
-      '!border-0'       : fill == 'clear',
-    }"
-  ></div>
-  <ng-content #content></ng-content>
-</div>

package/src/lib/components/popover/sion-popover/sion-popover.component.ts

@@ -1,182 +0,0 @@
-import { AfterViewInit, Component, ElementRef, EmbeddedViewRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef, ViewRef } from '@angular/core';
-import { autoUpdate, computePosition, ComputePositionReturn, flip, limitShift, offset, Placement, shift, arrow } from '@floating-ui/dom';
-import { Timeout } from '../../../services/utils.service';
-
-type Fill = 'solid' | 'outline' | 'blur' | 'clear';
-
-@Component({
-  selector: 'sion-popover',
-  templateUrl: './sion-popover.component.html',
-  styleUrls: ['./sion-popover.component.scss'],
-})
-export class SIonPopoverComponent implements AfterViewInit, OnDestroy {
-
-  @Input() fill: Fill = 'blur';
-  @Input() arrow: boolean = true;
-  @Input() flip : boolean = true;
-
-
-  @Input() placement: Placement = 'bottom';
-  @Input() height: string = 'auto';
-  @Input() width: string = 'auto';
-
-
-  @Output() onWillPresent: EventEmitter<void> = new EventEmitter<void>();
-  @Output() onDidPresent: EventEmitter<void> = new EventEmitter<void>();
-
-  @Output() onWillDismiss: EventEmitter<void> = new EventEmitter<void>();
-  @Output() onDidDismiss: EventEmitter<void> = new EventEmitter<void>();
-
-  @Input() anchor: HTMLElement | undefined = undefined;
-
-  constructor(
-    private ngZone: NgZone
-  ) { }
-
-  @ViewChild('popoverWrapper' , { read: ElementRef }) contentContainer: ElementRef<HTMLDivElement>;
-  
-  ngAfterViewInit() {
-    //TODO: Use Renderer2 to add event listeners for better Angular compatibility when updating to Angular 19
-    this.ngZone.runOutsideAngular(() => {
-      this.documentClickListener = (event: MouseEvent) => {
-        // Run back inside Angular's zone when handling the event
-        this.ngZone.run(() => {
-          if(!this._instance){ return;}
-          if (
-            !this._instance.contains(event.target as Node) &&
-            !this.anchor.contains(event.target as Node)
-          ) {
-            this.dismiss();
-          }
-        });
-      };
-      
-      // Use the native DOM API directly with capture phase
-      document.addEventListener('click', this.documentClickListener, true);
-    });
-  }
-  documentClickListener: (event: MouseEvent) => void;
-  viewRef?: ViewRef;
-
-  private _embeddedView?: EmbeddedViewRef<any> | undefined;
-  private get _instance(): HTMLElement | undefined {
-    return this.contentContainer?.nativeElement;
-  }
-
-  get arrowEl(): HTMLElement | undefined {
-    return this._instance.querySelector('.popover-arrow') as HTMLElement;
-  }
-  
-  private cleanupAutoUpdate?: () => void;
-  public state: POPOVER_STATE = POPOVER_STATE.IDLE;
-  public async present(event?: Event): Promise<void> {
-    if(this.state != POPOVER_STATE.IDLE) { return; }
-    document.body.appendChild(this._instance);
-
-    this.onWillPresent.emit();
-    
-    this.state = POPOVER_STATE.PRESENTING;
-    const refEl   = this.anchor ? this.anchor : event.target as HTMLElement;
-    const arrowEl = this.arrowEl;
-
-    await this.update(refEl, arrowEl)
-    this._instance.classList.add('show');
-    this.cleanupAutoUpdate = autoUpdate(refEl, this._instance, async () => this.update(refEl, arrowEl));
-    
-    this.state = POPOVER_STATE.VISIBLE;
-    this.onDidPresent.emit();
-  }
-
-  private async update(refEl: HTMLElement, arrowEl: HTMLElement): Promise<void> {
-    const computePositionReturn: ComputePositionReturn = await this.GetComputePositionReturn(refEl, this._instance, arrowEl);
-    this.HandleComputePositionReturn(computePositionReturn, arrowEl);
-  }
-
-  public async dismiss(): Promise<void> {
-    if(this.state == POPOVER_STATE.IDLE) { return; }
-    
-    if(this.cleanupAutoUpdate) {
-      this.cleanupAutoUpdate();
-      this.cleanupAutoUpdate = undefined;
-    }
-    this.onWillDismiss.emit();
-    this.state = POPOVER_STATE.DISMISSING;
-    this._instance.classList.remove('show');
-    await Timeout(200);
-    this._instance?.remove();
-    this.state = POPOVER_STATE.IDLE;
-    this.onDidDismiss.emit();
-  }
-
-  HandleComputePositionReturn(computePositionReturn: ComputePositionReturn, arrowEl: HTMLElement): void {
-    Object.assign(this._instance.style, {
-      left: `${computePositionReturn.x}px`,
-      top:  `${computePositionReturn.y}px`,
-      width : this.width,
-      height: this.height,
-      position: 'absolute',
-    });
-    if(computePositionReturn.middlewareData.arrow){
-      const { x: arrowX, y: arrowY } = computePositionReturn.middlewareData.arrow;
-      const position = computePositionReturn.placement.split('-')[0];
-      const staticSide = STATIC_SIDES[position];
-      Object.assign(arrowEl.style, {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top : arrowY != null ? `${arrowY}px` : '',
-        right : '',
-        bottom: '',
-        [staticSide]: `-7px`,
-      });
-      arrowEl.style.setProperty(`--rotation`, ROTATIONS[position]);
-    }
-  }
-
-  ngOnDestroy(): void {
-    if(this._instance) {
-      this._instance?.remove();
-    }
-    if(this._embeddedView) {
-      this._embeddedView.destroy();
-      this._embeddedView = undefined;
-    }
-
-    if (this.documentClickListener) {
-      document.removeEventListener('click', this.documentClickListener, true);
-    }
-    if (this.viewRef) {
-      this.viewRef.destroy();
-      this.viewRef = undefined;
-    }
-  }
-
-  async GetComputePositionReturn(refEl: HTMLElement, popEl: HTMLElement, arrowEl: HTMLElement): Promise<ComputePositionReturn> {
-    return await computePosition(refEl, popEl, {
-      placement: this.placement,
-      middleware: [ 
-        offset(10), 
-        this.flip  ? flip({ crossAxis: false }) : undefined, 
-        shift({ limiter: limitShift(), padding: 5 }), 
-        this.arrow ? arrow({ element: arrowEl, padding: 10 }) : undefined,
-      ].filter(p => p),
-    });
-  }
-}
-
-enum POPOVER_STATE{
-  IDLE       = 1,
-  PRESENTING = 2,
-  DISMISSING = 3,
-  VISIBLE    = 4
-}
-const STATIC_SIDES = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right"
-};
-const ROTATIONS = {
-  bottom: "135deg",
-  top: "315deg",
-  left: "225deg",
-  right: "45deg",
-}

package/src/lib/components/popover/sion-popover.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SIonPopoverComponent } from './sion-popover/sion-popover.component';
-import { OverlayModule } from '@angular/cdk/overlay';
-@NgModule({
-  declarations: [ SIonPopoverComponent  ],
-  exports: [ SIonPopoverComponent ],
-  imports: [
-    CommonModule, OverlayModule
-  ]
-})
-export class SIonPopoverModule { }

package/src/lib/components/sion-card/sion-card.component.html

@@ -1,12 +0,0 @@
-<ion-card class="m-0 size-full">
-  <ion-card-content class="size-full p-0">
-    <div class="size-full {{backdrop}} flex flex-col overflow-hidden">
-      <div class="flex items-center {{justify}} p-2 min-h-8 shrink-0">
-        <ng-content select="[slot=header]"></ng-content>
-      </div>
-      <div class="{{background}} size-full rounded-t-2xl overflow-hidden">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  </ion-card-content>
-</ion-card>

package/src/lib/components/sion-card/sion-card.component.ts

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'sion-card',
-  standalone: true,
-  imports: [ CommonModule, IonicModule ],
-  templateUrl: './sion-card.component.html',
-  styleUrls: ['./sion-card.component.scss'],
-})
-export class SionCardComponent  implements OnInit {
-
-
-  @Input() background: string = 'bg-light';
-  @Input() backdrop: string = 'bg-primary/30';
-  @Input() justify: string = 'justify-center';
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

package/src/lib/components/stepper/step/step.component.html

@@ -1,11 +0,0 @@
-<div class="px-1 flex flex-col items-center justify-center text-center animated">
-  <div [ngClass]="{'selected': selected}" class="default-transition min-h-8 min-w-8 bg-red-400 flex items-center justify-center rounded-2xl step">
-    <div class="wrapper"><ng-content select="ion-icon, ion-text"></ng-content></div>
-    <div class="default">
-      {{index + 1}}
-    </div>
-  </div>
-  
-  <ion-text> {{label}} </ion-text>
-  <ion-progress-bar [color]="selected ? 'secondary' : 'primary'" class="h-2 ease-in-out" [value]="_fill"></ion-progress-bar>
-</div>

package/src/lib/components/stepper/step/step.component.ts

@@ -1,44 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { StepperComponent } from '../stepper.component';
-
-@Component({
-  selector: 'step',
-  templateUrl: './step.component.html',
-  styleUrls: ['./step.component.scss'],
-})
-export class StepComponent  implements OnInit {
-  
-  @Input()        label   : string = "Label";
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  parent: StepperComponent;
-
-  get index(): number{ 
-    if(this.parent && this.parent.lstSteps){
-      return this.parent.lstSteps.toArray().indexOf(this);
-    }
-    return 0;
-  }
-  
-  get fill(): boolean{
-    if(this.parent){
-      return this.parent.lstSteps.toArray().indexOf(this) == this.parent.value();
-    }
-    return false;
-  };
-  
-  get selected(): boolean{
-    if(this.parent){
-      return this.parent.lstSteps.toArray().indexOf(this) <= this.parent.value();
-    }
-    return false;
-  };
-
-  get _fill(){
-    return this.fill ? 1 : 0; 
-  }
-}

package/src/lib/components/stepper/stepper.component.html

@@ -1,3 +0,0 @@
-<div class="flex w-full justify-evenly">
-    <ng-content select="step" class="grow"></ng-content>
-</div>

package/src/lib/components/stepper/stepper.component.ts

@@ -1,37 +0,0 @@
-import { AfterContentInit, Component, ContentChildren, QueryList } from '@angular/core';
-import { StepComponent } from './step/step.component';
-import { CustomInput } from '../inputs/custom-input';
-import { InputProviderFactory } from '../inputs/input-provider-factory';
-
-@Component({
-  selector: 'stepper',
-  templateUrl: './stepper.component.html',
-  styleUrls: ['./stepper.component.scss'],
-  providers: InputProviderFactory.GetProviders(StepperComponent)
-})
-export class StepperComponent extends CustomInput<any> implements AfterContentInit  {
-  override setFocus(event: MouseEvent): void {
-    // throw new Error('Method not implemented.');
-  }
-
-  constructor() { super(); }
-  ngAfterContentInit(): void {
-    if(this.lstSteps){
-      this.lstSteps.filter(p => !p.parent).forEach(comp => { comp.parent = this; });
-    }
-  }
-
-  @ContentChildren(StepComponent) lstSteps : QueryList<StepComponent>;
-
-  override writeValue(obj: string): void | Promise<void> {
-    this.value.set(obj);
-    this.runValidation();
-  }
-
-  override SetValue(obj: any): void {
-    this.value.set(obj);
-    this.ngAfterContentInit();
-    this.runValidation();
-    this.propagateChange(obj);
-  }
-}

package/src/lib/components/stepper/stepper.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { StepComponent } from './step/step.component';
-import { StepperComponent } from './stepper.component';
-import { IonicModule } from '@ionic/angular';
-
-@NgModule({
-  declarations: [ StepComponent, StepperComponent ],
-  exports: [ StepComponent, StepperComponent ],
-  imports: [
-    CommonModule,
-    IonicModule
-  ]
-})
-export class StepperModule { }

package/src/lib/components/tabs/tab/tab.component.html

@@ -1,8 +0,0 @@
-<div [ngClass]="{'-translate-x-full opacity-0': !active,
-                 '!relative': relative }" class="default-transition overflow-hidden max-h-full size-full absolute top-0 left-0">
-  @if(route && active){
-    <router-outlet class="size-full"></router-outlet>
-  }@else {
-    <ng-content></ng-content>
-  }
-</div>

package/src/lib/components/tabs/tab/tab.component.ts

@@ -1,28 +0,0 @@
-import { Component, Input, ViewChild, ViewContainerRef } from "@angular/core";
-import { RouterOutlet } from "@angular/router";
-import { Utils } from "../../../services/utils.service";
-
-@Component({
-  selector: 'tab',
-  templateUrl: './tab.component.html',
-  styleUrls: ['./tab.component.scss'],
-})
-export class TabComponent {
-  @Input() id   : string  = null;
-
-  @Input() label: string  = "Label";
-  /** Icone da aba @link https://ionic.io/ionicons */
-  @Input() name : string  = "warning";
-  /** Rota aba, quando náo informada irá mostrar o conteudo do componente */
-  @Input() public route : string | null = null;
-  @Input() active: boolean = false;
-  @Input() relative: boolean = false;
-
-  constructor() { }
-
-  @ViewChild('placeToRender', {read: ViewContainerRef}) placeToRender: ViewContainerRef;
-  routerOutlet: RouterOutlet | null = null;
-
-  guid = Utils.GenerateGUID();
-}
-

package/src/lib/components/tabs/tabs/tabs.component.html

@@ -1,14 +0,0 @@
-<div class="flex flex-col size-full">
-  <div class="h-10 w-full flex px-3 mask-x/3 overflow-x-auto">
-    @for (tab of lstTabs; track $index) {
-      <div [routerLink]="tab.route ? '.' + tab.route : GetElse()" [ngClass]="{'selected': tab.active}" class="default-transition !translucid-background translucid-border tab-selector !border-b-0 animated-from-right whitespace-nowrap" (click)="SetActiveTab(tab)">
-        <ion-text class="mx-auto" [color]="tab.active ? 'dark' : ''">
-          <ion-icon [name]="tab.name" class="align-sub mr-1"></ion-icon> {{tab.label}}
-        </ion-text>
-      </div>
-    }
-  </div>
-  <div class="translucid-border tab-content !overflow-hidden relative">
-    <ng-content></ng-content>
-  </div>
-</div>

package/src/lib/components/tabs/tabs/tabs.component.ts

@@ -1,42 +0,0 @@
-import { AfterContentInit, Component, ContentChild, ContentChildren, EventEmitter, OnInit, Output, QueryList } from '@angular/core';
-import { TabComponent } from '../tab/tab.component';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss'],
-})
-export class TabsComponent implements AfterContentInit {
-
-  @ContentChildren(TabComponent) lstTabs: QueryList<TabComponent>;
-  @ContentChild(RouterOutlet)  router: RouterOutlet;
-  
-  /** Emitido quando a aba é trocada. Emite o ID do elemento */
-  @Output('change') changeEmitter: EventEmitter<string> = new EventEmitter<string>();
-
-  constructor(
-  ) { }
-
-  ngAfterContentInit(): void {
-    let activeTabs = this.lstTabs.filter((tab) => tab.active);
-    if(activeTabs.length == 0 && this.lstTabs.length > 0) { this.SetActiveTab(this.lstTabs.first); }
-  
-    let currentLocationTabs = this.lstTabs.filter(tab => tab.route).filter((tab) => window.location.pathname.toLocaleLowerCase().includes((tab.route).toLocaleLowerCase()));
-    if(currentLocationTabs.length > 0){ this.SetActiveTab(currentLocationTabs[0]); }
-  }
-
-  ActiveTab: TabComponent | null = null;
-  SetActiveTab(tab: TabComponent){
-    this.lstTabs.forEach(tab => tab.active = false);
-    tab.active = true;
-    this.ActiveTab = tab;
-    if(tab.route){ this.isComponent = false; } else{ this.isComponent = true; }
-    this.changeEmitter.emit(this.ActiveTab.id);
-  }
-  isComponent: boolean = true;
-
-  GetElse(){
-    return this.lstTabs.some(p => p.route != null) ? './' : undefined
-  }
-}

package/src/lib/components/tabs/tabs.module.ts

@@ -1,15 +0,0 @@
-import { RouterLinkWithHref, RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { NgModule } from '@angular/core';
-
-import { TabsComponent } from './tabs/tabs.component';
-import { TabComponent } from './tab/tab.component';
-import { NgVarDirective } from '../../directives/ng-var.directive';
-
-@NgModule({
-  declarations: [ TabsComponent, TabComponent ],
-  exports     : [ TabsComponent, TabComponent ],
-  imports: [ CommonModule, IonicModule, NgVarDirective, RouterLinkWithHref, RouterModule ]
-})
-export class TabsModule { }

package/src/lib/components/text-tooltip/text-tooltip.component.html

@@ -1,8 +0,0 @@
-<div #text class="w-full truncate relative  overflow-hidden">
-  <ng-content select="[slot=content]"></ng-content>
-</div>
-<div class="absolute top-0 left-0 size-full">
-  <tooltip [color]="color" [align]="align" *ngIf="isOverflowing" [hidden]="!isOverflowing">
-    <ng-content select="[slot=tooltip]"></ng-content>
-  </tooltip>
-</div>

package/src/lib/components/text-tooltip/text-tooltip.component.ts

@@ -1,45 +0,0 @@
-import { AfterContentInit, Component, ElementRef, HostListener, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
-import { TooltipComponent } from '../tooltip/tooltip.component';
-import { IonicModule } from '@ionic/angular';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'text-tooltip',
-  standalone: true,
-  imports: [CommonModule, IonicModule, TooltipComponent],
-  templateUrl: './text-tooltip.component.html',
-  styleUrls: ['./text-tooltip.component.scss'],
-})
-export class TextTooltipComponent implements OnChanges, AfterContentInit  {
-  isOverflowing: boolean = true;
-
-  @ViewChild('text') text: ElementRef<HTMLDivElement>;
-  private CheckOverflowHandler(){
-    if(this.text){ this.isOverflowing = this.text.nativeElement.scrollWidth > this.text.nativeElement.clientWidth; }
-  };
-  
-  @Input() align: 'top' | 'bottom' | 'left' | 'right' = 'right';
-  @Input() color: string= 'secondary';
-
-  constructor() { 
-  }
-  
-  @HostListener("mouseenter")
-  onMouseEnter() {
-    this.CheckOverflowHandler()
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    setTimeout(() => this.CheckOverflowHandler(), 100)
-  }
-
-  ngAfterContentInit(): void {
-    this.CheckOverflowHandler();
-  }
-
-  @HostListener("window:resize")
-  onResize() {
-    this.CheckOverflowHandler()
-  }
-
-}

package/src/lib/components/tooltip/tooltip.component.html

@@ -1,53 +0,0 @@
-<!-- <div
-  class="
-    absolute
-    
-
-    default-transition px-2
-    min-w-fit h-fit py-1
-    bg-[var(--ion-color-secondary)] 
-    rounded-xl
-  "
-  [ngClass]="{'!translate-x-0 !translate-y-0 !opacity-100': _active}"
-> 
-  <div class="absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-red-500 [clip-path:polygon(0_20%,_0%_100%,_80%_100%)]"></div>
-  <div class="z-[100] whitespace-nowrap">
-    <ng-content></ng-content>
-  </div>
-</div>  -->
-<div #wrapper id="wrapper" class="size-full absolute left-0 right-0 animated">
-  <div
-    id="tooltip"
-    style="--background: var(--ion-color-{{color}})"
-    class="
-      !pointer-events-none
-      absolute
-      default-transition px-2
-      min-w-fit h-fit py-1
-      bg-[var(--background)]
-      rounded-xl blur-sm
-      opacity-0
-      max-w-full
-      {{align}}
-    "
-  > 
-    @switch (align) {
-      @case ('top') {
-        <div class="absolute rounded -bottom-1 left-0 right-0 mx-auto -rotate-45 h-4 aspect-square bg-[var(--background)] [clip-path:polygon(0_20%,_0%_100%,_80%_100%)]"></div>
-      }
-      @case ('bottom') {
-        <div class="absolute rounded -top-1 left-0 right-0 mx-auto rotate-[135deg] h-4 aspect-square bg-[var(--background)] [clip-path:polygon(0_20%,_0%_100%,_80%_100%)]"></div>
-      }
-      @case ('right') {
-        <div class="absolute rounded -left-1 top-0 bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--background)] [clip-path:polygon(0_20%,_0%_100%,_80%_100%)]"></div>
-      }
-      @case ('left') {
-        <div class="absolute rounded -right-1 top-0 bottom-0 my-auto -rotate-[135deg] h-4 aspect-square bg-[var(--background)] [clip-path:polygon(0_20%,_0%_100%,_80%_100%)]"></div>
-      }
-    }
-    <div class="z-[100] block text-dark text-sm">
-      <ng-content></ng-content>
-    </div>
-  </div> 
-</div>
-

package/src/lib/components/tooltip/tooltip.component.ts

@@ -1,16 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, Host, Input, input, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'tooltip',
-  standalone: true,
-  imports: [CommonModule, IonicModule],
-  templateUrl: './tooltip.component.html',
-  styleUrls: ['./tooltip.component.scss'],
-})
-export class TooltipComponent {
-
-  @Input() align: 'top' | 'bottom' | 'left' | 'right' = 'right';
-  @Input() color: string= 'secondary';
-}

package/src/lib/core.module.ts

@@ -1,29 +0,0 @@
-import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { Environment } from './classes/environment';
-import { EnvironmentService } from './services/environment.service';
-import { ModalFocusTrapService } from './services/modal-focus-trap.service';
-import { PopoverFocusTrapService } from './services/popover-focus-trap.service';
-
-export const EnvironmentInjectionToken = new InjectionToken<Environment>('Environment');
-@NgModule({
-  declarations: [],
-  exports     : [],
-  imports: [ CommonModule, ],
-  providers: [ ModalFocusTrapService , PopoverFocusTrapService],
-})
-export class SapphireIonFrameworkModule { 
-  constructor( private mis: ModalFocusTrapService, private pos : PopoverFocusTrapService ) {}
-
-  static forRoot(config: Environment): ModuleWithProviders<SapphireIonFrameworkModule> {
-    return { 
-      ngModule: SapphireIonFrameworkModule,
-      providers: [ 
-        ModalFocusTrapService,
-        PopoverFocusTrapService,
-        EnvironmentService, { provide: EnvironmentInjectionToken, useValue: config }, 
-      ]
-    }
-  }
-}

package/src/lib/directives/ng-var.directive.ts

@@ -1,26 +0,0 @@
-import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
-
-@Directive({
-  standalone: true,
-  selector: '[ngVar]',
-})
-export class NgVarDirective {
-  @Input()
-  set ngVar(context: unknown) {
-      this.context.$implicit = this.context.ngVar = context;
-
-      if (!this.hasView) {
-        this.vcRef.createEmbeddedView(this.templateRef, this.context);
-        this.hasView = true;
-      }
-  }
-
-  private context: { $implicit: unknown; ngVar: unknown; } = { $implicit: null, ngVar: null, };
-
-  private hasView: boolean = false;
-
-  constructor(
-    private templateRef: TemplateRef<any>,
-    private vcRef: ViewContainerRef
-  ) {}
-}