├── libs ├── .gitkeep └── ngx-owl-carousel-o │ ├── src │ ├── index.ts │ ├── lib │ │ ├── styles │ │ │ ├── scss │ │ │ │ ├── owl.theme.green.scss │ │ │ │ ├── owl.theme.default.scss │ │ │ │ ├── owl.carousel.scss │ │ │ │ ├── _autoheight.scss │ │ │ │ ├── _animate.scss │ │ │ │ ├── _lazyload.scss │ │ │ │ ├── _theme.green.scss │ │ │ │ ├── _theme.default.scss │ │ │ │ ├── _video.scss │ │ │ │ ├── _theme.scss │ │ │ │ └── _core.scss │ │ │ └── prebuilt-themes │ │ │ │ ├── ajax-loader.gif │ │ │ │ ├── owl.video.play.png │ │ │ │ ├── owl.theme.default.min.css │ │ │ │ ├── owl.theme.green.min.css │ │ │ │ ├── owl.theme.green.css │ │ │ │ ├── owl.theme.default.css │ │ │ │ └── owl.carousel.min.css │ │ ├── models │ │ │ ├── SlidesOutputData.ts │ │ │ ├── stage-data.model.ts │ │ │ ├── owlDOM-data.model.ts │ │ │ ├── navigation-data.models.ts │ │ │ └── slide.model.ts │ │ ├── carousel │ │ │ ├── owl-router-link.directive.spec.ts │ │ │ ├── test │ │ │ │ └── common.ts │ │ │ ├── carousel-slide.directive.ts │ │ │ ├── carousel.module.ts │ │ │ └── owl-carousel-o-config.ts │ │ ├── ngx-owl-carousel-o.module.spec.ts │ │ ├── services │ │ │ ├── logger.service.ts │ │ │ ├── animate.service.spec.ts │ │ │ ├── lazyload.service.spec.ts │ │ │ ├── autoheight.service.spec.ts │ │ │ ├── navigation.service.spec.ts │ │ │ ├── autoplay.service.spec.ts │ │ │ ├── hash.service.spec.ts │ │ │ ├── resize.service.ts │ │ │ ├── logger.service.spec.ts │ │ │ ├── document-ref.service.ts │ │ │ ├── window-ref.service.ts │ │ │ ├── autoheight.service.ts │ │ │ ├── hash.service.ts │ │ │ └── lazyload.service.ts │ │ └── ngx-owl-carousel-o.module.ts │ ├── public_api.ts │ └── test.ts │ ├── lib │ └── styles │ │ ├── scss │ │ ├── owl.theme.green.scss │ │ ├── owl.theme.default.scss │ │ ├── owl.carousel.scss │ │ ├── _autoheight.scss │ │ ├── _animate.scss │ │ ├── _lazyload.scss │ │ ├── _theme.green.scss │ │ ├── _theme.default.scss │ │ ├── _video.scss │ │ ├── _theme.scss │ │ └── _core.scss │ │ └── prebuilt-themes │ │ ├── ajax-loader.gif │ │ ├── owl.video.play.png │ │ ├── owl.theme.green.min.css │ │ ├── owl.theme.default.min.css │ │ ├── owl.theme.green.css │ │ ├── owl.theme.default.css │ │ └── owl.carousel.min.css │ ├── ng-package.prod.json │ ├── ng-package.json │ ├── tslint.json │ ├── tsconfig.spec.json │ ├── tsconfig.json │ ├── browserslist │ ├── tsconfig.lib.json │ ├── karma.conf.js │ ├── project.json │ └── package.json ├── apps ├── .gitkeep ├── demo-owl-carousel │ ├── src │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ └── images │ │ │ │ ├── surfing.png │ │ │ │ ├── 350x250&text=4.png │ │ │ │ ├── 350x250&text=5.png │ │ │ │ ├── 350x250&text=6.png │ │ │ │ ├── 350x250&text=7.png │ │ │ │ ├── 350x250&text=8.png │ │ │ │ ├── 350x400&text=9.png │ │ │ │ ├── 350x450&text=1.png │ │ │ │ ├── 350x650&text=2.png │ │ │ │ ├── cities │ │ │ │ ├── bridge.jpg │ │ │ │ ├── town-hall.jpg │ │ │ │ ├── night-lights.jpg │ │ │ │ ├── paris-sunset.jpg │ │ │ │ ├── red-sunset.jpg │ │ │ │ ├── nigth-and-city.jpg │ │ │ │ ├── river-and-bridge.jpg │ │ │ │ ├── city-before-sunrise.jpg │ │ │ │ └── golden-gate-bridge.jpg │ │ │ │ ├── 350x400&text=10.png │ │ │ │ └── 350x250&text=3-fallback.png │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── app │ │ │ ├── link │ │ │ │ ├── link.component.sass │ │ │ │ ├── link.component.spec.ts │ │ │ │ ├── link.component.html │ │ │ │ └── link.component.ts │ │ │ ├── home │ │ │ │ ├── subhome │ │ │ │ │ ├── subhome.component.scss │ │ │ │ │ ├── subhome.component.spec.ts │ │ │ │ │ ├── subhome.component.html │ │ │ │ │ └── subhome.component.ts │ │ │ │ ├── routes.ts │ │ │ │ ├── home.component.scss │ │ │ │ ├── home.component.spec.ts │ │ │ │ └── home.component.html │ │ │ ├── present │ │ │ │ ├── present.component.sass │ │ │ │ ├── present.component.spec.ts │ │ │ │ ├── present.component.html │ │ │ │ └── present.component.ts │ │ │ ├── app.component.sass │ │ │ ├── doubled-carousel │ │ │ │ ├── doubled-carousel.component.scss │ │ │ │ ├── doubled-carousel.component.spec.ts │ │ │ │ ├── doubled-carousel.component.html │ │ │ │ └── doubled-carousel.component.ts │ │ │ ├── gallery │ │ │ │ ├── gallery.component.sass │ │ │ │ ├── gallery.component.html │ │ │ │ ├── gallery.component.spec.ts │ │ │ │ └── gallery.component.ts │ │ │ ├── app.config.ts │ │ │ ├── app.component.ts │ │ │ ├── app.routes.ts │ │ │ ├── app.component.spec.ts │ │ │ └── app.component.html │ │ ├── styles.scss │ │ ├── main.ts │ │ ├── test.ts │ │ ├── index.html │ │ ├── mat-theme.scss │ │ └── polyfills.ts │ ├── tsconfig.editor.json │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── tslint.json │ ├── tsconfig.json │ ├── browserslist │ ├── karma.conf.js │ └── project.json └── demo-owl-carousel-e2e │ ├── tsconfig.e2e.json │ ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts │ ├── tsconfig.json │ ├── project.json │ └── protractor.conf.js ├── .prettierrc ├── ngx-owl-carousel-o ├── lib │ ├── styles │ │ ├── scss │ │ │ ├── owl.theme.green.scss │ │ │ ├── owl.theme.default.scss │ │ │ ├── owl.carousel.scss │ │ │ ├── _autoheight.scss │ │ │ ├── _animate.scss │ │ │ ├── _lazyload.scss │ │ │ ├── _theme.green.scss │ │ │ ├── _theme.default.scss │ │ │ ├── _video.scss │ │ │ ├── _theme.scss │ │ │ └── _core.scss │ │ └── prebuilt-themes │ │ │ ├── ajax-loader.gif │ │ │ ├── owl.video.play.png │ │ │ ├── owl.theme.green.min.css │ │ │ ├── owl.theme.default.min.css │ │ │ ├── owl.theme.green.css │ │ │ ├── owl.theme.default.css │ │ │ └── owl.carousel.min.css │ ├── models │ │ ├── SlidesOutputData.d.ts │ │ ├── stage-data.model.d.ts │ │ ├── owlDOM-data.model.d.ts │ │ ├── navigation-data.models.d.ts │ │ └── slide.model.d.ts │ ├── services │ │ ├── logger.service.d.ts │ │ ├── resize.service.d.ts │ │ ├── autoheight.service.d.ts │ │ ├── lazyload.service.d.ts │ │ ├── animate.service.d.ts │ │ ├── hash.service.d.ts │ │ ├── window-ref.service.d.ts │ │ ├── document-ref.service.d.ts │ │ ├── autoplay.service.d.ts │ │ └── navigation.service.d.ts │ └── carousel │ │ ├── carousel.module.d.ts │ │ ├── carousel-slide.directive.d.ts │ │ └── owl-carousel-o-config.d.ts ├── .npmignore ├── public_api.d.ts └── package.json ├── .prettierignore ├── .vscode └── extensions.json ├── .env ├── tools └── tsconfig.tools.json ├── .editorconfig ├── tsconfig.base.json ├── debug.log ├── .gitignore ├── LICENSE ├── tslint.json ├── nx.json ├── decorate-angular-cli.js └── package.json /libs/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public_api'; 2 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/owl.theme.green.scss: -------------------------------------------------------------------------------- 1 | @import "theme.green"; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/owl.theme.green.scss: -------------------------------------------------------------------------------- 1 | @import "theme.green"; -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/owl.theme.default.scss: -------------------------------------------------------------------------------- 1 | @import "theme.default"; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/owl.theme.default.scss: -------------------------------------------------------------------------------- 1 | @import "theme.default"; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/owl.theme.green.scss: -------------------------------------------------------------------------------- 1 | @import "theme.green"; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/owl.theme.default.scss: -------------------------------------------------------------------------------- 1 | @import "theme.default"; -------------------------------------------------------------------------------- /ngx-owl-carousel-o/.npmignore: -------------------------------------------------------------------------------- 1 | # Nested package.json's are only needed for development. 2 | **/package.json -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /.nx/cache 4 | /.nx/workspace-data -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/owl.carousel.scss: -------------------------------------------------------------------------------- 1 | @import 'core'; 2 | @import 'animate'; 3 | @import 'autoheight'; 4 | @import 'lazyload'; 5 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/favicon.ico -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/owl.carousel.scss: -------------------------------------------------------------------------------- 1 | @import 'core'; 2 | @import 'animate'; 3 | @import 'autoheight'; 4 | @import 'lazyload'; 5 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/owl.carousel.scss: -------------------------------------------------------------------------------- 1 | @import 'core'; 2 | @import 'animate'; 3 | @import 'autoheight'; 4 | @import 'lazyload'; 5 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/link/link.component.sass: -------------------------------------------------------------------------------- 1 | .outer-link 2 | display: block 3 | border: 1px solid #000 4 | span 5 | display: inline-block 6 | width: 100% -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/surfing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/surfing.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/subhome/subhome.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .subhome-section { 6 | height: 300px; 7 | background-color: #f3f3f3; 8 | } -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/present/present.component.sass: -------------------------------------------------------------------------------- 1 | .slider 2 | height: 100px 3 | border-right: 1px solid #fff 4 | background-color: rgba(#000, 0.2) 5 | text-align: center 6 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x250&text=4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x250&text=4.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x250&text=5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x250&text=5.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x250&text=6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x250&text=6.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x250&text=7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x250&text=7.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x250&text=8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x250&text=8.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x400&text=9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x400&text=9.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x450&text=1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x450&text=1.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x650&text=2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x650&text=2.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/bridge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/bridge.jpg -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x400&text=10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x400&text=10.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/town-hall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/town-hall.jpg -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/ngx-owl-carousel-o/lib/styles/prebuilt-themes/ajax-loader.gif -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/night-lights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/night-lights.jpg -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/paris-sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/paris-sunset.jpg -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/red-sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/red-sunset.jpg -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.video.play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.video.play.png -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nrwl.angular-console", 4 | "angular.ng-template", 5 | "esbenp.prettier-vscode", 6 | "firsttris.vscode-jest-runner" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/nigth-and-city.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/nigth-and-city.jpg -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/ajax-loader.gif -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/350x250&text=3-fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/350x250&text=3-fallback.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/river-and-bridge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/river-and-bridge.jpg -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.video.play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.video.play.png -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/city-before-sunrise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/city-before-sunrise.jpg -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/assets/images/cities/golden-gate-bridge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/apps/demo-owl-carousel/src/assets/images/cities/golden-gate-bridge.jpg -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/ajax-loader.gif -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.video.play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitalii-andriiovskyi/ngx-owl-carousel-o/HEAD/libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.video.play.png -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | # Nx 18 enables using plugins to infer targets by default 2 | # This is disabled for existing workspaces to maintain compatibility 3 | # For more info, see: https://nx.dev/concepts/inferred-tasks 4 | NX_ADD_PLUGINS=false -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/app.component.sass: -------------------------------------------------------------------------------- 1 | .slider 2 | // height: 60px 3 | border-right: 1px solid #fff 4 | background-color: rgba(#000, 0.2) 5 | text-align: center 6 | 7 | .navbar-brand 8 | font-size: 2em 9 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel-e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": ["jasmine", "jasminewd2", "node"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/tsconfig.editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["**/*.ts"], 4 | "angularCompilerOptions": { 5 | "strictTemplates": true 6 | }, 7 | "compilerOptions": { 8 | "types": ["jasmine", "node"] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/models/SlidesOutputData.d.ts: -------------------------------------------------------------------------------- 1 | import { SlideModel } from './slide.model'; 2 | /** 3 | * Data which will be passed out after ending of transition of carousel 4 | */ 5 | export declare class SlidesOutputData { 6 | startPosition?: number; 7 | slides?: SlideModel[]; 8 | } 9 | -------------------------------------------------------------------------------- /tools/tsconfig.tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../dist/out-tsc", 5 | "rootDir": ".", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": ["jasmine", "node"] 9 | }, 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel-e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('owl-carousel-libdemo-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/models/SlidesOutputData.ts: -------------------------------------------------------------------------------- 1 | import { SlideModel } from './slide.model'; 2 | 3 | /** 4 | * Data which will be passed out after ending of transition of carousel 5 | */ 6 | 7 | export class SlidesOutputData { 8 | startPosition?: number; 9 | slides?: SlideModel[]; 10 | }; 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel-e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "types": ["jasmine", "jasminewd2", "node"] 5 | }, 6 | "files": [], 7 | "include": [], 8 | "references": [ 9 | { 10 | "path": "./tsconfig.e2e.json" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/doubled-carousel/doubled-carousel.component.scss: -------------------------------------------------------------------------------- 1 | .content-second-carousel { 2 | padding: 30px 0; 3 | border: 1px solid #000; 4 | text-align: center; 5 | background-color: rgba(#ff0, 0.8); 6 | } 7 | 8 | .category { 9 | border: 1px solid red; 10 | text-align: center; 11 | } -------------------------------------------------------------------------------- /apps/demo-owl-carousel/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": [], 6 | "target": "ES2022", 7 | "useDefineForClassFields": false 8 | }, 9 | "files": ["src/main.ts", "src/polyfills.ts"], 10 | "include": ["**/*.d.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_autoheight.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Auto Height Plugin 3 | */ 4 | 5 | .owl-height { 6 | transition: height .5s ease-in-out, max-height 0.35s ease-in-out; 7 | 8 | &.height-0 { 9 | max-height: 0; 10 | transition-duration: 700ms; 11 | } 12 | 13 | &.height-full { 14 | max-height: 2000px; 15 | } 16 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_autoheight.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Auto Height Plugin 3 | */ 4 | 5 | .owl-height { 6 | transition: height .5s ease-in-out, max-height 0.35s ease-in-out; 7 | 8 | &.height-0 { 9 | max-height: 0; 10 | transition-duration: 700ms; 11 | } 12 | 13 | &.height-full { 14 | max-height: 2000px; 15 | } 16 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_autoheight.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Auto Height Plugin 3 | */ 4 | 5 | .owl-height { 6 | transition: height .5s ease-in-out, max-height 0.35s ease-in-out; 7 | 8 | &.height-0 { 9 | max-height: 0; 10 | transition-duration: 700ms; 11 | } 12 | 13 | &.height-full { 14 | max-height: 2000px; 15 | } 16 | } -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/gallery/gallery.component.sass: -------------------------------------------------------------------------------- 1 | .slide 2 | position: relative 3 | transform-origin: center 4 | transform: scale(0.7) 5 | opacity: 0.8 6 | transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out 7 | &.active 8 | transform: scale(1.4) 9 | opacity: 1 10 | 11 | .wrapper 12 | max-width: 800px 13 | margin: 0 auto -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/carousel/owl-router-link.directive.spec.ts: -------------------------------------------------------------------------------- 1 | // import { OwlRouterLinkDirective } from './owl-router-link.directive'; 2 | 3 | // describe('OwlRouterLinkDirective', () => { 4 | // it('should create an instance', () => { 5 | // const directive = new OwlRouterLinkDirective(); 6 | // expect(directive).toBeTruthy(); 7 | // }); 8 | // }); 9 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/public_api.d.ts: -------------------------------------------------------------------------------- 1 | export { CarouselModule, CarouselComponent, CarouselSlideDirective, SlidesOutputData, OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective } from './lib/carousel/carousel.module'; 2 | export { OwlOptions, ResponsiveSettings, BreakpointOptions } from './lib/models/owl-options.model'; 3 | export { SlideModel } from './lib/models/slide.model'; 4 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/lib", 4 | "lib": { 5 | "entryFile": "src/index.ts" 6 | }, 7 | "assets": [ 8 | "./lib/styles/**/*.scss", 9 | "./lib/styles/**/*.css", 10 | "./lib/styles/**/*.gif", 11 | "./lib/styles/**/*.png" 12 | ] 13 | } -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/styles.scss: -------------------------------------------------------------------------------- 1 | @use 'bootstrap/scss/bootstrap'; 2 | @use './mat-theme'; 3 | 4 | /* You can add global styles to this file, and also import other style files */ 5 | .owl-theme .active .slider { 6 | background-color: red; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | font-family: Roboto, "Helvetica Neue", sans-serif; 17 | } -------------------------------------------------------------------------------- /apps/demo-owl-carousel/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["jasmine", "node"], 6 | "target": "ES2022", 7 | "useDefineForClassFields": false, 8 | "isolatedModules": true 9 | }, 10 | "files": ["src/test.ts", "src/polyfills.ts"], 11 | "include": ["**/*.spec.ts", "**/*.d.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel-e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to owl-carousel-libdemo!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../ngx-owl-carousel-o", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/index.ts" 7 | }, 8 | "assets": [ 9 | "./lib/styles/**/*.scss", 10 | "./lib/styles/**/*.css", 11 | "./lib/styles/**/*.gif", 12 | "./lib/styles/**/*.png" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/carousel/test/common.ts: -------------------------------------------------------------------------------- 1 | import {TestBed, ComponentFixture} from '@angular/core/testing'; 2 | 3 | export function createGenericTestComponent(html: string, type: {new (...args: any[]): T}): ComponentFixture { 4 | TestBed.overrideComponent(type, {set: {template: html}}); 5 | const fixture = TestBed.createComponent(type); 6 | fixture.detectChanges(); 7 | return fixture as ComponentFixture; 8 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/public_api.ts: -------------------------------------------------------------------------------- 1 | export { 2 | CarouselModule, 3 | CarouselComponent, 4 | CarouselSlideDirective, 5 | SlidesOutputData, 6 | OwlRouterLinkDirective, 7 | OwlRouterLinkWithHrefDirective 8 | } from './lib/carousel/carousel.module'; 9 | 10 | export { 11 | OwlOptions, ResponsiveSettings, BreakpointOptions 12 | } from './lib/models/owl-options.model'; 13 | 14 | export { SlideModel } from './lib/models/slide.model'; -------------------------------------------------------------------------------- /apps/demo-owl-carousel/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "owl-carousel-libdemo", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "owl-carousel-libdemo", 14 | "kebab-case" 15 | ] 16 | }, 17 | "linterOptions": { 18 | "exclude": ["!**/*"] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "owl-carousel-libdemo", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "owl-carousel-libdemo", 14 | "kebab-case" 15 | ] 16 | }, 17 | "linterOptions": { 18 | "exclude": ["!**/*"] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": ["jasmine", "node"], 6 | "target": "ES2022", 7 | "useDefineForClassFields": false, 8 | "isolatedModules": true 9 | }, 10 | "angularCompilerOptions": { 11 | "strictTemplates": true 12 | }, 13 | "files": ["src/test.ts"], 14 | "include": ["**/*.spec.ts", "**/*.d.ts"] 15 | } 16 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | import { provideClientHydration } from '@angular/platform-browser'; 6 | import { provideAnimations } from '@angular/platform-browser/animations'; 7 | 8 | export const appConfig: ApplicationConfig = { 9 | providers: [provideRouter(routes), provideClientHydration(), provideAnimations()] 10 | }; 11 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "types": ["jasmine", "node"], 5 | "target": "es2020", 6 | "module": "preserve", 7 | "moduleResolution": "bundler", 8 | "lib": ["dom", "es2022"] 9 | }, 10 | "files": [], 11 | "include": [], 12 | "references": [ 13 | { 14 | "path": "./tsconfig.lib.json" 15 | }, 16 | { 17 | "path": "./tsconfig.spec.json" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_animate.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Animate Plugin 3 | */ 4 | .owl-carousel{ 5 | .animated { 6 | animation-duration: 1000ms; 7 | animation-fill-mode: both; 8 | } 9 | .owl-animated-in { 10 | z-index: 0; 11 | } 12 | .owl-animated-out { 13 | z-index: 1; 14 | } 15 | .fadeOut { 16 | animation-name: fadeOut; 17 | } 18 | } 19 | 20 | @keyframes fadeOut { 21 | 0% { 22 | opacity: 1; 23 | } 24 | 25 | 100% { 26 | opacity: 0; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_animate.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Animate Plugin 3 | */ 4 | .owl-carousel{ 5 | .animated { 6 | animation-duration: 1000ms; 7 | animation-fill-mode: both; 8 | } 9 | .owl-animated-in { 10 | z-index: 0; 11 | } 12 | .owl-animated-out { 13 | z-index: 1; 14 | } 15 | .fadeOut { 16 | animation-name: fadeOut; 17 | } 18 | } 19 | 20 | @keyframes fadeOut { 21 | 0% { 22 | opacity: 1; 23 | } 24 | 25 | 100% { 26 | opacity: 0; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/routes.ts: -------------------------------------------------------------------------------- 1 | import { Route } from "@angular/router"; 2 | import { HomeComponent } from "./home.component"; 3 | 4 | export default [ 5 | { 6 | path: 'home', 7 | component: HomeComponent, 8 | children: [ 9 | { path: 'subhome', loadComponent: () => import("./subhome/subhome.component").then(mod => mod.SubhomeComponent) } 10 | ] 11 | }, 12 | { 13 | path: '', 14 | redirectTo: '/home', 15 | pathMatch: 'full' 16 | } 17 | ] satisfies Route[]; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_animate.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Animate Plugin 3 | */ 4 | .owl-carousel{ 5 | .animated { 6 | animation-duration: 1000ms; 7 | animation-fill-mode: both; 8 | } 9 | .owl-animated-in { 10 | z-index: 0; 11 | } 12 | .owl-animated-out { 13 | z-index: 1; 14 | } 15 | .fadeOut { 16 | animation-name: fadeOut; 17 | } 18 | } 19 | 20 | @keyframes fadeOut { 21 | 0% { 22 | opacity: 1; 23 | } 24 | 25 | 100% { 26 | opacity: 0; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/home.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .slider { 6 | height: 60px; 7 | border-right: 1px solid #fff; 8 | background-color: rgba(#000, 0.2); 9 | text-align: center; 10 | } 11 | 12 | 13 | ::ng-deep .owl-theme .owl-dots .owl-dot span { 14 | background: pink !important; 15 | width: 40px !important; 16 | } 17 | 18 | .owl-theme .owl-dots .owl-dot.active span, 19 | .owl-theme .owl-dots .owl-dot:hover span { 20 | background: red !important; 21 | } -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/logger.service.d.ts: -------------------------------------------------------------------------------- 1 | import { ErrorHandler } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | export declare class OwlLogger { 4 | private errorHandler; 5 | constructor(errorHandler: ErrorHandler); 6 | log(value: any, ...rest: any[]): void; 7 | error(error: Error): void; 8 | warn(value: any, ...rest: any[]): void; 9 | static ɵfac: i0.ɵɵFactoryDeclaration; 10 | static ɵprov: i0.ɵɵInjectableDeclaration; 11 | } 12 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/ngx-owl-carousel-o.module.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { NgxOwlCarouselOModule } from './ngx-owl-carousel-o.module'; 3 | 4 | describe('NgxOwlCarouselOModule', () => { 5 | beforeEach( 6 | waitForAsync(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [NgxOwlCarouselOModule] 9 | }).compileComponents(); 10 | }) 11 | ); 12 | 13 | it('should create', () => { 14 | expect(NgxOwlCarouselOModule).toBeDefined(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel-e2e/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-owl-carousel-e2e", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "projectType": "application", 5 | "targets": { 6 | "e2e": { 7 | "executor": "@angular-devkit/build-angular:protractor", 8 | "options": { 9 | "protractorConfig": "apps/demo-owl-carousel-e2e/protractor.conf.js", 10 | "devServerTarget": "demo-owl-carousel:serve" 11 | } 12 | } 13 | }, 14 | "tags": [], 15 | "implicitDependencies": ["demo-owl-carousel"] 16 | } 17 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "types": ["jasmine", "node"], 5 | "target": "es2020", 6 | "module": "preserve", 7 | "moduleResolution": "bundler", 8 | "lib": ["dom", "es2022"] 9 | }, 10 | "files": [], 11 | "include": [], 12 | "references": [ 13 | { 14 | "path": "./tsconfig.app.json" 15 | }, 16 | { 17 | "path": "./tsconfig.spec.json" 18 | }, 19 | { 20 | "path": "./tsconfig.editor.json" 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/logger.service.ts: -------------------------------------------------------------------------------- 1 | import { ErrorHandler, Injectable, isDevMode } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class OwlLogger { 5 | 6 | constructor(private errorHandler: ErrorHandler) {} 7 | 8 | log(value: any, ...rest: any[]) { 9 | if (isDevMode()) { 10 | console.log(value, ...rest); 11 | } 12 | } 13 | 14 | error(error: Error) { 15 | this.errorHandler.handleError(error); 16 | } 17 | 18 | warn(value: any, ...rest: any[]) { 19 | console.warn(value, ...rest); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "declaration": false, 6 | "moduleResolution": "node", 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "target": "es5", 10 | "typeRoots": ["node_modules/@types"], 11 | "lib": ["es2017", "dom"], 12 | "baseUrl": ".", 13 | "paths": { 14 | "ngx-owl-carousel-o": ["libs/ngx-owl-carousel-o/src/index.ts"] 15 | }, 16 | "module": "esnext", 17 | "rootDir": "." 18 | }, 19 | "exclude": ["node_modules", "tmp"] 20 | } 21 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/gallery/gallery.component.html: -------------------------------------------------------------------------------- 1 |

Cities Gallery

2 | 3 |
4 | 5 | @for(image of imagesData; track image.src) { 6 | 7 |
8 | 10 | 11 |
12 | 13 | } 14 | 15 | 16 |
-------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode, provideZoneChangeDetection } from '@angular/core'; 2 | 3 | import { bootstrapApplication } from '@angular/platform-browser'; 4 | import { appConfig } from './app/app.config'; 5 | import { AppComponent } from './app/app.component'; 6 | 7 | import { environment } from './environments/environment'; 8 | 9 | if (environment.production) { 10 | enableProdMode(); 11 | } 12 | 13 | bootstrapApplication(AppComponent, { ...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers] }) 14 | .catch((err) => console.error(err)); 15 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/resize.service.d.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | import * as i0 from "@angular/core"; 3 | export declare class ResizeService { 4 | private resizeObservable$; 5 | private docRef; 6 | /** 7 | * Makes resizeSubject become Observable 8 | * @returns Observable of resizeSubject 9 | */ 10 | get onResize$(): Observable; 11 | constructor(winRef: any, docRef: any, platformId: Object); 12 | static ɵfac: i0.ɵɵFactoryDeclaration; 13 | static ɵprov: i0.ɵɵInjectableDeclaration; 14 | } 15 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting, 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting(), 14 | { 15 | teardown: { destroyAfterEach: false }, 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0817/221551.002:ERROR:file_io_win.cc(170)] CreateFile C:\Users\Vitalik\AppData\Local\Temp\karma-95081118\Crashpad\reports\9dc1ce0a-ac65-4c61-a50c-ec7e454b9017.dmp: The system cannot find the path specified. (0x3) 2 | [0817/221551.003:ERROR:crash_report_exception_handler.cc(97)] PrepareNewCrashReport failed 3 | [0820/224634.525:ERROR:file_io_win.cc(170)] CreateFile C:\Users\Vitalik\AppData\Local\Temp\karma-12239052\Crashpad\reports\2f9c28c0-aad4-4a88-94db-193db00a2aaf.dmp: The system cannot find the path specified. (0x3) 4 | [0820/224634.526:ERROR:crash_report_exception_handler.cc(97)] PrepareNewCrashReport failed 5 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/models/stage-data.model.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Data model for managing classes of .owl-stage DOM element 3 | */ 4 | export class StageData { 5 | /** 6 | * Determines css-rule 'transform' 7 | */ 8 | transform: string; 9 | /** 10 | * Determines css-rule 'transition' 11 | */ 12 | transition: string; 13 | /** 14 | * Determines css-rule 'width' 15 | */ 16 | width: number | string; 17 | /** 18 | * Determines css-rule 'padding-left' 19 | */ 20 | paddingL: number | string; 21 | /** 22 | * Determines css-rule 'padding-right' 23 | */ 24 | paddingR: number | string; 25 | } -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_lazyload.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Lazy Load Plugin 3 | */ 4 | 5 | .owl-carousel { 6 | .owl-item { 7 | .owl-lazy { 8 | // opacity: 0; 9 | transition: opacity 400ms ease; 10 | } 11 | 12 | /** 13 | This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong 14 | calculation of the height of the owl-item that breaks page layouts 15 | */ 16 | .owl-lazy[src^=""], .owl-lazy:not([src]) { 17 | max-height: 0; 18 | } 19 | 20 | img.owl-lazy { 21 | transform-style: preserve-3d; 22 | } 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_lazyload.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Lazy Load Plugin 3 | */ 4 | 5 | .owl-carousel { 6 | .owl-item { 7 | .owl-lazy { 8 | // opacity: 0; 9 | transition: opacity 400ms ease; 10 | } 11 | 12 | /** 13 | This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong 14 | calculation of the height of the owl-item that breaks page layouts 15 | */ 16 | .owl-lazy[src^=""], .owl-lazy:not([src]) { 17 | max-height: 0; 18 | } 19 | 20 | img.owl-lazy { 21 | transform-style: preserve-3d; 22 | } 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_lazyload.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Lazy Load Plugin 3 | */ 4 | 5 | .owl-carousel { 6 | .owl-item { 7 | .owl-lazy { 8 | // opacity: 0; 9 | transition: opacity 400ms ease; 10 | } 11 | 12 | /** 13 | This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong 14 | calculation of the height of the owl-item that breaks page layouts 15 | */ 16 | .owl-lazy[src^=""], .owl-lazy:not([src]) { 17 | max-height: 0; 18 | } 19 | 20 | img.owl-lazy { 21 | transform-style: preserve-3d; 22 | } 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/animate.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { AnimateService } from './animate.service'; 4 | import { CarouselService } from './carousel.service'; 5 | import { OwlLogger } from './logger.service'; 6 | 7 | describe('AnimateService', () => { 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [AnimateService, CarouselService, OwlLogger] 11 | }); 12 | }); 13 | 14 | it('should be created', inject([AnimateService], (service: AnimateService) => { 15 | expect(service).toBeTruthy(); 16 | })); 17 | }); 18 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | last 1 Chrome version 6 | last 1 Firefox version 7 | last 2 Edge major versions 8 | # last 2 Safari major versions 9 | # last 2 iOS major versions 10 | Firefox ESR 11 | not IE 11 12 | not chrome 113 13 | not chrome 112 14 | not edge 113 15 | not edge 112 16 | not firefox 112 17 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | last 1 Chrome version 6 | last 1 Firefox version 7 | last 2 Edge major versions 8 | # last 2 Safari major versions 9 | # last 2 iOS major versions 10 | Firefox ESR 11 | not IE 11 12 | not chrome 113 13 | not chrome 112 14 | not edge 113 15 | not edge 112 16 | not firefox 112 17 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/lazyload.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { LazyLoadService } from './lazyload.service'; 4 | import { CarouselService } from './carousel.service'; 5 | import { OwlLogger } from './logger.service'; 6 | 7 | describe('LazyloadService', () => { 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [LazyLoadService, CarouselService, OwlLogger] 11 | }); 12 | }); 13 | 14 | it('should be created', inject([LazyLoadService], (service: LazyLoadService) => { 15 | expect(service).toBeTruthy(); 16 | })); 17 | }); 18 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/autoheight.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { AutoHeightService } from './autoheight.service'; 4 | import { CarouselService } from './carousel.service'; 5 | import { OwlLogger } from './logger.service'; 6 | 7 | describe('AutoheightService', () => { 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [AutoHeightService, CarouselService, OwlLogger] 11 | }); 12 | }); 13 | 14 | it('should be created', inject([AutoHeightService], (service: AutoHeightService) => { 15 | expect(service).toBeTruthy(); 16 | })); 17 | }); 18 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/navigation.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { NavigationService } from './navigation.service'; 4 | import { CarouselService } from './carousel.service'; 5 | import { OwlLogger } from './logger.service'; 6 | 7 | describe('NavigationService', () => { 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [NavigationService, CarouselService, OwlLogger] 11 | }); 12 | }); 13 | 14 | it('should be created', inject([NavigationService], (service: NavigationService) => { 15 | expect(service).toBeTruthy(); 16 | })); 17 | }); 18 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | // import 'core-js/es7/reflect'; 4 | import 'zone.js'; 5 | import 'zone.js/testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting, 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting(), 16 | { 17 | teardown: { destroyAfterEach: false }, 18 | } 19 | ); 20 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/models/stage-data.model.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Data model for managing classes of .owl-stage DOM element 3 | */ 4 | export declare class StageData { 5 | /** 6 | * Determines css-rule 'transform' 7 | */ 8 | transform: string; 9 | /** 10 | * Determines css-rule 'transition' 11 | */ 12 | transition: string; 13 | /** 14 | * Determines css-rule 'width' 15 | */ 16 | width: number | string; 17 | /** 18 | * Determines css-rule 'padding-left' 19 | */ 20 | paddingL: number | string; 21 | /** 22 | * Determines css-rule 'padding-right' 23 | */ 24 | paddingR: number | string; 25 | } 26 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | import { CarouselModule } from 'ngx-owl-carousel-o'; 5 | 6 | export interface CarouselData { 7 | id?: string; 8 | text: string; 9 | dataMerge?: number; 10 | width?: number; 11 | dotContent?: string; 12 | src?: string; 13 | dataHash?: string; 14 | } 15 | 16 | @Component({ 17 | selector: 'owl-carousel-libdemo-root', 18 | imports: [RouterOutlet, CarouselModule, RouterLink], 19 | templateUrl: './app.component.html', 20 | styleUrls: ['./app.component.sass'] 21 | }) 22 | export class AppComponent { 23 | } 24 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoOwlCarousel 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [HomeComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(HomeComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/link/link.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LinkComponent } from './link.component'; 4 | 5 | describe('LinkComponent', () => { 6 | let component: LinkComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [LinkComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(LinkComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.angular/cache 29 | /.sass-cache 30 | /connect.lock 31 | /coverage 32 | /libpeerconnection.log 33 | npm-debug.log 34 | yarn-error.log 35 | testem.log 36 | /typings 37 | 38 | # System Files 39 | .DS_Store 40 | Thumbs.db 41 | 42 | .nx/cache 43 | .nx/workspace-data -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/gallery/gallery.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { GalleryComponent } from './gallery.component'; 4 | 5 | describe('GalleryComponent', () => { 6 | let component: GalleryComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [GalleryComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(GalleryComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/present/present.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PresentComponent } from './present.component'; 4 | 5 | describe('PresentComponent', () => { 6 | let component: PresentComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [PresentComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(PresentComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/subhome/subhome.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SubhomeComponent } from './subhome.component'; 4 | 5 | describe('SubhomeComponent', () => { 6 | let component: SubhomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [SubhomeComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(SubhomeComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/autoplay.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { AutoplayService } from './autoplay.service'; 4 | import { DOCUMENT_PROVIDERS } from './document-ref.service'; 5 | import { WINDOW_PROVIDERS } from './window-ref.service'; 6 | import { CarouselService } from './carousel.service'; 7 | import { OwlLogger } from './logger.service'; 8 | 9 | describe('AutoplayService', () => { 10 | beforeEach(() => { 11 | TestBed.configureTestingModule({ 12 | providers: [AutoplayService, DOCUMENT_PROVIDERS, WINDOW_PROVIDERS, CarouselService, OwlLogger] 13 | }); 14 | }); 15 | 16 | it('should be created', inject([AutoplayService], (service: AutoplayService) => { 17 | expect(service).toBeTruthy(); 18 | })); 19 | }); 20 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: '', 6 | loadChildren: () => import('./home/routes') 7 | }, 8 | { 9 | path: 'present', 10 | loadComponent: () => import('./present/present.component').then(m => m.PresentComponent) 11 | }, 12 | { 13 | path: 'doubled-carousel', 14 | loadComponent: () => import('./doubled-carousel/doubled-carousel.component').then(m => m.DoubledCarouselComponent) 15 | }, 16 | { 17 | path: 'gallery-carousel', 18 | loadComponent: () => import('./gallery/gallery.component').then(m => m.GalleryComponent) 19 | }, 20 | { 21 | path: 'link-comp', 22 | loadComponent: () => import('./link/link.component').then(m => m.LinkComponent) 23 | } 24 | ]; 25 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/doubled-carousel/doubled-carousel.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DoubledCarouselComponent } from './doubled-carousel.component'; 4 | 5 | describe('DoubledCarouselComponent', () => { 6 | let component: DoubledCarouselComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [DoubledCarouselComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(DoubledCarouselComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_theme.green.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Green theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #4DC7A0 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; 31 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel-e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_theme.green.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Green theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #4DC7A0 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; 31 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_theme.default.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Default theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #869791 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; 31 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_theme.default.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Default theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #869791 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; 31 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_theme.green.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Green theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #4DC7A0 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; 31 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_theme.default.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Default theme - Owl Carousel CSS File 3 | */ 4 | 5 | $color-base: #869791 !default; 6 | $color-white: #FFF !default; 7 | $color-gray: #D6D6D6 !default; 8 | 9 | //nav 10 | 11 | $nav-color: $color-white !default; 12 | $nav-color-hover: $color-white !default; 13 | $nav-font-size: 14px !default; 14 | $nav-rounded: 3px !default; 15 | $nav-margin: 5px !default; 16 | $nav-padding: 4px 7px !default; 17 | $nav-background: $color-gray !default; 18 | $nav-background-hover: $color-base !default; 19 | $nav-disabled-opacity: 0.5 !default; 20 | 21 | //dots 22 | 23 | $dot-width: 10px !default; 24 | $dot-height: 10px !default; 25 | $dot-rounded: 30px !default; 26 | $dot-margin: 5px 7px !default; 27 | $dot-background: $color-gray !default; 28 | $dot-background-active: $color-base !default; 29 | 30 | @import 'theme'; 31 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/autoheight.service.d.ts: -------------------------------------------------------------------------------- 1 | import { OnDestroy } from '@angular/core'; 2 | import { Subscription } from 'rxjs'; 3 | import { CarouselService } from './carousel.service'; 4 | import * as i0 from "@angular/core"; 5 | export declare class AutoHeightService implements OnDestroy { 6 | private carouselService; 7 | /** 8 | * Subscrioption to merge Observable from CarouselService 9 | */ 10 | autoHeightSubscription: Subscription; 11 | constructor(carouselService: CarouselService); 12 | ngOnDestroy(): void; 13 | /** 14 | * Defines Observables which service must observe 15 | */ 16 | spyDataStreams(): void; 17 | /** 18 | * Updates the prop 'heightState' of slides 19 | */ 20 | update(): void; 21 | static ɵfac: i0.ɵɵFactoryDeclaration; 22 | static ɵprov: i0.ɵɵInjectableDeclaration; 23 | } 24 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "target": "ES2022", 6 | "module": "preserve", 7 | "moduleResolution": "bundler", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": ["dom", "es2022"], 16 | "useDefineForClassFields": false 17 | }, 18 | "angularCompilerOptions": { 19 | "annotateForClosureCompiler": true, 20 | "skipTemplateCodegen": true, 21 | "strictMetadataEmit": true, 22 | "fullTemplateTypeCheck": true, 23 | "strictInjectionParameters": true, 24 | "flatModuleId": "AUTOGENERATED", 25 | "flatModuleOutFile": "AUTOGENERATED" 26 | }, 27 | "exclude": ["src/test.ts", "**/*.spec.ts"] 28 | } 29 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/models/owlDOM-data.model.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Data model for managing classes of .owl-carousel DOM element 3 | */ 4 | export class OwlDOMData { 5 | /** 6 | * Defines whether to set class .owl-rtl or not 7 | */ 8 | rtl: boolean; 9 | /** 10 | * Defines whether to set class .owl-responsive or not 11 | */ 12 | isResponsive: boolean; 13 | /** 14 | * Defines whether to set class .owl-refreshed or not 15 | */ 16 | isRefreshed: boolean; 17 | /** 18 | * Defines whether to set class .owl-loaded or not 19 | */ 20 | isLoaded: boolean; 21 | /** 22 | * Defines whether to set class .owl-loading or not 23 | */ 24 | isLoading: boolean; 25 | /** 26 | * Defines whether to set class .owl-drag or not and makes carousel draggable by mouse moving 27 | */ 28 | isMouseDragable: boolean; 29 | /** 30 | * Makes carousel draggable by touch moving 31 | */ 32 | isTouchDragable: boolean; 33 | /** 34 | * Defines whether to set class .owl-grab or not 35 | */ 36 | isGrab: boolean; 37 | } -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/lazyload.service.d.ts: -------------------------------------------------------------------------------- 1 | import { OnDestroy } from '@angular/core'; 2 | import { Subscription } from 'rxjs'; 3 | import { CarouselService } from './carousel.service'; 4 | import * as i0 from "@angular/core"; 5 | export declare class LazyLoadService implements OnDestroy { 6 | private carouselService; 7 | /** 8 | * Subscrioption to merge Observable from CarouselService 9 | */ 10 | lazyLoadSubscription: Subscription; 11 | constructor(carouselService: CarouselService); 12 | ngOnDestroy(): void; 13 | /** 14 | * Defines Observables which service must observe 15 | */ 16 | spyDataStreams(): void; 17 | private _defineLazyLoadSlides; 18 | /** 19 | * Loads all resources of an item at the specified position. 20 | * @param position - The absolute position of the item. 21 | */ 22 | private _load; 23 | static ɵfac: i0.ɵɵFactoryDeclaration; 24 | static ɵprov: i0.ɵɵInjectableDeclaration; 25 | } 26 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/hash.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { HashService } from './hash.service'; 4 | import { Component } from '@angular/core'; 5 | import { CarouselService } from './carousel.service'; 6 | import { OwlLogger } from './logger.service'; 7 | import { RouterModule } from '@angular/router'; 8 | 9 | describe('HashService', () => { 10 | beforeEach(() => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | RouterModule.forRoot([{ path: '', component: TestComponent }]) 14 | ], 15 | declarations: [TestComponent], 16 | providers: [HashService, CarouselService, OwlLogger] 17 | }); 18 | }); 19 | 20 | it('should be created', inject([HashService], (service: HashService) => { 21 | expect(service).toBeTruthy(); 22 | })); 23 | }); 24 | 25 | @Component({ 26 | selector: 'test-dom', 27 | template: '', 28 | standalone: false 29 | }) 30 | class TestComponent { 31 | options: any = {}; 32 | constructor() { } 33 | } 34 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/link/link.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Link Component

4 |

owlRouterLink

5 |
6 |
7 |
8 |
9 | 10 | 11 | 12 | @for(item of carouselData; track item.text; let i = $index) { 13 | 14 |
15 | {{item.text}} 16 | 17 | {{item.text}} 18 | 19 | 20 |
21 | 22 | } 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 |
32 |
-------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/ngx-owl-carousel-o.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CarouselModule } from './carousel/carousel.module'; 4 | import { WINDOW_PROVIDERS } from './services/window-ref.service'; 5 | import { ResizeService } from './services/resize.service'; 6 | import { OwlLogger } from './services/logger.service'; 7 | 8 | export { 9 | CarouselModule, 10 | CarouselComponent, 11 | CarouselSlideDirective, 12 | SlidesOutputData, OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective 13 | } from './carousel/carousel.module'; 14 | export { ResizeService } from './services/resize.service'; 15 | export { 16 | WindowRef, 17 | BrowserWindowRef, 18 | WINDOW, 19 | windowFactory, 20 | browserWindowProvider, 21 | windowProvider, 22 | WINDOW_PROVIDERS 23 | } from './services/window-ref.service'; 24 | 25 | @NgModule({ 26 | imports: [CommonModule, CarouselModule], 27 | exports: [CarouselModule], 28 | providers: [WINDOW_PROVIDERS, ResizeService, OwlLogger] 29 | }) 30 | export class NgxOwlCarouselOModule {} 31 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/models/owlDOM-data.model.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Data model for managing classes of .owl-carousel DOM element 3 | */ 4 | export declare class OwlDOMData { 5 | /** 6 | * Defines whether to set class .owl-rtl or not 7 | */ 8 | rtl: boolean; 9 | /** 10 | * Defines whether to set class .owl-responsive or not 11 | */ 12 | isResponsive: boolean; 13 | /** 14 | * Defines whether to set class .owl-refreshed or not 15 | */ 16 | isRefreshed: boolean; 17 | /** 18 | * Defines whether to set class .owl-loaded or not 19 | */ 20 | isLoaded: boolean; 21 | /** 22 | * Defines whether to set class .owl-loading or not 23 | */ 24 | isLoading: boolean; 25 | /** 26 | * Defines whether to set class .owl-drag or not and makes carousel draggable by mouse moving 27 | */ 28 | isMouseDragable: boolean; 29 | /** 30 | * Makes carousel draggable by touch moving 31 | */ 32 | isTouchDragable: boolean; 33 | /** 34 | * Defines whether to set class .owl-grab or not 35 | */ 36 | isGrab: boolean; 37 | } 38 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.green.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-carousel-inner .owl-next,.owl-theme .owl-carousel-inner .owl-prev{color:#fff;font-size:14px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-carousel-inner .owl-next:hover,.owl-theme .owl-carousel-inner .owl-prev:hover{background:#4dc7a0;color:#fff;text-decoration:none}.owl-theme .owl-carousel-inner .owl-next.disabled,.owl-theme .owl-carousel-inner .owl-prev.disabled{opacity:.5;cursor:not-allowed}.owl-theme .owl-dots{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4dc7a0} -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.green.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-carousel-inner .owl-next,.owl-theme .owl-carousel-inner .owl-prev{color:#fff;font-size:14px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-carousel-inner .owl-next:hover,.owl-theme .owl-carousel-inner .owl-prev:hover{background:#4dc7a0;color:#fff;text-decoration:none}.owl-theme .owl-carousel-inner .owl-next.disabled,.owl-theme .owl-carousel-inner .owl-prev.disabled{opacity:.5;cursor:not-allowed}.owl-theme .owl-dots{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4dc7a0} -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-carousel-inner .owl-next,.owl-theme .owl-carousel-inner .owl-prev{color:#fff;font-size:14px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-carousel-inner .owl-next:hover,.owl-theme .owl-carousel-inner .owl-prev:hover{background:#869791;color:#fff;text-decoration:none}.owl-theme .owl-carousel-inner .owl-next.disabled,.owl-theme .owl-carousel-inner .owl-prev.disabled{opacity:.5;cursor:not-allowed}.owl-theme .owl-dots{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2018 Google LLC. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-carousel-inner .owl-next,.owl-theme .owl-carousel-inner .owl-prev{color:#fff;font-size:14px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-carousel-inner .owl-next:hover,.owl-theme .owl-carousel-inner .owl-prev:hover{background:#869791;color:#fff;text-decoration:none}.owl-theme .owl-carousel-inner .owl-next.disabled,.owl-theme .owl-carousel-inner .owl-prev.disabled{opacity:.5;cursor:not-allowed}.owl-theme .owl-dots{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.theme.default.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-carousel-inner .owl-next,.owl-theme .owl-carousel-inner .owl-prev{color:#fff;font-size:14px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-carousel-inner .owl-next:hover,.owl-theme .owl-carousel-inner .owl-prev:hover{background:#869791;color:#fff;text-decoration:none}.owl-theme .owl-carousel-inner .owl-next.disabled,.owl-theme .owl-carousel-inner .owl-prev.disabled{opacity:.5;cursor:not-allowed}.owl-theme .owl-dots{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.theme.green.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-theme .owl-carousel-inner .owl-next,.owl-theme .owl-carousel-inner .owl-prev{color:#fff;font-size:14px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-carousel-inner .owl-next:hover,.owl-theme .owl-carousel-inner .owl-prev:hover{background:#4dc7a0;color:#fff;text-decoration:none}.owl-theme .owl-carousel-inner .owl-next.disabled,.owl-theme .owl-carousel-inner .owl-prev.disabled{opacity:.5;cursor:not-allowed}.owl-theme .owl-dots{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4dc7a0} -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/resize.service.ts: -------------------------------------------------------------------------------- 1 | import { Observable, Subject, fromEvent } from 'rxjs'; 2 | import { filter } from 'rxjs/operators'; 3 | 4 | import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; 5 | import { isPlatformBrowser } from '@angular/common'; 6 | import { WINDOW } from './window-ref.service'; 7 | import { DOCUMENT } from './document-ref.service'; 8 | 9 | @Injectable() 10 | export class ResizeService { 11 | private resizeObservable$: Observable; 12 | private docRef: Document; 13 | 14 | /** 15 | * Makes resizeSubject become Observable 16 | * @returns Observable of resizeSubject 17 | */ 18 | get onResize$(): Observable { 19 | return this.resizeObservable$.pipe( 20 | filter(() => !this.docRef?.fullscreenElement) 21 | ); 22 | } 23 | 24 | constructor(@Inject(WINDOW) winRef: any, @Inject(DOCUMENT) docRef: any, @Inject(PLATFORM_ID) platformId: Object) { 25 | this.docRef = docRef as Document; 26 | this.resizeObservable$ = isPlatformBrowser(platformId) 27 | ? fromEvent(winRef, 'resize') 28 | : (new Subject()).asObservable(); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/carousel/carousel.module.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from "@angular/core"; 2 | import * as i1 from "./carousel.component"; 3 | import * as i2 from "./carousel-slide.directive"; 4 | import * as i3 from "./stage/stage.component"; 5 | import * as i4 from "./owl-router-link.directive"; 6 | import * as i5 from "@angular/common"; 7 | export { CarouselComponent } from './carousel.component'; 8 | export { CarouselSlideDirective } from './carousel-slide.directive'; 9 | export { SlidesOutputData } from '../models/SlidesOutputData'; 10 | export { OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective } from './owl-router-link.directive'; 11 | export declare class CarouselModule { 12 | static ɵfac: i0.ɵɵFactoryDeclaration; 13 | static ɵmod: i0.ɵɵNgModuleDeclaration; 14 | static ɵinj: i0.ɵɵInjectorDeclaration; 15 | } 16 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_video.scss: -------------------------------------------------------------------------------- 1 | $owl-image-path: "" !default; 2 | 3 | /* 4 | * Owl Carousel - Video Plugin 5 | */ 6 | 7 | .owl-carousel{ 8 | .owl-video-wrapper { 9 | position: relative; 10 | height: 100%; 11 | background: #000; 12 | } 13 | 14 | .owl-video-play-icon { 15 | position: absolute; 16 | height: 80px; 17 | width: 80px; 18 | left: 50%; 19 | top: 50%; 20 | margin-left: -40px; 21 | margin-top: -40px; 22 | background: url("#{$owl-image-path}owl.video.play.png") no-repeat; 23 | cursor: pointer; 24 | z-index: 1; 25 | -webkit-backface-visibility: hidden; 26 | transition: transform 100ms ease; 27 | } 28 | 29 | .owl-video-play-icon:hover { 30 | transform: scale(1.3, 1.3); 31 | } 32 | 33 | .owl-video-playing .owl-video-tn, 34 | .owl-video-playing .owl-video-play-icon { 35 | display: none; 36 | } 37 | 38 | .owl-video-tn { 39 | opacity: 0; 40 | height: 100%; 41 | background-position: center center; 42 | background-repeat: no-repeat; 43 | background-size: contain; 44 | transition: opacity 400ms ease; 45 | } 46 | 47 | .owl-video-frame { 48 | position: relative; 49 | z-index: 1; 50 | height: 100%; 51 | width: 100%; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_video.scss: -------------------------------------------------------------------------------- 1 | $owl-image-path: "" !default; 2 | 3 | /* 4 | * Owl Carousel - Video Plugin 5 | */ 6 | 7 | .owl-carousel{ 8 | .owl-video-wrapper { 9 | position: relative; 10 | height: 100%; 11 | background: #000; 12 | } 13 | 14 | .owl-video-play-icon { 15 | position: absolute; 16 | height: 80px; 17 | width: 80px; 18 | left: 50%; 19 | top: 50%; 20 | margin-left: -40px; 21 | margin-top: -40px; 22 | background: url("#{$owl-image-path}owl.video.play.png") no-repeat; 23 | cursor: pointer; 24 | z-index: 1; 25 | -webkit-backface-visibility: hidden; 26 | transition: transform 100ms ease; 27 | } 28 | 29 | .owl-video-play-icon:hover { 30 | transform: scale(1.3, 1.3); 31 | } 32 | 33 | .owl-video-playing .owl-video-tn, 34 | .owl-video-playing .owl-video-play-icon { 35 | display: none; 36 | } 37 | 38 | .owl-video-tn { 39 | opacity: 0; 40 | height: 100%; 41 | background-position: center center; 42 | background-repeat: no-repeat; 43 | background-size: contain; 44 | transition: opacity 400ms ease; 45 | } 46 | 47 | .owl-video-frame { 48 | position: relative; 49 | z-index: 1; 50 | height: 100%; 51 | width: 100%; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_video.scss: -------------------------------------------------------------------------------- 1 | $owl-image-path: "" !default; 2 | 3 | /* 4 | * Owl Carousel - Video Plugin 5 | */ 6 | 7 | .owl-carousel{ 8 | .owl-video-wrapper { 9 | position: relative; 10 | height: 100%; 11 | background: #000; 12 | } 13 | 14 | .owl-video-play-icon { 15 | position: absolute; 16 | height: 80px; 17 | width: 80px; 18 | left: 50%; 19 | top: 50%; 20 | margin-left: -40px; 21 | margin-top: -40px; 22 | background: url("#{$owl-image-path}owl.video.play.png") no-repeat; 23 | cursor: pointer; 24 | z-index: 1; 25 | -webkit-backface-visibility: hidden; 26 | transition: transform 100ms ease; 27 | } 28 | 29 | .owl-video-play-icon:hover { 30 | transform: scale(1.3, 1.3); 31 | } 32 | 33 | .owl-video-playing .owl-video-tn, 34 | .owl-video-playing .owl-video-play-icon { 35 | display: none; 36 | } 37 | 38 | .owl-video-tn { 39 | opacity: 0; 40 | height: 100%; 41 | background-position: center center; 42 | background-repeat: no-repeat; 43 | background-size: contain; 44 | transition: opacity 400ms ease; 45 | } 46 | 47 | .owl-video-frame { 48 | position: relative; 49 | z-index: 1; 50 | height: 100%; 51 | width: 100%; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_theme.scss: -------------------------------------------------------------------------------- 1 | .owl-theme { 2 | 3 | // Styling Next and Prev buttons 4 | .owl-carousel-inner { 5 | 6 | .owl-prev, 7 | .owl-next { 8 | color: $nav-color; 9 | font-size: $nav-font-size; 10 | padding: $nav-padding; 11 | background: $nav-background; 12 | display: inline-block; 13 | cursor: pointer; 14 | border-radius: 3px; 15 | 16 | &:hover { 17 | background: $nav-background-hover; 18 | color: $nav-color-hover; 19 | text-decoration: none; 20 | } 21 | 22 | &.disabled { 23 | opacity: $nav-disabled-opacity; 24 | cursor: not-allowed; 25 | } 26 | } 27 | } 28 | 29 | .owl-dots { 30 | margin-top: 10px; 31 | text-align: center; 32 | -webkit-tap-highlight-color: transparent; 33 | 34 | .owl-dot { 35 | display: inline-block; 36 | zoom: 1; 37 | 38 | span { 39 | width: $dot-width; 40 | height: $dot-height; 41 | margin: $dot-margin; 42 | background: $dot-background; 43 | display: block; 44 | -webkit-backface-visibility: visible; 45 | transition: opacity 200ms ease; 46 | border-radius: $dot-rounded; 47 | } 48 | 49 | &.active, 50 | &:hover { 51 | span { 52 | background: $dot-background-active; 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_theme.scss: -------------------------------------------------------------------------------- 1 | .owl-theme { 2 | 3 | // Styling Next and Prev buttons 4 | .owl-carousel-inner { 5 | 6 | .owl-prev, 7 | .owl-next { 8 | color: $nav-color; 9 | font-size: $nav-font-size; 10 | padding: $nav-padding; 11 | background: $nav-background; 12 | display: inline-block; 13 | cursor: pointer; 14 | border-radius: 3px; 15 | 16 | &:hover { 17 | background: $nav-background-hover; 18 | color: $nav-color-hover; 19 | text-decoration: none; 20 | } 21 | 22 | &.disabled { 23 | opacity: $nav-disabled-opacity; 24 | cursor: not-allowed; 25 | } 26 | } 27 | } 28 | 29 | .owl-dots { 30 | margin-top: 10px; 31 | text-align: center; 32 | -webkit-tap-highlight-color: transparent; 33 | 34 | .owl-dot { 35 | display: inline-block; 36 | zoom: 1; 37 | 38 | span { 39 | width: $dot-width; 40 | height: $dot-height; 41 | margin: $dot-margin; 42 | background: $dot-background; 43 | display: block; 44 | -webkit-backface-visibility: visible; 45 | transition: opacity 200ms ease; 46 | border-radius: $dot-rounded; 47 | } 48 | 49 | &.active, 50 | &:hover { 51 | span { 52 | background: $dot-background-active; 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_theme.scss: -------------------------------------------------------------------------------- 1 | .owl-theme { 2 | 3 | // Styling Next and Prev buttons 4 | .owl-carousel-inner { 5 | 6 | .owl-prev, 7 | .owl-next { 8 | color: $nav-color; 9 | font-size: $nav-font-size; 10 | padding: $nav-padding; 11 | background: $nav-background; 12 | display: inline-block; 13 | cursor: pointer; 14 | border-radius: 3px; 15 | 16 | &:hover { 17 | background: $nav-background-hover; 18 | color: $nav-color-hover; 19 | text-decoration: none; 20 | } 21 | 22 | &.disabled { 23 | opacity: $nav-disabled-opacity; 24 | cursor: not-allowed; 25 | } 26 | } 27 | } 28 | 29 | .owl-dots { 30 | margin-top: 10px; 31 | text-align: center; 32 | -webkit-tap-highlight-color: transparent; 33 | 34 | .owl-dot { 35 | display: inline-block; 36 | zoom: 1; 37 | 38 | span { 39 | width: $dot-width; 40 | height: $dot-height; 41 | margin: $dot-margin; 42 | background: $dot-background; 43 | display: block; 44 | -webkit-backface-visibility: visible; 45 | transition: opacity 200ms ease; 46 | border-radius: $dot-rounded; 47 | } 48 | 49 | &.active, 50 | &:hover { 51 | span { 52 | background: $dot-background-active; 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/animate.service.d.ts: -------------------------------------------------------------------------------- 1 | import { OnDestroy } from '@angular/core'; 2 | import { Subscription } from 'rxjs'; 3 | import { CarouselService } from './carousel.service'; 4 | import * as i0 from "@angular/core"; 5 | export declare class AnimateService implements OnDestroy { 6 | private carouselService; 7 | /** 8 | * Subscrioption to merge Observable from CarouselService 9 | */ 10 | animateSubscription: Subscription; 11 | /** 12 | * s 13 | */ 14 | swapping: boolean; 15 | /** 16 | * active slide before translating 17 | */ 18 | previous: any; 19 | /** 20 | * new active slide after translating 21 | */ 22 | next: any; 23 | constructor(carouselService: CarouselService); 24 | ngOnDestroy(): void; 25 | /** 26 | * Defines Observables which service must observe 27 | */ 28 | spyDataStreams(): void; 29 | /** 30 | * Toggles the animation classes whenever an translations starts. 31 | * @returns 32 | */ 33 | private _swap; 34 | /** 35 | * Handles the end of 'animationend' event 36 | * @param id Id of slides 37 | */ 38 | clear(id: any): void; 39 | static ɵfac: i0.ɵɵFactoryDeclaration; 40 | static ɵprov: i0.ɵɵInjectableDeclaration; 41 | } 42 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach( 5 | waitForAsync(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [AppComponent] 8 | }).compileComponents(); 9 | }) 10 | ); 11 | it( 12 | 'should create the app', 13 | waitForAsync(() => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }) 18 | ); 19 | it( 20 | `should have as title 'owl-carousel-libdemo'`, 21 | waitForAsync(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | const app = fixture.debugElement.componentInstance; 24 | expect(app.title).toEqual('owl-carousel-libdemo'); 25 | }) 26 | ); 27 | it( 28 | 'should render title in a h1 tag', 29 | waitForAsync(() => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain( 34 | 'Welcome to owl-carousel-libdemo!' 35 | ); 36 | }) 37 | ); 38 | }); 39 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/hash.service.d.ts: -------------------------------------------------------------------------------- 1 | import { OnDestroy } from '@angular/core'; 2 | import { ActivatedRoute, Router } from '@angular/router'; 3 | import { Subscription } from 'rxjs'; 4 | import { CarouselService } from './carousel.service'; 5 | import * as i0 from "@angular/core"; 6 | export declare class HashService implements OnDestroy { 7 | private carouselService; 8 | private route; 9 | private router; 10 | /** 11 | * Subscription to merge Observable from CarouselService 12 | */ 13 | hashSubscription: Subscription; 14 | /** 15 | * Current url fragment (hash) 16 | */ 17 | currentHashFragment: string; 18 | constructor(carouselService: CarouselService, route: ActivatedRoute, router: Router); 19 | ngOnDestroy(): void; 20 | /** 21 | * Defines Observables which service must observe 22 | */ 23 | spyDataStreams(): void; 24 | /** 25 | * rewinds carousel to slide which has the same hashFragment as fragment of current url 26 | * @param fragment fragment of url 27 | */ 28 | rewind(fragment: string): void; 29 | /** 30 | * Initiate listening to ActivatedRoute.fragment 31 | */ 32 | listenToRoute(): void; 33 | static ɵfac: i0.ɵɵFactoryDeclaration; 34 | static ɵprov: i0.ɵɵInjectableDeclaration; 35 | } 36 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-owl-carousel-o", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "sourceRoot": "libs/ngx-owl-carousel-o/src", 5 | "projectType": "library", 6 | "prefix": "owl-carousel-libdemo", 7 | "targets": { 8 | "build": { 9 | "executor": "@nx/angular:package", 10 | "options": { 11 | "tsConfig": "libs/ngx-owl-carousel-o/tsconfig.lib.json", 12 | "project": "libs/ngx-owl-carousel-o/ng-package.json", 13 | "buildableProjectDepsInPackageJsonType": "dependencies", 14 | "updateBuildableProjectDepsInPackageJson": true 15 | }, 16 | "configurations": { 17 | "production": { 18 | "project": "libs/ngx-owl-carousel-o/ng-package.prod.json" 19 | } 20 | } 21 | }, 22 | "test": { 23 | "executor": "@angular-devkit/build-angular:karma", 24 | "options": { 25 | "main": "libs/ngx-owl-carousel-o/src/test.ts", 26 | "tsConfig": "libs/ngx-owl-carousel-o/tsconfig.spec.json", 27 | "karmaConfig": "libs/ngx-owl-carousel-o/karma.conf.js", 28 | "styles": [ 29 | "libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.carousel.min.css", 30 | "libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.theme.default.min.css" 31 | ] 32 | }, 33 | "outputs": ["{workspaceRoot}/coverage/libs/ngx-owl-carousel-o"] 34 | } 35 | }, 36 | "tags": [] 37 | } 38 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/doubled-carousel/doubled-carousel.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Owl Carousel - Doubled Carousel

4 | 5 |
6 |
7 |
8 |
9 | 10 | 11 | @for(category of categories.items; track category.id; let i = $index) { 12 | 13 |
14 | {{category.displayedName}} 16 |
17 | 18 | } 19 | 20 | 21 | 22 | @for(category of categories.items; track category.id; let i = $index) { 23 | 24 |
Content for Slide {{i + 1}}
25 | 26 | } 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 |
-------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/models/navigation-data.models.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Data model for single navigation button 3 | */ 4 | export class NavButton { 5 | /** 6 | * Make button disabled by attaching class .disabled; it's being used when otpion loop=false 7 | */ 8 | disabled: boolean; 9 | /** 10 | * Text for button; can be simple text or html-markup (e.g. ) 11 | */ 12 | htmlText: string; 13 | } 14 | /** 15 | * Data model for navigation block 16 | */ 17 | export class NavData { 18 | /** 19 | * Rurns on or turns off navigation block 20 | */ 21 | disabled: boolean; 22 | /** 23 | * Navigation button 'prev' 24 | */ 25 | prev: NavButton; 26 | /** 27 | * Navigation button 'next' 28 | */ 29 | next: NavButton; 30 | } 31 | /** 32 | * data model for single owl dot-button 33 | */ 34 | export class OwlSingeDot { 35 | /** 36 | * Id for dot button 37 | */ 38 | id: string; 39 | /** 40 | * Makes dot active by attaching .active class to it 41 | */ 42 | active: boolean; 43 | /** 44 | * Inner content of dot; can be html-markup 45 | */ 46 | innerContent?: string; 47 | /** 48 | * Enabled css-class which gives right presentaion of innerContent of dot. 49 | */ 50 | showInnerContent?: boolean; 51 | } 52 | /** 53 | * Data model for owl dot-block 54 | */ 55 | export class DotsData { 56 | /** 57 | * Turns on or turns off navigation block 58 | */ 59 | disabled: boolean; 60 | /** 61 | * Array of dots 62 | */ 63 | dots: OwlSingeDot[]; 64 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/carousel/carousel-slide.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, TemplateRef, input } from '@angular/core'; 2 | 3 | let nextId = 0; 4 | 5 | @Directive({ 6 | selector: 'ng-template[carouselSlide]', 7 | standalone: false 8 | }) 9 | export class CarouselSlideDirective { 10 | /** 11 | * Unique slide identifier. Must be unique for the entire document for proper accessibility support. 12 | * Will be auto-generated if not provided. 13 | */ 14 | id = input(`owl-slide-${nextId++}`); 15 | 16 | /** 17 | * Defines how much widths of common slide will current slide have 18 | * e.g. if dataMerge=2, the slide will twice wider then slides with dataMerge=1 19 | */ 20 | dataMerge = input(1, { 21 | transform: (data: number) => { 22 | return +data || 1; 23 | } 24 | }); 25 | 26 | 27 | /** 28 | * Width of slide 29 | */ 30 | width = input(0); 31 | 32 | /** 33 | * Inner content of dot for certain slide; can be html-markup 34 | */ 35 | dotContent = input(''); 36 | 37 | /** 38 | * Hash (fragment) of url which corresponds to certain slide 39 | */ 40 | dataHash = input(''); 41 | 42 | constructor(public tplRef: TemplateRef) { } 43 | 44 | /** 45 | * Determines if the input is a Number or something that can be coerced to a Number 46 | * @param - The input to be tested 47 | * @returns - An indication if the input is a Number or can be coerced to a Number 48 | */ 49 | isNumeric(number: any): boolean { 50 | return !isNaN(parseFloat(number)); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.green.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Green theme - Owl Carousel CSS File 8 | */ 9 | 10 | .owl-theme .owl-carousel-inner .owl-prev, 11 | .owl-theme .owl-carousel-inner .owl-next { 12 | color: #fff; 13 | font-size: 14px; 14 | padding: 4px 7px; 15 | background: #d6d6d6; 16 | display: inline-block; 17 | cursor: pointer; 18 | border-radius: 3px; 19 | } 20 | 21 | .owl-theme .owl-carousel-inner .owl-prev:hover, 22 | .owl-theme .owl-carousel-inner .owl-next:hover { 23 | background: #4dc7a0; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | .owl-theme .owl-carousel-inner .owl-prev.disabled, 29 | .owl-theme .owl-carousel-inner .owl-next.disabled { 30 | opacity: 0.5; 31 | cursor: not-allowed; 32 | } 33 | 34 | .owl-theme .owl-dots { 35 | margin-top: 10px; 36 | text-align: center; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | 40 | .owl-theme .owl-dots .owl-dot { 41 | display: inline-block; 42 | zoom: 1; 43 | } 44 | 45 | .owl-theme .owl-dots .owl-dot span { 46 | width: 10px; 47 | height: 10px; 48 | margin: 5px 7px; 49 | background: #d6d6d6; 50 | display: block; 51 | -webkit-backface-visibility: visible; 52 | transition: opacity 200ms ease; 53 | border-radius: 30px; 54 | } 55 | 56 | .owl-theme .owl-dots .owl-dot.active span, 57 | .owl-theme .owl-dots .owl-dot:hover span { 58 | background: #4dc7a0; 59 | } -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/subhome/subhome.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Owl Carousel

5 |

"autoHeight=true", "URLhashListener=true" and "startPosition='URLHash'"

7 | 15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 | @for(item of carouselData; track item.dataHash; let i = $index) { 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 | } 31 | 32 | 33 | 34 | 35 |
36 | 37 |
38 | 39 |
40 |
-------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.green.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Green theme - Owl Carousel CSS File 8 | */ 9 | 10 | .owl-theme .owl-carousel-inner .owl-prev, 11 | .owl-theme .owl-carousel-inner .owl-next { 12 | color: #fff; 13 | font-size: 14px; 14 | padding: 4px 7px; 15 | background: #d6d6d6; 16 | display: inline-block; 17 | cursor: pointer; 18 | border-radius: 3px; 19 | } 20 | 21 | .owl-theme .owl-carousel-inner .owl-prev:hover, 22 | .owl-theme .owl-carousel-inner .owl-next:hover { 23 | background: #4dc7a0; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | .owl-theme .owl-carousel-inner .owl-prev.disabled, 29 | .owl-theme .owl-carousel-inner .owl-next.disabled { 30 | opacity: 0.5; 31 | cursor: not-allowed; 32 | } 33 | 34 | .owl-theme .owl-dots { 35 | margin-top: 10px; 36 | text-align: center; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | 40 | .owl-theme .owl-dots .owl-dot { 41 | display: inline-block; 42 | zoom: 1; 43 | } 44 | 45 | .owl-theme .owl-dots .owl-dot span { 46 | width: 10px; 47 | height: 10px; 48 | margin: 5px 7px; 49 | background: #d6d6d6; 50 | display: block; 51 | -webkit-backface-visibility: visible; 52 | transition: opacity 200ms ease; 53 | border-radius: 30px; 54 | } 55 | 56 | .owl-theme .owl-dots .owl-dot.active span, 57 | .owl-theme .owl-dots .owl-dot:hover span { 58 | background: #4dc7a0; 59 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.theme.green.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Green theme - Owl Carousel CSS File 8 | */ 9 | 10 | .owl-theme .owl-carousel-inner .owl-prev, 11 | .owl-theme .owl-carousel-inner .owl-next { 12 | color: #fff; 13 | font-size: 14px; 14 | padding: 4px 7px; 15 | background: #d6d6d6; 16 | display: inline-block; 17 | cursor: pointer; 18 | border-radius: 3px; 19 | } 20 | 21 | .owl-theme .owl-carousel-inner .owl-prev:hover, 22 | .owl-theme .owl-carousel-inner .owl-next:hover { 23 | background: #4dc7a0; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | .owl-theme .owl-carousel-inner .owl-prev.disabled, 29 | .owl-theme .owl-carousel-inner .owl-next.disabled { 30 | opacity: 0.5; 31 | cursor: not-allowed; 32 | } 33 | 34 | .owl-theme .owl-dots { 35 | margin-top: 10px; 36 | text-align: center; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | 40 | .owl-theme .owl-dots .owl-dot { 41 | display: inline-block; 42 | zoom: 1; 43 | } 44 | 45 | .owl-theme .owl-dots .owl-dot span { 46 | width: 10px; 47 | height: 10px; 48 | margin: 5px 7px; 49 | background: #d6d6d6; 50 | display: block; 51 | -webkit-backface-visibility: visible; 52 | transition: opacity 200ms ease; 53 | border-radius: 30px; 54 | } 55 | 56 | .owl-theme .owl-dots .owl-dot.active span, 57 | .owl-theme .owl-dots .owl-dot:hover span { 58 | background: #4dc7a0; 59 | } -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Default theme - Owl Carousel CSS File 8 | */ 9 | 10 | .owl-theme .owl-carousel-inner .owl-prev, 11 | .owl-theme .owl-carousel-inner .owl-next { 12 | color: #fff; 13 | font-size: 14px; 14 | padding: 4px 7px; 15 | background: #d6d6d6; 16 | display: inline-block; 17 | cursor: pointer; 18 | border-radius: 3px; 19 | } 20 | 21 | .owl-theme .owl-carousel-inner .owl-prev:hover, 22 | .owl-theme .owl-carousel-inner .owl-next:hover { 23 | background: #869791; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | .owl-theme .owl-carousel-inner .owl-prev.disabled, 29 | .owl-theme .owl-carousel-inner .owl-next.disabled { 30 | opacity: 0.5; 31 | cursor: not-allowed; 32 | } 33 | 34 | .owl-theme .owl-dots { 35 | margin-top: 10px; 36 | text-align: center; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | 40 | .owl-theme .owl-dots .owl-dot { 41 | display: inline-block; 42 | zoom: 1; 43 | } 44 | 45 | .owl-theme .owl-dots .owl-dot span { 46 | width: 10px; 47 | height: 10px; 48 | margin: 5px 7px; 49 | background: #d6d6d6; 50 | display: block; 51 | -webkit-backface-visibility: visible; 52 | transition: opacity 200ms ease; 53 | border-radius: 30px; 54 | } 55 | 56 | .owl-theme .owl-dots .owl-dot.active span, 57 | .owl-theme .owl-dots .owl-dot:hover span { 58 | background: #869791; 59 | } 60 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Default theme - Owl Carousel CSS File 8 | */ 9 | 10 | .owl-theme .owl-carousel-inner .owl-prev, 11 | .owl-theme .owl-carousel-inner .owl-next { 12 | color: #fff; 13 | font-size: 14px; 14 | padding: 4px 7px; 15 | background: #d6d6d6; 16 | display: inline-block; 17 | cursor: pointer; 18 | border-radius: 3px; 19 | } 20 | 21 | .owl-theme .owl-carousel-inner .owl-prev:hover, 22 | .owl-theme .owl-carousel-inner .owl-next:hover { 23 | background: #869791; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | .owl-theme .owl-carousel-inner .owl-prev.disabled, 29 | .owl-theme .owl-carousel-inner .owl-next.disabled { 30 | opacity: 0.5; 31 | cursor: not-allowed; 32 | } 33 | 34 | .owl-theme .owl-dots { 35 | margin-top: 10px; 36 | text-align: center; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | 40 | .owl-theme .owl-dots .owl-dot { 41 | display: inline-block; 42 | zoom: 1; 43 | } 44 | 45 | .owl-theme .owl-dots .owl-dot span { 46 | width: 10px; 47 | height: 10px; 48 | margin: 5px 7px; 49 | background: #d6d6d6; 50 | display: block; 51 | -webkit-backface-visibility: visible; 52 | transition: opacity 200ms ease; 53 | border-radius: 30px; 54 | } 55 | 56 | .owl-theme .owl-dots .owl-dot.active span, 57 | .owl-theme .owl-dots .owl-dot:hover span { 58 | background: #869791; 59 | } 60 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.theme.default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Default theme - Owl Carousel CSS File 8 | */ 9 | 10 | .owl-theme .owl-carousel-inner .owl-prev, 11 | .owl-theme .owl-carousel-inner .owl-next { 12 | color: #fff; 13 | font-size: 14px; 14 | padding: 4px 7px; 15 | background: #d6d6d6; 16 | display: inline-block; 17 | cursor: pointer; 18 | border-radius: 3px; 19 | } 20 | 21 | .owl-theme .owl-carousel-inner .owl-prev:hover, 22 | .owl-theme .owl-carousel-inner .owl-next:hover { 23 | background: #869791; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | .owl-theme .owl-carousel-inner .owl-prev.disabled, 29 | .owl-theme .owl-carousel-inner .owl-next.disabled { 30 | opacity: 0.5; 31 | cursor: not-allowed; 32 | } 33 | 34 | .owl-theme .owl-dots { 35 | margin-top: 10px; 36 | text-align: center; 37 | -webkit-tap-highlight-color: transparent; 38 | } 39 | 40 | .owl-theme .owl-dots .owl-dot { 41 | display: inline-block; 42 | zoom: 1; 43 | } 44 | 45 | .owl-theme .owl-dots .owl-dot span { 46 | width: 10px; 47 | height: 10px; 48 | margin: 5px 7px; 49 | background: #d6d6d6; 50 | display: block; 51 | -webkit-backface-visibility: visible; 52 | transition: opacity 200ms ease; 53 | border-radius: 30px; 54 | } 55 | 56 | .owl-theme .owl-dots .owl-dot.active span, 57 | .owl-theme .owl-dots .owl-dot:hover span { 58 | background: #869791; 59 | } 60 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/carousel/carousel.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { 4 | CarouselComponent 5 | } from './carousel.component'; 6 | import { CarouselSlideDirective } from './carousel-slide.directive'; 7 | import { WINDOW_PROVIDERS } from '../services/window-ref.service'; 8 | import { ResizeService } from '../services/resize.service'; 9 | import { DOCUMENT_PROVIDERS } from '../services/document-ref.service'; 10 | import { StageComponent } from './stage/stage.component'; 11 | 12 | export { CarouselComponent } from './carousel.component'; 13 | export { CarouselSlideDirective } from './carousel-slide.directive'; 14 | export { SlidesOutputData } from '../models/SlidesOutputData'; 15 | 16 | import { RouterModule, Routes } from '@angular/router'; 17 | import { OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective } from './owl-router-link.directive'; 18 | import { OwlLogger } from '../services/logger.service'; 19 | export { OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective } from './owl-router-link.directive'; 20 | 21 | const routes: Routes = []; 22 | 23 | 24 | @NgModule({ 25 | imports: [ 26 | CommonModule, 27 | // RouterModule.forChild(routes) 28 | ], 29 | declarations: [CarouselComponent, CarouselSlideDirective, StageComponent, OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective], 30 | exports: [CarouselComponent, CarouselSlideDirective, OwlRouterLinkDirective, OwlRouterLinkWithHrefDirective], 31 | providers: [WINDOW_PROVIDERS, ResizeService, DOCUMENT_PROVIDERS, OwlLogger] 32 | }) 33 | export class CarouselModule { } 34 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/models/navigation-data.models.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Data model for single navigation button 3 | */ 4 | export declare class NavButton { 5 | /** 6 | * Make button disabled by attaching class .disabled; it's being used when otpion loop=false 7 | */ 8 | disabled: boolean; 9 | /** 10 | * Text for button; can be simple text or html-markup (e.g. ) 11 | */ 12 | htmlText: string; 13 | } 14 | /** 15 | * Data model for navigation block 16 | */ 17 | export declare class NavData { 18 | /** 19 | * Rurns on or turns off navigation block 20 | */ 21 | disabled: boolean; 22 | /** 23 | * Navigation button 'prev' 24 | */ 25 | prev: NavButton; 26 | /** 27 | * Navigation button 'next' 28 | */ 29 | next: NavButton; 30 | } 31 | /** 32 | * data model for single owl dot-button 33 | */ 34 | export declare class OwlSingeDot { 35 | /** 36 | * Id for dot button 37 | */ 38 | id: string; 39 | /** 40 | * Makes dot active by attaching .active class to it 41 | */ 42 | active: boolean; 43 | /** 44 | * Inner content of dot; can be html-markup 45 | */ 46 | innerContent?: string; 47 | /** 48 | * Enabled css-class which gives right presentaion of innerContent of dot. 49 | */ 50 | showInnerContent?: boolean; 51 | } 52 | /** 53 | * Data model for owl dot-block 54 | */ 55 | export declare class DotsData { 56 | /** 57 | * Turns on or turns off navigation block 58 | */ 59 | disabled: boolean; 60 | /** 61 | * Array of dots 62 | */ 63 | dots: OwlSingeDot[]; 64 | } 65 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/link/link.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, WritableSignal, signal } from '@angular/core'; 2 | 3 | import { CarouselModule } from 'ngx-owl-carousel-o'; 4 | import { CarouselData } from '../app.component'; 5 | 6 | @Component({ 7 | selector: 'app-link', 8 | imports: [CarouselModule], 9 | templateUrl: './link.component.html', 10 | styleUrl: './link.component.sass' 11 | }) 12 | export class LinkComponent { 13 | isDragging: WritableSignal = signal(false); 14 | carouselData: CarouselData[] = [ 15 | { text: 'Slide 1', src: 'assets/images/350x450&text=1.png', dataHash: 'one' }, 16 | { text: 'Slide 2', src: 'assets/images/350x650&text=2.png', dataHash: 'two' }, 17 | { text: 'Slide 3', src: 'assets/images/350x250&text=3-fallback.png', dataHash: 'three' }, 18 | { text: 'Slide 4', src: 'assets/images/350x250&text=4.png', dataHash: 'four' }, 19 | { text: 'Slide 5', src: 'assets/images/350x250&text=5.png', dataHash: 'five' }, 20 | // { text: 'Slide 6', dotContent: 'text5'}, 21 | // { text: 'Slide 7', dotContent: 'text5'}, 22 | // { text: 'Slide 8', dotContent: 'text5'}, 23 | // { text: 'Slide 9', dotContent: 'text5'}, 24 | // { text: 'Slide 10', dotContent: 'text5'}, 25 | ]; 26 | customOptions: any = { 27 | loop: true, 28 | // autoHeight: true, 29 | nav: true, 30 | // center: true, 31 | // URLhashListener:true, 32 | // startPosition: 'URLHash', 33 | responsive: { 34 | 0: { 35 | items: 1 36 | }, 37 | 600: { 38 | items: 2 39 | }, 40 | 900: { 41 | items: 3 42 | } 43 | }, 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/present/present.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Owl Carousel - PresentModule

4 |

"autoplay=true", "loop=true"

5 |
6 |
7 |
8 |
9 | 10 | 11 | @for(item of carouselData; track item.text; let i = $index) { 12 | 13 | 14 |
15 |

{{item.text}}

16 | @if(i == 2) { 17 |
18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | } 29 | 30 |
31 | 32 | } 33 | 34 | 35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 |
-------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/package.schema.json", 3 | "name": "ngx-owl-carousel-o", 4 | "version": "21.0.0", 5 | "description": "Angular powered owl-carousel", 6 | "keywords": [ 7 | "angular", 8 | "owl-carousel", 9 | "components", 10 | "responsive", 11 | "carousel", 12 | "owlcarousel", 13 | "owl carousel Angular", 14 | "owl-carousel Angular", 15 | "owlcarousel Angular" 16 | ], 17 | "author": "Vitalii Andriiovskyi", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o.git" 21 | }, 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o/issues" 25 | }, 26 | "peerDependencies": { 27 | "@angular/common": " ^21.0.0-rc.0 || ^21.0.0", 28 | "@angular/core": "^21.0.0-rc.0 || ^21.0.0", 29 | "rxjs": "^6.0.1 || ^7.0.0" 30 | }, 31 | "ngPackage": { 32 | "lib": { 33 | "entryFile": "./src/index.ts" 34 | }, 35 | "dest": "../../ngx-owl-carousel-o", 36 | "assets": [ 37 | "./lib/styles/**/*.scss", 38 | "./lib/styles/**/*.css", 39 | "./lib/styles/**/*.gif", 40 | "./lib/styles/**/*.png" 41 | ] 42 | }, 43 | "exports": { 44 | "./lib/styles/scss/owl.carousel": { 45 | "sass": "./lib/styles/scss/owl.carousel.scss" 46 | }, 47 | "./lib/styles/scss/owl.theme.default": { 48 | "sass": "./lib/styles/scss/owl.theme.default.scss" 49 | }, 50 | "./lib/styles/scss/owl.theme.green": { 51 | "sass": "./lib/styles/scss/owl.theme.green.scss" 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Owl Carousel - HomeModule

3 |
4 | 5 |
6 |
7 |
8 | 9 | 11 | 12 | @for (item of carouselData(); track item.id) { 13 | 14 |
15 |

{{item.text}}

16 |
17 | 18 | } 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 |
28 |

29 | prev 30 | <==> 31 | next 32 |

33 |

move to 3th slide

34 |

Remove the last slide

35 |
36 |

37 |
38 |
39 | Go to SubHomeComponent with carousel 40 | with url navigation 41 |
42 | 43 | 44 |
-------------------------------------------------------------------------------- /ngx-owl-carousel-o/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/package.schema.json", 3 | "name": "ngx-owl-carousel-o", 4 | "version": "21.0.0", 5 | "description": "Angular powered owl-carousel", 6 | "keywords": [ 7 | "angular", 8 | "owl-carousel", 9 | "components", 10 | "responsive", 11 | "carousel", 12 | "owlcarousel", 13 | "owl carousel Angular", 14 | "owl-carousel Angular", 15 | "owlcarousel Angular" 16 | ], 17 | "author": "Vitalii Andriiovskyi", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o.git" 21 | }, 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o/issues" 25 | }, 26 | "peerDependencies": { 27 | "@angular/common": " ^21.0.0-rc.0 || ^21.0.0", 28 | "@angular/core": "^21.0.0-rc.0 || ^21.0.0", 29 | "rxjs": "^6.0.1 || ^7.0.0" 30 | }, 31 | "exports": { 32 | "./lib/styles/scss/owl.carousel": { 33 | "sass": "./lib/styles/scss/owl.carousel.scss" 34 | }, 35 | "./lib/styles/scss/owl.theme.default": { 36 | "sass": "./lib/styles/scss/owl.theme.default.scss" 37 | }, 38 | "./lib/styles/scss/owl.theme.green": { 39 | "sass": "./lib/styles/scss/owl.theme.green.scss" 40 | }, 41 | "./package.json": { 42 | "default": "./package.json" 43 | }, 44 | ".": { 45 | "types": "./types/ngx-owl-carousel-o.d.ts", 46 | "default": "./fesm2022/ngx-owl-carousel-o.mjs" 47 | } 48 | }, 49 | "module": "fesm2022/ngx-owl-carousel-o.mjs", 50 | "typings": "types/ngx-owl-carousel-o.d.ts", 51 | "sideEffects": false, 52 | "dependencies": { 53 | "tslib": "^2.3.0" 54 | } 55 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/logger.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { ErrorHandler } from '@angular/core'; 2 | import { OwlLogger } from './logger.service'; 3 | import { inject, TestBed } from '@angular/core/testing'; 4 | 5 | 6 | describe('Logger Service', () => { 7 | let logSpy; 8 | let warnSpy; 9 | beforeEach(() => { 10 | logSpy = spyOn(console, 'log'); 11 | warnSpy = spyOn(console, 'warn'); 12 | TestBed.configureTestingModule({ 13 | providers: [ 14 | OwlLogger, 15 | { provide: ErrorHandler, useClass: MockErrorHandler } 16 | ] 17 | }); 18 | }); 19 | 20 | it('should be created', inject([OwlLogger], (service: OwlLogger) => { 21 | expect(service).toBeTruthy(); 22 | })); 23 | 24 | describe('log', () => { 25 | it('should delegate to console.log', inject([OwlLogger], (logger: OwlLogger) => { 26 | logger.log('param1', 'param2', 'param3'); 27 | expect(logSpy).toHaveBeenCalledWith('param1', 'param2', 'param3'); 28 | })); 29 | }); 30 | 31 | describe('warn', () => { 32 | it('should delegate to console.warn', inject([OwlLogger], (logger: OwlLogger) => { 33 | logger.warn('param1', 'param2', 'param3'); 34 | expect(warnSpy).toHaveBeenCalledWith('param1', 'param2', 'param3'); 35 | })); 36 | }); 37 | 38 | describe('error', () => { 39 | it('should delegate to ErrorHandler', inject([OwlLogger, ErrorHandler], (logger: OwlLogger, errorHandler: ErrorHandler) => { 40 | const err = new Error('some error message'); 41 | logger.error(err); 42 | expect(errorHandler.handleError).toHaveBeenCalledWith(err); 43 | })); 44 | }); 45 | 46 | }); 47 | 48 | 49 | 50 | class MockErrorHandler implements ErrorHandler { 51 | handleError = jasmine.createSpy('handleError'); 52 | } 53 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/window-ref.service.d.ts: -------------------------------------------------------------------------------- 1 | import { ClassProvider, FactoryProvider, InjectionToken } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | /** 4 | * Create a new injection token for injecting the window into a component. 5 | */ 6 | export declare const WINDOW: InjectionToken; 7 | /** 8 | * Define abstract class for obtaining reference to the global window object. 9 | */ 10 | export declare abstract class WindowRef { 11 | get nativeWindow(): Window | Object; 12 | } 13 | /** 14 | * Define class that implements the abstract class and returns the native window object. 15 | */ 16 | export declare class BrowserWindowRef extends WindowRef { 17 | constructor(); 18 | /** 19 | * @returns window object 20 | */ 21 | get nativeWindow(): Window | Object; 22 | static ɵfac: i0.ɵɵFactoryDeclaration; 23 | static ɵprov: i0.ɵɵInjectableDeclaration; 24 | } 25 | /** 26 | * Create an factory function that returns the native window object. 27 | * @param browserWindowRef Native window object 28 | * @param platformId id of platform 29 | * @returns type of platform of empty object 30 | */ 31 | export declare function windowFactory(browserWindowRef: BrowserWindowRef, platformId: Object): Window | Object; 32 | /** 33 | * Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. 34 | */ 35 | export declare const browserWindowProvider: ClassProvider; 36 | /** 37 | * Create an injectable provider that uses the windowFactory function for returning the native window object. 38 | */ 39 | export declare const windowProvider: FactoryProvider; 40 | /** 41 | * Create an array of providers. 42 | */ 43 | export declare const WINDOW_PROVIDERS: (ClassProvider | FactoryProvider)[]; 44 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/document-ref.service.d.ts: -------------------------------------------------------------------------------- 1 | import { ClassProvider, FactoryProvider, InjectionToken } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | /** 4 | * Create a new injection token for injecting the Document into a component. 5 | */ 6 | export declare const DOCUMENT: InjectionToken; 7 | /** 8 | * Define abstract class for obtaining reference to the global Document object. 9 | */ 10 | export declare abstract class DocumentRef { 11 | get nativeDocument(): Document | Object; 12 | } 13 | /** 14 | * Define class that implements the abstract class and returns the native Document object. 15 | */ 16 | export declare class BrowserDocumentRef extends DocumentRef { 17 | constructor(); 18 | /** 19 | * @returns Document object 20 | */ 21 | get nativeDocument(): Document | Object; 22 | static ɵfac: i0.ɵɵFactoryDeclaration; 23 | static ɵprov: i0.ɵɵInjectableDeclaration; 24 | } 25 | /** 26 | * Create an factory function that returns the native Document object. 27 | * @param browserDocumentRef Native Document object 28 | * @param platformId id of platform 29 | * @returns type of platform of empty object 30 | */ 31 | export declare function documentFactory(browserDocumentRef: BrowserDocumentRef, platformId: Object): Document | Object; 32 | /** 33 | * Create a injectable provider for the DocumentRef token that uses the BrowserDocumentRef class. 34 | */ 35 | export declare const browserDocumentProvider: ClassProvider; 36 | /** 37 | * Create an injectable provider that uses the DocumentFactory function for returning the native Document object. 38 | */ 39 | export declare const documentProvider: FactoryProvider; 40 | /** 41 | * Create an array of providers. 42 | */ 43 | export declare const DOCUMENT_PROVIDERS: (ClassProvider | FactoryProvider)[]; 44 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/carousel/carousel-slide.directive.d.ts: -------------------------------------------------------------------------------- 1 | import { TemplateRef } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | export declare class CarouselSlideDirective { 4 | tplRef: TemplateRef; 5 | /** 6 | * Unique slide identifier. Must be unique for the entire document for proper accessibility support. 7 | * Will be auto-generated if not provided. 8 | */ 9 | id: string; 10 | /** 11 | * Defines how much widths of common slide will current slide have 12 | * e.g. if _mergeData=2, the slide will twice wider then slides with _mergeData=1 13 | */ 14 | private _dataMerge; 15 | set dataMerge(data: number); 16 | get dataMerge(): number; 17 | /** 18 | * Width of slide 19 | */ 20 | width: number; 21 | /** 22 | * Inner content of dot for certain slide; can be html-markup 23 | */ 24 | dotContent: string; 25 | /** 26 | * Hash (fragment) of url which corresponds to certain slide 27 | */ 28 | dataHash: string; 29 | constructor(tplRef: TemplateRef); 30 | /** 31 | * Determines if the input is a Number or something that can be coerced to a Number 32 | * @param - The input to be tested 33 | * @returns - An indication if the input is a Number or can be coerced to a Number 34 | */ 35 | isNumeric(number: any): boolean; 36 | static ɵfac: i0.ɵɵFactoryDeclaration; 37 | static ɵdir: i0.ɵɵDirectiveDeclaration; 38 | } 39 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/gallery/gallery.component.ts: -------------------------------------------------------------------------------- 1 | import { NgOptimizedImage } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { CarouselModule, OwlOptions } from 'ngx-owl-carousel-o'; 4 | 5 | interface Image { 6 | src: string; 7 | title?: string; 8 | alt?: string; 9 | } 10 | @Component({ 11 | selector: 'app-gallery', 12 | imports: [CarouselModule, NgOptimizedImage], 13 | templateUrl: './gallery.component.html', 14 | styleUrl: './gallery.component.sass', 15 | }) 16 | export class GalleryComponent { 17 | imagesData: Image[] = [ 18 | { 19 | src: 'assets/images/cities/bridge.jpg', 20 | alt: '', 21 | title: '' 22 | }, 23 | { 24 | src: 'assets/images/cities/city-before-sunrise.jpg', 25 | alt: 'image', 26 | title: 'image' 27 | }, 28 | { 29 | src: 'assets/images/cities/golden-gate-bridge.jpg', 30 | alt: 'image', 31 | title: 'image' 32 | }, 33 | { 34 | src: 'assets/images/cities/night-lights.jpg', 35 | alt: 'image', 36 | title: 'image' 37 | }, 38 | { 39 | src: 'assets/images/cities/nigth-and-city.jpg', 40 | alt: 'image', 41 | title: 'image' 42 | }, 43 | { 44 | src: 'assets/images/cities/paris-sunset.jpg', 45 | alt: 'image', 46 | title: 'image' 47 | }, 48 | { 49 | src: 'assets/images/cities/red-sunset.jpg', 50 | alt: 'image', 51 | title: 'image' 52 | }, 53 | { 54 | src: 'assets/images/cities/river-and-bridge.jpg', 55 | alt: 'image', 56 | title: 'image' 57 | }, 58 | { 59 | src: 'assets/images/cities/town-hall.jpg', 60 | alt: 'image', 61 | title: 'image' 62 | } 63 | ] 64 | 65 | customOptions: OwlOptions = { 66 | loop: true, 67 | mouseDrag: false, 68 | touchDrag: false, 69 | pullDrag: false, 70 | dots: false, 71 | navSpeed: 700, 72 | navText: ['<<', '>>'], 73 | center: true, 74 | responsive: { 75 | 0: { 76 | items: 1 77 | }, 78 | 400: { 79 | items: 2 80 | }, 81 | 740: { 82 | items: 3 83 | }, 84 | 940: { 85 | items: 1 86 | } 87 | }, 88 | nav: true 89 | } 90 | 91 | constructor() { } 92 | 93 | 94 | } 95 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/document-ref.service.ts: -------------------------------------------------------------------------------- 1 | import { isPlatformBrowser } from '@angular/common'; 2 | import { ClassProvider, FactoryProvider, InjectionToken, PLATFORM_ID, Injectable } from '@angular/core'; 3 | 4 | /** 5 | * Create a new injection token for injecting the Document into a component. 6 | */ 7 | export const DOCUMENT = new InjectionToken('DocumentToken'); 8 | /** 9 | * Define abstract class for obtaining reference to the global Document object. 10 | */ 11 | export abstract class DocumentRef { 12 | get nativeDocument(): Document | Object { 13 | throw new Error('Not implemented.'); 14 | } 15 | } 16 | 17 | /** 18 | * Define class that implements the abstract class and returns the native Document object. 19 | */ 20 | @Injectable() 21 | export class BrowserDocumentRef extends DocumentRef { 22 | constructor() { 23 | super(); 24 | } 25 | 26 | /** 27 | * @returns Document object 28 | */ 29 | get nativeDocument(): Document | Object { 30 | return document; 31 | } 32 | } 33 | 34 | /** 35 | * Create an factory function that returns the native Document object. 36 | * @param browserDocumentRef Native Document object 37 | * @param platformId id of platform 38 | * @returns type of platform of empty object 39 | */ 40 | export function documentFactory( 41 | browserDocumentRef: BrowserDocumentRef, 42 | platformId: Object 43 | ): Document | Object { 44 | if (isPlatformBrowser(platformId)) { 45 | return browserDocumentRef.nativeDocument; 46 | } 47 | const doc = { 48 | hidden: false, 49 | visibilityState: 'visible' 50 | } 51 | return doc; 52 | } 53 | 54 | /** 55 | * Create a injectable provider for the DocumentRef token that uses the BrowserDocumentRef class. 56 | */ 57 | export const browserDocumentProvider: ClassProvider = { 58 | provide: DocumentRef, 59 | useClass: BrowserDocumentRef 60 | }; 61 | 62 | /** 63 | * Create an injectable provider that uses the DocumentFactory function for returning the native Document object. 64 | */ 65 | export const documentProvider: FactoryProvider = { 66 | provide: DOCUMENT, 67 | useFactory: documentFactory, 68 | deps: [DocumentRef, PLATFORM_ID] 69 | }; 70 | 71 | /** 72 | * Create an array of providers. 73 | */ 74 | export const DOCUMENT_PROVIDERS = [browserDocumentProvider, documentProvider]; 75 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/models/slide.model.d.ts: -------------------------------------------------------------------------------- 1 | import { TemplateRef } from "@angular/core"; 2 | export declare class SlideModel { 3 | /** 4 | * Id of slide 5 | */ 6 | id: string; 7 | /** 8 | * Active state of slide. If true slide gets css-class .active 9 | */ 10 | isActive?: boolean; 11 | /** 12 | * TemplateRef of slide. In other words its html-markup 13 | */ 14 | tplRef?: TemplateRef; 15 | /** 16 | * Number of grid parts to be used 17 | */ 18 | dataMerge?: number; 19 | /** 20 | * Width of slide 21 | */ 22 | width?: number | string; 23 | /** 24 | * Css-rule 'margin-left' 25 | */ 26 | marginL?: number | string; 27 | /** 28 | * Css-rule 'margin-right' 29 | */ 30 | marginR?: number | string; 31 | /** 32 | * Make slide to be on center of the carousel 33 | */ 34 | isCentered?: boolean; 35 | /** 36 | * Mark slide to be on center of the carousel (has .center) 37 | */ 38 | center?: boolean; 39 | /** 40 | * Cloned slide. It's being used when 'loop'=true 41 | */ 42 | isCloned?: boolean; 43 | /** 44 | * Indicates whether slide should be lazy loaded 45 | */ 46 | load?: boolean; 47 | /** 48 | * Css-rule 'left' 49 | */ 50 | left?: number | string; 51 | /** 52 | * Changeable classes of slide 53 | */ 54 | classes?: { 55 | [key: string]: boolean; 56 | }; 57 | /** 58 | * Shows whether slide could be animated and could have css-class '.animated' 59 | */ 60 | isAnimated?: boolean; 61 | /** 62 | * Shows whether slide could be animated-in and could have css-class '.owl-animated-in' 63 | */ 64 | isDefAnimatedIn?: boolean; 65 | /** 66 | * Shows whether slide could be animated-out and could have css-class '.owl-animated-out' 67 | */ 68 | isDefAnimatedOut?: boolean; 69 | /** 70 | * Shows whether slide could be animated-in and could have animation css-class defined by user 71 | */ 72 | isCustomAnimatedIn?: boolean; 73 | /** 74 | * Shows whether slide could be animated-out and could have animation css-class defined by user 75 | */ 76 | isCustomAnimatedOut?: boolean; 77 | /** 78 | * State for defining the height of slide.It's values could be 'full' and 'nulled'. 'Full' sets css-height to 'auto', 'nulled' sets height to '0'. 79 | */ 80 | heightState?: string; 81 | /** 82 | * Hash (fragment) of url which corresponds to slide 83 | */ 84 | hashFragment?: string; 85 | } 86 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/models/slide.model.ts: -------------------------------------------------------------------------------- 1 | import { TemplateRef } from "@angular/core"; 2 | 3 | export class SlideModel { 4 | 5 | /** 6 | * Id of slide 7 | */ 8 | id: string; 9 | 10 | /** 11 | * Active state of slide. If true slide gets css-class .active 12 | */ 13 | isActive?: boolean; 14 | 15 | /** 16 | * TemplateRef of slide. In other words its html-markup 17 | */ 18 | tplRef?: TemplateRef; 19 | 20 | /** 21 | * Number of grid parts to be used 22 | */ 23 | dataMerge?: number; 24 | 25 | /** 26 | * Width of slide 27 | */ 28 | width?: number | string; 29 | 30 | /** 31 | * Css-rule 'margin-left' 32 | */ 33 | marginL?: number | string; 34 | 35 | /** 36 | * Css-rule 'margin-right' 37 | */ 38 | marginR?: number | string; 39 | 40 | /** 41 | * Make slide to be on center of the carousel 42 | */ 43 | isCentered?: boolean; 44 | 45 | /** 46 | * Mark slide to be on center of the carousel (has .center) 47 | */ 48 | center?: boolean; 49 | 50 | /** 51 | * Cloned slide. It's being used when 'loop'=true 52 | */ 53 | isCloned?: boolean; 54 | 55 | /** 56 | * Indicates whether slide should be lazy loaded 57 | */ 58 | load?: boolean; 59 | 60 | /** 61 | * Css-rule 'left' 62 | */ 63 | left?: number | string; 64 | 65 | /** 66 | * Changeable classes of slide 67 | */ 68 | classes?: {[key:string]: boolean}; 69 | 70 | /** 71 | * Shows whether slide could be animated and could have css-class '.animated' 72 | */ 73 | isAnimated?: boolean; 74 | 75 | /** 76 | * Shows whether slide could be animated-in and could have css-class '.owl-animated-in' 77 | */ 78 | isDefAnimatedIn?: boolean; 79 | /** 80 | * Shows whether slide could be animated-out and could have css-class '.owl-animated-out' 81 | */ 82 | isDefAnimatedOut?: boolean; 83 | /** 84 | * Shows whether slide could be animated-in and could have animation css-class defined by user 85 | */ 86 | isCustomAnimatedIn?: boolean; 87 | /** 88 | * Shows whether slide could be animated-out and could have animation css-class defined by user 89 | */ 90 | isCustomAnimatedOut?: boolean; 91 | 92 | /** 93 | * State for defining the height of slide.It's values could be 'full' and 'nulled'. 'Full' sets css-height to 'auto', 'nulled' sets height to '0'. 94 | */ 95 | heightState?: string; 96 | 97 | /** 98 | * Hash (fragment) of url which corresponds to slide 99 | */ 100 | hashFragment?: string; 101 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer", 4 | "node_modules/@nx/workspace/src/tslint" 5 | ], 6 | "rules": { 7 | "arrow-return-shorthand": true, 8 | "callable-types": true, 9 | "class-name": true, 10 | "deprecation": { 11 | "severity": "warn" 12 | }, 13 | "forin": true, 14 | "import-blacklist": [true, "rxjs/Rx"], 15 | "interface-over-type-literal": true, 16 | "member-access": false, 17 | "member-ordering": [ 18 | true, 19 | { 20 | "order": [ 21 | "static-field", 22 | "instance-field", 23 | "static-method", 24 | "instance-method" 25 | ] 26 | } 27 | ], 28 | "no-arg": true, 29 | "no-bitwise": true, 30 | "no-console": [true, "debug", "info", "time", "timeEnd", "trace"], 31 | "no-construct": true, 32 | "no-debugger": true, 33 | "no-duplicate-super": true, 34 | "no-empty": false, 35 | "no-empty-interface": true, 36 | "no-eval": true, 37 | "no-inferrable-types": [true, "ignore-params"], 38 | "no-misused-new": true, 39 | "no-non-null-assertion": true, 40 | "no-shadowed-variable": true, 41 | "no-string-literal": false, 42 | "no-string-throw": true, 43 | "no-switch-case-fall-through": true, 44 | "no-trailing-whitespace": true, 45 | "no-unnecessary-initializer": true, 46 | "no-unused-expression": true, 47 | "no-use-before-declare": true, 48 | "no-var-keyword": true, 49 | "object-literal-sort-keys": false, 50 | "prefer-const": true, 51 | "radix": true, 52 | "triple-equals": [true, "allow-null-check"], 53 | "unified-signatures": true, 54 | "variable-name": false, 55 | "directive-selector": [true, "attribute", "app", "camelCase"], 56 | "component-selector": [true, "element", "app", "kebab-case"], 57 | "no-output-on-prefix": true, 58 | "use-input-property-decorator": true, 59 | "use-output-property-decorator": true, 60 | "use-host-property-decorator": true, 61 | "no-input-rename": true, 62 | "no-output-rename": true, 63 | "use-life-cycle-interface": true, 64 | "use-pipe-transform-interface": true, 65 | "component-class-suffix": true, 66 | "directive-class-suffix": true, 67 | "nx-enforce-module-boundaries": [ 68 | true, 69 | { 70 | "allow": [], 71 | "depConstraints": [ 72 | { 73 | "sourceTag": "*", 74 | "onlyDependOnLibsWithTags": ["*"] 75 | } 76 | ], 77 | "enforceBuildableLibDependency": true 78 | } 79 | ] 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/window-ref.service.ts: -------------------------------------------------------------------------------- 1 | // import { Injectable } from '@angular/core'; 2 | // function _window(): any { 3 | // // return the global native browser window object 4 | // return window; 5 | // } 6 | // @Injectable() 7 | // export class WindowRefService { 8 | // get nativeWindow(): any { 9 | // return _window(); 10 | // } 11 | // } 12 | 13 | import { isPlatformBrowser } from '@angular/common'; 14 | import { ClassProvider, FactoryProvider, InjectionToken, PLATFORM_ID, Injectable } from '@angular/core'; 15 | 16 | /** 17 | * Create a new injection token for injecting the window into a component. 18 | */ 19 | export const WINDOW = new InjectionToken('WindowToken'); 20 | 21 | /** 22 | * Define abstract class for obtaining reference to the global window object. 23 | */ 24 | export abstract class WindowRef { 25 | get nativeWindow(): Window | Object { 26 | throw new Error('Not implemented.'); 27 | } 28 | } 29 | 30 | /** 31 | * Define class that implements the abstract class and returns the native window object. 32 | */ 33 | @Injectable() 34 | export class BrowserWindowRef extends WindowRef { 35 | constructor() { 36 | super(); 37 | } 38 | 39 | /** 40 | * @returns window object 41 | */ 42 | get nativeWindow(): Window | Object { 43 | return window; 44 | } 45 | } 46 | 47 | /** 48 | * Create an factory function that returns the native window object. 49 | * @param browserWindowRef Native window object 50 | * @param platformId id of platform 51 | * @returns type of platform of empty object 52 | */ 53 | export function windowFactory( 54 | browserWindowRef: BrowserWindowRef, 55 | platformId: Object 56 | ): Window | Object { 57 | if (isPlatformBrowser(platformId)) { 58 | return browserWindowRef.nativeWindow; 59 | } 60 | const obj = { 61 | setTimeout: (func: any, time: any) => { }, 62 | clearTimeout: (a: any) => { } 63 | } 64 | return obj; 65 | } 66 | 67 | /** 68 | * Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. 69 | */ 70 | export const browserWindowProvider: ClassProvider = { 71 | provide: WindowRef, 72 | useClass: BrowserWindowRef 73 | }; 74 | 75 | /** 76 | * Create an injectable provider that uses the windowFactory function for returning the native window object. 77 | */ 78 | export const windowProvider: FactoryProvider = { 79 | provide: WINDOW, 80 | useFactory: windowFactory, 81 | deps: [WindowRef, PLATFORM_ID] 82 | }; 83 | 84 | /** 85 | * Create an array of providers. 86 | */ 87 | export const WINDOW_PROVIDERS = [browserWindowProvider, windowProvider]; 88 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/mat-theme.scss: -------------------------------------------------------------------------------- 1 | // Custom Theming for Angular Material 2 | // For more information: https://material.angular.io/guide/theming 3 | @use 'sass:map'; 4 | @use '@angular/material' as mat; 5 | // @import '@angular/material/theming'; 6 | // Plus imports for other components in your app. 7 | 8 | // Include the common styles for Angular Material. We include this here so that you only 9 | // have to load a single css file for Angular Material in your app. 10 | // Be sure that you only ever include this mixin once! 11 | // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. 12 | // The following line adds: 13 | // 1. Default typography styles for all components 14 | // 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) 15 | // If you specify typography styles for the components you use elsewhere, you should delete this line. 16 | // If you don't need the default component typographies but still want the hierarchy styles, 17 | // you can delete this line and instead use: 18 | // `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` 19 | // @include mat.all-legacy-component-typographies(); 20 | @include mat.elevation-classes(); 21 | @include mat.app-background(); 22 | 23 | // Define the palettes for your theme using the Material Design palettes available in palette.scss 24 | // (imported above). For each palette, you can optionally specify a default, lighter, and darker 25 | // hue. Available color palettes: https://material.io/design/color/ 26 | $owl-primary: mat.m2-define-palette(mat.$m2-teal-palette); 27 | $owl-accent: mat.m2-define-palette(mat.$m2-lime-palette, A200, A100, A400); 28 | 29 | // The warn palette is optional (defaults to red). 30 | $owl-warn: mat.m2-define-palette(mat.$m2-red-palette); 31 | 32 | // Create the theme object. A theme consists of configurations for individual 33 | // theming systems such as "color" or "typography". 34 | $owl-theme: mat.m2-define-light-theme((color: (primary: $owl-primary, 35 | accent: $owl-accent, 36 | warn: $owl-warn, 37 | ))); 38 | 39 | // $accent: map-get($owl-theme, accent); 40 | // $primary: map-get($owl-theme, primary); 41 | // $warn: map-get($owl-theme, warn); 42 | 43 | // Include theme styles for core and each component used in your app. 44 | // Alternatively, you can import and @include the theme mixins for each component 45 | // that you are using. 46 | @include mat.elevation-classes(); 47 | @include mat.app-background(); 48 | @include mat.menu-theme($owl-theme); 49 | // @include mat.progress-spinner-theme($owl-theme); 50 | // @include mat.icon-theme($owl-theme); 51 | @include mat.button-theme($owl-theme); 52 | // @include mat.all-component-themes($owl-theme); -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/autoheight.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, OnDestroy } from '@angular/core'; 2 | import { Subscription, Observable, merge } from 'rxjs'; 3 | import { CarouselService } from './carousel.service'; 4 | import { tap } from 'rxjs/operators'; 5 | 6 | @Injectable() 7 | export class AutoHeightService implements OnDestroy { 8 | /** 9 | * Subscrioption to merge Observable from CarouselService 10 | */ 11 | autoHeightSubscription: Subscription; 12 | constructor(private carouselService: CarouselService) { 13 | this.spyDataStreams(); 14 | } 15 | 16 | ngOnDestroy() { 17 | this.autoHeightSubscription.unsubscribe(); 18 | } 19 | /** 20 | * Defines Observables which service must observe 21 | */ 22 | spyDataStreams() { 23 | const initializedCarousel$: Observable = this.carouselService.getInitializedState().pipe( 24 | tap(data => { 25 | if (this.carouselService.settings.autoHeight) { 26 | this.update(); 27 | } else { 28 | this.carouselService.slidesData.forEach(slide => slide.heightState = 'full'); 29 | } 30 | }) 31 | ); 32 | 33 | const changedSettings$: Observable = this.carouselService.getChangedState().pipe( 34 | tap(data => { 35 | if (this.carouselService.settings.autoHeight && data.property.name === 'position') { 36 | this.update(); 37 | } 38 | }) 39 | ); 40 | 41 | const refreshedCarousel$: Observable = this.carouselService.getRefreshedState().pipe( 42 | tap(data => { 43 | if (this.carouselService.settings.autoHeight) { 44 | this.update(); 45 | } 46 | }) 47 | ); 48 | 49 | const autoHeight$: Observable = merge(initializedCarousel$, changedSettings$, refreshedCarousel$).pipe( 50 | tap(() => { 51 | this.carouselService.slidesData.forEach(slide => slide.classes = this.carouselService.setCurSlideClasses(slide)); 52 | this.carouselService.sendChanges(); 53 | }) 54 | ); 55 | this.autoHeightSubscription = autoHeight$.subscribe( 56 | () => { } 57 | ); 58 | } 59 | 60 | /** 61 | * Updates the prop 'heightState' of slides 62 | */ 63 | update() { 64 | const items = this.carouselService.settings.items 65 | let start = this.carouselService.current(), 66 | end = start + items; 67 | 68 | if (this.carouselService.settings.center) { 69 | start = items % 2 === 1 ? start - (items - 1) / 2 : start - items / 2; 70 | end = items % 2 === 1 ? start + items : start + items + 1; 71 | } 72 | 73 | this.carouselService.slidesData.forEach((slide, i) => { 74 | slide.heightState = (i >= start && i < end) ? 'full' : 'nulled'; 75 | }); 76 | } 77 | 78 | 79 | } 80 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for the Reflect API. */ 38 | // import 'core-js/es6/reflect'; 39 | 40 | /** Evergreen browsers require these. **/ 41 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 42 | // import 'core-js/es7/reflect'; 43 | 44 | /** 45 | * By default, zone.js will patch all possible macroTask and DomEvents 46 | * user can disable parts of macroTask/DomEvents patch by setting following flags 47 | */ 48 | 49 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 50 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 51 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 52 | 53 | /* 54 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 55 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 56 | */ 57 | // (window as any).__Zone_enable_cross_context_check = true; 58 | 59 | /*************************************************************************************************** 60 | * Zone JS is required by default for Angular itself. 61 | */ 62 | import 'zone.js'; // Included with Angular CLI. 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": { 3 | "warnings": { 4 | "typescriptMismatch": false, 5 | "versionMismatch": false 6 | } 7 | }, 8 | "defaultProject": "demo-owl-carousel", 9 | "generators": { 10 | "@nx/angular:library": { 11 | "unitTestRunner": "karma" 12 | }, 13 | "@nx/angular:application": { 14 | "style": "scss", 15 | "unitTestRunner": "karma", 16 | "e2eTestRunner": "protractor" 17 | }, 18 | "@nx/angular:component": { 19 | "style": "scss", 20 | "type": "component" 21 | }, 22 | "@schematics/angular:component": { 23 | "type": "component" 24 | }, 25 | "@nx/angular:directive": { 26 | "type": "directive" 27 | }, 28 | "@schematics/angular:directive": { 29 | "type": "directive" 30 | }, 31 | "@nx/angular:service": { 32 | "type": "service" 33 | }, 34 | "@schematics/angular:service": { 35 | "type": "service" 36 | }, 37 | "@nx/angular:scam": { 38 | "type": "component" 39 | }, 40 | "@nx/angular:scam-directive": { 41 | "type": "directive" 42 | }, 43 | "@nx/angular:guard": { 44 | "typeSeparator": "." 45 | }, 46 | "@schematics/angular:guard": { 47 | "typeSeparator": "." 48 | }, 49 | "@nx/angular:interceptor": { 50 | "typeSeparator": "." 51 | }, 52 | "@schematics/angular:interceptor": { 53 | "typeSeparator": "." 54 | }, 55 | "@nx/angular:module": { 56 | "typeSeparator": "." 57 | }, 58 | "@schematics/angular:module": { 59 | "typeSeparator": "." 60 | }, 61 | "@nx/angular:pipe": { 62 | "typeSeparator": "." 63 | }, 64 | "@schematics/angular:pipe": { 65 | "typeSeparator": "." 66 | }, 67 | "@nx/angular:resolver": { 68 | "typeSeparator": "." 69 | }, 70 | "@schematics/angular:resolver": { 71 | "typeSeparator": "." 72 | } 73 | }, 74 | "$schema": "./node_modules/nx/schemas/nx-schema.json", 75 | "targetDefaults": { 76 | "build": { 77 | "dependsOn": ["^build"], 78 | "inputs": ["production", "^production"], 79 | "cache": true 80 | }, 81 | "test": { 82 | "inputs": ["default", "^production"], 83 | "cache": true 84 | }, 85 | "lint": { 86 | "cache": true 87 | }, 88 | "e2e": { 89 | "cache": true 90 | } 91 | }, 92 | "namedInputs": { 93 | "default": ["{projectRoot}/**/*", "sharedGlobals"], 94 | "sharedGlobals": [ 95 | "{workspaceRoot}/tslint.json", 96 | "{workspaceRoot}/nx.json", 97 | "{workspaceRoot}/tsconfig.base.json" 98 | ], 99 | "production": [ 100 | "default", 101 | "!{projectRoot}/**/*.spec.[jt]s", 102 | "!{projectRoot}/tsconfig.spec.json", 103 | "!{projectRoot}/karma.conf.js" 104 | ] 105 | }, 106 | "parallel": 1, 107 | "defaultBase": "master", 108 | "useLegacyCache": true 109 | } 110 | -------------------------------------------------------------------------------- /decorate-angular-cli.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file decorates the Angular CLI with the Nx CLI to enable features such as computation caching 3 | * and faster execution of tasks. 4 | * 5 | * It does this by: 6 | * 7 | * - Patching the Angular CLI to warn you in case you accidentally use the undecorated ng command. 8 | * - Symlinking the ng to nx command, so all commands run through the Nx CLI 9 | * - Updating the package.json postinstall script to give you control over this script 10 | * 11 | * The Nx CLI decorates the Angular CLI, so the Nx CLI is fully compatible with it. 12 | * Every command you run should work the same when using the Nx CLI, except faster. 13 | * 14 | * Because of symlinking you can still type `ng build/test/lint` in the terminal. The ng command, in this case, 15 | * will point to nx, which will perform optimizations before invoking ng. So the Angular CLI is always invoked. 16 | * The Nx CLI simply does some optimizations before invoking the Angular CLI. 17 | * 18 | * To opt out of this patch: 19 | * - Replace occurrences of nx with ng in your package.json 20 | * - Remove the script from your postinstall script in your package.json 21 | * - Delete and reinstall your node_modules 22 | */ 23 | 24 | const fs = require('fs'); 25 | const os = require('os'); 26 | const cp = require('child_process'); 27 | const isWindows = os.platform() === 'win32'; 28 | let output; 29 | try { 30 | output = require('@nx/workspace').output; 31 | } catch (e) { 32 | console.warn( 33 | 'Angular CLI could not be decorated to enable computation caching. Please ensure @nx/workspace is installed.' 34 | ); 35 | process.exit(0); 36 | } 37 | 38 | /** 39 | * Symlink of ng to nx, so you can keep using `ng build/test/lint` and still 40 | * invoke the Nx CLI and get the benefits of computation caching. 41 | */ 42 | function symlinkNgCLItoNxCLI() { 43 | try { 44 | const ngPath = './node_modules/.bin/ng'; 45 | const nxPath = './node_modules/.bin/nx'; 46 | if (isWindows) { 47 | /** 48 | * This is the most reliable way to create symlink-like behavior on Windows. 49 | * Such that it works in all shells and works with npx. 50 | */ 51 | ['', '.cmd', '.ps1'].forEach((ext) => { 52 | if (fs.existsSync(nxPath + ext)) 53 | fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext)); 54 | }); 55 | } else { 56 | // If unix-based, symlink 57 | cp.execSync(`ln -sf ./nx ${ngPath}`); 58 | } 59 | } catch (e) { 60 | output.error({ 61 | title: 62 | 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + 63 | e.message, 64 | }); 65 | throw e; 66 | } 67 | } 68 | 69 | try { 70 | symlinkNgCLItoNxCLI(); 71 | require('@nrwl/cli/lib/decorate-cli').decorateCli(); 72 | output.log({ 73 | title: 'Angular CLI has been decorated to enable computation caching.', 74 | }); 75 | } catch (e) { 76 | output.error({ 77 | title: 'Decoration of the Angular CLI did not complete successfully', 78 | }); 79 | } 80 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/carousel/owl-carousel-o-config.d.ts: -------------------------------------------------------------------------------- 1 | import { OwlOptions } from "../models/owl-options.model"; 2 | /** 3 | * Defaults value of options 4 | */ 5 | export declare class OwlCarouselOConfig implements OwlOptions { 6 | items: number; 7 | skip_validateItems: boolean; 8 | loop: boolean; 9 | center: boolean; 10 | rewind: boolean; 11 | mouseDrag: boolean; 12 | touchDrag: boolean; 13 | pullDrag: boolean; 14 | freeDrag: boolean; 15 | margin: number; 16 | stagePadding: number; 17 | merge: boolean; 18 | mergeFit: boolean; 19 | autoWidth: boolean; 20 | startPosition: number; 21 | rtl: boolean; 22 | smartSpeed: number; 23 | fluidSpeed: boolean; 24 | dragEndSpeed: boolean; 25 | responsive: {}; 26 | responsiveRefreshRate: number; 27 | nav: boolean; 28 | navText: string[]; 29 | navSpeed: boolean; 30 | slideBy: number; 31 | dots: boolean; 32 | dotsEach: boolean; 33 | dotsData: boolean; 34 | dotsSpeed: boolean; 35 | autoplay: boolean; 36 | autoplayTimeout: number; 37 | autoplayHoverPause: boolean; 38 | autoplaySpeed: boolean; 39 | autoplayMouseleaveTimeout: number; 40 | lazyLoad: boolean; 41 | lazyLoadEager: number; 42 | slideTransition: string; 43 | animateOut: boolean; 44 | animateIn: boolean; 45 | autoHeight: boolean; 46 | URLhashListener: boolean; 47 | constructor(); 48 | } 49 | /** 50 | * we can't read types from OwlOptions in javascript because of props have undefined value and types of those props are used for validating inputs 51 | * class below is copy of OwlOptions but its all props have string value showing certain type; 52 | * this is class is being used just in method _validateOptions() of CarouselService; 53 | */ 54 | export declare class OwlOptionsMockedTypes { 55 | items: string; 56 | skip_validateItems: string; 57 | loop: string; 58 | center: string; 59 | rewind: string; 60 | mouseDrag: string; 61 | touchDrag: string; 62 | pullDrag: string; 63 | freeDrag: string; 64 | margin: string; 65 | stagePadding: string; 66 | merge: string; 67 | mergeFit: string; 68 | autoWidth: string; 69 | startPosition: string; 70 | rtl: string; 71 | smartSpeed: string; 72 | fluidSpeed: string; 73 | dragEndSpeed: string; 74 | responsive: {}; 75 | responsiveRefreshRate: string; 76 | nav: string; 77 | navText: string; 78 | navSpeed: string; 79 | slideBy: string; 80 | dots: string; 81 | dotsEach: string; 82 | dotsData: string; 83 | dotsSpeed: string; 84 | autoplay: string; 85 | autoplayTimeout: string; 86 | autoplayHoverPause: string; 87 | autoplaySpeed: string; 88 | autoplayMouseleaveTimeout: string; 89 | lazyLoad: string; 90 | lazyLoadEager: string; 91 | slideTransition: string; 92 | animateOut: string; 93 | animateIn: string; 94 | autoHeight: string; 95 | URLhashListener: string; 96 | constructor(); 97 | } 98 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/present/present.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Component, OnInit, ChangeDetectionStrategy, WritableSignal, signal } from '@angular/core'; 3 | import { CarouselModule, OwlOptions, SlidesOutputData } from 'ngx-owl-carousel-o'; 4 | import { MatMenuModule } from '@angular/material/menu'; 5 | import { MatButtonModule } from '@angular/material/button'; 6 | 7 | interface CarouselData { 8 | id?: string; 9 | text: string; 10 | dataMerge?: number; 11 | width: number; 12 | dotContent?: string; 13 | src?: string; 14 | dataHash?: string; 15 | } 16 | 17 | 18 | @Component({ 19 | selector: 'app-present', 20 | imports: [CarouselModule, MatMenuModule, MatButtonModule], 21 | templateUrl: './present.component.html', 22 | styleUrl: './present.component.sass', 23 | changeDetection: ChangeDetectionStrategy.OnPush 24 | }) 25 | export class PresentComponent implements OnInit { 26 | carouselData: CarouselData[] = [ 27 | { text: 'Slide 1 PM', dataMerge: 2, width: 300, dotContent: 'text1' }, 28 | { text: 'Slide 2 PM', dataMerge: 1, width: 500, dotContent: 'text2' }, 29 | { text: 'Slide 3 PM', dataMerge: 3, width: 500, dotContent: 'text3' }, 30 | { text: 'Slide 4 PM', width: 450, dotContent: 'text4' }, 31 | { text: 'Slide 5 PM', dataMerge: 2, width: 500, dotContent: 'text5' }, 32 | // { text: 'Slide 6', dotContent: 'text5'}, 33 | // { text: 'Slide 7', dotContent: 'text5'}, 34 | // { text: 'Slide 8', dotContent: 'text5'}, 35 | // { text: 'Slide 9', dotContent: 'text5'}, 36 | // { text: 'Slide 10', dotContent: 'text5'}, 37 | ]; 38 | title = 'owl-carousel-libdemo'; 39 | owlNext = '→'; 40 | owlPrev = '←'; 41 | 42 | 43 | customOptions: OwlOptions = { 44 | // autoWidth: true, 45 | loop: true, 46 | // items: '10', 47 | // margin: 10, 48 | // slideBy: 'page', 49 | // merge: true, 50 | autoplay: true, 51 | autoplayTimeout: 1000, 52 | autoplayHoverPause: true, 53 | autoplaySpeed: 900, 54 | dotsSpeed: 500, 55 | autoplayMouseleaveTimeout: 1100, 56 | // dots: false, 57 | // dotsData: true, 58 | // mouseDrag: false, 59 | // touchDrag: false, 60 | // pullDrag: false, 61 | smartSpeed: 400, 62 | // fluidSpeed: 499, 63 | dragEndSpeed: 350, 64 | // dotsEach: 4, 65 | // center: true, 66 | // rewind: true, 67 | // rtl: true, 68 | // startPosition: 1, 69 | // navText: [ 'left', 'right' ], 70 | responsive: { 71 | 0: { 72 | items: 1 73 | }, 74 | 600: { 75 | items: 2 76 | }, 77 | 900: { 78 | items: 3 79 | } 80 | }, 81 | // stagePadding: 40, 82 | nav: true 83 | } 84 | activeSlides: WritableSignal = signal({}); 85 | 86 | constructor() { } 87 | 88 | ngOnInit() { 89 | } 90 | 91 | getPassedData(data: any) { 92 | this.activeSlides.set(data); 93 | // console.log(this.activeSlides()); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/home/subhome/subhome.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, WritableSignal, signal } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { Router, ActivatedRoute, RouterLink } from '@angular/router'; 5 | import { tap } from 'rxjs/operators'; 6 | import { SlidesOutputData, OwlOptions, CarouselModule } from 'ngx-owl-carousel-o'; 7 | 8 | interface CarouselData { 9 | id?: string; 10 | text: string; 11 | dataMerge?: number; 12 | width?: number; 13 | dotContent?: string; 14 | src?: string; 15 | dataHash: string; 16 | } 17 | 18 | @Component({ 19 | selector: 'app-subhome', 20 | imports: [CommonModule, RouterLink, CarouselModule], 21 | templateUrl: './subhome.component.html', 22 | styleUrl: './subhome.component.scss' 23 | }) 24 | export class SubhomeComponent implements OnInit { 25 | currentUrl: WritableSignal = signal(''); 26 | fragment: WritableSignal = signal(''); 27 | carouselData: CarouselData[] = [ 28 | { text: 'Slide 1', src: 'assets/images/350x450&text=1.png', dataHash: 'one' }, 29 | { text: 'Slide 2', src: 'assets/images/350x650&text=2.png', dataHash: 'two' }, 30 | { text: 'Slide 3', src: 'assets/images/350x250&text=3-fallback.png', dataHash: 'three' }, 31 | { text: 'Slide 4', src: 'assets/images/350x250&text=4.png', dataHash: 'four' }, 32 | { text: 'Slide 5', src: 'assets/images/350x250&text=5.png', dataHash: 'five', }, 33 | // { text: 'Slide 6', dotContent: 'text5'}, 34 | // { text: 'Slide 7', dotContent: 'text5'}, 35 | // { text: 'Slide 8', dotContent: 'text5'}, 36 | // { text: 'Slide 9', dotContent: 'text5'}, 37 | // { text: 'Slide 10', dotContent: 'text5'}, 38 | ]; 39 | customOptions: OwlOptions = { 40 | loop: true, 41 | autoHeight: true, 42 | nav: true, 43 | center: true, 44 | URLhashListener: true, 45 | startPosition: 'URLHash', 46 | responsive: { 47 | 0: { 48 | items: 1 49 | }, 50 | 600: { 51 | items: 2 52 | }, 53 | 900: { 54 | items: 3 55 | } 56 | }, 57 | } 58 | 59 | activeSlides: WritableSignal = signal(null); 60 | 61 | constructor(private route: ActivatedRoute, 62 | private router: Router) { } 63 | 64 | ngOnInit() { 65 | this.route.fragment.pipe( 66 | tap(fragment => this.fragment.set(fragment as string)), 67 | // tap(() => console.log('this.fragment()', this.fragment())) 68 | ).subscribe( 69 | () => { } 70 | ); 71 | 72 | this.route.url.pipe( 73 | tap(url => this.currentUrl.set(url[0].path)), 74 | // tap(() => console.log('this.currentUrl()', this.currentUrl())) 75 | ).subscribe( 76 | () => { } 77 | ) 78 | } 79 | 80 | moveToSS() { 81 | this.router.navigate(['./'], { fragment: 'subhome-section-4', relativeTo: this.route }); 82 | } 83 | 84 | getPassedData(data: any) { 85 | this.activeSlides.set(data); 86 | console.log('SubHomeComponent'); 87 | console.log(this.activeSlides()); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/src/app/doubled-carousel/doubled-carousel.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Component, OnInit, ViewChild } from '@angular/core'; 3 | import { CarouselComponent, CarouselModule, OwlOptions, SlidesOutputData } from 'ngx-owl-carousel-o'; 4 | 5 | @Component({ 6 | selector: 'app-doubled-carousel', 7 | imports: [CarouselModule], 8 | templateUrl: './doubled-carousel.component.html', 9 | styleUrl: './doubled-carousel.component.scss' 10 | }) 11 | export class DoubledCarouselComponent implements OnInit { 12 | @ViewChild('owlMac') owlMac!: CarouselComponent; 13 | @ViewChild('owlCat') owlCat!: CarouselComponent; 14 | 15 | categoriesOptions: any = { 16 | loop: true, 17 | mouseDrag: false, 18 | touchDrag: false, 19 | pullDrag: false, 20 | center: true, 21 | margin: 10, 22 | dotsSpeed: 300, 23 | responsive: { 24 | 0: { 25 | items: 4, 26 | loop: true, 27 | }, 28 | 400: { 29 | items: 4, 30 | loop: true, 31 | }, 32 | 740: { 33 | items: 4, 34 | loop: true, 35 | }, 36 | 940: { 37 | items: 4, 38 | loop: true, 39 | } 40 | } 41 | }; 42 | 43 | carouselOptions: OwlOptions = { 44 | loop: true, 45 | mouseDrag: true, 46 | touchDrag: true, 47 | pullDrag: true, 48 | dragEndSpeed: 450, 49 | items: 1, 50 | // responsive: { 51 | // 0: { 52 | // items: 1, 53 | // loop: true, 54 | // }, 55 | // 400: { 56 | // items: 1, 57 | // loop: true, 58 | // }, 59 | // 740: { 60 | // items: 1, 61 | // loop: true, 62 | // }, 63 | // 940: { 64 | // items: 1, 65 | // loop: true, 66 | // } 67 | // } 68 | }; 69 | 70 | categories: any = { 71 | items: [ 72 | { 73 | id: 'slide-1', 74 | displayedName: 'Slide 1' 75 | }, 76 | { 77 | id: 'slide-2', 78 | displayedName: 'Slide 2' 79 | }, 80 | { 81 | id: 'slide-3', 82 | displayedName: 'Slide 3' 83 | }, 84 | { 85 | id: 'slide-4', 86 | displayedName: 'Slide 4' 87 | }, 88 | { 89 | id: 'slide-5', 90 | displayedName: 'Slide 5' 91 | }, 92 | // { 93 | // id: 'slide-6', 94 | // displayedName: 'Slide 6' 95 | // }, 96 | // { 97 | // id: 'slide-7', 98 | // displayedName: 'Slide 7' 99 | // }, 100 | // { 101 | // id: 'slide-8', 102 | // displayedName: 'Slide 8' 103 | // } 104 | ] 105 | 106 | }; 107 | constructor() { } 108 | 109 | slideTo(category: string) { 110 | this.owlMac.moveByDot(category); 111 | } 112 | 113 | changeSlide($event: SlidesOutputData) { 114 | if (this.owlCat) { 115 | // this.category$.next($event.slides[0].id); 116 | this.owlCat.moveByDot(this.owlCat.dotsData().dots[$event.startPosition as number].id) 117 | } 118 | } 119 | 120 | 121 | ngOnInit() { 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/autoplay.service.d.ts: -------------------------------------------------------------------------------- 1 | import { OnDestroy, NgZone } from '@angular/core'; 2 | import { Subscription } from 'rxjs'; 3 | import { CarouselService } from './carousel.service'; 4 | import * as i0 from "@angular/core"; 5 | export declare class AutoplayService implements OnDestroy { 6 | private carouselService; 7 | private ngZone; 8 | /** 9 | * Subscrioption to merge Observables from CarouselService 10 | */ 11 | autoplaySubscription: Subscription; 12 | /** 13 | * The autoplay timeout. 14 | */ 15 | private _timeout; 16 | /** 17 | * Indicates whenever the autoplay is paused. 18 | */ 19 | private _paused; 20 | /** 21 | * Shows whether the code (the plugin) changed the option 'AutoplayTimeout' for own needs 22 | */ 23 | private _isArtificialAutoplayTimeout; 24 | /** 25 | * Shows whether the autoplay is paused for unlimited time by the developer. 26 | * Use to prevent autoplaying in case of firing `mouseleave` by adding layers to `` like `mat-menu` does 27 | */ 28 | private _isAutoplayStopped; 29 | get isAutoplayStopped(): boolean; 30 | set isAutoplayStopped(value: boolean); 31 | private winRef; 32 | private docRef; 33 | constructor(carouselService: CarouselService, winRef: any, docRef: any, ngZone: NgZone); 34 | ngOnDestroy(): void; 35 | /** 36 | * Defines Observables which service must observe 37 | */ 38 | spyDataStreams(): void; 39 | /** 40 | * Starts the autoplay. 41 | * @param timeout The interval before the next animation starts. 42 | * @param speed The animation speed for the animations. 43 | */ 44 | play(timeout?: number, speed?: number): void; 45 | /** 46 | * Gets a new timeout 47 | * @param timeout - The interval before the next animation starts. 48 | * @param speed - The animation speed for the animations. 49 | * @return 50 | */ 51 | private _getNextTimeout; 52 | /** 53 | * Sets autoplay in motion. 54 | */ 55 | private _setAutoPlayInterval; 56 | /** 57 | * Stops the autoplay. 58 | */ 59 | stop(): void; 60 | /** 61 | * Stops the autoplay. 62 | */ 63 | pause(): void; 64 | /** 65 | * Manages by autoplaying according to data passed by _changedSettingsCarousel$ Obsarvable 66 | * @param data object with current position of carousel and type of change 67 | */ 68 | private _handleChangeObservable; 69 | /** 70 | * Starts autoplaying of the carousel in the case when user leaves the carousel before it starts translateing (moving) 71 | */ 72 | private _playAfterTranslated; 73 | /** 74 | * Starts pausing 75 | */ 76 | startPausing(): void; 77 | /** 78 | * Starts playing after mouse leaves carousel 79 | */ 80 | startPlayingMouseLeave(): void; 81 | /** 82 | * Starts playing after touch ends 83 | */ 84 | startPlayingTouchEnd(): void; 85 | static ɵfac: i0.ɵɵFactoryDeclaration; 86 | static ɵprov: i0.ɵɵInjectableDeclaration; 87 | } 88 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/scss/_core.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Core 3 | */ 4 | .owl-carousel { 5 | display: none; 6 | width: 100%; 7 | -webkit-tap-highlight-color: transparent; 8 | /* position relative and z-index fix webkit rendering fonts issue */ 9 | position: relative; 10 | z-index: 1; 11 | 12 | .owl-stage { 13 | position: relative; 14 | -ms-touch-action: pan-Y; 15 | touch-action: manipulation; 16 | -moz-backface-visibility: hidden; 17 | /* fix firefox animation glitch */ 18 | } 19 | 20 | .owl-stage:after { 21 | content: "."; 22 | display: block; 23 | clear: both; 24 | visibility: hidden; 25 | line-height: 0; 26 | height: 0; 27 | } 28 | 29 | .owl-stage-outer { 30 | position: relative; 31 | overflow: hidden; 32 | /* fix for flashing background */ 33 | -webkit-transform: translate3d(0px, 0px, 0px); 34 | } 35 | 36 | .owl-wrapper, 37 | .owl-item { 38 | -webkit-backface-visibility: hidden; 39 | -moz-backface-visibility: hidden; 40 | -ms-backface-visibility: hidden; 41 | -webkit-transform: translate3d(0, 0, 0); 42 | -moz-transform: translate3d(0, 0, 0); 43 | -ms-transform: translate3d(0, 0, 0); 44 | } 45 | 46 | .owl-item { 47 | position: relative; 48 | min-height: 1px; 49 | float: left; 50 | -webkit-backface-visibility: hidden; 51 | -webkit-tap-highlight-color: transparent; 52 | -webkit-touch-callout: none; 53 | 54 | &.center { 55 | z-index: 5; 56 | } 57 | } 58 | 59 | .owl-item img { 60 | display: block; 61 | width: 100%; 62 | } 63 | 64 | .owl-dots.disabled { 65 | display: none; 66 | } 67 | 68 | .owl-carousel-inner { 69 | position: relative; 70 | 71 | .owl-next, 72 | .owl-prev { 73 | z-index: 10; 74 | position: absolute; 75 | top: 50%; 76 | transform: translateY(-50%); 77 | } 78 | 79 | button.owl-next, 80 | button.owl-prev { 81 | border: none; 82 | } 83 | 84 | .owl-prev { 85 | left: 10px; 86 | } 87 | 88 | .owl-next { 89 | right: 10px; 90 | } 91 | } 92 | 93 | .owl-carousel-inner .owl-prev, 94 | .owl-carousel-inner .owl-next, 95 | .owl-dot { 96 | cursor: pointer; 97 | -webkit-user-select: none; 98 | -khtml-user-select: none; 99 | -moz-user-select: none; 100 | -ms-user-select: none; 101 | user-select: none; 102 | } 103 | 104 | button.owl-dot { 105 | background: none; 106 | color: inherit; 107 | border: none; 108 | padding: 0 !important; 109 | font: inherit; 110 | } 111 | 112 | &.owl-loaded { 113 | display: block; 114 | } 115 | 116 | &.owl-loading { 117 | opacity: 0; 118 | display: block; 119 | } 120 | 121 | &.owl-hidden { 122 | opacity: 0; 123 | } 124 | 125 | &.owl-refresh .owl-item { 126 | visibility: hidden; 127 | } 128 | 129 | &.owl-drag .owl-item { 130 | touch-action: pan-y; 131 | -webkit-user-select: none; 132 | -moz-user-select: none; 133 | -ms-user-select: none; 134 | user-select: none; 135 | } 136 | 137 | &.owl-grab { 138 | cursor: move; 139 | cursor: grab; 140 | } 141 | 142 | &.owl-rtl { 143 | direction: rtl; 144 | } 145 | 146 | &.owl-rtl .owl-item { 147 | float: right; 148 | } 149 | } 150 | 151 | /* No Js */ 152 | .no-js .owl-carousel { 153 | display: block; 154 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/scss/_core.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Core 3 | */ 4 | .owl-carousel { 5 | display: none; 6 | width: 100%; 7 | -webkit-tap-highlight-color: transparent; 8 | /* position relative and z-index fix webkit rendering fonts issue */ 9 | position: relative; 10 | z-index: 1; 11 | 12 | .owl-stage { 13 | position: relative; 14 | -ms-touch-action: pan-Y; 15 | touch-action: manipulation; 16 | -moz-backface-visibility: hidden; 17 | /* fix firefox animation glitch */ 18 | } 19 | 20 | .owl-stage:after { 21 | content: "."; 22 | display: block; 23 | clear: both; 24 | visibility: hidden; 25 | line-height: 0; 26 | height: 0; 27 | } 28 | 29 | .owl-stage-outer { 30 | position: relative; 31 | overflow: hidden; 32 | /* fix for flashing background */ 33 | -webkit-transform: translate3d(0px, 0px, 0px); 34 | } 35 | 36 | .owl-wrapper, 37 | .owl-item { 38 | -webkit-backface-visibility: hidden; 39 | -moz-backface-visibility: hidden; 40 | -ms-backface-visibility: hidden; 41 | -webkit-transform: translate3d(0, 0, 0); 42 | -moz-transform: translate3d(0, 0, 0); 43 | -ms-transform: translate3d(0, 0, 0); 44 | } 45 | 46 | .owl-item { 47 | position: relative; 48 | min-height: 1px; 49 | float: left; 50 | -webkit-backface-visibility: hidden; 51 | -webkit-tap-highlight-color: transparent; 52 | -webkit-touch-callout: none; 53 | 54 | &.center { 55 | z-index: 5; 56 | } 57 | } 58 | 59 | .owl-item img { 60 | display: block; 61 | width: 100%; 62 | } 63 | 64 | .owl-dots.disabled { 65 | display: none; 66 | } 67 | 68 | .owl-carousel-inner { 69 | position: relative; 70 | 71 | .owl-next, 72 | .owl-prev { 73 | z-index: 10; 74 | position: absolute; 75 | top: 50%; 76 | transform: translateY(-50%); 77 | } 78 | 79 | button.owl-next, 80 | button.owl-prev { 81 | border: none; 82 | } 83 | 84 | .owl-prev { 85 | left: 10px; 86 | } 87 | 88 | .owl-next { 89 | right: 10px; 90 | } 91 | } 92 | 93 | .owl-carousel-inner .owl-prev, 94 | .owl-carousel-inner .owl-next, 95 | .owl-dot { 96 | cursor: pointer; 97 | -webkit-user-select: none; 98 | -khtml-user-select: none; 99 | -moz-user-select: none; 100 | -ms-user-select: none; 101 | user-select: none; 102 | } 103 | 104 | button.owl-dot { 105 | background: none; 106 | color: inherit; 107 | border: none; 108 | padding: 0 !important; 109 | font: inherit; 110 | } 111 | 112 | &.owl-loaded { 113 | display: block; 114 | } 115 | 116 | &.owl-loading { 117 | opacity: 0; 118 | display: block; 119 | } 120 | 121 | &.owl-hidden { 122 | opacity: 0; 123 | } 124 | 125 | &.owl-refresh .owl-item { 126 | visibility: hidden; 127 | } 128 | 129 | &.owl-drag .owl-item { 130 | touch-action: pan-y; 131 | -webkit-user-select: none; 132 | -moz-user-select: none; 133 | -ms-user-select: none; 134 | user-select: none; 135 | } 136 | 137 | &.owl-grab { 138 | cursor: move; 139 | cursor: grab; 140 | } 141 | 142 | &.owl-rtl { 143 | direction: rtl; 144 | } 145 | 146 | &.owl-rtl .owl-item { 147 | float: right; 148 | } 149 | } 150 | 151 | /* No Js */ 152 | .no-js .owl-carousel { 153 | display: block; 154 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/scss/_core.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Owl Carousel - Core 3 | */ 4 | .owl-carousel { 5 | display: none; 6 | width: 100%; 7 | -webkit-tap-highlight-color: transparent; 8 | /* position relative and z-index fix webkit rendering fonts issue */ 9 | position: relative; 10 | z-index: 1; 11 | 12 | .owl-stage { 13 | position: relative; 14 | -ms-touch-action: pan-Y; 15 | touch-action: manipulation; 16 | -moz-backface-visibility: hidden; 17 | /* fix firefox animation glitch */ 18 | } 19 | 20 | .owl-stage:after { 21 | content: "."; 22 | display: block; 23 | clear: both; 24 | visibility: hidden; 25 | line-height: 0; 26 | height: 0; 27 | } 28 | 29 | .owl-stage-outer { 30 | position: relative; 31 | overflow: hidden; 32 | /* fix for flashing background */ 33 | -webkit-transform: translate3d(0px, 0px, 0px); 34 | } 35 | 36 | .owl-wrapper, 37 | .owl-item { 38 | -webkit-backface-visibility: hidden; 39 | -moz-backface-visibility: hidden; 40 | -ms-backface-visibility: hidden; 41 | -webkit-transform: translate3d(0, 0, 0); 42 | -moz-transform: translate3d(0, 0, 0); 43 | -ms-transform: translate3d(0, 0, 0); 44 | } 45 | 46 | .owl-item { 47 | position: relative; 48 | min-height: 1px; 49 | float: left; 50 | -webkit-backface-visibility: hidden; 51 | -webkit-tap-highlight-color: transparent; 52 | -webkit-touch-callout: none; 53 | 54 | &.center { 55 | z-index: 5; 56 | } 57 | } 58 | 59 | .owl-item img { 60 | display: block; 61 | width: 100%; 62 | } 63 | 64 | .owl-dots.disabled { 65 | display: none; 66 | } 67 | 68 | .owl-carousel-inner { 69 | position: relative; 70 | 71 | .owl-next, 72 | .owl-prev { 73 | z-index: 10; 74 | position: absolute; 75 | top: 50%; 76 | transform: translateY(-50%); 77 | } 78 | 79 | button.owl-next, 80 | button.owl-prev { 81 | border: none; 82 | } 83 | 84 | .owl-prev { 85 | left: 10px; 86 | } 87 | 88 | .owl-next { 89 | right: 10px; 90 | } 91 | } 92 | 93 | .owl-carousel-inner .owl-prev, 94 | .owl-carousel-inner .owl-next, 95 | .owl-dot { 96 | cursor: pointer; 97 | -webkit-user-select: none; 98 | -khtml-user-select: none; 99 | -moz-user-select: none; 100 | -ms-user-select: none; 101 | user-select: none; 102 | } 103 | 104 | button.owl-dot { 105 | background: none; 106 | color: inherit; 107 | border: none; 108 | padding: 0 !important; 109 | font: inherit; 110 | } 111 | 112 | &.owl-loaded { 113 | display: block; 114 | } 115 | 116 | &.owl-loading { 117 | opacity: 0; 118 | display: block; 119 | } 120 | 121 | &.owl-hidden { 122 | opacity: 0; 123 | } 124 | 125 | &.owl-refresh .owl-item { 126 | visibility: hidden; 127 | } 128 | 129 | &.owl-drag .owl-item { 130 | touch-action: pan-y; 131 | -webkit-user-select: none; 132 | -moz-user-select: none; 133 | -ms-user-select: none; 134 | user-select: none; 135 | } 136 | 137 | &.owl-grab { 138 | cursor: move; 139 | cursor: grab; 140 | } 141 | 142 | &.owl-rtl { 143 | direction: rtl; 144 | } 145 | 146 | &.owl-rtl .owl-item { 147 | float: right; 148 | } 149 | } 150 | 151 | /* No Js */ 152 | .no-js .owl-carousel { 153 | display: block; 154 | } -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/hash.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, OnDestroy, Optional } from '@angular/core'; 2 | import { ActivatedRoute, Router } from '@angular/router'; 3 | 4 | import { Subscription, Observable, merge, of } from 'rxjs'; 5 | import { tap, skip, take } from 'rxjs/operators'; 6 | 7 | import { CarouselService } from './carousel.service'; 8 | 9 | @Injectable() 10 | export class HashService implements OnDestroy { 11 | /** 12 | * Subscription to merge Observable from CarouselService 13 | */ 14 | hashSubscription: Subscription; 15 | 16 | /** 17 | * Current url fragment (hash) 18 | */ 19 | currentHashFragment: string; 20 | 21 | constructor( 22 | private carouselService: CarouselService, 23 | @Optional() private route: ActivatedRoute, 24 | @Optional() private router: Router 25 | ) { 26 | this.spyDataStreams(); 27 | if (!this.route) { 28 | this.route = { 29 | fragment: of('no route').pipe(take(1)) 30 | } as any; 31 | }; 32 | 33 | if (!this.router) { 34 | this.router = { 35 | navigate: (commands: any[], extras?: any) => { return } 36 | } as any; 37 | } 38 | } 39 | 40 | ngOnDestroy() { 41 | this.hashSubscription.unsubscribe(); 42 | } 43 | 44 | /** 45 | * Defines Observables which service must observe 46 | */ 47 | spyDataStreams() { 48 | const initializedCarousel$: Observable = this.carouselService.getInitializedState().pipe( 49 | tap(() => this.listenToRoute()) 50 | ); 51 | 52 | const changedSettings$: Observable = this.carouselService.getChangedState().pipe( 53 | tap(data => { 54 | if (this.carouselService.settings.URLhashListener && data.property.name === 'position') { 55 | const newCurSlide = this.carouselService.current(); 56 | const newCurFragment = this.carouselService.slidesData[newCurSlide].hashFragment; 57 | 58 | if (!newCurFragment || newCurFragment === this.currentHashFragment) { 59 | return; 60 | } 61 | this.router.navigate(['./'], { fragment: newCurFragment, relativeTo: this.route }); 62 | } 63 | }) 64 | ); 65 | 66 | const hashFragment$: Observable = merge(initializedCarousel$, changedSettings$); 67 | this.hashSubscription = hashFragment$.subscribe( 68 | () => { } 69 | ); 70 | } 71 | 72 | /** 73 | * rewinds carousel to slide which has the same hashFragment as fragment of current url 74 | * @param fragment fragment of url 75 | */ 76 | rewind(fragment: string) { 77 | const position = this.carouselService.slidesData.findIndex(slide => slide.hashFragment === fragment && slide.isCloned === false); 78 | 79 | if (position === -1 || position === this.carouselService.current()) { 80 | return; 81 | } 82 | 83 | this.carouselService.to(this.carouselService.relative(position), false); 84 | } 85 | 86 | /** 87 | * Initiate listening to ActivatedRoute.fragment 88 | */ 89 | listenToRoute() { 90 | const count = this.carouselService.settings.startPosition === 'URLHash' ? 0 : 2; 91 | this.route.fragment.pipe( 92 | skip(count) 93 | ) 94 | .subscribe( 95 | fragment => { 96 | this.currentHashFragment = fragment; 97 | this.rewind(fragment); 98 | } 99 | ) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "owl-carousel-libdemo", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "nx", 7 | "start": "nx serve", 8 | "build": "nx build", 9 | "test": "nx test", 10 | "lint": "./node_modules/.bin/nx lint && nx lint", 11 | "e2e": "nx e2e", 12 | "affected:apps": "./node_modules/.bin/nx affected:apps", 13 | "affected:build": "./node_modules/.bin/nx affected:build", 14 | "affected:e2e": "./node_modules/.bin/nx affected:e2e", 15 | "affected:test": "./node_modules/.bin/nx affected:test", 16 | "affected:lint": "./node_modules/.bin/nx affected:lint", 17 | "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph", 18 | "format": "./node_modules/.bin/nx format:write", 19 | "format:write": "./node_modules/.bin/nx format:write", 20 | "format:check": "./node_modules/.bin/nx format:check", 21 | "update": "nx migrate latest", 22 | "update:check": "nx update", 23 | "dep-graph": "./node_modules/.bin/nx dep-graph", 24 | "help": "./node_modules/.bin/nx help", 25 | "build:lib": "ng-packagr -p libs/ngx-owl-carousel-o/ng-package.json", 26 | "affected": "./node_modules/.bin/nx affected", 27 | "nx": "nx", 28 | "workspace-generator": "nx workspace-generator" 29 | }, 30 | "private": true, 31 | "dependencies": { 32 | "@angular/animations": "21.0.6", 33 | "@angular/cdk": "21.0.3", 34 | "@angular/common": "21.0.6", 35 | "@angular/compiler": "21.0.6", 36 | "@angular/core": "21.0.6", 37 | "@angular/forms": "21.0.6", 38 | "@angular/material": "21.0.3", 39 | "@angular/platform-browser": "21.0.6", 40 | "@angular/platform-browser-dynamic": "21.0.6", 41 | "@angular/router": "21.0.6", 42 | "@ngrx/effects": "20.1.0", 43 | "@ngrx/operators": "20.1.0", 44 | "@ngrx/router-store": "20.1.0", 45 | "@ngrx/store": "20.1.0", 46 | "@ngrx/store-devtools": "20.1.0", 47 | "@nx/angular": "22.3.1", 48 | "animate.css": "^3.7.0", 49 | "bootstrap": "^5.0.1", 50 | "core-js": "3.19.0", 51 | "rxjs": "7.8.1", 52 | "rxjs-compat": "6.0.0", 53 | "tslib": "^2.4.0", 54 | "zone.js": "0.16.0" 55 | }, 56 | "devDependencies": { 57 | "@angular-devkit/build-angular": "21.0.3", 58 | "@angular-devkit/core": "21.0.3", 59 | "@angular-devkit/schematics": "21.0.3", 60 | "@angular/cli": "~21.0.0", 61 | "@angular/compiler-cli": "21.0.6", 62 | "@angular/language-service": "21.0.6", 63 | "@ngrx/schematics": "20.1.0", 64 | "@nx/workspace": "22.3.1", 65 | "@schematics/angular": "21.0.3", 66 | "@types/jasmine": "4.0.3", 67 | "@types/jasminewd2": "~2.0.3", 68 | "@types/node": "^20.17.9", 69 | "autoprefixer": "^10.4.0", 70 | "dotenv": "10.0.0", 71 | "jasmine-core": "4.2.0", 72 | "jasmine-marbles": "0.9.2", 73 | "jasmine-spec-reporter": "7.0.0", 74 | "karma": "6.4.1", 75 | "karma-chrome-launcher": "~3.1.0", 76 | "karma-coverage": "~2.0.3", 77 | "karma-coverage-istanbul-reporter": "3.0.3", 78 | "karma-jasmine": "5.1.0", 79 | "karma-jasmine-html-reporter": "2.0.0", 80 | "ng-packagr": "21.0.1", 81 | "nx": "22.3.1", 82 | "nx-cloud": "19.1.0", 83 | "postcss": "^8.4.14", 84 | "postcss-import": "14.1.0", 85 | "postcss-preset-env": "7.5.0", 86 | "postcss-url": "10.1.3", 87 | "prettier": "2.7.1", 88 | "protractor": "7.0.0", 89 | "ts-node": "10.9.1", 90 | "tslint": "6.1.3", 91 | "typescript": "5.9.3" 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/services/lazyload.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, OnDestroy } from '@angular/core'; 2 | import { Subscription, Observable, merge } from 'rxjs'; 3 | import { CarouselService } from './carousel.service'; 4 | import { tap } from 'rxjs/operators'; 5 | 6 | @Injectable() 7 | export class LazyLoadService implements OnDestroy { 8 | /** 9 | * Subscrioption to merge Observable from CarouselService 10 | */ 11 | lazyLoadSubscription: Subscription; 12 | 13 | constructor(private carouselService: CarouselService) { 14 | this.spyDataStreams(); 15 | } 16 | 17 | ngOnDestroy() { 18 | this.lazyLoadSubscription.unsubscribe(); 19 | } 20 | 21 | /** 22 | * Defines Observables which service must observe 23 | */ 24 | spyDataStreams() { 25 | const initializedCarousel$: Observable = this.carouselService.getInitializedState().pipe( 26 | tap(() => { 27 | const isLazyLoad = this.carouselService.settings && !this.carouselService.settings.lazyLoad; 28 | this.carouselService.slidesData.forEach(item => item.load = isLazyLoad ? true : false); 29 | }) 30 | ); 31 | 32 | const changeSettings$: Observable = this.carouselService.getChangeState(); 33 | 34 | const resizedCarousel$: Observable = this.carouselService.getResizedState(); 35 | 36 | 37 | const lazyLoadMerge$: Observable = merge(initializedCarousel$, changeSettings$, resizedCarousel$).pipe( 38 | tap(data => this._defineLazyLoadSlides(data)), 39 | // tap(() => this.carouselService.sendChanges()) 40 | ); 41 | this.lazyLoadSubscription = lazyLoadMerge$.subscribe( 42 | () => {} 43 | ); 44 | } 45 | 46 | private _defineLazyLoadSlides(data: any) { 47 | if (!this.carouselService.settings || !this.carouselService.settings.lazyLoad) { 48 | return; 49 | } 50 | 51 | if ((data.property && data.property.name === 'position') || data === 'initialized' || data === "resized") { 52 | const settings = this.carouselService.settings, 53 | clones = this.carouselService.clones().length; 54 | let n = (settings.center && Math.ceil(settings.items / 2) || settings.items), 55 | i = ((settings.center && n * -1) || 0), 56 | position = (data.property && data.property.value !== undefined ? data.property.value : this.carouselService.current()) + i; 57 | // load = $.proxy(function(i, v) { this.load(v) }, this); 58 | //TODO: Need documentation for this new option 59 | if (settings.lazyLoadEager > 0) { 60 | n += settings.lazyLoadEager; 61 | // If the carousel is looping also preload images that are to the "left" 62 | if (settings.loop) { 63 | position -= settings.lazyLoadEager; 64 | n++; 65 | } 66 | } 67 | 68 | while (i++ < n) { 69 | this._load(clones / 2 + this.carouselService.relative(position)); 70 | if (clones) { 71 | this.carouselService.clones(this.carouselService.relative(position)).forEach(value => this._load(value)); 72 | 73 | } 74 | position++; 75 | } 76 | } 77 | } 78 | 79 | /** 80 | * Loads all resources of an item at the specified position. 81 | * @param position - The absolute position of the item. 82 | */ 83 | private _load(position: number) { 84 | if (this.carouselService.slidesData[position].load) { 85 | return; 86 | } 87 | 88 | this.carouselService.slidesData[position].load = true; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/services/navigation.service.d.ts: -------------------------------------------------------------------------------- 1 | import { OnDestroy } from '@angular/core'; 2 | import { NavData, DotsData } from '../models/navigation-data.models'; 3 | import { CarouselService } from './carousel.service'; 4 | import { Subscription } from 'rxjs'; 5 | import * as i0 from "@angular/core"; 6 | export declare class NavigationService implements OnDestroy { 7 | private carouselService; 8 | /** 9 | * Subscrioption to merge Observable from CarouselService 10 | */ 11 | navSubscription: Subscription; 12 | /** 13 | * Indicates whether the plugin is initialized or not. 14 | */ 15 | protected _initialized: boolean; 16 | /** 17 | * The current paging indexes. 18 | */ 19 | protected _pages: any[]; 20 | /** 21 | * Data for navigation elements of the user interface. 22 | */ 23 | protected _navData: NavData; 24 | /** 25 | * Data for dot elements of the user interface. 26 | */ 27 | protected _dotsData: DotsData; 28 | constructor(carouselService: CarouselService); 29 | ngOnDestroy(): void; 30 | /** 31 | * Defines Observables which service must observe 32 | */ 33 | spyDataStreams(): void; 34 | /** 35 | * Initializes the layout of the plugin and extends the carousel. 36 | */ 37 | initialize(): void; 38 | /** 39 | * Calculates internal states and updates prop _pages 40 | */ 41 | private _updateNavPages; 42 | /** 43 | * Draws the user interface. 44 | * @todo The option `dotsData` wont work. 45 | */ 46 | draw(): void; 47 | /** 48 | * Updates navigation buttons's and dots's states 49 | */ 50 | update(): void; 51 | /** 52 | * Changes state of nav buttons (disabled, enabled) 53 | */ 54 | private _updateNavButtons; 55 | /** 56 | * Changes active dot if page becomes changed 57 | */ 58 | private _updateDots; 59 | /** 60 | * Gets the current page position of the carousel. 61 | * @returns the current page position of the carousel 62 | */ 63 | private _current; 64 | /** 65 | * Gets the current succesor/predecessor position. 66 | * @param sussessor position of slide 67 | * @returns the current succesor/predecessor position 68 | */ 69 | private _getPosition; 70 | /** 71 | * Slides to the next item or page. 72 | * @param speed The time in milliseconds for the transition. 73 | */ 74 | next(speed: number | boolean): void; 75 | /** 76 | * Slides to the previous item or page. 77 | * @param speed The time in milliseconds for the transition. 78 | */ 79 | prev(speed: number | boolean): void; 80 | /** 81 | * Slides to the specified item or page. 82 | * @param position - The position of the item or page. 83 | * @param speed - The time in milliseconds for the transition. 84 | * @param standard - Whether to use the standard behaviour or not. Default meaning false 85 | */ 86 | to(position: number, speed: number | boolean, standard?: boolean): void; 87 | /** 88 | * Moves carousel after user's clicking on any dots 89 | */ 90 | moveByDot(dotId: string): void; 91 | /** 92 | * rewinds carousel to slide with needed id 93 | * @param id id of slide 94 | */ 95 | toSlideById(id: string): void; 96 | static ɵfac: i0.ɵɵFactoryDeclaration; 97 | static ɵprov: i0.ɵɵInjectableDeclaration; 98 | } 99 | -------------------------------------------------------------------------------- /apps/demo-owl-carousel/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-owl-carousel", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "sourceRoot": "apps/demo-owl-carousel/src", 5 | "projectType": "application", 6 | "prefix": "owl-carousel-libdemo", 7 | "tags": [], 8 | "generators": {}, 9 | "targets": { 10 | "build": { 11 | "executor": "@angular-devkit/build-angular:browser", 12 | "options": { 13 | "outputPath": "dist/apps/demo-owl-carousel", 14 | "index": "apps/demo-owl-carousel/src/index.html", 15 | "main": "apps/demo-owl-carousel/src/main.ts", 16 | "polyfills": ["apps/demo-owl-carousel/src/polyfills.ts", "zone.js"], 17 | "tsConfig": "apps/demo-owl-carousel/tsconfig.app.json", 18 | "assets": [ 19 | "apps/demo-owl-carousel/src/favicon.ico", 20 | "apps/demo-owl-carousel/src/assets" 21 | ], 22 | "styles": [ 23 | "node_modules/animate.css/animate.min.css", 24 | "libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.carousel.min.css", 25 | "libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.theme.default.min.css", 26 | "apps/demo-owl-carousel/src/styles.scss" 27 | ], 28 | "scripts": [] 29 | }, 30 | "configurations": { 31 | "production": { 32 | "budgets": [ 33 | { 34 | "type": "anyComponentStyle", 35 | "maximumWarning": "6kb" 36 | } 37 | ], 38 | "fileReplacements": [ 39 | { 40 | "replace": "apps/demo-owl-carousel/src/environments/environment.ts", 41 | "with": "apps/demo-owl-carousel/src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "outputHashing": "all" 45 | }, 46 | "development": { 47 | "buildOptimizer": false, 48 | "optimization": false, 49 | "vendorChunk": true, 50 | "extractLicenses": false, 51 | "sourceMap": true, 52 | "namedChunks": true 53 | } 54 | }, 55 | "defaultConfiguration": "production", 56 | "outputs": ["{options.outputPath}"] 57 | }, 58 | "serve": { 59 | "executor": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "demo-owl-carousel:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "demo-owl-carousel:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development", 69 | "continuous": true 70 | }, 71 | "extract-i18n": { 72 | "executor": "@angular-devkit/build-angular:extract-i18n", 73 | "options": { 74 | "buildTarget": "demo-owl-carousel:build" 75 | } 76 | }, 77 | "test": { 78 | "executor": "@angular-devkit/build-angular:karma", 79 | "options": { 80 | "main": "apps/demo-owl-carousel/src/test.ts", 81 | "polyfills": "apps/demo-owl-carousel/src/polyfills.ts", 82 | "tsConfig": "apps/demo-owl-carousel/tsconfig.spec.json", 83 | "karmaConfig": "apps/demo-owl-carousel/karma.conf.js", 84 | "styles": [ 85 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 86 | "apps/demo-owl-carousel/src/styles.css" 87 | ], 88 | "scripts": [], 89 | "assets": [ 90 | "apps/demo-owl-carousel/src/favicon.ico", 91 | "apps/demo-owl-carousel/src/assets" 92 | ] 93 | }, 94 | "outputs": ["{workspaceRoot}/coverage/apps/demo-owl-carousel/"] 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/carousel/owl-carousel-o-config.ts: -------------------------------------------------------------------------------- 1 | import { OwlOptions } from "../models/owl-options.model"; 2 | 3 | /** 4 | * Defaults value of options 5 | */ 6 | export class OwlCarouselOConfig implements OwlOptions { 7 | items = 3; 8 | skip_validateItems = false; 9 | loop = false; 10 | center = false; 11 | rewind = false; 12 | 13 | mouseDrag = true; 14 | touchDrag = true; 15 | pullDrag = true; 16 | freeDrag = false; 17 | 18 | margin = 0; 19 | stagePadding = 0; 20 | 21 | merge = false; 22 | mergeFit = true; 23 | autoWidth = false; 24 | 25 | startPosition = 0; 26 | rtl = false; 27 | 28 | smartSpeed = 250; 29 | fluidSpeed = false; 30 | dragEndSpeed = false; 31 | 32 | responsive = {}; 33 | responsiveRefreshRate = 200; 34 | 35 | // defaults to Navigation 36 | nav = false; 37 | navText = [ 'prev', 'next' ]; 38 | navSpeed = false; 39 | slideBy = 1; // stage moves on 1 width of slide; if slideBy = 2, stage moves on 2 widths of slide 40 | dots = true; 41 | dotsEach = false; 42 | dotsData = false; 43 | dotsSpeed = false; 44 | 45 | // defaults to Autoplay 46 | autoplay = false; 47 | autoplayTimeout = 5000; 48 | autoplayHoverPause = false; 49 | autoplaySpeed = false; 50 | autoplayMouseleaveTimeout = 1; 51 | 52 | // defaults to LazyLoading 53 | lazyLoad = false; 54 | lazyLoadEager = 0; 55 | 56 | // defaults to Animate 57 | slideTransition = ''; 58 | animateOut = false; 59 | animateIn = false; 60 | 61 | // defaults to AutoHeight 62 | autoHeight = false; 63 | 64 | // defaults to Hash 65 | URLhashListener = false; 66 | constructor() { } 67 | } 68 | 69 | /** 70 | * we can't read types from OwlOptions in javascript because of props have undefined value and types of those props are used for validating inputs 71 | * class below is copy of OwlOptions but its all props have string value showing certain type; 72 | * this is class is being used just in method _validateOptions() of CarouselService; 73 | */ 74 | export class OwlOptionsMockedTypes { 75 | items = 'number'; 76 | skip_validateItems = 'boolean'; 77 | loop = 'boolean'; 78 | center = 'boolean'; 79 | rewind = 'boolean'; 80 | 81 | mouseDrag = 'boolean'; 82 | touchDrag = 'boolean'; 83 | pullDrag = 'boolean'; 84 | freeDrag = 'boolean'; 85 | 86 | margin = 'number'; 87 | stagePadding = 'number'; 88 | 89 | merge = 'boolean'; 90 | mergeFit = 'boolean'; 91 | autoWidth = 'boolean'; 92 | 93 | startPosition = 'number|string'; 94 | rtl = 'boolean'; 95 | 96 | smartSpeed = 'number'; 97 | fluidSpeed = 'boolean'; 98 | dragEndSpeed = 'number|boolean'; 99 | 100 | responsive = {}; 101 | responsiveRefreshRate = 'number'; 102 | 103 | // defaults to Navigation 104 | nav = 'boolean'; 105 | navText = 'string[]'; 106 | navSpeed = 'number|boolean'; 107 | slideBy = 'number|string'; // stage moves on 1 width of slide; if slideBy = 2, stage moves on 2 widths of slide 108 | dots = 'boolean'; 109 | dotsEach = 'number|boolean'; 110 | dotsData = 'boolean'; 111 | dotsSpeed = 'number|boolean'; 112 | 113 | // defaults to Autoplay 114 | autoplay = 'boolean'; 115 | autoplayTimeout = 'number'; 116 | autoplayHoverPause = 'boolean'; 117 | autoplaySpeed = 'number|boolean'; 118 | autoplayMouseleaveTimeout = 'number'; 119 | 120 | // defaults to LazyLoading 121 | lazyLoad = 'boolean'; 122 | lazyLoadEager = 'number'; 123 | 124 | // defaults to Animate 125 | slideTransition = 'string'; 126 | animateOut = 'string|boolean'; 127 | animateIn = 'string|boolean'; 128 | 129 | // defaults to AutoHeight 130 | autoHeight = 'boolean'; 131 | 132 | // defaults to Hash 133 | URLhashListener = "boolean"; 134 | constructor() { } 135 | } -------------------------------------------------------------------------------- /ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.owl-carousel .owl-item.center{z-index:5}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled{display:none}.owl-carousel .owl-carousel-inner{position:relative}.owl-carousel .owl-carousel-inner .owl-next,.owl-carousel .owl-carousel-inner .owl-prev{z-index:10;position:absolute;top:50%;transform:translateY(-50%)}.owl-carousel .owl-carousel-inner button.owl-next,.owl-carousel .owl-carousel-inner button.owl-prev{border:none}.owl-carousel .owl-carousel-inner .owl-prev{left:10px}.owl-carousel .owl-carousel-inner .owl-next{right:10px}.owl-carousel .owl-carousel-inner .owl-next,.owl-carousel .owl-carousel-inner .owl-prev,.owl-carousel .owl-dot{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out,max-height .35s ease-in-out}.owl-height.height-0{max-height:0;transition-duration:.7s}.owl-height.height-full{max-height:2000px}.owl-carousel .owl-item .owl-lazy{transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.owl-carousel .owl-item.center{z-index:5}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled{display:none}.owl-carousel .owl-carousel-inner{position:relative}.owl-carousel .owl-carousel-inner .owl-next,.owl-carousel .owl-carousel-inner .owl-prev{z-index:10;position:absolute;top:50%;transform:translateY(-50%)}.owl-carousel .owl-carousel-inner button.owl-next,.owl-carousel .owl-carousel-inner button.owl-prev{border:none}.owl-carousel .owl-carousel-inner .owl-prev{left:10px}.owl-carousel .owl-carousel-inner .owl-next{right:10px}.owl-carousel .owl-carousel-inner .owl-next,.owl-carousel .owl-carousel-inner .owl-prev,.owl-carousel .owl-dot{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out,max-height .35s ease-in-out}.owl-height.height-0{max-height:0;transition-duration:.7s}.owl-height.height-full{max-height:2000px}.owl-carousel .owl-item .owl-lazy{transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} -------------------------------------------------------------------------------- /libs/ngx-owl-carousel-o/src/lib/styles/prebuilt-themes/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.owl-carousel .owl-item.center{z-index:5}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled{display:none}.owl-carousel .owl-carousel-inner{position:relative}.owl-carousel .owl-carousel-inner .owl-next,.owl-carousel .owl-carousel-inner .owl-prev{z-index:10;position:absolute;top:50%;transform:translateY(-50%)}.owl-carousel .owl-carousel-inner button.owl-next,.owl-carousel .owl-carousel-inner button.owl-prev{border:none}.owl-carousel .owl-carousel-inner .owl-prev{left:10px}.owl-carousel .owl-carousel-inner .owl-next{right:10px}.owl-carousel .owl-carousel-inner .owl-next,.owl-carousel .owl-carousel-inner .owl-prev,.owl-carousel .owl-dot{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out,max-height .35s ease-in-out}.owl-height.height-0{max-height:0;transition-duration:.7s}.owl-height.height-full{max-height:2000px}.owl-carousel .owl-item .owl-lazy{transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} --------------------------------------------------------------------------------