diff --git a/master/41.1ba77862c3022434.js b/master/41.1ba77862c3022434.js deleted file mode 100644 index e068fb31..00000000 --- a/master/41.1ba77862c3022434.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkng_vcl_demo=self.webpackChunkng_vcl_demo||[]).push([[41],{2041:(p,r,t)=>{t.r(r),t.d(r,{LayerDemoModule:()=>O,demo:()=>L});var c=t(3339),f=t(177),i=t(3323),h=t(9042),e=t(3953),d=t(8070),v=t(2024),y=t(5566);let g=(()=>{class o{constructor(n){this.layer=n}get title(){return this.layer.data.title}close(n){this.layer.close({value:n})}static#e=this.\u0275fac=function(a){return new(a||o)(e.rXU(i.eB5))};static#n=this.\u0275cmp=e.VBU({type:o,selectors:[["ng-component"]],decls:8,vars:2,consts:[[3,"close","showCloseButton"],["vcl-button","","vclPanelFooterButton","",1,"transparent","outline",3,"click"],["vcl-button","","vclPanelFooterButton","",1,"emphasized",3,"click"]],template:function(a,l){1&a&&(e.j41(0,"vcl-panel-dialog",0),e.bIt("close",function(){return l.close()}),e.j41(1,"vcl-panel-title"),e.EFF(2),e.k0s(),e.EFF(3," bar layer content "),e.j41(4,"button",1),e.bIt("click",function(){return l.close()}),e.EFF(5,"Close Layer"),e.k0s(),e.j41(6,"button",2),e.bIt("click",function(){return l.close("data")}),e.EFF(7,"Close Layer with result"),e.k0s()()),2&a&&(e.Y8G("showCloseButton",!0),e.R7$(2),e.JRh(l.title))},dependencies:[d.Q,v.g,y.EA,y.f8,y.Qq],encapsulation:2})}return o})();var B=t(7987);function k(o,u){if(1&o){const n=e.RV6();e.j41(0,"button",7),e.bIt("click",function(){e.eBV(n);const l=e.XpG();return e.Njj(l.decline())}),e.EFF(1,"Decline"),e.k0s()}}let R=(()=>{class o{constructor(n){this.layer=n,this._hostClasses=!0}accept(){this.layer.nag(),this.layer.close({accept:!0})}decline(){this.layer.close({accept:!1})}static#e=this.\u0275fac=function(a){return new(a||o)(e.rXU(i.eB5))};static#n=this.\u0275cmp=e.VBU({type:o,selectors:[["ng-component"]],hostVars:8,hostBindings:function(a,l){2&a&&e.AVh("nag",l._hostClasses)("container",l._hostClasses)("row",l._hostClasses)("justify-center",l._hostClasses)},decls:11,vars:1,consts:[[1,"layout-width","row","center"],[1,"flex","layout-three"],["href","#"],[1,"row","justify-center","center","gutter-margin-l-r"],[1,"loose-button-group"],["vcl-button","","type","button",3,"click",4,"ngIf"],["vcl-button","","type","button",1,"emphasized",3,"click"],["vcl-button","","type","button",3,"click"]],template:function(a,l){1&a&&(e.j41(0,"div",0)(1,"div",1),e.EFF(2," Cookies and similar technologies help us deliver our services. By using our services, you agree to our use of cookies. You can find further information about the use of Cookies on this website in our "),e.j41(3,"a",2),e.EFF(4,"privacy policy"),e.k0s(),e.EFF(5,". "),e.k0s(),e.j41(6,"div",3)(7,"div",4),e.DNE(8,k,2,0,"button",5),e.j41(9,"button",6),e.bIt("click",function(){return l.accept()}),e.EFF(10,"Accept"),e.k0s()()()()),2&a&&(e.R7$(8),e.Y8G("ngIf",l.layer.data.allowDecline))},dependencies:[f.bT,d.Q],styles:["[_nghost-%COMP%]{width:100%}"]})}return o})(),b=(()=>{class o extends i.eB5{constructor(n,a){super(n),this.overlay=a}getComponent(){return R}createLayerConfig(n){return super.createLayerConfig({closeOnEscape:!1,hasBackdrop:!1,width:"100%",positionStrategy:this.overlay.position().global().bottom().centerHorizontally()},n)}nag(){console.log("Nag...")}static#e=this.\u0275fac=function(a){return new(a||o)(e.KVO(e.zZn),e.KVO(B.hJ))};static#n=this.\u0275prov=e.jDH({token:o,factory:o.\u0275fac,providedIn:"root"})}return o})();var j=t(6182);const F=["tplLayerRef"];function T(o,u){if(1&o){const n=e.RV6();e.j41(0,"vcl-panel-dialog",4),e.bIt("close",function(){e.eBV(n),e.XpG();const l=e.sdS(19);return e.Njj(l.close())}),e.j41(1,"vcl-panel-title"),e.EFF(2),e.k0s(),e.EFF(3," Press escape or click outside of layer to close"),e.nrm(4,"br")(5,"br"),e.j41(6,"button",5),e.bIt("click",function(){e.eBV(n),e.XpG();const l=e.sdS(19);return e.Njj(l.close())}),e.EFF(7,"Close layer"),e.k0s()()}if(2&o){const n=u.title;e.Y8G("showCloseButton",!0),e.R7$(2),e.JRh(n)}}function _(o,u){if(1&o){const n=e.RV6();e.j41(0,"vcl-panel-dialog",4),e.bIt("close",function(){e.eBV(n);const l=e.XpG();return e.Njj(l.tplLayer.close())}),e.j41(1,"vcl-panel-title"),e.EFF(2),e.k0s(),e.EFF(3," Press escape or click outside of layer to close"),e.nrm(4,"br")(5,"br"),e.j41(6,"button",5),e.bIt("click",function(){e.eBV(n);const l=e.XpG();return e.Njj(l.tplLayer.close())}),e.EFF(7,"Close layer"),e.k0s()()}if(2&o){const n=u.title;e.Y8G("showCloseButton",!0),e.R7$(2),e.JRh(n)}}let C=0,E=(()=>{class o{constructor(n,a,l){this.nagLayer=n,this.layerService=a,this.viewContainerRef=l,this.barLayer=a.create(g,{closeOnBackdropClick:!1,closeOnEscape:!1}),this.barLayerWithOutZoom=a.create(g,{closeOnBackdropClick:!1,closeOnEscape:!1})}ngAfterViewInit(){this.tplLayer=this.layerService.createTemplateLayer(this.tplLayerRef,this.viewContainerRef)}openBarComponent(){this.barLayer.open({data:{title:`bar component layer title (${C++})`}}).subscribe(n=>{console.log("Bar component result: "+n?.value)})}openBarWithZoomAnimationComponent(){this.barLayerWithOutZoom.open({data:{title:`bar component layer title (${C++})`},panelClass:"zoom"}).subscribe(n=>{console.log("Bar component result: "+n?.value)})}openNagLayer(){this.nagLayer.open({data:{allowDecline:!0}}).subscribe(n=>{n.accept?console.log("Accepted"):console.log("Declined")})}ngOnDestroy(){this.barLayer?.destroy(),this.barLayerWithOutZoom?.destroy()}static#e=this.\u0275fac=function(a){return new(a||o)(e.rXU(b),e.rXU(i.BY8),e.rXU(e.c1b))};static#n=this.\u0275cmp=e.VBU({type:o,selectors:[["ng-component"]],viewQuery:function(a,l){if(1&a&&e.GBs(F,5),2&a){let s;e.mGM(s=e.lsd())&&(l.tplLayerRef=s.first)}},decls:22,vars:0,consts:[["inlineLayer","vclLayer"],["tplLayerRef",""],["vcl-button","",3,"click"],["vclLayer",""],[3,"close","showCloseButton"],["vcl-button","","vclPanelFooterButton","",1,"transparent","outline",3,"click"]],template:function(a,l){if(1&a){const s=e.RV6();e.j41(0,"button",2),e.bIt("click",function(){e.eBV(s);const w=e.sdS(19);return e.Njj(w.open({data:{title:"Inline layer"}}))}),e.EFF(1,"Open inline layer"),e.k0s(),e.nrm(2,"br")(3,"br"),e.j41(4,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.tplLayer.open({data:{title:"Template layer"}}))}),e.EFF(5,"Open template layer"),e.k0s(),e.nrm(6,"br")(7,"br"),e.j41(8,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.openBarComponent())}),e.EFF(9,"Open bar component as layer"),e.k0s(),e.nrm(10,"br")(11,"br"),e.j41(12,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.openBarWithZoomAnimationComponent())}),e.EFF(13,"Open bar component as layer with Zoom animation"),e.k0s(),e.nrm(14,"br")(15,"br"),e.j41(16,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.openNagLayer())}),e.EFF(17,"Open nag layer"),e.k0s(),e.DNE(18,T,8,2,"ng-template",3,0,e.C5r)(20,_,8,2,"ng-template",null,1,e.C5r)}},dependencies:[j.P,d.Q,v.g,y.EA,y.f8,y.Qq],encapsulation:2})}return o})();const D='# vcl-layer\n\nAn overlay placed in the center of the screen.\nThe layer uses @angular/cdk\'s [overlay api](https://material.angular.io/cdk/overlay/api) for positioning.\n\n## Usage\n\n### The layer reference object\n\nA layer reference object extends from the `TemplateLayerRef` or `ComponentLayerRef` class which allows layer interaction like listening for events and opening/closing the layer.\nBoth classes implement the `Layer` interface`\n\nA layer reference can be created via the `vcl-layer` component or with the `LayerService` from a component class:\n\n#### Inline layer (TemplateLayerRef)\n\n```html\n\n\n\n \x3c!-- myTemplateLayer is of type TemplateLayerRef --\x3e\n
\n
\n

\n Content\n \n

\n
\n \n\n```\n\n#### Component layer (ComponentLayerRef)\n\nAny component can inject the ComponentLayerRef class. \nIt will be available if the component is opened via the layer service\n\n```ts\nimport { ComponentLayerRef } from \'@vcl/ng-vcl\';\n\n// This is just a common component\n@Component({ ... })\nexport class MyLayerComponent {\n // layer is a reference to the current layer.\n // Its value is null when the component is not used as a layer\n constructor(@Optional() private layer?: ComponentLayerRef) { }\n\n close() {\n // Close the layer\n this.layer.close(\'result\');\n }\n}\n```\n\nAny component can be opened with the layer service.\nMake sure the component is provided in your module as part of the `entryComponents`.\n\n```ts\nimport { LayerService } from \'@vcl/ng-vcl\';\nimport { MyLayerComponent } from \'./my-layer.component\';\n\n@Component({ ... })\nexport class DemoComponent {\n constructor(\n private layerService: LayerService // This is the reference to the component layer\n ) {}\n\n openComponentLayer() {\n const layer = this.layerService.open(MyLayerComponent);\n layer.afterClose.subscribe(result => {\n console.log(result);\n });\n }\n}\n```\n\n### API\n\n```ts\nexport interface Layer {\n readonly afterClose: Observable;\n readonly isVisible: boolean;\n readonly data: any;\n toggle(): void;\n open(config?: LayerConfig): void;\n close(result?: any): void;\n destroy(): void;\n}\n\nclass LayerService {\n create(component: ComponentType, config?: LayerConfig): ComponentLayerRef;\n open(component: ComponentType, config?: LayerConfig): ComponentLayerRef;\n}\n\nexport class LayerConfig extends OverlayConfig {\n data?: TData;\n closeOnBackdropClick?: boolean;\n closeOnEscape?: boolean;\n}\n\n```\n\n#### vcl-layer config attributes\n\n| Name | Type | Default | Description\n| ------------ | ----------- | -------- | --------------\n| `closeOnBackdropClick` | boolean | true | Wether a the layer should close when clicked outside\n| `closeOnEscape` | boolean | true | Wether a the layer should close when escape is pressed\n| `positionStrategy` | PositionStrategy | [GlobalPositionStrategy](https://material.angular.io/cdk/overlay/overview#configuring-an-overlay) | Strategy with which to position the overlay.\n';function L(){return{label:"Layer",tabs:{Demo:E,"README.md":{type:"md",content:D},"demo.component.html":{type:"html",content:t(5142)},"demo.component.ts":{type:"ts",content:t(8610)},"nag.component.html":{type:"html",content:t(653)},"nag.component.ts":{type:"ts",content:t(1174)},"bar.component.html":{type:"html",content:t(4018)},"bar.component.ts":{type:"ts",content:t(7438)}}}}let O=(()=>{class o{static#e=this.\u0275fac=function(a){return new(a||o)};static#n=this.\u0275mod=e.$C({type:o});static#t=this.\u0275inj=e.G2t({providers:[b],imports:[f.MD,h.q,i.n0Y,i.e7Q,i.j2$,i.Q$9,c.iI.forChild([{path:"",component:h.D,data:{demo:L}}])]})}return o})()},4018:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c='\n {{title}}\n bar layer content\n \n \n\n'},7438:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c="import { Component } from '@angular/core';\nimport { ComponentLayerRef } from '@vcl/ng-vcl';\n\n@Component({\n templateUrl: 'bar.component.html',\n})\nexport class BarComponent {\n constructor(private layer: ComponentLayerRef) {}\n\n get title() {\n return this.layer.data.title;\n }\n\n close(value?: string) {\n this.layer.close({\n value,\n });\n }\n}\n"},5142:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c='\n

\n\n

\n\n

\n\n

\n\n\n\n \n {{title}}\n Press escape or click outside of layer to close

\n \n
\n
\n\n\n \n {{title}}\n Press escape or click outside of layer to close

\n \n
\n
\n'},8610:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c="import {\n Component,\n AfterViewInit,\n ViewChild,\n ViewContainerRef,\n TemplateRef,\n} from '@angular/core';\nimport { LayerService, LayerRef } from '@vcl/ng-vcl';\nimport { BarComponent } from './bar.component';\nimport { NagLayer } from './nag.component';\n\nlet i = 0;\n\n@Component({\n templateUrl: 'demo.component.html',\n})\nexport class LayerDemoComponent implements AfterViewInit {\n barLayer: LayerRef;\n barLayerWithOutZoom: LayerRef;\n\n @ViewChild('tplLayerRef')\n tplLayerRef: TemplateRef;\n\n tplLayer: LayerRef;\n\n constructor(\n private nagLayer: NagLayer,\n private layerService: LayerService,\n private viewContainerRef: ViewContainerRef\n ) {\n this.barLayer = layerService.create(BarComponent, {\n closeOnBackdropClick: false,\n closeOnEscape: false,\n });\n\n this.barLayerWithOutZoom = layerService.create(BarComponent, {\n closeOnBackdropClick: false,\n closeOnEscape: false,\n });\n }\n ngAfterViewInit(): void {\n this.tplLayer = this.layerService.createTemplateLayer(\n this.tplLayerRef,\n this.viewContainerRef\n );\n }\n\n openBarComponent() {\n this.barLayer\n .open({\n data: {\n title: `bar component layer title (${i++})`,\n },\n })\n .subscribe(result => {\n console.log('Bar component result: ' + result?.value);\n });\n }\n\n openBarWithZoomAnimationComponent() {\n this.barLayerWithOutZoom\n .open({\n data: {\n title: `bar component layer title (${i++})`,\n },\n panelClass: 'zoom'\n })\n .subscribe(result => {\n console.log('Bar component result: ' + result?.value);\n });\n }\n\n openNagLayer() {\n this.nagLayer\n .open({\n data: {\n allowDecline: true,\n },\n })\n .subscribe(result => {\n if (result.accept) {\n console.log('Accepted');\n } else {\n console.log('Declined');\n }\n });\n }\n\n ngOnDestroy() {\n this.barLayer?.destroy();\n this.barLayerWithOutZoom?.destroy();\n }\n}\n"},653:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c='
\n
\n Cookies and similar technologies help us deliver our services. By using our services,\n you agree to our use of cookies. You can find further information about the\n use of Cookies on this website in our privacy policy.\n
\n
\n
\n \n \n
\n
\n
\n'},1174:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c="import {\n Component,\n Injector,\n Injectable,\n Inject,\n forwardRef,\n HostBinding,\n} from '@angular/core';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentLayerRef, LayerConfig } from '@vcl/ng-vcl';\n\nexport interface NagLayerData {\n allowDecline: boolean;\n}\n\nexport interface NagLayerResult {\n accept: boolean;\n}\n\nexport interface INagLayer\n extends ComponentLayerRef {\n nag(): void;\n}\n\n@Component({\n templateUrl: 'nag.component.html',\n styles: [\n `\n :host {\n width: 100%;\n }\n `,\n ],\n})\nexport class NagComponent {\n // Inject the ComponentLayerRef and use an interface for typings\n // Injecting with forwardRef(() => NagLayer) would result in an `Cannot access 'NagLayer' before initialization` at runtime when targeting es2015\n // See https://github.com/angular/angular/issues/30106\n constructor(@Inject(ComponentLayerRef) public layer: INagLayer) {}\n\n @HostBinding('class.nag')\n @HostBinding('class.container')\n @HostBinding('class.row')\n @HostBinding('class.justify-center')\n _hostClasses = true;\n\n accept() {\n this.layer.nag();\n this.layer.close({\n accept: true,\n });\n }\n\n decline() {\n this.layer.close({\n accept: false,\n });\n }\n}\n\n@Injectable({\n providedIn: 'root',\n})\nexport class NagLayer\n extends ComponentLayerRef\n implements INagLayer\n{\n constructor(injector: Injector, private overlay: Overlay) {\n super(injector);\n }\n\n // Return the layer component\n getComponent() {\n return NagComponent;\n }\n\n // Overrides default configuration\n createLayerConfig(config?: LayerConfig): LayerConfig {\n return super.createLayerConfig(\n {\n closeOnEscape: false,\n hasBackdrop: false,\n width: '100%',\n positionStrategy: this.overlay\n .position()\n .global()\n .bottom()\n .centerHorizontally(),\n },\n config\n );\n }\n\n nag(): void {\n console.log('Nag...');\n }\n}\n"}}]); \ No newline at end of file diff --git a/master/41.4a171effe2295543.js b/master/41.4a171effe2295543.js new file mode 100644 index 00000000..65c69ad7 --- /dev/null +++ b/master/41.4a171effe2295543.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkng_vcl_demo=self.webpackChunkng_vcl_demo||[]).push([[41],{2041:(p,r,t)=>{t.r(r),t.d(r,{LayerDemoModule:()=>O,demo:()=>L});var c=t(3339),d=t(177),i=t(3323),v=t(9042),e=t(3953),f=t(8070),h=t(2024),u=t(5566);let g=(()=>{class o{constructor(n){this.layer=n}get title(){return this.layer.data.title}close(n){this.layer.close({value:n})}static#e=this.\u0275fac=function(a){return new(a||o)(e.rXU(i.eB5))};static#n=this.\u0275cmp=e.VBU({type:o,selectors:[["ng-component"]],decls:8,vars:2,consts:[[3,"close","showCloseButton"],["vcl-button","","vclPanelFooterButton","",1,"transparent","outline",3,"click"],["vcl-button","","vclPanelFooterButton","",1,"emphasized",3,"click"]],template:function(a,l){1&a&&(e.j41(0,"vcl-panel-dialog",0),e.bIt("close",function(){return l.close()}),e.j41(1,"vcl-panel-title"),e.EFF(2),e.k0s(),e.EFF(3," bar layer content "),e.j41(4,"button",1),e.bIt("click",function(){return l.close()}),e.EFF(5,"Close Layer"),e.k0s(),e.j41(6,"button",2),e.bIt("click",function(){return l.close("data")}),e.EFF(7,"Close Layer with result"),e.k0s()()),2&a&&(e.Y8G("showCloseButton",!0),e.R7$(2),e.JRh(l.title))},dependencies:[f.Q,h.g,u.EA,u.f8,u.Qq],encapsulation:2})}return o})();var B=t(7987);function k(o,y){if(1&o){const n=e.RV6();e.j41(0,"button",7),e.bIt("click",function(){e.eBV(n);const l=e.XpG();return e.Njj(l.decline())}),e.EFF(1,"Decline"),e.k0s()}}let j=(()=>{class o{constructor(n){this.layer=n,this._hostClasses=!0}accept(){this.layer.nag(),this.layer.close({accept:!0})}decline(){this.layer.close({accept:!1})}static#e=this.\u0275fac=function(a){return new(a||o)(e.rXU(i.eB5))};static#n=this.\u0275cmp=e.VBU({type:o,selectors:[["ng-component"]],hostVars:8,hostBindings:function(a,l){2&a&&e.AVh("nag",l._hostClasses)("container",l._hostClasses)("row",l._hostClasses)("justify-center",l._hostClasses)},decls:11,vars:1,consts:[[1,"layout-width","row","center"],[1,"flex","layout-three"],["href","#"],[1,"row","justify-center","center","gutter-margin-l-r"],[1,"loose-button-group"],["vcl-button","","type","button",3,"click",4,"ngIf"],["vcl-button","","type","button",1,"emphasized",3,"click"],["vcl-button","","type","button",3,"click"]],template:function(a,l){1&a&&(e.j41(0,"div",0)(1,"div",1),e.EFF(2," Cookies and similar technologies help us deliver our services. By using our services, you agree to our use of cookies. You can find further information about the use of Cookies on this website in our "),e.j41(3,"a",2),e.EFF(4,"privacy policy"),e.k0s(),e.EFF(5,". "),e.k0s(),e.j41(6,"div",3)(7,"div",4),e.DNE(8,k,2,0,"button",5),e.j41(9,"button",6),e.bIt("click",function(){return l.accept()}),e.EFF(10,"Accept"),e.k0s()()()()),2&a&&(e.R7$(8),e.Y8G("ngIf",l.layer.data.allowDecline))},dependencies:[d.bT,f.Q],encapsulation:2})}return o})(),b=(()=>{class o extends i.eB5{constructor(n,a){super(n),this.overlay=a}getComponent(){return j}createLayerConfig(n){return super.createLayerConfig({closeOnEscape:!1,hasBackdrop:!1,width:"100%",positionStrategy:this.overlay.position().global().bottom().centerHorizontally()},n)}nag(){console.log("Nag...")}static#e=this.\u0275fac=function(a){return new(a||o)(e.KVO(e.zZn),e.KVO(B.hJ))};static#n=this.\u0275prov=e.jDH({token:o,factory:o.\u0275fac,providedIn:"root"})}return o})();var R=t(6182);const F=["tplLayerRef"];function T(o,y){if(1&o){const n=e.RV6();e.j41(0,"vcl-panel-dialog",4),e.bIt("close",function(){e.eBV(n),e.XpG();const l=e.sdS(19);return e.Njj(l.close())}),e.j41(1,"vcl-panel-title"),e.EFF(2),e.k0s(),e.EFF(3," Press escape or click outside of layer to close"),e.nrm(4,"br")(5,"br"),e.j41(6,"button",5),e.bIt("click",function(){e.eBV(n),e.XpG();const l=e.sdS(19);return e.Njj(l.close())}),e.EFF(7,"Close layer"),e.k0s()()}if(2&o){const n=y.title;e.Y8G("showCloseButton",!0),e.R7$(2),e.JRh(n)}}function E(o,y){if(1&o){const n=e.RV6();e.j41(0,"vcl-panel-dialog",4),e.bIt("close",function(){e.eBV(n);const l=e.XpG();return e.Njj(l.tplLayer.close())}),e.j41(1,"vcl-panel-title"),e.EFF(2),e.k0s(),e.EFF(3," Press escape or click outside of layer to close"),e.nrm(4,"br")(5,"br"),e.j41(6,"button",5),e.bIt("click",function(){e.eBV(n);const l=e.XpG();return e.Njj(l.tplLayer.close())}),e.EFF(7,"Close layer"),e.k0s()()}if(2&o){const n=y.title;e.Y8G("showCloseButton",!0),e.R7$(2),e.JRh(n)}}let C=0,_=(()=>{class o{constructor(n,a,l){this.nagLayer=n,this.layerService=a,this.viewContainerRef=l,this.barLayer=a.create(g,{closeOnBackdropClick:!1,closeOnEscape:!1}),this.barLayerWithOutZoom=a.create(g,{closeOnBackdropClick:!1,closeOnEscape:!1})}ngAfterViewInit(){this.tplLayer=this.layerService.createTemplateLayer(this.tplLayerRef,this.viewContainerRef)}openBarComponent(){this.barLayer.open({data:{title:`bar component layer title (${C++})`}}).subscribe(n=>{console.log("Bar component result: "+n?.value)})}openBarWithZoomAnimationComponent(){this.barLayerWithOutZoom.open({data:{title:`bar component layer title (${C++})`},panelClass:"zoom"}).subscribe(n=>{console.log("Bar component result: "+n?.value)})}openNagLayer(){this.nagLayer.open({data:{allowDecline:!0}}).subscribe(n=>{n.accept?console.log("Accepted"):console.log("Declined")})}ngOnDestroy(){this.barLayer?.destroy(),this.barLayerWithOutZoom?.destroy()}static#e=this.\u0275fac=function(a){return new(a||o)(e.rXU(b),e.rXU(i.BY8),e.rXU(e.c1b))};static#n=this.\u0275cmp=e.VBU({type:o,selectors:[["ng-component"]],viewQuery:function(a,l){if(1&a&&e.GBs(F,5),2&a){let s;e.mGM(s=e.lsd())&&(l.tplLayerRef=s.first)}},decls:22,vars:0,consts:[["inlineLayer","vclLayer"],["tplLayerRef",""],["vcl-button","",3,"click"],["vclLayer",""],[3,"close","showCloseButton"],["vcl-button","","vclPanelFooterButton","",1,"transparent","outline",3,"click"]],template:function(a,l){if(1&a){const s=e.RV6();e.j41(0,"button",2),e.bIt("click",function(){e.eBV(s);const N=e.sdS(19);return e.Njj(N.open({data:{title:"Inline layer"}}))}),e.EFF(1,"Open inline layer"),e.k0s(),e.nrm(2,"br")(3,"br"),e.j41(4,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.tplLayer.open({data:{title:"Template layer"}}))}),e.EFF(5,"Open template layer"),e.k0s(),e.nrm(6,"br")(7,"br"),e.j41(8,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.openBarComponent())}),e.EFF(9,"Open bar component as layer"),e.k0s(),e.nrm(10,"br")(11,"br"),e.j41(12,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.openBarWithZoomAnimationComponent())}),e.EFF(13,"Open bar component as layer with Zoom animation"),e.k0s(),e.nrm(14,"br")(15,"br"),e.j41(16,"button",2),e.bIt("click",function(){return e.eBV(s),e.Njj(l.openNagLayer())}),e.EFF(17,"Open nag layer"),e.k0s(),e.DNE(18,T,8,2,"ng-template",3,0,e.C5r)(20,E,8,2,"ng-template",null,1,e.C5r)}},dependencies:[R.P,f.Q,h.g,u.EA,u.f8,u.Qq],encapsulation:2})}return o})();const D='# vcl-layer\n\nAn overlay placed in the center of the screen.\nThe layer uses @angular/cdk\'s [overlay api](https://material.angular.io/cdk/overlay/api) for positioning.\n\n## Usage\n\n### The layer reference object\n\nA layer reference object extends from the `TemplateLayerRef` or `ComponentLayerRef` class which allows layer interaction like listening for events and opening/closing the layer.\nBoth classes implement the `Layer` interface`\n\nA layer reference can be created via the `vcl-layer` component or with the `LayerService` from a component class:\n\n#### Inline layer (TemplateLayerRef)\n\n```html\n\n\n\n \x3c!-- myTemplateLayer is of type TemplateLayerRef --\x3e\n
\n
\n

\n Content\n \n

\n
\n \n\n```\n\n#### Component layer (ComponentLayerRef)\n\nAny component can inject the ComponentLayerRef class. \nIt will be available if the component is opened via the layer service\n\n```ts\nimport { ComponentLayerRef } from \'@vcl/ng-vcl\';\n\n// This is just a common component\n@Component({ ... })\nexport class MyLayerComponent {\n // layer is a reference to the current layer.\n // Its value is null when the component is not used as a layer\n constructor(@Optional() private layer?: ComponentLayerRef) { }\n\n close() {\n // Close the layer\n this.layer.close(\'result\');\n }\n}\n```\n\nAny component can be opened with the layer service.\nMake sure the component is provided in your module as part of the `entryComponents`.\n\n```ts\nimport { LayerService } from \'@vcl/ng-vcl\';\nimport { MyLayerComponent } from \'./my-layer.component\';\n\n@Component({ ... })\nexport class DemoComponent {\n constructor(\n private layerService: LayerService // This is the reference to the component layer\n ) {}\n\n openComponentLayer() {\n const layer = this.layerService.open(MyLayerComponent);\n layer.afterClose.subscribe(result => {\n console.log(result);\n });\n }\n}\n```\n\n### API\n\n```ts\nexport interface Layer {\n readonly afterClose: Observable;\n readonly isVisible: boolean;\n readonly data: any;\n toggle(): void;\n open(config?: LayerConfig): void;\n close(result?: any): void;\n destroy(): void;\n}\n\nclass LayerService {\n create(component: ComponentType, config?: LayerConfig): ComponentLayerRef;\n open(component: ComponentType, config?: LayerConfig): ComponentLayerRef;\n}\n\nexport class LayerConfig extends OverlayConfig {\n data?: TData;\n closeOnBackdropClick?: boolean;\n closeOnEscape?: boolean;\n}\n\n```\n\n#### vcl-layer config attributes\n\n| Name | Type | Default | Description\n| ------------ | ----------- | -------- | --------------\n| `closeOnBackdropClick` | boolean | true | Wether a the layer should close when clicked outside\n| `closeOnEscape` | boolean | true | Wether a the layer should close when escape is pressed\n| `positionStrategy` | PositionStrategy | [GlobalPositionStrategy](https://material.angular.io/cdk/overlay/overview#configuring-an-overlay) | Strategy with which to position the overlay.\n';function L(){return{label:"Layer",tabs:{Demo:_,"README.md":{type:"md",content:D},"demo.component.html":{type:"html",content:t(5142)},"demo.component.ts":{type:"ts",content:t(8610)},"nag.component.html":{type:"html",content:t(653)},"nag.component.ts":{type:"ts",content:t(1174)},"bar.component.html":{type:"html",content:t(4018)},"bar.component.ts":{type:"ts",content:t(7438)}}}}let O=(()=>{class o{static#e=this.\u0275fac=function(a){return new(a||o)};static#n=this.\u0275mod=e.$C({type:o});static#t=this.\u0275inj=e.G2t({providers:[b],imports:[d.MD,v.q,i.n0Y,i.e7Q,i.j2$,i.Q$9,c.iI.forChild([{path:"",component:v.D,data:{demo:L}}])]})}return o})()},4018:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c='\n {{title}}\n bar layer content\n \n \n\n'},7438:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c="import { Component } from '@angular/core';\nimport { ComponentLayerRef } from '@vcl/ng-vcl';\n\n@Component({\n templateUrl: 'bar.component.html',\n})\nexport class BarComponent {\n constructor(private layer: ComponentLayerRef) {}\n\n get title() {\n return this.layer.data.title;\n }\n\n close(value?: string) {\n this.layer.close({\n value,\n });\n }\n}\n"},5142:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c='\n

\n\n

\n\n

\n\n

\n\n\n\n \n {{title}}\n Press escape or click outside of layer to close

\n \n
\n
\n\n\n \n {{title}}\n Press escape or click outside of layer to close

\n \n
\n
\n'},8610:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c="import {\n Component,\n AfterViewInit,\n ViewChild,\n ViewContainerRef,\n TemplateRef,\n} from '@angular/core';\nimport { LayerService, LayerRef } from '@vcl/ng-vcl';\nimport { BarComponent } from './bar.component';\nimport { NagLayer } from './nag.component';\n\nlet i = 0;\n\n@Component({\n templateUrl: 'demo.component.html',\n})\nexport class LayerDemoComponent implements AfterViewInit {\n barLayer: LayerRef;\n barLayerWithOutZoom: LayerRef;\n\n @ViewChild('tplLayerRef')\n tplLayerRef: TemplateRef;\n\n tplLayer: LayerRef;\n\n constructor(\n private nagLayer: NagLayer,\n private layerService: LayerService,\n private viewContainerRef: ViewContainerRef\n ) {\n this.barLayer = layerService.create(BarComponent, {\n closeOnBackdropClick: false,\n closeOnEscape: false,\n });\n\n this.barLayerWithOutZoom = layerService.create(BarComponent, {\n closeOnBackdropClick: false,\n closeOnEscape: false,\n });\n }\n ngAfterViewInit(): void {\n this.tplLayer = this.layerService.createTemplateLayer(\n this.tplLayerRef,\n this.viewContainerRef\n );\n }\n\n openBarComponent() {\n this.barLayer\n .open({\n data: {\n title: `bar component layer title (${i++})`,\n },\n })\n .subscribe(result => {\n console.log('Bar component result: ' + result?.value);\n });\n }\n\n openBarWithZoomAnimationComponent() {\n this.barLayerWithOutZoom\n .open({\n data: {\n title: `bar component layer title (${i++})`,\n },\n panelClass: 'zoom'\n })\n .subscribe(result => {\n console.log('Bar component result: ' + result?.value);\n });\n }\n\n openNagLayer() {\n this.nagLayer\n .open({\n data: {\n allowDecline: true,\n },\n })\n .subscribe(result => {\n if (result.accept) {\n console.log('Accepted');\n } else {\n console.log('Declined');\n }\n });\n }\n\n ngOnDestroy() {\n this.barLayer?.destroy();\n this.barLayerWithOutZoom?.destroy();\n }\n}\n"},653:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c='
\n
\n Cookies and similar technologies help us deliver our services. By using our services,\n you agree to our use of cookies. You can find further information about the\n use of Cookies on this website in our privacy policy.\n
\n
\n
\n \n \n
\n
\n
\n'},1174:(p,r,t)=>{t.r(r),t.d(r,{default:()=>c});const c="import {\n Component,\n Injector,\n Injectable,\n Inject,\n HostBinding,\n} from '@angular/core';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentLayerRef, LayerConfig } from '@vcl/ng-vcl';\n\nexport interface NagLayerData {\n allowDecline: boolean;\n}\n\nexport interface NagLayerResult {\n accept: boolean;\n}\n\nexport interface INagLayer\n extends ComponentLayerRef {\n nag(): void;\n}\n\n@Component({\n templateUrl: 'nag.component.html',\n})\nexport class NagComponent {\n // Inject the ComponentLayerRef and use an interface for typings\n // Injecting with forwardRef(() => NagLayer) would result in an `Cannot access 'NagLayer' before initialization` at runtime when targeting es2015\n // See https://github.com/angular/angular/issues/30106\n constructor(@Inject(ComponentLayerRef) public layer: INagLayer) {}\n\n @HostBinding('class.nag')\n @HostBinding('class.container')\n @HostBinding('class.row')\n @HostBinding('class.justify-center')\n _hostClasses = true;\n\n accept() {\n this.layer.nag();\n this.layer.close({\n accept: true,\n });\n }\n\n decline() {\n this.layer.close({\n accept: false,\n });\n }\n}\n\n@Injectable({\n providedIn: 'root',\n})\nexport class NagLayer\n extends ComponentLayerRef\n implements INagLayer\n{\n constructor(\n injector: Injector,\n private overlay: Overlay\n ) {\n super(injector);\n }\n\n // Return the layer component\n getComponent() {\n return NagComponent;\n }\n\n // Overrides default configuration\n createLayerConfig(config?: LayerConfig): LayerConfig {\n return super.createLayerConfig(\n {\n closeOnEscape: false,\n hasBackdrop: false,\n width: '100%',\n positionStrategy: this.overlay\n .position()\n .global()\n .bottom()\n .centerHorizontally(),\n },\n config\n );\n }\n\n nag(): void {\n console.log('Nag...');\n }\n}\n"}}]); \ No newline at end of file diff --git a/master/index.html b/master/index.html index ec777a4a..b90a9508 100644 --- a/master/index.html +++ b/master/index.html @@ -16,5 +16,5 @@ - + diff --git a/master/runtime.b00183f85c8a550f.js b/master/runtime.20d88e4b2c2de9e2.js similarity index 98% rename from master/runtime.b00183f85c8a550f.js rename to master/runtime.20d88e4b2c2de9e2.js index c7501838..ea445300 100644 --- a/master/runtime.b00183f85c8a550f.js +++ b/master/runtime.20d88e4b2c2de9e2.js @@ -1 +1 @@ -(()=>{"use strict";var e,v={},m={};function a(e){var f=m[e];if(void 0!==f)return f.exports;var r=m[e]={exports:{}};return v[e](r,r.exports,a),r.exports}a.m=v,e=[],a.O=(f,r,n,c)=>{if(!r){var t=1/0;for(d=0;d=c)&&Object.keys(a.O).every(p=>a.O[p](r[o]))?r.splice(o--,1):(u=!1,c0&&e[d-1][2]>c;d--)e[d]=e[d-1];e[d]=[r,n,c]},a.n=e=>{var f=e&&e.__esModule?()=>e.default:()=>e;return a.d(f,{a:f}),f},a.d=(e,f)=>{for(var r in f)a.o(f,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:f[r]})},a.f={},a.e=e=>Promise.all(Object.keys(a.f).reduce((f,r)=>(a.f[r](e,f),f),[])),a.u=e=>(76===e?"common":e)+"."+{19:"89a5aaa4d1458a21",41:"1ba77862c3022434",67:"583d5190b7dfad39",76:"03129cb1d8fef6dc",80:"208857a2c10dfb91",86:"13eba6cbeff8d282",131:"3d3de0f472198ddd",146:"c9fe1a5bcad3c5b7",237:"82a2bbb27d8687a4",243:"f29cf280caeffb3a",268:"5840b7c67b1f44da",314:"efc9f99e0fbbc1fb",337:"afd2ce83981406c5",338:"afc4e2237a9f9d7a",363:"cb493e87c3090037",396:"3e48541fd339bbf4",409:"d5dbd5815e7cd93e",414:"c47e05af51a53ce9",448:"a4ebea530a912b1c",586:"3f1b763f7ef92913",617:"41aa17882e3b6c02",627:"a35e07d4aac31a4c",638:"302e9f157440354a",661:"64c13699471ed821",673:"aacbf257480a8d37",695:"b4f683036e58b613",701:"bdb11bf2ecd3a184",708:"bc73bad62254bdd5",754:"9f6a0a75ad658714",835:"cf5ca3900e2a6f57",855:"603111e463eac387",863:"99f77a373057e542",878:"95ec4c94872bd578",897:"97a637e2db4a4670",933:"14a18dc74c9a345b",934:"616731b95b814f41",947:"f92ec5c505677166",949:"ef3fca051821880d",977:"28fa0f52ff3c6a46",979:"d64f353261d6eb10",980:"4dc7e12aed8d92a9"}[e]+".js",a.miniCssF=e=>{},a.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="ng-vcl-demo:";a.l=(r,n,c,d)=>{if(e[r])e[r].push(n);else{var t,u;if(void 0!==c)for(var o=document.getElementsByTagName("script"),b=0;b{t.onerror=t.onload=null,clearTimeout(s);var _=e[r];if(delete e[r],t.parentNode&&t.parentNode.removeChild(t),_&&_.forEach(h=>h(p)),g)return g(p)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),u&&document.head.appendChild(t)}}})(),a.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;a.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),a.tu=e=>a.tt().createScriptURL(e),a.p="",(()=>{var e={121:0};a.f.j=(n,c)=>{var d=a.o(e,n)?e[n]:void 0;if(0!==d)if(d)c.push(d[2]);else if(121!=n){var t=new Promise((i,l)=>d=e[n]=[i,l]);c.push(d[2]=t);var u=a.p+a.u(n),o=new Error;a.l(u,i=>{if(a.o(e,n)&&(0!==(d=e[n])&&(e[n]=void 0),d)){var l=i&&("load"===i.type?"missing":i.type),s=i&&i.target&&i.target.src;o.message="Loading chunk "+n+" failed.\n("+l+": "+s+")",o.name="ChunkLoadError",o.type=l,o.request=s,d[1](o)}},"chunk-"+n,n)}else e[n]=0},a.O.j=n=>0===e[n];var f=(n,c)=>{var o,b,[d,t,u]=c,i=0;if(d.some(s=>0!==e[s])){for(o in t)a.o(t,o)&&(a.m[o]=t[o]);if(u)var l=u(a)}for(n&&n(c);i{"use strict";var e,v={},m={};function a(e){var f=m[e];if(void 0!==f)return f.exports;var r=m[e]={exports:{}};return v[e](r,r.exports,a),r.exports}a.m=v,e=[],a.O=(f,r,n,c)=>{if(!r){var t=1/0;for(d=0;d=c)&&Object.keys(a.O).every(p=>a.O[p](r[o]))?r.splice(o--,1):(u=!1,c0&&e[d-1][2]>c;d--)e[d]=e[d-1];e[d]=[r,n,c]},a.n=e=>{var f=e&&e.__esModule?()=>e.default:()=>e;return a.d(f,{a:f}),f},a.d=(e,f)=>{for(var r in f)a.o(f,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:f[r]})},a.f={},a.e=e=>Promise.all(Object.keys(a.f).reduce((f,r)=>(a.f[r](e,f),f),[])),a.u=e=>(76===e?"common":e)+"."+{19:"89a5aaa4d1458a21",41:"4a171effe2295543",67:"583d5190b7dfad39",76:"03129cb1d8fef6dc",80:"208857a2c10dfb91",86:"13eba6cbeff8d282",131:"3d3de0f472198ddd",146:"c9fe1a5bcad3c5b7",237:"82a2bbb27d8687a4",243:"f29cf280caeffb3a",268:"5840b7c67b1f44da",314:"efc9f99e0fbbc1fb",337:"afd2ce83981406c5",338:"afc4e2237a9f9d7a",363:"cb493e87c3090037",396:"3e48541fd339bbf4",409:"d5dbd5815e7cd93e",414:"c47e05af51a53ce9",448:"a4ebea530a912b1c",586:"3f1b763f7ef92913",617:"41aa17882e3b6c02",627:"a35e07d4aac31a4c",638:"302e9f157440354a",661:"64c13699471ed821",673:"aacbf257480a8d37",695:"b4f683036e58b613",701:"bdb11bf2ecd3a184",708:"bc73bad62254bdd5",754:"9f6a0a75ad658714",835:"cf5ca3900e2a6f57",855:"603111e463eac387",863:"99f77a373057e542",878:"95ec4c94872bd578",897:"97a637e2db4a4670",933:"14a18dc74c9a345b",934:"616731b95b814f41",947:"f92ec5c505677166",949:"ef3fca051821880d",977:"28fa0f52ff3c6a46",979:"d64f353261d6eb10",980:"4dc7e12aed8d92a9"}[e]+".js",a.miniCssF=e=>{},a.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="ng-vcl-demo:";a.l=(r,n,c,d)=>{if(e[r])e[r].push(n);else{var t,u;if(void 0!==c)for(var o=document.getElementsByTagName("script"),b=0;b{t.onerror=t.onload=null,clearTimeout(s);var _=e[r];if(delete e[r],t.parentNode&&t.parentNode.removeChild(t),_&&_.forEach(h=>h(p)),g)return g(p)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),u&&document.head.appendChild(t)}}})(),a.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;a.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),a.tu=e=>a.tt().createScriptURL(e),a.p="",(()=>{var e={121:0};a.f.j=(n,c)=>{var d=a.o(e,n)?e[n]:void 0;if(0!==d)if(d)c.push(d[2]);else if(121!=n){var t=new Promise((i,l)=>d=e[n]=[i,l]);c.push(d[2]=t);var u=a.p+a.u(n),o=new Error;a.l(u,i=>{if(a.o(e,n)&&(0!==(d=e[n])&&(e[n]=void 0),d)){var l=i&&("load"===i.type?"missing":i.type),s=i&&i.target&&i.target.src;o.message="Loading chunk "+n+" failed.\n("+l+": "+s+")",o.name="ChunkLoadError",o.type=l,o.request=s,d[1](o)}},"chunk-"+n,n)}else e[n]=0},a.O.j=n=>0===e[n];var f=(n,c)=>{var o,b,[d,t,u]=c,i=0;if(d.some(s=>0!==e[s])){for(o in t)a.o(t,o)&&(a.m[o]=t[o]);if(u)var l=u(a)}for(n&&n(c);i