@acorex/cdk 22.2.9 → 22.2.11

package/fesm2022/acorex-cdk-full-screen.mjs

@@ -1,193 +1,72 @@
-import { AXZIndexService } from '@acorex/core/z-index';
+import { AXFullScreenService } from '@acorex/core/full-screen';
 import * as i0 from '@angular/core';
-import { signal, output, inject, Renderer2, ElementRef, effect, untracked, Directive } from '@angular/core';
+import { input, output, inject, ElementRef, effect, untracked, Directive } from '@angular/core';
 
 /**
- * Fullscreen directive that provides CSS-based fullscreen functionality
+ * Fullscreen directive with overlay and browser modes.
  * Usage: <element axFullscreen #fullscreen="axFullscreen"></element>
  * Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()
  */
 class AXFullScreenDirective {
     constructor() {
         /**
-         * Current fullscreen state
+         * Fullscreen implementation mode.
+         * @defaultValue 'overlay'
          */
-        this.isFullscreenState = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isFullscreenState" }] : /* istanbul ignore next */ []));
+        this.mode = input('overlay', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /**
-         * Original element styles to restore
-         */
-        this.originalStyles = {};
-        /**
-         * Original parent element reference
-         */
-        this.originalParent = null;
-        /**
-         * Fullscreen container element
-         */
-        this.fullscreenContainer = null;
-        /**
-         * Fullscreen change event
+         * Fullscreen change event for this host element.
          */
         this.fullscreenChange = output();
-        /**
-         * Z-index token for this fullscreen instance
-         */
-        this.zToken = null;
-        this.renderer = inject(Renderer2);
         this.elementRef = inject(ElementRef);
-        this.zIndexService = inject(AXZIndexService);
-        // Sync state changes to output
+        this.fullScreenService = inject(AXFullScreenService);
         effect(() => {
-            const isFullscreen = this.isFullscreenState();
+            const isActive = this.fullScreenService.isActive(this.elementRef.nativeElement);
             untracked(() => {
-                this.fullscreenChange.emit(isFullscreen);
+                this.fullscreenChange.emit(isActive);
             });
         });
     }
     /**
-     * Toggle fullscreen state
+     * Toggle fullscreen state.
      */
     toggle() {
-        if (this.isFullscreenState()) {
-            this.exit();
-        }
-        else {
-            this.enter();
-        }
+        this.fullScreenService.toggle(this.elementRef.nativeElement, this.mode());
     }
     /**
-     * Enter fullscreen mode using CSS
+     * Enter fullscreen mode.
      */
     enter() {
-        if (this.isFullscreenState()) {
-            return;
-        }
-        const element = this.elementRef.nativeElement;
-        try {
-            // Store original styles and parent
-            this.storeOriginalStyles(element);
-            this.originalParent = element.parentElement;
-            // Acquire z-index token
-            this.zToken = this.zIndexService.acquire();
-            // Create fullscreen container
-            this.fullscreenContainer = this.renderer.createElement('div');
-            this.renderer.setStyle(this.fullscreenContainer, 'position', 'fixed');
-            this.renderer.setStyle(this.fullscreenContainer, 'top', '0');
-            this.renderer.setStyle(this.fullscreenContainer, 'left', '0');
-            this.renderer.setStyle(this.fullscreenContainer, 'width', '100vw');
-            this.renderer.setStyle(this.fullscreenContainer, 'height', '100vh');
-            this.renderer.setStyle(this.fullscreenContainer, 'z-index', String(this.zToken.zIndex));
-            this.renderer.setStyle(this.fullscreenContainer, 'background-color', '#ffffff');
-            this.renderer.setStyle(this.fullscreenContainer, 'overflow', 'auto');
-            // Move element to container
-            this.renderer.appendChild(this.fullscreenContainer, element);
-            // Apply fullscreen styles to element
-            this.renderer.setStyle(element, 'position', 'relative');
-            this.renderer.setStyle(element, 'width', '100%');
-            this.renderer.setStyle(element, 'height', '100%');
-            this.renderer.setStyle(element, 'margin', '0');
-            this.renderer.setStyle(element, 'padding', '0');
-            // Append container to body
-            this.renderer.appendChild(document.body, this.fullscreenContainer);
-            // Prevent body scroll
-            this.renderer.setStyle(document.body, 'overflow', 'hidden');
-            this.isFullscreenState.set(true);
-        }
-        catch (error) {
-            console.error('Error entering fullscreen:', error);
-            this.restoreOriginalStyles(element);
-        }
+        this.fullScreenService.enter(this.elementRef.nativeElement, this.mode());
     }
     /**
-     * Exit fullscreen mode
+     * Exit fullscreen mode.
      */
     exit() {
-        if (!this.isFullscreenState()) {
-            return;
-        }
-        const element = this.elementRef.nativeElement;
-        try {
-            // Restore body scroll
-            this.renderer.removeStyle(document.body, 'overflow');
-            // Move element back to original parent
-            if (this.fullscreenContainer && this.originalParent) {
-                this.renderer.removeChild(this.fullscreenContainer, element);
-                this.renderer.appendChild(this.originalParent, element);
-                // Remove container
-                this.renderer.removeChild(document.body, this.fullscreenContainer);
-                this.fullscreenContainer = null;
-            }
-            // Release z-index token
-            this.zIndexService.release(this.zToken);
-            this.zToken = null;
-            // Restore original styles
-            this.restoreOriginalStyles(element);
-            this.isFullscreenState.set(false);
-        }
-        catch (error) {
-            console.error('Error exiting fullscreen:', error);
-        }
+        this.fullScreenService.exit(this.elementRef.nativeElement);
     }
     /**
-     * Check if currently in fullscreen mode
+     * Check if this host is currently in fullscreen mode.
      */
     isFullscreen() {
-        return this.isFullscreenState();
-    }
-    /**
-     * Store original element styles
-     */
-    storeOriginalStyles(element) {
-        const computedStyle = window.getComputedStyle(element);
-        this.originalStyles = {
-            position: computedStyle.position,
-            top: computedStyle.top,
-            left: computedStyle.left,
-            width: computedStyle.width,
-            height: computedStyle.height,
-            zIndex: computedStyle.zIndex,
-            backgroundColor: computedStyle.backgroundColor,
-            margin: computedStyle.margin,
-            padding: computedStyle.padding,
-        };
+        return this.fullScreenService.isActive(this.elementRef.nativeElement);
     }
-    /**
-     * Restore original element styles
-     */
-    restoreOriginalStyles(element) {
-        if (!this.originalStyles) {
-            return;
+    ngOnDestroy() {
+        if (this.fullScreenService.isActive(this.elementRef.nativeElement)) {
+            this.fullScreenService.exit(this.elementRef.nativeElement);
         }
-        // Restore each style property
-        Object.entries(this.originalStyles).forEach(([key, value]) => {
-            const styleKey = this.camelToKebabCase(key);
-            if (value) {
-                this.renderer.setStyle(element, styleKey, value);
-            }
-            else {
-                this.renderer.removeStyle(element, styleKey);
-            }
-        });
-        this.originalStyles = {};
-    }
-    /**
-     * Convert camelCase to kebab-case for CSS properties
-     */
-    camelToKebabCase(str) {
-        return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXFullScreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXFullScreenDirective, isStandalone: true, selector: "[axFullscreen]", outputs: { fullscreenChange: "fullscreenChange" }, exportAs: ["axFullscreen"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXFullScreenDirective, isStandalone: true, selector: "[axFullscreen]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullscreenChange: "fullscreenChange" }, exportAs: ["axFullscreen"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXFullScreenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axFullscreen]',
-                    standalone: true,
                     exportAs: 'axFullscreen',
                 }]
-        }], ctorParameters: () => [], propDecorators: { fullscreenChange: [{ type: i0.Output, args: ["fullscreenChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], fullscreenChange: [{ type: i0.Output, args: ["fullscreenChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/acorex-cdk-full-screen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-cdk-full-screen.mjs","sources":["../../../../packages/cdk/full-screen/src/lib/full-screen.directive.ts","../../../../packages/cdk/full-screen/src/acorex-cdk-full-screen.ts"],"sourcesContent":["import { AXZIndexService, AXZToken } from '@acorex/core/z-index';\nimport { Directive, effect, ElementRef, inject, output, Renderer2, signal, untracked } from '@angular/core';\n\n/**\n * Fullscreen directive that provides CSS-based fullscreen functionality\n * Usage: <element axFullscreen #fullscreen=\"axFullscreen\"></element>\n * Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()\n */\n@Directive({\n  selector: '[axFullscreen]',\n  standalone: true,\n  exportAs: 'axFullscreen',\n})\nexport class AXFullScreenDirective {\n  /**\n   * Current fullscreen state\n   */\n  private readonly isFullscreenState = signal<boolean>(false);\n\n  /**\n   * Original element styles to restore\n   */\n  private originalStyles: {\n    position?: string;\n    top?: string;\n    left?: string;\n    width?: string;\n    height?: string;\n    zIndex?: string;\n    backgroundColor?: string;\n    margin?: string;\n    padding?: string;\n  } = {};\n\n  /**\n   * Original parent element reference\n   */\n  private originalParent: HTMLElement | null = null;\n\n  /**\n   * Fullscreen container element\n   */\n  private fullscreenContainer: HTMLElement | null = null;\n\n  /**\n   * Fullscreen change event\n   */\n  readonly fullscreenChange = output<boolean>();\n\n  /**\n   * Z-index token for this fullscreen instance\n   */\n  private zToken: AXZToken | null = null;\n\n  private readonly renderer = inject(Renderer2);\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly zIndexService = inject(AXZIndexService);\n\n  constructor() {\n    // Sync state changes to output\n    effect(() => {\n      const isFullscreen = this.isFullscreenState();\n      untracked(() => {\n        this.fullscreenChange.emit(isFullscreen);\n      });\n    });\n  }\n\n  /**\n   * Toggle fullscreen state\n   */\n  toggle(): void {\n    if (this.isFullscreenState()) {\n      this.exit();\n    } else {\n      this.enter();\n    }\n  }\n\n  /**\n   * Enter fullscreen mode using CSS\n   */\n  enter(): void {\n    if (this.isFullscreenState()) {\n      return;\n    }\n\n    const element = this.elementRef.nativeElement;\n\n    try {\n      // Store original styles and parent\n      this.storeOriginalStyles(element);\n      this.originalParent = element.parentElement;\n\n      // Acquire z-index token\n      this.zToken = this.zIndexService.acquire();\n\n      // Create fullscreen container\n      this.fullscreenContainer = this.renderer.createElement('div');\n      this.renderer.setStyle(this.fullscreenContainer, 'position', 'fixed');\n      this.renderer.setStyle(this.fullscreenContainer, 'top', '0');\n      this.renderer.setStyle(this.fullscreenContainer, 'left', '0');\n      this.renderer.setStyle(this.fullscreenContainer, 'width', '100vw');\n      this.renderer.setStyle(this.fullscreenContainer, 'height', '100vh');\n      this.renderer.setStyle(this.fullscreenContainer, 'z-index', String(this.zToken.zIndex));\n      this.renderer.setStyle(this.fullscreenContainer, 'background-color', '#ffffff');\n      this.renderer.setStyle(this.fullscreenContainer, 'overflow', 'auto');\n\n      // Move element to container\n      this.renderer.appendChild(this.fullscreenContainer, element);\n\n      // Apply fullscreen styles to element\n      this.renderer.setStyle(element, 'position', 'relative');\n      this.renderer.setStyle(element, 'width', '100%');\n      this.renderer.setStyle(element, 'height', '100%');\n      this.renderer.setStyle(element, 'margin', '0');\n      this.renderer.setStyle(element, 'padding', '0');\n\n      // Append container to body\n      this.renderer.appendChild(document.body, this.fullscreenContainer);\n\n      // Prevent body scroll\n      this.renderer.setStyle(document.body, 'overflow', 'hidden');\n\n      this.isFullscreenState.set(true);\n    } catch (error) {\n      console.error('Error entering fullscreen:', error);\n      this.restoreOriginalStyles(element);\n    }\n  }\n\n  /**\n   * Exit fullscreen mode\n   */\n  exit(): void {\n    if (!this.isFullscreenState()) {\n      return;\n    }\n\n    const element = this.elementRef.nativeElement;\n\n    try {\n      // Restore body scroll\n      this.renderer.removeStyle(document.body, 'overflow');\n\n      // Move element back to original parent\n      if (this.fullscreenContainer && this.originalParent) {\n        this.renderer.removeChild(this.fullscreenContainer, element);\n        this.renderer.appendChild(this.originalParent, element);\n\n        // Remove container\n        this.renderer.removeChild(document.body, this.fullscreenContainer);\n        this.fullscreenContainer = null;\n      }\n\n      // Release z-index token\n      this.zIndexService.release(this.zToken);\n      this.zToken = null;\n\n      // Restore original styles\n      this.restoreOriginalStyles(element);\n\n      this.isFullscreenState.set(false);\n    } catch (error) {\n      console.error('Error exiting fullscreen:', error);\n    }\n  }\n\n  /**\n   * Check if currently in fullscreen mode\n   */\n  isFullscreen(): boolean {\n    return this.isFullscreenState();\n  }\n\n  /**\n   * Store original element styles\n   */\n  private storeOriginalStyles(element: HTMLElement): void {\n    const computedStyle = window.getComputedStyle(element);\n    this.originalStyles = {\n      position: computedStyle.position,\n      top: computedStyle.top,\n      left: computedStyle.left,\n      width: computedStyle.width,\n      height: computedStyle.height,\n      zIndex: computedStyle.zIndex,\n      backgroundColor: computedStyle.backgroundColor,\n      margin: computedStyle.margin,\n      padding: computedStyle.padding,\n    };\n  }\n\n  /**\n   * Restore original element styles\n   */\n  private restoreOriginalStyles(element: HTMLElement): void {\n    if (!this.originalStyles) {\n      return;\n    }\n\n    // Restore each style property\n    Object.entries(this.originalStyles).forEach(([key, value]) => {\n      const styleKey = this.camelToKebabCase(key);\n      if (value) {\n        this.renderer.setStyle(element, styleKey, value);\n      } else {\n        this.renderer.removeStyle(element, styleKey);\n      }\n    });\n\n    this.originalStyles = {};\n  }\n\n  /**\n   * Convert camelCase to kebab-case for CSS properties\n   */\n  private camelToKebabCase(str: string): string {\n    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-cdk-full-screen.mjs","sources":["../../../../packages/cdk/full-screen/src/lib/full-screen.directive.ts","../../../../packages/cdk/full-screen/src/acorex-cdk-full-screen.ts"],"sourcesContent":["import { AXFullScreenMode, AXFullScreenService } from '@acorex/core/full-screen';\nimport { Directive, effect, ElementRef, inject, input, OnDestroy, output, untracked } from '@angular/core';\n\n/**\n * Fullscreen directive with overlay and browser modes.\n * Usage: <element axFullscreen #fullscreen=\"axFullscreen\"></element>\n * Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()\n */\n@Directive({\n  selector: '[axFullscreen]',\n  exportAs: 'axFullscreen',\n})\nexport class AXFullScreenDirective implements OnDestroy {\n  /**\n   * Fullscreen implementation mode.\n   * @defaultValue 'overlay'\n   */\n  readonly mode = input<AXFullScreenMode>('overlay');\n\n  /**\n   * Fullscreen change event for this host element.\n   */\n  readonly fullscreenChange = output<boolean>();\n\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly fullScreenService = inject(AXFullScreenService);\n\n  constructor() {\n    effect(() => {\n      const isActive = this.fullScreenService.isActive(this.elementRef.nativeElement);\n      untracked(() => {\n        this.fullscreenChange.emit(isActive);\n      });\n    });\n  }\n\n  /**\n   * Toggle fullscreen state.\n   */\n  toggle(): void {\n    this.fullScreenService.toggle(this.elementRef.nativeElement, this.mode());\n  }\n\n  /**\n   * Enter fullscreen mode.\n   */\n  enter(): void {\n    this.fullScreenService.enter(this.elementRef.nativeElement, this.mode());\n  }\n\n  /**\n   * Exit fullscreen mode.\n   */\n  exit(): void {\n    this.fullScreenService.exit(this.elementRef.nativeElement);\n  }\n\n  /**\n   * Check if this host is currently in fullscreen mode.\n   */\n  isFullscreen(): boolean {\n    return this.fullScreenService.isActive(this.elementRef.nativeElement);\n  }\n\n  ngOnDestroy(): void {\n    if (this.fullScreenService.isActive(this.elementRef.nativeElement)) {\n      this.fullScreenService.exit(this.elementRef.nativeElement);\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;MAKU,qBAAqB,CAAA;AAehC,IAAA,WAAA,GAAA;AAdA;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAmB,SAAS;iFAAC;AAElD;;AAEG;QACM,IAAA,CAAA,gBAAgB,GAAG,MAAM,EAAW;AAE5B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,mBAAmB,CAAC;QAG9D,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;YAC/E,SAAS,CAAC,MAAK;AACb,gBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;AACtC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3E;AAEA;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC1E;AAEA;;AAEG;IACH,IAAI,GAAA;QACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IAC5D;AAEA;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IACvE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE;YAClE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC5D;IACF;8GAxDW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,cAAc;AACzB,iBAAA;;;ACXD;;AAEG;;;;"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@acorex/cdk",
-  "version": "22.2.9",
+  "version": "22.2.11",
   "peerDependencies": {
-    "@acorex/core": "22.2.9",
+    "@acorex/core": "22.2.11",
     "quill": ">=2.0.2",
     "qrcode": ">=1.5.4",
     "swiper": ">=11.1.15",

package/types/acorex-cdk-full-screen.d.ts

@@ -1,69 +1,44 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import { AXFullScreenMode } from '@acorex/core/full-screen';
 
 /**
- * Fullscreen directive that provides CSS-based fullscreen functionality
+ * Fullscreen directive with overlay and browser modes.
  * Usage: <element axFullscreen #fullscreen="axFullscreen"></element>
  * Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()
  */
-declare class AXFullScreenDirective {
+declare class AXFullScreenDirective implements OnDestroy {
     /**
-     * Current fullscreen state
+     * Fullscreen implementation mode.
+     * @defaultValue 'overlay'
      */
-    private readonly isFullscreenState;
+    readonly mode: _angular_core.InputSignal<AXFullScreenMode>;
     /**
-     * Original element styles to restore
+     * Fullscreen change event for this host element.
      */
-    private originalStyles;
-    /**
-     * Original parent element reference
-     */
-    private originalParent;
-    /**
-     * Fullscreen container element
-     */
-    private fullscreenContainer;
-    /**
-     * Fullscreen change event
-     */
-    readonly fullscreenChange: i0.OutputEmitterRef<boolean>;
-    /**
-     * Z-index token for this fullscreen instance
-     */
-    private zToken;
-    private readonly renderer;
+    readonly fullscreenChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly elementRef;
-    private readonly zIndexService;
+    private readonly fullScreenService;
     constructor();
     /**
-     * Toggle fullscreen state
+     * Toggle fullscreen state.
      */
     toggle(): void;
     /**
-     * Enter fullscreen mode using CSS
+     * Enter fullscreen mode.
      */
     enter(): void;
     /**
-     * Exit fullscreen mode
+     * Exit fullscreen mode.
      */
     exit(): void;
     /**
-     * Check if currently in fullscreen mode
+     * Check if this host is currently in fullscreen mode.
      */
     isFullscreen(): boolean;
-    /**
-     * Store original element styles
-     */
-    private storeOriginalStyles;
-    /**
-     * Restore original element styles
-     */
-    private restoreOriginalStyles;
-    /**
-     * Convert camelCase to kebab-case for CSS properties
-     */
-    private camelToKebabCase;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXFullScreenDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXFullScreenDirective, "[axFullscreen]", ["axFullscreen"], {}, { "fullscreenChange": "fullscreenChange"; }, never, never, true, never>;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFullScreenDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXFullScreenDirective, "[axFullscreen]", ["axFullscreen"], { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "fullscreenChange": "fullscreenChange"; }, never, never, true, never>;
 }
 
 export { AXFullScreenDirective };