@ruc-lib/widget 2.0.2 → 3.1.0

package/README.md

@@ -32,34 +32,38 @@ If you only need the Widget component:
 npm install @ruc-lib/widget
 ```
 
-## Usage
+## 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`     |
 
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibWidgetModule`:
 
-```typescript
-// For Complete Library
-import { RuclibWidgetModule } from '@uxpractice/ruc-lib/widget';
-
-// For Individual Package
-import { RuclibWidgetModule } from '@ruc-lib/widget';
-
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    RuclibWidgetModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
+## Usage
+
+### 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
+}
 ```
 
 ### 2. Use the Component
@@ -199,6 +203,22 @@ export class AppComponent {
 }
 ```
 
+> ⚠️ **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);
+}
+```
+
 
 # Contribution
 

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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"}

package/index.d.ts

@@ -1,4 +1,167 @@
-export * from './lib/ruclib-widget.module';
-export * from './lib/ruclib-widget/ruclib-widget.component';
-export * from './model/default-values';
-export * from './interface/widget';
+import * as i0 from '@angular/core';
+import { Type, AfterViewInit, EventEmitter, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { CdkDragStart, CdkDragEnd } from '@angular/cdk/drag-drop';
+
+/**
+ * Defines the input properties for the main `ruclib-widget` component.
+ */
+interface WidgetConfig {
+    /**
+     * The theme color to be applied to interactive elements like icons.
+     * @example 'primary', 'accent', 'warn'
+     * @optional
+     */
+    color?: string;
+    /**
+     * An array of configuration objects, each defining a single widget.
+     * @optional
+     */
+    widgetData?: WidgetConfigData[];
+}
+/**
+ * Defines the configuration for a single widget within the container.
+ */
+interface WidgetConfigData {
+    /** A unique identifier for the widget. */
+    id: string;
+    /**
+     * The title to be displayed in the widget's header.
+     * @optional
+     */
+    title?: string;
+    /**
+     * The description or main text content, used when `contentType` is 'text'.
+     * @optional
+     */
+    description?: string;
+    /**
+     * If true, a close icon is displayed in the header to allow the user to remove the widget.
+     * @optional
+     */
+    showCloseIcon?: boolean;
+    /**
+     * If true, the widget is visually faded and cannot be interacted with (dragged, resized, etc.).
+     * @optional
+     */
+    disabled?: boolean;
+    /**
+     * The CSS width of the widget.
+     * @example '300px', '50%', '33vw'
+     * @optional
+     */
+    width?: string;
+    /**
+     * The CSS height of the widget.
+     * @example '200px', 'auto', '50vh'
+     * @optional
+     */
+    height?: string;
+    /**
+     * If true, the widget can be dragged around the container.
+     * @optional
+     */
+    draggable?: boolean;
+    /**
+     * If true, the widget can be resized by the user (requires a resizing library implementation).
+     * @optional
+     */
+    resizable?: boolean;
+    /**
+     * The type of content the widget will display.
+     * @optional
+     */
+    contentType?: 'text' | 'html' | 'component' | 'chart' | 'video' | 'audio';
+    /**
+     * The data for the content. The structure depends on the `contentType`.
+     * For 'component', it should be an object: `{ component: YourComponent, inputs: { ... } }`.
+     * @optional
+     */
+    contentData?: any | {
+        component: Type<any>;
+        inputs?: {
+            [key: string]: any;
+        };
+    };
+    /** The CSS `top` position for absolute positioning. @example '20px', '5%' @optional */
+    top?: string;
+    /** The CSS `left` position for absolute positioning. @example '20px', '5%' @optional */
+    left?: string;
+    /** The name of a Material icon to display in the header. @optional */
+    headerIcon?: string;
+    /** Internal state flag to indicate if the widget is being actively dragged or resized. @optional */
+    isActive?: boolean;
+    /** The CSS `background-color` for the widget. @example '#ffffff', 'rgba(0,0,0,0.1)' @optional */
+    backgroundColor?: string;
+}
+
+declare class RuclibWidgetComponent implements AfterViewInit {
+    private cdr;
+    /**
+     * The main configuration object for the widget container.
+     * It includes the array of widget data and global settings.
+     * @see WidgetConfig interface for detailed properties.
+     */
+    rucInputData: WidgetConfig;
+    /**
+     * An optional custom theme class to be applied to the widget host container.
+     * @example 'dark-theme', 'custom-theme-one'
+     */
+    customTheme: string | undefined;
+    /**
+     * An event emitter that fires when a widget's close icon is clicked.
+     * It emits the unique ID of the widget to be closed.
+     */
+    widgetClose: EventEmitter<string>;
+    /**
+     * 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.
+     */
+    layoutChanged: EventEmitter<WidgetConfigData[]>;
+    /**
+     * @param cdr The ChangeDetectorRef to manually trigger change detection when needed.
+     */
+    constructor(cdr: ChangeDetectorRef);
+    /** A reference to the host container element, used to define the drag boundary. */
+    widgetsHostContainerRef: ElementRef<HTMLElement>;
+    /** The HTML element that serves as the boundary for all drag operations. */
+    dragBoundaryElement: HTMLElement;
+    /**
+     * After the view initializes, this hook captures the host container's native element
+     * and sets it as the boundary for dragging widgets.
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Handles the click event on a widget's close button.
+     * @param widgetId The ID of the widget to be closed.
+     */
+    onCloseClick(widgetId: string): void;
+    /**
+     * 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: WidgetConfigData, event: CdkDragStart): void;
+    /**
+     * 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: WidgetConfigData, event: CdkDragEnd): void;
+    /**
+     * 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(): string;
+    /**
+     * 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(): WidgetConfigData[] | any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibWidgetComponent, "uxp-ruclib-widget", never, { "rucInputData": { "alias": "rucInputData"; "required": false; }; "customTheme": { "alias": "customTheme"; "required": false; }; }, { "widgetClose": "widgetClose"; "layoutChanged": "layoutChanged"; }, never, never, true, never>;
+}
+
+export { RuclibWidgetComponent };

package/package.json

@@ -1,25 +1,17 @@
 {
   "name": "@ruc-lib/widget",
-  "version": "2.0.2",
-  "license": "MIT",
+  "version": "3.1.0",
   "peerDependencies": {
-    "@angular/core": ">=15.0.0 <18.0.0",
-    "@angular/common": ">=15.0.0 <18.0.0",
-    "@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0",
-    "@angular/animations": ">=15.0.0 <18.0.0"
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "sideEffects": false,
-  "module": "fesm2015/ruc-lib-widget.mjs",
-  "es2020": "fesm2020/ruc-lib-widget.mjs",
-  "esm2020": "esm2020/ruc-lib-widget.mjs",
-  "fesm2020": "fesm2020/ruc-lib-widget.mjs",
-  "fesm2015": "fesm2015/ruc-lib-widget.mjs",
+  "module": "fesm2022/ruc-lib-widget.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -27,11 +19,7 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ruc-lib-widget.mjs",
-      "es2020": "./fesm2020/ruc-lib-widget.mjs",
-      "es2015": "./fesm2015/ruc-lib-widget.mjs",
-      "node": "./fesm2015/ruc-lib-widget.mjs",
-      "default": "./fesm2020/ruc-lib-widget.mjs"
+      "default": "./fesm2022/ruc-lib-widget.mjs"
     }
   }
 }

package/esm2020/index.mjs

@@ -1,5 +0,0 @@
-export * from './lib/ruclib-widget.module';
-export * from './lib/ruclib-widget/ruclib-widget.component';
-export * from './model/default-values';
-export * from './interface/widget';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyxvQkFBb0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi13aWRnZXQubW9kdWxlJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcnVjbGliLXdpZGdldC9ydWNsaWItd2lkZ2V0LmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbW9kZWwvZGVmYXVsdC12YWx1ZXMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZS93aWRnZXQnO1xyXG4iXX0=