9554.43bc9ade59f03688.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[9554],{7855:(R,T,_)=>{_.d(T,{Kt:()=>n,LL:()=>P,Su:()=>U,Vq:()=>I,ib:()=>v,zj:()=>i});var m=_(2687),e=_(8184),f=_(3353),g=_(4080),w=_(6895),l=_(4650),M=_(9521),y=_(8929),b=_(8514),E=_(1086),k=_(445),O=_(1059);function x(r,h){}class v{constructor(){this.role="dialog",this.panelClass="",this.hasBackdrop=!0,this.backdropClass="",this.disableClose=!1,this.width="",this.height="",this.data=null,this.ariaDescribedBy=null,this.ariaLabelledBy=null,this.ariaLabel=null,this.ariaModal=!0,this.autoFocus="first-tabbable",this.restoreFocus=!0,this.closeOnNavigation=!0,this.closeOnDestroy=!0}}let P=(()=>{class r extends g.en{constructor(t,a,o,s,p,d,C,F){super(),this._elementRef=t,this._focusTrapFactory=a,this._config=s,this._interactivityChecker=p,this._ngZone=d,this._overlayRef=C,this._focusMonitor=F,this._elementFocusedBeforeDialogWasOpened=null,this._closeInteractionType=null,this.attachDomPortal=B=>{this._portalOutlet.hasAttached();const j=this._portalOutlet.attachDomPortal(B);return this._contentAttached(),j},this._ariaLabelledBy=this._config.ariaLabelledBy||null,this._document=o}_contentAttached(){this._initializeFocusTrap(),this._handleBackdropClicks(),this._captureInitialFocus()}_captureInitialFocus(){this._trapFocus()}ngOnDestroy(){this._restoreFocus()}attachComponentPortal(t){this._portalOutlet.hasAttached();const a=this._portalOutlet.attachComponentPortal(t);return this._contentAttached(),a}attachTemplatePortal(t){this._portalOutlet.hasAttached();const a=this._portalOutlet.attachTemplatePortal(t);return this._contentAttached(),a}_recaptureFocus(){this._containsFocus()||this._trapFocus()}_forceFocus(t,a){this._interactivityChecker.isFocusable(t)||(t.tabIndex=-1,this._ngZone.runOutsideAngular(()=>{const o=()=>{t.removeEventListener("blur",o),t.removeEventListener("mousedown",o),t.removeAttribute("tabindex")};t.addEventListener("blur",o),t.addEventListener("mousedown",o)})),t.focus(a)}_focusByCssSelector(t,a){let o=this._elementRef.nativeElement.querySelector(t);o&&this._forceFocus(o,a)}_trapFocus(){const t=this._elementRef.nativeElement;switch(this._config.autoFocus){case!1:case"dialog":this._containsFocus()||t.focus();break;case!0:case"first-tabbable":this._focusTrap.focusInitialElementWhenReady().then(a=>{a||this._focusDialogContainer()});break;case"first-heading":this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');break;default:this._focusByCssSelector(this._config.autoFocus)}}_restoreFocus(){const t=this._config.restoreFocus;let a=null;if("string"==typeof t?a=this._document.querySelector(t):"boolean"==typeof t?a=t?this._elementFocusedBeforeDialogWasOpened:null:t&&(a=t),this._config.restoreFocus&&a&&"function"==typeof a.focus){const o=(0,f.ht)(),s=this._elementRef.nativeElement;(!o||o===this._document.body||o===s||s.contains(o))&&(this._focusMonitor?(this._focusMonitor.focusVia(a,this._closeInteractionType),this._closeInteractionType=null):a.focus())}this._focusTrap&&this._focusTrap.destroy()}_focusDialogContainer(){this._elementRef.nativeElement.focus&&this._elementRef.nativeElement.focus()}_containsFocus(){const t=this._elementRef.nativeElement,a=(0,f.ht)();return t===a||t.contains(a)}_initializeFocusTrap(){this._focusTrap=this._focusTrapFactory.create(this._elementRef.nativeElement),this._document&&(this._elementFocusedBeforeDialogWasOpened=(0,f.ht)())}_handleBackdropClicks(){this._overlayRef.backdropClick().subscribe(()=>{this._config.disableClose&&this._recaptureFocus()})}}return r.\u0275fac=function(t){return new(t||r)(l.Y36(l.SBq),l.Y36(m.qV),l.Y36(w.K0,8),l.Y36(v),l.Y36(m.ic),l.Y36(l.R0b),l.Y36(e.Iu),l.Y36(m.tE))},r.\u0275cmp=l.Xpm({type:r,selectors:[["cdk-dialog-container"]],viewQuery:function(t,a){if(1&t&&l.Gf(g.Pl,7),2&t){let o;l.iGM(o=l.CRH())&&(a._portalOutlet=o.first)}},hostAttrs:["tabindex","-1",1,"cdk-dialog-container"],hostVars:6,hostBindings:function(t,a){2&t&&l.uIk("id",a._config.id||null)("role",a._config.role)("aria-modal",a._config.ariaModal)("aria-labelledby",a._config.ariaLabel?null:a._ariaLabelledBy)("aria-label",a._config.ariaLabel)("aria-describedby",a._config.ariaDescribedBy||null)},features:[l.qOj],decls:1,vars:0,consts:[["cdkPortalOutlet",""]],template:function(t,a){1&t&&l.YNc(0,x,0,0,"ng-template",0)},dependencies:[g.Pl],styles:[".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}"],encapsulation:2}),r})();class i{constructor(h,t){this.overlayRef=h,this.config=t,this.closed=new y.xQ,this.disableClose=t.disableClose,this.backdropClick=h.backdropClick(),this.keydownEvents=h.keydownEvents(),this.outsidePointerEvents=h.outsidePointerEvents(),this.id=t.id,this.keydownEvents.subscribe(a=>{a.keyCode===M.hY&&!this.disableClose&&!(0,M.Vb)(a)&&(a.preventDefault(),this.close(void 0,{focusOrigin:"keyboard"}))}),this.backdropClick.subscribe(()=>{this.disableClose||this.close(void 0,{focusOrigin:"mouse"})})}close(h,t){if(this.containerInstance){const a=this.closed;this.containerInstance._closeInteractionType=t?.focusOrigin||"program",this.overlayRef.dispose(),a.next(h),a.complete(),this.componentInstance=this.containerInstance=null}}updatePosition(){return this.overlayRef.updatePosition(),this}updateSize(h="",t=""){return this.overlayRef.updateSize({width:h,height:t}),this}addPanelClass(h){return this.overlayRef.addPanelClass(h),this}removePanelClass(h){return this.overlayRef.removePanelClass(h),this}}const u=new l.OlP("DialogScrollStrategy"),n=new l.OlP("DialogData"),c=new l.OlP("DefaultDialogConfig"),A={provide:u,deps:[e.aV],useFactory:function D(r){return()=>r.scrollStrategies.block()}};let Z=0,I=(()=>{class r{constructor(t,a,o,s,p,d){this._overlay=t,this._injector=a,this._defaultOptions=o,this._parentDialog=s,this._overlayContainer=p,this._openDialogsAtThisLevel=[],this._afterAllClosedAtThisLevel=new y.xQ,this._afterOpenedAtThisLevel=new y.xQ,this._ariaHiddenElements=new Map,this.afterAllClosed=(0,b.P)(()=>this.openDialogs.length?this._getAfterAllClosed():this._getAfterAllClosed().pipe((0,O.O)(void 0))),this._scrollStrategy=d}get openDialogs(){return this._parentDialog?this._parentDialog.openDialogs:this._openDialogsAtThisLevel}get afterOpened(){return this._parentDialog?this._parentDialog.afterOpened:this._afterOpenedAtThisLevel}open(t,a){(a={...this._defaultOptions||new v,...a}).id=a.id||"cdk-dialog-"+Z++,a.id&&this.getDialogById(a.id);const s=this._getOverlayConfig(a),p=this._overlay.create(s),d=new i(p,a),C=this._attachContainer(p,d,a);return d.containerInstance=C,this._attachDialogContent(t,d,C,a),this.openDialogs.length||this._hideNonDialogContentFromAssistiveTechnology(),this.openDialogs.push(d),d.closed.subscribe(()=>this._removeOpenDialog(d,!0)),this.afterOpened.next(d),d}closeAll(){L(this.openDialogs,t=>t.close())}getDialogById(t){return this.openDialogs.find(a=>a.id===t)}ngOnDestroy(){L(this._openDialogsAtThisLevel,t=>{!1===t.config.closeOnDestroy&&this._removeOpenDialog(t,!1)}),L(this._openDialogsAtThisLevel,t=>t.close()),this._afterAllClosedAtThisLevel.complete(),this._afterOpenedAtThisLevel.complete(),this._openDialogsAtThisLevel=[]}_getOverlayConfig(t){const a=new e.X_({positionStrategy:t.positionStrategy||this._overlay.position().global().centerHorizontally().centerVertically(),scrollStrategy:t.scrollStrategy||this._scrollStrategy(),panelClass:t.panelClass,hasBackdrop:t.hasBackdrop,direction:t.direction,minWidth:t.minWidth,minHeight:t.minHeight,maxWidth:t.maxWidth,maxHeight:t.maxHeight,width:t.width,height:t.height,disposeOnNavigation:t.closeOnNavigation});return t.backdropClass&&(a.backdropClass=t.backdropClass),a}_attachContainer(t,a,o){const s=o.injector||o.viewContainerRef?.injector,p=[{provide:v,useValue:o},{provide:i,useValue:a},{provide:e.Iu,useValue:t}];let d;o.container?"function"==typeof o.container?d=o.container:(d=o.container.type,p.push(...o.container.providers(o))):d=P;const C=new g.C5(d,o.viewContainerRef,l.zs3.create({parent:s||this._injector,providers:p}),o.componentFactoryResolver);return t.attach(C).instance}_attachDialogContent(t,a,o,s){if(t instanceof l.Rgc){const p=this._createInjector(s,a,o,void 0);let d={$implicit:s.data,dialogRef:a};s.templateContext&&(d={...d,..."function"==typeof s.templateContext?s.templateContext():s.templateContext}),o.attachTemplatePortal(new g.UE(t,null,d,p))}else{const p=this._createInjector(s,a,o,this._injector),d=o.attachComponentPortal(new g.C5(t,s.viewContainerRef,p,s.componentFactoryResolver));a.componentInstance=d.instance}}_createInjector(t,a,o,s){const p=t.injector||t.viewContainerRef?.injector,d=[{provide:n,useValue:t.data},{provide:i,useValue:a}];return t.providers&&("function"==typeof t.providers?d.push(...t.providers(a,t,o)):d.push(...t.providers)),t.direction&&(!p||!p.get(k.Is,null,{optional:!0}))&&d.push({provide:k.Is,useValue:{value:t.direction,change:(0,E.of)()}}),l.zs3.create({parent:p||s,providers:d})}_removeOpenDialog(t,a){const o=this.openDialogs.indexOf(t);o>-1&&(this.openDialogs.splice(o,1),this.openDialogs.length||(this._ariaHiddenElements.forEach((s,p)=>{s?p.setAttribute("aria-hidden",s):p.removeAttribute("aria-hidden")}),this._ariaHiddenElements.clear(),a&&this._getAfterAllClosed().next()))}_hideNonDialogContentFromAssistiveTechnology(){const t=this._overlayContainer.getContainerElement();if(t.parentElement){const a=t.parentElement.children;for(let o=a.length-1;o>-1;o--){const s=a[o];s!==t&&"SCRIPT"!==s.nodeName&&"STYLE"!==s.nodeName&&!s.hasAttribute("aria-live")&&(this._ariaHiddenElements.set(s,s.getAttribute("aria-hidden")),s.setAttribute("aria-hidden","true"))}}}_getAfterAllClosed(){const t=this._parentDialog;return t?t._getAfterAllClosed():this._afterAllClosedAtThisLevel}}return r.\u0275fac=function(t){return new(t||r)(l.LFG(e.aV),l.LFG(l.zs3),l.LFG(c,8),l.LFG(r,12),l.LFG(e.Xj),l.LFG(u))},r.\u0275prov=l.Yz7({token:r,factory:r.\u0275fac}),r})();function L(r,h){let t=r.length;for(;t--;)h(r[t])}let U=(()=>{class r{}return r.\u0275fac=function(t){return new(t||r)},r.\u0275mod=l.oAB({type:r}),r.\u0275inj=l.cJS({providers:[I,A],imports:[e.U8,g.eL,m.rt,g.eL]}),r})()},9554:(R,T,_)=>{_.r(T),_.d(T,{CdkDialogDataExample:()=>b,CdkDialogDataExampleDialog:()=>E,CdkDialogOverviewExample:()=>k,CdkDialogOverviewExampleDialog:()=>O,CdkDialogStylingExample:()=>x,CdkDialogStylingExampleDialog:()=>v,DialogExamplesModule:()=>P});var m=_(6895),e=_(4650),f=_(4006),g=_(7855);function w(i,u){1&i&&(e.TgZ(0,"span"),e._uU(1,"\u2713"),e.qZA())}function l(i,u){1&i&&(e.TgZ(0,"span"),e._uU(1,"\u2713"),e.qZA())}function M(i,u){1&i&&(e.TgZ(0,"span"),e._uU(1,"\u2713"),e.qZA())}function y(i,u){if(1&i&&(e.TgZ(0,"li"),e._uU(1," You chose: "),e.TgZ(2,"i"),e._uU(3),e.qZA()()),2&i){const n=e.oxw();e.xp6(3),e.Oqu(n.animal)}}let b=(()=>{class i{constructor(n){this.dialog=n}openDialog(){this.dialog.open(E,{minWidth:"300px",data:{animal:"panda"}})}}return i.\u0275fac=function(n){return new(n||i)(e.Y36(g.Vq))},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-dialog-data-example"]],decls:2,vars:0,consts:[[3,"click"]],template:function(n,c){1&n&&(e.TgZ(0,"button",0),e.NdJ("click",function(){return c.openDialog()}),e._uU(1,"Open dialog"),e.qZA())},encapsulation:2}),i})(),E=(()=>{class i{constructor(n){this.data=n}}return i.\u0275fac=function(n){return new(n||i)(e.Y36(g.Kt))},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-dialog-data-example-dialog"]],decls:14,vars:3,consts:[[4,"ngIf"]],template:function(n,c){1&n&&(e.TgZ(0,"h1"),e._uU(1,"Favorite Animal"),e.qZA(),e.TgZ(2,"div"),e._uU(3," My favorite animal is: "),e.TgZ(4,"ul")(5,"li"),e.YNc(6,w,2,0,"span",0),e._uU(7," Panda "),e.qZA(),e.TgZ(8,"li"),e.YNc(9,l,2,0,"span",0),e._uU(10," Unicorn "),e.qZA(),e.TgZ(11,"li"),e.YNc(12,M,2,0,"span",0),e._uU(13," Lion "),e.qZA()()()),2&n&&(e.xp6(6),e.Q6J("ngIf","panda"===c.data.animal),e.xp6(3),e.Q6J("ngIf","unicorn"===c.data.animal),e.xp6(3),e.Q6J("ngIf","lion"===c.data.animal))},dependencies:[m.O5],styles:["[_nghost-%COMP%] {\n  display: block;\n  background: #fff;\n  border-radius: 8px;\n  padding: 8px 16px;\n}"]}),i})(),k=(()=>{class i{constructor(n){this.dialog=n}openDialog(){this.dialog.open(O,{width:"250px",data:{name:this.name,animal:this.animal}}).closed.subscribe(c=>{console.log("The dialog was closed"),this.animal=c})}}return i.\u0275fac=function(n){return new(n||i)(e.Y36(g.Vq))},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-dialog-overview-example"]],decls:9,vars:2,consts:[["id","dialog-user-name"],["for","dialog-user-name",3,"ngModel","ngModelChange"],[3,"click"],[4,"ngIf"]],template:function(n,c){1&n&&(e.TgZ(0,"ol")(1,"li")(2,"label",0),e._uU(3,"What's your name?"),e.qZA(),e.TgZ(4,"input",1),e.NdJ("ngModelChange",function(A){return c.name=A}),e.qZA()(),e.TgZ(5,"li")(6,"button",2),e.NdJ("click",function(){return c.openDialog()}),e._uU(7,"Pick one"),e.qZA()(),e.YNc(8,y,4,1,"li",3),e.qZA()),2&n&&(e.xp6(4),e.Q6J("ngModel",c.name),e.xp6(4),e.Q6J("ngIf",c.animal))},dependencies:[m.O5,f.Fj,f.JJ,f.On],encapsulation:2}),i})(),O=(()=>{class i{constructor(n,c){this.dialogRef=n,this.data=c}}return i.\u0275fac=function(n){return new(n||i)(e.Y36(g.zj),e.Y36(g.Kt))},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-dialog-overview-example-dialog"]],decls:11,vars:2,consts:[["id","favorite-animal"],["for","favorite-animal","placeholder","Enter your name",3,"ngModel","ngModelChange"],[3,"click"]],template:function(n,c){1&n&&(e.TgZ(0,"h1"),e._uU(1),e.qZA(),e.TgZ(2,"div")(3,"label",0),e._uU(4,"What's your favorite animal?"),e.qZA(),e.TgZ(5,"input",1),e.NdJ("ngModelChange",function(A){return c.data.animal=A}),e.qZA()(),e.TgZ(6,"div")(7,"button",2),e.NdJ("click",function(){return c.dialogRef.close(c.data.animal)}),e._uU(8,"OK"),e.qZA(),e.TgZ(9,"button",2),e.NdJ("click",function(){return c.dialogRef.close()}),e._uU(10,"Cancel"),e.qZA()()),2&n&&(e.xp6(1),e.hij("Hi ",c.data.name,""),e.xp6(4),e.Q6J("ngModel",c.data.animal))},dependencies:[f.Fj,f.JJ,f.On],styles:["[_nghost-%COMP%] {\n  display: block;\n  background: #fff;\n  border-radius: 8px;\n  padding: 8px 16px 16px;\n}\n\ninput[_ngcontent-%COMP%] {\n  margin: 8px 0;\n}\n\nbutton[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {\n  margin-left: 8px;\n}"]}),i})(),x=(()=>{class i{constructor(n){this.dialog=n}openDialog(){this.dialog.open(v)}}return i.\u0275fac=function(n){return new(n||i)(e.Y36(g.Vq))},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-dialog-styling-example"]],decls:2,vars:0,consts:[[3,"click"]],template:function(n,c){1&n&&(e.TgZ(0,"button",0),e.NdJ("click",function(){return c.openDialog()}),e._uU(1,"Open custom dialog"),e.qZA())},encapsulation:2}),i})(),v=(()=>{class i{constructor(n){this.dialogRef=n}}return i.\u0275fac=function(n){return new(n||i)(e.Y36(g.zj))},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-dialog-styling-example-dialog"]],decls:4,vars:0,consts:[[3,"click"]],template:function(n,c){1&n&&(e._uU(0,"Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It's not a story the Jedi\nwould tell you. It's a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so\nwise he could use the Force to influence the midichlorians to create life\u2026 He had such a knowledge\nof the dark side that he could even keep the ones he cared about from dying. The dark side of the\nForce is a pathway to many abilities some consider to be unnatural. He became so powerful\u2026 the only\nthing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately,\nhe taught his apprentice everything he knew, then his apprentice killed him in his sleep. Ironic.\nHe could save others from death, but not himself. "),e._UZ(1,"hr"),e.TgZ(2,"button",0),e.NdJ("click",function(){return c.dialogRef.close()}),e._uU(3,"Close"),e.qZA())},styles:["[_nghost-%COMP%] {\n  display: block;\n  background: #fff;\n  border-radius: 8px;\n  padding: 16px;\n  max-width: 500px;\n  animation: _ngcontent-%COMP%_custom-dialog-enter 1s ease;\n}\n\n@keyframes _ngcontent-%COMP%_custom-dialog-enter {\n  from {\n    transform: scale(0) rotate(360deg);\n  }\n\n  to {\n    transform: none;\n  }\n}"]}),i})(),P=(()=>{class i{}return i.\u0275fac=function(n){return new(n||i)},i.\u0275mod=e.oAB({type:i}),i.\u0275inj=e.cJS({imports:[m.ez,g.Su,f.u5]}),i})()}}]);