cat-documents-ng 0.2.90 → 0.2.91

package/README.md

@@ -320,102 +320,3 @@ folderBlocks: Data sourced from FOLDERPANEL for folder blocks.
 
 ## Additional Resources
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
-
-## Troubleshooting
-
-### Confirmation Dialog Not Visible
-
-If you experience issues where confirmation dialogs are not visible when the library is installed in your project, this is likely due to z-index conflicts. Here are the solutions:
-
-#### Solution 1: Import Global Styles
-
-Import the library's global styles in your main `styles.scss` or `angular.json`:
-
-```scss
-// In your styles.scss
-@import '~cat-document-lib/lib/styles.scss';
-```
-
-#### Solution 2: Configure Z-Index in angular.json
-
-Add the library's styles to your `angular.json` file:
-
-```json
-{
-  "projects": {
-    "your-project": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": [
-              "src/styles.scss",
-              "node_modules/cat-document-lib/lib/styles.scss"
-            ]
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-#### Solution 3: Override Z-Index in Host Project
-
-If the above solutions don't work, you can override the z-index values in your host project's CSS:
-
-```scss
-/* Ensure confirmation dialogs are visible */
-.p-confirm-dialog {
-  z-index: 10001 !important;
-}
-
-.p-dialog-mask {
-  z-index: 10000 !important;
-}
-
-.p-sidebar {
-  z-index: 10000 !important;
-}
-```
-
-#### Solution 4: Use Higher Base Z-Index
-
-When using the sidebar component, you can specify a higher base z-index:
-
-```html
-<lib-sidebar 
-  [baseZIndex]="20000"
-  [autoZIndex]="false">
-  <!-- content -->
-</lib-sidebar>
-```
-
-### Common Issues
-
-1. **Dialog appears behind other elements**: This is usually a z-index issue. Use Solution 1 or 2 above.
-2. **Sidebar not visible**: Check if the `visible` property is properly bound and the component is not hidden by CSS.
-3. **Confirmation dialog not showing**: Ensure PrimeNG's ConfirmationService is properly configured in your app.
-
-## API Reference
-
-### SidebarComponent
-
-The main sidebar component with the following inputs:
-
-- `visible`: Boolean to control sidebar visibility
-- `position`: 'left' | 'right' - Sidebar position
-- `width`: String for sidebar width
-- `baseZIndex`: Number for z-index (default: 10000)
-- `autoZIndex`: Boolean to auto-manage z-index (default: false)
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests
-5. Submit a pull request
-
-## License
-
-This project is licensed under the MIT License.

package/fesm2022/cat-documents-ng.mjs

@@ -3389,67 +3389,11 @@ class ConfirmationDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ConfirmationDialogComponent, isStandalone: false, selector: "app-confirmation-dialog", inputs: { confirmationOptions: "confirmationOptions" }, ngImport: i0, template: `
-    <div *ngIf="isVisible" class="custom-confirmation-overlay">
-      <div class="custom-confirmation-dialog">
-        <div class="dialog-header">
-          <i *ngIf="currentOptions.icon" [class]="currentOptions.icon"></i>
-          <h3>{{ currentOptions.header }}</h3>
-        </div>
-        <div class="dialog-content">
-          <p>{{ currentOptions.message }}</p>
-        </div>
-        <div class="dialog-actions">
-          <button 
-            type="button" 
-            class="btn btn-secondary"
-            (click)="onReject()">
-            <i *ngIf="currentOptions.rejectIcon" [class]="currentOptions.rejectIcon"></i>
-            {{ currentOptions.rejectLabel }}
-          </button>
-          <button 
-            type="button" 
-            [class]="'btn ' + currentOptions.acceptButtonClass"
-            (click)="onAccept()">
-            <i *ngIf="currentOptions.acceptIcon" [class]="currentOptions.acceptIcon"></i>
-            {{ currentOptions.acceptLabel }}
-          </button>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".custom-confirmation-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10001}.custom-confirmation-dialog{background:#fff;border-radius:8px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 20px #00000026}.dialog-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e9ecef}.dialog-header h3{margin:0;font-size:1.25rem;font-weight:600}.dialog-content{margin-bottom:1.5rem}.dialog-content p{margin:0;color:#495057;line-height:1.5}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ConfirmationDialogComponent, isStandalone: false, selector: "app-confirmation-dialog", inputs: { confirmationOptions: "confirmationOptions" }, ngImport: i0, template: "<div *ngIf=\"isVisible\" class=\"custom-confirmation-overlay\">\r\n  <div class=\"custom-confirmation-dialog\">\r\n    <div class=\"dialog-header\">\r\n      <i *ngIf=\"currentOptions.icon\" [class]=\"currentOptions.icon\"></i>\r\n      <h3>{{ currentOptions.header }}</h3>\r\n    </div>\r\n    <div class=\"dialog-content\">\r\n      <p>{{ currentOptions.message }}</p>\r\n    </div>\r\n    <div class=\"dialog-actions\">\r\n      <button \r\n        type=\"button\" \r\n        pButton\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"onReject()\">\r\n        <i *ngIf=\"currentOptions.rejectIcon\" [class]=\"currentOptions.rejectIcon\"></i>\r\n        {{ currentOptions.rejectLabel }}\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        pButton\r\n        [class]=\"'btn ' + currentOptions.acceptButtonClass\"\r\n        (click)=\"onAccept()\">\r\n        <i *ngIf=\"currentOptions.acceptIcon\" [class]=\"currentOptions.acceptIcon\"></i>\r\n        {{ currentOptions.acceptLabel }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".custom-confirmation-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10001}.custom-confirmation-dialog{background:#fff;border-radius:8px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 20px #00000026}.dialog-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e9ecef}.dialog-header h3{margin:0;font-size:1.25rem;font-weight:600}.dialog-content{margin-bottom:1.5rem}.dialog-content p{margin:0;color:#495057;line-height:1.5}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirmation-dialog', template: `
-    <div *ngIf="isVisible" class="custom-confirmation-overlay">
-      <div class="custom-confirmation-dialog">
-        <div class="dialog-header">
-          <i *ngIf="currentOptions.icon" [class]="currentOptions.icon"></i>
-          <h3>{{ currentOptions.header }}</h3>
-        </div>
-        <div class="dialog-content">
-          <p>{{ currentOptions.message }}</p>
-        </div>
-        <div class="dialog-actions">
-          <button 
-            type="button" 
-            class="btn btn-secondary"
-            (click)="onReject()">
-            <i *ngIf="currentOptions.rejectIcon" [class]="currentOptions.rejectIcon"></i>
-            {{ currentOptions.rejectLabel }}
-          </button>
-          <button 
-            type="button" 
-            [class]="'btn ' + currentOptions.acceptButtonClass"
-            (click)="onAccept()">
-            <i *ngIf="currentOptions.acceptIcon" [class]="currentOptions.acceptIcon"></i>
-            {{ currentOptions.acceptLabel }}
-          </button>
-        </div>
-      </div>
-    </div>
-  `, standalone: false, styles: [".custom-confirmation-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10001}.custom-confirmation-dialog{background:#fff;border-radius:8px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 20px #00000026}.dialog-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e9ecef}.dialog-header h3{margin:0;font-size:1.25rem;font-weight:600}.dialog-content{margin-bottom:1.5rem}.dialog-content p{margin:0;color:#495057;line-height:1.5}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}\n"] }]
+            args: [{ selector: 'app-confirmation-dialog', standalone: false, template: "<div *ngIf=\"isVisible\" class=\"custom-confirmation-overlay\">\r\n  <div class=\"custom-confirmation-dialog\">\r\n    <div class=\"dialog-header\">\r\n      <i *ngIf=\"currentOptions.icon\" [class]=\"currentOptions.icon\"></i>\r\n      <h3>{{ currentOptions.header }}</h3>\r\n    </div>\r\n    <div class=\"dialog-content\">\r\n      <p>{{ currentOptions.message }}</p>\r\n    </div>\r\n    <div class=\"dialog-actions\">\r\n      <button \r\n        type=\"button\" \r\n        pButton\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"onReject()\">\r\n        <i *ngIf=\"currentOptions.rejectIcon\" [class]=\"currentOptions.rejectIcon\"></i>\r\n        {{ currentOptions.rejectLabel }}\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        pButton\r\n        [class]=\"'btn ' + currentOptions.acceptButtonClass\"\r\n        (click)=\"onAccept()\">\r\n        <i *ngIf=\"currentOptions.acceptIcon\" [class]=\"currentOptions.acceptIcon\"></i>\r\n        {{ currentOptions.acceptLabel }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".custom-confirmation-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10001}.custom-confirmation-dialog{background:#fff;border-radius:8px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 20px #00000026}.dialog-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e9ecef}.dialog-header h3{margin:0;font-size:1.25rem;font-weight:600}.dialog-content{margin-bottom:1.5rem}.dialog-content p{margin:0;color:#495057;line-height:1.5}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}\n"] }]
         }], propDecorators: { confirmationOptions: [{
                 type: Input
             }] } });
@@ -7420,15 +7364,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 /*
  * Public API Surface of cat-document-lib
- *
- * IMPORTANT: To ensure proper z-index values and prevent confirmation dialog visibility issues,
- * import the global styles in your host project:
- *
- * Option 1: In your styles.scss
- * @import '~cat-document-lib/lib/styles.scss';
- *
- * Option 2: In your angular.json
- * "styles": ["node_modules/cat-document-lib/lib/styles.scss"]
  */
 
 /**