@vectoriox/iox-ui 4.0.3 → 4.0.4

package/projects/iox-ui/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/projects/iox-ui/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/projects/iox-ui/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

package/src/app/app-routing.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AOSComponent } from './pages/aos/aos.component';
-import { MasonryComponent } from './pages/masonry/masonry.component';
-
-const routes: Routes = [
-  { path: 'aos',   component: AOSComponent,pathMatch: 'full' },
-  { path: 'masonry',   component: MasonryComponent,pathMatch: 'full' }
-]
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

package/src/app/app.component.html

@@ -1,17 +0,0 @@
-<iox-page-component>
-    <div id="main">
-        <aside>
-
-            <nav>
-                <ul>
-                    <li><i class="icon-iox"></i></li>
-                    <li><a href="aos">aos</a></li>
-                    <li><a href="masonry">Masonry Gallery</a></li>
-                </ul>
-            </nav>
-        </aside>
-        <div class="iox-module">
-            <router-outlet></router-outlet>
-        </div>
-    </div>
-</iox-page-component>

package/src/app/app.component.scss

@@ -1,31 +0,0 @@
-@import './styles/main.scss';
-#test{
-    width: 200px;
-    height: 500px;
-    border: 1px solid #fff;
-}
-
-#main{
-    aside{
-        width: 15vw;
-        position: fixed;
-        top:0;
-        bottom:0;
-        background-color: #333;
-        ul{
-            padding: 2vh 2vw 0 2vw;
-            li{
-                margin-bottom: 3vh;
-                a{
-                    @include font-medium(0.8vw,#fff)
-                }
-            }
-        }
-        
-    }
-    .iox-module{
-        padding-top: 10vh;
-        padding-left: 20vw;
-        background: #1E1E1E;
-    }
-}

package/src/app/app.component.spec.ts

@@ -1,33 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        AppComponent
-      ]
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'iox-libs'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('iox-libs');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('iox-libs app is running!');
-  });
-});

package/src/app/app.component.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-declare const require:any;
-
-@Component({
-  selector: 'app-root',
-  standalone: false,
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-  title = 'iox-libs';
-
-  constructor(){
-  }
-
-  test(event:any){
-    console.log(event);
-  }
-}

package/src/app/app.module.ts

@@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app-routing.module';
-import { MasonryComponent } from './pages/masonry/masonry.component';
-import { AOSComponent } from './pages/aos/aos.component';
-import { AppComponent } from './app.component';
-
-
-import { ViewPositionModule,
-         IoxMasonryModule,
-         IoxPageModule,
-         IoxAosModule } from 'iox-ui';
-         
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    IoxMasonryModule,
-    IoxAosModule,
-    IoxPageModule,
-    ViewPositionModule,
-    BrowserAnimationsModule,
-  ],
-  declarations: [
-    AppComponent,
-        MasonryComponent,
-    AOSComponent
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

package/src/app/pages/aos/aos.component.html

@@ -1,35 +0,0 @@
-
-
-<div ioxAnimate class="box fixed">
-    fade up fixed out side ioxAnimateContainer
-</div>
-
-<div class="page-mask" ioxAnimateContainer [kickIn]="kickIn">
-
-            <h2 >Animation On Scroll</h2>
-        
-            <div ioxAnimate class="box"  animationDuration="1s" animationIn="fade-right">
-                Fade In Right
-            </div>
-        
-        
-            <div ioxAnimate class="box"  animationDuration="1s" animationOut="fade-out-right">
-                Fade Out Right
-            </div>
-        
-            <div class="relative">
-                <div ioxAnimate animationIn="flip-left" class="box">
-                    flip up
-                </div>
-            
-                <div  ioxAnimate animationIn="flip-up" class="box">
-                    zoom in
-                </div>
-            
-                <div ioxAnimate animationIn="zoom-in-up" class="box">
-                    fade up
-                </div>
-            </div>
-</div>
-
-

package/src/app/pages/aos/aos.component.scss

@@ -1,49 +0,0 @@
-@import '../../styles/main.scss';
-
- 
-.page{ 
-
-}
-.grid{
-    max-width: 800px;
-    margin: 0 auto;
-   }
-   .gutter-sizer{
-       width: 1%;
-   }
-   .grid-sizer,
-   .grid-item {
-     width: 24%;
-   }
-   .grid-item{
-            margin-bottom: 10px;
-       img{
-           background: #D8D5D2;
-           width: 100%;
-           border-radius: 5px;
-       }
-   }
-
-   h2{
-       @include font-bold(1.8vw,#fff);
-   }
-   .box{
-       padding: 4vw;
-       width: 350px;
-       margin: 20vh 0;
-       color: #fff;
-       background: #015BA4;
-       font-family: monospace;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-       &.fixed{
-        position:  fixed;
-        right: 5vw;
-        top: 15vh;
-       }
-   }
-
-   .relative{
-       position: relative;
-   } 

package/src/app/pages/aos/aos.component.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AOSService, IoxAosModule } from 'iox-ui'
-declare const require:any;
-
-@Component({
-  selector: 'aos',
-  standalone: false,
-  templateUrl: './aos.component.html',
-  styleUrls: ['./aos.component.scss']
-})
-export class AOSComponent {
-  title = 'iox-aos';
-  options ={};
-  collection =<any>[];
-  kickIn = false;
-  constructor(private aosService:AOSService){
-    this.options= {} 
-
-    this.aosService.scrollOffset.subscribe((offset)=>{
-      console.log(offset);
-    })
-    setTimeout(()=>{
-      this.kickIn = true;
-    },2000)
-
-
-  }
-
-}

package/src/app/pages/masonry/masonry.component.html

@@ -1,10 +0,0 @@
-
-  <h2>Viox Masonry</h2>
-
-  <div iox-masonry id="masonry" class="grid" (layoutComplete)="layoutComplete($event)" [options]="options">
-    <div ioxMasonryItem class="grid-item" *ngFor="let item of collection">
-      <img src="{{item.img}}" />
-    </div>
-
-  </div>
-

package/src/app/pages/masonry/masonry.component.scss

@@ -1,23 +0,0 @@
-@import '../../styles/main.scss';
-.grid{
-    max-width: 800px;
-    margin: 0 auto;
-   }
-   .gutter-sizer{
-       width: 1%;
-   }
-   .grid-sizer,
-   .grid-item {
-     width: 24%;
-   }
-   .grid-item{
-            margin-bottom: 10px;
-       img{
-           background: #D8D5D2;
-           width: 100%;
-           border-radius: 5px;
-       }
-   }
-h2{
-    @include font-bold(1.8vw,#fff);
-}

package/src/app/pages/masonry/masonry.component.ts

@@ -1,73 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IoxMasonryModule } from 'iox-ui';
-declare const require:any;
-
-@Component({
-  selector: 'masonry',
-  standalone: false,
-  templateUrl: './masonry.component.html',
-  styleUrls: ['./masonry.component.scss']
-})
-export class MasonryComponent {
-  title = 'iox-masonary';
-  options ={};
-  collection =<any>[];
-
-  constructor(){
-    this.options= {} 
-
-    this.collection.push({
-      head:"Elvis Presly",
-      description:`Elvis Aaron Presley (January 8, 1935 – August 16, 1977), also known mononymously as Elvis, was an American singer and actor. Regarded as one of the most significant cultural icons of the 20th century, he is often referred to as the "King of Rock and Roll" or simply "the King".`,
-      img:"./assets/images/1.jfif"
-    })
-    this.collection.push({
-        head:"Lana Del Rey",
-        description:`Elizabeth Woolridge Grant (born June 21, 1985), known professionally as Lana Del Rey, is an American singer and songwriter.`,
-        img:"./assets/images/2.jfif"
-    })
-    this.collection.push({
-        head:"Amy Winehouse",
-        description:`Amy Jade Winehouse (14 September 1983 – 23 July 2011) was an English singer and songwriter. She was known for her deep, expressive contralto vocals and her eclectic mix of musical genres.`,
-        img:"./assets/images/3.jfif"
-    })
-    this.collection.push({
-        head:"Kurt Cobain",
-        description:`Kurt Donald Cobain (February 20, 1967 – April 5, 1994) was an American singer, songwriter, and musician, best known as the guitarist and frontman of the rock band Nirvana`,
-        img:"./assets/images/4.png"
-    })
-    this.collection.push({
-      head:"Kurt Cobain",
-      description:`Kurt Donald Cobain (February 20, 1967 – April 5, 1994) was an American singer, songwriter, and musician, best known as the guitarist and frontman of the rock band Nirvana`,
-      img:"./assets/images/5.jfif"
-    })
-    this.collection.push({
-      head:"Kurt Cobain",
-      description:`Kurt Donald Cobain (February 20, 1967 – April 5, 1994) was an American singer, songwriter, and musician, best known as the guitarist and frontman of the rock band Nirvana`,
-      img:"./assets/images/6.jfif"
-    })
-    this.collection.push({
-        head:"Kurt Cobain",
-        description:`Kurt Donald Cobain (February 20, 1967 – April 5, 1994) was an American singer, songwriter, and musician, best known as the guitarist and frontman of the rock band Nirvana`,
-        img:"./assets/images/7.jfif"
-    })
-    this.collection.push({
-      head:"Kurt Cobain",
-      description:`Kurt Donald Cobain (February 20, 1967 – April 5, 1994) was an American singer, songwriter, and musician, best known as the guitarist and frontman of the rock band Nirvana`,
-      img:"./assets/images/8.jfif"
-    })
-    this.collection.push({
-        head:"Kurt Cobain",
-        description:`Kurt Donald Cobain (February 20, 1967 – April 5, 1994) was an American singer, songwriter, and musician, best known as the guitarist and frontman of the rock band Nirvana`,
-        img:"./assets/images/9.jfif"
-    })
-
-
-  }
-  
-  layoutComplete(items:any){ 
-    console.log("layout completed2 !!!");
-    console.log(items);
-  }
-}

package/src/app/styles/abstracts/variables.scss

@@ -1,5 +0,0 @@
-$brownDark: #212721;
-$white:#fff;
-$black: #000;
-$fontColor: #ebe8e3;
-$fontColorDark: #3D3935;