├── src ├── assets │ └── .gitkeep ├── app │ ├── app.component.css │ ├── app.component.ts │ ├── app.module.ts │ ├── app.component.html │ └── app.component.spec.ts ├── styles.css ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── tsconfig.app.json ├── index.html ├── tsconfig.spec.json ├── tslint.json ├── browserslist ├── main.ts ├── test.ts ├── karma.conf.js └── polyfills.ts ├── .coveralls.yml ├── projects └── angular2-cookie-law │ ├── ng-package.prod.json │ ├── ng-package.json │ ├── tsconfig.spec.json │ ├── tslint.json │ ├── src │ ├── lib │ │ ├── definitions.ts │ │ ├── angular2-cookie-law.component.html │ │ ├── angular2-cookie-law.module.ts │ │ ├── animations.ts │ │ ├── icons.ts │ │ ├── angular2-cookie-law.service.ts │ │ ├── angular2-cookie-law.component.css │ │ ├── angular2-cookie-law.service.spec.ts │ │ ├── angular2-cookie-law-container.component.ts │ │ ├── angular2-cookie-law.component.ts │ │ └── angular2-cookie-law-container.component.spec.ts │ ├── public_api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── package.json │ ├── karma.conf.js │ └── README.md ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.e2e.json └── protractor.conf.js ├── .editorconfig ├── .travis.yml ├── tsconfig.json ├── .gitignore ├── LICENSE ├── package.json ├── tslint.json ├── angular.json └── README.md /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.coveralls.yml: -------------------------------------------------------------------------------- 1 | repo_token: v7i9gEah1makwVu53cEJboRxJFO0sBxuz 2 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasonny83/angular2-cookie-law/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /projects/angular2-cookie-law/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/angular2-cookie-law", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/angular2-cookie-law/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/angular2-cookie-law", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /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/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/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 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular2CookieLaw 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Angular2CookieLaw'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "cookieLaw", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "cookie-law", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/definitions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | export declare type CookieLawPosition = 'top' | 'bottom'; 10 | export declare type CookieLawAnimation = 11 | | 'topIn' 12 | | 'bottomIn' 13 | | 'topOut' 14 | | 'bottomOut'; 15 | export declare type CookieLawTarget = '_blank' | '_self'; 16 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * angular2-cookie-law 3 | * Public API Surface of angular2-cookie-law 4 | * 5 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 6 | * 7 | * @author: @andreasonny83 8 | */ 9 | 10 | export * from './lib/angular2-cookie-law.service'; 11 | export * from './lib/angular2-cookie-law-container.component'; 12 | export * from './lib/angular2-cookie-law.component'; 13 | export * from './lib/angular2-cookie-law.module'; 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | notifications: 4 | email: false 5 | 6 | node_js: 7 | - '8' 8 | 9 | addons: 10 | chrome: stable 11 | 12 | before_install: 13 | # start your web application and listen on `localhost` 14 | - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost & 15 | 16 | script: 17 | - npm run lint 18 | - npm run test:headless 19 | 20 | after_success: 21 | # - npm run coveralls 22 | - npm run build:prod 23 | - npm run semantic-release 24 | 25 | branches: 26 | except: 27 | - /^v\d+\.\d+\.\d+$/ 28 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { CookieLawModule } from 'angular2-cookie-law'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | BrowserAnimationsModule, 14 | CookieLawModule, 15 | ], 16 | providers: [], 17 | bootstrap: [AppComponent] 18 | }) 19 | export class AppModule { } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2017", 17 | "dom" 18 | ], 19 | "paths": { 20 | "angular2-cookie-law": [ 21 | "projects/angular2-cookie-law/src/lib/angular2-cookie-law.module.ts" 22 | ] 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /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/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/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 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law.component.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 9 | 10 | 11 | By continuing to browse the site, you're agreeing to our use of cookies. 12 | 13 | Learn more in our 14 | privacy policy. 17 | 18 | 19 | 20 | 28 |
29 |
30 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/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 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Angular2CookieLaw 4 |

5 | Angular Logo 6 |
7 | 8 | 9 | Allo! This is my awesome cookie-law message that expires tomorrow. 10 | 11 | Click here for more info 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | import { 10 | NgModule, 11 | Optional, 12 | SkipSelf, 13 | ModuleWithProviders 14 | } from '@angular/core'; 15 | import { CommonModule } from '@angular/common'; 16 | 17 | import { CookieLawComponent } from './angular2-cookie-law.component'; 18 | import { CookieLawContainerComponent } from './angular2-cookie-law-container.component'; 19 | 20 | @NgModule({ 21 | imports: [CommonModule], 22 | declarations: [CookieLawComponent, CookieLawContainerComponent], 23 | exports: [CookieLawContainerComponent] 24 | }) 25 | export class CookieLawModule { 26 | constructor(@Optional() @SkipSelf() parentModule: CookieLawModule) { 27 | if (parentModule) { 28 | throw new Error( 29 | 'CookieLawModule is already loaded. Import it in the AppModule only' 30 | ); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/animations.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | import { 10 | trigger, 11 | state, 12 | style, 13 | animate, 14 | transition, 15 | AnimationTriggerMetadata 16 | } from '@angular/animations'; 17 | 18 | export const translateInOut: AnimationTriggerMetadata = trigger('transition', [ 19 | state('*', style({ transform: 'translateY(0)' })), 20 | state('void', style({ transform: 'translateY(0)' })), 21 | 22 | state('bottomOut', style({ transform: 'translateY(100%)' })), 23 | state('topOut', style({ transform: 'translateY(-100%)' })), 24 | 25 | transition('void => topIn', [ 26 | style({ transform: 'translateY(-100%)' }), 27 | animate('1000ms ease-in-out') 28 | ]), 29 | 30 | transition('void => bottomIn', [ 31 | style({ transform: 'translateY(100%)' }), 32 | animate('1000ms ease-in-out') 33 | ]), 34 | 35 | transition('* => *', animate('1000ms ease-out')) 36 | ]); 37 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-cookie-law", 3 | "description": "Angular2+ component that provides a banner to inform users about cookie law", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/andreasonny83/angular2-cookie-law.git" 7 | }, 8 | "keywords": [ 9 | "ng", 10 | "ng2", 11 | "ng6", 12 | "ng7", 13 | "angular", 14 | "angular2", 15 | "angular6", 16 | "angular7", 17 | "angular2-component", 18 | "angular7-component", 19 | "cookie", 20 | "cookie-law" 21 | ], 22 | "author": "Andrea Sonny (https://github.com/andreasonny83)", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/andreasonny83/angular2-cookie-law/issues" 26 | }, 27 | "homepage": "https://github.com/andreasonny83/angular2-cookie-law#readme", 28 | "version": "7.0.0", 29 | "peerDependencies": { 30 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || 7.0.0-rc.0 || ^7.0.0", 31 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || 7.0.0-rc.0 || ^7.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular2-cookie-law!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2018 Andrea SonnY 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/icons.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | export const closeIcon = ` 10 | 11 | 19 | `; 20 | -------------------------------------------------------------------------------- /src/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 | customLaunchers: { 29 | ChromeHeadless: { 30 | base: 'Chrome', 31 | flags: [ 32 | '--headless', 33 | '--disable-gpu', 34 | '--no-sandbox', 35 | '--remote-debugging-port=9222' 36 | ] 37 | } 38 | }, 39 | browsers: ['Chrome', 'ChromeHeadless'], 40 | singleRun: false 41 | }); 42 | }; 43 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/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 | customLaunchers: { 29 | ChromeHeadless: { 30 | base: 'Chrome', 31 | flags: [ 32 | '--headless', 33 | '--disable-gpu', 34 | '--no-sandbox', 35 | '--remote-debugging-port=9222' 36 | ] 37 | } 38 | }, 39 | browsers: ['Chrome', 'ChromeHeadless'], 40 | singleRun: false 41 | }); 42 | }; 43 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law.service.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; 10 | import { DOCUMENT, isPlatformBrowser } from '@angular/common'; 11 | 12 | @Injectable({ 13 | providedIn: 'root' 14 | }) 15 | export class Angular2CookieLawService { 16 | constructor( 17 | @Inject(DOCUMENT) private doc: any, 18 | @Inject(PLATFORM_ID) private platform: Object 19 | ) {} 20 | 21 | public seen(cookieName: string = 'cookieLawSeen'): boolean { 22 | let cookies: Array = []; 23 | 24 | if (isPlatformBrowser(this.platform)) { 25 | cookies = this.doc.cookie.split(';'); 26 | 27 | return this.cookieExisits(cookieName, cookies); 28 | } 29 | 30 | return true; 31 | } 32 | 33 | public storeCookie(cookieName: string, expiration?: number): void { 34 | return this.setCookie(cookieName, expiration); 35 | } 36 | 37 | private cookieExisits(name: string, cookies: Array): boolean { 38 | const cookieName = `${name}=`; 39 | 40 | return cookies.reduce( 41 | (prev, curr) => prev || curr.trim().search(cookieName) > -1, 42 | false 43 | ); 44 | } 45 | 46 | private setCookie(name: string, expiration?: number): void { 47 | const now: Date = new Date(); 48 | const exp: Date = new Date(now.getTime() + expiration * 86400000); 49 | 50 | const cookieString = 51 | encodeURIComponent(name) + `=true;path=/;expires=${exp.toUTCString()};`; 52 | 53 | if (isPlatformBrowser(this.platform)) { 54 | this.doc.cookie = cookieString; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law.component.css: -------------------------------------------------------------------------------- 1 | .cookie-law-wrapper { 2 | background: #333; 3 | color: #bbb; 4 | display: block; 5 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 6 | font-size: 15px; 7 | font-weight: 200; 8 | line-height: 20px; 9 | position: fixed; 10 | bottom: 0; 11 | left: 0; 12 | width: 100%; 13 | z-index: 999999999; 14 | font-smooth: always; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | .cookie-law-wrapper a { 19 | color: #bbb; 20 | -webkit-transition: color 0.2s; 21 | transition: color 0.2s; 22 | } 23 | 24 | .cookie-law-wrapper a:hover { 25 | color: #fff; 26 | } 27 | 28 | .cookie-law-wrapper a:hover svg { 29 | fill: #fff; 30 | } 31 | 32 | .cookie-law-wrapper .dismiss { 33 | display: block; 34 | box-sizing: border-box; 35 | padding: 10px; 36 | position: absolute; 37 | top: 0; 38 | right: 10px; 39 | text-decoration: none; 40 | line-height: 20px; 41 | } 42 | 43 | .cookie-law-wrapper .dismiss svg { 44 | display: block; 45 | fill: #bbb; 46 | width: 20px; 47 | height: 20px; 48 | -webkit-transition: fill 0.2s; 49 | transition: fill 0.2s; 50 | } 51 | 52 | .cookie-law-wrapper .copy { 53 | box-sizing: border-box; 54 | padding: 10px 60px 10px 10px; 55 | } 56 | 57 | .cookie-law-wrapper .copy span { 58 | color: #fff; 59 | font-weight: 400; 60 | } 61 | 62 | .cookie-law-wrapper .copy a { 63 | text-decoration: underline; 64 | } 65 | 66 | .cookie-law-wrapper .copy a:active, 67 | .copy a:hover { 68 | outline: 0; 69 | } 70 | 71 | @media (min-width: 600px) { 72 | /* For bigger devices: */ 73 | .cookie-law-wrapper .copy { 74 | padding: 20px 60px 20px 20px; 75 | font-size: 18px; 76 | line-height: 24px; 77 | } 78 | 79 | .cookie-law-wrapper .dismiss { 80 | top: 10px; 81 | right: 15px; 82 | } 83 | 84 | .cookie-law-wrapper .dismiss svg { 85 | width: 24px; 86 | height: 24px; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { Angular2CookieLawService } from './angular2-cookie-law.service'; 4 | 5 | describe('Angular2CookieLawService', () => { 6 | let service: Angular2CookieLawService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [Angular2CookieLawService] 11 | }); 12 | 13 | document.cookie = 'cookieLawSeen=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; 14 | 15 | service = TestBed.get(Angular2CookieLawService); 16 | }); 17 | 18 | it('should be created', () => { 19 | expect(service).toBeTruthy(); 20 | }); 21 | 22 | it('#seen should return a value', () => { 23 | expect(service.seen()).toBe(false); 24 | }); 25 | 26 | it('#seen should now have a cookie stored', () => { 27 | service.storeCookie('cookieLawSeen'); 28 | 29 | expect(service.seen()).toBe(true); 30 | expect(service.seen('cookieLawSeen')).toBe(true); 31 | }); 32 | 33 | it('set an expiration time', () => { 34 | service.storeCookie('cookieLawSeen', 1); 35 | 36 | expect(service.seen()).toBe(true); 37 | expect(service.seen('cookieLawSeen')).toBe(true); 38 | expect( 39 | document.cookie.match('cookieLawSeen').indexOf('cookieLawSeen') 40 | ).not.toBe(-1); 41 | }); 42 | 43 | it( 44 | 'seen should return the current stored cookies matching the name passed ' + 45 | 'in the argument', 46 | () => { 47 | document.cookie = ' myCookie=true; '; 48 | document.cookie = ' yourCookie=true ; '; 49 | 50 | expect(service.seen('myCookie')).toEqual(true); 51 | expect(service.seen('yourCookie')).toEqual(true); 52 | 53 | document.cookie = 'myCookie=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; 54 | document.cookie = 'yourCookie=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; 55 | 56 | expect(service.seen('myCookie')).toEqual(false); 57 | expect(service.seen('yourCookie')).toEqual(false); 58 | } 59 | ); 60 | 61 | it('should stored different cookie names', () => { 62 | service.storeCookie('testCookie'); 63 | 64 | expect(service.seen('fakeCookie')).toBe(false); 65 | expect(service.seen()).toBe(false); 66 | 67 | expect(service.seen('testCookie')).toBe(true); 68 | }); 69 | }); 70 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law-container.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | import { 10 | Component, 11 | OnInit, 12 | ViewChild, 13 | HostBinding, 14 | Input, 15 | Output, 16 | EventEmitter 17 | } from '@angular/core'; 18 | 19 | import { Angular2CookieLawService } from './angular2-cookie-law.service'; 20 | import { CookieLawComponent } from './angular2-cookie-law.component'; 21 | import { CookieLawTarget, CookieLawPosition } from './definitions'; 22 | 23 | @Component({ 24 | selector: 'cookie-law', 25 | template: ` 26 | 34 | 35 | 36 | ` 37 | }) 38 | export class CookieLawContainerComponent implements OnInit { 39 | @HostBinding('attr.seen') 40 | public seen: boolean; 41 | 42 | @ViewChild(CookieLawComponent) 43 | public cookieLawComponent: CookieLawComponent; 44 | 45 | @Input() 46 | public name: string; 47 | 48 | @Input() 49 | public learnMore: string; 50 | 51 | @Input() 52 | public target: CookieLawTarget; 53 | 54 | @Input() 55 | public position: CookieLawPosition; 56 | 57 | @Input() 58 | public expiration: number; 59 | 60 | @Input() 61 | public awsomeCloseIcon: string; 62 | 63 | @Output() 64 | public isSeen = new EventEmitter(); 65 | 66 | public get cookieLawSeen(): boolean { 67 | return this.cookieLawService.seen(this.name); 68 | } 69 | 70 | constructor(private cookieLawService: Angular2CookieLawService) { 71 | this.name = 'cookieLawSeen'; // set a default cookie name if not provided 72 | this.seen = true; 73 | } 74 | 75 | public ngOnInit() { 76 | this.seen = this.cookieLawService.seen(this.name); 77 | } 78 | 79 | public hasBeenDismissed(): void { 80 | this.cookieLawService.storeCookie(this.name, this.expiration); 81 | this.seen = true; 82 | this.isSeen.emit(true); 83 | } 84 | 85 | public dismiss(): void { 86 | this.cookieLawComponent.dismiss(); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-cookie-law", 3 | "version": "0.0.0-development", 4 | "description": "Angular2+ component that provides a banner to inform users about cookie law", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/andreasonny83/angular2-cookie-law.git" 8 | }, 9 | "keywords": [ 10 | "ng", 11 | "ng2", 12 | "ng6", 13 | "ng7", 14 | "angular", 15 | "angular2", 16 | "angular6", 17 | "angular7", 18 | "angular2-component", 19 | "angular7-component", 20 | "cookie", 21 | "cookie-law" 22 | ], 23 | "author": "Andrea Sonny (https://github.com/andreasonny83)", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/andreasonny83/angular2-cookie-law/issues" 27 | }, 28 | "homepage": "https://github.com/andreasonny83/angular2-cookie-law#readme", 29 | "scripts": { 30 | "ng": "ng", 31 | "start": "ng serve", 32 | "build": "ng build", 33 | "build:prod": "ng build angular2-cookie-law --prod", 34 | "commit": "git-cz", 35 | "semantic-release": "cd dist/angular2-cookie-law && semantic-release", 36 | "test": "ng test angular2-cookie-law", 37 | "test:headless": "ng test angular2-cookie-law -c headless", 38 | "lint": "ng lint", 39 | "e2e": "ng e2e" 40 | }, 41 | "dependencies": { 42 | "@angular/animations": "^6.1.10", 43 | "@angular/common": "^6.1.10", 44 | "@angular/compiler": "^6.1.10", 45 | "@angular/core": "^6.1.10", 46 | "@angular/forms": "^6.1.10", 47 | "@angular/http": "^6.1.10", 48 | "@angular/platform-browser": "^6.1.10", 49 | "@angular/platform-browser-dynamic": "^6.1.10", 50 | "@angular/router": "^6.1.10", 51 | "core-js": "^2.6.1", 52 | "rxjs": "^6.3.3", 53 | "zone.js": "^0.8.26" 54 | }, 55 | "devDependencies": { 56 | "@angular-devkit/build-angular": "^0.11.4", 57 | "@angular-devkit/build-ng-packagr": "^0.11.4", 58 | "@angular/cli": "~6.0.8", 59 | "@angular/compiler-cli": "^6.1.10", 60 | "@angular/language-service": "^6.1.10", 61 | "@types/jasmine": "2.8.6", 62 | "@types/jasminewd2": "~2.0.3", 63 | "@types/node": "~8.9.4", 64 | "codelyzer": "~4.2.1", 65 | "commitizen": "^2.10.1", 66 | "cz-conventional-changelog": "^2.1.0", 67 | "husky": "^0.14.3", 68 | "jasmine-core": "~2.99.1", 69 | "jasmine-spec-reporter": "~4.2.1", 70 | "karma": "~1.7.1", 71 | "karma-chrome-launcher": "~2.2.0", 72 | "karma-coverage-istanbul-reporter": "~1.4.2", 73 | "karma-jasmine": "~1.1.1", 74 | "karma-jasmine-html-reporter": "^0.2.2", 75 | "ng-packagr": "^3.0.6", 76 | "protractor": "~5.3.0", 77 | "semantic-release": "^15.13.2", 78 | "ts-node": "~5.0.1", 79 | "tsickle": "^0.27.5", 80 | "tslib": "^1.9.3", 81 | "tslint": "~5.9.1", 82 | "typescript": "~2.7.2" 83 | }, 84 | "config": { 85 | "commitizen": { 86 | "path": "./node_modules/cz-conventional-changelog" 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-shadowed-variable": true, 69 | "no-string-literal": false, 70 | "no-string-throw": true, 71 | "no-switch-case-fall-through": true, 72 | "no-trailing-whitespace": true, 73 | "no-unnecessary-initializer": true, 74 | "no-unused-expression": true, 75 | "no-use-before-declare": true, 76 | "no-var-keyword": true, 77 | "object-literal-sort-keys": false, 78 | "one-line": [ 79 | true, 80 | "check-open-brace", 81 | "check-catch", 82 | "check-else", 83 | "check-whitespace" 84 | ], 85 | "prefer-const": true, 86 | "quotemark": [ 87 | true, 88 | "single" 89 | ], 90 | "radix": true, 91 | "semicolon": [ 92 | true, 93 | "always" 94 | ], 95 | "triple-equals": [ 96 | true, 97 | "allow-null-check" 98 | ], 99 | "typedef-whitespace": [ 100 | true, 101 | { 102 | "call-signature": "nospace", 103 | "index-signature": "nospace", 104 | "parameter": "nospace", 105 | "property-declaration": "nospace", 106 | "variable-declaration": "nospace" 107 | } 108 | ], 109 | "unified-signatures": true, 110 | "variable-name": false, 111 | "whitespace": [ 112 | true, 113 | "check-branch", 114 | "check-decl", 115 | "check-operator", 116 | "check-separator", 117 | "check-type" 118 | ], 119 | "no-output-on-prefix": true, 120 | "use-input-property-decorator": true, 121 | "use-output-property-decorator": true, 122 | "use-host-property-decorator": true, 123 | "no-input-rename": true, 124 | "no-output-rename": true, 125 | "use-life-cycle-interface": true, 126 | "use-pipe-transform-interface": true, 127 | "component-class-suffix": true, 128 | "directive-class-suffix": true 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Web Animations `@angular/platform-browser/animations` 51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 53 | **/ 54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 55 | 56 | /** 57 | * By default, zone.js will patch all possible macroTask and DomEvents 58 | * user can disable parts of macroTask/DomEvents patch by setting following flags 59 | */ 60 | 61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 64 | 65 | /* 66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 68 | */ 69 | // (window as any).__Zone_enable_cross_context_check = true; 70 | 71 | /*************************************************************************************************** 72 | * Zone JS is required by default for Angular itself. 73 | */ 74 | import 'zone.js/dist/zone'; // Included with Angular CLI. 75 | 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * angular2-cookie-law 3 | * 4 | * Copyright 2016-2018, @andreasonny83, All rights reserved. 5 | * 6 | * @author: @andreasonny83 7 | */ 8 | 9 | import { 10 | Component, 11 | OnInit, 12 | HostBinding, 13 | ViewEncapsulation, 14 | Input, 15 | Output, 16 | EventEmitter 17 | } from '@angular/core'; 18 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 19 | import { AnimationEvent } from '@angular/animations'; 20 | import { closeIcon } from './icons'; 21 | import { translateInOut } from './animations'; 22 | import { 23 | CookieLawAnimation, 24 | CookieLawTarget, 25 | CookieLawPosition 26 | } from './definitions'; 27 | 28 | @Component({ 29 | selector: 'cookie-law-component', 30 | templateUrl: './angular2-cookie-law.component.html', 31 | styleUrls: ['./angular2-cookie-law.component.css'], 32 | animations: [translateInOut], 33 | encapsulation: ViewEncapsulation.None 34 | }) 35 | export class CookieLawComponent implements OnInit { 36 | public closeSvg: SafeHtml; 37 | public currentStyles: any; 38 | public transition: CookieLawAnimation; 39 | 40 | @HostBinding('class.cookie-law') 41 | public cookieLawClass: boolean; 42 | 43 | @Input() 44 | get learnMore() { 45 | return this._learnMore; 46 | } 47 | set learnMore(value: string) { 48 | this._learnMore = value !== null && `${value}` !== 'false' ? value : null; 49 | } 50 | 51 | @Input() 52 | get awsomeCloseIcon() { 53 | return this._awsomeCloseIcon; 54 | } 55 | set awsomeCloseIcon(value: string) { 56 | this._awsomeCloseIcon = 57 | value !== null && `${value}` !== 'false' ? value : null; 58 | } 59 | 60 | @Input() 61 | get target() { 62 | return this._target; 63 | } 64 | set target(value: CookieLawTarget) { 65 | this._target = 66 | value !== null && 67 | `${value}` !== 'false' && 68 | (`${value}` === '_blank' || `${value}` === '_self') 69 | ? value 70 | : '_blank'; 71 | } 72 | 73 | @Input() 74 | get position() { 75 | return this._position; 76 | } 77 | set position(value: CookieLawPosition) { 78 | this._position = 79 | value !== null && 80 | `${value}` !== 'false' && 81 | (`${value}` === 'top' || `${value}` === 'bottom') 82 | ? value 83 | : 'bottom'; 84 | } 85 | 86 | @Output() 87 | public isSeen = new EventEmitter(); 88 | 89 | public noopener: boolean; 90 | 91 | private _learnMore: string; 92 | private _awsomeCloseIcon: string; 93 | private _target: CookieLawTarget; 94 | private _position: CookieLawPosition; 95 | 96 | constructor(private domSanitizer: DomSanitizer) { 97 | this.transition = 'bottomIn'; 98 | this._position = 'bottom'; 99 | this.cookieLawClass = true; 100 | } 101 | 102 | public ngOnInit(): void { 103 | this.noopener = this._target === '_blank'; 104 | this.transition = this.position === 'bottom' ? 'bottomIn' : 'topIn'; 105 | 106 | if (this._awsomeCloseIcon) { 107 | this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml( 108 | `` 109 | ); 110 | } else { 111 | this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml(closeIcon); 112 | } 113 | 114 | this.currentStyles = { 115 | top: this.position === 'top' ? '0' : null, 116 | bottom: this.position === 'top' ? 'initial' : null 117 | }; 118 | } 119 | 120 | public afterDismissAnimation(evt: AnimationEvent): void { 121 | if (evt.toState === 'topOut' || evt.toState === 'bottomOut') { 122 | this.isSeen.emit(true); 123 | } 124 | } 125 | 126 | public dismiss(evt?: MouseEvent): void { 127 | if (evt) { 128 | evt.preventDefault(); 129 | } 130 | 131 | this.transition = this.position === 'top' ? 'topOut' : 'bottomOut'; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/src/lib/angular2-cookie-law-container.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CookieLawContainerComponent } from './angular2-cookie-law-container.component'; 4 | import { Angular2CookieLawService } from './angular2-cookie-law.service'; 5 | import { CookieLawComponent } from './angular2-cookie-law.component'; 6 | import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 7 | import { DebugElement } from '@angular/core'; 8 | import { By } from '@angular/platform-browser'; 9 | 10 | describe('CookieLawContainerComponent', () => { 11 | let component: CookieLawContainerComponent; 12 | let cookiesPolicyService: Angular2CookieLawService; 13 | let fixture: ComponentFixture; 14 | 15 | // stub CookieLawService for test purposes 16 | const CookieLawServiceStub = { 17 | _seen: false, 18 | 19 | seen() { 20 | return this._seen; 21 | }, 22 | 23 | storeCookie() { 24 | this._seen = true; 25 | } 26 | }; 27 | 28 | beforeEach(async(() => { 29 | TestBed.configureTestingModule({ 30 | imports: [NoopAnimationsModule], 31 | declarations: [CookieLawContainerComponent, CookieLawComponent], 32 | providers: [ 33 | { 34 | provide: Angular2CookieLawService, 35 | useValue: CookieLawServiceStub 36 | } 37 | ] 38 | }).compileComponents(); 39 | 40 | cookiesPolicyService = TestBed.get(Angular2CookieLawService); 41 | })); 42 | 43 | beforeEach(() => { 44 | fixture = TestBed.createComponent(CookieLawContainerComponent); 45 | component = fixture.componentInstance; 46 | fixture.detectChanges(); 47 | }); 48 | 49 | it('should create', () => { 50 | expect(component).toBeTruthy(); 51 | }); 52 | 53 | it('should render the cookie policy notification', () => { 54 | fixture.detectChanges(); 55 | 56 | expect(cookiesPolicyService.seen()).toBe(false); 57 | 58 | expect(component).not.toBeNull(); 59 | 60 | expect(fixture.debugElement.nativeElement.textContent).toContain( 61 | 'By continuing to browse the site, you\'re agreeing to our use of cookies.' 62 | ); 63 | }); 64 | 65 | it('CookieLawComponent should have a `seen` attribute', () => { 66 | const element: HTMLElement = fixture.debugElement.nativeElement; 67 | 68 | fixture.detectChanges(); 69 | 70 | expect(element.getAttribute('seen')).toBe('false'); 71 | }); 72 | 73 | it('CookieLawComponent should be initially visible', () => { 74 | fixture.detectChanges(); 75 | 76 | expect(component.seen).toBe(false); 77 | expect(component.cookieLawSeen).toBe(false); 78 | }); 79 | 80 | it('CookieLawComponent should be dismissible', () => { 81 | fixture.detectChanges(); 82 | 83 | expect(component.seen).toBe(false); 84 | 85 | component.hasBeenDismissed(); 86 | fixture.detectChanges(); 87 | 88 | expect(component.seen).toBe(true); 89 | expect(component.cookieLawSeen).toBe(true); 90 | }); 91 | 92 | it('CookieLawElementComponent should accept attributes', () => { 93 | fixture.detectChanges(); 94 | 95 | const el: DebugElement = fixture.debugElement.query( 96 | By.css('cookie-law-component') 97 | ); 98 | 99 | expect(fixture.nativeElement.getAttribute('seen')).toBe('false'); 100 | 101 | expect(el.nativeElement.textContent).not.toContain( 102 | `Learn more in our privacy policy.` 103 | ); 104 | expect(el.componentInstance.name).not.toBeDefined(); 105 | expect(el.componentInstance.learnMore).not.toBeDefined(); 106 | expect(el.componentInstance.target).toBe('_blank'); 107 | expect(el.componentInstance.position).toBe('bottom'); 108 | expect(el.componentInstance.transition).toBe('bottomIn'); 109 | }); 110 | 111 | it('CookieLawElementComponent should renders on the top', () => { 112 | component.name = 'myCookie'; 113 | component.position = 'top'; 114 | 115 | fixture.detectChanges(); 116 | 117 | const el: DebugElement = fixture.debugElement.query( 118 | By.css('cookie-law-component') 119 | ); 120 | 121 | expect(component.position).toBe('top'); 122 | expect(el.componentInstance.position).toBe('top'); 123 | }); 124 | 125 | it('CookieLawElementComponent learnMore', () => { 126 | component.learnMore = '/#cookies'; 127 | component.target = '_self'; 128 | 129 | fixture.detectChanges(); 130 | 131 | const el: DebugElement = fixture.debugElement.query( 132 | By.css('cookie-law-component') 133 | ); 134 | 135 | expect(el.componentInstance.target).toBe('_self'); 136 | expect(el.nativeElement.textContent).toContain( 137 | `Learn more in our privacy policy.` 138 | ); 139 | 140 | component.learnMore = 'false'; 141 | 142 | fixture.detectChanges(); 143 | 144 | expect(el.componentInstance.learnMore).toBeNull(); 145 | }); 146 | }); 147 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "demo-app": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/demo-app", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "src/styles.css" 27 | ], 28 | "scripts": [] 29 | }, 30 | "configurations": { 31 | "production": { 32 | "fileReplacements": [ 33 | { 34 | "replace": "src/environments/environment.ts", 35 | "with": "src/environments/environment.prod.ts" 36 | } 37 | ], 38 | "optimization": true, 39 | "outputHashing": "all", 40 | "sourceMap": false, 41 | "extractCss": true, 42 | "namedChunks": false, 43 | "aot": true, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true 47 | } 48 | } 49 | }, 50 | "serve": { 51 | "builder": "@angular-devkit/build-angular:dev-server", 52 | "options": { 53 | "browserTarget": "demo-app:build" 54 | }, 55 | "configurations": { 56 | "production": { 57 | "browserTarget": "demo-app:build:production" 58 | } 59 | } 60 | }, 61 | "extract-i18n": { 62 | "builder": "@angular-devkit/build-angular:extract-i18n", 63 | "options": { 64 | "browserTarget": "demo-app:build" 65 | } 66 | }, 67 | "test": { 68 | "builder": "@angular-devkit/build-angular:karma", 69 | "options": { 70 | "main": "src/test.ts", 71 | "polyfills": "src/polyfills.ts", 72 | "tsConfig": "src/tsconfig.spec.json", 73 | "karmaConfig": "src/karma.conf.js", 74 | "styles": [ 75 | "src/styles.css" 76 | ], 77 | "scripts": [], 78 | "assets": [ 79 | "src/favicon.ico", 80 | "src/assets" 81 | ] 82 | } 83 | }, 84 | "lint": { 85 | "builder": "@angular-devkit/build-angular:tslint", 86 | "options": { 87 | "tsConfig": [ 88 | "src/tsconfig.app.json", 89 | "src/tsconfig.spec.json" 90 | ], 91 | "exclude": [ 92 | "**/node_modules/**" 93 | ] 94 | } 95 | } 96 | } 97 | }, 98 | "demo-app-e2e": { 99 | "root": "e2e/", 100 | "projectType": "application", 101 | "architect": { 102 | "e2e": { 103 | "builder": "@angular-devkit/build-angular:protractor", 104 | "options": { 105 | "protractorConfig": "e2e/protractor.conf.js", 106 | "devServerTarget": "demo-app:serve" 107 | } 108 | }, 109 | "lint": { 110 | "builder": "@angular-devkit/build-angular:tslint", 111 | "options": { 112 | "tsConfig": "e2e/tsconfig.e2e.json", 113 | "exclude": [ 114 | "**/node_modules/**" 115 | ] 116 | } 117 | } 118 | } 119 | }, 120 | "angular2-cookie-law": { 121 | "root": "projects/angular2-cookie-law", 122 | "sourceRoot": "projects/angular2-cookie-law/src", 123 | "projectType": "library", 124 | "prefix": "cookie-law", 125 | "architect": { 126 | "build": { 127 | "builder": "@angular-devkit/build-ng-packagr:build", 128 | "options": { 129 | "tsConfig": "projects/angular2-cookie-law/tsconfig.lib.json", 130 | "project": "projects/angular2-cookie-law/ng-package.json" 131 | }, 132 | "configurations": { 133 | "production": { 134 | "project": "projects/angular2-cookie-law/ng-package.prod.json" 135 | } 136 | } 137 | }, 138 | "test": { 139 | "builder": "@angular-devkit/build-angular:karma", 140 | "options": { 141 | "browsers": "Chrome", 142 | "main": "projects/angular2-cookie-law/src/test.ts", 143 | "tsConfig": "projects/angular2-cookie-law/tsconfig.spec.json", 144 | "karmaConfig": "projects/angular2-cookie-law/karma.conf.js" 145 | }, 146 | "configurations": { 147 | "headless": { 148 | "browsers": "ChromeHeadless", 149 | "watch": false 150 | } 151 | } 152 | }, 153 | "lint": { 154 | "builder": "@angular-devkit/build-angular:tslint", 155 | "options": { 156 | "tsConfig": [ 157 | "projects/angular2-cookie-law/tsconfig.lib.json", 158 | "projects/angular2-cookie-law/tsconfig.spec.json" 159 | ], 160 | "exclude": [ 161 | "**/node_modules/**" 162 | ] 163 | } 164 | } 165 | } 166 | } 167 | }, 168 | "defaultProject": "demo-app" 169 | } 170 | -------------------------------------------------------------------------------- /projects/angular2-cookie-law/README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/andreasonny83/angular2-cookie-law.svg?branch=master)](https://travis-ci.org/andreasonny83/angular2-cookie-law) 2 | [![npm version](https://badge.fury.io/js/angular2-cookie-law.svg)](https://badge.fury.io/js/angular2-cookie-law) 3 | [![npm](https://img.shields.io/npm/dt/angular2-cookie-law.svg)](https://www.npmjs.com/package/angular2-cookie-law) 4 | [![Coverage Status](https://coveralls.io/repos/github/andreasonny83/angular2-cookie-law/badge.svg)](https://coveralls.io/github/andreasonny83/angular2-cookie-law) 5 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 6 | [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 7 | 8 | # Angular2 Cookie Law 9 | 10 | > Angular2+ component that provides a banner to inform users about the cookie law now with Angular Universal support 11 | 12 | Angular2 Cookie Law is an HTML `` tag enhanced with styling and animation. 13 | 14 | **This documentation is for the latest version of `angular2-cookie-law` (>=6.x.x).** 15 | 16 | **angular2-cookie-law@7 supports bot Angular v6 and v7** 17 | 18 | If you're using an older version of Angular (<6), please install `angular2-cookie-law` 19 | in version 1 with 20 | `npm i --save angular2-cookie-law@1` 21 | and check out the documentation available [here](https://github.com/andreasonny83/angular2-cookie-law/tree/v1.4.0). 22 | 23 | **Live DEMO:** 24 | 25 | * [Angular2 Cookie Law with Angular6](https://stackblitz.com/edit/angular2-cookie-law) 26 | 27 | ## Table of contents 28 | 29 | * [Installation](#installation) 30 | * [Setup](#setup) 31 | * [Usage](#usage) 32 | * [Example](#example) 33 | * [Demo App](#demo-app) 34 | * [Options](#options) 35 | * [Attributes](#attributes) 36 | * [Properties](#properties) 37 | * [Events](#events) 38 | * [Methods](#methods) 39 | * [Custom template](#custom-template) 40 | * [Contributing](#contributing) 41 | * [Changelog](#changelog) 42 | * [License](#license) 43 | 44 | ## Installation 45 | 46 | 1. Install the component using `npm` 47 | 1. angular2-cookie-law depends on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the `@angular/animations` module and include the `BrowserAnimationsModule` in your app. 48 | 49 | ```bash 50 | # To get the latest stable version and update package.json file: 51 | $ npm install angular2-cookie-law@6 @angular/animations --save 52 | ``` 53 | 54 | or `yarn` with: 55 | 56 | ```bash 57 | $ yarn add angular2-cookie-law @angular/animations 58 | ``` 59 | 60 | ## Setup 61 | 62 | angular2-cookie-law class is an Angular module therefore, 63 | it needs to be registered in the modules array (encouraged way): 64 | 65 | ```js 66 | // app.module.ts 67 | import { NgModule } from '@angular/core'; 68 | import { BrowserModule } from '@angular/platform-browser'; 69 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 70 | import { CookieLawModule } from 'angular2-cookie-law'; 71 | import { AppComponent } from './app.component'; 72 | 73 | @NgModule({ 74 | declarations: [ AppComponent ], 75 | imports: [ 76 | BrowserModule, 77 | BrowserAnimationsModule, // BrowserAnimationsModule is required 78 | CookieLawModule // import Angular's CookieLaw modules 79 | ], 80 | bootstrap: [ AppComponent ] 81 | }) 82 | export class AppModule { } 83 | ``` 84 | 85 | ## Usage 86 | 87 | Use the component anywhere around your application: 88 | 89 | ```js 90 | // app.component.ts 91 | import { Component } from '@angular/core'; 92 | 93 | @Component({ 94 | selector: 'app', 95 | template: ` 96 | 97 | ` 98 | }) 99 | export class AppComponent { } 100 | ``` 101 | 102 | ## Example 103 | 104 | ```js 105 | // app.component.ts 106 | import { Component } from '@angular/core'; 107 | 108 | @Component({ 109 | selector: 'app', 110 | template: ` 111 |

112 | Hello World! 113 |

114 | 115 | 116 | ` 117 | }) 118 | export class AppComponent { } 119 | ``` 120 | 121 | ###### Output 122 | 123 | ![cookie-law example](http://i.imgur.com/W9LUdwy.png) 124 | 125 | # Demo App 126 | 127 | Have a look at the demo app available in this repository for a real Angular application using the `angular2-Cookie-Law` library. 128 | Clone this repo on you machine with 129 | 130 | ```sh 131 | $ git clone git@github.com:andreasonny83/angular2-cookie-law.git 132 | ``` 133 | 134 | Then install all the Node dependencies (Node v8 or later is required). 135 | 136 | ```sh 137 | $ npm install 138 | ``` 139 | 140 | And run the project with: 141 | 142 | ```bash 143 | $ npm start 144 | ``` 145 | 146 | Open your browser to [http://localhost:4200/](http://localhost:4200/) 147 | to see the application running. 148 | 149 | ## Options 150 | 151 | ## Attributes 152 | 153 | ### learnMore 154 | 155 | | Type | Default value | 156 | | --- | --- | 157 | | string | null | 158 | 159 | If set to a valid absolute or relative URL, it will render an extra 'learn more' link pointing to the link. 160 | 161 | ###### Example 162 | 163 | ```html 164 | 165 | ``` 166 | 167 | ![output with link](http://i.imgur.com/0nvb6sP.png) 168 | 169 | ### awsomeCloseIcon 170 | 171 | Font Awsome is required in your header for this feature to work. 172 | 173 | ```html 174 | 175 | ``` 176 | 177 | | Type | Default value | 178 | | --- | --- | 179 | | string | null | 180 | 181 | If set to a Font awsome Icon e.g. "fa-window-close" it will replace the standard SVG with the Font awsome Icon. 182 | 183 | ###### Example 184 | 185 | ```html 186 | 187 | ``` 188 | 189 | ### target 190 | 191 | | Type | Default value | 192 | | --- | --- | 193 | | string | _blank | 194 | 195 | Set to `_self` if you want the external link not to be opened in a new tab. 196 | 197 | ###### Example 198 | 199 | ```html 200 | 201 | ``` 202 | 203 | ### position 204 | 205 | | Type | Default value | 206 | | --- | --- | 207 | | string | "bottom" | 208 | 209 | Allows you to decide where in the page, the banner will be rendered. 210 | Possible values are: `"bottom"` and `"top"`. 211 | 212 | ###### Example 213 | 214 | ```html 215 | 216 | ``` 217 | 218 | ### name 219 | 220 | | Type | Default value | 221 | | --- | --- | 222 | | string | "cookieLawSeen" | 223 | 224 | Allows you to decide which name will be used for storing the cookie in the client's browser. 225 | 226 | ###### Example 227 | 228 | ```html 229 | 230 | ``` 231 | 232 | The previous example will generate a `myShinyCookieLaw=true` as soon as the user dismiss the banner. 233 | 234 | ### expiration 235 | 236 | | Type | Default value | Description | 237 | | --- | --- | --- | 238 | | number | - | Set a the cookie expiration time (in days) | 239 | 240 | ###### Example 241 | 242 | ```html 243 | I'm gonna expire in 1 week! 244 | ``` 245 | 246 | ## Properties 247 | 248 | | Name | Type | Description | 249 | | --- | --- | --- | 250 | | cookieLawSeen | boolean | true if the user has already dismissed the banner | 251 | 252 | ###### Example 253 | 254 | ```js 255 | @Component({ 256 | selector: 'demo-app', 257 | template: ` 258 |

Cookie law has been dismissed

259 | 260 | 261 | 262 | `, 263 | }) 264 | export class AppComponent implements OnInit { 265 | @ViewChild('cookieLaw') 266 | private cookieLawEl: any; 267 | 268 | private cookieLawSeen: boolean; 269 | 270 | ngOnInit() { 271 | this.cookieLawSeen = this.cookieLawEl.cookieLawSeen; 272 | } 273 | } 274 | ``` 275 | 276 | ## Events 277 | 278 | | Name | Type | Description | 279 | | --- | --- | --- | 280 | | isSeen | boolean | Triggered when the user dismiss the banner | 281 | 282 | ###### Example 283 | 284 | ```js 285 | @Component({ 286 | selector: 'demo-app', 287 | template: ` 288 |

Cookie law has been dismissed

289 | 290 | 291 | `, 292 | }) 293 | export class AppComponent { 294 | private cookieLawSeen: boolean; 295 | 296 | public seen(evt: any) { 297 | this.cookieLawSeen = evt; 298 | } 299 | } 300 | ``` 301 | 302 | ## Methods 303 | 304 | | Name | Description | 305 | | --- | --- | 306 | | dismiss | Dismiss a banner | 307 | 308 | ###### Example 309 | 310 | ```js 311 | @Component({ 312 | selector: 'demo-app', 313 | template: ` 314 | 315 | 316 | 317 | `, 318 | }) 319 | export class AppComponent implements OnInit { 320 | @ViewChild('cookieLaw') 321 | private cookieLawEl: any; 322 | 323 | public dismiss(): void { 324 | this.cookieLawEl.dismiss(); 325 | } 326 | } 327 | ``` 328 | 329 | ## Custom template 330 | 331 | It is possible to overwrite our default cookie policy law text with a 332 | custom template. 333 | Just put your favorite html content between the component like in the 334 | following example: 335 | ```html 336 | 337 | This website contains cookie. 338 | Read more 339 | 340 | ``` 341 | 342 | ## Contributing 343 | 344 | This package is using the AngularJS commit messages as default way to contribute 345 | with Commitizen node package integrated in this repository. 346 | 347 | 1. Fork it! 348 | 1. Create your feature branch: `git checkout -b my-new-feature` 349 | 1. Add your changes: `git add .` 350 | 1. Commit your changes: `npm run commit` 351 | 1. Push to the branch: `git push origin my-new-feature` 352 | 1. Submit a pull request :sunglasses: 353 | 354 | ## Changelog 355 | 356 | Changelog available [here](https://github.com/andreasonny83/angular2-cookie-law/releases) 357 | 358 | ## License 359 | 360 | [MIT License](https://github.com/andreasonny83/angular2-cookie-law/blob/master/LICENSE) © Andrea SonnY 361 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Maintainers Wanted 2 | 3 | This project was originally intended to be only consumed by my NG applications. 4 | I'm now working full-time on React related project only and it's been a while since I did look into Angular related code. 5 | 6 | However, since there are now several people relying on this small and simple package, I'm looking for volunteers to actiely look after this project. 7 | If anyone is interested, please reply into [this ticket](https://github.com/andreasonny83/angular2-cookie-law/issues/63). 8 | 9 | [![Build Status](https://travis-ci.org/andreasonny83/angular2-cookie-law.svg?branch=master)](https://travis-ci.org/andreasonny83/angular2-cookie-law) 10 | [![npm version](https://badge.fury.io/js/angular2-cookie-law.svg)](https://badge.fury.io/js/angular2-cookie-law) 11 | [![npm](https://img.shields.io/npm/dt/angular2-cookie-law.svg)](https://www.npmjs.com/package/angular2-cookie-law) 12 | [![Coverage Status](https://coveralls.io/repos/github/andreasonny83/angular2-cookie-law/badge.svg)](https://coveralls.io/github/andreasonny83/angular2-cookie-law) 13 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 14 | [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 15 | 16 | # Angular2 Cookie Law 17 | 18 | > Angular2+ component that provides a banner to inform users about the cookie law now with Angular Universal support 19 | 20 | Angular2 Cookie Law is an HTML `` tag enhanced with styling and animation. 21 | 22 | **This documentation is for the latest version of `angular2-cookie-law` (>=6.x.x).** 23 | 24 | **angular2-cookie-law@7 supports bot Angular v6 and v7** 25 | 26 | If you're using an older version of Angular (<6), please install `angular2-cookie-law` 27 | in version 1 with 28 | `npm i --save angular2-cookie-law@1` 29 | and check out the documentation available [here](https://github.com/andreasonny83/angular2-cookie-law/tree/v1.4.0). 30 | 31 | **Live DEMO:** 32 | 33 | * [Angular2 Cookie Law with Angular 6](https://stackblitz.com/edit/angular2-cookie-law) 34 | * [Angular2 Cookie Law with Angular 7](https://stackblitz.com/edit/angular2-cookie-law-ng7) 35 | 36 | ## Table of contents 37 | 38 | * [Installation](#installation) 39 | * [Setup](#setup) 40 | * [Usage](#usage) 41 | * [Example](#example) 42 | * [Demo App](#demo-app) 43 | * [Options](#options) 44 | * [Attributes](#attributes) 45 | * [Properties](#properties) 46 | * [Events](#events) 47 | * [Methods](#methods) 48 | * [Custom template](#custom-template) 49 | * [Contributing](#contributing) 50 | * [Changelog](#changelog) 51 | * [License](#license) 52 | 53 | ## Installation 54 | 55 | 1. Install the component using `npm` 56 | 1. angular2-cookie-law depends on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the `@angular/animations` module and include the `BrowserAnimationsModule` in your app. 57 | 58 | ```bash 59 | # To get the latest stable version and update package.json file: 60 | $ npm install angular2-cookie-law@6 @angular/animations --save 61 | ``` 62 | 63 | or `yarn` with: 64 | 65 | ```bash 66 | $ yarn add angular2-cookie-law @angular/animations 67 | ``` 68 | 69 | ## Setup 70 | 71 | angular2-cookie-law class is an Angular module therefore, 72 | it needs to be registered in the modules array (encouraged way): 73 | 74 | ```js 75 | // app.module.ts 76 | import { NgModule } from '@angular/core'; 77 | import { BrowserModule } from '@angular/platform-browser'; 78 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 79 | import { CookieLawModule } from 'angular2-cookie-law'; 80 | import { AppComponent } from './app.component'; 81 | 82 | @NgModule({ 83 | declarations: [ AppComponent ], 84 | imports: [ 85 | BrowserModule, 86 | BrowserAnimationsModule, // BrowserAnimationsModule is required 87 | CookieLawModule // import Angular's CookieLaw modules 88 | ], 89 | bootstrap: [ AppComponent ] 90 | }) 91 | export class AppModule { } 92 | ``` 93 | 94 | ## Usage 95 | 96 | Use the component anywhere around your application: 97 | 98 | ```js 99 | // app.component.ts 100 | import { Component } from '@angular/core'; 101 | 102 | @Component({ 103 | selector: 'app', 104 | template: ` 105 | 106 | ` 107 | }) 108 | export class AppComponent { } 109 | ``` 110 | 111 | ## Example 112 | 113 | ```js 114 | // app.component.ts 115 | import { Component } from '@angular/core'; 116 | 117 | @Component({ 118 | selector: 'app', 119 | template: ` 120 |

121 | Hello World! 122 |

123 | 124 | 125 | ` 126 | }) 127 | export class AppComponent { } 128 | ``` 129 | 130 | ###### Output 131 | 132 | ![cookie-law example](http://i.imgur.com/W9LUdwy.png) 133 | 134 | # Demo App 135 | 136 | Have a look at the demo app available in this repository for a real Angular application using the `angular2-Cookie-Law` library. 137 | Clone this repo on you machine with 138 | 139 | ```sh 140 | $ git clone git@github.com:andreasonny83/angular2-cookie-law.git 141 | ``` 142 | 143 | Then install all the Node dependencies (Node v8 or later is required). 144 | 145 | ```sh 146 | $ npm install 147 | ``` 148 | 149 | And run the project with: 150 | 151 | ```bash 152 | $ npm start 153 | ``` 154 | 155 | Open your browser to [http://localhost:4200/](http://localhost:4200/) 156 | to see the application running. 157 | 158 | ## Options 159 | 160 | ## Attributes 161 | 162 | ### learnMore 163 | 164 | | Type | Default value | 165 | | --- | --- | 166 | | string | null | 167 | 168 | If set to a valid absolute or relative URL, it will render an extra 'learn more' link pointing to the link. 169 | 170 | ###### Example 171 | 172 | ```html 173 | 174 | ``` 175 | 176 | ![output with link](http://i.imgur.com/0nvb6sP.png) 177 | 178 | ### awsomeCloseIcon 179 | 180 | Font Awsome is required in your header for this feature to work. 181 | 182 | ```html 183 | 184 | ``` 185 | 186 | | Type | Default value | 187 | | --- | --- | 188 | | string | null | 189 | 190 | If set to a Font awsome Icon e.g. "fa-window-close" it will replace the standard SVG with the Font awsome Icon. 191 | 192 | ###### Example 193 | 194 | ```html 195 | 196 | ``` 197 | 198 | ### target 199 | 200 | | Type | Default value | 201 | | --- | --- | 202 | | string | _blank | 203 | 204 | Set to `_self` if you want the external link not to be opened in a new tab. 205 | 206 | ###### Example 207 | 208 | ```html 209 | 210 | ``` 211 | 212 | ### position 213 | 214 | | Type | Default value | 215 | | --- | --- | 216 | | string | "bottom" | 217 | 218 | Allows you to decide where in the page, the banner will be rendered. 219 | Possible values are: `"bottom"` and `"top"`. 220 | 221 | ###### Example 222 | 223 | ```html 224 | 225 | ``` 226 | 227 | ### name 228 | 229 | | Type | Default value | 230 | | --- | --- | 231 | | string | "cookieLawSeen" | 232 | 233 | Allows you to decide which name will be used for storing the cookie in the client's browser. 234 | 235 | ###### Example 236 | 237 | ```html 238 | 239 | ``` 240 | 241 | The previous example will generate a `myShinyCookieLaw=true` as soon as the user dismiss the banner. 242 | 243 | ### expiration 244 | 245 | | Type | Default value | Description | 246 | | --- | --- | --- | 247 | | number | - | Set a the cookie expiration time (in days) | 248 | 249 | ###### Example 250 | 251 | ```html 252 | I'm gonna expire in 1 week! 253 | ``` 254 | 255 | ## Properties 256 | 257 | | Name | Type | Description | 258 | | --- | --- | --- | 259 | | cookieLawSeen | boolean | true if the user has already dismissed the banner | 260 | 261 | ###### Example 262 | 263 | ```js 264 | @Component({ 265 | selector: 'demo-app', 266 | template: ` 267 |

Cookie law has been dismissed

268 | 269 | 270 | 271 | `, 272 | }) 273 | export class AppComponent implements OnInit { 274 | @ViewChild('cookieLaw') 275 | private cookieLawEl: any; 276 | 277 | private cookieLawSeen: boolean; 278 | 279 | ngOnInit() { 280 | this.cookieLawSeen = this.cookieLawEl.cookieLawSeen; 281 | } 282 | } 283 | ``` 284 | 285 | ## Events 286 | 287 | | Name | Type | Description | 288 | | --- | --- | --- | 289 | | isSeen | boolean | Triggered when the user dismiss the banner | 290 | 291 | ###### Example 292 | 293 | ```js 294 | @Component({ 295 | selector: 'demo-app', 296 | template: ` 297 |

Cookie law has been dismissed

298 | 299 | 300 | `, 301 | }) 302 | export class AppComponent { 303 | private cookieLawSeen: boolean; 304 | 305 | public seen(evt: any) { 306 | this.cookieLawSeen = evt; 307 | } 308 | } 309 | ``` 310 | 311 | ## Methods 312 | 313 | | Name | Description | 314 | | --- | --- | 315 | | dismiss | Dismiss a banner | 316 | 317 | ###### Example 318 | 319 | ```js 320 | @Component({ 321 | selector: 'demo-app', 322 | template: ` 323 | 324 | 325 | 326 | `, 327 | }) 328 | export class AppComponent implements OnInit { 329 | @ViewChild('cookieLaw') 330 | private cookieLawEl: any; 331 | 332 | public dismiss(): void { 333 | this.cookieLawEl.dismiss(); 334 | } 335 | } 336 | ``` 337 | 338 | ## Custom template 339 | 340 | It is possible to overwrite our default cookie policy law text with a 341 | custom template. 342 | Just put your favorite html content between the component like in the 343 | following example: 344 | ```html 345 | 346 | This website contains cookie. 347 | Read more 348 | 349 | ``` 350 | 351 | ## Contributing 352 | 353 | This package is using the AngularJS commit messages as default way to contribute 354 | with Commitizen node package integrated in this repository. 355 | 356 | 1. Fork it! 357 | 1. Create your feature branch: `git checkout -b my-new-feature` 358 | 1. Add your changes: `git add .` 359 | 1. Commit your changes: `npm run commit` 360 | 1. Push to the branch: `git push origin my-new-feature` 361 | 1. Submit a pull request :sunglasses: 362 | 363 | ## Changelog 364 | 365 | Changelog available [here](https://github.com/andreasonny83/angular2-cookie-law/releases) 366 | 367 | ## License 368 | 369 | [MIT License](https://github.com/andreasonny83/angular2-cookie-law/blob/master/LICENSE) © Andrea SonnY 370 | --------------------------------------------------------------------------------