@bitstack/ng-boundary 14.0.4 → 14.0.5

package/esm2020/lib/utils.mjs

@@ -0,0 +1,34 @@
+/**
+ * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
+ * @param content - HTML 內容
+ * @returns 已轉換 px 的修改後 HTML 內容
+ */
+export function convertPxToCalc(content) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(content, 'text/html');
+    // 找到所有帶有 style 屬性的元素
+    const elementsWithStyle = doc.querySelectorAll('[style]');
+    elementsWithStyle.forEach(element => {
+        const htmlElement = element;
+        const styleAttr = htmlElement.getAttribute('style');
+        if (styleAttr) {
+            // 將 style 屬性中的所有 px 值轉換為 calc()
+            const convertedStyle = convertStylePxToCalc(styleAttr);
+            htmlElement.setAttribute('style', convertedStyle);
+        }
+    });
+    return doc.body.innerHTML;
+}
+/**
+ * 將 style 字串中的 px 值轉換為 calc() 表達式
+ * @param styleString - 原始 style 字串
+ * @returns 已轉換的 style 字串
+ */
+export function convertStylePxToCalc(styleString) {
+    // 正則表達式匹配 CSS 屬性值中的 px 單位
+    // 匹配格式: 數字(可包含小數和負號) + px
+    return styleString.replace(/(-?\d+(?:\.\d+)?)px/g, (match, value) => {
+        return `calc(${value} * var(--px2vw-ratio))`;
+    });
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL3V0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFDSCxNQUFNLFVBQVUsZUFBZSxDQUFDLE9BQWU7SUFDN0MsTUFBTSxNQUFNLEdBQUcsSUFBSSxTQUFTLEVBQUUsQ0FBQztJQUMvQixNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsZUFBZSxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUMsQ0FBQztJQUV6RCxxQkFBcUI7SUFDckIsTUFBTSxpQkFBaUIsR0FBRyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFFMUQsaUJBQWlCLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1FBQ2xDLE1BQU0sV0FBVyxHQUFHLE9BQXNCLENBQUM7UUFDM0MsTUFBTSxTQUFTLEdBQUcsV0FBVyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVwRCxJQUFJLFNBQVMsRUFBRTtZQUNiLGdDQUFnQztZQUNoQyxNQUFNLGNBQWMsR0FBRyxvQkFBb0IsQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUN2RCxXQUFXLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxjQUFjLENBQUMsQ0FBQztTQUNuRDtJQUNILENBQUMsQ0FBQyxDQUFDO0lBRUgsT0FBTyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztBQUM1QixDQUFDO0FBR0Q7Ozs7R0FJRztBQUNILE1BQU0sVUFBVSxvQkFBb0IsQ0FBQyxXQUFtQjtJQUN0RCwwQkFBMEI7SUFDMUIsMEJBQTBCO0lBQzFCLE9BQU8sV0FBVyxDQUFDLE9BQU8sQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsRUFBRTtRQUNsRSxPQUFPLFFBQVEsS0FBSyx3QkFBd0IsQ0FBQztJQUMvQyxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIOWwhyBIVE1MIOWFp+WuueS4reaJgOaciSBpbmxpbmUgc3R5bGUg55qEIHB4IOWAvOi9ieaPm+eCuiBjYWxjKHB4ICogdmFyKC0tcHgydnctcmF0aW8pKVxuICogQHBhcmFtIGNvbnRlbnQgLSBIVE1MIOWFp+WuuVxuICogQHJldHVybnMg5bey6L2J5o+bIHB4IOeahOS/ruaUueW+jCBIVE1MIOWFp+WuuVxuICovXG5leHBvcnQgZnVuY3Rpb24gY29udmVydFB4VG9DYWxjKGNvbnRlbnQ6IHN0cmluZyk6IHN0cmluZyB7XG4gIGNvbnN0IHBhcnNlciA9IG5ldyBET01QYXJzZXIoKTtcbiAgY29uc3QgZG9jID0gcGFyc2VyLnBhcnNlRnJvbVN0cmluZyhjb250ZW50LCAndGV4dC9odG1sJyk7XG5cbiAgLy8g5om+5Yiw5omA5pyJ5bi25pyJIHN0eWxlIOWxrOaAp+eahOWFg+e0oFxuICBjb25zdCBlbGVtZW50c1dpdGhTdHlsZSA9IGRvYy5xdWVyeVNlbGVjdG9yQWxsKCdbc3R5bGVdJyk7XG5cbiAgZWxlbWVudHNXaXRoU3R5bGUuZm9yRWFjaChlbGVtZW50ID0+IHtcbiAgICBjb25zdCBodG1sRWxlbWVudCA9IGVsZW1lbnQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3Qgc3R5bGVBdHRyID0gaHRtbEVsZW1lbnQuZ2V0QXR0cmlidXRlKCdzdHlsZScpO1xuXG4gICAgaWYgKHN0eWxlQXR0cikge1xuICAgICAgLy8g5bCHIHN0eWxlIOWxrOaAp+S4reeahOaJgOaciSBweCDlgLzovYnmj5vngrogY2FsYygpXG4gICAgICBjb25zdCBjb252ZXJ0ZWRTdHlsZSA9IGNvbnZlcnRTdHlsZVB4VG9DYWxjKHN0eWxlQXR0cik7XG4gICAgICBodG1sRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ3N0eWxlJywgY29udmVydGVkU3R5bGUpO1xuICAgIH1cbiAgfSk7XG5cbiAgcmV0dXJuIGRvYy5ib2R5LmlubmVySFRNTDtcbn1cblxuXG4vKipcbiAqIOWwhyBzdHlsZSDlrZfkuLLkuK3nmoQgcHgg5YC86L2J5o+b54K6IGNhbGMoKSDooajpgZTlvI9cbiAqIEBwYXJhbSBzdHlsZVN0cmluZyAtIOWOn+WniyBzdHlsZSDlrZfkuLJcbiAqIEByZXR1cm5zIOW3sui9ieaPm+eahCBzdHlsZSDlrZfkuLJcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGNvbnZlcnRTdHlsZVB4VG9DYWxjKHN0eWxlU3RyaW5nOiBzdHJpbmcpOiBzdHJpbmcge1xuICAvLyDmraPliYfooajpgZTlvI/ljLnphY0gQ1NTIOWxrOaAp+WAvOS4reeahCBweCDllq7kvY1cbiAgLy8g5Yy56YWN5qC85byPOiDmlbjlrZco5Y+v5YyF5ZCr5bCP5pW45ZKM6LKg6JmfKSArIHB4XG4gIHJldHVybiBzdHlsZVN0cmluZy5yZXBsYWNlKC8oLT9cXGQrKD86XFwuXFxkKyk/KXB4L2csIChtYXRjaCwgdmFsdWUpID0+IHtcbiAgICByZXR1cm4gYGNhbGMoJHt2YWx1ZX0gKiB2YXIoLS1weDJ2dy1yYXRpbykpYDtcbiAgfSk7XG59XG4iXX0=

package/esm2020/public-api.mjs

@@ -3,4 +3,5 @@
  */
 export * from './lib/bs-boundary';
 export * from './lib/bs-boundary-context.service';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2JpdHN0YWNrLW5nLWJvdW5kYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1DQUFtQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBAYml0c3RhY2svbmctYm91bmRhcnlcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeS1jb250ZXh0LnNlcnZpY2UnO1xuIl19
+export * from './lib/utils';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2JpdHN0YWNrLW5nLWJvdW5kYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsYUFBYSxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBAYml0c3RhY2svbmctYm91bmRhcnlcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9icy1ib3VuZGFyeS1jb250ZXh0LnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdXRpbHMnXG4iXX0=

package/fesm2015/bitstack-ng-boundary.mjs

@@ -81,6 +81,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
+ * @param content - HTML 內容
+ * @returns 已轉換 px 的修改後 HTML 內容
+ */
+function convertPxToCalc(content) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(content, 'text/html');
+    // 找到所有帶有 style 屬性的元素
+    const elementsWithStyle = doc.querySelectorAll('[style]');
+    elementsWithStyle.forEach(element => {
+        const htmlElement = element;
+        const styleAttr = htmlElement.getAttribute('style');
+        if (styleAttr) {
+            // 將 style 屬性中的所有 px 值轉換為 calc()
+            const convertedStyle = convertStylePxToCalc(styleAttr);
+            htmlElement.setAttribute('style', convertedStyle);
+        }
+    });
+    return doc.body.innerHTML;
+}
+/**
+ * 將 style 字串中的 px 值轉換為 calc() 表達式
+ * @param styleString - 原始 style 字串
+ * @returns 已轉換的 style 字串
+ */
+function convertStylePxToCalc(styleString) {
+    // 正則表達式匹配 CSS 屬性值中的 px 單位
+    // 匹配格式: 數字(可包含小數和負號) + px
+    return styleString.replace(/(-?\d+(?:\.\d+)?)px/g, (match, value) => {
+        return `calc(${value} * var(--px2vw-ratio))`;
+    });
+}
+
 /*
  * Public API Surface of @bitstack/ng-boundary
  */
@@ -89,5 +123,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsBoundary, BsBoundaryContextService };
+export { BsBoundary, BsBoundaryContextService, convertPxToCalc, convertStylePxToCalc };
 //# sourceMappingURL=bitstack-ng-boundary.mjs.map

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  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 {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})\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 destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\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            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\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            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\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/lib/utils.ts","../../../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  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 {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})\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 destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\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            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\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            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/**\n * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))\n * @param content - HTML 內容\n * @returns 已轉換 px 的修改後 HTML 內容\n */\nexport function convertPxToCalc(content: string): string {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(content, 'text/html');\n\n  // 找到所有帶有 style 屬性的元素\n  const elementsWithStyle = doc.querySelectorAll('[style]');\n\n  elementsWithStyle.forEach(element => {\n    const htmlElement = element as HTMLElement;\n    const styleAttr = htmlElement.getAttribute('style');\n\n    if (styleAttr) {\n      // 將 style 屬性中的所有 px 值轉換為 calc()\n      const convertedStyle = convertStylePxToCalc(styleAttr);\n      htmlElement.setAttribute('style', convertedStyle);\n    }\n  });\n\n  return doc.body.innerHTML;\n}\n\n\n/**\n * 將 style 字串中的 px 值轉換為 calc() 表達式\n * @param styleString - 原始 style 字串\n * @returns 已轉換的 style 字串\n */\nexport function convertStylePxToCalc(styleString: string): string {\n  // 正則表達式匹配 CSS 屬性值中的 px 單位\n  // 匹配格式: 數字(可包含小數和負號) + px\n  return styleString.replace(/(-?\\d+(?:\\.\\d+)?)px/g, (match, value) => {\n    return `calc(${value} * var(--px2vw-ratio))`;\n  });\n}\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\nexport * from './lib/utils'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/bitstack-ng-boundary.mjs

@@ -81,6 +81,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
+ * @param content - HTML 內容
+ * @returns 已轉換 px 的修改後 HTML 內容
+ */
+function convertPxToCalc(content) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(content, 'text/html');
+    // 找到所有帶有 style 屬性的元素
+    const elementsWithStyle = doc.querySelectorAll('[style]');
+    elementsWithStyle.forEach(element => {
+        const htmlElement = element;
+        const styleAttr = htmlElement.getAttribute('style');
+        if (styleAttr) {
+            // 將 style 屬性中的所有 px 值轉換為 calc()
+            const convertedStyle = convertStylePxToCalc(styleAttr);
+            htmlElement.setAttribute('style', convertedStyle);
+        }
+    });
+    return doc.body.innerHTML;
+}
+/**
+ * 將 style 字串中的 px 值轉換為 calc() 表達式
+ * @param styleString - 原始 style 字串
+ * @returns 已轉換的 style 字串
+ */
+function convertStylePxToCalc(styleString) {
+    // 正則表達式匹配 CSS 屬性值中的 px 單位
+    // 匹配格式: 數字(可包含小數和負號) + px
+    return styleString.replace(/(-?\d+(?:\.\d+)?)px/g, (match, value) => {
+        return `calc(${value} * var(--px2vw-ratio))`;
+    });
+}
+
 /*
  * Public API Surface of @bitstack/ng-boundary
  */
@@ -89,5 +123,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsBoundary, BsBoundaryContextService };
+export { BsBoundary, BsBoundaryContextService, convertPxToCalc, convertStylePxToCalc };
 //# sourceMappingURL=bitstack-ng-boundary.mjs.map

package/fesm2020/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  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 {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})\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 destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\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            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\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            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\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/lib/utils.ts","../../../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  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 {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})\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 destroy$ = new Subject<void>();\n\n    get isLandscape(): boolean {\n        return this.boundaryContext.getIsLandscape();\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\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            return;\n        }\n\n        if (this.lockOrientation === 'portrait') {\n            this.boundaryContext.setIsLandscape(false);\n            this.orientationChange.emit(false);\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            });\n    }\n}\n","<div\n  class=\"boundary-wrapper\"\n  [class.fixed-center]=\"isFixedCenter\"\n  [class.landscape]=\"isLandscape\"\n  [class.pointerEventsNone]=\"pointerEventsNone\"\n  [style]=\"forwardStyle\"\n>\n   <ng-content></ng-content>\n</div>\n","/**\n * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))\n * @param content - HTML 內容\n * @returns 已轉換 px 的修改後 HTML 內容\n */\nexport function convertPxToCalc(content: string): string {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(content, 'text/html');\n\n  // 找到所有帶有 style 屬性的元素\n  const elementsWithStyle = doc.querySelectorAll('[style]');\n\n  elementsWithStyle.forEach(element => {\n    const htmlElement = element as HTMLElement;\n    const styleAttr = htmlElement.getAttribute('style');\n\n    if (styleAttr) {\n      // 將 style 屬性中的所有 px 值轉換為 calc()\n      const convertedStyle = convertStylePxToCalc(styleAttr);\n      htmlElement.setAttribute('style', convertedStyle);\n    }\n  });\n\n  return doc.body.innerHTML;\n}\n\n\n/**\n * 將 style 字串中的 px 值轉換為 calc() 表達式\n * @param styleString - 原始 style 字串\n * @returns 已轉換的 style 字串\n */\nexport function convertStylePxToCalc(styleString: string): string {\n  // 正則表達式匹配 CSS 屬性值中的 px 單位\n  // 匹配格式: 數字(可包含小數和負號) + px\n  return styleString.replace(/(-?\\d+(?:\\.\\d+)?)px/g, (match, value) => {\n    return `calc(${value} * var(--px2vw-ratio))`;\n  });\n}\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\nexport * from './lib/bs-boundary-context.service';\nexport * from './lib/utils'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/lib/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 將 HTML 內容中所有 inline style 的 px 值轉換為 calc(px * var(--px2vw-ratio))
+ * @param content - HTML 內容
+ * @returns 已轉換 px 的修改後 HTML 內容
+ */
+export declare function convertPxToCalc(content: string): string;
+/**
+ * 將 style 字串中的 px 值轉換為 calc() 表達式
+ * @param styleString - 原始 style 字串
+ * @returns 已轉換的 style 字串
+ */
+export declare function convertStylePxToCalc(styleString: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitstack/ng-boundary",
-  "version": "14.0.4",
+  "version": "14.0.5",
   "peerDependencies": {
     "@angular/common": ">=14 <16",
     "@angular/core": ">=14 <16",

package/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './lib/bs-boundary';
 export * from './lib/bs-boundary-context.service';
+export * from './lib/utils';