1import{a as X}from"./chunk-MJ7DO6OI.js";import{a as P}from"./chunk-DEN33KKN.js";import"./chunk-GEXPUMUX.js";import{b as pe}from"./chunk-7ZGOLTZD.js";import{b as se,c as me,d as ce}from"./chunk-HMA3OSKG.js";import"./chunk-OBR75ZGB.js";import{a as F}from"./chunk-LB2BUUS4.js";import"./chunk-VLFEXYCY.js";import{$ as C,Ab as u,Ag as O,Bb as S,Bg as D,Ca as b,Cb as f,Cg as h,Da as $,Dg as g,Ga as ee,Na as y,Oc as ie,Pa as E,Rc as le,Sd as A,Ta as c,Tb as k,Td as L,U as Z,Ua as e,Va as n,Wa as p,We as V,Yd as I,Ze as ae,_ as x,_d as W,bb as M,cf as q,ck as de,db as d,fb as _,ob as B,pc as ne,qb as te,ra as m,tb as t,yg as oe,zg as re}from"./chunk-MFI2B7BD.js";var Se=` 2<button class="btn btn-primary" (click)="showPanel = true">Show side panel</button> 3 4<clr-side-panel 5 [(clrSidePanelOpen)]="showPanel" 6 [clrSidePanelPreventClose]="true" 7 (clrSidePanelAlternateClose)="showConfirm = true" 8 #panel 9> 10 <div class="side-panel-title">Confirm on close</div> 11 <div class="side-panel-body"> 12 <p>The side panel will require confirmation on close.</p> 13 </div> 14 <div class="side-panel-footer"> 15 <button type="button" class="btn btn-primary" (click)="panel.close()">Close</button> 16 </div> 17</clr-side-panel> 18 19<clr-modal [(clrModalOpen)]="showConfirm"> 20 <h3 class="modal-title">Are you sure?</h3> 21 <div class="modal-body"> 22 <p>You may lose data if you close now...</p> 23 </div> 24 <div class="modal-footer"> 25 <button type="button" class="btn btn-outline" (click)="showConfirm = false">Cancel</button> 26 <button type="button" class="btn btn-primary" (click)="showConfirm = false; showPanel = false"> 27 Yes 28 </button> 29 </div> 30</clr-modal> 31`,fe=` 32import { Component } from '@angular/core'; 33import { CommonModule } from '@angular/common'; 34import { ClrModalModule, ClrSidePanelModule } from '@clr/angular'; 35 36@Component({ 37 selector: 'app-example', 38 templateUrl: './example.component.html', 39 40 imports: [ClrSidePanelModule, ClrModalModule, CommonModule], 41}) 42export class ExampleComponent { 43 showPanel = false; 44 showConfirm = false; 45} 46`,U=(()=>{class l{constructor(){this.showPanel=!1,this.showConfirm=!1,this.example=Se,this.exampleTs=fe}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-alt-close-demo"]],decls:25,vars:6,consts:[["panel",""],[1,"btn","btn-primary",3,"click"],[3,"clrSidePanelOpenChange","clrSidePanelAlternateClose","clrSidePanelOpen","clrSidePanelPreventClose"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-primary",3,"click"],[3,"clrModalOpenChange","clrModalOpen"],[1,"modal-title"],[1,"modal-body"],[1,"modal-footer"],["type","button",1,"btn","btn-outline",3,"click"],["name","Side panel Angular alt close",3,"componentTemplate","componentClass","showComponentClass"]],template:function(o,i){if(o&1){let a=M();e(0,"p")(1,"button",1),d("click",function(){return x(a),C(i.showPanel=!0)}),t(2,"Show side panel"),n()(),e(3,"clr-side-panel",2,0),f("clrSidePanelOpenChange",function(w){return x(a),S(i.showPanel,w)||(i.showPanel=w),C(w)}),d("clrSidePanelAlternateClose",function(){return x(a),C(i.showConfirm=!0)}),e(5,"div",3),t(6,"Confirm on close"),n(),e(7,"div",4)(8,"p"),t(9,"The side panel will require confirmation on close."),n()(),e(10,"div",5)(11,"button",6),d("click",function(){x(a);let w=B(4);return C(w.close())}),t(12,"Close"),n()()(),e(13,"clr-modal",7),f("clrModalOpenChange",function(w){return x(a),S(i.showConfirm,w)||(i.showConfirm=w),C(w)}),e(14,"h3",8),t(15,"Are you sure?"),n(),e(16,"div",9)(17,"p"),t(18,"You may lose data if you close now..."),n()(),e(19,"div",10)(20,"button",11),d("click",function(){return x(a),C(i.showConfirm=!1)}),t(21,"Cancel"),n(),e(22,"button",6),d("click",function(){return x(a),i.showConfirm=!1,C(i.showPanel=!1)}),t(23,"Yes"),n()()(),p(24,"app-stackblitz-example",12)}o&2&&(m(3),u("clrSidePanelOpen",i.showPanel),c("clrSidePanelPreventClose",!0),m(10),u("clrModalOpen",i.showConfirm),m(11),c("componentTemplate",i.example)("componentClass",i.exampleTs)("showComponentClass",!1))},dependencies:[g,h,oe,re,D,P],encapsulation:2})}}return l})();function be(l,z){if(l&1&&p(0,"app-stackblitz-example",7),l&2){let s=_();
46c("componentTemplate",s.example)("componentClass",s.exampleTs)("showComponentClass",!1)}}var he=` 47<button class="btn btn-primary" (click)="opened = true">Show bottom side panel</button> 48<clr-side-panel 49 [(clrSidePanelOpen)]="opened" 50 [clrSidePanelStaticBackdrop]="true" 51 [clrSidePanelPosition]="'bottom'" 52> 53 <div class="side-panel-title">Bottom Side Panel</div> 54 <div class="side-panel-body"> 55 <p>This side panel slides up from the bottom.</p> 56 </div> 57 <div class="side-panel-footer"> 58 <button type="button" class="btn btn-outline" (click)="opened = false">Cancel</button> 59 <button type="button" class="btn btn-primary" (click)="opened = false">Ok</button> 60 </div> 61</clr-side-panel> 62`,ge=` 63import { Component } from '@angular/core'; 64import { CommonModule } from '@angular/common'; 65import { ClrSidePanelModule } from '@clr/angular'; 66 67@Component({ 68 selector: 'app-example', 69 templateUrl: './example.component.html', 70 imports: [ClrSidePanelModule, CommonModule], 71}) 72export class ExampleComponent { 73 opened = false; 74} 75`,H=(()=>{class l{constructor(){this.showCode=k(!0),this.opened=!1,this.example=he,this.exampleTs=ge}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-bottom-demo"]],inputs:{showCode:[1,"showCode"]},decls:15,vars:4,consts:[[1,"btn","btn-primary",3,"click"],[3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelStaticBackdrop","clrSidePanelPosition"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-outline",3,"click"],["type","button",1,"btn","btn-primary",3,"click"],["name","Bottom side panel",3,"componentTemplate","componentClass","showComponentClass"]],template:function(o,i){o&1&&(e(0,"p")(1,"button",0),d("click",function(){return i.opened=!0}),t(2,"Show bottom side panel"),n()(),e(3,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.opened,r)||(i.opened=r),r}),e(4,"div",2),t(5,"Bottom Side Panel"),n(),e(6,"div",3)(7,"p"),t(8,"This side panel slides up from the bottom."),n()(),e(9,"div",4)(10,"button",5),d("click",function(){return i.opened=!1}),t(11,"Cancel"),n(),e(12,"button",6),d("click",function(){return i.opened=!1}),t(13,"Ok"),n()()(),y(14,be,1,3,"app-stackblitz-example",7)),o&2&&(m(3),u("clrSidePanelOpen",i.opened),c("clrSidePanelStaticBackdrop",!0)("clrSidePanelPosition","bottom"),m(11),E(i.showCode()?14:-1))},dependencies:[g,h,P],encapsulation:2})}}return l})();function Pe(l,z){if(l&1&&p(0,"app-stackblitz-example",7),l&2){let s=_();c("componentTemplate",s.example)("componentClass",s.exampleTs)("showComponentClass",!1)}}var _e=` 76<button class="btn btn-primary" (click)="opened = true">Show side panel</button> 77 78<clr-side-panel [(clrSidePanelOpen)]="opened" [clrSidePanelStaticBackdrop]="true"> 79 <h3 class="side-panel-title">I have a nice title</h3> 80 <div class="side-panel-body"> 81 <p>But not much to say...</p> 82 </div> 83 <div class="side-panel-footer"> 84 <button type="button" class="btn btn-outline" (click)="opened = false">Cancel</button> 85 <button type="button" class="btn btn-primary" (click)="opened = false">Ok</button> 86 </div> 87</clr-side-panel> 88`,xe=` 89import { Component } from '@angular/core'; 90import { CommonModule } from '@angular/common'; 91import { ClrSidePanelModule } from '@clr/angular'; 92 93@Component({ 94 selector: 'app-example', 95 templateUrl: './example.component.html', 96 97 imports: [ClrSidePanelModule, CommonModule], 98}) 99export class ExampleComponent { 100 opened = false; 101} 102`,N=(()=>{class l{constructor(){this.showCode=k(!0),this.opened=!1,this.example=_e,this.exampleTs=xe}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-demo"]],inputs:{showCode:[1,"showCode"]},decls:15,vars:3,consts:[[1,"btn","btn-primary",3,"click"],[3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelStaticBackdrop"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-outline",3,"click"],["type","button",1,"btn","btn-primary",3,"click"],["name","Side panel Angular",3,"componentTemplate","componentClass","showComponentClass"]],template:function(o,i){o&1&&(e(0,"p")(1,"button",0),d("click",function(){return i.opened=!0}),t(2,"Show side panel"),n()(),e(3,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.opened,r)||(i.opened=r),r}),e(4,"div",2),t(5,"I have a nice title"),n(),e(6,"div",3)(7,"p"),t(8,"But not much to say..."),n()(),e(9,"div",4)(10,"button",5),d("click",function(){return i.opened=!1}),t(11,"Cancel"),n(),e(12,"button",6),d("click",function(){return i.opened=!1}),t(13,"Ok"),n()()(),y(14,Pe,1,3,"app-stackblitz-example",7)),o&2&&(m(3),u("clrSidePanelOpen",
102i.opened),c("clrSidePanelStaticBackdrop",!0),m(11),E(i.showCode()?14:-1))},dependencies:[g,h,P],encapsulation:2})}}return l})();function Ce(l,z){if(l&1&&p(0,"app-stackblitz-example",8),l&2){let s=_();c("componentTemplate",s.example)("componentClass",s.exampleTs)("showComponentClass",!1)}}var ye=` 103<div 104 clrModalHost 105 cds-layout="p:md m-t:md" 106 style="border: 1px dashed hotpink; width: 800px; height: 200px" 107> 108 <button class="btn btn-primary" (click)="opened = true">Show side panel</button> 109 <clr-side-panel [(clrSidePanelOpen)]="opened" [clrSidePanelStaticBackdrop]="true"> 110 <div class="side-panel-title">I have a nice title</div> 111 <div class="side-panel-body"> 112 <p>But not much to say...</p> 113 </div> 114 <div class="side-panel-footer"> 115 <button type="button" class="btn btn-outline" (click)="opened = false">Cancel</button> 116 <button type="button" class="btn btn-primary" (click)="opened = false">Ok</button> 117 </div> 118 </clr-side-panel> 119</div> 120`,Ee=` 121import { Component } from '@angular/core'; 122import { CommonModule } from '@angular/common'; 123import { ClrSidePanelModule } from '@clr/angular'; 124 125@Component({ 126 selector: 'app-example', 127 templateUrl: './example.component.html', 128 129 imports: [ClrSidePanelModule, CommonModule], 130}) 131export class ExampleComponent { 132 opened = false; 133} 134`,j=(()=>{class l{constructor(){this.showCode=k(!0),this.opened=!1,this.example=ye,this.exampleTs=Ee}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-inline-demo"]],inputs:{showCode:[1,"showCode"]},decls:15,vars:3,consts:[["clrModalHost","","cds-layout","p:md m-t:md",2,"border","1px dashed hotpink","width","800px","height","200px"],[1,"btn","btn-primary",3,"click"],[3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelStaticBackdrop"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-outline",3,"click"],["type","button",1,"btn","btn-primary",3,"click"],["name","Inline Side panel Angular",3,"componentTemplate","componentClass","showComponentClass"]],template:function(o,i){o&1&&(e(0,"div",0)(1,"button",1),d("click",function(){return i.opened=!0}),t(2,"Inline side panel"),n(),e(3,"clr-side-panel",2),f("clrSidePanelOpenChange",function(r){return S(i.opened,r)||(i.opened=r),r}),e(4,"div",3),t(5,"I have a nice title"),n(),e(6,"div",4)(7,"p"),t(8,"But not much to say..."),n()(),e(9,"div",5)(10,"button",6),d("click",function(){return i.opened=!1}),t(11,"Cancel"),n(),e(12,"button",7),d("click",function(){return i.opened=!1}),t(13,"Ok"),n()()()(),y(14,Ce,1,3,"app-stackblitz-example",8)),o&2&&(m(3),u("clrSidePanelOpen",i.opened),c("clrSidePanelStaticBackdrop",!0),m(11),E(i.showCode()?14:-1))},dependencies:[D,O,g,h,P],encapsulation:2})}}return l})();function ve(l,z){if(l&1){let s=M();e(0,"div",2),t(1," Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non beatae omnis esse quibusdam dolorum voluptatem reiciendis quaerat assumenda optio, porro expedita similique dolore quidem aliquam. Ullam, eaque enim nobis. "),e(2,"clr-side-panel",4,0),f("clrSidePanelOpenChange",function(i){x(s);let a=_();return S(a.opened,i)||(a.opened=i),C(i)}),e(4,"div",5),p(5,"clr-icon",6),t(6," Click the Pin Button"),n(),e(7,"div",7)(8,"p"),t(9,' When pinned the close [X] button and backdrop click are blocked. "Gentle Close" button will also not close the pinned panel. '),n(),e(10,"p"),t(11,'"Forced Close" will close the panel no matter if pinned or not.'),n()(),e(12,"div",8)(13,"button",9),d("click",function(){x(s);let i=_();return C(i.opened=!1)}),t(14,"Forced Close"),n(),e(15,"button",10),d("click",function(){x(s);let i=B(3);return C(i.close())}),t(16,"Gentle Close"),n()()()()}if(l&2){let s=_();m(2),u("clrSidePanelOpen",s.opened),c("clrSidePanelPinnable",s.pinnable)}}function we(l,z){if(l&1&&p(0,"app-stackblitz-example",3),l&2){let s=_();c("componentTemplate",s.example)("componentClass",s.exampleTs)("showComponentClass",!1)}}A.addIcons(V,q);var De=` 135<button class="btn btn-primary" (click)="opened = true">Pinnable side panel</button> 136@if (opened) { 137 <div clrModalHost cds-layout="p:md m-t:md" style="width: 800px; height: 260px"> 138 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non beatae omnis esse quibusdam 139 dolorum voluptatem reiciendis quaerat assumenda optio, porro expedita similique dolore quidem
140 aliquam. Ullam, eaque enim nobis. 141 <clr-side-panel 142 #sidePanel 143 [(clrSidePanelOpen)]="opened" 144 [clrSidePanelPinnable]="pinnable" 145 clrSidePanelSize="md" 146 > 147 <div class="side-panel-title"> 148 <clr-icon shape="arrow" direction="left"></clr-icon> 149 Click the Pin Button 150 </div> 151 <div class="side-panel-body"> 152 <p> 153 When pinned the close [X] button and backdrop click are blocked. "Gentle Close" button will 154 also not close the pinned panel. 155 </p> 156 <p>"Forced Close" will close the panel no matter if pinned or not.</p> 157 </div> 158 <div class="side-panel-footer"> 159 <button type="button" class="btn btn-outline" (click)="opened = false">Forced Close</button> 160 <button type="button" class="btn btn-primary" (click)="sidePanel.close()">Gentle Close</button> 161 </div> 162 </clr-side-panel> 163 </div> 164} 165`,Te=` 166import { Component } from '@angular/core'; 167import { ClrSidePanelModule } from '@clr/angular'; 168 169@Component({ 170 selector: 'app-example', 171 templateUrl: './example.component.html', 172 173 imports: [ClrSidePanelModule], 174}) 175export class ExampleComponent { 176 opened = false; 177 pinnable = true; 178} 179`,G=(()=>{class l{constructor(){this.showCode=k(!0),this.opened=!1,this.pinnable=!0,this.example=De,this.exampleTs=Te}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-pinnable-demo"]],inputs:{showCode:[1,"showCode"]},decls:4,vars:2,consts:[["sidePanel",""],[1,"btn","btn-primary",3,"click"],["clrModalHost","","cds-layout","p:md m-t:md",2,"width","800px","height","260px"],["name","Side panel Angular",3,"componentTemplate","componentClass","showComponentClass"],["clrSidePanelSize","md",3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelPinnable"],[1,"side-panel-title"],["shape","arrow","direction","left"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-outline",3,"click"],["type","button",1,"btn","btn-primary",3,"click"]],template:function(o,i){o&1&&(e(0,"button",1),d("click",function(){return i.opened=!0}),t(1,"Pinnable side panel"),n(),y(2,ve,17,2,"div",2),y(3,we,1,3,"app-stackblitz-example",3)),o&2&&(m(2),E(i.opened?2:-1),m(),E(i.showCode()?3:-1))},dependencies:[D,O,L,g,h,W,I,P],encapsulation:2})}}return l})();function ze(l,z){if(l&1){let s=M();e(0,"div",2),t(1," Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non beatae omnis esse quibusdam dolorum voluptatem reiciendis quaerat assumenda optio, porro expedita similique dolore quidem aliquam. Ullam, eaque enim nobis. "),e(2,"clr-side-panel",4,0),f("clrSidePanelOpenChange",function(i){x(s);let a=_();return S(a.opened,i)||(a.opened=i),C(i)}),e(4,"div",5),t(5,"Pinned by default"),n(),e(6,"div",6)(7,"p"),t(8,"Panel is by default pinned side by side with the container content."),n(),e(9,"p"),t(10,"No pin/unpin buttons are displayed."),n()(),e(11,"div",7)(12,"button",8),d("click",function(){x(s);let i=_();return C(i.opened=!1)}),t(13,"Close"),n()()()()}if(l&2){let s=_();m(2),u("clrSidePanelOpen",s.opened),c("clrSidePanelPinnable",!1)("clrSidePanelPinned",!0)("clrSidePanelClosable",!1)}}function Me(l,z){if(l&1&&p(0,"app-stackblitz-example",3),l&2){let s=_();c("componentTemplate",s.example)("componentClass",s.exampleTs)("showComponentClass",!1)}}A.addIcons(V,q);var Ae=` 180<button class="btn btn-primary" (click)="opened = true">Pinned side panel</button> 181@if (opened) { 182 <div clrModalHost cds-layout="p:md m-t:md" style="width: 800px; height: 260px"> 183 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non beatae omnis esse quibusdam 184 dolorum voluptatem reiciendis quaerat assumenda optio, porro expedita similique dolore quidem
185 aliquam. Ullam, eaque enim nobis. 186 <clr-side-panel 187 #sidePanel 188 [(clrSidePanelOpen)]="opened" 189 [clrSidePanelPinnable]="false" 190 [clrSidePanelPinned]="true" 191 [clrSidePanelClosable]="false" 192 clrSidePanelSize="md" 193 > 194 <div class="side-panel-title">Pinned by default</div> 195 <div class="side-panel-body"> 196 <p>Panel is by default pinned side by side with the container content.</p> 197 <p>No pin/unpin buttons are displayed.</p> 198 </div> 199 <div class="side-panel-footer"> 200 <button type="button" class="btn btn-outline" (click)="opened = false">Close</button> 201 </div> 202 </clr-side-panel> 203 </div> 204} 205`,Oe=` 206import { Component } from '@angular/core'; 207import { ClrSidePanelModule } from '@clr/angular'; 208 209@Component({ 210 selector: 'app-example', 211 templateUrl: './example.component.html', 212 213 imports: [ClrSidePanelModule], 214}) 215export class ExampleComponent { 216 opened = false; 217} 218`,R=(()=>{class l{constructor(){this.showCode=k(!0),this.opened=!1,this.example=Ae,this.exampleTs=Oe}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-pinned-demo"]],inputs:{showCode:[1,"showCode"]},decls:4,vars:2,consts:[["sidePanel",""],[1,"btn","btn-primary",3,"click"],["clrModalHost","","cds-layout","p:md m-t:md",2,"width","800px","height","260px"],["name","Side panel Angular",3,"componentTemplate","componentClass","showComponentClass"],["clrSidePanelSize","md",3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelPinnable","clrSidePanelPinned","clrSidePanelClosable"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-outline",3,"click"]],template:function(o,i){o&1&&(e(0,"button",1),d("click",function(){return i.opened=!0}),t(1,"Pinned side panel"),n(),y(2,ze,14,4,"div",2),y(3,Me,1,3,"app-stackblitz-example",3)),o&2&&(m(2),E(i.opened?2:-1),m(),E(i.showCode()?3:-1))},dependencies:[D,O,g,h,P],encapsulation:2})}}return l})();var Be=` 219<p> 220 <button class="btn btn-primary" (click)="size = 'sm'; opened = true">Small side panel</button> 221 <button class="btn btn-primary" (click)="size = 'lg'; opened = true">Large side panel</button> 222 <button class="btn btn-primary" (click)="size = 'xl'; opened = true">Extra large side panel</button> 223 <button class="btn btn-primary" (click)="size = 'full-screen'; opened = true"> 224 Full-Screen side panel 225 </button> 226</p> 227 228<clr-side-panel [(clrSidePanelOpen)]="opened" [clrSidePanelSize]="size"> 229 <div class="side-panel-title">{{ sizeText }} panel</div> 230 <div class="side-panel-body">I am a {{ sizeText | lowercase }} side panel.</div> 231 <div class="side-panel-footer"> 232 <button type="button" class="btn btn-primary" (click)="opened = false">Ok</button> 233 </div> 234</clr-side-panel> 235`,Le=` 236import { Component } from '@angular/core'; 237import { CommonModule } from '@angular/common'; 238import { ClrSidePanelModule } from '@clr/angular'; 239 240@Component({ 241 selector: 'app-example', 242 templateUrl: './example.component.html', 243 244 imports: [ClrSidePanelModule, CommonModule], 245}) 246export class ExampleComponent { 247 opened = false; 248 size = 'md'; 249 250 get sizeText(): string { 251 switch (this.size) { 252 case 'sm': 253 return 'Small'; 254 case 'xl': 255 return 'X-Large'; 256 case 'full-screen': 257 return 'Full-Screen'; 258 case 'lg': 259 return 'Large'; 260 case 'md': 261 default: 262 return 'Medium (Default)'; 263 } 264 } 265} 266`,Y=(()=>{class l{constructor(){this.small=!1,this.large=!1,this.extraLarge=!1,this.fullScreen=!1,this.example=Be,this.exampleTs=Le}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-size-demo"]],decls:48,vars:11,consts:[[1,"btn","btn-primary",3,"click"],[3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelSize"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-primary",3,"click"],["type","button",1,"btn","btn-outline",3,"click"],["name","Side panel Angular size",3,"componentTemplate","componentClass","showComponentClass"]],template:function(o,i){o&1&&(e(0,"p")(1,"button",0),d("click",function(){return i.small=!0}),t(2,"Small side panel"),n(),e(3,"button",0),d("click",function(){return i.large=!0}),t(4,"Large side panel"),n(),e(5,"button",0),d("click",function(){return i.extraLarge=!0}),t(6,"Extra large side panel"),n(),e(7,"button",0),d("click",function(){return i.fullScreen=!0}),t(8,"Full-Screen side panel"),n()(),e(9,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.small,r)||(i.small=r),r}),e(10,"div",2),t(11,"Small side panel"),n(),e(12,"div",3),t(13,"I am a small side panel."),n(),e(14,"div",4)(15,"button",5),d("click",function(){return i.small=!1}),t(16,"Ok"),n()()(),e(17,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.large,r)||(i.large=r),r}),e(18,"div",2),t(19,"Large side panel"),n(),e(20,"div",3),t(21,"I am a large side panel."),n(),e(22,"div",4)(23,"button",6),d("click",function(){return i.large=!1}),t(24,"Cancel"),n(),e(25,"button",5),d("click",function(){return i.large=!1}),t(26,"Ok"),n()()(),e(27,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.extraLarge,r)||(i.extraLarge=r),r}),e(28,"div",2),t(29,"Extra large side panel"),n(),e(30,"div",3),t(31,"I am an extra large side panel."),n(),e(32,"div",4)(33,"button",6),d("click",function(){return i.extraLarge=!1}),t(34,"Cancel"),n(),e(35,"button",5),d("click",function(){return i.extraLarge=!1}),t(36,"Ok"),n()()(),e(37,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.fullScreen,r)||(i.fullScreen=r),r}),e(38,"div",2),t(39,"Full-Screen side panel"),n(),e(40,"div",3),t(41,"I am a full-screen side panel."),n(),e(42,"div",4)(43,"button",6),d("click",function(){return i.fullScreen=!1}),t(44,"Cancel"),n(),e(45,"button",5),d("click",function(){return i.fullScreen=!1}),t(46,"Ok"),n()()(),p(47,"app-stackblitz-example",7)),o&2&&(m(9),u("clrSidePanelOpen",
266i.small),c("clrSidePanelSize","sm"),m(8),u("clrSidePanelOpen",i.large),c("clrSidePanelSize","lg"),m(10),u("clrSidePanelOpen",i.extraLarge),c("clrSidePanelSize","xl"),m(10),u("clrSidePanelOpen",i.fullScreen),c("clrSidePanelSize","full-screen"),m(10),c("componentTemplate",i.example)("componentClass",i.exampleTs)("showComponentClass",!1))},dependencies:[g,h,P],encapsulation:2})}}return l})();var Ie=` 267<button class="btn btn-primary" (click)="opened = true">Show side panel</button> 268 269<clr-side-panel [(clrSidePanelOpen)]="opened" [clrSidePanelStaticBackdrop]="true"> 270 <div class="side-panel-title">Static backdrop</div> 271 <div class="side-panel-body"> 272 <p>Clicking on the backdrop does not close the side panel.</p> 273 </div> 274 <div class="side-panel-footer"> 275 <button type="button" class="btn btn-primary" (click)="opened = false">Ok</button> 276 </div> 277</clr-side-panel> 278`,We=` 279import { Component } from '@angular/core'; 280import { CommonModule } from '@angular/common'; 281import { ClrSidePanelModule } from '@clr/angular'; 282 283@Component({ 284 selector: 'app-example', 285 templateUrl: './example.component.html', 286 287 imports: [ClrSidePanelModule, CommonModule], 288}) 289export class ExampleComponent { 290 opened = false; 291} 292`,J=(()=>{class l{constructor(){this.static=!1,this.example=Ie,this.exampleTs=We}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-angular-static-backdrop-demo"]],decls:13,vars:5,consts:[[1,"btn","btn-primary",3,"click"],[3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelStaticBackdrop"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-primary",3,"click"],["name","Side panel Angular static backdrop",3,"componentTemplate","componentClass","showComponentClass"]],template:function(o,i){o&1&&(e(0,"p")(1,"button",0),d("click",function(){return i.static=!0}),t(2,"Show side panel"),n()(),e(3,"clr-side-panel",1),f("clrSidePanelOpenChange",function(r){return S(i.static,r)||(i.static=r),r}),e(4,"div",2),t(5,"Static backdrop"),n(),e(6,"div",3)(7,"p"),t(8,"Clicking on the backdrop does not close the side panel."),n()(),e(9,"div",4)(10,"button",5),d("click",function(){return i.static=!1}),t(11,"Ok"),n()()(),p(12,"app-stackblitz-example",6)),o&2&&(m(3),u("clrSidePanelOpen",i.static),c("clrSidePanelStaticBackdrop",!0),m(9),c("componentTemplate",i.example)("componentClass",i.exampleTs)("showComponentClass",!1))},dependencies:[g,h,P],encapsulation:2})}}return l})();var K=(()=>{class l{constructor(){this.small=!1,this.medium=!1,this.large=!1,this.extraLarge=!1,this.fullScreen=!1,A.addIcons(ae)}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-size-design-demo"]],decls:92,vars:10,consts:[[1,"size-row"],[1,"size-column"],[1,"size-style"],["id","small-side-panel","cds-text","subsection",1,"size-heading"],["cds-text","body",1,"size-width"],["type","button",1,"btn","btn-sm","size-launch-btn",3,"click"],["id","medium-side-panel","cds-text","subsection",1,"size-heading"],["id","large-side-panel","cds-text","subsection",1,"size-heading"],["id","x-large-side-panel","cds-text","subsection",1,"size-heading"],[1,"size-style","full-screen"],["shape","resize"],[3,"clrSidePanelOpenChange","clrSidePanelOpen","clrSidePanelSize"],[1,"side-panel-title"],[1,"side-panel-body"],[1,"side-panel-footer"],["type","button",1,"btn","btn-primary",3,"click"],["type","button",1,"btn","btn-outline",3,"click"]],template:function(o,i){o&1&&(e(0,"div",0)(1,"div",1)(2,"div",2),t(3,"S"),n(),e(4,"h3",3),t(5,"Small Side Panel"),n(),e(6,"div",4),t(7,"Width: 288px"),n(),e(8,"button",5),d("click",function(){return i.small=!0}),t(9,"Launch"),n()(),e(10,"div",1)(11,"div",2),t(12,"M"),n(),e(13,"h3",6),t(14,"Medium Side Panel"),n(),e(15,"div",4),t(16,"Width: 576px"),n(),e(17,"button",5),d("click",function(){return i.medium=!0}),t(18,"Launch"),n()(),e(19,"div",1)(20,"div",2),t(21,"L"),n(),e(22,"h3",7),t(23,"Large Side Panel"),n(),e(24,"div",4),t(25,"Width: 864px"),n(),e(26,"button",5),d("click",function(){return i.large=!0}
292),t(27,"Launch"),n()(),e(28,"div",1)(29,"div",2),t(30,"XL"),n(),e(31,"h3",8),t(32,"X-Large Side Panel"),n(),e(33,"div",4),t(34,"Width: 1152px"),n(),e(35,"button",5),d("click",function(){return i.extraLarge=!0}),t(36,"Launch"),n()(),e(37,"div",1)(38,"div",9),p(39,"clr-icon",10),n(),e(40,"h3",8),t(41,"Full-Screen Side Panel"),n(),e(42,"button",5),d("click",function(){return i.fullScreen=!0}),t(43,"Launch"),n()()(),e(44,"clr-side-panel",11),f("clrSidePanelOpenChange",function(r){return S(i.small,r)||(i.small=r),r}),e(45,"div",12),t(46,"Small side panel"),n(),e(47,"div",13),t(48,"I am a small side panel."),n(),e(49,"div",14)(50,"button",15),d("click",function(){return i.small=!1}),t(51,"Ok"),n()()(),e(52,"clr-side-panel",11),f("clrSidePanelOpenChange",function(r){return S(i.medium,r)||(i.medium=r),r}),e(53,"div",12),t(54,"Medium side panel"),n(),e(55,"div",13),t(56,"I am a medium side panel. I am the default size."),n(),e(57,"div",14)(58,"button",16),d("click",function(){return i.medium=!1}),t(59,"Cancel"),n(),e(60,"button",15),d("click",function(){return i.medium=!1}),t(61,"Ok"),n()()(),e(62,"clr-side-panel",11),f("clrSidePanelOpenChange",function(r){return S(i.large,r)||(i.large=r),r}),e(63,"div",12),t(64,"Large side panel"),n(),e(65,"div",13),t(66,"I am a large side panel."),n(),e(67,"div",14)(68,"button",16),d("click",function(){return i.large=!1}),t(69,"Cancel"),n(),e(70,"button",15),d("click",function(){return i.large=!1}),t(71,"Ok"),n()()(),e(72,"clr-side-panel",11),f("clrSidePanelOpenChange",function(r){return S(i.extraLarge,r)||(i.extraLarge=r),r}),e(73,"div",12),t(74,"Extra large side panel"),n(),e(75,"div",13),t(76,"I am an extra large side panel."),n(),e(77,"div",14)(78,"button",16),d("click",function(){return i.extraLarge=!1}),t(79,"Cancel"),n(),e(80,"button",15),d("click",function(){return i.extraLarge=!1}),t(81,"Ok"),n()()(),e(82,"clr-side-panel",11),f("clrSidePanelOpenChange",function(r){return S(i.fullScreen,r)||(i.fullScreen=r),r}),e(83,"div",12),t(84,"Full screen side panel"),n(),e(85,"div",13),t(86,"I am a full screen side panel."),n(),e(87,"div",14)(88,"button",16),d("click",function(){return i.fullScreen=!1}),t(89,"Cancel"),n(),e(90,"button",15),d("click",function(){return i.fullScreen=!1}),t(91,"Ok"),n()()()),o&2&&(m(44),u("clrSidePanelOpen",i.small),c("clrSidePanelSize","sm"),m(8),u("clrSidePanelOpen",i.medium),c("clrSidePanelSize","md"),m(10),u("clrSidePanelOpen",i.large),c("clrSidePanelSize","lg"),m(10),u("clrSidePanelOpen",i.extraLarge),c("clrSidePanelSize","xl"),m(10),u("clrSidePanelOpen",i.fullScreen),c("clrSidePanelSize","full-screen"))},dependencies:[L,W,I,g,h],styles:[".size-row[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:var(--cds-global-space-9);margin-top:var(--cds-global-layout-space-lg)}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%]{display:flex;flex-direction:column;border:var(--cds-alias-object-border-width-100) solid var(--cds-alias-object-border-color);border-radius:var(--cds-alias-object-border-radius-100);padding:var(--cds-global-space-6);flex:0 0 100%;max-width:100%}@media screen and (min-width:576px){.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%]{flex:0 0 calc((100% - var(--cds-global-space-9) * 4) / 5);max-width:calc((100% - var(--cds-global-space-9) * 4) / 5)}}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%] .size-style[_ngcontent-%COMP%]{color:var(--cds-alias-typography-color-500);font-size:var(--cds-global-space-12);line-height:var(--cds-global-space-12);font-weight:var(--cds-alias-typography-font-weight-semibold)}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%] .size-style.full-screen[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;width:var(--cds-global-space-12);height:var(--cds-global-space-12);border:var(--cds-alias-object-border-width-300) solid var(--cds-alias-typography-color-500);border-radius:var(--cds-alias-object-border-radius-100)}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%] .size-style.full-screen[_ngcontent-%COMP%] clr-icon[_ngcontent-%COMP%]{width:var(--cds-global-space-11);height:var(--cds-global-space-11);--color: var(--cds-alias-typography-color-500)}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%] .size-heading[_ngcontent-%COMP%]{margin-top:var(--cds-global-space-6)}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%] .size-width[_ngcontent-%COMP%]{color:var(--cds-alias-typography-color-300);margin:var(--cds-global-space-8) 0}.size-row[_ngcontent-%COMP%] .size-column[_ngcontent-%COMP%] .size-launch-btn[_ngcontent-%COMP%]{align-self:flex-start;margin-top:auto}"]})}}return l})();var Q=(()=>{class l extends ce{constructor(){super("side-panel"),this.expanded=!1}static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275cmp=b({type:l,selectors:[["clr-side-panel-demo"]],hostVars:4,hostBindings:function(o,i){o&2&&te("content-area",!0)("dox-content-panel",!0)},features:[ee],decls:306,vars:9,consts:[["tab","overview"],["id","sidePanelsComponentSummary",1,"component-summary"],["id","usage","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["routerLink","/documentation/modal"],["id","position","cds-text","title",1,"clr-mt-48px"],[1,"clr-mt-8px"],["cds-text","body",1,"list"],["cds-text","code"],["id","pinning","cds-text","title",1,"clr-mt-48px"],["cds-text","body","cds-layout","m-b:md",1,"clr-mt-16px"],[3,"showCode"],["id","sizes","cds-text","title",1,"clr-mt-48px"],["id","behavior","cds-text","title",1,"clr-mt-48px"],[1,"clr-mt-16px"],[1,"clr-row"],[1,"clr-col-6"],["type","do"],[3,"lightSrc","darkSrc","imageAlt","imageStyle"],["data-toc-item","","id","dismissing-side-panels","cds-text","subsection",1,"clr-mt-8px"],["cds-text","body",1,"clr-mt-24px"],["type","dont"],["data-toc-item","","id","stacking-side-panels","cds-text","subsection",1,"clr-mt-8px"],["id","accessibility-and-managing-focus","cds-text","title",1,"clr-mt-32px"],["tab","code"],["id","angular-component","cds-text","title",1,"clr-mt-48px"],["data-toc-item","","id","clrsidepanelbottom","cds-text","section",1,"clr-mt-24px"],["data-toc-item","","id","clrsidepanelinline","cds-text","section",1,"clr-mt-24px"],["data-toc-item","","id","clrsidepanelpinnable","cds-text","section",1,"clr-mt-24px"],["data-toc-item","","id","clrsidepanelsize","cds-text","section",1,"clr-mt-24px"],["data-toc-item","","id","clrsidepanelstaticbackdrop","cds-text","section",1,"clr-mt-24px"],["data-toc-item","","id","clrsidepanelaltclose","cds-text","section",1,"clr-mt-24px"],["tab","api"],[1,"table"],[1,"left"],[1,"hidden-xs-down"],["cds-text","medium"],[1,"hidden-sm-up"],["routerLink","/documentation/modal/api"]],template:function(o,i){o&1&&(e(0,"app-doc-tabs")(1,"app-doc-tab",0)(2,"p",1),t(3," Side panels display supplementary contextual actions and information. "),n(),e(4,"h2",2),t(5,"Usage"),n(),e(6,"p",3),t(7," Side panel component can be used similarly to a "),e(8,"a",4),t(9,"modal"),n(),t(10," that slides over the primary content. Use it for additional information or actions that complement the main content on the page. "),n(),e(11,"h2",5),t(12,"Position"),n(),e(13,"p",3),t(14," Side panels offer flexible positioning options to suit different layout needs: "),n(),e(15,"div",6)(16,"ul",7)(17,"li")(18,"b"),t(19,"Right (Default):"),n(),t(20," The standard position, where the panel slides in from the right side of the screen, overlaying the content. "),n(),e(21,"li")(22,"b"),t(23,"Bottom:"),n(),t(24," The panel slides up from the bottom of the screen. This is useful for mobile contexts or less critical information. "),n(),e(25,"li")(26,"b"),t(27,"Inline:"),n(),t(28," Using the "),e(29,"code",8),t(30,"clrModalHost"),n(),t(31," directive, panels can be positioned inside a specific container rather than covering the full page height. "),n()()(),e(32,"h2",9),t(33,"Pinning"),n(),e(34,"p",10),t(35,' The side panel has a pinning functionality, which gives the user the capability to "freeze" the panel. This is achieved through the '),e(36,"code",8),t(37,"clrSidePanelPinnable"),n(),t(38," input. Currently, the side panel pinning also depen
292ds on the "),e(39,"code",8),t(40,"clrSidePanelSize"),n(),t(41," input to work properly. When pinned, all normal ways to close the panel are blocked and it's displayed side by side with the content, instead of overlapping it. A pinnable container can also be inline. Pinning is also supported for bottom-positioned panels. "),n(),p(42,"clr-side-panel-angular-pinnable-demo",11),e(43,"h2",12),t(44,"Sizes"),n(),e(45,"p",3),t(46," There are multiple sizes for side panels. The default size is medium, however other sizes are available. Select the size best suited for the content and screen size displaying the side panel. Remember to test responsiveness. "),n(),p(47,"clr-side-panel-size-design-demo"),e(48,"h2",13),t(49,"Behavior"),n(),e(50,"p",3),t(51," Consider using side panels for the following scenarios: alerting the user, confirmation dialog boxes, and task-oriented workflows. "),n(),e(52,"div",14)(53,"div",15)(54,"div",16)(55,"app-do-dont",17),p(56,"app-themed-image",18),n(),e(57,"h3",19),t(58," Dismissing Side Panels "),n(),e(59,"p",3),t(60," There are different ways to dismiss a side panel but a user needs to intentionally make that choice. A side panel should not disappear on its own. "),n(),e(61,"p",20),t(62," Provide options using action buttons to either cancel or proceed or a close button that should eventually dismiss the side panel. "),n()(),e(63,"div",16)(64,"app-do-dont",21),p(65,"app-themed-image",18),n(),e(66,"h3",22),t(67,"Stacking Side Panels"),n(),e(68,"p",3),t(69," Side Panels should not launch other side panels. Stacking side panels makes it hard to dismiss them and confuses the user on their levels of importance and context. "),n(),e(70,"p",3),t(71," Instead of stacking, seek alternatives such as inline expansion and inline task completion within the side panel. "),n()()()(),e(72,"h2",23),t(73,"Accessibility and managing focus"),n(),e(74,"p",3),t(75," The
292VMware Accessibility team recommends forcing focus to the title of a side panel when it is first opened. "),n(),e(76,"p",3),t(77," Note that the "),e(78,"code",8),t(79,"clr-side-panel"),n(),t(80," component automatically focuses the side panel title. "),n()(),e(81,"app-doc-tab",24)(82,"h2",25),t(83,"Side Panel Component"),n(),p(84,"clr-side-panel-angular-demo"),e(85,"h3",26),t(86,"Bottom Position"),n(),e(87,"p",3),t(88," The side-panel can be positioned at the bottom of the screen using the "),e(89,"code",8),t(90,"clrSidePanelPosition"),n(),t(91," input. "),n(),p(92,"clr-side-panel-angular-bottom-demo"),e(93,"h3",27),t(94,"Inline"),n(),e(95,"p",3),t(96," The side-panel can be displayed inline in an arbitrary container instead of on the page body. This is done through the "),e(97,"code",8),t(98,"clrModalHost"),n(),t(99," directive on the desired container. "),n(),p(100,"clr-side-panel-angular-inline-demo"),e(101,"h3",28),t(102,"Pinning"),n(),e(103,"p",3),t(104,"The side-panel can be pinned to the container."),n(),p(105,"clr-side-panel-angular-pinnable-demo"),e(106,"p",3),t(107," The side-panel pinning can be pinned by default with no pin/unpin buttons. "),n(),p(108,"clr-side-panel-angular-pinned-demo"),e(109,"h3",29),t(110,"Sizes"),n(),e(111,"p",3),t(112," The component offers different sizes through the "),e(113,"code",8),t(114,"clrSidePanelSize"),n(),t(115," input. The default, empty size is medium. "),n(),p(116,"clr-side-panel-angular-size-demo"),e(117,"h3",30),t(118,"Static Backdrop"),n(),e(119,"p",3),t(120," If you want the side panel not to be closable with a click on the backdrop, use the "),e(121,"code",8),t(122,"clrSidePanelStaticBackdrop"),n(),t(123,". If "),e(124,"code",8),t(125,"true"),n(),t(126,", clicks on the background will not close the side panel. The default value is "),e(127,"code",8),t(128,"false"),n(),t(129,". "),n(),p(130,"clr-side-panel-angular-static-backdrop-demo"),e(131,"h3",31),t(132,"Alternate Close"),n(),e(133,"p",3),t(134," If you want to intercept the side panel close event, use "),e(135,"code",8),t(136,"clrSidePanelPreventClose"),n(),t(137," and "),e(138,"code",8),t(139,"clrSidePanelAlternateClose"),n(),t(140,". This can be used to request confirmation on close. "),n(),p(141,"clr-side-panel-angular-alt-close-demo"),n(),e(142,"app-doc-tab",32)(143,"h2",25),t(144,"Angular Component"),n(),e(145,"table",33)(146,"thead")(147,"tr")(148,"th",34),t(149,"Input/Output"),n(),e(150,"th",35),t(151,"Values"),n(),e(152,"th",35),t(153,"Default"),n(),e(154,"th",34),t(155,"Effect"),n()()(),e(156,"tbody")(157,"tr")(158,"td",34)(159,"b",36),t(160,"[(clrSidePanelOpen)]"),n(),e(161,"div",37),t(162,"Type: Boolean"),n()(),e(163,"td",35),t(164,"true, false"),n(),e(165,"td",35),t(166,"false"),n(),e(167,"td",34),t(168,"Two-way binding on the state of the side panel: opened or closed."),n()(),e(169,"tr")(170,"td",34)(171,"b",36),t(172,"[clrSidePanelSize]"),n(),e(173,"div",37),t(174,"Values:"),p(175,"br"),t(176,'"sm", "md";, "lg", "xl"'),n()(),e(177,"td",35),t(178,'"sm", "md", "lg", "xl"'),n(),e(179,"td",35),t(180,'"md"'),n(),e(181,"td",34),t(182,"Sets the size of the side panel. Default is medium size."),n()(),e(183,"tr")(184,"td",34)(185,"b",36),t(186,"[clrSidePanelPosition]"),n(),e(187,"div",37),t(188,"Values:"),p(189,"br"),t(190,'"right", "bottom"'),n()(),e(191,"td",35),t(192,'"right", "bottom"'),n(),e(193,"td",35),t(194,'"right"'),n(),e(195,"td",34),t(196,"Sets the position of the side panel."),n()(),e(197,"tr")(198,"td",34)(199,"b",36),t(200,"[clrSidePanelBackdrop]"),n(),e(201,"div",37),t(202,"Type: Boolean"),n()(),e(203,"td",35),t(204,"true, false"),n(),e(205,"td",35),t(206,"true"),n(),e(207,"td",34),t(208,"If false, the side panel will not have a backdrop."),n()(),e(209,"tr")(210,"td",34)(211,"b",36),t(212,"[clrSidePanelPreventClose]"),n(),e(213,"div",37),t(214,"Type: Boolean"),n()(),e(215,"td",35),t(216,"true, false"),n(),e(217,"td",35),t(218,"false"),n(),e(219,"td",34),t(220," If true, the side panel will not be closed by clicking on backdrop, close button or by the close() method. It will emit (clrSidePanelAlternateClose) instead. "),n()(),e(221,"tr")(222,"td",34)(223,"b",36),t(224,"(clrSidePanelAlternateClose)"),n()(),p(225,"td",35)(226,"td",35),e(227,"td",34),t(228,"Emits when clrSidePanelPreventClose is true and closing the side panel was attempted."),n()(),e(229,"tr")(230,"td",34)(231,"b",36),t(232,"[clrSidePanelSkipAnimation]"),n(),e(233,"div",37),t(234,"Type: String"),n()(),e(235,"td",35),t(236,'"true", "false"'),n(),e(237,"td",35),t(238,'"false"'),n(),e(239,"td",34),t(240,'If "true", the side panel state changes will not be animated.'),n()(),e(241,"tr")(242,"td",34)(243,"b",36),t(244,"[clrSidePanelCloseButtonAriaLabel]"),n(),e(245,"div",37),t(246,"Type: String"),n()(),p(247,"td",35),e(248,"td",35),t(249,'"Close"'),n(),e(250,"td",34),t(251,"Sets the "),e(252,"code"),t(253,"aria-label"),n(),t(254,` of the side panel's close button (top-right "x").`),n()(),e(255,"tr")(256,"td",34)(257,"b",36),t(258,"[clrSidePanelStaticBackdrop]"),n(),e(259,"div",37),t(260,"Type: Boolean"),n()(),e(261,"td",35),t(262,"true, false"),n(),e(263,"td",35),t(264,"true"),n(),e(265,"td",34),t(266,"If true, the side panel will not close when the user clicks outside of the side panel."),n()(),e(267,"tr")(268,"td",34)(269,"b",36),t(270,"[clrSidePanelPinnable]"),n(),e(271,"div",37),t(272,"Type: Boolean"),n()(),e(273,"td",35),t(274,"true, false"),n(),e(275,"td",35),t(276,"false"),n(),e(277,"td",34),t(278,"Enables pinning functionality of the side panel."),n()(),e(279,"tr")(280,"td",34)(281,"b",36),t(282,"[clrSidePanelPinned]"),n(),e(283,"div",37),t(284,"Type: Boolean"),n()(),e(285,"td",35),t(286,"true, false"),n(),e(287,"td",35),t(288,"false"),n(),e(289,"td",34),t(290,"If true, the panel is pinned side by side with the container content."),n()(),e(291,"tr")(292,"td",34)(293,"b",36),t(294,"clrModalHost"),n()(),p(295,"td",35)(296,"td",35),e(297,"td",34),t(298,"A directive that marks a container as the host element for the side panel."),n()()()(),e(299,"h2",25),t(300,"Style"),n(),e(301,"p"),t(302," The Side Panel component is based on the Modal, so it can be customized through the "),e(303,"a",38),t(304,"Modal"),n(),t(305," CSS Custom Properties and CSS Classes. "),n()()()),o&2&&(m(42),c("showCode",!1),m(14),c("lightSrc","/assets/images/documentation/modals/light-theme/sidepanel_do.svg")("darkSrc","/assets/images/documentation/modals/dark-theme/sidepanel_do.svg")("imageAlt","Dismissing side panels")("imageStyle","max-width: 100%"),m(9),c("lightSrc","/assets/images/documentation/modals/light-theme/sidepanel_dont.svg")("darkSrc","/assets/images/documentation/modals/dark-theme/sidepanel_dont.svg")("imageAlt","Don`t stack side panels on top of each other")("imageStyle","max-width: 100%"))},dependencies:[se,me,ie,H,N,j,G,K,X,F,R,Y,J,U],encapsulation:2})}}return l})();var ln=(()=>{class l{static{this.\u0275fac=function(o){return new(o||l)}}static{this.\u0275mod=$({type:l})}static{this.\u0275inj=Z({imports:[ne,de,pe,le.forChild([{path:"",component:Q}]),X,F,P,K,H,N,j,G,R,Y,J,U,Q]})}}return l})();export{ln as SidePanelDemoModule};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.