@ng-nest/ui 13.0.4 → 13.0.5

package/fesm2015/ng-nest-ui-doc.mjs

@@ -16,19 +16,19 @@ class XDocComponent {
         this.renderer.addClass(this.elementRef.nativeElement, XDocPrefix);
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDocComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDocComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDocComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDocComponent, selector: "x-doc", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-doc{margin:0;padding:0;padding:0 1.5rem;display:block;font-size:.875rem}.x-doc>x-anchor>.x-anchor{justify-content:center}.x-doc>x-anchor>.x-anchor>.x-anchor-content{width:calc(100% - 15rem);max-width:55rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content h1{font-size:1.5rem;font-weight:500;margin:2.25rem 0 1rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content h2{font-size:1.375rem;font-weight:500;margin:2rem 0 1rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h3{font-size:1.125rem;font-weight:500;margin:1.5rem 0 1rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h4{font-size:1rem;font-weight:500;margin:1.125rem 0 .875rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h5{font-size:.875rem;font-weight:500;margin:1rem 0 .625rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content>p{font-weight:400;margin:.875rem 0 0}.x-doc>x-anchor>.x-anchor>.x-anchor-content>ul{margin:.875rem 0}.x-doc>x-anchor>.x-anchor>.x-anchor-content>ul>li{list-style-type:circle;margin-left:1.25rem;line-height:1.75rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote{margin:0;position:relative;padding:.5rem .5rem .5rem .875rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote>p{margin:0}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-border)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>blockquote{margin-top:.875rem;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border-200);color:var(--x-text-400)}.x-doc>x-anchor>.x-anchor>.x-anchor-content li>code,.x-doc>x-anchor>.x-anchor>.x-anchor-content p>code{background-color:var(--x-primary-900);border:var(--x-border-width) solid var(--x-primary-800);padding:0 .25rem;border-radius:var(--x-border-radius)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>p>x-tree-file{font-family:Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre{display:flex;overflow:auto;width:100%}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-bash{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-text-300);color:var(--x-background-100);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-text-300);text-shadow:none}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-bash:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-text-300)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-primary{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-primary-900);color:var(--x-primary);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-primary-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-primary:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-primary)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-success{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-success-900);color:var(--x-success);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-success-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-success:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-success)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-danger{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-danger-900);color:var(--x-danger);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-danger-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-danger:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-danger)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-warning{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-warning-900);color:var(--x-warning);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-warning-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-warning:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-warning)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-info{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-info-900);color:var(--x-info);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-info-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-info:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-info)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table{width:100%;background:var(--x-background);border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr>th,.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:.5rem 1rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr:last-child>th,.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr:last-child>td{border-width:0px}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr th{white-space:nowrap;color:var(--x-text)}.x-doc>x-anchor>.x-anchor>.x-anchor-affix{padding-left:1.5rem}.x-doc>x-anchor>.x-anchor>.x-anchor-affix .x-link>span{width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDocComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDocComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDocComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDocComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: XDocComponent, selector: "x-doc", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-doc{margin:0;padding:0;padding:0 1.5rem;display:block;font-size:.875rem}.x-doc>x-anchor>.x-anchor{justify-content:center}.x-doc>x-anchor>.x-anchor>.x-anchor-content{width:calc(100% - 15rem);max-width:55rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content h1{font-size:1.5rem;font-weight:500;margin:2.25rem 0 1rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content h2{font-size:1.375rem;font-weight:500;margin:2rem 0 1rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h3{font-size:1.125rem;font-weight:500;margin:1.5rem 0 1rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h4{font-size:1rem;font-weight:500;margin:1.125rem 0 .875rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h5{font-size:.875rem;font-weight:500;margin:1rem 0 .625rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content>p{font-weight:400;margin:.875rem 0 0}.x-doc>x-anchor>.x-anchor>.x-anchor-content>ul{margin:.875rem 0}.x-doc>x-anchor>.x-anchor>.x-anchor-content>ul>li{list-style-type:circle;margin-left:1.25rem;line-height:1.75rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote{margin:0;position:relative;padding:.5rem .5rem .5rem .875rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote>p{margin:0}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-border)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>blockquote{margin-top:.875rem;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border-200);color:var(--x-text-400)}.x-doc>x-anchor>.x-anchor>.x-anchor-content li>code,.x-doc>x-anchor>.x-anchor>.x-anchor-content p>code{background-color:var(--x-primary-900);border:var(--x-border-width) solid var(--x-primary-800);padding:0 .25rem;border-radius:var(--x-border-radius)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>p>x-tree-file{font-family:Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre{display:flex;overflow:auto;width:100%}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-bash{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-text-300);color:var(--x-background-100);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-text-300);text-shadow:none}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-bash:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-text-300)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-primary{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-primary-900);color:var(--x-primary);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-primary-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-primary:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-primary)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-success{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-success-900);color:var(--x-success);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-success-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-success:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-success)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-danger{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-danger-900);color:var(--x-danger);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-danger-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-danger:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-danger)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-warning{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-warning-900);color:var(--x-warning);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-warning-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-warning:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-warning)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-info{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-info-900);color:var(--x-info);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-info-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-info:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-info)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table{width:100%;background:var(--x-background);border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr>th,.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:.5rem 1rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr:last-child>th,.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr:last-child>td{border-width:0px}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr th{white-space:nowrap;color:var(--x-text)}.x-doc>x-anchor>.x-anchor>.x-anchor-affix{padding-left:1.5rem}.x-doc>x-anchor>.x-anchor>.x-anchor-affix .x-link>span{width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDocComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-doc', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n", styles: [".x-doc{margin:0;padding:0;padding:0 1.5rem;display:block;font-size:.875rem}.x-doc>x-anchor>.x-anchor{justify-content:center}.x-doc>x-anchor>.x-anchor>.x-anchor-content{width:calc(100% - 15rem);max-width:55rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content h1{font-size:1.5rem;font-weight:500;margin:2.25rem 0 1rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content h2{font-size:1.375rem;font-weight:500;margin:2rem 0 1rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h3{font-size:1.125rem;font-weight:500;margin:1.5rem 0 1rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h4{font-size:1rem;font-weight:500;margin:1.125rem 0 .875rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content h5{font-size:.875rem;font-weight:500;margin:1rem 0 .625rem;clear:both}.x-doc>x-anchor>.x-anchor>.x-anchor-content>p{font-weight:400;margin:.875rem 0 0}.x-doc>x-anchor>.x-anchor>.x-anchor-content>ul{margin:.875rem 0}.x-doc>x-anchor>.x-anchor>.x-anchor-content>ul>li{list-style-type:circle;margin-left:1.25rem;line-height:1.75rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote{margin:0;position:relative;padding:.5rem .5rem .5rem .875rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote>p{margin:0}.x-doc>x-anchor>.x-anchor>.x-anchor-content blockquote:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-border)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>blockquote{margin-top:.875rem;background-color:var(--x-background);border-radius:var(--x-border-radius);border:var(--x-border-width) var(--x-border-style) var(--x-border-200);color:var(--x-text-400)}.x-doc>x-anchor>.x-anchor>.x-anchor-content li>code,.x-doc>x-anchor>.x-anchor>.x-anchor-content p>code{background-color:var(--x-primary-900);border:var(--x-border-width) solid var(--x-primary-800);padding:0 .25rem;border-radius:var(--x-border-radius)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>p>x-tree-file{font-family:Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre{display:flex;overflow:auto;width:100%}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-bash{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-text-300);color:var(--x-background-100);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-text-300);text-shadow:none}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-bash:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-text-300)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-primary{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-primary-900);color:var(--x-primary);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-primary-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-primary:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-primary)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-success{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-success-900);color:var(--x-success);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-success-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-success:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-success)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-danger{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-danger-900);color:var(--x-danger);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-danger-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-danger:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-danger)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-warning{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-warning-900);color:var(--x-warning);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-warning-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-warning:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-warning)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-info{flex:1;position:relative;border-radius:var(--x-border-radius);padding:.875rem 1rem;background-color:var(--x-info-900);color:var(--x-info);border:var(--x-border-width) var(--x-border-style) var(--x-border);border-color:var(--x-info-800);text-shadow:none;padding:.5rem .5rem .5rem .875rem;white-space:normal;font-family:var(--x-font-family)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>pre code.language-info:before{content:\" \";position:absolute;top:calc(var(--x-border-width) * -1);left:calc(var(--x-border-width) * -1);height:calc(100% + (var(--x-border-width) * 2));width:.25rem;border-top-left-radius:var(--x-border-radius);border-bottom-left-radius:var(--x-border-radius);background-color:var(--x-info)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table{width:100%;background:var(--x-background);border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr>th,.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:.5rem 1rem}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr:last-child>th,.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr:last-child>td{border-width:0px}.x-doc>x-anchor>.x-anchor>.x-anchor-content>table tr th{white-space:nowrap;color:var(--x-text)}.x-doc>x-anchor>.x-anchor>.x-anchor-affix{padding-left:1.5rem}.x-doc>x-anchor>.x-anchor>.x-anchor-affix .x-link>span{width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
 
 class XDocModule {
 }
-/** @nocollapse */ /** @nocollapse */ XDocModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDocModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ XDocModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDocModule, declarations: [XDocComponent], imports: [CommonModule], exports: [XDocComponent] });
-/** @nocollapse */ /** @nocollapse */ XDocModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDocModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDocModule, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDocModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDocModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XDocModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDocModule, declarations: [XDocComponent], imports: [CommonModule], exports: [XDocComponent] });
+/** @nocollapse */ /** @nocollapse */ XDocModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDocModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDocModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XDocComponent],

package/fesm2015/ng-nest-ui-drawer.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, HostBinding, HostListener, Directive, Optional, TemplateRef, Injectable, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Optional, Inject, ViewChild, HostListener, Directive, TemplateRef, Injectable, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i3 from '@ng-nest/ui/core';
-import { XProperty, XInputBoolean, XWithConfig, XIsChange, XIsEmpty, XSlideAnimation, fillDefault } from '@ng-nest/ui/core';
+import { XProperty, XInputBoolean, XWithConfig, XIsChange, XClearClass, XIsEmpty, XSlideAnimation, fillDefault } from '@ng-nest/ui/core';
 import * as i1 from '@angular/cdk/overlay';
 import * as i2 from '@ng-nest/ui/portal';
 import { XPortalModule } from '@ng-nest/ui/portal';
@@ -42,8 +42,8 @@ class XDrawerProperty extends XProperty {
         this.visibleChange = new EventEmitter();
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDrawerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDrawerProperty, selector: "ng-component", inputs: { title: "title", visible: "visible", placement: "placement", size: "size", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ /** @nocollapse */ XDrawerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDrawerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerProperty, selector: "ng-component", inputs: { title: "title", visible: "visible", placement: "placement", size: "size", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className" }, outputs: { close: "close", visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XInputBoolean()
 ], XDrawerProperty.prototype, "visible", void 0);
@@ -62,7 +62,7 @@ __decorate([
 __decorate([
     XWithConfig(X_DRAWER_CONFIG_NAME, '')
 ], XDrawerProperty.prototype, "className", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], propDecorators: { title: [{
@@ -83,10 +83,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Output
             }], visibleChange: [{
                 type: Output
+            }] } });
+/**
+ * Drawer Container
+ * @selector x-drawer-container
+ * @decorator component
+ */
+const XDrawerContainerPrefix = 'x-drawer-container';
+const X_DRAWER_CONTAINER = new InjectionToken('X_DRAWER_CONTAINER');
+/**
+ * Drawer Container Property
+ */
+class XDrawerContainerProperty extends XProperty {
+}
+/** @nocollapse */ /** @nocollapse */ XDrawerContainerProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDrawerContainerProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerContainerProperty, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerContainerProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }] });
+
+class XDrawerContainerComponent extends XDrawerContainerProperty {
+    constructor() {
+        super();
+        this._has = true;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerContainerComponent, selector: "x-drawer-container", host: { properties: { "class.x-drawer-container": "this._has" } }, providers: [
+        {
+            provide: X_DRAWER_CONTAINER,
+            useExisting: XDrawerContainerComponent
+        }
+    ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-drawer-container{margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-drawer-container .x-drawer{position:absolute;display:block;outline:0;z-index:2;transition:transform .2s ease-in,visibility .2s ease-in;visibility:hidden}.x-drawer-container .x-drawer-left{transform:translate(-100%);left:0;top:0}.x-drawer-container .x-drawer-right{transform:translate(100%);right:0;top:0}.x-drawer-container .x-drawer-top{transform:translateY(-100%);top:0;left:0}.x-drawer-container .x-drawer-bottom{transform:translateY(100%);bottom:0;left:0}.x-drawer-container .x-drawer-visible{transform:translate(0);visibility:inherit}.x-drawer-container .x-drawer-visible .x-drawer-backdrop{opacity:1;z-index:1}.x-drawer-container .x-drawer-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;pointer-events:auto;background:rgba(0,0,0,.32);transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-drawer-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: X_DRAWER_CONTAINER,
+                            useExisting: XDrawerContainerComponent
+                        }
+                    ], template: "<ng-content></ng-content>\r\n", styles: [".x-drawer-container{margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:block;overflow:hidden}.x-drawer-container .x-drawer{position:absolute;display:block;outline:0;z-index:2;transition:transform .2s ease-in,visibility .2s ease-in;visibility:hidden}.x-drawer-container .x-drawer-left{transform:translate(-100%);left:0;top:0}.x-drawer-container .x-drawer-right{transform:translate(100%);right:0;top:0}.x-drawer-container .x-drawer-top{transform:translateY(-100%);top:0;left:0}.x-drawer-container .x-drawer-bottom{transform:translateY(100%);bottom:0;left:0}.x-drawer-container .x-drawer-visible{transform:translate(0);visibility:inherit}.x-drawer-container .x-drawer-visible .x-drawer-backdrop{opacity:1;z-index:1}.x-drawer-container .x-drawer-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;pointer-events:auto;background:rgba(0,0,0,.32);transition:opacity .4s cubic-bezier(.25,.8,.25,1),z-index 0 ease-in .4s;opacity:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
+                type: HostBinding,
+                args: ['class.x-drawer-container']
             }] } });
 
 class XDrawerComponent extends XDrawerProperty {
-    constructor(renderer, elementRef, cdr, overlay, portalService, viewContainerRef, configService) {
+    constructor(renderer, elementRef, cdr, overlay, portalService, viewContainerRef, configService, container) {
         super();
         this.renderer = renderer;
         this.elementRef = elementRef;
@@ -95,14 +139,25 @@ class XDrawerComponent extends XDrawerProperty {
         this.portalService = portalService;
         this.viewContainerRef = viewContainerRef;
         this.configService = configService;
+        this.container = container;
         this.back$ = null;
+        this.width = '100%';
+        this.height = '100%';
+    }
+    get getVisible() {
+        return this.visible;
     }
     ngOnInit() {
         this.setClassMap();
+        this.setSize();
     }
     ngOnChanges(simples) {
-        const { visible } = simples;
+        const { visible, placement } = simples;
         XIsChange(visible) && this.setVisible();
+        if (XIsChange(placement)) {
+            this.setClassMap();
+            this.setSize();
+        }
     }
     ngOnDestroy() {
         this.unsubscribe();
@@ -112,11 +167,22 @@ class XDrawerComponent extends XDrawerProperty {
         (_a = this.back$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
     setClassMap() {
+        XClearClass(this.classMap);
         this.classMap = {
             [`${XDrawerPrefix}-${this.placement}`]: !XIsEmpty(this.placement),
             [`${XDrawerPrefix}-no-title`]: XIsEmpty(this.title)
         };
     }
+    setSize() {
+        if (this.container)
+            [this.width, this.height] = this.getSize();
+    }
+    getSize() {
+        return [
+            this.placement === 'left' || this.placement === 'right' ? this.size : '100%',
+            this.placement === 'top' || this.placement === 'bottom' ? this.size : '100%'
+        ];
+    }
     setVisible() {
         if (this.visible) {
             this.createPortal();
@@ -126,14 +192,15 @@ class XDrawerComponent extends XDrawerProperty {
         }
     }
     createPortal() {
-        const width = this.placement === 'left' || this.placement === 'right' ? this.size : '100%';
-        const height = this.placement === 'top' || this.placement === 'bottom' ? this.size : '100%';
+        if (this.container)
+            return;
+        const [width, height] = this.getSize();
         this.portal = this.portalService.attach({
             content: this.drawerTpl,
             viewContainerRef: this.viewContainerRef,
             overlayConfig: {
                 hasBackdrop: true,
-                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                scrollStrategy: this.overlay.scrollStrategies.block(),
                 positionStrategy: this.portalService.setPosition(this.placement, width, height)
             }
         });
@@ -146,27 +213,41 @@ class XDrawerComponent extends XDrawerProperty {
     }
     closePortal() {
         var _a, _b;
-        if (this.portalAttached()) {
-            (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
-            this.unsubscribe();
+        if (this.container) {
             this.visibleChange.emit(this.visible);
             this.close.emit();
-            return true;
         }
-        return false;
+        else {
+            if (this.portalAttached()) {
+                (_b = (_a = this.portal) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+                this.unsubscribe();
+                this.visibleChange.emit(this.visible);
+                this.close.emit();
+            }
+        }
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.XPortalService }, { token: i0.ViewContainerRef }, { token: i3.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDrawerComponent, selector: "x-drawer", viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-drawer{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], components: [{ type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.XPortalService }, { token: i0.ViewContainerRef }, { token: i3.XConfigService }, { token: X_DRAWER_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerComponent, selector: "x-drawer", host: { properties: { "class.x-drawer-visible": "this.getVisible" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer-backdrop\" *ngIf=\"container\" (click)=\"closePortal()\"></div>\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [class.x-drawer-visible]=\"visible\"\r\n    [@x-slide-animation]=\"placement\"\r\n  >\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-container *ngIf=\"container\">\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n</ng-container>\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"], components: [{ type: i4.XButtonComponent, selector: "x-button" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XDrawerPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer\" [ngClass]=\"classMap\" [@x-slide-animation]=\"placement\">\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-drawer{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.XPortalService }, { type: i0.ViewContainerRef }, { type: i3.XConfigService }]; }, propDecorators: { drawerTpl: [{
+            args: [{ selector: `${XDrawerPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template #drawerTpl>\r\n  <div class=\"x-drawer-backdrop\" *ngIf=\"container\" (click)=\"closePortal()\"></div>\r\n  <div\r\n    class=\"x-drawer\"\r\n    [ngClass]=\"classMap\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [class.x-drawer-visible]=\"visible\"\r\n    [@x-slide-animation]=\"placement\"\r\n  >\r\n    <div class=\"x-drawer-header\" *ngIf=\"title\">\r\n      <div class=\"x-drawer-title\">\r\n        <ng-container *xOutlet=\"title\">{{ title }}</ng-container>\r\n      </div>\r\n      <x-button class=\"x-drawer-close\" icon=\"fto-x\" (click)=\"closePortal()\" onlyIcon closable></x-button>\r\n    </div>\r\n    <div class=\"x-drawer-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-container *ngIf=\"container\">\r\n  <ng-container *ngTemplateOutlet=\"drawerTpl\"></ng-container>\r\n</ng-container>\r\n", styles: [".x-drawer{margin:0;padding:0;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}.x-drawer-header{padding:1rem 1rem .5rem}.x-drawer-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-close{position:absolute;top:.425rem;right:.425rem}.x-drawer-title{padding:0}.x-drawer-content{padding:0 1rem 1rem;height:calc(100% - 3rem);overflow:auto}.x-drawer-no-title .x-drawer-content{padding:.5rem 1rem}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.XPortalService }, { type: i0.ViewContainerRef }, { type: i3.XConfigService }, { type: XDrawerContainerComponent, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [X_DRAWER_CONTAINER]
+                    }] }];
+    }, propDecorators: { getVisible: [{
+                type: HostBinding,
+                args: ['class.x-drawer-visible']
+            }], drawerTpl: [{
                 type: ViewChild,
                 args: ['drawerTpl', { static: true }]
             }] } });
 
-class XDrawerContainerComponent extends BasePortalOutlet {
+class XDrawerPortalComponent extends BasePortalOutlet {
     constructor() {
         super();
         this._has = true;
@@ -191,14 +272,14 @@ class XDrawerContainerComponent extends BasePortalOutlet {
         return this.portalOutlet.attachTemplatePortal(portal);
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ XDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: XDrawerContainerComponent, selector: "x-drawer-container", host: { listeners: { "@x-slide-animation.done": "done($event)", "@x-slide-animation.start": "start($event)" }, properties: { "class.x-drawer-container": "this._has", "@x-slide-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-container{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-container-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-container-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerContainerComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDrawerPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XDrawerPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerPortalComponent, selector: "x-drawer-portal", host: { listeners: { "@x-slide-animation.done": "done($event)", "@x-slide-animation.start": "start($event)" }, properties: { "class.x-drawer-portal": "this._has", "@x-slide-animation": "this.placement" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-portal{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-portal-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"], directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XSlideAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerPortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-drawer-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-container{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-container-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-container-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"] }]
+            args: [{ selector: 'x-drawer-portal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XSlideAnimation], template: "<ng-template cdkPortalOutlet></ng-template>\r\n", styles: [".x-drawer-portal{margin:0;padding:0;height:100%;width:100%;background-color:var(--x-background);position:relative;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);overflow:auto;padding:1rem}.x-drawer-portal-title{display:block;margin:0 0 .5rem;font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-drawer-portal-content{display:block;margin:0 -1rem;padding:0 1rem;overflow:auto}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _has: [{
                 type: HostBinding,
-                args: ['class.x-drawer-container']
+                args: ['class.x-drawer-portal']
             }], placement: [{
                 type: HostBinding,
                 args: ['@x-slide-animation']
@@ -237,9 +318,9 @@ class XDrawerCloseDirective {
         this.drawerRef && this.drawerRef.close();
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerCloseDirective, deps: [{ token: XDrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDrawerCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDrawerCloseDirective, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerCloseDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDrawerCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerCloseDirective, deps: [{ token: XDrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDrawerCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerCloseDirective, selector: "[x-drawer-close]", host: { listeners: { "click": "onCloseClick($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-drawer-close]`
@@ -257,32 +338,32 @@ class XDrawerTitleDirective {
         this._has = true;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDrawerTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDrawerTitleDirective, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-container-title": "this._has" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerTitleDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDrawerTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDrawerTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerTitleDirective, selector: "[x-drawer-title]", host: { properties: { "class.x-drawer-portal-title": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-drawer-title]`
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
-                args: ['class.x-drawer-container-title']
+                args: ['class.x-drawer-portal-title']
             }] } });
 class XDrawerContentDirective {
     constructor() {
         this._has = true;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ XDrawerContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: XDrawerContentDirective, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-container-content": "this._has" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerContentDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDrawerContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDrawerContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: XDrawerContentDirective, selector: "[x-drawer-content], x-drawer-content", host: { properties: { "class.x-drawer-portal-content": "this._has" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-drawer-content], x-drawer-content`
                 }]
         }], propDecorators: { _has: [{
                 type: HostBinding,
-                args: ['class.x-drawer-container-content']
+                args: ['class.x-drawer-portal-content']
             }] } });
 
 class XDrawerService {
@@ -304,12 +385,12 @@ class XDrawerService {
         const width = ['left', 'right'].includes(option.placement) ? option.size : '100%';
         const height = ['top', 'bottom'].includes(option.placement) ? option.size : '100%';
         const portal = this.portalService.attach({
-            content: XDrawerContainerComponent,
+            content: XDrawerPortalComponent,
             viewContainerRef: option.viewContainerRef,
             overlayConfig: {
                 hasBackdrop: option.hasBackdrop,
                 panelClass: option.className,
-                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                scrollStrategy: this.overlay.scrollStrategies.block(),
                 positionStrategy: this.portalService.setPosition(option.placement, width, height)
             }
         });
@@ -334,23 +415,30 @@ class XDrawerService {
         return drawerRef;
     }
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerService, deps: [{ token: i2.XPortalService }, { token: i3.XConfigService }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ XDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerService, decorators: [{
+/** @nocollapse */ /** @nocollapse */ XDrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerService, deps: [{ token: i2.XPortalService }, { token: i3.XConfigService }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ XDrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i2.XPortalService }, { type: i3.XConfigService }, { type: i1.Overlay }]; } });
 
 class XDrawerModule {
 }
-/** @nocollapse */ /** @nocollapse */ XDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ XDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerModule, declarations: [XDrawerComponent,
+/** @nocollapse */ /** @nocollapse */ XDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerModule, declarations: [XDrawerComponent,
         XDrawerCloseDirective,
         XDrawerTitleDirective,
         XDrawerContentDirective,
+        XDrawerPortalComponent,
         XDrawerContainerComponent,
-        XDrawerProperty], imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule], exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent] });
-/** @nocollapse */ /** @nocollapse */ XDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerModule, providers: [XDrawerService], imports: [[CommonModule, XOutletModule, XButtonModule, XPortalModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: XDrawerModule, decorators: [{
+        XDrawerProperty,
+        XDrawerContainerProperty], imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule], exports: [XDrawerComponent,
+        XDrawerCloseDirective,
+        XDrawerTitleDirective,
+        XDrawerContentDirective,
+        XDrawerPortalComponent,
+        XDrawerContainerComponent] });
+/** @nocollapse */ /** @nocollapse */ XDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerModule, providers: [XDrawerService], imports: [[CommonModule, XOutletModule, XButtonModule, XPortalModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: XDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -358,10 +446,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         XDrawerCloseDirective,
                         XDrawerTitleDirective,
                         XDrawerContentDirective,
+                        XDrawerPortalComponent,
                         XDrawerContainerComponent,
-                        XDrawerProperty
+                        XDrawerProperty,
+                        XDrawerContainerProperty
+                    ],
+                    exports: [
+                        XDrawerComponent,
+                        XDrawerCloseDirective,
+                        XDrawerTitleDirective,
+                        XDrawerContentDirective,
+                        XDrawerPortalComponent,
+                        XDrawerContainerComponent
                     ],
-                    exports: [XDrawerComponent, XDrawerCloseDirective, XDrawerTitleDirective, XDrawerContentDirective, XDrawerContainerComponent],
                     imports: [CommonModule, XOutletModule, XButtonModule, XPortalModule],
                     providers: [XDrawerService]
                 }]
@@ -371,5 +468,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { XDrawerCloseDirective, XDrawerComponent, XDrawerContainerComponent, XDrawerContentDirective, XDrawerModule, XDrawerPrefix, XDrawerProperty, XDrawerRef, XDrawerService, XDrawerTitleDirective, X_DRAWER_CONFIG_NAME, X_DRAWER_DATA };
+export { XDrawerCloseDirective, XDrawerComponent, XDrawerContainerComponent, XDrawerContainerPrefix, XDrawerContainerProperty, XDrawerContentDirective, XDrawerModule, XDrawerPortalComponent, XDrawerPrefix, XDrawerProperty, XDrawerRef, XDrawerService, XDrawerTitleDirective, X_DRAWER_CONFIG_NAME, X_DRAWER_CONTAINER, X_DRAWER_DATA };
 //# sourceMappingURL=ng-nest-ui-drawer.mjs.map