@ruc-lib/widget 2.0.1 → 3.1.0

package/README.md

@@ -1,88 +1,153 @@
 # ruclib-widget
 
-This library provides a flexible and customizable widget component for your Angular applications. Users can integrate the widget component using Angular selectors with ease. Below are the features, usage instructions, and integration details:
-
-## RUC Library Installation Guide
-
-Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements.
-
-## Install complete library
-
-`npm install @uxpractice/ruc-lib`
+This library provides a highly configurable widget component that allows for the creation of a dynamic, dashboard-like interface. Users can create, customize, and arrange multiple widgets within a container, with support for dragging, resizing, and dynamic content.
+
+## Features
+
+- **Dynamic Creation**: Create any number of widgets, each with its own configuration and content.
+- **Drag & Drop**: Easily rearrange widgets within the host container. Layout changes are emitted to be saved.
+- **Resizing**: Set responsive width and height for each widget. Widgets can also be made resizable by the user.
+- **Custom Content**:
+  - Set a title and an optional header icon for each widget.
+  - Embed custom components (like charts, graphs, forms, etc.) as widget content.
+- **Interactivity**:
+  - Optionally display a close icon to remove a widget from the layout.
+  - Disable individual widgets to make them non-interactive.
+- **Styling & Theming**:
+  - Set a custom background color for each widget.
+  - Apply custom theme classes for a consistent look and feel.
+  - Visual feedback is provided when a widget is being dragged.
+- **Layout Persistence**: The component emits an event with the updated widget configuration whenever a widget is moved or resized, allowing the application to save and restore the layout.
+
+## Installation Guide
+
+### Install the Entire Library
+```bash
+npm install @uxpractice/ruc-lib
+```
 
-## Install individual component
+### Install Individual Component
+If you only need the Widget component:
+```bash
+npm install @ruc-lib/widget
+```
 
-If users only need the widget component, they can install it separately
+## Version Compatibility
+ 
+Please ensure you install the correct version of `@ruc-lib/widget` based on your Angular version.
+ 
+| Angular Version    | Compatible `@ruc-lib/widget` Version     |
+|--------------------|---------------------------------------------|
+| 15.x.x             | `npm install @ruc-lib/widget@^3.0.0`     |
+| 16.x.x             | `npm install @ruc-lib/widget@^3.0.0`     |
 
-`npm install @ruc-lib/widget`
 
 ## Usage
 
-To use the widget component in your project, follow the integration guidelines provided in the documentation. Customize the widget as per your requirements by adjusting the configuration options.
-
-## Using Selector
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibWidgetComponent`:
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibWidgetComponent } from '@uxpractice/ruc-lib/widget';
+
+// For Individual Package
+import { RuclibWidgetComponent } from '@ruc-lib/widget';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibWidgetComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Component code here
+}
+```
 
-1.	Import `WidgetModule` into `app.module.ts` file.
-`( import { RuclibWidgetModule } from '@ruc-lib/widget'; OR import { RuclibWidgetModule } from '@ uxpractice /ruc-lib/widget'; )`
-2.	Use the widget selector in your HTML file.
-3.	Handle input and output bindings accordingly.
+### 2. Use the Component
+In your component's template, use the `<uxp-ruclib-widget>` selector:
 
-```
+```html
 <uxp-ruclib-widget
     [rucInputData]="widgetInput"  
     [customTheme]="customTheme"
-    (widgetClose)="passEvent($event)"
-    (layoutChanged)="passEvent($event)"
+    (widgetClose)="handleWidgetClose($event)"
+    (layoutChanged)="handleLayoutChange($event)">
 ></uxp-ruclib-widget>
 ```
 
-# Input and Output
+## API Reference
 
-## Input and Output
+### Component Inputs
 
-Inputs:
-•	rucInputData: Data to be passed to the widget.
-•	customTheme: Custom styling/theme for the widget.
+| Input          | Type                  | Description                                      |
+|----------------|-----------------------|--------------------------------------------------|
+| `rucInputData` | `WidgetConfig` | The main configuration object for the widgets.   |
+| `customTheme`  | `string`              | An optional CSS class for custom theming.        |
 
-Outputs:
-•	widgetClose: Event emitted from the widget on clicking close button of a widget.
-•	layoutChanged: Event emitted from the widget on resizing/dragging a widget.
+### Component Outputs
 
+| Output          | Type               | Description                                                              |
+|-----------------|--------------------|--------------------------------------------------------------------------|
+| `widgetClose`   | `string`           | Emitted when a widget's close icon is clicked. Returns the widget's `id`.  |
+| `layoutChanged` | `WidgetConfigData[]` | Emitted when a widget is moved or resized. Returns the full widget data array. |
 
-## rucInputData configurations options- 
+### `rucInputData` (`WidgetConfig`)
+This object defines the global configuration for the widget container.
 
-```
-WidgetDefaultConfig {
-    color: string = 'primary',
-    widgetData: WidgetConfigData[] = [
-        {
-            id: string = 'default-widget-1',
-            title: string = 'Default Widget 1',
-            description: string = 'Widget Description'
-            contentType: string = 'text',
-            contentData: any = 'This is the default content for the first widget. It is draggable and has a close icon.',
-            top: string = '20px',
-            left: string = '20px',
-            width: string = '300px',
-            height: string = '200px',
-            draggable: boolean = true,
-            showCloseIcon: boolean = true,
-            disabled: boolean = false,
-            headerIcon: string = 'widgets'
-        }
-    ]
-};
-```
+| Property     | Type                 | Description                                      |
+|--------------|----------------------|--------------------------------------------------|
+| `color`      | `string`             | A theme color to apply to the widgets.           |
+| `widgetData` | `WidgetConfigData[]` | An array of individual widget configuration objects. |
 
-# Default value be like –
+### `widgetData` Item (`WidgetConfigData`)
+This object defines the configuration for each individual widget.
 
-```
-export const mockDrawerInput = {
+| Property        | Type      | Description                                                                   |
+|-----------------|-----------|-------------------------------------------------------------------------------|
+| `id`            | `string`  | A unique identifier for the widget.                                           |
+| `title`         | `string`  | The title displayed in the widget's header.                                   |
+| `description`   | `string`  | A description for the widget, often used for tooltips.                        |
+| `contentType`   | `string`  | The type of content to render. Can be `'text'`, `'html'`, or `'component'`.   |
+| `contentData`   | `any`     | The data for the content. Can be a string, HTML, or a component reference.    |
+| `top`           | `string`  | The initial top position of the widget (e.g., `'20px'`).                      |
+| `left`          | `string`  | The initial left position of the widget (e.g., `'20px'`).                     |
+| `width`         | `string`  | The initial width of the widget (e.g., `'300px'`).                            |
+| `height`        | `string`  | The initial height of the widget (e.g., `'200px'`).                           |
+| `draggable`     | `boolean` | If `true`, the widget can be dragged. Default is `true`.                      |
+| `showCloseIcon` | `boolean` | If `true`, a close icon is displayed in the header. Default is `true`.        |
+| `disabled`      | `boolean` | If `true`, the widget is non-interactive. Default is `false`.                 |
+| `headerIcon`    | `string`  | The name of the Material Icon to display in the header.                       |
+| `backgroundColor`| `string` | An optional background color for the widget.                                  |
+
+## Example Configuration
+
+Here's an example of how to configure the Widget component in your component's TypeScript file.
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibWidgetModule, WidgetConfig, WidgetConfigData } from '@uxpractice/ruc-lib/widget';
+
+// For Individual package
+import { RuclibWidgetModule, WidgetConfig, WidgetConfigData } from '@ruc-lib/widget';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  customTheme = 'ruc-custom-theme';
+
+  widgetInput: WidgetConfig = {
     color: 'primary',
     widgetData: [
         {
-            id: 'default-widget-1',
-            title: 'Default Widget 1',
+            id: 'widget-1',
+            title: 'Text Widget',
             contentType: 'text',
             contentData: 'This is the default content for the first widget. It is draggable and has a close icon.',
             top: '20px',
@@ -94,8 +159,8 @@ export const mockDrawerInput = {
             headerIcon: 'widgets'
         },
         {
-            id: 'default-widget-2',
-            title: 'Default Widget 2 (HTML)',
+            id: 'widget-2',
+            title: 'HTML Widget',
             contentType: 'html',
             contentData: '<h3>HTML Content</h3><p>This widget contains <strong>HTML</strong> and has a different background color.</p>',
             top: '240px',
@@ -104,10 +169,54 @@ export const mockDrawerInput = {
             height: '200px',
             draggable: true,
             showCloseIcon: true,
-            backgroundColor: '#f0f0f0'
+            backgroundColor: '#f0f0f0',
+            headerIcon: 'code'
+        },
+        {
+            id: 'widget-3',
+            title: 'Disabled Widget',
+            contentType: 'text',
+            contentData: 'This widget cannot be moved or closed.',
+            top: '20px',
+            left: '340px',
+            width: '300px',
+            height: '150px',
+            draggable: false,
+            showCloseIcon: false,
+            disabled: true,
+            headerIcon: 'block'
         }
     ]
-};
+  };
+
+  handleWidgetClose(widgetId: string) {
+    console.log('Widget closed:', widgetId);
+    // Logic to remove the widget from the widgetInput.widgetData array
+    this.widgetInput.widgetData = this.widgetInput.widgetData.filter(w => w.id !== widgetId);
+  }
+
+  handleLayoutChange(widgets: WidgetConfigData[]) {
+    console.log('Layout changed:', widgets);
+    // Logic to save the new layout configuration
+    this.widgetInput.widgetData = widgets;
+  }
+}
+```
+
+> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
+
+When implementing **custom themes**, such as:
+
+```scss
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+}
+
+// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+  @include mat.typography-level($theme-custom-typography-name, body-1);
+}
 ```
 
 

package/fesm2022/ruc-lib-widget.mjs

@@ -0,0 +1,243 @@
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i0 from '@angular/core';
+import { Pipe, ViewContainerRef, ViewChild, Input, Component, EventEmitter, Output } from '@angular/core';
+import * as i4 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/platform-browser';
+
+/**
+ * @Pipe SafeHtmlPipe
+ * @name safeHtml
+ * @description A pipe that bypasses Angular's built-in security and sanitizes HTML content,
+ * allowing it to be safely rendered in the DOM. Use with caution and only with trusted HTML sources.
+ */
+class SafeHtmlPipe {
+    /**
+     * @param sanitizer - An instance of DomSanitizer used to bypass security.
+     */
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    /**
+     * Transforms a string containing HTML into a SafeHtml object that can be bound to [innerHTML].
+     * @param value - The HTML string to sanitize.
+     * @returns A SafeHtml object, which Angular trusts as safe HTML.
+     */
+    transform(value) {
+        if (value === null || value === undefined) {
+            return value;
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'safeHtml', standalone: true }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class RuclibWidgetItemComponent {
+    /**
+     * @param cdr The ChangeDetectorRef to manually trigger change detection.
+     * @param sanitizer The DomSanitizer service to prevent XSS attacks by sanitizing HTML.
+     */
+    constructor(cdr, sanitizer) {
+        this.cdr = cdr;
+        this.sanitizer = sanitizer;
+        /**
+         * A reference to the dynamically created component instance.
+         * This is used to manage the lifecycle of the injected component.
+         */
+        this.dynamicComponentRef = null;
+    }
+    /**
+     * A lifecycle hook that responds when Angular sets or resets data-bound input properties.
+     * It checks for changes in `widgetConfig` and reloads the content accordingly.
+     * @param changes An object of the changed properties.
+     */
+    ngOnChanges(changes) {
+        if (changes['widgetConfig']) {
+            if (this.widgetConfig.contentType === 'component' && this.widgetComponentHost) {
+                this.loadDynamicContent();
+            }
+            else if (this.widgetConfig.contentType !== 'component') {
+                this.clearDynamicContent();
+            }
+        }
+    }
+    /**
+     * A lifecycle hook that is called after Angular has fully initialized a component's view.
+     * It ensures that if the initial content type is 'component', it gets loaded.
+     */
+    ngAfterViewInit() {
+        if (this.widgetConfig) {
+            if (this.widgetConfig.contentType === 'component' && this.widgetComponentHost) {
+                this.loadDynamicContent();
+            }
+        }
+    }
+    /**
+     * Loads a dynamic component into the `widgetComponentHost` view container.
+     * It reads the component type and any input data from the `widgetConfig`.
+     */
+    loadDynamicContent() {
+        this.clearDynamicContent();
+        if (this.widgetConfig.contentType === 'component' && this.widgetConfig.contentData && this.widgetConfig.contentData.component) {
+            if (this.widgetComponentHost) {
+                const componentType = this.widgetConfig.contentData.component;
+                this.dynamicComponentRef = this.widgetComponentHost.createComponent(componentType);
+                if (this.widgetConfig.contentData.inputs && this.dynamicComponentRef?.instance) {
+                    Object.keys(this.widgetConfig.contentData.inputs).forEach(key => {
+                        if (this.dynamicComponentRef && key in this.dynamicComponentRef.instance) {
+                            this.dynamicComponentRef.instance[key] = this.widgetConfig.contentData.inputs[key];
+                        }
+                    });
+                    this.dynamicComponentRef.changeDetectorRef.detectChanges();
+                }
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Clears any dynamically loaded component from the view container and destroys its instance.
+     */
+    clearDynamicContent() {
+        if (this.dynamicComponentRef) {
+            this.dynamicComponentRef.destroy();
+            this.dynamicComponentRef = null;
+        }
+        if (this.widgetComponentHost) {
+            this.widgetComponentHost.clear();
+        }
+    }
+    /**
+     * A lifecycle hook that cleans up the component before it's destroyed.
+     * Ensures that any dynamically created components are properly destroyed to avoid memory leaks.
+     */
+    ngOnDestroy() {
+        this.clearDynamicContent();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibWidgetItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibWidgetItemComponent, isStandalone: true, selector: "uxp-ruclib-widget-item", inputs: { widgetConfig: "widgetConfig" }, viewQueries: [{ propertyName: "widgetComponentHost", first: true, predicate: ["widgetComponentHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<!--\r\nThis container uses a switch to determine how to render the widget's content\r\nbased on the `contentType` property in the widget's configuration.\r\n-->\r\n@if (widgetConfig) {\r\n  @switch (widgetConfig.contentType) {\r\n    @case ('text') {\r\n      <p>{{ widgetConfig.contentData }}</p>\r\n    }\r\n    @case ('html') {\r\n      <div [innerHTML]=\"widgetConfig.contentData | safeHtml\"></div>\r\n    }\r\n    @case ('video') {\r\n      <video\r\n        [src]=\"widgetConfig.contentData.src\"\r\n        [attr.type]=\"widgetConfig.contentData.type\"\r\n        [controls]=\"widgetConfig.contentData.controls\"\r\n        [autoplay]=\"widgetConfig.contentData.autoplay\"\r\n        [loop]=\"widgetConfig.contentData.loop\"\r\n        style=\"width: 100%; height: 100%; object-fit: contain\"\r\n      ></video>\r\n    }\r\n    @case ('component') {\r\n      <ng-template #widgetComponentHost></ng-template>\r\n    }\r\n    @default {\r\n      <p>No content provided or content type not supported.</p>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:block;height:100%;width:100%}video{max-width:100%;max-height:100%}p{margin:0}\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibWidgetItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-widget-item', imports: [SafeHtmlPipe], template: "<!--\r\nThis container uses a switch to determine how to render the widget's content\r\nbased on the `contentType` property in the widget's configuration.\r\n-->\r\n@if (widgetConfig) {\r\n  @switch (widgetConfig.contentType) {\r\n    @case ('text') {\r\n      <p>{{ widgetConfig.contentData }}</p>\r\n    }\r\n    @case ('html') {\r\n      <div [innerHTML]=\"widgetConfig.contentData | safeHtml\"></div>\r\n    }\r\n    @case ('video') {\r\n      <video\r\n        [src]=\"widgetConfig.contentData.src\"\r\n        [attr.type]=\"widgetConfig.contentData.type\"\r\n        [controls]=\"widgetConfig.contentData.controls\"\r\n        [autoplay]=\"widgetConfig.contentData.autoplay\"\r\n        [loop]=\"widgetConfig.contentData.loop\"\r\n        style=\"width: 100%; height: 100%; object-fit: contain\"\r\n      ></video>\r\n    }\r\n    @case ('component') {\r\n      <ng-template #widgetComponentHost></ng-template>\r\n    }\r\n    @default {\r\n      <p>No content provided or content type not supported.</p>\r\n    }\r\n  }\r\n}\r\n", styles: [":host{display:block;height:100%;width:100%}video{max-width:100%;max-height:100%}p{margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { widgetConfig: [{
+                type: Input
+            }], widgetComponentHost: [{
+                type: ViewChild,
+                args: ['widgetComponentHost', { read: ViewContainerRef }]
+            }] } });
+
+class RuclibWidgetComponent {
+    /**
+     * @param cdr The ChangeDetectorRef to manually trigger change detection when needed.
+     */
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * An event emitter that fires when a widget's close icon is clicked.
+         * It emits the unique ID of the widget to be closed.
+         */
+        this.widgetClose = new EventEmitter();
+        /**
+         * An event emitter that fires when a widget is dragged and dropped.
+         * It emits the entire updated array of widget configurations, allowing the parent to save the new layout.
+         */
+        this.layoutChanged = new EventEmitter();
+    }
+    /**
+     * After the view initializes, this hook captures the host container's native element
+     * and sets it as the boundary for dragging widgets.
+     */
+    ngAfterViewInit() {
+        if (this.widgetsHostContainerRef) {
+            this.dragBoundaryElement = this.widgetsHostContainerRef.nativeElement;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Handles the click event on a widget's close button.
+     * @param widgetId The ID of the widget to be closed.
+     */
+    onCloseClick(widgetId) {
+        this.widgetClose.emit(widgetId);
+    }
+    /**
+     * Handles the start of a drag operation for a widget.
+     * Sets the widget's isActive state to true for visual feedback.
+     * @param widget The WidgetConfigData object being dragged.
+     * @param event The CdkDragStart event.
+     */
+    onDragStarted(widget, event) {
+        widget.isActive = true;
+    }
+    /**
+     * Handles the end of a drag operation.
+     * It calculates the new top/left position, updates the widget's configuration,
+     * and emits the `layoutChanged` event with the new layout data.
+     * @param widget The WidgetConfigData object that was dragged.
+     * @param event The CdkDragEnd event.
+     */
+    onDragEnded(widget, event) {
+        widget.isActive = false;
+        const newPosition = event.source.getFreeDragPosition();
+        const initialTopPx = parseFloat(widget.top || '0');
+        const initialLeftPx = parseFloat(widget.left || '0');
+        const newTopPx = initialTopPx + newPosition.y;
+        const newLeftPx = initialLeftPx + newPosition.x;
+        widget.top = `${newTopPx}px`;
+        widget.left = `${newLeftPx}px`;
+        event.source.reset();
+        if (this.rucInputData.widgetData) {
+            this.layoutChanged.emit(this.rucInputData.widgetData);
+        }
+    }
+    /**
+     * Retrieves the color for UI elements like icons from the input data.
+     * @returns The color string (e.g., 'primary', 'accent') or 'primary' as a default.
+     */
+    getColor() {
+        return this.rucInputData?.color || 'primary';
+    }
+    /**
+     * A safe getter for the widget data array from the main input configuration.
+     * @returns The array of widget configurations, or an empty array if not defined.
+     */
+    getWidgetData() {
+        return typeof this.rucInputData.widgetData !== 'undefined' ? this.rucInputData.widgetData : [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibWidgetComponent, isStandalone: true, selector: "uxp-ruclib-widget", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, outputs: { widgetClose: "widgetClose", layoutChanged: "layoutChanged" }, viewQueries: [{ propertyName: "widgetsHostContainerRef", first: true, predicate: ["widgetsHostContainer"], descendants: true }], ngImport: i0, template: "<!--\r\nThe main container for all widgets.\r\n- Applies a custom theme class if provided.\r\n- Acts as the boundary for dragging operations via the #widgetsHostContainer template reference.\r\n-->\r\n<div\r\n  class=\"widgets-host-container {{ customTheme || '' }}\"\r\n  #widgetsHostContainer\r\n  >\r\n  <!--\r\n  Iterates through the widget data to render each individual widget.\r\n  Each widget is a draggable container powered by Angular CDK.\r\n  -->\r\n  @for (widgetConfig of getWidgetData(); track widgetConfig) {\r\n    <div\r\n      [style.width]=\"widgetConfig.width ? widgetConfig.width : '200px'\"\r\n      [style.height]=\"widgetConfig.height ? widgetConfig.height : '150px'\"\r\n      [style.minWidth]=\"widgetConfig.width ? widgetConfig.width : '200px'\"\r\n      [style.minHeight]=\"widgetConfig.height ? widgetConfig.height : '150px'\"\r\n      [style.top]=\"widgetConfig.top\"\r\n      [style.left]=\"widgetConfig.left\"\r\n      [style.background-color]=\"widgetConfig.backgroundColor\"\r\n      [class.disabled]=\"widgetConfig.disabled\"\r\n      [class.draggable]=\"widgetConfig.draggable && !widgetConfig.disabled\"\r\n      [class.resizable]=\"widgetConfig.resizable && !widgetConfig.disabled\"\r\n      class=\"widget-container\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"!widgetConfig.draggable || widgetConfig.disabled\"\r\n      [cdkDragBoundary]=\"dragBoundaryElement\"\r\n      (cdkDragStarted)=\"onDragStarted(widgetConfig, $event)\"\r\n      (cdkDragEnded)=\"onDragEnded(widgetConfig, $event)\"\r\n      [ngClass]=\"{ 'is-active': widgetConfig.isActive }\"\r\n      >\r\n      <!--\r\n      Widget Header: Contains title and controls. Acts as the handle for dragging.\r\n      -->\r\n      <div class=\"widget-header\" cdkDragHandle>\r\n        <div class=\"widget-header-left\">\r\n          <!-- Draggable indicator icon, shown only if the widget is draggable and not disabled -->\r\n          @if (widgetConfig.draggable && !widgetConfig.disabled) {\r\n            <mat-icon\r\n              class=\"widget-drag-handle\"\r\n              aria-hidden=\"true\"\r\n              >drag_indicator</mat-icon\r\n              >\r\n            }\r\n            <!-- Optional header icon -->\r\n            @if (widgetConfig.headerIcon) {\r\n              <mat-icon class=\"widget-header-icon\">{{\r\n                widgetConfig.headerIcon\r\n              }}</mat-icon>\r\n            }\r\n            <!-- Widget Title -->\r\n            @if (widgetConfig?.title) {\r\n              <h3>{{ widgetConfig?.title }}</h3>\r\n            }\r\n          </div>\r\n          <!-- Optional close button with accessibility label -->\r\n          @if (widgetConfig?.showCloseIcon) {\r\n            <button\r\n              color=\"{{ getColor() }}\"\r\n              mat-icon-button\r\n              class=\"widget-close-button\"\r\n              [disabled]=\"widgetConfig.disabled\"\r\n              (click)=\"onCloseClick(widgetConfig.id)\"\r\n              [attr.aria-label]=\"'Close widget ' + widgetConfig?.title\"\r\n              >\r\n              <mat-icon color=\"{{ getColor() }}\">close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!--\r\n        Widget Content: Renders the main content of the widget using the child uxp-ruclib-widget-item component.\r\n        -->\r\n        <div class=\"widget-content\">\r\n          <uxp-ruclib-widget-item\r\n            [widgetConfig]=\"widgetConfig\"\r\n          ></uxp-ruclib-widget-item>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n", styles: [":host{display:block}.widget-container{border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;position:absolute;overflow:hidden;padding:15px;transition:box-shadow .2s ease-in-out,border-color .2s ease-in-out}.widget-container:hover{box-shadow:0 4px 8px #0003;border-color:#007bff;transform:translateY(-2px)}.widget-container.is-active{box-shadow:0 10px 20px #00000040,0 6px 6px #0000003b;border-color:#28a745;transform:scale(1.02);z-index:1000;cursor:grabbing!important}.widget-container .cdk-drag-placeholder{opacity:.4;background-color:#f0f0f0;border:1px dashed #999;transition:none}.widget-container .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.widget-container.draggable .widget-header{cursor:move}.widget-header-left{display:flex;align-items:center;gap:8px;overflow:hidden}.widget-header-icon{flex-shrink:0}.widget-header-left h3{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header h3{margin:0;font-size:1.2em}.widget-drag-handle{color:#aaa;flex-shrink:0}.widget-close-button{background:none;border:none;cursor:pointer;padding:0;line-height:1;transition:color .2s ease-in-out}.widget-close-button mat-icon{font-size:20px;vertical-align:middle}.widget-content{flex-grow:1;overflow:auto;font-size:.9em}.widget-content p{margin-top:0;line-height:1.6}.widgets-host-container{position:relative;width:100%;min-height:600px;border:1px dashed #eee}.widget-container.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.widget-container.resizable{resize:both}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: RuclibWidgetItemComponent, selector: "uxp-ruclib-widget-item", inputs: ["widgetConfig"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-widget', imports: [CommonModule, MatIconModule,
+                        MatButtonModule,
+                        DragDropModule, RuclibWidgetItemComponent], template: "<!--\r\nThe main container for all widgets.\r\n- Applies a custom theme class if provided.\r\n- Acts as the boundary for dragging operations via the #widgetsHostContainer template reference.\r\n-->\r\n<div\r\n  class=\"widgets-host-container {{ customTheme || '' }}\"\r\n  #widgetsHostContainer\r\n  >\r\n  <!--\r\n  Iterates through the widget data to render each individual widget.\r\n  Each widget is a draggable container powered by Angular CDK.\r\n  -->\r\n  @for (widgetConfig of getWidgetData(); track widgetConfig) {\r\n    <div\r\n      [style.width]=\"widgetConfig.width ? widgetConfig.width : '200px'\"\r\n      [style.height]=\"widgetConfig.height ? widgetConfig.height : '150px'\"\r\n      [style.minWidth]=\"widgetConfig.width ? widgetConfig.width : '200px'\"\r\n      [style.minHeight]=\"widgetConfig.height ? widgetConfig.height : '150px'\"\r\n      [style.top]=\"widgetConfig.top\"\r\n      [style.left]=\"widgetConfig.left\"\r\n      [style.background-color]=\"widgetConfig.backgroundColor\"\r\n      [class.disabled]=\"widgetConfig.disabled\"\r\n      [class.draggable]=\"widgetConfig.draggable && !widgetConfig.disabled\"\r\n      [class.resizable]=\"widgetConfig.resizable && !widgetConfig.disabled\"\r\n      class=\"widget-container\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"!widgetConfig.draggable || widgetConfig.disabled\"\r\n      [cdkDragBoundary]=\"dragBoundaryElement\"\r\n      (cdkDragStarted)=\"onDragStarted(widgetConfig, $event)\"\r\n      (cdkDragEnded)=\"onDragEnded(widgetConfig, $event)\"\r\n      [ngClass]=\"{ 'is-active': widgetConfig.isActive }\"\r\n      >\r\n      <!--\r\n      Widget Header: Contains title and controls. Acts as the handle for dragging.\r\n      -->\r\n      <div class=\"widget-header\" cdkDragHandle>\r\n        <div class=\"widget-header-left\">\r\n          <!-- Draggable indicator icon, shown only if the widget is draggable and not disabled -->\r\n          @if (widgetConfig.draggable && !widgetConfig.disabled) {\r\n            <mat-icon\r\n              class=\"widget-drag-handle\"\r\n              aria-hidden=\"true\"\r\n              >drag_indicator</mat-icon\r\n              >\r\n            }\r\n            <!-- Optional header icon -->\r\n            @if (widgetConfig.headerIcon) {\r\n              <mat-icon class=\"widget-header-icon\">{{\r\n                widgetConfig.headerIcon\r\n              }}</mat-icon>\r\n            }\r\n            <!-- Widget Title -->\r\n            @if (widgetConfig?.title) {\r\n              <h3>{{ widgetConfig?.title }}</h3>\r\n            }\r\n          </div>\r\n          <!-- Optional close button with accessibility label -->\r\n          @if (widgetConfig?.showCloseIcon) {\r\n            <button\r\n              color=\"{{ getColor() }}\"\r\n              mat-icon-button\r\n              class=\"widget-close-button\"\r\n              [disabled]=\"widgetConfig.disabled\"\r\n              (click)=\"onCloseClick(widgetConfig.id)\"\r\n              [attr.aria-label]=\"'Close widget ' + widgetConfig?.title\"\r\n              >\r\n              <mat-icon color=\"{{ getColor() }}\">close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!--\r\n        Widget Content: Renders the main content of the widget using the child uxp-ruclib-widget-item component.\r\n        -->\r\n        <div class=\"widget-content\">\r\n          <uxp-ruclib-widget-item\r\n            [widgetConfig]=\"widgetConfig\"\r\n          ></uxp-ruclib-widget-item>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n", styles: [":host{display:block}.widget-container{border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;position:absolute;overflow:hidden;padding:15px;transition:box-shadow .2s ease-in-out,border-color .2s ease-in-out}.widget-container:hover{box-shadow:0 4px 8px #0003;border-color:#007bff;transform:translateY(-2px)}.widget-container.is-active{box-shadow:0 10px 20px #00000040,0 6px 6px #0000003b;border-color:#28a745;transform:scale(1.02);z-index:1000;cursor:grabbing!important}.widget-container .cdk-drag-placeholder{opacity:.4;background-color:#f0f0f0;border:1px dashed #999;transition:none}.widget-container .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.widget-container.draggable .widget-header{cursor:move}.widget-header-left{display:flex;align-items:center;gap:8px;overflow:hidden}.widget-header-icon{flex-shrink:0}.widget-header-left h3{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header h3{margin:0;font-size:1.2em}.widget-drag-handle{color:#aaa;flex-shrink:0}.widget-close-button{background:none;border:none;cursor:pointer;padding:0;line-height:1;transition:color .2s ease-in-out}.widget-close-button mat-icon{font-size:20px;vertical-align:middle}.widget-content{flex-grow:1;overflow:auto;font-size:.9em}.widget-content p{margin-top:0;line-height:1.6}.widgets-host-container{position:relative;width:100%;min-height:600px;border:1px dashed #eee}.widget-container.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.widget-container.resizable{resize:both}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }], widgetClose: [{
+                type: Output
+            }], layoutChanged: [{
+                type: Output
+            }], widgetsHostContainerRef: [{
+                type: ViewChild,
+                args: ['widgetsHostContainer']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibWidgetComponent };
+//# sourceMappingURL=ruc-lib-widget.mjs.map

package/fesm2022/ruc-lib-widget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-widget.mjs","sources":["../../src/pipes/safe-html.pipe.ts","../../src/lib/ruclib-widget-item/ruclib-widget-item.component.ts","../../src/lib/ruclib-widget-item/ruclib-widget-item.component.html","../../src/lib/ruclib-widget/ruclib-widget.component.ts","../../src/lib/ruclib-widget/ruclib-widget.component.html","../../src/ruc-lib-widget.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\n\r\n/**\r\n * @Pipe SafeHtmlPipe\r\n * @name safeHtml\r\n * @description A pipe that bypasses Angular's built-in security and sanitizes HTML content,\r\n * allowing it to be safely rendered in the DOM. Use with caution and only with trusted HTML sources.\r\n */\r\n@Pipe({ name: 'safeHtml', standalone:true })\r\nexport class SafeHtmlPipe implements PipeTransform {\r\n  /**\r\n   * @param sanitizer - An instance of DomSanitizer used to bypass security.\r\n   */\r\n  constructor(private sanitizer: DomSanitizer) { }\r\n  /**\r\n   * Transforms a string containing HTML into a SafeHtml object that can be bound to [innerHTML].\r\n   * @param value - The HTML string to sanitize.\r\n   * @returns A SafeHtml object, which Angular trusts as safe HTML.\r\n   */\r\n  transform(value: any) {\r\n    if (value === null || value === undefined) {\r\n      return value;\r\n    }\r\n    return this.sanitizer.bypassSecurityTrustHtml(value);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  Input,\r\n  ViewChild,\r\n  ViewContainerRef,\r\n  ComponentRef,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  OnDestroy,\r\n  Type,\r\n  ChangeDetectorRef,\r\n  AfterViewInit\r\n} from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { WidgetConfigData } from '../../interface/widget';\r\n\r\nimport { SafeHtmlPipe } from '../../pipes/safe-html.pipe';\r\n\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-widget-item',\r\n    imports: [SafeHtmlPipe],\r\n    templateUrl: './ruclib-widget-item.component.html',\r\n    styleUrl: './ruclib-widget-item.component.scss'\r\n})\r\nexport class RuclibWidgetItemComponent implements OnChanges, OnDestroy, AfterViewInit {\r\n  /**\r\n   * The configuration object for this specific widget item.\r\n   * It determines the type of content to render and provides the necessary data.\r\n   */\r\n  @Input() widgetConfig!: WidgetConfigData;\r\n\r\n  /**\r\n   * A reference to the view container where a dynamic component will be injected.\r\n   * This is used when `widgetConfig.contentType` is 'component'.\r\n   */\r\n  @ViewChild('widgetComponentHost', { read: ViewContainerRef }) widgetComponentHost!: ViewContainerRef;\r\n  /**\r\n   * A reference to the dynamically created component instance.\r\n   * This is used to manage the lifecycle of the injected component.\r\n   */\r\n  private dynamicComponentRef: ComponentRef<unknown> | null = null;\r\n\r\n  /**\r\n   * @param cdr The ChangeDetectorRef to manually trigger change detection.\r\n   * @param sanitizer The DomSanitizer service to prevent XSS attacks by sanitizing HTML.\r\n   */\r\n  constructor(private cdr: ChangeDetectorRef, private sanitizer: DomSanitizer) { }\r\n\r\n  /**\r\n   * A lifecycle hook that responds when Angular sets or resets data-bound input properties.\r\n   * It checks for changes in `widgetConfig` and reloads the content accordingly.\r\n   * @param changes An object of the changed properties.\r\n   */\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes['widgetConfig']) {\r\n      if (this.widgetConfig.contentType === 'component' && this.widgetComponentHost) {\r\n        this.loadDynamicContent();\r\n      } else if (this.widgetConfig.contentType !== 'component') {\r\n        this.clearDynamicContent();\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * A lifecycle hook that is called after Angular has fully initialized a component's view.\r\n   * It ensures that if the initial content type is 'component', it gets loaded.\r\n   */\r\n  ngAfterViewInit(): void {\r\n    if(this.widgetConfig) {\r\n      if (this.widgetConfig.contentType === 'component' && this.widgetComponentHost) {\r\n        this.loadDynamicContent();\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  /**\r\n   * Loads a dynamic component into the `widgetComponentHost` view container.\r\n   * It reads the component type and any input data from the `widgetConfig`.\r\n   */\r\n  private loadDynamicContent(): void {\r\n    this.clearDynamicContent();\r\n    if (this.widgetConfig.contentType === 'component' && this.widgetConfig.contentData && this.widgetConfig.contentData.component) {\r\n      if (this.widgetComponentHost) {\r\n  const componentType = this.widgetConfig.contentData.component as Type<unknown>;\r\n        this.dynamicComponentRef = this.widgetComponentHost.createComponent(componentType);\r\n\r\n        if (this.widgetConfig.contentData.inputs && this.dynamicComponentRef?.instance) {\r\n          Object.keys(this.widgetConfig.contentData.inputs).forEach(key => {\r\n            if (this.dynamicComponentRef && key in (this.dynamicComponentRef.instance as any)) {\r\n              (this.dynamicComponentRef.instance as any)[key] = this.widgetConfig.contentData.inputs[key];\r\n            }\r\n          });\r\n          this.dynamicComponentRef.changeDetectorRef.detectChanges();\r\n        }\r\n      }\r\n    }\r\n    this.cdr.detectChanges();\r\n  }\r\n\r\n  /**\r\n   * Clears any dynamically loaded component from the view container and destroys its instance.\r\n   */\r\n  private clearDynamicContent(): void {\r\n    if (this.dynamicComponentRef) {\r\n      this.dynamicComponentRef.destroy();\r\n      this.dynamicComponentRef = null;\r\n    }\r\n    if (this.widgetComponentHost) {\r\n      this.widgetComponentHost.clear();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * A lifecycle hook that cleans up the component before it's destroyed.\r\n   * Ensures that any dynamically created components are properly destroyed to avoid memory leaks.\r\n   */\r\n  ngOnDestroy(): void {\r\n    this.clearDynamicContent();\r\n  }\r\n}\r\n","<!--\r\nThis container uses a switch to determine how to render the widget's content\r\nbased on the `contentType` property in the widget's configuration.\r\n-->\r\n@if (widgetConfig) {\r\n  @switch (widgetConfig.contentType) {\r\n    @case ('text') {\r\n      <p>{{ widgetConfig.contentData }}</p>\r\n    }\r\n    @case ('html') {\r\n      <div [innerHTML]=\"widgetConfig.contentData | safeHtml\"></div>\r\n    }\r\n    @case ('video') {\r\n      <video\r\n        [src]=\"widgetConfig.contentData.src\"\r\n        [attr.type]=\"widgetConfig.contentData.type\"\r\n        [controls]=\"widgetConfig.contentData.controls\"\r\n        [autoplay]=\"widgetConfig.contentData.autoplay\"\r\n        [loop]=\"widgetConfig.contentData.loop\"\r\n        style=\"width: 100%; height: 100%; object-fit: contain\"\r\n      ></video>\r\n    }\r\n    @case ('component') {\r\n      <ng-template #widgetComponentHost></ng-template>\r\n    }\r\n    @default {\r\n      <p>No content provided or content type not supported.</p>\r\n    }\r\n  }\r\n}\r\n","import { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';\r\nimport { WidgetConfig, WidgetConfigData } from '../../interface/widget';\r\nimport { CdkDragStart, CdkDragEnd, DragDropModule } from '@angular/cdk/drag-drop';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RuclibWidgetItemComponent } from '../ruclib-widget-item/ruclib-widget-item.component';\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-widget',\r\n    imports: [CommonModule, MatIconModule,\r\n        MatButtonModule,\r\n        DragDropModule, RuclibWidgetItemComponent],\r\n    templateUrl: './ruclib-widget.component.html',\r\n    styleUrl: './ruclib-widget.component.scss'\r\n})\r\nexport class RuclibWidgetComponent  implements AfterViewInit {\r\n  /**\r\n   * The main configuration object for the widget container.\r\n   * It includes the array of widget data and global settings.\r\n   * @see WidgetConfig interface for detailed properties.\r\n   */\r\n  @Input() rucInputData!: WidgetConfig;\r\n\r\n  /**\r\n   * An optional custom theme class to be applied to the widget host container.\r\n   * @example 'dark-theme', 'custom-theme-one'\r\n   */\r\n  @Input() customTheme: string | undefined;\r\n\r\n  /**\r\n   * An event emitter that fires when a widget's close icon is clicked.\r\n   * It emits the unique ID of the widget to be closed.\r\n   */\r\n  @Output() widgetClose = new EventEmitter<string>();\r\n\r\n  /**\r\n   * An event emitter that fires when a widget is dragged and dropped.\r\n   * It emits the entire updated array of widget configurations, allowing the parent to save the new layout.\r\n   */\r\n  @Output() layoutChanged = new EventEmitter<WidgetConfigData[]>();\r\n\r\n  /**\r\n   * @param cdr The ChangeDetectorRef to manually trigger change detection when needed.\r\n   */\r\n  constructor(private cdr: ChangeDetectorRef) { }\r\n\r\n  /** A reference to the host container element, used to define the drag boundary. */\r\n  @ViewChild('widgetsHostContainer') widgetsHostContainerRef!: ElementRef<HTMLElement>;\r\n  /** The HTML element that serves as the boundary for all drag operations. */\r\n  public dragBoundaryElement!: HTMLElement;\r\n\r\n  /**\r\n   * After the view initializes, this hook captures the host container's native element\r\n   * and sets it as the boundary for dragging widgets.\r\n   */\r\n  ngAfterViewInit(): void {\r\n    if (this.widgetsHostContainerRef) {\r\n      this.dragBoundaryElement = this.widgetsHostContainerRef.nativeElement;\r\n      this.cdr.detectChanges();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles the click event on a widget's close button.\r\n   * @param widgetId The ID of the widget to be closed.\r\n   */\r\n  onCloseClick(widgetId: string): void {\r\n    this.widgetClose.emit(widgetId);\r\n  }\r\n\r\n  /**\r\n   * Handles the start of a drag operation for a widget.\r\n   * Sets the widget's isActive state to true for visual feedback.\r\n   * @param widget The WidgetConfigData object being dragged.\r\n   * @param event The CdkDragStart event.\r\n   */\r\n  onDragStarted(widget: WidgetConfigData, event: CdkDragStart): void {\r\n    widget.isActive = true;\r\n  }\r\n\r\n  /**\r\n   * Handles the end of a drag operation.\r\n   * It calculates the new top/left position, updates the widget's configuration,\r\n   * and emits the `layoutChanged` event with the new layout data.\r\n   * @param widget The WidgetConfigData object that was dragged.\r\n   * @param event The CdkDragEnd event.\r\n   */\r\n  onDragEnded(widget: WidgetConfigData, event: CdkDragEnd): void {\r\n    widget.isActive = false;\r\n\r\n    const newPosition = event.source.getFreeDragPosition();\r\n\r\n    const initialTopPx = parseFloat(widget.top || '0');\r\n    const initialLeftPx = parseFloat(widget.left || '0');\r\n\r\n    const newTopPx = initialTopPx + newPosition.y;\r\n    const newLeftPx = initialLeftPx + newPosition.x;\r\n\r\n    widget.top = `${newTopPx}px`;\r\n    widget.left = `${newLeftPx}px`;\r\n\r\n    event.source.reset();\r\n\r\n    if (this.rucInputData.widgetData) {\r\n      this.layoutChanged.emit(this.rucInputData.widgetData);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Retrieves the color for UI elements like icons from the input data.\r\n   * @returns The color string (e.g., 'primary', 'accent') or 'primary' as a default.\r\n   */\r\n  getColor(): string {\r\n    return this.rucInputData?.color || 'primary';\r\n  }\r\n\r\n  /**\r\n   * A safe getter for the widget data array from the main input configuration.\r\n   * @returns The array of widget configurations, or an empty array if not defined.\r\n   */\r\n  getWidgetData(): WidgetConfigData[] | any {\r\n    return typeof this.rucInputData.widgetData !== 'undefined' ? this.rucInputData.widgetData : [];\r\n  }\r\n}\r\n\r\n","<!--\r\nThe main container for all widgets.\r\n- Applies a custom theme class if provided.\r\n- Acts as the boundary for dragging operations via the #widgetsHostContainer template reference.\r\n-->\r\n<div\r\n  class=\"widgets-host-container {{ customTheme || '' }}\"\r\n  #widgetsHostContainer\r\n  >\r\n  <!--\r\n  Iterates through the widget data to render each individual widget.\r\n  Each widget is a draggable container powered by Angular CDK.\r\n  -->\r\n  @for (widgetConfig of getWidgetData(); track widgetConfig) {\r\n    <div\r\n      [style.width]=\"widgetConfig.width ? widgetConfig.width : '200px'\"\r\n      [style.height]=\"widgetConfig.height ? widgetConfig.height : '150px'\"\r\n      [style.minWidth]=\"widgetConfig.width ? widgetConfig.width : '200px'\"\r\n      [style.minHeight]=\"widgetConfig.height ? widgetConfig.height : '150px'\"\r\n      [style.top]=\"widgetConfig.top\"\r\n      [style.left]=\"widgetConfig.left\"\r\n      [style.background-color]=\"widgetConfig.backgroundColor\"\r\n      [class.disabled]=\"widgetConfig.disabled\"\r\n      [class.draggable]=\"widgetConfig.draggable && !widgetConfig.disabled\"\r\n      [class.resizable]=\"widgetConfig.resizable && !widgetConfig.disabled\"\r\n      class=\"widget-container\"\r\n      cdkDrag\r\n      [cdkDragDisabled]=\"!widgetConfig.draggable || widgetConfig.disabled\"\r\n      [cdkDragBoundary]=\"dragBoundaryElement\"\r\n      (cdkDragStarted)=\"onDragStarted(widgetConfig, $event)\"\r\n      (cdkDragEnded)=\"onDragEnded(widgetConfig, $event)\"\r\n      [ngClass]=\"{ 'is-active': widgetConfig.isActive }\"\r\n      >\r\n      <!--\r\n      Widget Header: Contains title and controls. Acts as the handle for dragging.\r\n      -->\r\n      <div class=\"widget-header\" cdkDragHandle>\r\n        <div class=\"widget-header-left\">\r\n          <!-- Draggable indicator icon, shown only if the widget is draggable and not disabled -->\r\n          @if (widgetConfig.draggable && !widgetConfig.disabled) {\r\n            <mat-icon\r\n              class=\"widget-drag-handle\"\r\n              aria-hidden=\"true\"\r\n              >drag_indicator</mat-icon\r\n              >\r\n            }\r\n            <!-- Optional header icon -->\r\n            @if (widgetConfig.headerIcon) {\r\n              <mat-icon class=\"widget-header-icon\">{{\r\n                widgetConfig.headerIcon\r\n              }}</mat-icon>\r\n            }\r\n            <!-- Widget Title -->\r\n            @if (widgetConfig?.title) {\r\n              <h3>{{ widgetConfig?.title }}</h3>\r\n            }\r\n          </div>\r\n          <!-- Optional close button with accessibility label -->\r\n          @if (widgetConfig?.showCloseIcon) {\r\n            <button\r\n              color=\"{{ getColor() }}\"\r\n              mat-icon-button\r\n              class=\"widget-close-button\"\r\n              [disabled]=\"widgetConfig.disabled\"\r\n              (click)=\"onCloseClick(widgetConfig.id)\"\r\n              [attr.aria-label]=\"'Close widget ' + widgetConfig?.title\"\r\n              >\r\n              <mat-icon color=\"{{ getColor() }}\">close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!--\r\n        Widget Content: Renders the main content of the widget using the child uxp-ruclib-widget-item component.\r\n        -->\r\n        <div class=\"widget-content\">\r\n          <uxp-ruclib-widget-item\r\n            [widgetConfig]=\"widgetConfig\"\r\n          ></uxp-ruclib-widget-item>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}