@vectoriox/iox-ui 4.0.3 → 4.0.4

package/angular.json

@@ -1,150 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "iox-libs": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/iox-libs",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "preserveSymlinks": true,
-            "allowedCommonJsDependencies": [
-              "@fristys/masonry"
-            ],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-
-            ]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500mb",
-                  "maximumError": "3mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "20mg",
-                  "maximumError": "40mb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "iox-libs:build:production"
-            },
-            "development": {
-              "buildTarget": "iox-libs:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "iox-libs:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    },
-    "iox-ui": {
-      "projectType": "library",
-      "root": "projects/iox-ui",
-      "sourceRoot": "projects/iox-ui/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/iox-ui/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/iox-ui/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/iox-ui/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/iox-ui/src/test.ts",
-            "tsConfig": "projects/iox-ui/tsconfig.spec.json",
-            "karmaConfig": "projects/iox-ui/karma.conf.js"
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": "b66a4539-6ed0-409d-8d9d-e057d71faadf"
-  }
-}

package/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/iox-libs'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/projects/iox-ui/.github/copilot-instructions.md

@@ -1,32 +0,0 @@
-# Copilot Instructions for iox-ui
-
-## Big Picture Architecture
-- `iox-ui` is the UI component library for the IOX design system. It provides reusable Angular components (standalone where possible), shared styles, and utilities consumed by applications and other libraries in the monorepo.
-- The library is packaged with `ng-packagr` and distributed from the `projects/iox-ui` entry.
-
-## Developer Workflows
-- Build library: `npm run build` (from `iox-ui` workspace root) or `ng build projects/iox-ui`
-- Run tests: `npm test` (Karma + Jasmine)
-- Lint/format: `npm run lint`, `npm run format`
-- Local development: use `npm link` or add the library path to `tsconfig` of consuming apps for local testing.
-
-## Project-Specific Conventions
-- Components: prefer `standalone: true` with `imports: [...]` for Angular 20 compatibility.
-- Styles: central SCSS files live under `src/app/styles/`. Migrate deprecated `@import` usages to `@use`/`@forward` when updating Sass.
-- Inputs/outputs: follow the project's naming conventions and use typed Inputs/Outputs; avoid `any` where possible.
-- Keep `peerDependencies` aligned with the workspace Angular version.
-
-## Integration Points & Data Flow
-- Consumed by applications in the monorepo (`iox-web-builder`, `iox-studio-web`, etc.) via project path mapping or npm package.
-- Components should not directly depend on application-specific services; accept configuration via inputs/providers.
-
-## Key Patterns & Examples
-- Provide small, focused components that are easy to reuse and compose.
-- Use `@angular/animation` sparingly and keep animations optional via inputs.
-
-## External Dependencies
-- Angular, PrimeNG, optional Masonry package (`@fristys/masonry`) — note CommonJS usage is allowed in `angular.json` for legacy packages.
-
----
-
-For more details, see the repository root README and the other project Copilot instruction files for examples.

package/projects/iox-ui/.releaserc.json

@@ -1,42 +0,0 @@
-{
-  "branches": ["main"],
-  "repositoryUrl": "https://github.com/vectoriox/iox-cms",
-  "plugins": [
-    [
-      "@semantic-release/commit-analyzer",
-      {
-        "preset": "conventionalcommits"
-      }
-    ],
-    [
-      "@semantic-release/release-notes-generator",
-      {
-        "preset": "conventionalcommits"
-      }
-    ],
-    [
-      "@semantic-release/changelog",
-      {
-        "changelogFile": "CHANGELOG.md"
-      }
-    ],
-    [
-      "@semantic-release/npm",
-      {
-        "npmPublish": true,
-        "pkgRoot": "dist/projects/iox-ui"
-      }
-    ],
-    "@semantic-release/github",
-    [
-      "@semantic-release/git",
-      {
-        "assets": [
-          "dist/projects/iox-ui/package.json",
-          "CHANGELOG.md"
-        ],
-        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-      }
-    ]
-  ]
-}

package/projects/iox-ui/README.md

@@ -1,149 +0,0 @@
-# iox-ui — UI component library
-
-This package contains shared UI components, directives and services used across IOX apps. It is built as an Angular library and exported from the `projects/iox-ui` package.
-
-## Overview
-- Modular components: `IoxUiModule` aggregates smaller modules (AOS, Masonry, Page, ViewPosition).
-- Individual modules are available and can be imported on demand.
-- Includes a `PageScrollProvider` service (module-scoped) that wraps the Lenis smooth-scrolling library.
-
-## Installation
-Install the library in your application or workspace (published package name: `@iox-dev/iox-ui`):
-
-```bash
-npm install @iox-dev/iox-ui
-```
-
-Note: this library depends on `lenis` for the `PageScrollProvider`. The workspace version uses `lenis` as a dependency; consumers installing the published package will get it automatically.
-
-## Public API / Exports
-The library exports (important list):
-
-- `IoxUiModule` — umbrella module that re-exports submodules
-- `IoxPageModule` / `IoxPageComponent` — page wrapper with scroll events
-- `IoxAosModule` / `iox-aos` directive and container component — animation-on-scroll helpers
-- `IoxMasonryModule` — masonry layout helpers
-- `ViewPositionModule` / `ViewPositionDirective` — viewport position utilities
-- `PageScrollProvider` service — Lenis wrapper (module-scoped)
-
-Refer to `projects/iox-ui/src/public-api.ts` for the full list of exported symbols.
-
-## Usage
-
-Import the umbrella module or individual modules in your application module:
-
-```ts
-import { IoxUiModule } from '@iox-dev/iox-ui';
-
-@NgModule({
-  imports: [IoxUiModule]
-})
-export class AppModule {}
-```
-
-Or import only the page module if you only need the page component and scroll provider:
-
-```ts
-import { IoxPageModule } from '@iox-dev/iox-ui';
-
-@NgModule({
-  imports: [IoxPageModule]
-})
-export class SomeModule {}
-```
-
-### IoxPageComponent
-- **Selector:** `iox-page-component`
-- **Inputs:**
-  - `class: string` — CSS classes applied to the outer wrapper.
-- **Outputs:**
-  - `scrollEvent` — emits an object with `scrollTop`, `scrollLeft`, `scrollHeight`, `scrollWidth`, `clientHeight`, `clientWidth`, `scrollPercentage`.
-
-Example:
-
-```html
-<iox-page-component class="my-page">
-  <div>Page content here</div>
-</iox-page-component>
-```
-
-If you need to access the scrolling API programmatically, inject `PageScrollProvider` in a component that belongs to a module that imports `IoxPageModule` (the provider is module-scoped and provided by `IoxPageModule`):
-
-```ts
-constructor(private pageScroll: PageScrollProvider) {}
-
-ngAfterViewInit() {
-  this.pageScroll.init({ wrapper: someEl });
-}
-```
-
-## Services
-
-- `PageScrollProvider` — wraps Lenis. Note: it is provided in `IoxPageModule` providers, so it's available only when the module is imported. This prevents the service from being visible globally unless explicitly included.
-
-## Development
-
-Build the workspace and library:
-
-```bash
-cd /path/to/repo/iox-ui
-npm install
-npm run build
-```
-
-Run the unit tests (if configured):
-
-```bash
-npm test
-```
-
-## Publishing
-The repo includes GitHub Actions workflows to build and publish the library. The publishing workflow will:
-
-- Build the library
-- Bump the patch version automatically
-- Commit the bumped version to `projects/iox-ui/package.json` and push to `main`
-- Publish the package to npm (requires `NPM_TOKEN` secret)
-
-If you prefer manual control of the version, use the manual publish workflow or publish locally (see `CONTRIBUTING` below).
-
-## Contributing
-
-1. Create a feature branch from `main`.
-2. Add tests and ensure `npm run build` and `npm test` pass.
-3. Open a Pull Request — CI will build the library.
-
-If you add services that should be module-scoped, register them in the module `providers` array to keep DI scoping predictable.
-
-## Troubleshooting
-
-- If you see `Cannot find module 'lenis'` at runtime, ensure `lenis` is installed in the consuming project (it should be in the published package dependencies). Locally run `npm install lenis`.
-- Sass `@import` deprecation warnings are present in the workspace styles; consider migrating to `@use`/`@forward`.
-
----
-
-For more details, inspect `projects/iox-ui/src/public-api.ts` and the module files under `projects/iox-ui/src/lib/`.
-# IoxUi
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project iox-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project iox-ui`.
-> Note: Don't forget to add `--project iox-ui` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build iox-ui` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build iox-ui`, go to the dist folder `cd dist/iox-ui` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test iox-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/iox-ui/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/iox-ui'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/projects/iox-ui/ng-package.json

@@ -1,12 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/iox-ui",
-  "assets": ["./src/js"],
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "allowedNonPeerDependencies":[
-    "@fristys/masonry"
-  ]
-  
-}

package/projects/iox-ui/package-lock.json

@@ -1,93 +0,0 @@
-{
-  "name": "@iox-dev/iox-ui",
-  "version": "1.0.9",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "@iox-dev/iox-ui",
-      "version": "1.0.9",
-      "dependencies": {
-        "@fristys/masonry": "^1.1.7",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "^17.0.0",
-        "@angular/common": "^17.0.0",
-        "@angular/core": "^17.0.0"
-      }
-    },
-    "node_modules/@angular/animations": {
-      "version": "17.3.11",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.3.11.tgz",
-      "integrity": "sha512-1y1Egag5jbdUSUWVK+KA39N9VFDrzq9ObjbAhrXFlXKa0npBRw5bprEEeLFQMETMP9Mpjbmj2PoASfl4vqj/Iw==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "17.3.11"
-      }
-    },
-    "node_modules/@angular/common": {
-      "version": "17.3.11",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.11.tgz",
-      "integrity": "sha512-WG+HQjUaQziYLGdbcv2aW+G73uroN5VF9yk4qWYcolW+VB8SV/DOAol8uFVgCF21cIOl5+wfJZvA4r5oG3dYaw==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "17.3.11",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@angular/core": {
-      "version": "17.3.11",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.11.tgz",
-      "integrity": "sha512-2wPZwXFei3kVxK2ylIH6CdGebrC4kvooFx7qoX+250OITAEFMODJGdh/e3x0DpFUjlRvQtIFQ+YpQlfC5JnL4g==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^18.13.0 || >=20.9.0"
-      },
-      "peerDependencies": {
-        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.14.0"
-      }
-    },
-    "node_modules/@fristys/masonry": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@fristys/masonry/-/masonry-1.1.7.tgz",
-      "integrity": "sha512-b/CohDq3E/NOXIlBa+b64ObmZvtjofPMLThBjDLa5gp/NCwDD6b8GoXTmMAoCwibZvIsXsgvk5JgIpE5QJg9mA=="
-    },
-    "node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
-    },
-    "node_modules/zone.js": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.7.tgz",
-      "integrity": "sha512-0w6DGkX2BPuiK/NLf+4A8FLE43QwBfuqz2dVgi/40Rj1WmqUskCqj329O/pwrqFJLG5X8wkeG2RhIAro441xtg==",
-      "peer": true
-    }
-  }
-}

package/projects/iox-ui/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@vectoriox/iox-ui",
-  "version": "4.0.3",
-  "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/animations": "^20.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "@fristys/masonry": "^1.1.7"
-  }
-}

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

@@ -1,45 +0,0 @@
-import { AnimationBuilder, style, animate, keyframes } from '@angular/animations';
-
-/**********  Entries Animations ********************/
-
-export const IoxAnimationStyles: any = {}
-
-IoxAnimationStyles["fade-up"] = (delay:string, duration:string)=>{
-    return [style({ opacity: 0, transform: "translate3d(0,100px,0)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0)" }))]
-}
-
-IoxAnimationStyles["fade-right"] = (delay:string, duration:string)=>{
-    return [style({ opacity: 0, transform: "translateX(150px)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0)" }))]
-}
-
-IoxAnimationStyles["fade-out-right"] = (delay:string, duration:string)=>{
-    return [style({ opacity: 1, transform: "translateX(0px)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 0, transform: "translateX(150px)" }))]
-}
-
-IoxAnimationStyles["fade-left"] = (delay:string, duration:string)=>{
-    return [style({ opacity: 0, transform: "translateX(-150px)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0)" }))]
-}
-
-IoxAnimationStyles["fade-out-up"] = (delay:string, duration:string)=>{
-    return [ style({ opacity: 1, transform: "translateZ(0)" }),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 0, transform: "translate3d(0,-100px,0)"}))]
-}
-
-IoxAnimationStyles["flip-left"] = (delay:string, duration:string)=>{
-    return [style({opacity: 0,transform: "perspective(2500px) rotateY(-100deg)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "perspective(2500px) rotateY(0)" }))]
-}
-
-IoxAnimationStyles["flip-up"] = (delay:string, duration:string)=>{
-    return [style({opacity: 0,transform: "perspective(2500px) rotateX(-100deg)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "perspective(2500px) rotateY(0)" }))]
-}
-
-IoxAnimationStyles["zoom-in-up"] = (delay:string, duration:string)=>{
-    return [style({opacity: 0,transform: "translate3d(0,100px,0) scale(.6)"}),
-    animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0) scale(1)" }))]
-}

package/projects/iox-ui/src/lib/iox-aos/iox-aos-container.component.ts

@@ -1,46 +0,0 @@
-import { Component, ElementRef, HostListener, Input, SimpleChanges, ViewChild } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { AOSService } from './iox-aos.service';
-
-@Component({
-    selector: "[ioxAnimateContainer], ioxAnimateContainer",
-    template:`<div class='animate_root_element' #animateRooteElement>
-        <ng-content></ng-content>
-        </div>`,
-    standalone: false
-})
-export class IoxAnimateContainer {
-
-    @Input('kickIn') kickIn = true;
-
-    private _scrollOffset:Subject<any> = new Subject();
-    public readonly scrollOffset: Observable<any> = this._scrollOffset.asObservable();
-    @ViewChild('animateRooteElement') public  animateRooteElement:any;
-    
-
-    constructor(private _element: ElementRef, private _aOSService: AOSService) {
-    }
-
-    ngAfterViewInit(){
-        this.updateOffset();
-    }
-
-    @HostListener('scroll', ['$event'])
-    public onScroll($event:any){
-        this.updateOffset();
-    }
-
-    ngOnChanges(changes: SimpleChanges) {
-        console.log(changes);
-        if(changes['kickIn'] && changes['kickIn'].currentValue){
-            this.updateOffset();
-        }
-    }
-
-
-    private updateOffset(){
-        let elClientRect = this.animateRooteElement.nativeElement.getBoundingClientRect();
-        this._scrollOffset.next(elClientRect);
-        this._aOSService.updateScrollOffset(elClientRect);
-    }
-}