angular2-cookie-law-banner
Version:
Angular2+ component that provides a banner to inform users about cookie banner
323 lines (313 loc) • 18.3 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Injectable, Inject, EventEmitter, Component, ViewEncapsulation, HostBinding, Input, Output, ViewChild, NgModule, Optional, SkipSelf } from '@angular/core';
import * as i2 from '@angular/common';
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i1 from '@angular/platform-browser';
/**
* angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
class Angular2CookieLawBannerService {
constructor(doc, platform) {
this.doc = doc;
this.platform = platform;
}
seen(cookieName = "cookieLawSeen") {
let cookies = [];
if (isPlatformBrowser(this.platform)) {
cookies = this.doc.cookie.split(";");
return this.cookieExisits(cookieName, cookies);
}
return true;
}
storeCookie(cookieName, expiration) {
return this.setCookie(cookieName, expiration);
}
cookieExisits(name, cookies) {
const cookieName = `${name}=`;
return cookies.reduce((prev, curr) => prev || curr.trim().search(cookieName) > -1, false);
}
setCookie(name, expiration) {
const now = new Date();
const exp = new Date(now.getTime() + expiration * 86400000);
const cookieString = encodeURIComponent(name) + `=true;path=/;expires=${exp.toUTCString()};`;
if (isPlatformBrowser(this.platform)) {
this.doc.cookie = cookieString;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: Angular2CookieLawBannerService, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: Angular2CookieLawBannerService, providedIn: "root" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: Angular2CookieLawBannerService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: Object, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }] });
/**
* angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
const closeIcon = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M377.047 184.198q0 8.26-6.037 14.297L313.505 256l57.505 57.505q6.037 6.037 6.037 14.297 0 8.578-6.037
14.615l-28.593 28.593q-6.037 6.037-14.615 6.037-8.26 0-14.297-6.037L256 313.505l-57.505 57.505q-6.037
6.037-14.297 6.037-8.578 0-14.615-6.037l-28.593-28.593q-6.037-6.037-6.037-14.615 0-8.26 6.037-14.297L198.495
256l-57.505-57.505q-6.037-6.037-6.037-14.297 0-8.578 6.037-14.615l28.593-28.593q6.037-6.037 14.615-6.037 8.26 0
14.297 6.037L256 198.495l57.505-57.505q6.037-6.037 14.297-6.037 8.578 0 14.615 6.037l28.593 28.593q6.037 6.037
6.037 14.615zM500 256q0-66.401-32.724-122.477-32.724-56.075-88.799-88.799Q322.401 12 256 12q-66.401 0-122.477
32.724-56.075 32.724-88.799 88.799Q12 189.599 12 256q0 66.401 32.724 122.477 32.724 56.075 88.799 88.799Q189.599
500 256 500q66.401 0 122.477-32.724 56.075-32.724 88.799-88.799Q500 322.401 500 256z"></path>
</svg>`;
/**
* angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
const translateInOut = trigger("transition", [
state("*", style({ transform: "translateY(0)" })),
state("void", style({ transform: "translateY(0)" })),
state("bottomOut", style({ transform: "translateY(100%)" })),
state("topOut", style({ transform: "translateY(-100%)" })),
transition("void => topIn", [
style({ transform: "translateY(-100%)" }),
animate("1000ms ease-in-out"),
]),
transition("void => bottomIn", [
style({ transform: "translateY(100%)" }),
animate("1000ms ease-in-out"),
]),
transition("* => *", animate("1000ms ease-out")),
]);
/**
* angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
class CookieBannerComponent {
get learnMore() {
return this._learnMore;
}
set learnMore(value) {
this._learnMore = value !== null && `${value}` !== "false" ? value : null;
}
get awsomeCloseIcon() {
return this._awsomeCloseIcon;
}
set awsomeCloseIcon(value) {
this._awsomeCloseIcon =
value !== null && `${value}` !== "false" ? value : null;
}
get target() {
return this._target;
}
set target(value) {
this._target =
value !== null &&
`${value}` !== "false" &&
(`${value}` === "_blank" || `${value}` === "_self")
? value
: "_blank";
}
get position() {
return this._position;
}
set position(value) {
this._position =
value !== null &&
`${value}` !== "false" &&
(`${value}` === "top" || `${value}` === "bottom")
? value
: "bottom";
}
constructor(domSanitizer) {
this.domSanitizer = domSanitizer;
this.isSeen = new EventEmitter();
this.transition = "bottomIn";
this._position = "bottom";
this.cookieLawClass = true;
}
ngOnInit() {
this.noopener = this._target === "_blank";
this.transition = this.position === "bottom" ? "bottomIn" : "topIn";
if (this._awsomeCloseIcon) {
this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml(`<i class="fab ${this._awsomeCloseIcon}"></i>`);
}
else {
this.closeSvg = this.domSanitizer.bypassSecurityTrustHtml(closeIcon);
}
this.currentStyles = {
top: this.position === "top" ? "0" : null,
bottom: this.position === "top" ? "initial" : null,
};
}
afterDismissAnimation(evt) {
if (evt.toState === "topOut" || evt.toState === "bottomOut") {
this.isSeen.emit(true);
}
}
dismiss(evt) {
if (evt) {
evt.preventDefault();
}
this.transition = this.position === "top" ? "topOut" : "bottomOut";
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: CookieBannerComponent, selector: "cookie-banner-component", inputs: { learnMore: "learnMore", awsomeCloseIcon: "awsomeCloseIcon", target: "target", position: "position" }, outputs: { isSeen: "isSeen" }, host: { properties: { "class.cookie-banner": "this.cookieLawClass" } }, ngImport: i0, template: "<div\n class=\"cookie-banner-wrapper\"\n [ngStyle]=\"currentStyles\"\n [@transition]=\"transition\"\n (@transition.done)=\"afterDismissAnimation($event)\"\n>\n <div class=\"copy\">\n <span #ref><ng-content></ng-content></span>\n\n <span *ngIf=\"ref.childNodes.length == 0\">\n By continuing to browse the site, you're agreeing to our use of cookies.\n <span *ngIf=\"learnMore\">\n Learn more in our\n <a\n [href]=\"learnMore\"\n [target]=\"target\"\n [rel]=\"noopener ? 'noopener noreferrer' : null\"\n >privacy policy</a\n >.\n </span>\n </span>\n\n <a\n href=\"#\"\n role=\"button\"\n class=\"dismiss\"\n [innerHTML]=\"closeSvg\"\n (click)=\"dismiss($event)\"\n [attr.aria-label]=\"closeSvg\"\n ></a>\n </div>\n</div>\n", styles: [".cookie-banner-wrapper{background:#333;color:#bbb;display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;font-weight:200;line-height:20px;position:fixed;bottom:0;left:0;width:100%;z-index:999999999;font-smooth:always;-webkit-font-smoothing:antialiased}.cookie-banner-wrapper a{color:#bbb;-webkit-transition:color .2s;transition:color .2s}.cookie-banner-wrapper a:hover{color:#fff}.cookie-banner-wrapper a:hover svg{fill:#fff}.cookie-banner-wrapper .dismiss{display:block;box-sizing:border-box;padding:10px;position:absolute;top:0;right:10px;text-decoration:none;line-height:20px}.cookie-banner-wrapper .dismiss svg{display:block;fill:#bbb;width:20px;height:20px;-webkit-transition:fill .2s;transition:fill .2s}.cookie-banner-wrapper .copy{box-sizing:border-box;padding:10px 60px 10px 10px}.cookie-banner-wrapper .copy span{color:#fff;font-weight:400}.cookie-banner-wrapper .copy a{text-decoration:underline}.cookie-banner-wrapper .copy a:active,.copy a:hover{outline:0}@media (min-width: 600px){.cookie-banner-wrapper .copy{padding:20px 60px 20px 20px;font-size:18px;line-height:24px}.cookie-banner-wrapper .dismiss{top:10px;right:15px}.cookie-banner-wrapper .dismiss svg{width:24px;height:24px}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [translateInOut], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerComponent, decorators: [{
type: Component,
args: [{ selector: "cookie-banner-component", animations: [translateInOut], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"cookie-banner-wrapper\"\n [ngStyle]=\"currentStyles\"\n [@transition]=\"transition\"\n (@transition.done)=\"afterDismissAnimation($event)\"\n>\n <div class=\"copy\">\n <span #ref><ng-content></ng-content></span>\n\n <span *ngIf=\"ref.childNodes.length == 0\">\n By continuing to browse the site, you're agreeing to our use of cookies.\n <span *ngIf=\"learnMore\">\n Learn more in our\n <a\n [href]=\"learnMore\"\n [target]=\"target\"\n [rel]=\"noopener ? 'noopener noreferrer' : null\"\n >privacy policy</a\n >.\n </span>\n </span>\n\n <a\n href=\"#\"\n role=\"button\"\n class=\"dismiss\"\n [innerHTML]=\"closeSvg\"\n (click)=\"dismiss($event)\"\n [attr.aria-label]=\"closeSvg\"\n ></a>\n </div>\n</div>\n", styles: [".cookie-banner-wrapper{background:#333;color:#bbb;display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;font-weight:200;line-height:20px;position:fixed;bottom:0;left:0;width:100%;z-index:999999999;font-smooth:always;-webkit-font-smoothing:antialiased}.cookie-banner-wrapper a{color:#bbb;-webkit-transition:color .2s;transition:color .2s}.cookie-banner-wrapper a:hover{color:#fff}.cookie-banner-wrapper a:hover svg{fill:#fff}.cookie-banner-wrapper .dismiss{display:block;box-sizing:border-box;padding:10px;position:absolute;top:0;right:10px;text-decoration:none;line-height:20px}.cookie-banner-wrapper .dismiss svg{display:block;fill:#bbb;width:20px;height:20px;-webkit-transition:fill .2s;transition:fill .2s}.cookie-banner-wrapper .copy{box-sizing:border-box;padding:10px 60px 10px 10px}.cookie-banner-wrapper .copy span{color:#fff;font-weight:400}.cookie-banner-wrapper .copy a{text-decoration:underline}.cookie-banner-wrapper .copy a:active,.copy a:hover{outline:0}@media (min-width: 600px){.cookie-banner-wrapper .copy{padding:20px 60px 20px 20px;font-size:18px;line-height:24px}.cookie-banner-wrapper .dismiss{top:10px;right:15px}.cookie-banner-wrapper .dismiss svg{width:24px;height:24px}}\n"] }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { cookieLawClass: [{
type: HostBinding,
args: ["class.cookie-banner"]
}], learnMore: [{
type: Input
}], awsomeCloseIcon: [{
type: Input
}], target: [{
type: Input
}], position: [{
type: Input
}], isSeen: [{
type: Output
}] } });
/**
* angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
class CookieBannerContainerComponent {
get cookieLawSeen() {
return this.cookieLawService.seen(this.name);
}
constructor(cookieLawService) {
this.cookieLawService = cookieLawService;
this.isSeen = new EventEmitter();
this.name = "cookieLawSeen"; // set a default cookie name if not provided
this.seen = true;
}
ngOnInit() {
this.seen = this.cookieLawService.seen(this.name);
}
hasBeenDismissed() {
this.cookieLawService.storeCookie(this.name, this.expiration);
this.seen = true;
this.isSeen.emit(true);
}
dismiss() {
this.cookieLawComponent.dismiss();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerContainerComponent, deps: [{ token: Angular2CookieLawBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: CookieBannerContainerComponent, selector: "cookie-banner", inputs: { name: "name", learnMore: "learnMore", target: "target", position: "position", expiration: "expiration", awsomeCloseIcon: "awsomeCloseIcon" }, outputs: { isSeen: "isSeen" }, host: { properties: { "attr.seen": "this.seen" } }, viewQueries: [{ propertyName: "cookieLawComponent", first: true, predicate: CookieBannerComponent, descendants: true }], ngImport: i0, template: `
<cookie-banner-component
*ngIf="!seen"
[awsomeCloseIcon]="awsomeCloseIcon"
[learnMore]="learnMore"
[target]="target"
[position]="position"
(isSeen)="hasBeenDismissed()"
>
<ng-content></ng-content>
</cookie-banner-component>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CookieBannerComponent, selector: "cookie-banner-component", inputs: ["learnMore", "awsomeCloseIcon", "target", "position"], outputs: ["isSeen"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerContainerComponent, decorators: [{
type: Component,
args: [{
selector: "cookie-banner",
template: `
<cookie-banner-component
*ngIf="!seen"
[awsomeCloseIcon]="awsomeCloseIcon"
[learnMore]="learnMore"
[target]="target"
[position]="position"
(isSeen)="hasBeenDismissed()"
>
<ng-content></ng-content>
</cookie-banner-component>
`,
}]
}], ctorParameters: () => [{ type: Angular2CookieLawBannerService }], propDecorators: { seen: [{
type: HostBinding,
args: ["attr.seen"]
}], cookieLawComponent: [{
type: ViewChild,
args: [CookieBannerComponent]
}], name: [{
type: Input
}], learnMore: [{
type: Input
}], target: [{
type: Input
}], position: [{
type: Input
}], expiration: [{
type: Input
}], awsomeCloseIcon: [{
type: Input
}], isSeen: [{
type: Output
}] } });
/**
* angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
class CookieBannerModule {
constructor(parentModule) {
if (parentModule) {
throw new Error("CookieBannerModule is already loaded. Import it in the AppModule only");
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerModule, deps: [{ token: CookieBannerModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerModule, declarations: [CookieBannerComponent, CookieBannerContainerComponent], imports: [CommonModule], exports: [CookieBannerContainerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: CookieBannerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [CookieBannerComponent, CookieBannerContainerComponent],
exports: [CookieBannerContainerComponent],
}]
}], ctorParameters: () => [{ type: CookieBannerModule, decorators: [{
type: Optional
}, {
type: SkipSelf
}] }] });
/*
* angular2-cookie-law-banner
* Public API Surface of angular2-cookie-law-banner
*
* Copyright 2016-2018, @jwala-anirudh, All rights reserved.
*
* @author: @jwala-anirudh <anirudhjwala@gmail.com>
*/
/**
* Generated bundle index. Do not edit.
*/
export { Angular2CookieLawBannerService, CookieBannerComponent, CookieBannerContainerComponent, CookieBannerModule };
//# sourceMappingURL=angular2-cookie-law-banner.mjs.map