import{Hd as d,Wb as i,Xb as t,Yb as a,tc as e,yb as m}from"./chunk-AQ27DSQO.js";import"./chunk-EQDQRRRY.js";var l=class n{static \u0275fac=function(o){return new(o||n)};static \u0275cmp=m({type:n,selectors:[["app-ui-offcanvas"]],decls:247,vars:0,consts:[[1,"page-header"],[1,"page-title"],[1,"row"],[1,"col-xl-6"],[1,"card"],[1,"card-body","card-buttons"],[1,"header-title"],[1,"button-list"],["data-bs-toggle","offcanvas","href","#offcanvasExample","role","button","aria-controls","offcanvasExample",1,"btn","btn-primary","mt-1","me-1"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasExample","aria-controls","offcanvasExample",1,"btn","btn-primary","mt-1"],["tabindex","-1","id","offcanvasExample","aria-labelledby","offcanvasExampleLabel",1,"offcanvas","offcanvas-start"],[1,"offcanvas-header"],["id","offcanvasExampleLabel",1,"offcanvas-title"],["type","button","data-bs-dismiss","offcanvas","aria-label","Close",1,"btn-close","text-reset"],[1,"offcanvas-body"],[1,"mt-3"],[1,""],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasScrolling","aria-controls","offcanvasScrolling",1,"btn","btn-primary","mt-2","me-1"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasWithBackdrop","aria-controls","offcanvasWithBackdrop",1,"btn","btn-primary","mt-2","me-1"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasWithBothOptions","aria-controls","offcanvasWithBothOptions",1,"btn","btn-primary","mt-2"],["data-bs-scroll","true","data-bs-backdrop","false","tabindex","-1","id","offcanvasScrolling","aria-labelledby","offcanvasScrollingLabel",1,"offcanvas","offcanvas-start"],["id","offcanvasScrollingLabel",1,"offcanvas-title"],[1,"ps-3"],["tabindex","-1","id","offcanvasWithBackdrop","aria-labelledby","offcanvasWithBackdropLabel",1,"offcanvas","offcanvas-start"],["id","offcanvasWithBackdropLabel",1,"offcanvas-title"],["data-bs-scroll","true","tabindex","-1","id","offcanvasWithBothOptions","aria-labelledby","offcanvasWithBothOptionsLabel",1,"offcanvas","offcanvas-start"],["id","offcanvasWithBothOptionsLabel",1,"offcanvas-title"],[1,"ps-0","mb-3"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasTop","aria-controls","offcanvasTop",1,"btn","btn-primary","mt-2","me-1"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasRight","aria-controls","offcanvasRight",1,"btn","btn-primary","mt-2","me-1"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasBottom","aria-controls","offcanvasBottom",1,"btn","btn-primary","mt-2","me-1"],["type","button","data-bs-toggle","offcanvas","data-bs-target","#offcanvasLeft","aria-controls","offcanvasLeft",1,"btn","btn-primary","mt-2"],["tabindex","-1","id","offcanvasTop","aria-labelledby","offcanvasTopLabel",1,"offcanvas","offcanvas-top"],["id","offcanvasTopLabel"],["tabindex","-1","id","offcanvasRight","aria-labelledby","offcanvasRightLabel",1,"offcanvas","offcanvas-end"],["id","offcanvasRightLabel"],["tabindex","-1","id","offcanvasBottom","aria-labelledby","offcanvasBottomLabel",1,"offcanvas","offcanvas-bottom"],["id","offcanvasBottomLabel",1,"offcanvas-title"],["tabindex","-1","id","offcanvasLeft","aria-labelledby","offcanvasLeftLabel",1,"offcanvas","offcanvas-start"],["id","offcanvasLeftLabel"]],template:function(o,r){o&1&&(i(0,"div",0)(1,"div",1)(2,"h4"),e(3,"Offcanvas"),t()()(),i(4,"div",2)(5,"div",3)(6,"div",4)(7,"div",5)(8,"h4",6),e(9,"Offcanvas"),t(),i(10,"p"),e(11,"You can use a link with the "),i(12,"code"),e(13,"href"),t(),e(14," attribute, or a button with the "),i(15,"code"),e(16,"data-bs-target"),t(),e(17," attribute. In both cases, the "),i(18,"code"),e(19,'data-bs-toggle="offcanvas"'),t(),e(20," is required."),t(),i(21,"div",7)(22,"a",8),e(23," Link with href "),t(),i(24,"button",9),e(25," Button with data-bs-target "),t()(),i(26,"div",10)(27,"div",11)(28,"h5",12),e(29,"Offcanvas"),t(),a(30,"button",13),t(),i(31,"div",14)(32,"div"),e(33," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(34,"h5",15),e(35,"List"),t(),i(36,"ul",16)(37,"li",16),e(38,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(39,"li",16),e(40,"Neque porro quisquam est, qui dolorem"),t(),i(41,"li",16),e(42,"Quis autem vel eum iure qui in ea"),t()(),i(43,"ul",16)(44,"li",16),e(45,"At vero eos et accusamus et iusto odio dignissimos"),t(),i(46,"li",16),e(47,"Et harum quidem rerum facilis"),t(),i(48,"li",16),e(49,"Temporibus autem quibusdam et aut officiis"),t()()()()()(),i(50,"div",4)(51,"div",5)(52,"h4",6),e(53,"Offcanvas Backdrop"),t(),i(54,"p"),e(55,"Scrolling the "),i(56,"code"),e(57,"<body>"),t(),e(58," element is disabled when an offcanvas and its backdrop are visible. Use the "),i(59,"code"),e(60,"data-bs-scroll"),t(),e(61," attribute to toggle "),i(62,"code"),e(63,"<body>"),t(),e(64," scrolling and "),i(65,"code"),e(66,"data-bs-backdrop"),t(),e(67," to toggle the backdrop."),t(),i(68,"div",7)(69,"button",17),e(70,"Enable body scrolling"),t(),i(71,"button",18),e(72,"Enable backdrop (default)"),t(),i(73,"button",19),e(74,"Enable both scrolling & backdrop"),t()(),i(75,"div",20)(76,"div",11)(77,"h5",21),e(78,"Colored with scrolling"),t(),a(79,"button",13),t(),i(80,"div",14)(81,"div"),e(82," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(83,"h5",15),e(84,"List"),t(),i(85,"ul",22)(86,"li",16),e(87,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(88,"li",16),e(89,"Neque porro quisquam est, qui dolorem"),t(),i(90,"li",16),e(91,"Quis autem vel eum iure qui in ea"),t()(),i(92,"ul",22)(93,"li",16),e(94,"At vero eos et accusamus et iusto odio dignissimos"),t(),i(95,"li",16),e(96,"Et harum quidem rerum facilis"),t(),i(97,"li",16),e(98,"Temporibus autem quibusdam et aut officiis"),t()()()(),i(99,"div",23)(100,"div",11)(101,"h5",24),e(102,"Offcanvas with backdrop"),t(),a(103,"button",13),t(),i(104,"div",14)(105,"div"),e(106," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(107,"h5",15),e(108,"List"),t(),i(109,"ul",22)(110,"li",16),e(111,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(112,"li",16),e(113,"Neque porro quisquam est, qui dolorem"),t(),i(114,"li",16),e(115,"Quis autem vel eum iure qui in ea"),t()(),i(116,"ul",22)(117,"li",16),e(118,"At vero eos et accusamus et iusto odio dignissimos"),t(),i(119,"li",16),e(120,"Et harum quidem rerum facilis"),t(),i(121,"li",16),e(122,"Temporibus autem quibusdam et aut officiis"),t()()()(),i(123,"div",25)(124,"div",11)(125,"h5",26),e(126,"Backdroped with scrolling"),t(),a(127,"button",13),t(),i(128,"div",14)(129,"div"),e(130," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(131,"h5",15),e(132,"List"),t(),i(133,"ul",22)(134,"li",16),e(135,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(136,"li",16),e(137,"Neque porro quisquam est, qui dolorem"),t(),i(138,"li",16),e(139,"Quis autem vel eum iure qui in ea"),t()(),i(140,"ul",22)(141,"li",16),e(142,"At vero eos et accusamus et iusto odio dignissimos"),t(),i(143,"li",16),e(144,"Et harum quidem rerum facilis"),t(),i(145,"li",16),e(146,"Temporibus autem quibusdam et aut officiis"),t()()()()()()(),i(147,"div",3)(148,"div",4)(149,"div",5)(150,"h4",6),e(151,"Offcanvas Placement"),t(),i(152,"ul",27)(153,"li")(154,"code"),e(155,".offcanvas-start"),t(),e(156," places offcanvas on the left of the viewport (shown above)"),t(),i(157,"li")(158,"code"),e(159,".offcanvas-end"),t(),e(160," places offcanvas on the right of the viewport"),t(),i(161,"li")(162,"code"),e(163,".offcanvas-top"),t(),e(164," places offcanvas on the top of the viewport"),t(),i(165,"li")(166,"code"),e(167,".offcanvas-bottom"),t(),e(168," places offcanvas on the bottom of the viewport"),t()(),i(169,"div")(170,"div",7)(171,"button",28),e(172,"Toggle Top offcanvas"),t(),i(173,"button",29),e(174,"Toggle right offcanvas"),t(),i(175,"button",30),e(176,"Toggle bottom offcanvas"),t(),i(177,"button",31),e(178,"Toggle Left offcanvas"),t()(),i(179,"div",32)(180,"div",11)(181,"h5",33),e(182,"Offcanvas Top"),t(),a(183,"button",13),t(),i(184,"div",14)(185,"div"),e(186," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(187,"h5",15),e(188,"List"),t(),i(189,"ul",22)(190,"li",16),e(191,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(192,"li",16),e(193,"Neque porro quisquam est, qui dolorem"),t(),i(194,"li",16),e(195,"Quis autem vel eum iure qui in ea"),t()()()(),i(196,"div",34)(197,"div",11)(198,"h5",35),e(199,"Offcanvas right"),t(),a(200,"button",13),t(),i(201,"div",14)(202,"div"),e(203," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(204,"h5",15),e(205,"List"),t(),i(206,"ul",22)(207,"li",16),e(208,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(209,"li",16),e(210,"Neque porro quisquam est, qui dolorem"),t(),i(211,"li",16),e(212,"Quis autem vel eum iure qui in ea"),t()()()(),i(213,"div",36)(214,"div",11)(215,"h5",37),e(216,"Offcanvas bottom"),t(),a(217,"button",13),t(),i(218,"div",14)(219,"div"),e(220," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(221,"h5",15),e(222,"List"),t(),i(223,"ul",22)(224,"li",16),e(225,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(226,"li",16),e(227,"Neque porro quisquam est, qui dolorem"),t(),i(228,"li",16),e(229,"Quis autem vel eum iure qui in ea"),t()()()(),i(230,"div",38)(231,"div",11)(232,"h5",39),e(233,"Offcanvas Left"),t(),a(234,"button",13),t(),i(235,"div",14)(236,"div"),e(237," Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. "),t(),i(238,"h5",15),e(239,"List"),t(),i(240,"ul",22)(241,"li",16),e(242,"Nemo enim ipsam voluptatem quia aspernatur"),t(),i(243,"li",16),e(244,"Neque porro quisquam est, qui dolorem"),t(),i(245,"li",16),e(246,"Quis autem vel eum iure qui in ea"),t()()()()()()()()())},dependencies:[d],encapsulation:2})};export{l as UiOffcanvasComponent};