angular-material-wrap 0.1.0-beta.11 → 0.1.0-beta.12

package/fesm2022/angular-material-wrap.mjs

@@ -2728,7 +2728,7 @@ class AmwTimepickerComponent extends BaseComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwTimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amw-timepicker', standalone: true, imports: [FormsModule, MatFormFieldModule, MatInputModule, AmwIconComponent, AmwButtonComponent], encapsulation: ViewEncapsulation.None, host: { 'data-amw-id': 'amw-timepicker' }, providers: [
+            args: [{ selector: 'amw-timepicker', standalone: true, imports: [FormsModule, MatFormFieldModule, MatInputModule, AmwButtonComponent], encapsulation: ViewEncapsulation.None, host: { 'data-amw-id': 'amw-timepicker' }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: AmwTimepickerComponent,
@@ -2788,9 +2788,43 @@ class AmwColorPickerComponent extends BaseComponent {
         });
     }
     ngOnInit() {
+        // Inject CDK overlay styles if not already present
+        this.injectCdkOverlayStyles();
         this.selectedColor.set(this.value() || '');
         this.updateColorFromValue();
     }
+    /**
+     * Injects CDK overlay styles into the document head if not already present.
+     * This ensures the overlay works correctly even if consumers don't import
+     * the library's global styles or @angular/cdk/overlay-prebuilt.css.
+     */
+    injectCdkOverlayStyles() {
+        const styleId = 'amw-cdk-overlay-styles';
+        if (document.getElementById(styleId)) {
+            return;
+        }
+        const styles = `
+            .cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}
+            .cdk-overlay-container{position:fixed;z-index:1000}
+            .cdk-overlay-container:empty{display:none}
+            .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
+            .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}
+            .cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}
+            @media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}
+            .cdk-overlay-backdrop-showing{opacity:1}
+            @media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}
+            .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}
+            .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}
+            .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}
+            .cdk-overlay-backdrop-noop-animation{transition:none}
+            .cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}
+            .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
+        `;
+        const styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.textContent = styles;
+        document.head.appendChild(styleElement);
+    }
     ngOnChanges() {
         if (this.value() !== this.selectedColor()) {
             this.selectedColor.set(this.value() || '');
@@ -3116,6 +3150,40 @@ class AmwTooltipDirective {
         this.elementRef = elementRef;
         this.overlay = overlay;
         this.injector = injector;
+        // Inject CDK overlay styles if not already present
+        this.injectCdkOverlayStyles();
+    }
+    /**
+     * Injects CDK overlay styles into the document head if not already present.
+     * This ensures the overlay works correctly even if consumers don't import
+     * the library's global styles or @angular/cdk/overlay-prebuilt.css.
+     */
+    injectCdkOverlayStyles() {
+        const styleId = 'amw-cdk-overlay-styles';
+        if (document.getElementById(styleId)) {
+            return;
+        }
+        const styles = `
+            .cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}
+            .cdk-overlay-container{position:fixed;z-index:1000}
+            .cdk-overlay-container:empty{display:none}
+            .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
+            .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}
+            .cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}
+            @media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}
+            .cdk-overlay-backdrop-showing{opacity:1}
+            @media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}
+            .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}
+            .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}
+            .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}
+            .cdk-overlay-backdrop-noop-animation{transition:none}
+            .cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}
+            .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
+        `;
+        const styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.textContent = styles;
+        document.head.appendChild(styleElement);
     }
     ngOnDestroy() {
         this.clearTimeouts();
@@ -6213,7 +6281,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         CommonModule,
                         FormsModule,
                         AmwButtonComponent,
-                        AmwIconComponent,
                         MatFormFieldModule,
                         MatInputModule,
                         MatSelectModule,
@@ -7670,7 +7737,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         CommonModule,
                         FormsModule,
                         AmwButtonComponent,
-                        AmwIconComponent,
                         AmwTooltipDirective,
                         MatMenuModule,
                         MatCardModule,
@@ -10598,8 +10664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             type: Component,
             args: [{ selector: 'amw-accordion-panel', standalone: true, imports: [
                         NgTemplateOutlet,
-                        MatExpansionModule,
-                        AmwIconComponent
+                        MatExpansionModule
                     ], encapsulation: ViewEncapsulation.None, template: `
         <mat-expansion-panel
             [expanded]="expanded()"
@@ -10909,8 +10974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'amw-menu', standalone: true, imports: [
                         NgTemplateOutlet,
                         MatMenuModule,
-                        AmwButtonComponent,
-                        AmwIconComponent
+                        AmwButtonComponent
                     ], encapsulation: ViewEncapsulation.None, template: "<div class=\"amw-menu-container\">\n  <!-- Custom trigger template -->\n  @if (triggerTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate()!\"\n      [matMenuTriggerFor]=\"menu\"\n      (menuOpened)=\"onMenuOpened()\"\n      (menuClosed)=\"onMenuClosed()\">\n    </ng-container>\n  } @else {\n    <!-- Default trigger button -->\n    <amw-button\n      [appearance]=\"triggerAppearance()\"\n      [icon]=\"triggerIcon()\"\n      [iconPosition]=\"triggerLabel() && triggerIcon() ? 'left' : 'left'\"\n      [class]=\"triggerButtonClasses()\"\n      [color]=\"triggerColor()\"\n      [disabled]=\"disabled()\"\n      [matMenuTriggerFor]=\"menu\"\n      (menuOpened)=\"onMenuOpened()\"\n      (menuClosed)=\"onMenuClosed()\">\n      @if (triggerLabel()) {\n        <span>{{ triggerLabel() }}</span>\n      }\n    </amw-button>\n  }\n\n  <!-- Menu content -->\n  <mat-menu\n    #menu=\"matMenu\"\n    [class]=\"menuClasses()\"\n    [xPosition]=\"xPosition()\"\n    [yPosition]=\"yPosition()\"\n    [hasBackdrop]=\"hasBackdrop()\"\n    [overlapTrigger]=\"overlapTrigger()\">\n    <ng-content></ng-content>\n  </mat-menu>\n</div>\n", styles: [".amw-menu-container{display:inline-block}:root{--amw-menu-background: var(--mat-menu-container-color, #ffffff);--amw-menu-text-color: var(--mat-menu-item-label-text-color, rgba(0, 0, 0, .87));--amw-menu-hover-background: var(--mat-menu-item-hover-state-layer-color, rgba(0, 0, 0, .04))}\n"] }]
         }], propDecorators: { triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], triggerAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAppearance", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], overlapTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlapTrigger", required: false }] }], triggerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTemplate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], menuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AmwMenuItemComponent), { isSignal: true }] }], matMenu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
 
@@ -11354,12 +11418,49 @@ class AmwPopoverComponent {
         this.viewContainerRef = viewContainerRef;
     }
     ngOnInit() {
+        // Inject CDK overlay styles if not already present (fallback for consumers who don't import library styles)
+        this.injectCdkOverlayStyles();
         this.initializeConfig();
         // Generate unique ID if not provided
         if (!this.popoverId()) {
             this.generatedPopoverId.set(`amw-popover-${Math.random().toString(36).substr(2, 9)}`);
         }
     }
+    /**
+     * Injects CDK overlay styles into the document head if not already present.
+     * This ensures the overlay works correctly even if consumers don't import
+     * the library's global styles or @angular/cdk/overlay-prebuilt.css.
+     */
+    injectCdkOverlayStyles() {
+        const styleId = 'amw-cdk-overlay-styles';
+        if (document.getElementById(styleId)) {
+            return;
+        }
+        const styles = `
+            .cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}
+            .cdk-overlay-container{position:fixed;z-index:1000}
+            .cdk-overlay-container:empty{display:none}
+            .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}
+            .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}
+            .cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:transparent;opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}
+            @media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}
+            .cdk-overlay-backdrop-showing{opacity:1}
+            @media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}
+            .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}
+            .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}
+            .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}
+            .cdk-overlay-backdrop-noop-animation{transition:none}
+            .cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}
+            .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
+            .cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:auto;top:0;left:0}
+            .cdk-overlay-popover::backdrop{display:none}
+            .cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}
+        `;
+        const styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.textContent = styles;
+        document.head.appendChild(styleElement);
+    }
     ngAfterContentInit() {
         // Use projected templates if input templates are not provided
         this.resolvedTriggerTemplate.set(this.triggerTemplate() || this.projectedTriggerTemplate());
@@ -12091,7 +12192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'amw-popover', standalone: true, imports: [
                         CommonModule,
                         AmwButtonComponent,
-                        AmwIconComponent,
                         MatCardModule,
                         MatDividerModule,
                         MatRippleModule,