├── src ├── assets │ └── .gitkeep ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── styles.css ├── typings.d.ts ├── tsconfig.app.json ├── tsconfig.spec.json ├── main.ts ├── index.html ├── app │ ├── app.module.ts │ ├── demo.component.html │ ├── demo.component.css │ └── demo.component.ts ├── test.ts └── polyfills.ts ├── projects └── ngx-app-tour │ ├── CHANGELOG.md │ ├── src │ ├── lib │ │ ├── conig.ts │ │ ├── ng-zorro │ │ │ ├── popover │ │ │ │ ├── index.ts │ │ │ │ ├── public-api.ts │ │ │ │ ├── nz-popover.module.ts │ │ │ │ ├── style │ │ │ │ │ ├── index.css.map │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.css │ │ │ │ ├── nz-popover.component.ts │ │ │ │ └── nz-popover.directive.ts │ │ │ ├── style │ │ │ │ ├── core │ │ │ │ │ ├── index.less │ │ │ │ │ └── base.less │ │ │ │ ├── index.less │ │ │ │ ├── mixins │ │ │ │ │ ├── index.less │ │ │ │ │ └── reset.less │ │ │ │ ├── themes │ │ │ │ │ └── default.less │ │ │ │ ├── index.css.map │ │ │ │ └── index.css │ │ │ ├── styles.less │ │ │ ├── core │ │ │ │ ├── util │ │ │ │ │ ├── check.ts │ │ │ │ │ └── convert.ts │ │ │ │ ├── animation │ │ │ │ │ ├── fade-animations.ts │ │ │ │ │ └── animation.ts │ │ │ │ ├── style │ │ │ │ │ ├── index.css.map │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.css │ │ │ │ └── overlay │ │ │ │ │ └── overlay-position-map.ts │ │ │ ├── styles.css.map │ │ │ └── styles.css │ │ ├── models │ │ │ └── step-option.interface.ts │ │ ├── styles │ │ │ ├── styles.less │ │ │ ├── styles.css.map │ │ │ └── styles.css │ │ ├── tour.module.ts │ │ ├── components │ │ │ └── tour-step │ │ │ │ ├── tour-step.component.ts │ │ │ │ └── tour-step.component.html │ │ ├── services │ │ │ ├── tour-backdrop.service.ts │ │ │ └── tour.service.ts │ │ └── directive │ │ │ └── tour-anchor.directive.ts │ ├── public_api.ts │ └── test.ts │ ├── ng-package.prod.json │ ├── ng-package.json │ ├── tsconfig.spec.json │ ├── tslint.json │ ├── package.json │ ├── tsconfig.lib.json │ ├── LICENSE │ ├── karma.conf.js │ └── README.md ├── .gitattributes ├── logo.png ├── docs ├── favicon.ico ├── index.html ├── runtime.ec2944dd8b20ec099bf3.js ├── styles.980b2b165b80dfe3a1e0.css └── 3rdpartylicenses.txt ├── e2e ├── tsconfig.e2e.json ├── app.po.ts └── app.e2e-spec.ts ├── tsconfig.json ├── protractor.conf.js ├── LICENSE ├── .gitignore ├── karma.conf.js ├── package.json ├── tslint.json ├── readme.md └── angular.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * linguist-vendored 2 | *.ts linguist-vendored=false -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hamdiwanis/ngx-app-tour/HEAD/logo.png -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/conig.ts: -------------------------------------------------------------------------------- 1 | export const popUpFadeTime = 200; // ms -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hamdiwanis/ngx-app-tour/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hamdiwanis/ngx-app-tour/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/core/index.less: -------------------------------------------------------------------------------- 1 | @import "../mixins/index"; 2 | @import "base"; 3 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/index.less: -------------------------------------------------------------------------------- 1 | @import "themes/default"; 2 | @import "core/index"; 3 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .custom-step-content{ 2 | padding: 10px; 3 | text-align: center; 4 | color: #4CAF50; 5 | } 6 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/mixins/index.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | @import "reset"; 4 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/styles.less: -------------------------------------------------------------------------------- 1 | @import "./style/index.less"; 2 | @import "./core/style/index.less"; 3 | @import "./popover/style/index.less"; 4 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './nz-popover.component'; 2 | export * from './nz-popover.directive'; 3 | export * from './nz-popover.module'; 4 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/util/check.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable-next-line:no-any 2 | export function isNotNil(value: any): boolean { 3 | return (typeof(value) !== 'undefined') && value !== null; 4 | } 5 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/util/convert.ts: -------------------------------------------------------------------------------- 1 | import { coerceBooleanProperty } from '@angular/cdk/coercion'; 2 | 3 | export function toBoolean(value: boolean | string): boolean { 4 | return coerceBooleanProperty(value); 5 | } 6 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/mixins/reset.less: -------------------------------------------------------------------------------- 1 | @import '../themes/default'; 2 | 3 | .reset-component() { 4 | font-variant: tabular-nums; 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "types": [] 7 | }, 8 | "exclude": [ 9 | "src/test.ts", 10 | "**/*.spec.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class NgPackagedPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-app-tour", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | }, 7 | "whitelistedNonPeerDependencies": ["withinviewport"] 8 | } -------------------------------------------------------------------------------- /projects/ngx-app-tour/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-app-tour", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | }, 8 | "whitelistedNonPeerDependencies": ["withinviewport"] 9 | } -------------------------------------------------------------------------------- /projects/ngx-app-tour/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-app-tour 3 | */ 4 | 5 | export { NgxAppTour, TourService } from './lib/tour.module'; 6 | export { IStepOption } from './lib/models/step-option.interface'; 7 | export { TourState } from './lib/services/tour.service'; 8 | export { TourAnchorDirective } from './lib/directive/tour-anchor.directive'; 9 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts", 13 | "polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { NgPackagedPage } from './app.po'; 2 | 3 | describe('ng-packaged App', () => { 4 | let page: NgPackagedPage; 5 | 6 | beforeEach(() => { 7 | page = new NgPackagedPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { DemoModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(DemoModule); 12 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "tour", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "tour", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-app-tour", 3 | "version": "1.2.0", 4 | "repository": "https://github.com/hamdiwanis/ngx-app-tour.git", 5 | "author": "Hamdi wanis ", 6 | "license": "MIT", 7 | "dependencies": { 8 | "withinviewport": "^2.0.0" 9 | }, 10 | "peerDependencies": { 11 | "@angular/common": "^7.0.0", 12 | "@angular/cdk": "^7.0.0", 13 | "@angular/core": "^7.0.0", 14 | "@angular/router": "^7.0.0", 15 | "rxjs": "^6.0.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/animation/fade-animations.ts: -------------------------------------------------------------------------------- 1 | import { 2 | animate, 3 | state, 4 | style, 5 | transition, 6 | trigger, 7 | AnimationTriggerMetadata, 8 | } from '@angular/animations'; 9 | 10 | export const fadeAnimation: AnimationTriggerMetadata = trigger('fadeAnimation', [ 11 | state('void', style({ opacity: 0 })), 12 | state('true', style({ opacity: 1 })), 13 | state('false', style({ opacity: 0 })), 14 | transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')), 15 | transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')), 16 | ]); 17 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/nz-popover.module.ts: -------------------------------------------------------------------------------- 1 | import { OverlayModule } from '@angular/cdk/overlay'; 2 | import { CommonModule } from '@angular/common'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { NzPopoverComponent } from './nz-popover.component'; 6 | import { NzPopoverDirective } from './nz-popover.directive'; 7 | 8 | @NgModule({ 9 | entryComponents: [ NzPopoverComponent ], 10 | exports : [ NzPopoverDirective, NzPopoverComponent ], 11 | declarations : [ NzPopoverDirective, NzPopoverComponent ], 12 | imports : [ CommonModule, OverlayModule ] 13 | }) 14 | 15 | export class NzPopoverModule { 16 | } 17 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ngx-App-Tour 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Loading... 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { RouterModule } from '@angular/router'; 5 | import { NgxAppTour } from 'ngx-app-tour'; 6 | 7 | import { DemoComponent } from './demo.component'; 8 | import { OverlayModule } from '@angular/cdk/overlay'; 9 | 10 | @NgModule({ 11 | bootstrap: [DemoComponent], 12 | declarations: [DemoComponent], 13 | imports: [ 14 | BrowserAnimationsModule, 15 | BrowserModule, 16 | OverlayModule, 17 | NgxAppTour.forRoot(), 18 | RouterModule.forRoot([{path: '',component: DemoComponent}]) 19 | ], 20 | }) 21 | export class DemoModule { } 22 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/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/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "importHelpers": true, 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": ["node_modules/@types"], 14 | "lib": ["es2017", "dom"], 15 | "paths": { 16 | "ngx-tour-core": ["dist/ngx-tour-core"], 17 | "ngx-tour-console": ["dist/ngx-tour-console"], 18 | "ngx-tour-md-menu": ["dist/ngx-tour-md-menu"], 19 | "ngx-tour-ng-bootstrap": ["dist/ngx-tour-ng-bootstrap"], 20 | "ngx-tour-ngx-bootstrap": ["dist/ngx-tour-ngx-bootstrap"], 21 | "ngx-tour-ngx-popper": ["dist/ngx-tour-ngx-popper"] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /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 | './e2e/**/*.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: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/models/step-option.interface.ts: -------------------------------------------------------------------------------- 1 | import { UrlSegment } from '@angular/router'; 2 | 3 | export interface IStepOption { 4 | stepId?: string; 5 | anchorId?: string; 6 | title?: string; 7 | content?: string; 8 | route?: string | string[] | UrlSegment[]; 9 | nextStep?: number | string; 10 | prevStep?: number | string; 11 | preventScrolling?: boolean; 12 | prevBtnTitle?: string; 13 | nextBtnTitle?: string; 14 | endBtnTitle?: string; 15 | disableBackdrop?: boolean; 16 | backdropColor?: string; 17 | backdropRadius?: string; 18 | enableRippleEffect?: boolean; 19 | rippleColor?: string; 20 | stepTemplate?; 21 | allowInteractions?: boolean; 22 | nextOn?: string; 23 | placement?: 'topLeft' | 'top' | 'topRight' | 'leftTop' | 'left' | 'leftBottom' 24 | | 'rightTop' | 'right'| 'rightBottom'| 'bottomLeft' | 'bottom'| 'bottomRight'; 25 | } 26 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ngx-App-Tour 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Loading... 15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/animation/animation.ts: -------------------------------------------------------------------------------- 1 | export class AnimationCurves { 2 | static EASE_BASE_OUT = 'cubic-bezier(0.7, 0.3, 0.1, 1)'; 3 | static EASE_BASE_IN = 'cubic-bezier(0.9, 0, 0.3, 0.7)'; 4 | static EASE_OUT = 'cubic-bezier(0.215, 0.61, 0.355, 1)'; 5 | static EASE_IN = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'; 6 | static EASE_IN_OUT = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; 7 | static EASE_OUT_BACK = 'cubic-bezier(0.12, 0.4, 0.29, 1.46)'; 8 | static EASE_IN_BACK = 'cubic-bezier(0.71, -0.46, 0.88, 0.6)'; 9 | static EASE_IN_OUT_BACK = 'cubic-bezier(0.71, -0.46, 0.29, 1.46)'; 10 | static EASE_OUT_CIRC = 'cubic-bezier(0.08, 0.82, 0.17, 1)'; 11 | static EASE_IN_CIRC = 'cubic-bezier(0.6, 0.04, 0.98, 0.34)'; 12 | static EASE_IN_OUT_CIRC = 'cubic-bezier(0.78, 0.14, 0.15, 0.86)'; 13 | static EASE_OUT_QUINT = 'cubic-bezier(0.23, 1, 0.32, 1)'; 14 | static EASE_IN_QUINT = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)'; 15 | static EASE_IN_OUT_QUINT = 'cubic-bezier(0.86, 0, 0.07, 1)'; 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2018 Hamdi Wanis 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Isaac Mann 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/styles/styles.less: -------------------------------------------------------------------------------- 1 | @import "../ng-zorro/styles.less"; 2 | 3 | .ant-popover { 4 | position: relative; 5 | } 6 | .step-container { 7 | min-width: 200px; 8 | } 9 | .step-title, .step-content { 10 | text-align: center; 11 | padding: 10px; 12 | font-size: 16px; 13 | border-bottom: 1px solid #8080802e; 14 | 15 | @media(max-width: 600px) { 16 | border-width: 1.5px; 17 | } 18 | } 19 | .step-actions { 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-around; 23 | } 24 | 25 | .step-btn { 26 | border: none; 27 | background: none; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | padding: 8px; 32 | } 33 | 34 | .icon-btn{ 35 | height: 20px; 36 | width: 20px; 37 | } 38 | 39 | button[disabled] .icon-btn { 40 | opacity: 0.2; 41 | } 42 | 43 | .ripple-effect.touranchor--is-active{ 44 | transition: box-shadow 0.5s ease-in-out; 45 | z-index: 100; 46 | box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 0px 100vw; 47 | } 48 | 49 | .allow-interactions.touranchor--is-active{ 50 | z-index: 1200; 51 | } 52 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/tour.module.ts: -------------------------------------------------------------------------------- 1 | import { OverlayModule } from '@angular/cdk/overlay'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ModuleWithProviders, NgModule } from '@angular/core'; 4 | import { TourStepComponent } from './components/tour-step/tour-step.component'; 5 | import { TourAnchorDirective } from './directive/tour-anchor.directive'; 6 | import { NzPopoverModule } from './ng-zorro/popover/nz-popover.module'; 7 | import { TourBackdropService } from './services/tour-backdrop.service'; 8 | import { TourService } from './services/tour.service'; 9 | 10 | export { TourAnchorDirective, TourService }; 11 | 12 | @NgModule({ 13 | declarations: [TourAnchorDirective, TourStepComponent], 14 | entryComponents: [TourStepComponent], 15 | exports: [TourAnchorDirective], 16 | imports: [CommonModule, OverlayModule, NzPopoverModule] 17 | }) 18 | export class NgxAppTour { 19 | public static forRoot(): ModuleWithProviders { 20 | return { 21 | ngModule: NgxAppTour, 22 | providers: [ 23 | TourBackdropService, 24 | TourService 25 | ], 26 | }; 27 | } 28 | } -------------------------------------------------------------------------------- /projects/ngx-app-tour/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 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/style/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.less"],"names":[],"mappings":";;;;AAEA;EACE,oBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;;AAGF;EACE,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,wCAAA;EACA,yBAAwB,gCAAxB;EACA,UAAA;EACA,kBAAA;EACA,oBAAA;EACA,aAAA;;AAGF;EACE,kBAAA;EACA,oBAAA;EACA,aAAA;;AAGF;EACE,kBAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,cAAA;EACA,eAAA;;AA2BF,0BAA2B;EACzB,gBAAA;;AAGF,0BAA2B;EACzB,gBAAA;;AAGF;AAA2B;AAA4B;AAA4B;EACjF,2BAAA;EACA,UAAA;;AAGF;AAA2B;EACzB,gBAAA;;AAGF,iCAlCE;AAkCF,iCAlC6B;EACzB,6CAAA;;AAiCJ,iCAxCE;AAwCF,iCAxC8B;EAC1B,8CAAA;;AA4CJ,+BA7CE;AA6CF,+BA7C8B;EAC1B,8CAAA;;AAgDJ,gCA3CE;AA2CF,gCA3C6B;EACzB,6CAAA;;AA+CF,mBAAC,iCApCD;AAoCA,mBAAC,iCApC0B;EACzB,8BAAA;;AAmCF,mBAAC,iCA1CD;AA0CA,mBAAC,iCA1C2B;EAC1B,+BAAA;;AA8CF,mBAAC,+BA/CD;AA+CA,mBAAC,+BA/C2B;EAC1B,+BAAA;;AAkDF,mBAAC,gCA7CD;AA6CA,mBAAC,gCA7C0B;EACzB,8BAAA;;AAmDF,SAAC,mBACC,eAAc,IAAI,aAChB,KAAI;AAFR,SAAC,mBACkC,qBAAqB,eAAc,IAAI,aACtE,KAAI;EACF,SAAS,GAAT;EACA,UAAA;EACA,8BAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;;AATN,SAAC,mBAYC,qBAAqB,eAAc,WACjC,KAAI;EACF,SAAS,GAAT;EACA,UAAA;EACA,8BAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;;AArBR,SAyBE;EACE,cAAA","file":"index.css"} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | .idea 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (http://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # Typescript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | .DS_Store 62 | 63 | dist/ 64 | .ng_build/ 65 | -------------------------------------------------------------------------------- /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/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | declare var require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/themes/default.less: -------------------------------------------------------------------------------- 1 | // The prefix to use on all css classes from ant. 2 | @ant-prefix : ant; 3 | 4 | @border-radius-base : 4px; 5 | 6 | // vertical paddings 7 | @padding-md : 16px; // small containers and buttons 8 | 9 | //colors 10 | @border-color-split : hsv(0, 0, 91%); // split border inside a component 11 | @heading-color : fade(#000, 85%); 12 | 13 | // Shadow 14 | @shadow-color : rgba(0, 0, 0, .15); 15 | @box-shadow-base : 0 2px 8px @shadow-color; 16 | 17 | // ICONFONT 18 | @iconfont-css-prefix : anticon; 19 | 20 | // z-index list 21 | @zindex-popover : 1030; 22 | 23 | 24 | // Popover 25 | // --- 26 | //** Popover body background color 27 | @popover-bg: #fff; 28 | //** Popover text color 29 | @popover-color: fade(#000, 65%); 30 | //** Popover maximum width 31 | @popover-min-width: 177px; 32 | //** Popover arrow width 33 | @popover-arrow-width: 6px; 34 | //** Popover arrow color 35 | @popover-arrow-color: @popover-bg; 36 | //** Popover outer arrow width 37 | //** Popover outer arrow color 38 | @popover-arrow-outer-color: @popover-bg; 39 | //** Popover distance with trigger 40 | @popover-distance: @popover-arrow-width + 4px; 41 | -------------------------------------------------------------------------------- /docs/runtime.ec2944dd8b20ec099bf3.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,f,i=r[0],l=r[1],a=r[2],c=0,s=[];c 2 |
3 | 1 4 |
5 | 6 |
7 | 2 8 |
9 | 10 |
11 | 3 12 |
13 | 14 |
15 | 4 16 |
17 | 18 |
19 | 5 20 |
21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 | {{ step?.content }} 32 |
33 |
34 | 37 | 40 | 41 |
42 |
43 | 44 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/core/base.less: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-no-unknown */ 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | box-sizing: border-box; // 1 7 | } 8 | 9 | // 10 | // Images and content 11 | // 12 | 13 | img { 14 | vertical-align: middle; 15 | border-style: none; // remove the border on images inside links in IE 10-. 16 | } 17 | 18 | svg:not(:root) { 19 | overflow: hidden; // Hide the overflow in IE 20 | } 21 | 22 | // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. 23 | // 24 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 25 | // DON'T remove the click delay when `` is present. 26 | // However, they DO support emoving the click delay via `touch-action: manipulation`. 27 | // See: 28 | // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch 29 | // * http://caniuse.com/#feat=css-touch-action 30 | // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay 31 | 32 | a, 33 | area, 34 | button, 35 | [role="button"], 36 | input:not([type=range]), 37 | label, 38 | select, 39 | summary, 40 | textarea { 41 | touch-action: manipulation; 42 | } 43 | 44 | // Always hide an element with the `hidden` HTML attribute (from PureCSS). 45 | // Needed for proper display in IE 10-. 46 | [hidden] { 47 | display: none !important; 48 | } 49 | -------------------------------------------------------------------------------- /src/app/demo.component.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | height: 100vh; 3 | width: 100vw; 4 | position: relative; 5 | } 6 | 7 | .step { 8 | position: absolute; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | color: white; 13 | font-size: 32px; 14 | } 15 | 16 | .step-1 { 17 | width: 100px; 18 | height: 100px; 19 | background: gold; 20 | top: 20%; 21 | left: 10%; 22 | } 23 | 24 | .step-2 { 25 | width: 80px; 26 | height: 80px; 27 | background: darkred; 28 | top: 45%; 29 | left: 30%; 30 | border-radius: 100%; 31 | } 32 | 33 | .step-3 { 34 | width: 80px; 35 | height: 80px; 36 | background: green; 37 | top: 15%; 38 | left: 50%; 39 | border-radius: 50% 0; 40 | cursor: pointer; 41 | } 42 | 43 | .step-4 { 44 | width: 90px; 45 | height: 90px; 46 | background: #262626; 47 | top: 35%; 48 | left: 60%; 49 | border-radius: 20% 20%; 50 | } 51 | 52 | .step-5 { 53 | width: 50px; 54 | height: 50px; 55 | background: #1f60c0; 56 | top: 55%; 57 | left: 80%; 58 | border-radius: 0 0 50%; 59 | } 60 | 61 | .start-btn-container { 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | width: 100%; 66 | top: 90%; 67 | position: absolute; 68 | } 69 | 70 | .start-btn { 71 | position: absolute; 72 | color: green; 73 | border-color: green; 74 | border-radius: 25px; 75 | padding: 5px 10px; 76 | border-width: 1.5px; 77 | background: none; 78 | } -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | 3 | .cdk-overlay-container { 4 | pointer-events: none; 5 | top: 0; 6 | left: 0; 7 | height: 100%; 8 | width: 100%; 9 | position: fixed; 10 | z-index: 1000; 11 | } 12 | 13 | .cdk-overlay-backdrop { 14 | top: 0; 15 | bottom: 0; 16 | left: 0; 17 | right: 0; 18 | -webkit-tap-highlight-color: transparent; 19 | transition: opacity .4s cubic-bezier(.25, .8, .25, 1); 20 | opacity: 0; 21 | position: absolute; 22 | pointer-events: auto; 23 | z-index: 1000; 24 | background: none; 25 | } 26 | 27 | .cdk-overlay-pane { 28 | position: absolute; 29 | pointer-events: auto; 30 | z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal 31 | } 32 | 33 | .cdk-overlay-connected-position-bounding-box { 34 | position: absolute; 35 | z-index: 1000; 36 | display: flex; 37 | flex-direction: column; 38 | min-width: 1px; 39 | min-height: 1px; 40 | } 41 | 42 | .box-shadow-left() { 43 | .ant-table-th-right-sticky, .ant-table-td-right-sticky { 44 | box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05); 45 | } 46 | } 47 | 48 | .box-shadow-right() { 49 | .ant-table-th-left-sticky, .ant-table-td-left-sticky { 50 | box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05); 51 | } 52 | } 53 | 54 | .border-left() { 55 | .ant-table-th-right-sticky, .ant-table-td-right-sticky { 56 | border-right: @border-width-base @border-style-base @border-color-split; 57 | } 58 | } 59 | 60 | .border-right() { 61 | .ant-table-th-left-sticky, .ant-table-td-left-sticky { 62 | border-left: @border-width-base @border-style-base @border-color-split; 63 | } 64 | } 65 | 66 | 67 | -------------------------------------------------------------------------------- /src/app/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, ViewChild } from '@angular/core'; 2 | import { TourService } from 'ngx-app-tour'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './demo.component.html', 7 | styleUrls: ['./demo.component.css'] 8 | }) 9 | export class DemoComponent implements AfterViewInit { 10 | @ViewChild('stepTemplate') stepTemplate; 11 | 12 | constructor(public tourService: TourService) { 13 | } 14 | 15 | ngAfterViewInit() { 16 | this.tourService.initialize([ 17 | { 18 | anchorId: '1', 19 | content: 'this is a tour step', 20 | placement: 'bottom', 21 | backdropRadius: '0' 22 | }, { 23 | anchorId: '2', 24 | content: 'also a tour step', 25 | placement: 'right', 26 | backdropRadius: '100%', 27 | enableRippleEffect: true, 28 | }, { 29 | anchorId: '3', 30 | content: 'the last tour step, you have to click the target it to continue', 31 | placement: 'left', 32 | backdropRadius: '50% 0', 33 | backdropColor: '#673ab7a6', 34 | nextOn: 'click' 35 | }, 36 | { 37 | anchorId: '4', 38 | content: 'opps i lied', 39 | placement: 'left', 40 | backdropRadius: '20% 20%', 41 | rippleColor: '#e91e6385', 42 | stepTemplate: this.stepTemplate, 43 | disableBackdrop: true, 44 | enableRippleEffect: true 45 | }, 46 | { 47 | anchorId: '5', 48 | content: 'this time its the last one i promise', 49 | placement: 'left', 50 | backdropRadius: '0 0 50%', 51 | backdropColor: '#00968875', 52 | enableRippleEffect: true 53 | } 54 | ]); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/components/tour-step/tour-step.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectorRef, Component, EventEmitter, HostListener, OnDestroy } from '@angular/core'; 2 | import { Subscription } from 'rxjs'; 3 | import { IStepOption } from '../../models/step-option.interface'; 4 | import { fadeAnimation } from '../../ng-zorro/core/animation/fade-animations'; 5 | import { NzPopoverComponent } from '../../ng-zorro/popover'; 6 | import { TourService, TourState } from '../../services/tour.service'; 7 | 8 | 9 | @Component({ 10 | selector: 'ngx-tour-step', 11 | templateUrl: './tour-step.component.html', 12 | animations: [fadeAnimation] 13 | }) 14 | export class TourStepComponent extends NzPopoverComponent implements OnDestroy { 15 | stepTemplate; 16 | _hasBackdrop = true; 17 | step: IStepOption = {}; 18 | closed$: EventEmitter = new EventEmitter(); 19 | closeSubscription: Subscription; 20 | 21 | constructor(public tourService: TourService, public cdr: ChangeDetectorRef) { 22 | super(cdr); 23 | 24 | this.closeSubscription = this.nzVisibleChange.subscribe(isVisible => { 25 | if (!isVisible) { 26 | this.closed$.emit(); 27 | } 28 | }); 29 | } 30 | 31 | ngOnDestroy() { 32 | this.closeSubscription.unsubscribe(); 33 | } 34 | 35 | 36 | /** 37 | * Configures hot keys for controlling the tour with the keyboard 38 | */ 39 | @HostListener('window:keydown.Escape') 40 | public onEscapeKey(): void { 41 | if ( 42 | this.tourService.getStatus() === TourState.ON 43 | ) { 44 | this.tourService.end(); 45 | } 46 | } 47 | 48 | @HostListener('window:keydown.ArrowRight') 49 | public onArrowRightKey(): void { 50 | if ( 51 | this.tourService.getStatus() === TourState.ON && 52 | this.tourService.hasNext(this.tourService.currentStep) 53 | ) { 54 | this.tourService.next(); 55 | } 56 | } 57 | 58 | @HostListener('window:keydown.ArrowLeft') 59 | public onArrowLeftKey(): void { 60 | if ( 61 | this.tourService.getStatus() === TourState.ON && 62 | this.tourService.hasPrev(this.tourService.currentStep) 63 | ) { 64 | this.tourService.prev(); 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/style/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["/Volumes/DATA/Work/droos/droos-web/src/lib/ng-zorro/style/color/tinyColor.less","/Volumes/DATA/Work/droos/droos-web/src/lib/ng-zorro/style/mixins/reset.less","/Volumes/DATA/Work/droos/droos-web/src/lib/ng-zorro/style/themes/default.less","index.less"],"names":[],"mappings":"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","file":"index.css"} -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style/core/base.less","core/style/index.less","style/mixins/reset.less","popover/style/index.less"],"names":[],"mappings":"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","file":"styles.css"} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-tour", 3 | "version": "0.0.1", 4 | "description": "", 5 | "keywords": [ 6 | "app-tour", 7 | "ng-app-tour", 8 | "ngx-app-tour", 9 | "angular app tour", 10 | "angular app walkthrow" 11 | ], 12 | "author": "Hamdi Wanis ", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/hamdiwanis/ngx-app-tour" 16 | }, 17 | "license": "MIT", 18 | "engines": { 19 | "node": ">=6.0.0" 20 | }, 21 | "scripts": { 22 | "ng": "ng", 23 | "link": "cd dist/ngx-app-tour && npm link && cd ../..", 24 | "prestart": "npm run link", 25 | "start": "ng serve --aot=true", 26 | "prebuild": "npm run link", 27 | "build": "ng build --prod", 28 | "build:lib": "ng build ngx-app-tour --prod && npm run move:styles", 29 | "move:styles": "cpx projects/ngx-app-tour/src/lib/styles/styles.css dist/ngx-app-tour/styles", 30 | "test": "ng test", 31 | "lint": "ng lint", 32 | "e2e": "ng e2e", 33 | "pub": "npm run pub:lib && npm run pub:demo", 34 | "pub:demo": "npm run build --prod --base-href \"https://hamdiwanis.github.io/ngx-app-tour/\" && gh-pages -d dist/app", 35 | "pub:lib": "cd dist/ngx-app-tour && npm publish" 36 | }, 37 | "dependencies": { 38 | "@angular/animations": "^7.1.1", 39 | "@angular/cdk": "^7.1.0", 40 | "@angular/common": "^7.1.1", 41 | "@angular/core": "^7.1.1", 42 | "@angular/forms": "^7.1.1", 43 | "@angular/http": "^7.1.1", 44 | "@angular/platform-browser": "^7.1.1", 45 | "@angular/platform-browser-dynamic": "^7.1.1", 46 | "@angular/router": "^7.1.1", 47 | "core-js": "^2.5.1", 48 | "rxjs": "^6.1.0", 49 | "withinviewport": "^2.0.0", 50 | "zone.js": "^0.8.18", 51 | "ngx-app-tour": "1.2.0" 52 | }, 53 | "devDependencies": { 54 | "@angular-devkit/build-angular": "~0.11.0", 55 | "@angular-devkit/build-ng-packagr": "~0.11.0", 56 | "@angular/cli": "^7.1.0", 57 | "@angular/compiler": "^7.1.1", 58 | "@angular/compiler-cli": "^7.1.1", 59 | "@types/jasmine": "^3.3.0", 60 | "@types/node": "^10.12.10", 61 | "codelyzer": "^4.0.1", 62 | "cpx": "^1.5.0", 63 | "gh-pages": "^2.0.1", 64 | "jasmine-core": "^3.3.0", 65 | "jasmine-spec-reporter": "^4.2.1", 66 | "karma": "^3.1.1", 67 | "karma-chrome-launcher": "~2.2.0", 68 | "karma-cli": "~1.0.1", 69 | "karma-coverage-istanbul-reporter": "^2.0.4", 70 | "karma-jasmine": "~2.0.1", 71 | "karma-jasmine-html-reporter": "^1.4.0", 72 | "ng-packagr": "^4.4.0", 73 | "protractor": "^5.3.2", 74 | "ts-node": "^7.0.1", 75 | "tsickle": "^0.34.0", 76 | "tslib": "^1.9.0", 77 | "tslint": "^5.8.0", 78 | "tslint-config-standard": "^8.0.1", 79 | "typescript": "~3.1.6" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /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/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es6/reflect'; 45 | 46 | 47 | 48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | /** 70 | * Need to import at least one locale-data with intl. 71 | */ 72 | // import 'intl/locale-data/jsonp/en'; 73 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/styles/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["/Users/hw/Downloads/ngx-app-tour/projects/ngx-app-tour/src/lib/ng-zorro/style/core/base.less","/Users/hw/Downloads/ngx-app-tour/projects/ngx-app-tour/src/lib/ng-zorro/core/style/index.less","/Users/hw/Downloads/ngx-app-tour/projects/ngx-app-tour/src/lib/ng-zorro/style/mixins/reset.less","/Users/hw/Downloads/ngx-app-tour/projects/ngx-app-tour/src/lib/ng-zorro/popover/style/index.less","styles.less"],"names":[],"mappings":"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","file":"styles.css"} -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [ 16 | true 17 | ], 18 | "import-spacing": true, 19 | "indent": [ 20 | true, 21 | "spaces" 22 | ], 23 | "interface-over-type-literal": true, 24 | "label-position": true, 25 | "max-line-length": [ 26 | true, 27 | 140 28 | ], 29 | "member-access": false, 30 | "member-ordering": [ 31 | true, 32 | "static-before-instance", 33 | "variables-before-functions" 34 | ], 35 | "no-arg": true, 36 | "no-bitwise": true, 37 | "no-console": [ 38 | true, 39 | "debug", 40 | "info", 41 | "time", 42 | "timeEnd", 43 | "trace" 44 | ], 45 | "no-construct": true, 46 | "no-debugger": true, 47 | "no-empty": false, 48 | "no-empty-interface": true, 49 | "no-eval": true, 50 | "no-inferrable-types": [ 51 | true, 52 | "ignore-params" 53 | ], 54 | "no-shadowed-variable": true, 55 | "no-string-literal": false, 56 | "no-string-throw": true, 57 | "no-switch-case-fall-through": true, 58 | "no-trailing-whitespace": true, 59 | "no-unused-expression": true, 60 | "no-use-before-declare": true, 61 | "no-var-keyword": true, 62 | "object-literal-sort-keys": false, 63 | "one-line": [ 64 | true, 65 | "check-open-brace", 66 | "check-catch", 67 | "check-else", 68 | "check-whitespace" 69 | ], 70 | "prefer-const": true, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "radix": true, 76 | "semicolon": [ 77 | "always" 78 | ], 79 | "triple-equals": [ 80 | true, 81 | "allow-null-check" 82 | ], 83 | "typedef-whitespace": [ 84 | true, 85 | { 86 | "call-signature": "nospace", 87 | "index-signature": "nospace", 88 | "parameter": "nospace", 89 | "property-declaration": "nospace", 90 | "variable-declaration": "nospace" 91 | } 92 | ], 93 | "typeof-compare": true, 94 | "unified-signatures": true, 95 | "variable-name": false, 96 | "whitespace": [ 97 | true, 98 | "check-branch", 99 | "check-decl", 100 | "check-operator", 101 | "check-separator", 102 | "check-type" 103 | ], 104 | "directive-selector": [ 105 | true, 106 | "attribute", 107 | "app", 108 | "camelCase" 109 | ], 110 | "component-selector": [ 111 | true, 112 | "element", 113 | "app", 114 | "kebab-case" 115 | ], 116 | "use-input-property-decorator": true, 117 | "use-output-property-decorator": true, 118 | "use-host-property-decorator": true, 119 | "no-input-rename": true, 120 | "no-output-rename": true, 121 | "use-life-cycle-interface": true, 122 | "use-pipe-transform-interface": true, 123 | "component-class-suffix": true, 124 | "directive-class-suffix": true, 125 | "no-access-missing-member": true, 126 | "templates-use-public": true, 127 | "invoke-injectable": true 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/components/tour-step/tour-step.component.html: -------------------------------------------------------------------------------- 1 | 10 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | {{ step?.title }} 25 |
26 |
27 | {{ step?.content }} 28 |
29 |
30 | 72 | 80 | 81 |
82 |
83 | 84 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/services/tour-backdrop.service.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; 2 | import { popUpFadeTime } from '../conig'; 3 | 4 | @Injectable() 5 | export class TourBackdropService { 6 | // todo: use cdk instead 7 | // todo: make backdrop move with element 8 | private renderer: Renderer2; 9 | private backdropElement: HTMLElement; 10 | private currentBoundingRect; 11 | 12 | constructor(rendererFactory: RendererFactory2) { 13 | this.renderer = rendererFactory.createRenderer(null, null); 14 | } 15 | 16 | public show(targetElement: ElementRef, radius, color) { 17 | const boundingRect = targetElement.nativeElement.getBoundingClientRect(); 18 | 19 | if (!this.backdropElement) { 20 | this.backdropElement = this.renderer.createElement('div'); 21 | this.renderer.addClass(this.backdropElement, 'ngx-tour_backdrop'); 22 | this.renderer.appendChild(document.body, this.backdropElement); 23 | 24 | const styles = { 25 | position: 'fixed', 26 | 'z-index': '100', 27 | }; 28 | 29 | for (const name of Object.keys(styles)) { 30 | this.renderer.setStyle(this.backdropElement, name, styles[name]); 31 | } 32 | } 33 | 34 | this.setStyles(boundingRect, radius, color); 35 | } 36 | 37 | public close() { 38 | if (this.backdropElement) { 39 | this.renderer.removeChild(document.body, this.backdropElement); 40 | this.backdropElement = null; 41 | } 42 | } 43 | 44 | private setStyles(boundingRect: DOMRect, radius, color) { 45 | const shadowColor = color ? color : 'rgba(0, 0, 0, 0.7)'; 46 | let styles: any = { 47 | 'box-shadow': `0 0 0 9999px ${shadowColor}`, 48 | 'border-radius': radius ? radius : '100%', 49 | }; 50 | 51 | if (!this.currentBoundingRect) { 52 | styles = { 53 | ...styles, 54 | width: boundingRect.width + 'px', 55 | height: boundingRect.height + 'px', 56 | top: boundingRect.top + 'px', 57 | left: boundingRect.left + 'px' 58 | }; 59 | } else { 60 | 61 | 62 | if (this.backdropElement.animate) { 63 | const fromHeight = this.currentBoundingRect.height + 'px'; 64 | const fromWidth = this.currentBoundingRect.width + 'px'; 65 | const fromTop = this.currentBoundingRect.top + 'px'; 66 | const fromLeft = this.currentBoundingRect.left + 'px'; 67 | 68 | const toHeight = boundingRect.height + 'px'; 69 | const toWidth = boundingRect.width + 'px'; 70 | const toTop = boundingRect.top + 'px'; 71 | const toLeft = boundingRect.left + 'px'; 72 | 73 | this.backdropElement.animate( 74 | [ 75 | {height: fromHeight, width: fromWidth, top: fromTop, left: fromLeft}, 76 | {height: toHeight, width: toWidth, top: toTop, left: toLeft} 77 | ], { 78 | duration: popUpFadeTime, 79 | easing: 'ease-in-out', 80 | fill: 'forwards' 81 | } 82 | ); 83 | } else { 84 | styles = { 85 | ...styles, 86 | width: boundingRect.width + 'px', 87 | height: boundingRect.height + 'px', 88 | top: boundingRect.top + 'px', 89 | left: boundingRect.left + 'px', 90 | transition: 'width 200ms ease-in-out,height 200ms ease-in-out,top 200ms ease-in-out,left 200ms ease-in-out' 91 | }; 92 | } 93 | 94 | } 95 | 96 | this.currentBoundingRect = boundingRect; 97 | 98 | for (const name of Object.keys(styles)) { 99 | if(this.backdropElement.style[name] !== styles[name]) { 100 | this.renderer.setStyle(this.backdropElement, name, styles[name]); 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/style/index.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2 | /* stylelint-disable no-duplicate-selectors */ 3 | /* stylelint-disable */ 4 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 5 | .cdk-overlay-container { 6 | pointer-events: none; 7 | top: 0; 8 | left: 0; 9 | height: 100%; 10 | width: 100%; 11 | position: fixed; 12 | z-index: 1000; 13 | } 14 | .cdk-overlay-backdrop { 15 | top: 0; 16 | bottom: 0; 17 | left: 0; 18 | right: 0; 19 | -webkit-tap-highlight-color: transparent; 20 | transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 21 | opacity: 0; 22 | position: absolute; 23 | pointer-events: auto; 24 | z-index: 1000; 25 | } 26 | .cdk-overlay-pane { 27 | position: absolute; 28 | pointer-events: auto; 29 | z-index: 1000; 30 | } 31 | .cdk-overlay-connected-position-bounding-box { 32 | position: absolute; 33 | z-index: 1000; 34 | display: flex; 35 | flex-direction: column; 36 | min-width: 1px; 37 | min-height: 1px; 38 | } 39 | .ant-table-td-right-sticky + .ant-table-td-right-sticky { 40 | box-shadow: none; 41 | } 42 | .ant-table-th-right-sticky + .ant-table-th-right-sticky { 43 | box-shadow: none; 44 | } 45 | .ant-table-th-left-sticky, 46 | .ant-table-th-right-sticky, 47 | .ant-table-td-right-sticky, 48 | .ant-table-td-left-sticky { 49 | position: sticky !important; 50 | z-index: 1; 51 | } 52 | .ant-table-td-left-sticky, 53 | .ant-table-td-right-sticky { 54 | background: #fff; 55 | } 56 | .ant-table-scroll-position-middle .ant-table-th-left-sticky, 57 | .ant-table-scroll-position-middle .ant-table-td-left-sticky { 58 | box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.05); 59 | } 60 | .ant-table-scroll-position-middle .ant-table-th-right-sticky, 61 | .ant-table-scroll-position-middle .ant-table-td-right-sticky { 62 | box-shadow: -6px 0 6px 0px rgba(0, 0, 0, 0.05); 63 | } 64 | .ant-table-scroll-position-left .ant-table-th-right-sticky, 65 | .ant-table-scroll-position-left .ant-table-td-right-sticky { 66 | box-shadow: -6px 0 6px 0px rgba(0, 0, 0, 0.05); 67 | } 68 | .ant-table-scroll-position-right .ant-table-th-left-sticky, 69 | .ant-table-scroll-position-right .ant-table-td-left-sticky { 70 | box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.05); 71 | } 72 | .ant-table-bordered.ant-table-scroll-position-middle .ant-table-th-left-sticky, 73 | .ant-table-bordered.ant-table-scroll-position-middle .ant-table-td-left-sticky { 74 | border-left: 1px solid #e8e8e8; 75 | } 76 | .ant-table-bordered.ant-table-scroll-position-middle .ant-table-th-right-sticky, 77 | .ant-table-bordered.ant-table-scroll-position-middle .ant-table-td-right-sticky { 78 | border-right: 1px solid #e8e8e8; 79 | } 80 | .ant-table-bordered.ant-table-scroll-position-left .ant-table-th-right-sticky, 81 | .ant-table-bordered.ant-table-scroll-position-left .ant-table-td-right-sticky { 82 | border-right: 1px solid #e8e8e8; 83 | } 84 | .ant-table-bordered.ant-table-scroll-position-right .ant-table-th-left-sticky, 85 | .ant-table-bordered.ant-table-scroll-position-right .ant-table-td-left-sticky { 86 | border-left: 1px solid #e8e8e8; 87 | } 88 | .ant-tree.ant-tree-show-line > nz-tree-node:not(:last-child) > li:before, 89 | .ant-tree.ant-tree-show-line .ant-tree-child-tree > nz-tree-node:not(:last-child) > li:before { 90 | content: ' '; 91 | width: 1px; 92 | border-left: 1px solid #d9d9d9; 93 | height: 100%; 94 | position: absolute; 95 | left: 12px; 96 | margin: 22px 0; 97 | } 98 | .ant-tree.ant-tree-show-line .ant-tree-child-tree > nz-tree-node:last-child > li:before { 99 | content: ' '; 100 | width: 1px; 101 | border-left: 0px solid #d9d9d9; 102 | height: 100%; 103 | position: absolute; 104 | left: 12px; 105 | margin: 22px 0; 106 | } 107 | .ant-tree .font-highlight { 108 | color: #f5222d; 109 | } 110 | /*# sourceMappingURL=index.css.map */ -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/core/overlay/overlay-position-map.ts: -------------------------------------------------------------------------------- 1 | import { ConnectionPositionPair } from '@angular/cdk/overlay'; 2 | 3 | export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = { 4 | 'top' : { 5 | originX : 'center', 6 | originY : 'top', 7 | overlayX: 'center', 8 | overlayY: 'bottom' 9 | }, 10 | 'topCenter' : { 11 | originX : 'center', 12 | originY : 'top', 13 | overlayX: 'center', 14 | overlayY: 'bottom' 15 | }, 16 | 'topLeft' : { 17 | originX : 'start', 18 | originY : 'top', 19 | overlayX: 'start', 20 | overlayY: 'bottom' 21 | }, 22 | 'topRight' : { 23 | originX : 'end', 24 | originY : 'top', 25 | overlayX: 'end', 26 | overlayY: 'bottom' 27 | }, 28 | 'right' : { 29 | originX : 'end', 30 | originY : 'center', 31 | overlayX: 'start', 32 | overlayY: 'center', 33 | }, 34 | 'rightTop' : { 35 | originX : 'end', 36 | originY : 'top', 37 | overlayX: 'start', 38 | overlayY: 'top', 39 | }, 40 | 'rightBottom' : { 41 | originX : 'end', 42 | originY : 'bottom', 43 | overlayX: 'start', 44 | overlayY: 'bottom', 45 | }, 46 | 'bottom' : { 47 | originX : 'center', 48 | originY : 'bottom', 49 | overlayX: 'center', 50 | overlayY: 'top', 51 | }, 52 | 'bottomCenter': { 53 | originX : 'center', 54 | originY : 'bottom', 55 | overlayX: 'center', 56 | overlayY: 'top', 57 | }, 58 | 'bottomLeft' : { 59 | originX : 'start', 60 | originY : 'bottom', 61 | overlayX: 'start', 62 | overlayY: 'top', 63 | }, 64 | 'bottomRight' : { 65 | originX : 'end', 66 | originY : 'bottom', 67 | overlayX: 'end', 68 | overlayY: 'top', 69 | }, 70 | 'left' : { 71 | originX : 'start', 72 | originY : 'center', 73 | overlayX: 'end', 74 | overlayY: 'center', 75 | }, 76 | 'leftTop' : { 77 | originX : 'start', 78 | originY : 'top', 79 | overlayX: 'end', 80 | overlayY: 'top', 81 | }, 82 | 'leftBottom' : { 83 | originX : 'start', 84 | originY : 'bottom', 85 | overlayX: 'end', 86 | overlayY: 'bottom', 87 | }, 88 | } as { } as { [key: string]: ConnectionPositionPair }; 89 | 90 | // TODO: The whole logic does not make sense here, _objectValues just returns a copy of original array 91 | export const DEFAULT_4_POSITIONS = _objectValues([ POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left]); 92 | export const DEFAULT_DROPDOWN_POSITIONS = _objectValues([ POSITION_MAP.bottomLeft, POSITION_MAP.topLeft ]); 93 | 94 | // export const DEFAULT_DATEPICKER_POSITIONS = [ 95 | // { 96 | // originX : 'start', 97 | // originY : 'top', 98 | // overlayX: 'start', 99 | // overlayY: 'top', 100 | // }, 101 | // { 102 | // originX : 'start', 103 | // originY : 'bottom', 104 | // overlayX: 'start', 105 | // overlayY: 'bottom', 106 | // } 107 | // ] as ConnectionPositionPair[]; 108 | 109 | export const DEFAULT_MENTION_POSITIONS = [ 110 | POSITION_MAP.bottomLeft, 111 | { 112 | originX : 'start', 113 | originY : 'bottom', 114 | overlayX: 'start', 115 | overlayY: 'bottom' 116 | } 117 | ] as ConnectionPositionPair[]; 118 | 119 | function arrayMap(array: T[], iteratee: (item: T, index: number, arr: T[]) => S): S[] { 120 | let index = -1; 121 | const length = array == null ? 0 : array.length; 122 | const result = Array(length); 123 | 124 | while (++index < length) { 125 | result[ index ] = iteratee(array[ index ], index, array); 126 | } 127 | return result; 128 | } 129 | 130 | function baseValues(object: { [key: string]: T } | T[], props: string[]): T[] { 131 | return arrayMap(props, (key) => { 132 | return object[ key ]; 133 | }); 134 | } 135 | 136 | function _objectValues(object: { [key: string]: T } | T[]): T[] { 137 | return object == null ? [] : baseValues(object, Object.keys(object)); 138 | } 139 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/README.md: -------------------------------------------------------------------------------- 1 | # Ngx-App-Tour 2 | 3 | [Demo](https://hamdiwanis.github.io/ngx-app-tour). 4 | 5 | > This library built on the great lib ngx-tour by [isaacplmann](https://github.com/isaacplmann.) It also uses the popover component by my favourite angular ui lib [ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd). 6 | 7 | ### Installation 8 | 9 | ``` 10 | npm install ngx-app-tour 11 | ``` 12 | 13 | Add lib styles to your app for ex styles in angular.json: 14 | ``` 15 | "styles": [ 16 | "node_modules/ngx-app-tour/styles/styles.css", 17 | ... 18 | ], 19 | ``` 20 | 21 | ### Usage 22 | Add in your root module: 23 | ``` 24 | @NgModule({ 25 | imports: [ 26 | ... 27 | NgxAppTour.forRoot() 28 | ], 29 | }) 30 | export class AppModule { } 31 | ``` 32 | 33 | Add in every other module you use it in: 34 | ``` 35 | @NgModule({ 36 | imports: [ 37 | ... 38 | NgxAppTour 39 | ], 40 | }) 41 | export class AppModule { } 42 | ``` 43 | 44 | Add in every other module you use it in: 45 | ``` 46 | @NgModule({ 47 | imports: [ 48 | ... 49 | NgxAppTour 50 | ], 51 | }) 52 | export class AppModule { } 53 | ``` 54 | 55 | Mark your tour steps with tourAnchor and give it an id: 56 | ``` 57 |
58 | ``` 59 | 60 | Enject TourService in a component: 61 | ``` 62 | constructor(public tourService: TourService) {} 63 | ``` 64 | 65 | Use the TourService to init tour tour: 66 | ``` 67 | this.tourService.initialize(steps[], defaults); 68 | ``` 69 | 70 | Use the TourService to control the tour: 71 | ``` 72 | this.tourService.start(); 73 | this.tourService.stop(); 74 | this.tourService.pause(); 75 | this.tourService.resume(); 76 | ``` 77 | 78 | Use the TourService to listen for tour events: 79 | ``` 80 | this.tourService.events$.subscribe(e => do something) 81 | ``` 82 | 83 | Use custom step template: 84 | ``` 85 | 86 |
87 |
88 | {{ step?.content }} 89 |
90 |
91 | 94 | 97 | 98 |
99 |
100 | 101 | ``` 102 | 103 | ``` 104 | @ViewChild('stepTemplate') stepTemplate; 105 | 106 | // then use it with a single step 107 | this.tourService.initialize([ 108 | ... 109 | { 110 | ... 111 | stepTemplate: this.stepTemplate 112 | }, 113 | ... 114 | ]); 115 | 116 | // or as default template 117 | 118 | this.tourService.initialize([...], {stepTemplate: this.stepTemplate}); 119 | 120 | ``` 121 | 122 | Use touranchor--is-active class to style active step: 123 | ``` 124 | .touranchor--is-active{ 125 | // your styles 126 | } 127 | ``` 128 | 129 | 130 | ### Tour Step API 131 | Add in your root module: 132 | 133 | | Prop | Type | 134 | | ------ | ------ | 135 | | stepId | string | 136 | | anchorId | string | 137 | | title | string | 138 | | content | string | 139 | | route | string - string[] - UrlSegment[] | 140 | | nextStep | number | string | 141 | | prevStep | number | string | 142 | | preventScrolling | boolean | 143 | | prevBtnTitle | string | 144 | | nextBtnTitle | string | 145 | | endBtnTitle | string | 146 | | disableBackdrop | boolean | 147 | | backdropColor | string | 148 | | enableRippleEffect | boolean| 149 | | rippleColor | string| 150 | | backdropRadius | string | 151 | | stepTemplate | template | 152 | | placement | 'topLeft' - 'top' - 'topRight' - 'leftTop' - 'left' - 'leftBottom' 153 | - 'rightTop' - 'right' - 'rightBottom'| 'bottomLeft' - 'bottom' - 'bottomRight' | 154 | 155 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/nz-popover.component.ts: -------------------------------------------------------------------------------- 1 | import { AnimationEvent } from '@angular/animations'; 2 | import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay'; 3 | import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core'; 4 | import { BehaviorSubject, Observable } from 'rxjs'; 5 | 6 | import { DEFAULT_4_POSITIONS, POSITION_MAP } from '../core/overlay/overlay-position-map'; 7 | import { toBoolean } from '../core/util/convert'; 8 | 9 | @Component({ 10 | selector: 'nz-popover', 11 | template: '', 12 | preserveWhitespaces: false, 13 | }) 14 | 15 | export class NzPopoverComponent { 16 | _hasBackdrop = false; 17 | _prefix = 'ant-popover-placement'; 18 | _positions: ConnectionPositionPair[] = [...DEFAULT_4_POSITIONS]; 19 | _classMap = {}; 20 | _placement = 'top'; 21 | _trigger = 'hover'; 22 | overlayOrigin: CdkOverlayOrigin; 23 | isContentString: boolean; 24 | isTitleString: boolean; 25 | visibleSource = new BehaviorSubject(false); 26 | visible$: Observable = this.visibleSource.asObservable(); 27 | @ContentChild('nzTemplate') _content: string | TemplateRef; 28 | @ViewChild('overlay') overlay: CdkConnectedOverlay; 29 | @Output() readonly nzVisibleChange: EventEmitter = new EventEmitter(); 30 | 31 | @Input() nzOverlayClassName = ''; 32 | @Input() nzOverlayStyle: { [key: string]: string } = {}; 33 | @Input() nzMouseEnterDelay = 0.15; // Unit: second 34 | @Input() nzMouseLeaveDelay = 0.1; // Unit: second 35 | @Input() 36 | set nzContent(value: string | TemplateRef) { 37 | this.isContentString = !(value instanceof TemplateRef); 38 | this._content = value; 39 | } 40 | 41 | get nzContent(): string | TemplateRef { 42 | return this._content; 43 | } 44 | 45 | @Input() 46 | set nzVisible(value: boolean) { 47 | const visible = toBoolean(value); 48 | if (this.visibleSource.value !== visible) { 49 | this.visibleSource.next(visible); 50 | this.nzVisibleChange.emit(visible); 51 | } 52 | } 53 | 54 | get nzVisible(): boolean { 55 | return this.visibleSource.value; 56 | } 57 | 58 | @Input() 59 | set nzTrigger(value: string) { 60 | this._trigger = value; 61 | this._hasBackdrop = this._trigger === 'click'; 62 | } 63 | 64 | get nzTrigger(): string { 65 | return this._trigger; 66 | } 67 | 68 | @Input() 69 | set nzPlacement(value: string) { 70 | if (value !== this._placement) { 71 | this._placement = value; 72 | this._positions.unshift(POSITION_MAP[this.nzPlacement] as ConnectionPositionPair); 73 | } 74 | } 75 | 76 | get nzPlacement(): string { 77 | return this._placement; 78 | } 79 | 80 | // Manually force updating current overlay's position 81 | updatePosition(): void { 82 | if (this.overlay && this.overlay.overlayRef) { 83 | this.overlay.overlayRef.updatePosition(); 84 | } 85 | } 86 | 87 | onPositionChange($event: ConnectedOverlayPositionChange): void { 88 | for (const key in POSITION_MAP) { 89 | if (JSON.stringify($event.connectionPair) === JSON.stringify(POSITION_MAP[key])) { 90 | this.nzPlacement = key; 91 | break; 92 | } 93 | } 94 | this.setClassMap(); 95 | /** TODO may cause performance problem */ 96 | this.cdr.detectChanges(); 97 | } 98 | 99 | show(): void { 100 | this.nzVisible = true; 101 | } 102 | 103 | hide(): void { 104 | this.nzVisible = false; 105 | } 106 | 107 | _afterVisibilityAnimation(e: AnimationEvent): void { 108 | if (e.toState === 'false' && !this.nzVisible) { 109 | this.nzVisibleChange.emit(false); 110 | } 111 | if (e.toState === 'true' && this.nzVisible) { 112 | this.nzVisibleChange.emit(true); 113 | } 114 | } 115 | 116 | setClassMap(): void { 117 | this._classMap = { 118 | [this.nzOverlayClassName]: true, 119 | [`${this._prefix}-${this._placement}`]: true 120 | }; 121 | } 122 | 123 | setOverlayOrigin(origin: CdkOverlayOrigin): void { 124 | this.overlayOrigin = origin; 125 | } 126 | 127 | constructor(public cdr: ChangeDetectorRef) { 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "../../style/mixins/index"; 3 | 4 | @popover-prefix-cls: ~"@{ant-prefix}-popover"; 5 | 6 | .@{popover-prefix-cls} { 7 | .reset-component; 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | z-index: @zindex-popover; 12 | cursor: auto; 13 | user-select: text; 14 | white-space: normal; 15 | font-weight: normal; 16 | text-align: left; 17 | 18 | &:after { 19 | content: ""; 20 | position: absolute; 21 | background: rgba(255, 255, 255, 0.01); 22 | } 23 | 24 | &-hidden { 25 | display: none; 26 | } 27 | 28 | // Offset the popover to account for the popover arrow 29 | &-placement-top, 30 | &-placement-topLeft, 31 | &-placement-topRight { 32 | padding-bottom: @popover-distance; 33 | } 34 | 35 | &-placement-right, 36 | &-placement-rightTop, 37 | &-placement-rightBottom { 38 | padding-left: @popover-distance; 39 | } 40 | 41 | &-placement-bottom, 42 | &-placement-bottomLeft, 43 | &-placement-bottomRight { 44 | padding-top: @popover-distance; 45 | } 46 | 47 | &-placement-left, 48 | &-placement-leftTop, 49 | &-placement-leftBottom { 50 | padding-right: @popover-distance; 51 | } 52 | 53 | &-inner { 54 | background-color: @popover-bg; 55 | background-clip: padding-box; 56 | border-radius: @border-radius-base; 57 | box-shadow: @box-shadow-base; 58 | } 59 | 60 | &-title { 61 | min-width: @popover-min-width; 62 | margin: 0; // reset heading margin 63 | padding: 5px @padding-md 4px; 64 | min-height: 32px; 65 | border-bottom: 1px solid @border-color-split; 66 | color: @heading-color; 67 | font-weight: 500; 68 | } 69 | 70 | &-inner-content { 71 | padding: 12px @padding-md; 72 | color: @popover-color; 73 | } 74 | 75 | &-buttons { 76 | text-align: right; 77 | margin-bottom: 4px; 78 | button { 79 | margin-left: 8px; 80 | } 81 | } 82 | 83 | // Arrows 84 | // .popover-arrow is outer, .popover-arrow:after is inner 85 | 86 | &-arrow { 87 | background: @popover-bg; 88 | width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); 89 | height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); 90 | transform: rotate(45deg); 91 | position: absolute; 92 | display: block; 93 | border-color: transparent; 94 | border-style: solid; 95 | } 96 | 97 | &-placement-top > &-content > &-arrow, 98 | &-placement-topLeft > &-content > &-arrow, 99 | &-placement-topRight > &-content > &-arrow { 100 | bottom: @popover-distance - @popover-arrow-width + 1.5px; 101 | box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); 102 | } 103 | &-placement-top > &-content > &-arrow { 104 | left: 50%; 105 | transform: translateX(-50%) rotate(45deg); 106 | } 107 | &-placement-topLeft > &-content > &-arrow { 108 | left: 16px; 109 | } 110 | &-placement-topRight > &-content > &-arrow { 111 | right: 16px; 112 | } 113 | 114 | &-placement-right > &-content > &-arrow, 115 | &-placement-rightTop > &-content > &-arrow, 116 | &-placement-rightBottom > &-content > &-arrow { 117 | left: @popover-distance - @popover-arrow-width + 2px; 118 | box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); 119 | } 120 | &-placement-right > &-content > &-arrow { 121 | top: 50%; 122 | transform: translateY(-50%) rotate(45deg); 123 | } 124 | &-placement-rightTop > &-content > &-arrow { 125 | top: 12px; 126 | } 127 | &-placement-rightBottom > &-content > &-arrow { 128 | bottom: 12px; 129 | } 130 | 131 | &-placement-bottom > &-content > &-arrow, 132 | &-placement-bottomLeft > &-content > &-arrow, 133 | &-placement-bottomRight > &-content > &-arrow { 134 | top: @popover-distance - @popover-arrow-width + 2px; 135 | box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); 136 | } 137 | &-placement-bottom > &-content > &-arrow { 138 | left: 50%; 139 | transform: translateX(-50%) rotate(45deg); 140 | } 141 | &-placement-bottomLeft > &-content > &-arrow { 142 | left: 16px; 143 | } 144 | &-placement-bottomRight > &-content > &-arrow { 145 | right: 16px; 146 | } 147 | 148 | &-placement-left > &-content > &-arrow, 149 | &-placement-leftTop > &-content > &-arrow, 150 | &-placement-leftBottom > &-content > &-arrow { 151 | right: @popover-distance - @popover-arrow-width + 2px; 152 | box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); 153 | } 154 | &-placement-left > &-content > &-arrow { 155 | top: 50%; 156 | transform: translateY(-50%) rotate(45deg); 157 | } 158 | &-placement-leftTop > &-content > &-arrow { 159 | top: 12px; 160 | } 161 | &-placement-leftBottom > &-content > &-arrow { 162 | bottom: 12px; 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/directive/tour-anchor.directive.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ComponentFactory, 3 | ComponentFactoryResolver, 4 | Directive, 5 | ElementRef, 6 | HostBinding, 7 | Injector, 8 | Input, 9 | OnDestroy, 10 | OnInit, Renderer2, 11 | ViewContainerRef 12 | } from '@angular/core'; 13 | import { Subscription } from 'rxjs'; 14 | import withinviewport from 'withinviewport'; 15 | 16 | 17 | import { first } from 'rxjs/operators'; 18 | import { TourBackdropService } from '../services/tour-backdrop.service'; 19 | import { IStepOption } from '../models/step-option.interface'; 20 | import { TourStepComponent } from '../components/tour-step/tour-step.component'; 21 | import { TourService, TourState } from '../services/tour.service'; 22 | 23 | @Directive({ 24 | selector: '[tourAnchor]' 25 | }) 26 | export class TourAnchorDirective implements OnInit, OnDestroy { 27 | @Input() public tourAnchor: string; 28 | public tourStep: TourStepComponent; 29 | public menuCloseSubscription: Subscription; 30 | 31 | @HostBinding('class.touranchor--is-active') public isActive: boolean; 32 | @HostBinding('class.ripple-effect') public enableRippleEffect = false; 33 | @HostBinding('class.allow-interactions') public allowInteractions = false; 34 | 35 | constructor( 36 | public elementRef: ElementRef, 37 | private componentFactoryResolver: ComponentFactoryResolver, 38 | private injector: Injector, 39 | private renderer: Renderer2, 40 | private viewContainer: ViewContainerRef, 41 | private resolver: ComponentFactoryResolver, 42 | private tourService: TourService, 43 | private tourBackdrop: TourBackdropService 44 | ) { 45 | } 46 | 47 | public ngOnInit(): void { 48 | const factory: ComponentFactory = this.resolver.resolveComponentFactory(TourStepComponent); 49 | const tourComponent = this.viewContainer.createComponent(factory); 50 | this.tourStep = tourComponent.instance; 51 | this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tourComponent.location.nativeElement); 52 | this.tourStep.setOverlayOrigin(this); 53 | 54 | this.tourService.register(this.tourAnchor, this); 55 | } 56 | 57 | public ngOnDestroy(): void { 58 | this.tourService.unregister(this.tourAnchor); 59 | } 60 | 61 | public showTourStep(step: IStepOption): void { 62 | this.isActive = true; 63 | this.tourStep.step = step; 64 | this.tourStep.nzPlacement = step.placement; 65 | this.tourStep.stepTemplate = step.stepTemplate; 66 | 67 | if (!step.preventScrolling) { 68 | if (!withinviewport(this.elementRef.nativeElement, {sides: 'bottom'})) { 69 | (this.elementRef.nativeElement).scrollIntoView(false); 70 | } else if ( 71 | !withinviewport(this.elementRef.nativeElement, {sides: 'left top right'}) 72 | ) { 73 | (this.elementRef.nativeElement).scrollIntoView(true); 74 | } 75 | } 76 | 77 | this.enableRippleEffect = step.enableRippleEffect; 78 | this.allowInteractions = step.allowInteractions; 79 | 80 | if (step.nextOn) { 81 | this.allowInteractions = true; 82 | 83 | const onNext = () => { 84 | this.elementRef.nativeElement.removeEventListener(step.nextOn, onNext); 85 | this.tourService.next(); 86 | }; 87 | 88 | this.elementRef.nativeElement.addEventListener(step.nextOn, onNext); 89 | } 90 | 91 | this.tourStep.show(); 92 | 93 | if (!step.disableBackdrop) { 94 | this.tourBackdrop.show(this.elementRef, step.backdropRadius, step.backdropColor); 95 | } else { 96 | this.tourBackdrop.close(); 97 | } 98 | 99 | if (step.enableRippleEffect) { 100 | const rippleColor = step.rippleColor ? step.rippleColor : 'rgba(0, 0, 0, 0.7)'; 101 | this.elementRef.nativeElement.style.boxShadow = `${rippleColor} 0px 0px 0px 100vw`; 102 | } 103 | 104 | step.prevBtnTitle = step.prevBtnTitle || 'Prev'; 105 | step.nextBtnTitle = step.nextBtnTitle || 'Next'; 106 | step.endBtnTitle = step.endBtnTitle || 'End'; 107 | 108 | if (this.menuCloseSubscription) { 109 | this.menuCloseSubscription.unsubscribe(); 110 | } 111 | this.menuCloseSubscription = this.tourStep.closed$ 112 | .pipe(first()) 113 | .subscribe(() => { 114 | if (this.tourService.getStatus() !== TourState.OFF) { 115 | this.tourService.end(); 116 | this.tourBackdrop.close(); 117 | } 118 | }); 119 | } 120 | 121 | public hideTourStep(): void { 122 | this.isActive = false; 123 | 124 | if (this.enableRippleEffect) { 125 | this.elementRef.nativeElement.style.boxShadow = 'none'; 126 | } 127 | 128 | if (this.menuCloseSubscription) { 129 | this.menuCloseSubscription.unsubscribe(); 130 | } 131 | this.tourStep.hide(); 132 | if (this.tourService.getStatus() === TourState.OFF) { 133 | this.tourBackdrop.close(); 134 | } 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 |

5 | Ngx-App-Tour 6 |

7 |

8 | Demo 9 |

10 | 11 | > This library built on the great lib ngx-tour by [isaacplmann](https://github.com/isaacplmann.) It also uses the popover component by my favourite angular ui lib [ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd). 12 | 13 | ### Installation 14 | 15 | ``` 16 | npm install ngx-app-tour 17 | ``` 18 | 19 | Add lib styles to your app for ex styles in angular.json: 20 | 21 | ```JS 22 | "styles": [ 23 | "node_modules/ngx-app-tour/styles/styles.css", 24 | ... 25 | ], 26 | ``` 27 | 28 | ### Usage 29 | Add in your root module: 30 | 31 | ```JS 32 | @NgModule({ 33 | imports: [ 34 | ... 35 | NgxAppTour.forRoot() 36 | ], 37 | }) 38 | export class AppModule { } 39 | ``` 40 | 41 | Add in every other module you use it in: 42 | ```JS 43 | @NgModule({ 44 | imports: [ 45 | ... 46 | NgxAppTour 47 | ], 48 | }) 49 | export class AppModule { } 50 | ``` 51 | 52 | Add in every other module you use it in: 53 | 54 | ```JS 55 | @NgModule({ 56 | imports: [ 57 | ... 58 | NgxAppTour 59 | ], 60 | }) 61 | export class AppModule { } 62 | ``` 63 | 64 | Mark your tour steps with tourAnchor and give it an id: 65 | 66 | ```HTML 67 |
68 | ``` 69 | 70 | Enject TourService in a component: 71 | 72 | ```JS 73 | constructor(public tourService: TourService) {} 74 | ``` 75 | 76 | Use the TourService to init tour tour: 77 | ```JS 78 | this.tourService.initialize(steps[], defaults); 79 | ``` 80 | 81 | Use the TourService to control the tour: 82 | ```JS 83 | this.tourService.start(); 84 | this.tourService.stop(); 85 | this.tourService.pause(); 86 | this.tourService.resume(); 87 | ``` 88 | 89 | Use the TourService to listen for tour events: 90 | ```JS 91 | this.tourService.events$.subscribe(e => do something) 92 | ``` 93 | 94 | Use custom step template: 95 | ```HTML 96 | 97 |
98 |
99 | {{ step?.content }} 100 |
101 |
102 | 105 | 108 | 109 |
110 |
111 | 112 | ``` 113 | 114 | ```JS 115 | @ViewChild('stepTemplate') stepTemplate; 116 | 117 | // then use it with a single step 118 | this.tourService.initialize([ 119 | ... 120 | { 121 | ... 122 | stepTemplate: this.stepTemplate 123 | }, 124 | ... 125 | ]); 126 | 127 | // or as default template 128 | 129 | this.tourService.initialize([...], {stepTemplate: this.stepTemplate}); 130 | 131 | ``` 132 | 133 | Use touranchor--is-active class to style active step: 134 | ```CSS 135 | .touranchor--is-active{ 136 | // your styles 137 | } 138 | ``` 139 | 140 | 141 | ### Tour Step Options 142 | ```JS 143 | export interface IStepOption { 144 | stepId?: string; 145 | anchorId?: string; 146 | title?: string; 147 | content?: string; 148 | route?: string | string[] | UrlSegment[]; 149 | nextStep?: number | string; 150 | prevStep?: number | string; 151 | preventScrolling?: boolean; 152 | prevBtnTitle?: string; 153 | nextBtnTitle?: string; 154 | endBtnTitle?: string; 155 | disableBackdrop?: boolean; 156 | backdropColor?: string; 157 | backdropRadius?: string; 158 | /* Add ripple effect tour target */ 159 | enableRippleEffect?: boolean; 160 | rippleColor?: string; 161 | /* Change step default template */ 162 | stepTemplate?; 163 | /* Use this to allow click, type..etc on tour target */ 164 | allowInteractions?: boolean; // true if you set a nextOn 165 | /* se this to wait for certn event on step target before going to the next step 166 | like click on a button or hit enter on an input */ 167 | nextOn?: string; // disable next btn on default template 168 | placement?: 'topLeft' | 'top' | 'topRight' | 'leftTop' | 'left' | 'leftBottom' 169 | | 'rightTop' | 'right'| 'rightBottom'| 'bottomLeft' | 'bottom'| 'bottomRight'; 170 | } 171 | ``` 172 | 173 | ###Changes 174 | 175 | ``` 176 | Version 1.2.0 177 | 178 | *Add allowInteractions option on tour step 179 | -> Use this to allow click, type..etc on tour target 180 | *Add allowInteractions nextOn on tour step 181 | -> Use this to wait for certn event on step target before going to the next step 182 | like click on a button or hit enter on an input 183 | ``` 184 | -------------------------------------------------------------------------------- /docs/styles.980b2b165b80dfe3a1e0.css: -------------------------------------------------------------------------------- 1 | *,::after,::before{box-sizing:border-box}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}[hidden]{display:none!important}.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%;position:fixed;z-index:1000}.cdk-overlay-backdrop{top:0;bottom:0;left:0;right:0;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0;position:absolute;pointer-events:auto;z-index:1000;background:0 0}.cdk-overlay-pane{position:absolute;pointer-events:auto;z-index:1000}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.ant-popover{font-variant:tabular-nums;box-sizing:border-box;margin:0;padding:0;list-style:none;top:0;left:0;z-index:1030;cursor:auto;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:normal;font-weight:400;text-align:left}.ant-popover:after{content:"";position:absolute;background:rgba(255,255,255,.01)}.ant-popover-hidden{display:none}.ant-popover-placement-top,.ant-popover-placement-topLeft,.ant-popover-placement-topRight{padding-bottom:10px}.ant-popover-placement-right,.ant-popover-placement-rightBottom,.ant-popover-placement-rightTop{padding-left:10px}.ant-popover-placement-bottom,.ant-popover-placement-bottomLeft,.ant-popover-placement-bottomRight{padding-top:10px}.ant-popover-placement-left,.ant-popover-placement-leftBottom,.ant-popover-placement-leftTop{padding-right:10px}.ant-popover-inner{background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ant-popover-title{min-width:177px;margin:0;padding:5px 16px 4px;min-height:32px;border-bottom:1px solid #e8e8e8;color:rgba(0,0,0,.85);font-weight:500}.ant-popover-inner-content{padding:12px 16px;color:rgba(0,0,0,.65)}.ant-popover-buttons{text-align:right;margin-bottom:4px}.ant-popover-buttons button{margin-left:8px}.ant-popover-arrow{background:#fff;width:8.48528137px;height:8.48528137px;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;display:block;border-color:transparent;border-style:solid}.ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow{bottom:5.5px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg)}.ant-popover-placement-topLeft>.ant-popover-content>.ant-popover-arrow{left:16px}.ant-popover-placement-topRight>.ant-popover-content>.ant-popover-arrow{right:16px}.ant-popover-placement-right>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-rightBottom>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-rightTop>.ant-popover-content>.ant-popover-arrow{left:6px;box-shadow:-3px 3px 7px rgba(0,0,0,.07)}.ant-popover-placement-right>.ant-popover-content>.ant-popover-arrow{top:50%;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.ant-popover-placement-rightTop>.ant-popover-content>.ant-popover-arrow{top:12px}.ant-popover-placement-rightBottom>.ant-popover-content>.ant-popover-arrow{bottom:12px}.ant-popover-placement-bottom>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-bottomLeft>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-bottomRight>.ant-popover-content>.ant-popover-arrow{top:6px;box-shadow:-2px -2px 5px rgba(0,0,0,.06)}.ant-popover-placement-bottom>.ant-popover-content>.ant-popover-arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg)}.ant-popover-placement-bottomLeft>.ant-popover-content>.ant-popover-arrow{left:16px}.ant-popover-placement-bottomRight>.ant-popover-content>.ant-popover-arrow{right:16px}.ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-leftBottom>.ant-popover-content>.ant-popover-arrow,.ant-popover-placement-leftTop>.ant-popover-content>.ant-popover-arrow{right:6px;box-shadow:3px -3px 7px rgba(0,0,0,.07)}.ant-popover-placement-left>.ant-popover-content>.ant-popover-arrow{top:50%;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.ant-popover-placement-leftTop>.ant-popover-content>.ant-popover-arrow{top:12px}.ant-popover-placement-leftBottom>.ant-popover-content>.ant-popover-arrow{bottom:12px}.ant-popover{position:relative}.step-container{min-width:200px}.step-content,.step-title{text-align:center;padding:10px;font-size:16px;border-bottom:1px solid #8080802e}@media (max-width:600px){.step-content,.step-title{border-width:1.5px}}.step-actions{display:flex;align-items:center;justify-content:space-around}.step-btn{border:none;background:0 0;display:flex;align-items:center;justify-content:center;padding:8px}.icon-btn{height:20px;width:20px}button[disabled] .icon-btn{opacity:.2}.ripple-effect.touranchor--is-active{transition:box-shadow .5s ease-in-out;z-index:100;box-shadow:rgba(0,0,0,.7) 0 0 0 100vw}.allow-interactions.touranchor--is-active{z-index:1200}.custom-step-content{padding:10px;text-align:center;color:#4caf50} -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-tour": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "architect": { 11 | "build": { 12 | "builder": "@angular-devkit/build-angular:browser", 13 | "options": { 14 | "outputPath": "dist/app", 15 | "index": "src/index.html", 16 | "main": "src/main.ts", 17 | "tsConfig": "src/tsconfig.app.json", 18 | "polyfills": "src/polyfills.ts", 19 | "assets": [ 20 | "src/assets", 21 | "src/favicon.ico" 22 | ], 23 | "styles": [ 24 | "node_modules/ngx-app-tour/styles/styles.css", 25 | "src/styles.css" 26 | ], 27 | "scripts": [] 28 | }, 29 | "configurations": { 30 | "production": { 31 | "optimization": true, 32 | "outputHashing": "all", 33 | "sourceMap": false, 34 | "extractCss": true, 35 | "namedChunks": false, 36 | "aot": true, 37 | "extractLicenses": true, 38 | "vendorChunk": false, 39 | "buildOptimizer": true, 40 | "fileReplacements": [ 41 | { 42 | "replace": "src/environments/environment.ts", 43 | "with": "src/environments/environment.prod.ts" 44 | } 45 | ] 46 | } 47 | } 48 | }, 49 | "serve": { 50 | "builder": "@angular-devkit/build-angular:dev-server", 51 | "options": { 52 | "browserTarget": "ngx-tour:build" 53 | }, 54 | "configurations": { 55 | "production": { 56 | "browserTarget": "ngx-tour:build:production" 57 | } 58 | } 59 | }, 60 | "extract-i18n": { 61 | "builder": "@angular-devkit/build-angular:extract-i18n", 62 | "options": { 63 | "browserTarget": "ngx-tour:build" 64 | } 65 | }, 66 | "test": { 67 | "builder": "@angular-devkit/build-angular:karma", 68 | "options": { 69 | "main": "src/test.ts", 70 | "karmaConfig": "./karma.conf.js", 71 | "polyfills": "src/polyfills.ts", 72 | "tsConfig": "src/tsconfig.spec.json", 73 | "scripts": [], 74 | "styles": [ 75 | "src/styles.css" 76 | ], 77 | "assets": [ 78 | "src/assets", 79 | "src/favicon.ico" 80 | ] 81 | } 82 | }, 83 | "lint": { 84 | "builder": "@angular-devkit/build-angular:tslint", 85 | "options": { 86 | "tsConfig": [ 87 | "src/tsconfig.app.json", 88 | "src/tsconfig.spec.json" 89 | ], 90 | "exclude": [] 91 | } 92 | } 93 | } 94 | }, 95 | "ngx-tour-e2e": { 96 | "root": "", 97 | "sourceRoot": "", 98 | "projectType": "application", 99 | "architect": { 100 | "e2e": { 101 | "builder": "@angular-devkit/build-angular:protractor", 102 | "options": { 103 | "protractorConfig": "./protractor.conf.js", 104 | "devServerTarget": "ngx-tour:serve" 105 | } 106 | }, 107 | "lint": { 108 | "builder": "@angular-devkit/build-angular:tslint", 109 | "options": { 110 | "tsConfig": [ 111 | "e2e/tsconfig.e2e.json" 112 | ], 113 | "exclude": [] 114 | } 115 | } 116 | } 117 | }, 118 | "ngx-app-tour": { 119 | "root": "projects/ngx-app-tour", 120 | "sourceRoot": "projects/ngx-app-tour/src", 121 | "projectType": "library", 122 | "prefix": "lib", 123 | "architect": { 124 | "build": { 125 | "builder": "@angular-devkit/build-ng-packagr:build", 126 | "options": { 127 | "tsConfig": "projects/ngx-app-tour/tsconfig.lib.json", 128 | "project": "projects/ngx-app-tour/ng-package.json" 129 | }, 130 | "configurations": { 131 | "production": { 132 | "project": "projects/ngx-app-tour/ng-package.prod.json" 133 | } 134 | } 135 | }, 136 | "test": { 137 | "builder": "@angular-devkit/build-angular:karma", 138 | "options": { 139 | "main": "projects/ngx-app-tour/src/test.ts", 140 | "tsConfig": "projects/ngx-app-tour/tsconfig.spec.json", 141 | "karmaConfig": "projects/ngx-app-tour/karma.conf.js" 142 | } 143 | }, 144 | "lint": { 145 | "builder": "@angular-devkit/build-angular:tslint", 146 | "options": { 147 | "tsConfig": [ 148 | "projects/ngx-app-tour/tsconfig.lib.json", 149 | "projects/ngx-app-tour/tsconfig.spec.json" 150 | ], 151 | "exclude": [ 152 | "**/node_modules/**" 153 | ] 154 | } 155 | } 156 | } 157 | } 158 | }, 159 | "defaultProject": "ngx-tour", 160 | "schematics": { 161 | "@schematics/angular:component": { 162 | "prefix": "app", 163 | "styleext": "css" 164 | }, 165 | "@schematics/angular:directive": { 166 | "prefix": "app" 167 | } 168 | } 169 | } -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/style/index.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2 | /* stylelint-disable no-duplicate-selectors */ 3 | /* stylelint-disable */ 4 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 5 | .ant-popover { 6 | font-family: 'Montserrat', 'Cairo', "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 7 | font-size: 14px; 8 | font-variant: tabular-nums; 9 | line-height: 1.5; 10 | color: rgba(0, 0, 0, 0.65); 11 | box-sizing: border-box; 12 | margin: 0; 13 | padding: 0; 14 | list-style: none; 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | z-index: 1030; 19 | cursor: auto; 20 | user-select: text; 21 | white-space: normal; 22 | font-weight: normal; 23 | text-align: left; 24 | } 25 | .ant-popover:after { 26 | content: ""; 27 | position: absolute; 28 | background: rgba(255, 255, 255, 0.01); 29 | } 30 | .ant-popover-hidden { 31 | display: none; 32 | } 33 | .ant-popover-placement-top, 34 | .ant-popover-placement-topLeft, 35 | .ant-popover-placement-topRight { 36 | padding-bottom: 10px; 37 | } 38 | .ant-popover-placement-right, 39 | .ant-popover-placement-rightTop, 40 | .ant-popover-placement-rightBottom { 41 | padding-left: 10px; 42 | } 43 | .ant-popover-placement-bottom, 44 | .ant-popover-placement-bottomLeft, 45 | .ant-popover-placement-bottomRight { 46 | padding-top: 10px; 47 | } 48 | .ant-popover-placement-left, 49 | .ant-popover-placement-leftTop, 50 | .ant-popover-placement-leftBottom { 51 | padding-right: 10px; 52 | } 53 | .ant-popover-inner { 54 | background-color: #fff; 55 | background-clip: padding-box; 56 | border-radius: 4px; 57 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 58 | } 59 | .ant-popover-title { 60 | min-width: 177px; 61 | margin: 0; 62 | padding: 5px 16px 4px; 63 | min-height: 32px; 64 | border-bottom: 1px solid #e8e8e8; 65 | color: rgba(0, 0, 0, 0.85); 66 | font-weight: 500; 67 | } 68 | .ant-popover-inner-content { 69 | padding: 12px 16px; 70 | color: rgba(0, 0, 0, 0.65); 71 | } 72 | .ant-popover-message { 73 | padding: 4px 0 12px; 74 | font-size: 14px; 75 | color: rgba(0, 0, 0, 0.65); 76 | position: relative; 77 | } 78 | .ant-popover-message > .anticon { 79 | position: absolute; 80 | top: 8px; 81 | color: #faad14; 82 | font-size: 14px; 83 | } 84 | .ant-popover-message-title { 85 | padding-left: 22px; 86 | } 87 | .ant-popover-buttons { 88 | text-align: right; 89 | margin-bottom: 4px; 90 | } 91 | .ant-popover-buttons button { 92 | margin-left: 8px; 93 | } 94 | .ant-popover-arrow { 95 | background: #fff; 96 | width: 8.48528137px; 97 | height: 8.48528137px; 98 | transform: rotate(45deg); 99 | position: absolute; 100 | display: block; 101 | border-color: transparent; 102 | border-style: solid; 103 | } 104 | .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, 105 | .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, 106 | .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { 107 | bottom: 5.5px; 108 | box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); 109 | } 110 | .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow { 111 | left: 50%; 112 | transform: translateX(-50%) rotate(45deg); 113 | } 114 | .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow { 115 | left: 16px; 116 | } 117 | .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { 118 | right: 16px; 119 | } 120 | .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow, 121 | .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow, 122 | .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { 123 | left: 6px; 124 | box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); 125 | } 126 | .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow { 127 | top: 50%; 128 | transform: translateY(-50%) rotate(45deg); 129 | } 130 | .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow { 131 | top: 12px; 132 | } 133 | .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { 134 | bottom: 12px; 135 | } 136 | .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow, 137 | .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow, 138 | .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { 139 | top: 6px; 140 | box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); 141 | } 142 | .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow { 143 | left: 50%; 144 | transform: translateX(-50%) rotate(45deg); 145 | } 146 | .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow { 147 | left: 16px; 148 | } 149 | .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { 150 | right: 16px; 151 | } 152 | .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, 153 | .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow, 154 | .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { 155 | right: 6px; 156 | box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); 157 | } 158 | .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow { 159 | top: 50%; 160 | transform: translateY(-50%) rotate(45deg); 161 | } 162 | .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow { 163 | top: 12px; 164 | } 165 | .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { 166 | bottom: 12px; 167 | } 168 | /*# sourceMappingURL=index.css.map */ -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/styles.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-no-unknown */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | img { 8 | vertical-align: middle; 9 | border-style: none; 10 | } 11 | svg:not(:root) { 12 | overflow: hidden; 13 | } 14 | a, 15 | area, 16 | button, 17 | [role="button"], 18 | input:not([type=range]), 19 | label, 20 | select, 21 | summary, 22 | textarea { 23 | touch-action: manipulation; 24 | } 25 | [hidden] { 26 | display: none !important; 27 | } 28 | .cdk-overlay-container { 29 | pointer-events: none; 30 | top: 0; 31 | left: 0; 32 | height: 100%; 33 | width: 100%; 34 | position: fixed; 35 | z-index: 1000; 36 | } 37 | .cdk-overlay-backdrop { 38 | top: 0; 39 | bottom: 0; 40 | left: 0; 41 | right: 0; 42 | -webkit-tap-highlight-color: transparent; 43 | transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 44 | opacity: 0; 45 | position: absolute; 46 | pointer-events: auto; 47 | z-index: 1000; 48 | } 49 | .cdk-overlay-pane { 50 | position: absolute; 51 | pointer-events: auto; 52 | z-index: 1000; 53 | } 54 | .cdk-overlay-connected-position-bounding-box { 55 | position: absolute; 56 | z-index: 1000; 57 | display: flex; 58 | flex-direction: column; 59 | min-width: 1px; 60 | min-height: 1px; 61 | } 62 | .ant-popover { 63 | font-variant: tabular-nums; 64 | box-sizing: border-box; 65 | margin: 0; 66 | padding: 0; 67 | list-style: none; 68 | position: absolute; 69 | top: 0; 70 | left: 0; 71 | z-index: 1030; 72 | cursor: auto; 73 | user-select: text; 74 | white-space: normal; 75 | font-weight: normal; 76 | text-align: left; 77 | } 78 | .ant-popover:after { 79 | content: ""; 80 | position: absolute; 81 | background: rgba(255, 255, 255, 0.01); 82 | } 83 | .ant-popover-hidden { 84 | display: none; 85 | } 86 | .ant-popover-placement-top, 87 | .ant-popover-placement-topLeft, 88 | .ant-popover-placement-topRight { 89 | padding-bottom: 10px; 90 | } 91 | .ant-popover-placement-right, 92 | .ant-popover-placement-rightTop, 93 | .ant-popover-placement-rightBottom { 94 | padding-left: 10px; 95 | } 96 | .ant-popover-placement-bottom, 97 | .ant-popover-placement-bottomLeft, 98 | .ant-popover-placement-bottomRight { 99 | padding-top: 10px; 100 | } 101 | .ant-popover-placement-left, 102 | .ant-popover-placement-leftTop, 103 | .ant-popover-placement-leftBottom { 104 | padding-right: 10px; 105 | } 106 | .ant-popover-inner { 107 | background-color: #fff; 108 | background-clip: padding-box; 109 | border-radius: 4px; 110 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 111 | } 112 | .ant-popover-title { 113 | min-width: 177px; 114 | margin: 0; 115 | padding: 5px 16px 4px; 116 | min-height: 32px; 117 | border-bottom: 1px solid #e8e8e8; 118 | color: rgba(0, 0, 0, 0.85); 119 | font-weight: 500; 120 | } 121 | .ant-popover-inner-content { 122 | padding: 12px 16px; 123 | color: rgba(0, 0, 0, 0.65); 124 | } 125 | .ant-popover-buttons { 126 | text-align: right; 127 | margin-bottom: 4px; 128 | } 129 | .ant-popover-buttons button { 130 | margin-left: 8px; 131 | } 132 | .ant-popover-arrow { 133 | background: #fff; 134 | width: 8.48528137px; 135 | height: 8.48528137px; 136 | transform: rotate(45deg); 137 | position: absolute; 138 | display: block; 139 | border-color: transparent; 140 | border-style: solid; 141 | } 142 | .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, 143 | .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, 144 | .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { 145 | bottom: 5.5px; 146 | box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); 147 | } 148 | .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow { 149 | left: 50%; 150 | transform: translateX(-50%) rotate(45deg); 151 | } 152 | .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow { 153 | left: 16px; 154 | } 155 | .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { 156 | right: 16px; 157 | } 158 | .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow, 159 | .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow, 160 | .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { 161 | left: 6px; 162 | box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); 163 | } 164 | .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow { 165 | top: 50%; 166 | transform: translateY(-50%) rotate(45deg); 167 | } 168 | .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow { 169 | top: 12px; 170 | } 171 | .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { 172 | bottom: 12px; 173 | } 174 | .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow, 175 | .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow, 176 | .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { 177 | top: 6px; 178 | box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); 179 | } 180 | .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow { 181 | left: 50%; 182 | transform: translateX(-50%) rotate(45deg); 183 | } 184 | .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow { 185 | left: 16px; 186 | } 187 | .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { 188 | right: 16px; 189 | } 190 | .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, 191 | .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow, 192 | .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { 193 | right: 6px; 194 | box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); 195 | } 196 | .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow { 197 | top: 50%; 198 | transform: translateY(-50%) rotate(45deg); 199 | } 200 | .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow { 201 | top: 12px; 202 | } 203 | .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { 204 | bottom: 12px; 205 | } 206 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-no-unknown */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | img { 8 | vertical-align: middle; 9 | border-style: none; 10 | } 11 | svg:not(:root) { 12 | overflow: hidden; 13 | } 14 | a, 15 | area, 16 | button, 17 | [role="button"], 18 | input:not([type=range]), 19 | label, 20 | select, 21 | summary, 22 | textarea { 23 | touch-action: manipulation; 24 | } 25 | [hidden] { 26 | display: none !important; 27 | } 28 | .cdk-overlay-container { 29 | pointer-events: none; 30 | top: 0; 31 | left: 0; 32 | height: 100%; 33 | width: 100%; 34 | position: fixed; 35 | z-index: 1000; 36 | } 37 | .cdk-overlay-backdrop { 38 | top: 0; 39 | bottom: 0; 40 | left: 0; 41 | right: 0; 42 | -webkit-tap-highlight-color: transparent; 43 | transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 44 | opacity: 0; 45 | position: absolute; 46 | pointer-events: auto; 47 | z-index: 1000; 48 | background: none; 49 | } 50 | .cdk-overlay-pane { 51 | position: absolute; 52 | pointer-events: auto; 53 | z-index: 1000; 54 | } 55 | .cdk-overlay-connected-position-bounding-box { 56 | position: absolute; 57 | z-index: 1000; 58 | display: flex; 59 | flex-direction: column; 60 | min-width: 1px; 61 | min-height: 1px; 62 | } 63 | .ant-popover { 64 | font-variant: tabular-nums; 65 | box-sizing: border-box; 66 | margin: 0; 67 | padding: 0; 68 | list-style: none; 69 | position: absolute; 70 | top: 0; 71 | left: 0; 72 | z-index: 1030; 73 | cursor: auto; 74 | user-select: text; 75 | white-space: normal; 76 | font-weight: normal; 77 | text-align: left; 78 | } 79 | .ant-popover:after { 80 | content: ""; 81 | position: absolute; 82 | background: rgba(255, 255, 255, 0.01); 83 | } 84 | .ant-popover-hidden { 85 | display: none; 86 | } 87 | .ant-popover-placement-top, 88 | .ant-popover-placement-topLeft, 89 | .ant-popover-placement-topRight { 90 | padding-bottom: 10px; 91 | } 92 | .ant-popover-placement-right, 93 | .ant-popover-placement-rightTop, 94 | .ant-popover-placement-rightBottom { 95 | padding-left: 10px; 96 | } 97 | .ant-popover-placement-bottom, 98 | .ant-popover-placement-bottomLeft, 99 | .ant-popover-placement-bottomRight { 100 | padding-top: 10px; 101 | } 102 | .ant-popover-placement-left, 103 | .ant-popover-placement-leftTop, 104 | .ant-popover-placement-leftBottom { 105 | padding-right: 10px; 106 | } 107 | .ant-popover-inner { 108 | background-color: #fff; 109 | background-clip: padding-box; 110 | border-radius: 4px; 111 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 112 | } 113 | .ant-popover-title { 114 | min-width: 177px; 115 | margin: 0; 116 | padding: 5px 16px 4px; 117 | min-height: 32px; 118 | border-bottom: 1px solid #e8e8e8; 119 | color: rgba(0, 0, 0, 0.85); 120 | font-weight: 500; 121 | } 122 | .ant-popover-inner-content { 123 | padding: 12px 16px; 124 | color: rgba(0, 0, 0, 0.65); 125 | } 126 | .ant-popover-buttons { 127 | text-align: right; 128 | margin-bottom: 4px; 129 | } 130 | .ant-popover-buttons button { 131 | margin-left: 8px; 132 | } 133 | .ant-popover-arrow { 134 | background: #fff; 135 | width: 8.48528137px; 136 | height: 8.48528137px; 137 | transform: rotate(45deg); 138 | position: absolute; 139 | display: block; 140 | border-color: transparent; 141 | border-style: solid; 142 | } 143 | .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, 144 | .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, 145 | .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { 146 | bottom: 5.5px; 147 | box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); 148 | } 149 | .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow { 150 | left: 50%; 151 | transform: translateX(-50%) rotate(45deg); 152 | } 153 | .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow { 154 | left: 16px; 155 | } 156 | .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { 157 | right: 16px; 158 | } 159 | .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow, 160 | .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow, 161 | .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { 162 | left: 6px; 163 | box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); 164 | } 165 | .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow { 166 | top: 50%; 167 | transform: translateY(-50%) rotate(45deg); 168 | } 169 | .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow { 170 | top: 12px; 171 | } 172 | .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { 173 | bottom: 12px; 174 | } 175 | .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow, 176 | .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow, 177 | .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { 178 | top: 6px; 179 | box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); 180 | } 181 | .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow { 182 | left: 50%; 183 | transform: translateX(-50%) rotate(45deg); 184 | } 185 | .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow { 186 | left: 16px; 187 | } 188 | .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { 189 | right: 16px; 190 | } 191 | .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, 192 | .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow, 193 | .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { 194 | right: 6px; 195 | box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); 196 | } 197 | .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow { 198 | top: 50%; 199 | transform: translateY(-50%) rotate(45deg); 200 | } 201 | .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow { 202 | top: 12px; 203 | } 204 | .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { 205 | bottom: 12px; 206 | } 207 | .ant-popover { 208 | position: relative; 209 | } 210 | .step-container { 211 | min-width: 200px; 212 | } 213 | .step-title, 214 | .step-content { 215 | text-align: center; 216 | padding: 10px; 217 | font-size: 16px; 218 | border-bottom: 1px solid #8080802e; 219 | } 220 | @media (max-width: 600px) { 221 | .step-title, 222 | .step-content { 223 | border-width: 1.5px; 224 | } 225 | } 226 | .step-actions { 227 | display: flex; 228 | align-items: center; 229 | justify-content: space-around; 230 | } 231 | .step-btn { 232 | border: none; 233 | background: none; 234 | display: flex; 235 | align-items: center; 236 | justify-content: center; 237 | padding: 8px; 238 | } 239 | .icon-btn { 240 | height: 20px; 241 | width: 20px; 242 | } 243 | button[disabled] .icon-btn { 244 | opacity: 0.2; 245 | } 246 | .ripple-effect.touranchor--is-active { 247 | transition: box-shadow 0.5s ease-in-out; 248 | z-index: 100; 249 | box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 0px 100vw; 250 | } 251 | .allow-interactions.touranchor--is-active { 252 | z-index: 1200; 253 | } 254 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/services/tour.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { NavigationStart, Router } from '@angular/router'; 3 | 4 | import { Subject, Observable, merge as mergeStatic } from 'rxjs'; 5 | import { first, map, filter } from 'rxjs/operators'; 6 | import { popUpFadeTime } from '../conig'; 7 | import { IStepOption } from '../models/step-option.interface'; 8 | import { TourAnchorDirective } from '../directive/tour-anchor.directive'; 9 | 10 | export enum TourState { 11 | OFF, 12 | ON, 13 | PAUSED 14 | } 15 | 16 | @Injectable() 17 | export class TourService { 18 | public stepShow$: Subject = new Subject(); 19 | public stepHide$: Subject = new Subject(); 20 | public initialize$: Subject = new Subject(); 21 | public start$: Subject = new Subject(); 22 | public end$: Subject = new Subject(); 23 | public pause$: Subject = new Subject(); 24 | public resume$: Subject = new Subject(); 25 | public anchorRegister$: Subject = new Subject(); 26 | public anchorUnregister$: Subject = new Subject(); 27 | public events$: Observable<{ name: string; value: any }> = mergeStatic( 28 | this.stepShow$.pipe(map(value => ({name: 'stepShow', value}))), 29 | this.stepHide$.pipe(map(value => ({name: 'stepHide', value}))), 30 | this.initialize$.pipe(map(value => ({name: 'initialize', value}))), 31 | this.start$.pipe(map(value => ({name: 'start', value}))), 32 | this.end$.pipe(map(value => ({name: 'end', value}))), 33 | this.pause$.pipe(map(value => ({name: 'pause', value}))), 34 | this.resume$.pipe(map(value => ({name: 'resume', value}))), 35 | this.anchorRegister$.pipe( 36 | map(value => ({ 37 | name: 'anchorRegister', 38 | value 39 | })) 40 | ), 41 | this.anchorUnregister$.pipe( 42 | map(value => ({ 43 | name: 'anchorUnregister', 44 | value 45 | })) 46 | ) 47 | ); 48 | 49 | public steps: T[] = []; 50 | public currentStep: T; 51 | 52 | public anchors: { [anchorId: string]: TourAnchorDirective } = {}; 53 | private status: TourState = TourState.OFF; 54 | 55 | constructor(private router: Router) { 56 | } 57 | 58 | public initialize(steps: T[], stepDefaults?: T): void { 59 | if (steps && steps.length > 0) { 60 | this.status = TourState.OFF; 61 | this.steps = steps.map(step => Object.assign({}, stepDefaults, step)); 62 | this.initialize$.next(this.steps); 63 | } 64 | } 65 | 66 | public start(): void { 67 | this.startAt(0); 68 | } 69 | 70 | public startAt(stepId: number | string): void { 71 | this.status = TourState.ON; 72 | this.goToStep(this.loadStep(stepId)); 73 | this.start$.next(); 74 | this.router.events 75 | .pipe(filter(event => event instanceof NavigationStart), first()) 76 | .subscribe(() => { 77 | if (this.currentStep) { 78 | this.hideStep(this.currentStep); 79 | } 80 | }); 81 | } 82 | 83 | public end(): void { 84 | this.status = TourState.OFF; 85 | this.hideStep(this.currentStep); 86 | this.currentStep = undefined; 87 | this.end$.next(); 88 | } 89 | 90 | public pause(): void { 91 | this.status = TourState.PAUSED; 92 | this.hideStep(this.currentStep); 93 | this.pause$.next(); 94 | } 95 | 96 | public resume(): void { 97 | this.status = TourState.ON; 98 | this.showStep(this.currentStep); 99 | this.resume$.next(); 100 | } 101 | 102 | public toggle(pause?: boolean): void { 103 | if (pause) { 104 | if (this.currentStep) { 105 | this.pause(); 106 | } else { 107 | this.resume(); 108 | } 109 | } else { 110 | if (this.currentStep) { 111 | this.end(); 112 | } else { 113 | this.start(); 114 | } 115 | } 116 | } 117 | 118 | public next(): void { 119 | if (this.hasNext(this.currentStep)) { 120 | this.goToStep( 121 | this.loadStep( 122 | this.currentStep.nextStep || this.steps.indexOf(this.currentStep) + 1 123 | ) 124 | ); 125 | } 126 | } 127 | 128 | public hasNext(step: T): boolean { 129 | if (!step) { 130 | console.warn('Can\'t get next step. No currentStep.'); 131 | return false; 132 | } 133 | return ( 134 | step.nextStep !== undefined || 135 | this.steps.indexOf(step) < this.steps.length - 1 136 | ); 137 | } 138 | 139 | public prev(): void { 140 | if (this.hasPrev(this.currentStep)) { 141 | this.goToStep( 142 | this.loadStep( 143 | this.currentStep.prevStep || this.steps.indexOf(this.currentStep) - 1 144 | ) 145 | ); 146 | } 147 | } 148 | 149 | public hasPrev(step: T): boolean { 150 | if (!step) { 151 | console.warn('Can\'t get previous step. No currentStep.'); 152 | return false; 153 | } 154 | return step.prevStep !== undefined || this.steps.indexOf(step) > 0; 155 | } 156 | 157 | public goto(stepId: number | string): void { 158 | this.goToStep(this.loadStep(stepId)); 159 | } 160 | 161 | public register(anchorId: string, anchor: TourAnchorDirective): void { 162 | if (this.anchors[anchorId]) { 163 | throw new Error('anchorId ' + anchorId + ' already registered!'); 164 | } 165 | this.anchors[anchorId] = anchor; 166 | this.anchorRegister$.next(anchorId); 167 | } 168 | 169 | public unregister(anchorId: string): void { 170 | delete this.anchors[anchorId]; 171 | this.anchorUnregister$.next(anchorId); 172 | } 173 | 174 | public getStatus(): TourState { 175 | return this.status; 176 | } 177 | 178 | private goToStep(step: T): void { 179 | if (!step) { 180 | console.warn('Can\'t go to non-existent step'); 181 | this.end(); 182 | return; 183 | } 184 | let navigatePromise: Promise = new Promise(resolve => 185 | resolve(true) 186 | ); 187 | if (step.route !== undefined && typeof step.route === 'string') { 188 | navigatePromise = this.router.navigateByUrl(step.route); 189 | } else if (step.route && Array.isArray(step.route)) { 190 | navigatePromise = this.router.navigate(step.route); 191 | } 192 | navigatePromise.then(navigated => { 193 | if (navigated !== false) { 194 | setTimeout(() => this.setCurrentStep(step)); 195 | } 196 | }); 197 | } 198 | 199 | private loadStep(stepId: number | string): T { 200 | if (typeof stepId === 'number') { 201 | return this.steps[stepId]; 202 | } else { 203 | return this.steps.find(step => step.stepId === stepId); 204 | } 205 | } 206 | 207 | private setCurrentStep(step: T): void { 208 | if (this.currentStep) { 209 | this.hideStep(this.currentStep); 210 | } 211 | 212 | setTimeout(() => { 213 | this.currentStep = step; 214 | this.showStep(this.currentStep); 215 | this.router.events 216 | .pipe(filter(event => event instanceof NavigationStart), first()) 217 | .subscribe(() => { 218 | if (this.currentStep) { 219 | this.hideStep(this.currentStep); 220 | } 221 | }); 222 | }, this.currentStep ? popUpFadeTime : 0); 223 | } 224 | 225 | private showStep(step: T, attempt = 0): void { 226 | const anchor = this.anchors[step && step.anchorId]; 227 | if (!anchor) { 228 | if (attempt === 20) { 229 | console.warn( 230 | 'Can\'t attach to unregistered anchor with id ' + step.anchorId 231 | ); 232 | this.end(); 233 | } else { 234 | setTimeout(() => this.showStep(step, ++attempt), 100); 235 | } 236 | 237 | return; 238 | } 239 | anchor.showTourStep(step); 240 | this.stepShow$.next(step); 241 | } 242 | 243 | private hideStep(step: T): void { 244 | const anchor = this.anchors[step && step.anchorId]; 245 | if (!anchor) { 246 | return; 247 | } 248 | anchor.hideTourStep(); 249 | this.stepHide$.next(step); 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/popover/nz-popover.directive.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AfterViewInit, 3 | ComponentFactory, 4 | ComponentFactoryResolver, 5 | Directive, 6 | ElementRef, 7 | EventEmitter, 8 | HostBinding, 9 | Input, 10 | OnDestroy, 11 | OnInit, 12 | Optional, 13 | Output, 14 | Renderer2, 15 | TemplateRef, 16 | ViewContainerRef 17 | } from '@angular/core'; 18 | 19 | import { Subject } from 'rxjs'; 20 | import { distinctUntilChanged, takeUntil } from 'rxjs/operators'; 21 | 22 | import { isNotNil } from '../core/util/check'; 23 | import { NzPopoverComponent } from './nz-popover.component'; 24 | 25 | @Directive({ 26 | selector: '[nz-popover]' 27 | }) 28 | export class NzPopoverDirective implements AfterViewInit, OnInit, OnDestroy { 29 | private unsubscribe$ = new Subject(); 30 | 31 | // [NOTE] Here hard coded, and nzTitle used only under NzTooltipDirective currently. 32 | isTooltipOpen: boolean = false; 33 | isDynamicTooltip = false; // Indicate whether current tooltip is dynamic created 34 | delayTimer; // Timer for delay enter/leave 35 | _title: string | TemplateRef; 36 | _content: string | TemplateRef; 37 | _overlayClassName: string; 38 | _overlayStyle: { [ key: string ]: string }; 39 | _mouseEnterDelay: number; 40 | _mouseLeaveDelay: number; 41 | _visible: boolean; 42 | _trigger: string; 43 | _placement: string; 44 | factory: ComponentFactory = this.resolver.resolveComponentFactory(NzPopoverComponent); 45 | @Output() readonly nzVisibleChange = new EventEmitter(); 46 | 47 | @Input('nz-tooltip') 48 | set nzTitle(title: string | TemplateRef) { 49 | this._title = title; 50 | this.updateCompValue('nzTitle', title); 51 | } 52 | 53 | get nzTitle(): string | TemplateRef { 54 | return this._title; 55 | } 56 | 57 | @Input('nzTitle') 58 | set setTitle(title: string | TemplateRef) { 59 | this.nzTitle = title; 60 | } 61 | 62 | @Input() 63 | set nzContent(value: string | TemplateRef) { 64 | this._content = value; 65 | this.updateCompValue('nzContent', value); 66 | } 67 | 68 | get nzContent(): string | TemplateRef { 69 | return this._content; 70 | } 71 | 72 | @Input() 73 | set nzOverlayClassName(value: string) { 74 | this._overlayClassName = value; 75 | this.updateCompValue('nzOverlayClassName', value); 76 | } 77 | 78 | get nzOverlayClassName(): string { 79 | return this._overlayClassName; 80 | } 81 | 82 | @Input() 83 | set nzOverlayStyle(value: { [ key: string ]: string }) { 84 | this._overlayStyle = value; 85 | this.updateCompValue('nzOverlayStyle', value); 86 | } 87 | 88 | get nzOverlayStyle(): { [ key: string ]: string } { 89 | return this._overlayStyle; 90 | } 91 | 92 | @Input() 93 | set nzMouseEnterDelay(value: number) { 94 | this._mouseEnterDelay = value; 95 | this.updateCompValue('nzMouseEnterDelay', value); 96 | } 97 | 98 | get nzMouseEnterDelay(): number { 99 | return this._mouseEnterDelay; 100 | } 101 | 102 | @Input() 103 | set nzMouseLeaveDelay(value: number) { 104 | this._mouseLeaveDelay = value; 105 | this.updateCompValue('nzMouseLeaveDelay', value); 106 | } 107 | 108 | get nzMouseLeaveDelay(): number { 109 | return this._mouseEnterDelay; 110 | } 111 | 112 | @Input() 113 | set nzVisible(value: boolean) { 114 | this._visible = value; 115 | this.updateCompValue('nzVisible', value); 116 | } 117 | 118 | get nzVisible(): boolean { 119 | return this._visible; 120 | } 121 | 122 | @Input() 123 | set nzTrigger(value: string) { 124 | this._trigger = value; 125 | this.updateCompValue('nzTrigger', value); 126 | } 127 | 128 | get nzTrigger(): string { 129 | return this._trigger; 130 | } 131 | 132 | @Input() 133 | set nzPlacement(value: string) { 134 | this._placement = value; 135 | this.updateCompValue('nzPlacement', value); 136 | } 137 | 138 | get nzPlacement(): string { 139 | return this._placement; 140 | } 141 | 142 | @HostBinding('class.ant-tooltip-open') 143 | get isOpen(): boolean { 144 | return this.isTooltipOpen; 145 | } 146 | 147 | private show(): void { 148 | this.tooltip.show(); 149 | this.isTooltipOpen = true; 150 | } 151 | 152 | private hide(): void { 153 | this.tooltip.hide(); 154 | this.isTooltipOpen = false; 155 | } 156 | 157 | private delayEnterLeave(isOrigin: boolean, isEnter: boolean, delay: number = -1): void { 158 | if (this.delayTimer) { // Clear timer during the delay time 159 | window.clearTimeout(this.delayTimer); 160 | this.delayTimer = null; 161 | } else if (delay > 0) { 162 | this.delayTimer = window.setTimeout(() => { 163 | this.delayTimer = null; 164 | isEnter ? this.show() : this.hide(); 165 | }, delay * 1000); 166 | } else { 167 | isEnter && isOrigin ? this.show() : this.hide(); // [Compatible] The "isOrigin" is used due to the tooltip will not hide immediately (may caused by the fade-out animation) 168 | } 169 | } 170 | 171 | // tslint:disable-next-line:no-any 172 | updateCompValue(key: string, value: any): void { 173 | if (this.isDynamicTooltip && isNotNil(value)) { 174 | this.tooltip[ key ] = value; 175 | } 176 | } 177 | 178 | constructor( 179 | public elementRef: ElementRef, 180 | public hostView: ViewContainerRef, 181 | public resolver: ComponentFactoryResolver, 182 | public renderer: Renderer2, 183 | @Optional() public tooltip: NzPopoverComponent) { 184 | } 185 | 186 | ngOnInit(): void { 187 | // Support faster tooltip mode: . [NOTE] Used only under NzTooltipDirective currently. 188 | if (!this.tooltip) { 189 | const tooltipComponent = this.hostView.createComponent(this.factory); 190 | this.tooltip = tooltipComponent.instance; 191 | // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967 192 | this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement); 193 | this.isDynamicTooltip = true; 194 | const properties = [ 'nzTitle', 'nzContent', 'nzOverlayClassName', 'nzOverlayStyle', 'nzMouseEnterDelay', 'nzMouseLeaveDelay', 'nzVisible', 'nzTrigger', 'nzPlacement' ]; 195 | properties.forEach(property => this.updateCompValue(property, this[ property ])); 196 | this.tooltip.nzVisibleChange.pipe(takeUntil(this.unsubscribe$), distinctUntilChanged()).subscribe(data => { 197 | this._visible = data; 198 | this.nzVisibleChange.emit(data); 199 | }); 200 | } 201 | this.tooltip.setOverlayOrigin(this); 202 | } 203 | 204 | ngAfterViewInit(): void { 205 | if (this.tooltip.nzTrigger === 'hover') { 206 | let overlayElement; 207 | this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.delayEnterLeave(true, true, this.tooltip.nzMouseEnterDelay)); 208 | this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => { 209 | this.delayEnterLeave(true, false, this.tooltip.nzMouseLeaveDelay); 210 | if (this.tooltip.overlay.overlayRef && !overlayElement) { // NOTE: we bind events under "mouseleave" due to the overlayRef is only created after the overlay was completely shown up 211 | overlayElement = this.tooltip.overlay.overlayRef.overlayElement; 212 | this.renderer.listen(overlayElement, 'mouseenter', () => this.delayEnterLeave(false, true)); 213 | this.renderer.listen(overlayElement, 'mouseleave', () => this.delayEnterLeave(false, false)); 214 | } 215 | }); 216 | } else if (this.tooltip.nzTrigger === 'focus') { 217 | this.renderer.listen(this.elementRef.nativeElement, 'focus', () => this.show()); 218 | this.renderer.listen(this.elementRef.nativeElement, 'blur', () => this.hide()); 219 | } else if (this.tooltip.nzTrigger === 'click') { 220 | this.renderer.listen(this.elementRef.nativeElement, 'click', (e) => { 221 | e.preventDefault(); 222 | this.show(); 223 | }); 224 | } 225 | } 226 | 227 | ngOnDestroy(): void { 228 | this.unsubscribe$.next(); 229 | this.unsubscribe$.complete(); 230 | } 231 | 232 | } 233 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["core/base.less","mixins/size.less","themes/default.less","mixins/clearfix.less","color/tinyColor.less","mixins/iconfont.less","core/iconfont.less","mixins/motion.less","core/motion/fade.less","core/motion/move.less","core/motion/other.less","core/motion/slide.less","core/motion/swing.less","core/motion/zoom.less","core/motion.less"],"names":[],"mappings":"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","file":"index.css"} -------------------------------------------------------------------------------- /docs/3rdpartylicenses.txt: -------------------------------------------------------------------------------- 1 | ngx-app-tour 2 | MIT 3 | Copyright 2017 Isaac Mann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | 12 | withinviewport 13 | ISC 14 | Copyright (c) 2015, Craig Patik 15 | 16 | Permission to use, copy, modify, and/or distribute this software for any 17 | purpose with or without fee is hereby granted, provided that the above 18 | copyright notice and this permission notice appear in all copies. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 21 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 22 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 23 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 24 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 25 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 26 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 27 | 28 | 29 | tslib 30 | Apache-2.0 31 | Apache License 32 | 33 | Version 2.0, January 2004 34 | 35 | http://www.apache.org/licenses/ 36 | 37 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 38 | 39 | 1. Definitions. 40 | 41 | "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. 42 | 43 | "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. 44 | 45 | "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. 46 | 47 | "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. 48 | 49 | "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. 50 | 51 | "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. 52 | 53 | "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). 54 | 55 | "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. 56 | 57 | "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." 58 | 59 | "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 60 | 61 | 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 62 | 63 | 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 64 | 65 | 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: 66 | 67 | You must give any other recipients of the Work or Derivative Works a copy of this License; and 68 | 69 | You must cause any modified files to carry prominent notices stating that You changed the files; and 70 | 71 | You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and 72 | 73 | If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 74 | 75 | 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 76 | 77 | 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 78 | 79 | 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 80 | 81 | 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 82 | 83 | 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. 84 | 85 | END OF TERMS AND CONDITIONS 86 | 87 | 88 | rxjs 89 | Apache-2.0 90 | Apache License 91 | Version 2.0, January 2004 92 | http://www.apache.org/licenses/ 93 | 94 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 95 | 96 | 1. Definitions. 97 | 98 | "License" shall mean the terms and conditions for use, reproduction, 99 | and distribution as defined by Sections 1 through 9 of this document. 100 | 101 | "Licensor" shall mean the copyright owner or entity authorized by 102 | the copyright owner that is granting the License. 103 | 104 | "Legal Entity" shall mean the union of the acting entity and all 105 | other entities that control, are controlled by, or are under common 106 | control with that entity. For the purposes of this definition, 107 | "control" means (i) the power, direct or indirect, to cause the 108 | direction or management of such entity, whether by contract or 109 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 110 | outstanding shares, or (iii) beneficial ownership of such entity. 111 | 112 | "You" (or "Your") shall mean an individual or Legal Entity 113 | exercising permissions granted by this License. 114 | 115 | "Source" form shall mean the preferred form for making modifications, 116 | including but not limited to software source code, documentation 117 | source, and configuration files. 118 | 119 | "Object" form shall mean any form resulting from mechanical 120 | transformation or translation of a Source form, including but 121 | not limited to compiled object code, generated documentation, 122 | and conversions to other media types. 123 | 124 | "Work" shall mean the work of authorship, whether in Source or 125 | Object form, made available under the License, as indicated by a 126 | copyright notice that is included in or attached to the work 127 | (an example is provided in the Appendix below). 128 | 129 | "Derivative Works" shall mean any work, whether in Source or Object 130 | form, that is based on (or derived from) the Work and for which the 131 | editorial revisions, annotations, elaborations, or other modifications 132 | represent, as a whole, an original work of authorship. For the purposes 133 | of this License, Derivative Works shall not include works that remain 134 | separable from, or merely link (or bind by name) to the interfaces of, 135 | the Work and Derivative Works thereof. 136 | 137 | "Contribution" shall mean any work of authorship, including 138 | the original version of the Work and any modifications or additions 139 | to that Work or Derivative Works thereof, that is intentionally 140 | submitted to Licensor for inclusion in the Work by the copyright owner 141 | or by an individual or Legal Entity authorized to submit on behalf of 142 | the copyright owner. For the purposes of this definition, "submitted" 143 | means any form of electronic, verbal, or written communication sent 144 | to the Licensor or its representatives, including but not limited to 145 | communication on electronic mailing lists, source code control systems, 146 | and issue tracking systems that are managed by, or on behalf of, the 147 | Licensor for the purpose of discussing and improving the Work, but 148 | excluding communication that is conspicuously marked or otherwise 149 | designated in writing by the copyright owner as "Not a Contribution." 150 | 151 | "Contributor" shall mean Licensor and any individual or Legal Entity 152 | on behalf of whom a Contribution has been received by Licensor and 153 | subsequently incorporated within the Work. 154 | 155 | 2. Grant of Copyright License. Subject to the terms and conditions of 156 | this License, each Contributor hereby grants to You a perpetual, 157 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 158 | copyright license to reproduce, prepare Derivative Works of, 159 | publicly display, publicly perform, sublicense, and distribute the 160 | Work and such Derivative Works in Source or Object form. 161 | 162 | 3. Grant of Patent License. Subject to the terms and conditions of 163 | this License, each Contributor hereby grants to You a perpetual, 164 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 165 | (except as stated in this section) patent license to make, have made, 166 | use, offer to sell, sell, import, and otherwise transfer the Work, 167 | where such license applies only to those patent claims licensable 168 | by such Contributor that are necessarily infringed by their 169 | Contribution(s) alone or by combination of their Contribution(s) 170 | with the Work to which such Contribution(s) was submitted. If You 171 | institute patent litigation against any entity (including a 172 | cross-claim or counterclaim in a lawsuit) alleging that the Work 173 | or a Contribution incorporated within the Work constitutes direct 174 | or contributory patent infringement, then any patent licenses 175 | granted to You under this License for that Work shall terminate 176 | as of the date such litigation is filed. 177 | 178 | 4. Redistribution. You may reproduce and distribute copies of the 179 | Work or Derivative Works thereof in any medium, with or without 180 | modifications, and in Source or Object form, provided that You 181 | meet the following conditions: 182 | 183 | (a) You must give any other recipients of the Work or 184 | Derivative Works a copy of this License; and 185 | 186 | (b) You must cause any modified files to carry prominent notices 187 | stating that You changed the files; and 188 | 189 | (c) You must retain, in the Source form of any Derivative Works 190 | that You distribute, all copyright, patent, trademark, and 191 | attribution notices from the Source form of the Work, 192 | excluding those notices that do not pertain to any part of 193 | the Derivative Works; and 194 | 195 | (d) If the Work includes a "NOTICE" text file as part of its 196 | distribution, then any Derivative Works that You distribute must 197 | include a readable copy of the attribution notices contained 198 | within such NOTICE file, excluding those notices that do not 199 | pertain to any part of the Derivative Works, in at least one 200 | of the following places: within a NOTICE text file distributed 201 | as part of the Derivative Works; within the Source form or 202 | documentation, if provided along with the Derivative Works; or, 203 | within a display generated by the Derivative Works, if and 204 | wherever such third-party notices normally appear. The contents 205 | of the NOTICE file are for informational purposes only and 206 | do not modify the License. You may add Your own attribution 207 | notices within Derivative Works that You distribute, alongside 208 | or as an addendum to the NOTICE text from the Work, provided 209 | that such additional attribution notices cannot be construed 210 | as modifying the License. 211 | 212 | You may add Your own copyright statement to Your modifications and 213 | may provide additional or different license terms and conditions 214 | for use, reproduction, or distribution of Your modifications, or 215 | for any such Derivative Works as a whole, provided Your use, 216 | reproduction, and distribution of the Work otherwise complies with 217 | the conditions stated in this License. 218 | 219 | 5. Submission of Contributions. Unless You explicitly state otherwise, 220 | any Contribution intentionally submitted for inclusion in the Work 221 | by You to the Licensor shall be under the terms and conditions of 222 | this License, without any additional terms or conditions. 223 | Notwithstanding the above, nothing herein shall supersede or modify 224 | the terms of any separate license agreement you may have executed 225 | with Licensor regarding such Contributions. 226 | 227 | 6. Trademarks. This License does not grant permission to use the trade 228 | names, trademarks, service marks, or product names of the Licensor, 229 | except as required for reasonable and customary use in describing the 230 | origin of the Work and reproducing the content of the NOTICE file. 231 | 232 | 7. Disclaimer of Warranty. Unless required by applicable law or 233 | agreed to in writing, Licensor provides the Work (and each 234 | Contributor provides its Contributions) on an "AS IS" BASIS, 235 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 236 | implied, including, without limitation, any warranties or conditions 237 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 238 | PARTICULAR PURPOSE. You are solely responsible for determining the 239 | appropriateness of using or redistributing the Work and assume any 240 | risks associated with Your exercise of permissions under this License. 241 | 242 | 8. Limitation of Liability. In no event and under no legal theory, 243 | whether in tort (including negligence), contract, or otherwise, 244 | unless required by applicable law (such as deliberate and grossly 245 | negligent acts) or agreed to in writing, shall any Contributor be 246 | liable to You for damages, including any direct, indirect, special, 247 | incidental, or consequential damages of any character arising as a 248 | result of this License or out of the use or inability to use the 249 | Work (including but not limited to damages for loss of goodwill, 250 | work stoppage, computer failure or malfunction, or any and all 251 | other commercial damages or losses), even if such Contributor 252 | has been advised of the possibility of such damages. 253 | 254 | 9. Accepting Warranty or Additional Liability. While redistributing 255 | the Work or Derivative Works thereof, You may choose to offer, 256 | and charge a fee for, acceptance of support, warranty, indemnity, 257 | or other liability obligations and/or rights consistent with this 258 | License. However, in accepting such obligations, You may act only 259 | on Your own behalf and on Your sole responsibility, not on behalf 260 | of any other Contributor, and only if You agree to indemnify, 261 | defend, and hold each Contributor harmless for any liability 262 | incurred by, or claims asserted against, such Contributor by reason 263 | of your accepting any such warranty or additional liability. 264 | 265 | END OF TERMS AND CONDITIONS 266 | 267 | APPENDIX: How to apply the Apache License to your work. 268 | 269 | To apply the Apache License to your work, attach the following 270 | boilerplate notice, with the fields enclosed by brackets "[]" 271 | replaced with your own identifying information. (Don't include 272 | the brackets!) The text should be enclosed in the appropriate 273 | comment syntax for the file format. We also recommend that a 274 | file or class name and description of purpose be included on the 275 | same "printed page" as the copyright notice for easier 276 | identification within third-party archives. 277 | 278 | Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors 279 | 280 | Licensed under the Apache License, Version 2.0 (the "License"); 281 | you may not use this file except in compliance with the License. 282 | You may obtain a copy of the License at 283 | 284 | http://www.apache.org/licenses/LICENSE-2.0 285 | 286 | Unless required by applicable law or agreed to in writing, software 287 | distributed under the License is distributed on an "AS IS" BASIS, 288 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 289 | See the License for the specific language governing permissions and 290 | limitations under the License. 291 | 292 | 293 | 294 | @angular/core 295 | MIT 296 | 297 | @angular/animations 298 | MIT 299 | 300 | @angular/cdk 301 | MIT 302 | The MIT License 303 | 304 | Copyright (c) 2018 Google LLC. 305 | 306 | Permission is hereby granted, free of charge, to any person obtaining a copy 307 | of this software and associated documentation files (the "Software"), to deal 308 | in the Software without restriction, including without limitation the rights 309 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 310 | copies of the Software, and to permit persons to whom the Software is 311 | furnished to do so, subject to the following conditions: 312 | 313 | The above copyright notice and this permission notice shall be included in 314 | all copies or substantial portions of the Software. 315 | 316 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 317 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 318 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 319 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 320 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 321 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 322 | THE SOFTWARE. 323 | 324 | 325 | @angular/common 326 | MIT 327 | 328 | @angular/platform-browser 329 | MIT 330 | 331 | @angular/router 332 | MIT 333 | 334 | core-js 335 | MIT 336 | Copyright (c) 2014-2017 Denis Pushkarev 337 | 338 | Permission is hereby granted, free of charge, to any person obtaining a copy 339 | of this software and associated documentation files (the "Software"), to deal 340 | in the Software without restriction, including without limitation the rights 341 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 342 | copies of the Software, and to permit persons to whom the Software is 343 | furnished to do so, subject to the following conditions: 344 | 345 | The above copyright notice and this permission notice shall be included in 346 | all copies or substantial portions of the Software. 347 | 348 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 349 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 350 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 351 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 352 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 353 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 354 | THE SOFTWARE. 355 | 356 | 357 | zone.js 358 | MIT 359 | The MIT License 360 | 361 | Copyright (c) 2016 Google, Inc. 362 | 363 | Permission is hereby granted, free of charge, to any person obtaining a copy 364 | of this software and associated documentation files (the "Software"), to deal 365 | in the Software without restriction, including without limitation the rights 366 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 367 | copies of the Software, and to permit persons to whom the Software is 368 | furnished to do so, subject to the following conditions: 369 | 370 | The above copyright notice and this permission notice shall be included in 371 | all copies or substantial portions of the Software. 372 | 373 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 374 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 375 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 376 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 377 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 378 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 379 | THE SOFTWARE. 380 | -------------------------------------------------------------------------------- /projects/ngx-app-tour/src/lib/ng-zorro/style/index.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2 | /* stylelint-disable no-duplicate-selectors */ 3 | /* stylelint-disable */ 4 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 5 | /* stylelint-disable at-rule-no-unknown */ 6 | @font-face { 7 | font-family: "Chinese Quote"; 8 | src: local("PingFang SC"), local("SimSun"); 9 | unicode-range: U+2018, U+2019, U+201c, U+201d; 10 | } 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | input::-ms-clear, 17 | input::-ms-reveal { 18 | display: none; 19 | } 20 | *, 21 | *::before, 22 | *::after { 23 | box-sizing: border-box; 24 | } 25 | html { 26 | font-family: sans-serif; 27 | line-height: 1.15; 28 | -webkit-text-size-adjust: 100%; 29 | -ms-text-size-adjust: 100%; 30 | -ms-overflow-style: scrollbar; 31 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 32 | } 33 | @-ms-viewport { 34 | width: device-width; 35 | } 36 | article, 37 | aside, 38 | dialog, 39 | figcaption, 40 | figure, 41 | footer, 42 | header, 43 | hgroup, 44 | main, 45 | nav, 46 | section { 47 | display: block; 48 | } 49 | body { 50 | margin: 0; 51 | font-family: 'Montserrat', 'Cairo', "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 52 | font-size: 14px; 53 | font-variant: tabular-nums; 54 | line-height: 1.5; 55 | color: rgba(0, 0, 0, 0.65); 56 | background-color: #fff; 57 | } 58 | [tabindex="-1"]:focus { 59 | outline: none !important; 60 | } 61 | hr { 62 | box-sizing: content-box; 63 | height: 0; 64 | overflow: visible; 65 | } 66 | h1, 67 | h2, 68 | h3, 69 | h4, 70 | h5, 71 | h6 { 72 | margin-top: 0; 73 | margin-bottom: 0.5em; 74 | color: rgba(0, 0, 0, 0.85); 75 | font-weight: 500; 76 | } 77 | p { 78 | margin-top: 0; 79 | margin-bottom: 1em; 80 | } 81 | abbr[title], 82 | abbr[data-original-title] { 83 | text-decoration: underline; 84 | text-decoration: underline dotted; 85 | cursor: help; 86 | border-bottom: 0; 87 | } 88 | address { 89 | margin-bottom: 1em; 90 | font-style: normal; 91 | line-height: inherit; 92 | } 93 | input[type="text"], 94 | input[type="password"], 95 | input[type="number"], 96 | textarea { 97 | -webkit-appearance: none; 98 | } 99 | ol, 100 | ul, 101 | dl { 102 | margin-top: 0; 103 | margin-bottom: 1em; 104 | } 105 | ol ol, 106 | ul ul, 107 | ol ul, 108 | ul ol { 109 | margin-bottom: 0; 110 | } 111 | dt { 112 | font-weight: 500; 113 | } 114 | dd { 115 | margin-bottom: 0.5em; 116 | margin-left: 0; 117 | } 118 | blockquote { 119 | margin: 0 0 1em; 120 | } 121 | dfn { 122 | font-style: italic; 123 | } 124 | b, 125 | strong { 126 | font-weight: bolder; 127 | } 128 | small { 129 | font-size: 80%; 130 | } 131 | sub, 132 | sup { 133 | position: relative; 134 | font-size: 75%; 135 | line-height: 0; 136 | vertical-align: baseline; 137 | } 138 | sub { 139 | bottom: -0.25em; 140 | } 141 | sup { 142 | top: -0.5em; 143 | } 144 | a { 145 | color: #1890ff; 146 | background-color: transparent; 147 | text-decoration: none; 148 | outline: none; 149 | cursor: pointer; 150 | transition: color 0.3s; 151 | -webkit-text-decoration-skip: objects; 152 | } 153 | a:focus { 154 | text-decoration: underline; 155 | text-decoration-skip: ink; 156 | } 157 | a:hover { 158 | color: #40a9ff; 159 | } 160 | a:active { 161 | color: #096dd9; 162 | } 163 | a:active, 164 | a:hover { 165 | outline: 0; 166 | text-decoration: none; 167 | } 168 | a[disabled] { 169 | color: rgba(0, 0, 0, 0.25); 170 | cursor: not-allowed; 171 | pointer-events: none; 172 | } 173 | pre, 174 | code, 175 | kbd, 176 | samp { 177 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; 178 | font-size: 1em; 179 | } 180 | pre { 181 | margin-top: 0; 182 | margin-bottom: 1em; 183 | overflow: auto; 184 | } 185 | figure { 186 | margin: 0 0 1em; 187 | } 188 | img { 189 | vertical-align: middle; 190 | border-style: none; 191 | } 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | a, 196 | area, 197 | button, 198 | [role="button"], 199 | input:not([type=range]), 200 | label, 201 | select, 202 | summary, 203 | textarea { 204 | touch-action: manipulation; 205 | } 206 | table { 207 | border-collapse: collapse; 208 | } 209 | caption { 210 | padding-top: 0.75em; 211 | padding-bottom: 0.3em; 212 | color: rgba(0, 0, 0, 0.45); 213 | text-align: left; 214 | caption-side: bottom; 215 | } 216 | th { 217 | text-align: inherit; 218 | } 219 | input, 220 | button, 221 | select, 222 | optgroup, 223 | textarea { 224 | margin: 0; 225 | font-family: inherit; 226 | font-size: inherit; 227 | line-height: inherit; 228 | color: inherit; 229 | } 230 | button, 231 | input { 232 | overflow: visible; 233 | } 234 | button, 235 | select { 236 | text-transform: none; 237 | } 238 | button, 239 | html [type="button"], 240 | [type="reset"], 241 | [type="submit"] { 242 | -webkit-appearance: button; 243 | } 244 | button::-moz-focus-inner, 245 | [type="button"]::-moz-focus-inner, 246 | [type="reset"]::-moz-focus-inner, 247 | [type="submit"]::-moz-focus-inner { 248 | padding: 0; 249 | border-style: none; 250 | } 251 | input[type="radio"], 252 | input[type="checkbox"] { 253 | box-sizing: border-box; 254 | padding: 0; 255 | } 256 | input[type="date"], 257 | input[type="time"], 258 | input[type="datetime-local"], 259 | input[type="month"] { 260 | -webkit-appearance: listbox; 261 | } 262 | textarea { 263 | overflow: auto; 264 | resize: vertical; 265 | } 266 | fieldset { 267 | min-width: 0; 268 | padding: 0; 269 | margin: 0; 270 | border: 0; 271 | } 272 | legend { 273 | display: block; 274 | width: 100%; 275 | max-width: 100%; 276 | padding: 0; 277 | margin-bottom: 0.5em; 278 | font-size: 1.5em; 279 | line-height: inherit; 280 | color: inherit; 281 | white-space: normal; 282 | } 283 | progress { 284 | vertical-align: baseline; 285 | } 286 | [type="number"]::-webkit-inner-spin-button, 287 | [type="number"]::-webkit-outer-spin-button { 288 | height: auto; 289 | } 290 | [type="search"] { 291 | outline-offset: -2px; 292 | -webkit-appearance: none; 293 | } 294 | [type="search"]::-webkit-search-cancel-button, 295 | [type="search"]::-webkit-search-decoration { 296 | -webkit-appearance: none; 297 | } 298 | ::-webkit-file-upload-button { 299 | font: inherit; 300 | -webkit-appearance: button; 301 | } 302 | output { 303 | display: inline-block; 304 | } 305 | summary { 306 | display: list-item; 307 | } 308 | template { 309 | display: none; 310 | } 311 | [hidden] { 312 | display: none !important; 313 | } 314 | mark { 315 | padding: 0.2em; 316 | background-color: #feffe6; 317 | } 318 | ::selection { 319 | background: #1890ff; 320 | color: #fff; 321 | } 322 | .clearfix { 323 | zoom: 1; 324 | } 325 | .clearfix:before, 326 | .clearfix:after { 327 | content: ""; 328 | display: table; 329 | } 330 | .clearfix:after { 331 | clear: both; 332 | } 333 | .anticon { 334 | display: inline-block; 335 | font-style: normal; 336 | vertical-align: -0.125em; 337 | text-align: center; 338 | text-transform: none; 339 | line-height: 0; 340 | text-rendering: optimizeLegibility; 341 | -webkit-font-smoothing: antialiased; 342 | -moz-osx-font-smoothing: grayscale; 343 | } 344 | .anticon > * { 345 | line-height: 1; 346 | } 347 | .anticon svg { 348 | display: inline-block; 349 | } 350 | .anticon:before { 351 | display: none; 352 | } 353 | .anticon .anticon-icon { 354 | display: block; 355 | } 356 | .anticon-spin:before { 357 | display: inline-block; 358 | animation: loadingCircle 1s infinite linear; 359 | } 360 | .anticon-spin { 361 | display: inline-block; 362 | animation: loadingCircle 1s infinite linear; 363 | } 364 | .fade-enter, 365 | .fade-appear { 366 | animation-duration: 0.2s; 367 | animation-fill-mode: both; 368 | animation-play-state: paused; 369 | } 370 | .fade-leave { 371 | animation-duration: 0.2s; 372 | animation-fill-mode: both; 373 | animation-play-state: paused; 374 | } 375 | .fade-enter.fade-enter-active, 376 | .fade-appear.fade-appear-active { 377 | animation-name: antFadeIn; 378 | animation-play-state: running; 379 | } 380 | .fade-leave.fade-leave-active { 381 | animation-name: antFadeOut; 382 | animation-play-state: running; 383 | pointer-events: none; 384 | } 385 | .fade-enter, 386 | .fade-appear { 387 | opacity: 0; 388 | animation-timing-function: linear; 389 | } 390 | .fade-leave { 391 | animation-timing-function: linear; 392 | } 393 | @keyframes antFadeIn { 394 | 0% { 395 | opacity: 0; 396 | } 397 | 100% { 398 | opacity: 1; 399 | } 400 | } 401 | @keyframes antFadeOut { 402 | 0% { 403 | opacity: 1; 404 | } 405 | 100% { 406 | opacity: 0; 407 | } 408 | } 409 | .move-up-enter, 410 | .move-up-appear { 411 | animation-duration: 0.2s; 412 | animation-fill-mode: both; 413 | animation-play-state: paused; 414 | } 415 | .move-up-leave { 416 | animation-duration: 0.2s; 417 | animation-fill-mode: both; 418 | animation-play-state: paused; 419 | } 420 | .move-up-enter.move-up-enter-active, 421 | .move-up-appear.move-up-appear-active { 422 | animation-name: antMoveUpIn; 423 | animation-play-state: running; 424 | } 425 | .move-up-leave.move-up-leave-active { 426 | animation-name: antMoveUpOut; 427 | animation-play-state: running; 428 | pointer-events: none; 429 | } 430 | .move-up-enter, 431 | .move-up-appear { 432 | opacity: 0; 433 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 434 | } 435 | .move-up-leave { 436 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 437 | } 438 | .move-down-enter, 439 | .move-down-appear { 440 | animation-duration: 0.2s; 441 | animation-fill-mode: both; 442 | animation-play-state: paused; 443 | } 444 | .move-down-leave { 445 | animation-duration: 0.2s; 446 | animation-fill-mode: both; 447 | animation-play-state: paused; 448 | } 449 | .move-down-enter.move-down-enter-active, 450 | .move-down-appear.move-down-appear-active { 451 | animation-name: antMoveDownIn; 452 | animation-play-state: running; 453 | } 454 | .move-down-leave.move-down-leave-active { 455 | animation-name: antMoveDownOut; 456 | animation-play-state: running; 457 | pointer-events: none; 458 | } 459 | .move-down-enter, 460 | .move-down-appear { 461 | opacity: 0; 462 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 463 | } 464 | .move-down-leave { 465 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 466 | } 467 | .move-left-enter, 468 | .move-left-appear { 469 | animation-duration: 0.2s; 470 | animation-fill-mode: both; 471 | animation-play-state: paused; 472 | } 473 | .move-left-leave { 474 | animation-duration: 0.2s; 475 | animation-fill-mode: both; 476 | animation-play-state: paused; 477 | } 478 | .move-left-enter.move-left-enter-active, 479 | .move-left-appear.move-left-appear-active { 480 | animation-name: antMoveLeftIn; 481 | animation-play-state: running; 482 | } 483 | .move-left-leave.move-left-leave-active { 484 | animation-name: antMoveLeftOut; 485 | animation-play-state: running; 486 | pointer-events: none; 487 | } 488 | .move-left-enter, 489 | .move-left-appear { 490 | opacity: 0; 491 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 492 | } 493 | .move-left-leave { 494 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 495 | } 496 | .move-right-enter, 497 | .move-right-appear { 498 | animation-duration: 0.2s; 499 | animation-fill-mode: both; 500 | animation-play-state: paused; 501 | } 502 | .move-right-leave { 503 | animation-duration: 0.2s; 504 | animation-fill-mode: both; 505 | animation-play-state: paused; 506 | } 507 | .move-right-enter.move-right-enter-active, 508 | .move-right-appear.move-right-appear-active { 509 | animation-name: antMoveRightIn; 510 | animation-play-state: running; 511 | } 512 | .move-right-leave.move-right-leave-active { 513 | animation-name: antMoveRightOut; 514 | animation-play-state: running; 515 | pointer-events: none; 516 | } 517 | .move-right-enter, 518 | .move-right-appear { 519 | opacity: 0; 520 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 521 | } 522 | .move-right-leave { 523 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 524 | } 525 | @keyframes antMoveDownIn { 526 | 0% { 527 | transform-origin: 0 0; 528 | transform: translateY(100%); 529 | opacity: 0; 530 | } 531 | 100% { 532 | transform-origin: 0 0; 533 | transform: translateY(0%); 534 | opacity: 1; 535 | } 536 | } 537 | @keyframes antMoveDownOut { 538 | 0% { 539 | transform-origin: 0 0; 540 | transform: translateY(0%); 541 | opacity: 1; 542 | } 543 | 100% { 544 | transform-origin: 0 0; 545 | transform: translateY(100%); 546 | opacity: 0; 547 | } 548 | } 549 | @keyframes antMoveLeftIn { 550 | 0% { 551 | transform-origin: 0 0; 552 | transform: translateX(-100%); 553 | opacity: 0; 554 | } 555 | 100% { 556 | transform-origin: 0 0; 557 | transform: translateX(0%); 558 | opacity: 1; 559 | } 560 | } 561 | @keyframes antMoveLeftOut { 562 | 0% { 563 | transform-origin: 0 0; 564 | transform: translateX(0%); 565 | opacity: 1; 566 | } 567 | 100% { 568 | transform-origin: 0 0; 569 | transform: translateX(-100%); 570 | opacity: 0; 571 | } 572 | } 573 | @keyframes antMoveRightIn { 574 | 0% { 575 | opacity: 0; 576 | transform-origin: 0 0; 577 | transform: translateX(100%); 578 | } 579 | 100% { 580 | opacity: 1; 581 | transform-origin: 0 0; 582 | transform: translateX(0%); 583 | } 584 | } 585 | @keyframes antMoveRightOut { 586 | 0% { 587 | transform-origin: 0 0; 588 | transform: translateX(0%); 589 | opacity: 1; 590 | } 591 | 100% { 592 | transform-origin: 0 0; 593 | transform: translateX(100%); 594 | opacity: 0; 595 | } 596 | } 597 | @keyframes antMoveUpIn { 598 | 0% { 599 | transform-origin: 0 0; 600 | transform: translateY(-100%); 601 | opacity: 0; 602 | } 603 | 100% { 604 | transform-origin: 0 0; 605 | transform: translateY(0%); 606 | opacity: 1; 607 | } 608 | } 609 | @keyframes antMoveUpOut { 610 | 0% { 611 | transform-origin: 0 0; 612 | transform: translateY(0%); 613 | opacity: 1; 614 | } 615 | 100% { 616 | transform-origin: 0 0; 617 | transform: translateY(-100%); 618 | opacity: 0; 619 | } 620 | } 621 | @keyframes loadingCircle { 622 | 100% { 623 | transform: rotate(360deg); 624 | } 625 | } 626 | [ant-click-animating], 627 | [ant-click-animating-without-extra-node] { 628 | position: relative; 629 | } 630 | [ant-click-animating-without-extra-node]:after, 631 | .ant-click-animating-node { 632 | content: ''; 633 | position: absolute; 634 | top: -1px; 635 | left: -1px; 636 | bottom: -1px; 637 | right: -1px; 638 | border-radius: inherit; 639 | border: 0 solid #1890ff; 640 | opacity: 0.2; 641 | animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1); 642 | animation-fill-mode: forwards; 643 | display: block; 644 | pointer-events: none; 645 | } 646 | @keyframes waveEffect { 647 | 100% { 648 | top: -6px; 649 | left: -6px; 650 | bottom: -6px; 651 | right: -6px; 652 | border-width: 6px; 653 | } 654 | } 655 | @keyframes fadeEffect { 656 | 100% { 657 | opacity: 0; 658 | } 659 | } 660 | .slide-up-enter, 661 | .slide-up-appear { 662 | animation-duration: 0.2s; 663 | animation-fill-mode: both; 664 | animation-play-state: paused; 665 | } 666 | .slide-up-leave { 667 | animation-duration: 0.2s; 668 | animation-fill-mode: both; 669 | animation-play-state: paused; 670 | } 671 | .slide-up-enter.slide-up-enter-active, 672 | .slide-up-appear.slide-up-appear-active { 673 | animation-name: antSlideUpIn; 674 | animation-play-state: running; 675 | } 676 | .slide-up-leave.slide-up-leave-active { 677 | animation-name: antSlideUpOut; 678 | animation-play-state: running; 679 | pointer-events: none; 680 | } 681 | .slide-up-enter, 682 | .slide-up-appear { 683 | opacity: 0; 684 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 685 | } 686 | .slide-up-leave { 687 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 688 | } 689 | .slide-down-enter, 690 | .slide-down-appear { 691 | animation-duration: 0.2s; 692 | animation-fill-mode: both; 693 | animation-play-state: paused; 694 | } 695 | .slide-down-leave { 696 | animation-duration: 0.2s; 697 | animation-fill-mode: both; 698 | animation-play-state: paused; 699 | } 700 | .slide-down-enter.slide-down-enter-active, 701 | .slide-down-appear.slide-down-appear-active { 702 | animation-name: antSlideDownIn; 703 | animation-play-state: running; 704 | } 705 | .slide-down-leave.slide-down-leave-active { 706 | animation-name: antSlideDownOut; 707 | animation-play-state: running; 708 | pointer-events: none; 709 | } 710 | .slide-down-enter, 711 | .slide-down-appear { 712 | opacity: 0; 713 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 714 | } 715 | .slide-down-leave { 716 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 717 | } 718 | .slide-left-enter, 719 | .slide-left-appear { 720 | animation-duration: 0.2s; 721 | animation-fill-mode: both; 722 | animation-play-state: paused; 723 | } 724 | .slide-left-leave { 725 | animation-duration: 0.2s; 726 | animation-fill-mode: both; 727 | animation-play-state: paused; 728 | } 729 | .slide-left-enter.slide-left-enter-active, 730 | .slide-left-appear.slide-left-appear-active { 731 | animation-name: antSlideLeftIn; 732 | animation-play-state: running; 733 | } 734 | .slide-left-leave.slide-left-leave-active { 735 | animation-name: antSlideLeftOut; 736 | animation-play-state: running; 737 | pointer-events: none; 738 | } 739 | .slide-left-enter, 740 | .slide-left-appear { 741 | opacity: 0; 742 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 743 | } 744 | .slide-left-leave { 745 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 746 | } 747 | .slide-right-enter, 748 | .slide-right-appear { 749 | animation-duration: 0.2s; 750 | animation-fill-mode: both; 751 | animation-play-state: paused; 752 | } 753 | .slide-right-leave { 754 | animation-duration: 0.2s; 755 | animation-fill-mode: both; 756 | animation-play-state: paused; 757 | } 758 | .slide-right-enter.slide-right-enter-active, 759 | .slide-right-appear.slide-right-appear-active { 760 | animation-name: antSlideRightIn; 761 | animation-play-state: running; 762 | } 763 | .slide-right-leave.slide-right-leave-active { 764 | animation-name: antSlideRightOut; 765 | animation-play-state: running; 766 | pointer-events: none; 767 | } 768 | .slide-right-enter, 769 | .slide-right-appear { 770 | opacity: 0; 771 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 772 | } 773 | .slide-right-leave { 774 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 775 | } 776 | @keyframes antSlideUpIn { 777 | 0% { 778 | opacity: 0; 779 | transform-origin: 0% 0%; 780 | transform: scaleY(0.8); 781 | } 782 | 100% { 783 | opacity: 1; 784 | transform-origin: 0% 0%; 785 | transform: scaleY(1); 786 | } 787 | } 788 | @keyframes antSlideUpOut { 789 | 0% { 790 | opacity: 1; 791 | transform-origin: 0% 0%; 792 | transform: scaleY(1); 793 | } 794 | 100% { 795 | opacity: 0; 796 | transform-origin: 0% 0%; 797 | transform: scaleY(0.8); 798 | } 799 | } 800 | @keyframes antSlideDownIn { 801 | 0% { 802 | opacity: 0; 803 | transform-origin: 100% 100%; 804 | transform: scaleY(0.8); 805 | } 806 | 100% { 807 | opacity: 1; 808 | transform-origin: 100% 100%; 809 | transform: scaleY(1); 810 | } 811 | } 812 | @keyframes antSlideDownOut { 813 | 0% { 814 | opacity: 1; 815 | transform-origin: 100% 100%; 816 | transform: scaleY(1); 817 | } 818 | 100% { 819 | opacity: 0; 820 | transform-origin: 100% 100%; 821 | transform: scaleY(0.8); 822 | } 823 | } 824 | @keyframes antSlideLeftIn { 825 | 0% { 826 | opacity: 0; 827 | transform-origin: 0% 0%; 828 | transform: scaleX(0.8); 829 | } 830 | 100% { 831 | opacity: 1; 832 | transform-origin: 0% 0%; 833 | transform: scaleX(1); 834 | } 835 | } 836 | @keyframes antSlideLeftOut { 837 | 0% { 838 | opacity: 1; 839 | transform-origin: 0% 0%; 840 | transform: scaleX(1); 841 | } 842 | 100% { 843 | opacity: 0; 844 | transform-origin: 0% 0%; 845 | transform: scaleX(0.8); 846 | } 847 | } 848 | @keyframes antSlideRightIn { 849 | 0% { 850 | opacity: 0; 851 | transform-origin: 100% 0%; 852 | transform: scaleX(0.8); 853 | } 854 | 100% { 855 | opacity: 1; 856 | transform-origin: 100% 0%; 857 | transform: scaleX(1); 858 | } 859 | } 860 | @keyframes antSlideRightOut { 861 | 0% { 862 | opacity: 1; 863 | transform-origin: 100% 0%; 864 | transform: scaleX(1); 865 | } 866 | 100% { 867 | opacity: 0; 868 | transform-origin: 100% 0%; 869 | transform: scaleX(0.8); 870 | } 871 | } 872 | .swing-enter, 873 | .swing-appear { 874 | animation-duration: 0.2s; 875 | animation-fill-mode: both; 876 | animation-play-state: paused; 877 | } 878 | .swing-enter.swing-enter-active, 879 | .swing-appear.swing-appear-active { 880 | animation-name: antSwingIn; 881 | animation-play-state: running; 882 | } 883 | @keyframes antSwingIn { 884 | 0%, 885 | 100% { 886 | transform: translateX(0); 887 | } 888 | 20% { 889 | transform: translateX(-10px); 890 | } 891 | 40% { 892 | transform: translateX(10px); 893 | } 894 | 60% { 895 | transform: translateX(-5px); 896 | } 897 | 80% { 898 | transform: translateX(5px); 899 | } 900 | } 901 | .zoom-enter, 902 | .zoom-appear { 903 | animation-duration: 0.2s; 904 | animation-fill-mode: both; 905 | animation-play-state: paused; 906 | } 907 | .zoom-leave { 908 | animation-duration: 0.2s; 909 | animation-fill-mode: both; 910 | animation-play-state: paused; 911 | } 912 | .zoom-enter.zoom-enter-active, 913 | .zoom-appear.zoom-appear-active { 914 | animation-name: antZoomIn; 915 | animation-play-state: running; 916 | } 917 | .zoom-leave.zoom-leave-active { 918 | animation-name: antZoomOut; 919 | animation-play-state: running; 920 | pointer-events: none; 921 | } 922 | .zoom-enter, 923 | .zoom-appear { 924 | transform: scale(0); 925 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 926 | } 927 | .zoom-leave { 928 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 929 | } 930 | .zoom-big-enter, 931 | .zoom-big-appear { 932 | animation-duration: 0.2s; 933 | animation-fill-mode: both; 934 | animation-play-state: paused; 935 | } 936 | .zoom-big-leave { 937 | animation-duration: 0.2s; 938 | animation-fill-mode: both; 939 | animation-play-state: paused; 940 | } 941 | .zoom-big-enter.zoom-big-enter-active, 942 | .zoom-big-appear.zoom-big-appear-active { 943 | animation-name: antZoomBigIn; 944 | animation-play-state: running; 945 | } 946 | .zoom-big-leave.zoom-big-leave-active { 947 | animation-name: antZoomBigOut; 948 | animation-play-state: running; 949 | pointer-events: none; 950 | } 951 | .zoom-big-enter, 952 | .zoom-big-appear { 953 | transform: scale(0); 954 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 955 | } 956 | .zoom-big-leave { 957 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 958 | } 959 | .zoom-big-fast-enter, 960 | .zoom-big-fast-appear { 961 | animation-duration: 0.1s; 962 | animation-fill-mode: both; 963 | animation-play-state: paused; 964 | } 965 | .zoom-big-fast-leave { 966 | animation-duration: 0.1s; 967 | animation-fill-mode: both; 968 | animation-play-state: paused; 969 | } 970 | .zoom-big-fast-enter.zoom-big-fast-enter-active, 971 | .zoom-big-fast-appear.zoom-big-fast-appear-active { 972 | animation-name: antZoomBigIn; 973 | animation-play-state: running; 974 | } 975 | .zoom-big-fast-leave.zoom-big-fast-leave-active { 976 | animation-name: antZoomBigOut; 977 | animation-play-state: running; 978 | pointer-events: none; 979 | } 980 | .zoom-big-fast-enter, 981 | .zoom-big-fast-appear { 982 | transform: scale(0); 983 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 984 | } 985 | .zoom-big-fast-leave { 986 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 987 | } 988 | .zoom-up-enter, 989 | .zoom-up-appear { 990 | animation-duration: 0.2s; 991 | animation-fill-mode: both; 992 | animation-play-state: paused; 993 | } 994 | .zoom-up-leave { 995 | animation-duration: 0.2s; 996 | animation-fill-mode: both; 997 | animation-play-state: paused; 998 | } 999 | .zoom-up-enter.zoom-up-enter-active, 1000 | .zoom-up-appear.zoom-up-appear-active { 1001 | animation-name: antZoomUpIn; 1002 | animation-play-state: running; 1003 | } 1004 | .zoom-up-leave.zoom-up-leave-active { 1005 | animation-name: antZoomUpOut; 1006 | animation-play-state: running; 1007 | pointer-events: none; 1008 | } 1009 | .zoom-up-enter, 1010 | .zoom-up-appear { 1011 | transform: scale(0); 1012 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1013 | } 1014 | .zoom-up-leave { 1015 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1016 | } 1017 | .zoom-down-enter, 1018 | .zoom-down-appear { 1019 | animation-duration: 0.2s; 1020 | animation-fill-mode: both; 1021 | animation-play-state: paused; 1022 | } 1023 | .zoom-down-leave { 1024 | animation-duration: 0.2s; 1025 | animation-fill-mode: both; 1026 | animation-play-state: paused; 1027 | } 1028 | .zoom-down-enter.zoom-down-enter-active, 1029 | .zoom-down-appear.zoom-down-appear-active { 1030 | animation-name: antZoomDownIn; 1031 | animation-play-state: running; 1032 | } 1033 | .zoom-down-leave.zoom-down-leave-active { 1034 | animation-name: antZoomDownOut; 1035 | animation-play-state: running; 1036 | pointer-events: none; 1037 | } 1038 | .zoom-down-enter, 1039 | .zoom-down-appear { 1040 | transform: scale(0); 1041 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1042 | } 1043 | .zoom-down-leave { 1044 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1045 | } 1046 | .zoom-left-enter, 1047 | .zoom-left-appear { 1048 | animation-duration: 0.2s; 1049 | animation-fill-mode: both; 1050 | animation-play-state: paused; 1051 | } 1052 | .zoom-left-leave { 1053 | animation-duration: 0.2s; 1054 | animation-fill-mode: both; 1055 | animation-play-state: paused; 1056 | } 1057 | .zoom-left-enter.zoom-left-enter-active, 1058 | .zoom-left-appear.zoom-left-appear-active { 1059 | animation-name: antZoomLeftIn; 1060 | animation-play-state: running; 1061 | } 1062 | .zoom-left-leave.zoom-left-leave-active { 1063 | animation-name: antZoomLeftOut; 1064 | animation-play-state: running; 1065 | pointer-events: none; 1066 | } 1067 | .zoom-left-enter, 1068 | .zoom-left-appear { 1069 | transform: scale(0); 1070 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1071 | } 1072 | .zoom-left-leave { 1073 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1074 | } 1075 | .zoom-right-enter, 1076 | .zoom-right-appear { 1077 | animation-duration: 0.2s; 1078 | animation-fill-mode: both; 1079 | animation-play-state: paused; 1080 | } 1081 | .zoom-right-leave { 1082 | animation-duration: 0.2s; 1083 | animation-fill-mode: both; 1084 | animation-play-state: paused; 1085 | } 1086 | .zoom-right-enter.zoom-right-enter-active, 1087 | .zoom-right-appear.zoom-right-appear-active { 1088 | animation-name: antZoomRightIn; 1089 | animation-play-state: running; 1090 | } 1091 | .zoom-right-leave.zoom-right-leave-active { 1092 | animation-name: antZoomRightOut; 1093 | animation-play-state: running; 1094 | pointer-events: none; 1095 | } 1096 | .zoom-right-enter, 1097 | .zoom-right-appear { 1098 | transform: scale(0); 1099 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1100 | } 1101 | .zoom-right-leave { 1102 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1103 | } 1104 | @keyframes antZoomIn { 1105 | 0% { 1106 | opacity: 0; 1107 | transform: scale(0.2); 1108 | } 1109 | 100% { 1110 | opacity: 1; 1111 | transform: scale(1); 1112 | } 1113 | } 1114 | @keyframes antZoomOut { 1115 | 0% { 1116 | transform: scale(1); 1117 | } 1118 | 100% { 1119 | opacity: 0; 1120 | transform: scale(0.2); 1121 | } 1122 | } 1123 | @keyframes antZoomBigIn { 1124 | 0% { 1125 | opacity: 0; 1126 | transform: scale(0.8); 1127 | } 1128 | 100% { 1129 | transform: scale(1); 1130 | } 1131 | } 1132 | @keyframes antZoomBigOut { 1133 | 0% { 1134 | transform: scale(1); 1135 | } 1136 | 100% { 1137 | opacity: 0; 1138 | transform: scale(0.8); 1139 | } 1140 | } 1141 | @keyframes antZoomUpIn { 1142 | 0% { 1143 | opacity: 0; 1144 | transform-origin: 50% 0%; 1145 | transform: scale(0.8); 1146 | } 1147 | 100% { 1148 | transform-origin: 50% 0%; 1149 | transform: scale(1); 1150 | } 1151 | } 1152 | @keyframes antZoomUpOut { 1153 | 0% { 1154 | transform-origin: 50% 0%; 1155 | transform: scale(1); 1156 | } 1157 | 100% { 1158 | opacity: 0; 1159 | transform-origin: 50% 0%; 1160 | transform: scale(0.8); 1161 | } 1162 | } 1163 | @keyframes antZoomLeftIn { 1164 | 0% { 1165 | opacity: 0; 1166 | transform-origin: 0% 50%; 1167 | transform: scale(0.8); 1168 | } 1169 | 100% { 1170 | transform-origin: 0% 50%; 1171 | transform: scale(1); 1172 | } 1173 | } 1174 | @keyframes antZoomLeftOut { 1175 | 0% { 1176 | transform-origin: 0% 50%; 1177 | transform: scale(1); 1178 | } 1179 | 100% { 1180 | opacity: 0; 1181 | transform-origin: 0% 50%; 1182 | transform: scale(0.8); 1183 | } 1184 | } 1185 | @keyframes antZoomRightIn { 1186 | 0% { 1187 | opacity: 0; 1188 | transform-origin: 100% 50%; 1189 | transform: scale(0.8); 1190 | } 1191 | 100% { 1192 | transform-origin: 100% 50%; 1193 | transform: scale(1); 1194 | } 1195 | } 1196 | @keyframes antZoomRightOut { 1197 | 0% { 1198 | transform-origin: 100% 50%; 1199 | transform: scale(1); 1200 | } 1201 | 100% { 1202 | opacity: 0; 1203 | transform-origin: 100% 50%; 1204 | transform: scale(0.8); 1205 | } 1206 | } 1207 | @keyframes antZoomDownIn { 1208 | 0% { 1209 | opacity: 0; 1210 | transform-origin: 50% 100%; 1211 | transform: scale(0.8); 1212 | } 1213 | 100% { 1214 | transform-origin: 50% 100%; 1215 | transform: scale(1); 1216 | } 1217 | } 1218 | @keyframes antZoomDownOut { 1219 | 0% { 1220 | transform-origin: 50% 100%; 1221 | transform: scale(1); 1222 | } 1223 | 100% { 1224 | opacity: 0; 1225 | transform-origin: 50% 100%; 1226 | transform: scale(0.8); 1227 | } 1228 | } 1229 | .ant-motion-collapse { 1230 | overflow: hidden; 1231 | } 1232 | .ant-motion-collapse-active { 1233 | transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important; 1234 | } 1235 | /*# sourceMappingURL=index.css.map */ --------------------------------------------------------------------------------