@vectoriox/iox-ui 4.0.3 → 4.0.4

package/projects/iox-ui/src/lib/iox-aos/iox-aos.directive.ts

@@ -1,133 +0,0 @@
-import { Directive, OnDestroy, AfterViewInit, ElementRef, Input, OnInit, Renderer2, HostListener, Host, Optional  } from "@angular/core";
-import { AnimationBuilder, style, animate, AnimationPlayer } from '@angular/animations';
-import { IoxAnimationStyles } from "./iox-aos-animations"
-;
-import { IoxAnimateContainer } from "./iox-aos-container.component";
-@Directive({
-    selector: "[ioxAnimate], ioxAnimate",
-    standalone: false
-  })
-  export class IoxAosDirective implements OnDestroy, OnInit, AfterViewInit {
-    
-    @Input("animationDelay") animationDelay: string ="";
-    @Input("animationIn") animationIn: string ="";
-    @Input("animationOut") animationOut: string = "";
-    @Input("animationDuration") animationDuration: string = "0.5s";
-    
-    // @Input("in")
-    // @Input("out")
-
-    public animation:AnimationPlayer | any;
-    public isAnimationPlayed= false;
-    private _elTop:number =0;
-
-
-    constructor(@Host() @Optional() private _animateContainer: IoxAnimateContainer, private _element: ElementRef, private _animationBuilder:AnimationBuilder, private  _renderer: Renderer2){
-        
-        this._renderer.setStyle(_element.nativeElement,'opacity', '0');
-    }
-
-    public ngOnInit(){
-    }
-
-    public  ngAfterViewInit(){
-
-          setTimeout(()=>{
-
-            this._elTop = this._cumulativeOffset(this._element.nativeElement).top;
-
-            if(this._animateContainer){
-              if(this._animateContainer.kickIn){
-                this.runIfVisiable();
-              }else{
-                return
-              }
-            }else{
-              this.runIfVisiable();
-            }
-
-     
-            
-          },150)
-
-          const resizeObserver = new ResizeObserver((entries) =>
-            this._elTop = this._cumulativeOffset(this._element.nativeElement).top
-          );
-
-          resizeObserver.observe(document.body);
-          
-          if(this._animateContainer){
-            this._animateContainer?.scrollOffset.subscribe((offset:any)=>{
-              if(this._animateContainer.kickIn){
-                this.scrollEventHandler(-1 *offset.top);
-              }
-            })
-          }
-
-          
-    }
-
-    public makeAnimationIn(animationStyle:any):AnimationPlayer{
-        let animation = IoxAnimationStyles[animationStyle](this.animationDelay, this.animationDuration);
-        const myAnimation = this._animationBuilder.build(animation)
-        return myAnimation.create(this._element.nativeElement);  
-
-    }
-
-    private _cumulativeOffset(element:any) {
-        var top = 0, left = 0;
-        do {
-            top += element.offsetTop  || 0;
-            left += element.offsetLeft || 0;
-            element = element.offsetParent;
-        } while(element);
-    
-        return {
-            top: top,
-            left: left
-        };
-    };
-
-  @HostListener('document:scroll', ['$event']) onScrollEvent($event:any){
-       this.scrollEventHandler(window.pageYOffset)
-    }
-    
-    public isVisable(offset:number){
-      //console.log(this._elTop >= window.pageYOffset && this._elTop <= window.pageYOffset + window.innerHeight);
-      //return this._elTop >= window.pageYOffset && this._elTop <= window.pageYOffset + window.innerHeight;
-      return this._elTop >= offset && this._elTop <= offset + window.innerHeight;
-    }
-
-
-    public scrollEventHandler(offset:number){
-
-      if(this._animateContainer && this._animateContainer.kickIn == false){
-        return
-      }
-
-      if(this.isVisable(offset) && !this.isAnimationPlayed){
-        let animationStyle = this.animationIn || "fade-up";
-        this.makeAnimationIn(animationStyle).play();
-        this.isAnimationPlayed = true;
-      }else if(!this.isVisable(offset) && this.isAnimationPlayed && this.animationOut){
-        this.makeAnimationIn(this.animationOut).play();
-        this.isAnimationPlayed =false;
-      }
-    }
-
-    public runIfVisiable(){
-      if(this.isVisable(window.pageYOffset)){
-        let animationStyle = this.animationIn || "fade-up";
-        this.makeAnimationIn(animationStyle).play();
-        this.isAnimationPlayed = true;
-      }
-    }
-    public ngOnDestroy(){
-
-    }
-
-  }
-
-function ViewParent() {
-  throw new Error("Function not implemented.");
-}

package/projects/iox-ui/src/lib/iox-aos/iox-aos.module.ts

@@ -1,33 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { IoxAosDirective } from './iox-aos.directive';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IoxAnimateContainer } from './iox-aos-container.component';
-import { AOSService } from './iox-aos.service';
-
-
-@NgModule({
-  declarations: [
-    IoxAosDirective,
-    IoxAnimateContainer
-  ],
-  imports: [
-    BrowserAnimationsModule
-  ],
-  providers:[
-    AOSService
-  ],
-  exports: [
-    IoxAosDirective,
-    IoxAnimateContainer
-   ]
-})
-export class IoxAosModule { 
-
-  static forRoot(): ModuleWithProviders<any> {
-    return {
-      ngModule: IoxAosModule,
-      providers: [AOSService]
-    };
-  }
-
-}

package/projects/iox-ui/src/lib/iox-aos/iox-aos.service.ts

@@ -1,21 +0,0 @@
-import { Injectable } from "@angular/core";
-import { Observable, Subject } from "rxjs";
-
-
-
-@Injectable({providedIn: 'root'})
-export class AOSService {
-
-
-
-    private _scrollOffset:Subject<any> = new Subject();
-    public readonly scrollOffset: Observable<any> = this._scrollOffset.asObservable();
-      
-  constructor() { }
-
-
-  updateScrollOffset(offset:any){
-    this._scrollOffset.next(offset);
-  }
-
-}

package/projects/iox-ui/src/lib/iox-masonry/iox-masonry-item.directive.ts

@@ -1,24 +0,0 @@
-import { Directive, Inject, ElementRef, forwardRef, OnDestroy, AfterViewInit, Renderer2 } from '@angular/core';
-import { IoxMasonryComponent } from './iox-masonry.component';
-@Directive({
-  selector: "[ioxMasonryItem], ioxMasonryItem",
-  standalone: false
-})
-export class IoxMasonryItemDirective implements OnDestroy, AfterViewInit {
-    constructor(
-      private _element: ElementRef,
-      @Inject(forwardRef(() => IoxMasonryComponent))
-      private _parent: IoxMasonryComponent,
-      private _renderer:Renderer2) {
-        //this._renderer.setStyle(_element.nativeElement,'opacity', '0');
-      }
-
-      ngAfterViewInit() {
-          console.log(this._element.nativeElement);
-          this._parent.add(this._element.nativeElement);
-      }
-
-      ngOnDestroy() {
-          this._parent.remove(this._element.nativeElement);
-      }
-}

package/projects/iox-ui/src/lib/iox-masonry/iox-masonry.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { IoxMasonryComponent } from './iox-masonry.component';
-
-describe('IoxMasonryComponent', () => {
-  let component: IoxMasonryComponent;
-  let fixture: ComponentFixture<IoxMasonryComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ IoxMasonryComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IoxMasonryComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/iox-ui/src/lib/iox-masonry/iox-masonry.component.ts

@@ -1,71 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter, HostListener,  ElementRef, AfterViewInit} from '@angular/core';
-import { Masonry } from '@fristys/masonry';
-
-
-@Component({ 
-  selector: "[iox-masonry], iox-masonry",
-  template: `<ng-content></ng-content>`,
-  styles: [],
-  standalone: false
-})
-export class IoxMasonryComponent implements OnInit, AfterViewInit {
-
-  
-
-  // Inputs
-  @Input() public options: any = {};
-  @Input() public useImagesLoaded: Boolean = false;
-  @Input() updateLayout: Boolean = false;
-
-  @Output() layoutComplete: EventEmitter<any[]> = new EventEmitter<any[]>();
-  
-  public _msnry: any;
-  private isAppendAllowed:boolean = true;
-
-  constructor(private _element: ElementRef) { }
-
-  ngAfterViewInit(): void {
-    console.log("test");
-  }
-
-  ngOnInit() {
-    this._msnry = new Masonry(document.getElementById('masonry'), this.options);
-    this.layout();  
-  }
- 
-  ngOnChanges(changes: any) {
-    console.log(changes);
-  }
-
-
-  add = (element: HTMLElement)=>{
-    setTimeout(()=>{
-      this._msnry.init();
-    },200)
-
-  }
-
-  public remove(element: HTMLElement) {
-    this._msnry.remove(element);
-  }
-
-  public layout() {
-    setTimeout(() => {
-      this._msnry.init();
-    });
-  }
-
-}
-
-export interface IoxMasonryOptions {
-  columns?: number;
-  columnBreakpoints?: number;
-  gutter?: number | string;
-  initOnImageLoad?: boolean;
-  loadingClass?: string;
-  loadedClass?: string;
-  onInit?:any;
-  bindOnScroll?: boolean;
-  useContainerWidth?: boolean;
-  trackItemSizeChanges?: boolean;
-}

package/projects/iox-ui/src/lib/iox-masonry/iox-masonry.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { IoxMasonryComponent } from './iox-masonry.component';
-import { IoxMasonryItemDirective } from './iox-masonry-item.directive';
-import { BrowserModule } from '@angular/platform-browser';
-
-
-
-@NgModule({
-  declarations: [IoxMasonryComponent, IoxMasonryItemDirective],
-  imports: [
-    BrowserModule
-  ],
-  exports: [IoxMasonryComponent, IoxMasonryItemDirective]
-})
-export class IoxMasonryModule { }

package/projects/iox-ui/src/lib/iox-masonry/iox-masonry.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { IoxMasonryService } from './iox-masonry.service';
-
-describe('IoxMasonryService', () => {
-  let service: IoxMasonryService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(IoxMasonryService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/projects/iox-ui/src/lib/iox-masonry/iox-masonry.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class IoxMasonryService {
-
-  constructor() { }
-}

package/projects/iox-ui/src/lib/iox-page/iox-page.module.ts

@@ -1,13 +0,0 @@
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IoxPageComponent } from './page-component/page-component.component';
-import { PageScrollProvider } from '../services/page-scroll.provider';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [IoxPageComponent],
-  exports: [IoxPageComponent],
-  providers: [PageScrollProvider]
-})
-export class IoxPageModule {}

package/projects/iox-ui/src/lib/iox-page/page-component/page-component.component.html

@@ -1,5 +0,0 @@
-<div #page [class]="class" class="iox-page-wrapper">
-  <div class="page-mask">
-    <ng-content></ng-content>
-  </div>
-</div>

package/projects/iox-ui/src/lib/iox-page/page-component/page-component.component.scss

@@ -1,19 +0,0 @@
-:host {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.iox-page-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-.page-mask {
-  min-height: 100%;
-}
-
-

package/projects/iox-ui/src/lib/iox-page/page-component/page-component.component.ts

@@ -1,60 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
-import { fromEvent, Subscription } from 'rxjs';
-import { PageScrollProvider } from '../../services/page-scroll.provider';
-
-@Component({
-  selector: 'iox-page-component',
-  templateUrl: './page-component.component.html',
-  styleUrls: ['./page-component.component.scss'],
-  standalone: false
-})
-export class IoxPageComponent implements AfterViewInit, OnDestroy {
-  @Input() class = '';
-  @ViewChild('page') public page!: ElementRef<HTMLDivElement>;
-  private scrollSubscription!: Subscription;
-  @Output() scrollEvent = new EventEmitter<{
-    scrollTop: number;
-    scrollLeft: number;
-    scrollHeight: number;
-    scrollWidth: number;
-    clientHeight: number;
-    clientWidth: number;
-    scrollPercentage: number;
-  }>();
-
-  constructor(private pageScrollProvider: PageScrollProvider) {}
-
-  ngAfterViewInit(): void {
-    if (this.page) {
-      this.scrollSubscription = fromEvent(this.page.nativeElement, 'scroll').subscribe((event) => {
-        this.onScroll(event as Event);
-      });
-
-      this.pageScrollProvider.init({
-        wrapper: this.page.nativeElement,
-        content: this.page.nativeElement.querySelector('.page-mask')!,
-        duration: 1.2,
-        easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-      });
-    }
-  }
-
-  onScroll(event: Event): void {
-    const target = event.target as HTMLElement;
-    const scrollTop = target.scrollTop;
-    const scrollLeft = target.scrollLeft;
-    const scrollHeight = target.scrollHeight;
-    const scrollWidth = target.scrollWidth;
-    const clientHeight = target.clientHeight;
-    const clientWidth = target.clientWidth;
-    const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
-
-    this.scrollEvent.emit({ scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth, scrollPercentage });
-  }
-
-  ngOnDestroy(): void {
-    if (this.scrollSubscription) {
-      this.scrollSubscription.unsubscribe();
-    }
-  }
-}

package/projects/iox-ui/src/lib/iox-ui.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { IoxAosModule } from './iox-aos/iox-aos.module';
-import { IoxPageModule } from './iox-page/iox-page.module';
-
-
-@NgModule({
-  declarations: [],
-  imports: [IoxAosModule, IoxPageModule],
-  exports: [IoxAosModule, IoxPageModule]
-})
-export class IoxUiModule { }

package/projects/iox-ui/src/lib/services/page-scroll.provider.ts

@@ -1,45 +0,0 @@
-import { Injectable } from '@angular/core';
-import Lenis from 'lenis';
-
-@Injectable()
-export class PageScrollProvider {
-  private lenis?: Lenis;
-  private rafId?: number;
-
-  init(options?: ConstructorParameters<typeof Lenis>[0]): void {
-    if (this.lenis) {
-      this.lenis.destroy();
-    }
-    if (this.rafId != null) {
-      cancelAnimationFrame(this.rafId);
-    }
-    this.lenis = new Lenis(options || {});
-    this.startLoop();
-  }
-
-  scrollTo(y: number, options?: { duration?: number; immediate?: boolean }): void {
-    this.instance.scrollTo(y, options);
-  }
-
-  scrollToTop(options?: { duration?: number; immediate?: boolean }): void {
-    this.scrollTo(0, options);
-  }
-
-  get instance(): Lenis {
-    if (!this.lenis) {
-      throw new Error('PageScrollProvider: call init() before accessing the instance.');
-    }
-    return this.lenis;
-  }
-
-  private startLoop(): void {
-    if (!this.lenis) {
-      return;
-    }
-    const loop = (time: number) => {
-      this.lenis!.raf(time);
-      this.rafId = requestAnimationFrame(loop);
-    };
-    this.rafId = requestAnimationFrame(loop);
-  }
-}

package/projects/iox-ui/src/lib/view-position/view-position.directive.ts

@@ -1,98 +0,0 @@
-import {AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, Output} from '@angular/core';
-
-@Directive({
-    selector:'[view-position]',
-    standalone: false
-})
-
-export class ViewPositionDirective implements AfterViewInit{
-
-    private _viewPortHighet!:number;
-    private _elementHeight!: number;
-    private _elementOffseTop!: number;
-    private _curterScreen!:number;
-    private _halfSscreen!:number;
-    
-    private _scrollDirection:string= "Down";
-    private _scrollPos:number = 0;
-    public isOnScreen: boolean = false;
-    public isHalfScreen: boolean = false;
-    
-    @Input() data:any
-    @Output() onEnter:EventEmitter<any> = new EventEmitter();
-    @Output() onLeave:EventEmitter<any> = new EventEmitter();
-    @Output() onHalf:EventEmitter<any> = new EventEmitter();
-
-    constructor(private _elr:ElementRef){
-        this._initScreenDeminitions();
-        console.log(`screent highet: ${this._viewPortHighet}`);
-    }
-
-
-    ngAfterViewInit(): void {
-        this._elementOffseTop = this._elr.nativeElement.offsetTop;
-        this._elementHeight = this._elr.nativeElement.offsetHeight;
-        console.log(`element offset Y = ${this._elementOffseTop}`);  
-    }
-
-
-    @HostListener('window:scroll', ['$event']) onScroll(e: Event): void {
-
-        if ((document.body.getBoundingClientRect()).top > this._scrollPos){
-            if(this._scrollDirection != "Up"){
-                this.isHalfScreen =false;
-                this._scrollDirection = "Up"
-            }
-        }      
-	    else{
-            if(this._scrollDirection !="Down"){
-                this.isHalfScreen =false;
-                this._scrollDirection = "Down"
-            }
-        }      
-	    this._scrollPos = (document.body.getBoundingClientRect()).top;
-
-
-        let currentClientHight = this._elr.nativeElement.getBoundingClientRect().top;
-        if(currentClientHight >= this._viewPortHighet || currentClientHight  < -this._elementHeight){
-            if(this.isOnScreen){
-                this.isOnScreen = false;
-                this.onLeave.emit("OUT");
-            }
-        }else{
-            if(!this.isOnScreen){
-                this.isOnScreen = true;
-                this.onEnter.emit("IN");
-            }
-        }
-
-        if(currentClientHight < this._halfSscreen && currentClientHight > 0 &&  this._scrollDirection == "Down") {
-            if(!this.isHalfScreen){
-                this.isHalfScreen = true;
-                console.log("half")
-                this.onHalf.emit(this.data);
-            }
-        }
-
-        if(currentClientHight + this._elementHeight > this._halfSscreen && currentClientHight +this._elementHeight < this._viewPortHighet &&  this._scrollDirection == "Up") {
-            if(!this.isHalfScreen){
-                this.isHalfScreen = true;
-                console.log("I am  half")
-                this.onHalf.emit(this.data);
-            }
-        }
-     }
-
-    @HostListener('window:resize', ['$event']) onResize(e: Event) {
-        this._viewPortHighet = window.innerHeight;
-        this._initScreenDeminitions();
-    }
-    
-    
-
-    private _initScreenDeminitions(){
-        this._viewPortHighet = window.innerHeight;
-        this._curterScreen = Math.trunc(this._viewPortHighet *0.25);
-        this._halfSscreen = Math.trunc(this._viewPortHighet *0.5);
-    }
-    }

package/projects/iox-ui/src/lib/view-position/view-position.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ViewPositionDirective } from './view-position.directive';
-
-
-
-@NgModule({
-  declarations: [
-    ViewPositionDirective
-  ],
-  imports: [
-  ],
-  exports: [
-    ViewPositionDirective
-  ]
-})
-export class ViewPositionModule { }

package/projects/iox-ui/src/public-api.ts

@@ -1,25 +0,0 @@
-/*
- * Public API Surface of iox-ui
- */
-
-export * from './lib/view-position/view-position.directive';
-export * from './lib/view-position/view-position.module';
-
-
-
-export * from './lib/iox-aos/iox-aos.directive';
-export * from './lib/iox-aos/iox-aos-container.component';
-export * from './lib/iox-aos/iox-aos.service';
-export * from './lib/iox-aos/iox-aos.module';
-
-
-
-export * from './lib/iox-masonry/iox-masonry.service';
-export * from './lib/iox-masonry/iox-masonry.component';
-export * from './lib/iox-masonry/iox-masonry-item.directive';
-export * from './lib/iox-masonry/iox-masonry.module';
-
-export * from './lib/iox-ui.module';
-export * from './lib/iox-page/page-component/page-component.component';
-export * from './lib/iox-page/iox-page.module';
-export * from './lib/services/page-scroll.provider';

package/projects/iox-ui/src/test.ts

@@ -1,15 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);