@pongrass/utils 1.0.2-v20 → 1.0.3-v20

package/README.md

@@ -81,6 +81,36 @@ export class YourModule { }
 - **DecimalInputDirective** - Restricts input to decimal values
 - **MultiSelectStylerDirective** - Applies custom styling to multi-select components
 - **ShowTooltipIfTruncatedDirective** - Shows a tooltip when text is truncated
+- **BackgroundImageDirective** - Adds background images to elements with optional random selection
+
+### BackgroundImageDirective
+
+Adds background images to elements with support for random image selection from a list.
+
+#### Inputs
+
+- `backgroundImage` (string | string[]) - Path to a single background image or array of image paths
+- `random` (boolean) - Flag to enable random image selection from array (defaults to false)
+
+#### Usage
+
+```html
+<!-- Single background image -->
+<div appBackgroundImage [backgroundImage]="'assets/background1.jpg'"></div>
+
+<!-- Random background image from a list -->
+<div appBackgroundImage 
+     [random]="true" 
+     [backgroundImage]="['assets/background1.jpg', 'assets/background2.jpg', 'assets/background3.jpg']">
+</div>
+
+<!-- First image from a list (random=false) -->
+<div appBackgroundImage 
+     [backgroundImage]="['assets/background1.jpg', 'assets/background2.jpg', 'assets/background3.jpg']">
+</div>
+```
+
+Place your background images in your application's assets folder and reference them using the directive.
 
 ## Available Services
 

package/fesm2022/pongrass-utils.mjs

@@ -2127,6 +2127,64 @@ class ITableGridPagination {
     paginationPageSizeSelector = this.configurationService.allConfigValues()?.tableGridConfig.defaultPageSizeSelector || false;
 }
 
+class BackgroundImageDirective {
+    el = inject(ElementRef);
+    /**
+     * Flag to enable random background selection
+     * Defaults to false
+     */
+    random = false;
+    /**
+     * Path to the background image (string) or images (string[])
+     */
+    backgroundImage = '';
+    ngOnInit() {
+        this.setBackgroundImage();
+    }
+    setBackgroundImage() {
+        let imageUrl = '';
+        if (typeof this.backgroundImage === 'string') {
+            // Single image path
+            imageUrl = this.backgroundImage;
+        }
+        else if (Array.isArray(this.backgroundImage) && this.backgroundImage.length > 0) {
+            // Array of image paths
+            if (this.random) {
+                // Select a random image from the array
+                const randomIndex = Math.floor(Math.random() * this.backgroundImage.length);
+                imageUrl = this.backgroundImage[randomIndex];
+            }
+            else {
+                // Use the first image in the array
+                imageUrl = this.backgroundImage[0];
+            }
+        }
+        if (imageUrl) {
+            this.el.nativeElement.style.backgroundImage = `url('${imageUrl}')`;
+            this.el.nativeElement.style.backgroundSize = 'cover';
+            this.el.nativeElement.style.backgroundPosition = 'center';
+            this.el.nativeElement.style.backgroundRepeat = 'no-repeat';
+            this.el.nativeElement.style.minHeight = '100vh';
+            this.el.nativeElement.style.width = '100%';
+            this.el.nativeElement.style.margin = '0';
+            this.el.nativeElement.style.display = 'block';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackgroundImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: BackgroundImageDirective, isStandalone: true, selector: "[appBackgroundImage]", inputs: { random: "random", backgroundImage: "backgroundImage" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackgroundImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appBackgroundImage]',
+                    standalone: true
+                }]
+        }], propDecorators: { random: [{
+                type: Input
+            }], backgroundImage: [{
+                type: Input
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Output: "2024-10-02 15:43:58"
 function convertToISOnString(date) {
@@ -2456,5 +2514,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, regionalDateFormat };
+export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, regionalDateFormat };
 //# sourceMappingURL=pongrass-utils.mjs.map