@bitstack/ng-boundary 14.0.6-alpha.2 → 14.0.6-alpha.4

package/fesm2015/bitstack-ng-boundary.mjs

@@ -1,7 +1,7 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, inject, ElementRef, Component, Input, Output } from '@angular/core';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { BehaviorSubject, Subject, takeUntil, fromEvent, debounceTime } from 'rxjs';
+import { BehaviorSubject, Subject, takeUntil, fromEvent } from 'rxjs';
 
 class BsBoundaryContextService {
     constructor() {
@@ -21,115 +21,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             type: Injectable
         }] });
 
+/**
+ * ============================================================
+ * BsBoundary Component - AWD 自適應邊界容器
+ * ============================================================
+ *
+ * 功能說明：
+ * 1. 提供響應式邊界容器，自動適應不同設備尺寸
+ * 2. 支援 5 種方向模式：auto, portrait, landscape, portraitLockRotation, landscapeLockRotation
+ * 3. 使用 CSS 變數實現動態計算，支援 px2vw() 函數
+ * 4. 相容 Chrome 74+，使用 JavaScript 計算邊界尺寸
+ *
+ * 使用範例：
+ * ```html
+ * <bs-boundary [orientation]="'auto'" [isFixedCenter]="true">
+ *   <div class="content">...</div>
+ * </bs-boundary>
+ * ```
+ *
+ * CSS 變數設定：
+ * ```scss
+ * bs-boundary {
+ *   --design-width: 375;   // 設計稿寬度
+ *   --design-height: 667;  // 設計稿高度
+ * }
+ * ```
+ */
 class BsBoundary {
     constructor() {
+        // ============================================================
+        // Inputs & Outputs
+        // ============================================================
+        /**
+         * 是否將內容固定在視窗中央
+         * @default false
+         */
         this.isFixedCenter = false;
+        /**
+         * 是否禁用指標事件
+         * @default false
+         */
         this.pointerEventsNone = false;
-        this.lockOrientation = 'auto';
+        /**
+         * 方向模式
+         * - auto: 自動檢測方向
+         * - portrait: 鎖定直向
+         * - landscape: 鎖定橫向
+         * - portraitLockRotation: 強制直向（橫向設備時旋轉 -90°）
+         * - landscapeLockRotation: 強制橫向（直向設備時旋轉 90°）
+         * @default 'auto'
+         */
+        this.orientation = 'auto';
+        /**
+         * 方向變化事件
+         * @emits true: landscape（橫屏）
+         * @emits false: portrait（直屏）
+         */
         this.orientationChange = new EventEmitter();
+        // ============================================================
+        // Private Dependencies
+        // ============================================================
         this.breakpointObserver = inject(BreakpointObserver);
         this.boundaryContext = inject(BsBoundaryContextService);
         this.elementRef = inject(ElementRef);
         this.destroy$ = new Subject();
+        // ============================================================
+        // Public Properties
+        // ============================================================
+        /**
+         * 實際設備方向（基於視口尺寸）
+         * true: 直向 (height > width)
+         * false: 橫向 (width >= height)
+         */
+        this.actualIsPortrait = false;
     }
+    // ============================================================
+    // Getters
+    // ============================================================
+    /**
+     * 判斷當前是否為橫向模式
+     * 根據 orientation 設定和實際設備方向判斷
+     */
     get isLandscape() {
+        // landscapeLockRotation: 強制橫屏模式
+        if (this.orientation === 'landscapeLockRotation') {
+            return true;
+        }
+        // portraitLockRotation: 強制直屏模式
+        if (this.orientation === 'portraitLockRotation') {
+            return false;
+        }
+        // landscape: 鎖定橫向
+        if (this.orientation === 'landscape') {
+            return true;
+        }
+        // portrait: 鎖定直向
+        if (this.orientation === 'portrait') {
+            return false;
+        }
+        // auto: 自動檢測
         return this.boundaryContext.getIsLandscape();
     }
+    // ============================================================
+    // Lifecycle Hooks
+    // ============================================================
     ngOnInit() {
+        this.updateActualOrientation();
         this.setupBreakpointObserver();
         this.setupResizeObserver();
-        // 延遲執行以確保 CSS 變數已經設定
-        setTimeout(() => this.updateBoundaryCalculations(), 0);
+    }
+    ngAfterViewInit() {
+        // 在 view 初始化後計算（確保 CSS 已完全應用）
+        this.updateBoundaryCalculations();
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    // ============================================================
+    // Observers Setup - 監聽器設定
+    // ============================================================
     /**
-     * 監控方向變化
+     * 設定方向變化監控
+     *
+     * 工作原理：
+     * - lock 模式（portrait/landscape）：直接設定固定方向，不監聽變化
+     * - lockRotation 模式：設定固定方向，但需監聽實際設備方向以觸發旋轉
+     * - auto 模式：使用 BreakpointObserver 監聽設備方向變化
      */
     setupBreakpointObserver() {
-        if (this.lockOrientation === 'landscape') {
+        // landscape 或 landscapeLockRotation: 鎖定為橫向
+        if (this.orientation === 'landscape' || this.orientation === 'landscapeLockRotation') {
             this.boundaryContext.setIsLandscape(true);
             this.orientationChange.emit(true);
-            // 鎖定方向後也需要更新計算
-            setTimeout(() => this.updateBoundaryCalculations(), 0);
             return;
         }
-        if (this.lockOrientation === 'portrait') {
+        // portrait 或 portraitLockRotation: 鎖定為直向
+        if (this.orientation === 'portrait' || this.orientation === 'portraitLockRotation') {
             this.boundaryContext.setIsLandscape(false);
             this.orientationChange.emit(false);
-            // 鎖定方向後也需要更新計算
-            setTimeout(() => this.updateBoundaryCalculations(), 0);
             return;
         }
+        // auto 模式：監聽實際的設備方向（用於 orientationChange 事件）
         this.breakpointObserver
             .observe('(orientation: landscape)')
             .pipe(takeUntil(this.destroy$))
             .subscribe(result => {
             this.boundaryContext.setIsLandscape(result.matches);
             this.orientationChange.emit(result.matches);
+            // 方向變化時重新計算邊界
             this.updateBoundaryCalculations();
         });
     }
     /**
-     * 監控視口大小變化
+     * 設定視窗大小變化監控
+     *
+     * 功能：
+     * - 監聽 window resize 事件
+     * - 更新實際設備方向
+     * - 重新計算邊界尺寸
      */
     setupResizeObserver() {
         fromEvent(window, 'resize')
-            .pipe(debounceTime(100), takeUntil(this.destroy$))
+            .pipe(
+        // debounceTime(150), // 可選：防抖優化性能
+        takeUntil(this.destroy$))
             .subscribe(() => {
+            this.updateActualOrientation();
             this.updateBoundaryCalculations();
         });
     }
+    // ============================================================
+    // Calculation Methods - 計算方法
+    // ============================================================
+    /**
+     * 更新實際設備方向（基於視口尺寸）
+     *
+     * 工作原理：
+     * - 只在 lockRotation 模式下需要檢測實際方向
+     * - 通過比較 window.innerHeight 和 window.innerWidth 判斷
+     * - 結果用於觸發 CSS 旋轉變換
+     */
+    updateActualOrientation() {
+        // 只有在 lockRotation 模式下才需要檢測實際方向
+        if (this.orientation !== 'landscapeLockRotation' && this.orientation !== 'portraitLockRotation') {
+            this.actualIsPortrait = false;
+            return;
+        }
+        // 檢測實際視口方向：高度 > 寬度 = 直向
+        this.actualIsPortrait = window.innerHeight > window.innerWidth;
+    }
     /**
-     * 更新邊界計算（支援 Chrome 74，不使用 CSS min/max 函數）
+     * 更新邊界計算（支援 Chrome 74，使用 JavaScript 模擬 min 函數）
+     *
+     * 工作原理：
+     * 1. 讀取基礎 CSS 變數（vw100, vh100, design-width, design-height）
+     * 2. 處理 lockRotation 模式的視口尺寸交換
+     * 3. 計算邊界最大值和實際邊界尺寸
+     * 4. 計算 px2vw 轉換比例
+     * 5. 設定 CSS 變數供樣式使用
+     *
+     * 設定的 CSS 變數：
+     * - --boundary-width: 實際邊界寬度（px）
+     * - --boundary-height: 實際邊界高度（px）
+     * - --px2vw-ratio: px 轉 vw 的比例係數
      */
     updateBoundaryCalculations() {
         const hostElement = this.elementRef.nativeElement;
         const computedStyle = getComputedStyle(hostElement);
-        // 讀取 CSS 變數
-        const designWidth = parseFloat(computedStyle.getPropertyValue('--design-width') || '1920');
-        const designHeight = parseFloat(computedStyle.getPropertyValue('--design-height') || '1080');
-        const vw100 = parseFloat(computedStyle.getPropertyValue('--vw100') || `${window.innerWidth}`);
-        const vh100 = parseFloat(computedStyle.getPropertyValue('--vh100') || `${window.innerHeight}`);
-        // 計算比例
+        // ========================================
+        // Step 1: 讀取基礎 CSS 變數
+        // ========================================
+        let vw100 = parseFloat(computedStyle.getPropertyValue('--vw100')) || window.innerWidth;
+        let vh100 = parseFloat(computedStyle.getPropertyValue('--vh100')) || window.innerHeight;
+        const designWidth = parseFloat(computedStyle.getPropertyValue('--design-width'));
+        const designHeight = parseFloat(computedStyle.getPropertyValue('--design-height'));
+        // 檢查基礎變數是否準備好
+        if (isNaN(designWidth)) {
+            console.error('[BsBoundary][BS001] CSS variable --design-width is not set or invalid');
+            return;
+        }
+        if (isNaN(designHeight)) {
+            console.error('[BsBoundary][BS002] CSS variable --design-height is not set or invalid');
+            return;
+        }
+        if (designWidth === 0) {
+            console.error('[BsBoundary][BS003] CSS variable --design-width cannot be zero');
+            return;
+        }
+        if (designHeight === 0) {
+            console.error('[BsBoundary][BS004] CSS variable --design-height cannot be zero');
+            return;
+        }
+        // ========================================
+        // Step 2: 處理 lockRotation 模式的視口尺寸交換
+        // ========================================
+        // landscapeLockRotation + 實際直向：交換視口尺寸
+        // 原因：旋轉後，內容的寬度對應設備的高度，內容的高度對應設備的寬度
+        if (this.orientation === 'landscapeLockRotation' && this.actualIsPortrait) {
+            [vw100, vh100] = [vh100, vw100];
+        }
+        // portraitLockRotation + 實際橫向：交換視口尺寸
+        if (this.orientation === 'portraitLockRotation' && !this.actualIsPortrait) {
+            [vw100, vh100] = [vh100, vw100];
+        }
+        // ========================================
+        // Step 3: 計算比例和邊界最大值
+        // ========================================
         const landscapeRatio = designWidth / designHeight;
         const portraitRatio = designHeight / designWidth;
-        // 根據方向計算邊界最大值
+        // 根據方向模式計算邊界最大值
         const isLandscape = this.isLandscape;
         const boundaryMaxWidth = isLandscape
-            ? vh100 * portraitRatio
-            : vh100 * landscapeRatio;
+            ? vh100 * portraitRatio // 橫向：高度 * 高寬比
+            : vh100 * landscapeRatio; // 直向：高度 * 寬高比
         const boundaryMaxHeight = isLandscape
-            ? vw100 * landscapeRatio
-            : vw100 * portraitRatio;
-        // 計算實際邊界寬高（模擬 CSS min 函數）
+            ? vw100 * landscapeRatio // 橫向：寬度 * 寬高比
+            : vw100 * portraitRatio; // 直向：寬度 * 高寬比
+        // ========================================
+        // Step 4: 計算實際邊界尺寸（使用 Math.min 模擬 CSS min()）
+        // ========================================
+        // Chrome 79 才支援 CSS min() 函數，所以在 JavaScript 中計算
         const boundaryWidth = Math.min(vw100, boundaryMaxWidth);
         const boundaryHeight = Math.min(vh100, boundaryMaxHeight);
-        // 計算設計基準
+        // ========================================
+        // Step 5: 計算 px2vw 轉換比例
+        // ========================================
+        // 橫向模式使用 design-height 作為基準，直向模式使用 design-width 作為基準
         const designBaseWidth = isLandscape ? designHeight : designWidth;
-        const designBaseHeight = isLandscape ? designWidth : designHeight;
-        // 計算 px2vw 比例
         const px2vwRatio = boundaryWidth / designBaseWidth;
-        // 設定 CSS 變數到 host 元素
+        // ========================================
+        // Step 6: 設定 CSS 變數
+        // ========================================
         hostElement.style.setProperty('--boundary-width', `${boundaryWidth}px`);
         hostElement.style.setProperty('--boundary-height', `${boundaryHeight}px`);
         hostElement.style.setProperty('--px2vw-ratio', `${px2vwRatio}`);
     }
 }
 BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", lockOrientation: "lockOrientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, host: { properties: { "class.landscape": "isLandscape" } }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:var(--vw100);height:var(--vh100);max-width:calc(var(--vh100) * var(--landscape-ratio));max-height:calc(var(--vw100) * var(--portrait-ratio))}.boundary-wrapper.pointerEventsNone{pointer-events:none}:host.landscape .boundary-wrapper{max-width:calc(var(--vh100) * var(--portrait-ratio));max-height:calc(var(--vw100) * var(--landscape-ratio))}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isFixedCenter: "isFixedCenter", pointerEventsNone: "pointerEventsNone", orientation: "orientation", forwardStyle: "forwardStyle" }, outputs: { orientationChange: "orientationChange" }, host: { properties: { "class.landscape": "isLandscape && orientation === \"landscape\"", "class.portrait": "!isLandscape && orientation === \"portrait\"", "class.landscape-lock-rotation": "orientation === \"landscapeLockRotation\"", "class.portrait-lock-rotation": "orientation === \"portraitLockRotation\"", "class.actual-portrait": "actualIsPortrait", "class.actual-landscape": "!actualIsPortrait" } }, providers: [BsBoundaryContextService], ngImport: i0, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n    <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height);--px2vw-ratio: calc(var(--vw100) / var(--design-base-width))}.boundary-wrapper{width:var(--vw100);height:var(--vh100);max-width:var(--boundary-max-width);max-height:var(--boundary-max-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}:host.portrait{--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height);--px2vw-ratio: calc(var(--vw100) / var(--design-base-width))}:host.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width);--px2vw-ratio: calc(var(--vh100) * var(--portrait-ratio) / var(--design-base-width))}@media (orientation: landscape){:host:not(.landscape):not(.portrait):not(.landscape-lock-rotation):not(.portrait-lock-rotation){--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width);--px2vw-ratio: calc(var(--vh100) * var(--portrait-ratio) / var(--design-base-width))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}:host.landscape-lock-rotation{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width);--px2vw-ratio: calc(var(--vh100) * var(--portrait-ratio) / var(--design-base-width))}:host.landscape-lock-rotation.actual-portrait .boundary-wrapper{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;width:var(--boundary-width);height:var(--boundary-height);max-width:none;max-height:none}:host.portrait-lock-rotation{--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height);--px2vw-ratio: calc(var(--vw100) / var(--design-base-width))}:host.portrait-lock-rotation.actual-landscape .boundary-wrapper{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;width:var(--boundary-width);height:var(--boundary-height);max-width:none;max-height:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
             type: Component,
             args: [{ selector: 'bs-boundary', standalone: true, providers: [BsBoundaryContextService], host: {
-                        '[class.landscape]': 'isLandscape'
-                    }, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width))}.boundary-wrapper{width:var(--vw100);height:var(--vh100);max-width:calc(var(--vh100) * var(--landscape-ratio));max-height:calc(var(--vw100) * var(--portrait-ratio))}.boundary-wrapper.pointerEventsNone{pointer-events:none}:host.landscape .boundary-wrapper{max-width:calc(var(--vh100) * var(--portrait-ratio));max-height:calc(var(--vw100) * var(--landscape-ratio))}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}\n"] }]
+                        '[class.landscape]': 'isLandscape && orientation === "landscape"',
+                        '[class.portrait]': '!isLandscape && orientation === "portrait"',
+                        '[class.landscape-lock-rotation]': 'orientation === "landscapeLockRotation"',
+                        '[class.portrait-lock-rotation]': 'orientation === "portraitLockRotation"',
+                        '[class.actual-portrait]': 'actualIsPortrait',
+                        '[class.actual-landscape]': '!actualIsPortrait'
+                    }, template: "<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n    <ng-content></ng-content>\n</div>\n", styles: [":host{--landscape-ratio: calc(var(--design-width) / var(--design-height));--portrait-ratio: calc(var(--design-height) / var(--design-width));--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height);--px2vw-ratio: calc(var(--vw100) / var(--design-base-width))}.boundary-wrapper{width:var(--vw100);height:var(--vh100);max-width:var(--boundary-max-width);max-height:var(--boundary-max-height)}.boundary-wrapper.pointerEventsNone{pointer-events:none}:host.portrait{--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height);--px2vw-ratio: calc(var(--vw100) / var(--design-base-width))}:host.landscape{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width);--px2vw-ratio: calc(var(--vh100) * var(--portrait-ratio) / var(--design-base-width))}@media (orientation: landscape){:host:not(.landscape):not(.portrait):not(.landscape-lock-rotation):not(.portrait-lock-rotation){--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width);--px2vw-ratio: calc(var(--vh100) * var(--portrait-ratio) / var(--design-base-width))}}.fixed-center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:99}:host.landscape-lock-rotation{--boundary-max-width: calc(var(--vh100) * var(--portrait-ratio));--boundary-max-height: calc(var(--vw100) * var(--landscape-ratio));--design-base-width: var(--design-height);--design-base-height: var(--design-width);--px2vw-ratio: calc(var(--vh100) * var(--portrait-ratio) / var(--design-base-width))}:host.landscape-lock-rotation.actual-portrait .boundary-wrapper{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;width:var(--boundary-width);height:var(--boundary-height);max-width:none;max-height:none}:host.portrait-lock-rotation{--boundary-max-width: calc(var(--vh100) * var(--landscape-ratio));--boundary-max-height: calc(var(--vw100) * var(--portrait-ratio));--design-base-width: var(--design-width);--design-base-height: var(--design-height);--px2vw-ratio: calc(var(--vw100) / var(--design-base-width))}:host.portrait-lock-rotation.actual-landscape .boundary-wrapper{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;width:var(--boundary-width);height:var(--boundary-height);max-width:none;max-height:none}\n"] }]
         }], propDecorators: { isFixedCenter: [{
                 type: Input
             }], pointerEventsNone: [{
                 type: Input
-            }], lockOrientation: [{
+            }], orientation: [{
                 type: Input
             }], forwardStyle: [{
                 type: Input

package/fesm2015/bitstack-ng-boundary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary-context.service.ts","../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/lib/template.html","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class BsBoundaryContextService {\n  private _isLandscape = new BehaviorSubject<boolean>(false);\n\n  readonly isLandscape$ = this._isLandscape.asObservable();\n\n  setIsLandscape(value: boolean): void {\n    this._isLandscape.next(value);\n  }\n\n  getIsLandscape(): boolean {\n    return this._isLandscape.value;\n  }\n}\n","import {\n  Component,\n  ElementRef,\n  EventEmitter,\n  inject,\n  Input, OnDestroy,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport {TOrientationMode} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {debounceTime, fromEvent, Subject, takeUntil} from 'rxjs';\nimport {BsBoundaryContextService} from './bs-boundary-context.service';\n\n@Component({\n    selector: 'bs-boundary',\n    templateUrl: 'template.html',\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n    providers: [BsBoundaryContextService],\n    host: {\n        '[class.landscape]': 'isLandscape'\n    }\n})\nexport class BsBoundary implements OnInit, OnDestroy {\n\n    @Input() isFixedCenter?: boolean = false;\n    @Input() pointerEventsNone?: boolean = false;\n    @Input() lockOrientation?: TOrientationMode = 'auto';\n    @Input() forwardStyle?: Record<string, string>;\n\n    @Output() orientationChange = new EventEmitter<boolean>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private boundaryContext = inject(BsBoundaryContextService);\n    private elementRef = inject(ElementRef);\n    private destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n        this.setupResizeObserver();\n        // 延遲執行以確保 CSS 變數已經設定\n        setTimeout(() => this.updateBoundaryCalculations(), 0);\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.lockOrientation === 'landscape') {\n            this.boundaryContext.setIsLandscape(true);\n            this.orientationChange.emit(true);\n            // 鎖定方向後也需要更新計算\n            setTimeout(() => this.updateBoundaryCalculations(), 0);\n            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\n            // 鎖定方向後也需要更新計算\n            setTimeout(() => this.updateBoundaryCalculations(), 0);\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.boundaryContext.setIsLandscape(result.matches);\n                this.orientationChange.emit(result.matches);\n                this.updateBoundaryCalculations();\n            });\n    }\n\n    /**\n     * 監控視口大小變化\n     */\n    setupResizeObserver() {\n        fromEvent(window, 'resize')\n            .pipe(\n                debounceTime(100),\n                takeUntil(this.destroy$)\n            )\n            .subscribe(() => {\n                this.updateBoundaryCalculations();\n            });\n    }\n\n    /**\n     * 更新邊界計算（支援 Chrome 74，不使用 CSS min/max 函數）\n     */\n    updateBoundaryCalculations() {\n        const hostElement = this.elementRef.nativeElement as HTMLElement;\n        const computedStyle = getComputedStyle(hostElement);\n\n        // 讀取 CSS 變數\n        const designWidth = parseFloat(computedStyle.getPropertyValue('--design-width') || '1920');\n        const designHeight = parseFloat(computedStyle.getPropertyValue('--design-height') || '1080');\n        const vw100 = parseFloat(computedStyle.getPropertyValue('--vw100') || `${window.innerWidth}`);\n        const vh100 = parseFloat(computedStyle.getPropertyValue('--vh100') || `${window.innerHeight}`);\n\n        // 計算比例\n        const landscapeRatio = designWidth / designHeight;\n        const portraitRatio = designHeight / designWidth;\n\n        // 根據方向計算邊界最大值\n        const isLandscape = this.isLandscape;\n        const boundaryMaxWidth = isLandscape\n            ? vh100 * portraitRatio\n            : vh100 * landscapeRatio;\n        const boundaryMaxHeight = isLandscape\n            ? vw100 * landscapeRatio\n            : vw100 * portraitRatio;\n\n        // 計算實際邊界寬高（模擬 CSS min 函數）\n        const boundaryWidth = Math.min(vw100, boundaryMaxWidth);\n        const boundaryHeight = Math.min(vh100, boundaryMaxHeight);\n\n        // 計算設計基準\n        const designBaseWidth = isLandscape ? designHeight : designWidth;\n        const designBaseHeight = isLandscape ? designWidth : designHeight;\n\n        // 計算 px2vw 比例\n        const px2vwRatio = boundaryWidth / designBaseWidth;\n\n        // 設定 CSS 變數到 host 元素\n        hostElement.style.setProperty('--boundary-width', `${boundaryWidth}px`);\n        hostElement.style.setProperty('--boundary-height', `${boundaryHeight}px`);\n        hostElement.style.setProperty('--px2vw-ratio', `${px2vwRatio}`);\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary-context.service.ts","../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/lib/template.html","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import {Injectable} from '@angular/core';\nimport {BehaviorSubject} from 'rxjs';\n\n@Injectable()\nexport class BsBoundaryContextService {\n    private _isLandscape = new BehaviorSubject<boolean>(false);\n\n    readonly isLandscape$ = this._isLandscape.asObservable();\n\n    setIsLandscape(value: boolean): void {\n        this._isLandscape.next(value);\n    }\n\n    getIsLandscape(): boolean {\n        return this._isLandscape.value;\n    }\n}\n","import {BreakpointObserver} from '@angular/cdk/layout';\nimport {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    EventEmitter,\n    inject,\n    Input, OnDestroy,\n    OnInit,\n    Output,\n} from '@angular/core';\nimport {debounceTime, fromEvent, Subject, takeUntil} from 'rxjs';\n\nimport {BsBoundaryContextService} from './bs-boundary-context.service';\nimport {TOrientationMode} from './model';\n\n/**\n * ============================================================\n * BsBoundary Component - AWD 自適應邊界容器\n * ============================================================\n *\n * 功能說明：\n * 1. 提供響應式邊界容器，自動適應不同設備尺寸\n * 2. 支援 5 種方向模式：auto, portrait, landscape, portraitLockRotation, landscapeLockRotation\n * 3. 使用 CSS 變數實現動態計算，支援 px2vw() 函數\n * 4. 相容 Chrome 74+，使用 JavaScript 計算邊界尺寸\n *\n * 使用範例：\n * ```html\n * <bs-boundary [orientation]=\"'auto'\" [isFixedCenter]=\"true\">\n *   <div class=\"content\">...</div>\n * </bs-boundary>\n * ```\n *\n * CSS 變數設定：\n * ```scss\n * bs-boundary {\n *   --design-width: 375;   // 設計稿寬度\n *   --design-height: 667;  // 設計稿高度\n * }\n * ```\n */\n@Component({\n    selector: 'bs-boundary',\n    templateUrl: './template.html',\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n    providers: [BsBoundaryContextService],\n    host: {\n        '[class.landscape]': 'isLandscape && orientation === \"landscape\"',\n        '[class.portrait]': '!isLandscape && orientation === \"portrait\"',\n        '[class.landscape-lock-rotation]': 'orientation === \"landscapeLockRotation\"',\n        '[class.portrait-lock-rotation]': 'orientation === \"portraitLockRotation\"',\n        '[class.actual-portrait]': 'actualIsPortrait',\n        '[class.actual-landscape]': '!actualIsPortrait'\n    }\n})\nexport class BsBoundary implements OnInit, AfterViewInit, OnDestroy {\n\n    // ============================================================\n    // Inputs & Outputs\n    // ============================================================\n\n    /**\n     * 是否將內容固定在視窗中央\n     * @default false\n     */\n    @Input() isFixedCenter?: boolean = false;\n\n    /**\n     * 是否禁用指標事件\n     * @default false\n     */\n    @Input() pointerEventsNone?: boolean = false;\n\n    /**\n     * 方向模式\n     * - auto: 自動檢測方向\n     * - portrait: 鎖定直向\n     * - landscape: 鎖定橫向\n     * - portraitLockRotation: 強制直向（橫向設備時旋轉 -90°）\n     * - landscapeLockRotation: 強制橫向（直向設備時旋轉 90°）\n     * @default 'auto'\n     */\n    @Input() orientation?: TOrientationMode = 'auto';\n\n    /**\n     * 向內層容器轉發的自訂樣式\n     */\n    @Input() forwardStyle?: Record<string, string>;\n\n    /**\n     * 方向變化事件\n     * @emits true: landscape（橫屏）\n     * @emits false: portrait（直屏）\n     */\n    @Output() orientationChange = new EventEmitter<boolean>();\n\n    // ============================================================\n    // Private Dependencies\n    // ============================================================\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private boundaryContext = inject(BsBoundaryContextService);\n    private elementRef = inject(ElementRef);\n    private destroy$ = new Subject<void>();\n\n    // ============================================================\n    // Public Properties\n    // ============================================================\n\n    /**\n     * 實際設備方向（基於視口尺寸）\n     * true: 直向 (height > width)\n     * false: 橫向 (width >= height)\n     */\n    actualIsPortrait = false;\n\n    // ============================================================\n    // Getters\n    // ============================================================\n\n    /**\n     * 判斷當前是否為橫向模式\n     * 根據 orientation 設定和實際設備方向判斷\n     */\n    get isLandscape(): boolean {\n        // landscapeLockRotation: 強制橫屏模式\n        if (this.orientation === 'landscapeLockRotation') {\n            return true;\n        }\n        // portraitLockRotation: 強制直屏模式\n        if (this.orientation === 'portraitLockRotation') {\n            return false;\n        }\n        // landscape: 鎖定橫向\n        if (this.orientation === 'landscape') {\n            return true;\n        }\n        // portrait: 鎖定直向\n        if (this.orientation === 'portrait') {\n            return false;\n        }\n        // auto: 自動檢測\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    // ============================================================\n    // Lifecycle Hooks\n    // ============================================================\n\n    ngOnInit(): void {\n        this.updateActualOrientation();\n        this.setupBreakpointObserver();\n        this.setupResizeObserver();\n    }\n\n    ngAfterViewInit(): void {\n        // 在 view 初始化後計算（確保 CSS 已完全應用）\n        this.updateBoundaryCalculations();\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    // ============================================================\n    // Observers Setup - 監聽器設定\n    // ============================================================\n\n    /**\n     * 設定方向變化監控\n     *\n     * 工作原理：\n     * - lock 模式（portrait/landscape）：直接設定固定方向，不監聽變化\n     * - lockRotation 模式：設定固定方向，但需監聽實際設備方向以觸發旋轉\n     * - auto 模式：使用 BreakpointObserver 監聽設備方向變化\n     */\n    private setupBreakpointObserver() {\n        // landscape 或 landscapeLockRotation: 鎖定為橫向\n        if (this.orientation === 'landscape' || this.orientation === 'landscapeLockRotation') {\n            this.boundaryContext.setIsLandscape(true);\n            this.orientationChange.emit(true);\n            return;\n        }\n\n        // portrait 或 portraitLockRotation: 鎖定為直向\n        if (this.orientation === 'portrait' || this.orientation === 'portraitLockRotation') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\n            return;\n        }\n\n        // auto 模式：監聽實際的設備方向（用於 orientationChange 事件）\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.boundaryContext.setIsLandscape(result.matches);\n                this.orientationChange.emit(result.matches);\n                // 方向變化時重新計算邊界\n                this.updateBoundaryCalculations();\n            });\n    }\n\n    /**\n     * 設定視窗大小變化監控\n     *\n     * 功能：\n     * - 監聽 window resize 事件\n     * - 更新實際設備方向\n     * - 重新計算邊界尺寸\n     */\n    private setupResizeObserver() {\n        fromEvent(window, 'resize')\n            .pipe(\n                // debounceTime(150), // 可選：防抖優化性能\n                takeUntil(this.destroy$)\n            )\n            .subscribe(() => {\n                this.updateActualOrientation();\n                this.updateBoundaryCalculations();\n            });\n    }\n\n    // ============================================================\n    // Calculation Methods - 計算方法\n    // ============================================================\n\n    /**\n     * 更新實際設備方向（基於視口尺寸）\n     *\n     * 工作原理：\n     * - 只在 lockRotation 模式下需要檢測實際方向\n     * - 通過比較 window.innerHeight 和 window.innerWidth 判斷\n     * - 結果用於觸發 CSS 旋轉變換\n     */\n    private updateActualOrientation() {\n        // 只有在 lockRotation 模式下才需要檢測實際方向\n        if (this.orientation !== 'landscapeLockRotation' && this.orientation !== 'portraitLockRotation') {\n            this.actualIsPortrait = false;\n            return;\n        }\n\n        // 檢測實際視口方向：高度 > 寬度 = 直向\n        this.actualIsPortrait = window.innerHeight > window.innerWidth;\n    }\n\n    /**\n     * 更新邊界計算（支援 Chrome 74，使用 JavaScript 模擬 min 函數）\n     *\n     * 工作原理：\n     * 1. 讀取基礎 CSS 變數（vw100, vh100, design-width, design-height）\n     * 2. 處理 lockRotation 模式的視口尺寸交換\n     * 3. 計算邊界最大值和實際邊界尺寸\n     * 4. 計算 px2vw 轉換比例\n     * 5. 設定 CSS 變數供樣式使用\n     *\n     * 設定的 CSS 變數：\n     * - --boundary-width: 實際邊界寬度（px）\n     * - --boundary-height: 實際邊界高度（px）\n     * - --px2vw-ratio: px 轉 vw 的比例係數\n     */\n    private updateBoundaryCalculations() {\n        const hostElement = this.elementRef.nativeElement as HTMLElement;\n        const computedStyle = getComputedStyle(hostElement);\n\n        // ========================================\n        // Step 1: 讀取基礎 CSS 變數\n        // ========================================\n        let vw100 = parseFloat(computedStyle.getPropertyValue('--vw100')) || window.innerWidth;\n        let vh100 = parseFloat(computedStyle.getPropertyValue('--vh100')) || window.innerHeight;\n        const designWidth = parseFloat(computedStyle.getPropertyValue('--design-width'));\n        const designHeight = parseFloat(computedStyle.getPropertyValue('--design-height'));\n\n        // 檢查基礎變數是否準備好\n        if (isNaN(designWidth)) {\n            console.error('[BsBoundary][BS001] CSS variable --design-width is not set or invalid');\n            return;\n        }\n        if (isNaN(designHeight)) {\n            console.error('[BsBoundary][BS002] CSS variable --design-height is not set or invalid');\n            return;\n        }\n        if (designWidth === 0) {\n            console.error('[BsBoundary][BS003] CSS variable --design-width cannot be zero');\n            return;\n        }\n        if (designHeight === 0) {\n            console.error('[BsBoundary][BS004] CSS variable --design-height cannot be zero');\n            return;\n        }\n\n        // ========================================\n        // Step 2: 處理 lockRotation 模式的視口尺寸交換\n        // ========================================\n        // landscapeLockRotation + 實際直向：交換視口尺寸\n        // 原因：旋轉後，內容的寬度對應設備的高度，內容的高度對應設備的寬度\n        if (this.orientation === 'landscapeLockRotation' && this.actualIsPortrait) {\n            [vw100, vh100] = [vh100, vw100];\n        }\n\n        // portraitLockRotation + 實際橫向：交換視口尺寸\n        if (this.orientation === 'portraitLockRotation' && !this.actualIsPortrait) {\n            [vw100, vh100] = [vh100, vw100];\n        }\n\n        // ========================================\n        // Step 3: 計算比例和邊界最大值\n        // ========================================\n        const landscapeRatio = designWidth / designHeight;\n        const portraitRatio = designHeight / designWidth;\n\n        // 根據方向模式計算邊界最大值\n        const isLandscape = this.isLandscape;\n        const boundaryMaxWidth = isLandscape\n            ? vh100 * portraitRatio  // 橫向：高度 * 高寬比\n            : vh100 * landscapeRatio; // 直向：高度 * 寬高比\n        const boundaryMaxHeight = isLandscape\n            ? vw100 * landscapeRatio  // 橫向：寬度 * 寬高比\n            : vw100 * portraitRatio;  // 直向：寬度 * 高寬比\n\n        // ========================================\n        // Step 4: 計算實際邊界尺寸（使用 Math.min 模擬 CSS min()）\n        // ========================================\n        // Chrome 79 才支援 CSS min() 函數，所以在 JavaScript 中計算\n        const boundaryWidth = Math.min(vw100, boundaryMaxWidth);\n        const boundaryHeight = Math.min(vh100, boundaryMaxHeight);\n\n        // ========================================\n        // Step 5: 計算 px2vw 轉換比例\n        // ========================================\n        // 橫向模式使用 design-height 作為基準，直向模式使用 design-width 作為基準\n        const designBaseWidth = isLandscape ? designHeight : designWidth;\n        const px2vwRatio = boundaryWidth / designBaseWidth;\n\n        // ========================================\n        // Step 6: 設定 CSS 變數\n        // ========================================\n        hostElement.style.setProperty('--boundary-width', `${boundaryWidth}px`);\n        hostElement.style.setProperty('--boundary-height', `${boundaryHeight}px`);\n        hostElement.style.setProperty('--px2vw-ratio', `${px2vwRatio}`);\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n    <ng-content></ng-content>\n</div>\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}