@bitstack/ng-boundary 0.0.0-watch

package/README.md

@@ -0,0 +1,63 @@
+# MyLib
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build bitstack-ng-boundary
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/bitstack-ng-boundary
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/esm2020/bitstack-ng-boundary.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYml0c3RhY2stbmctYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvYml0c3RhY2stbmctYm91bmRhcnkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/esm2020/lib/bs-boundary.mjs

@@ -0,0 +1,121 @@
+import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+export class BsBoundary {
+    constructor() {
+        this.enableFrameLight = false;
+        this.contentClickable = true;
+        this.isDebug = false;
+        this.orientationMode = 'auto';
+        this.boundary = null;
+        this.afterBoundaryInit = new EventEmitter();
+        this.orientationChange = new EventEmitter();
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.destroy$ = new Subject();
+        this.isLandscape = false;
+    }
+    get _boundaryClass() {
+        return {
+            backgroundColor: this.bgColor,
+            ...this.injectStyle?.['drag-boundary']
+        };
+    }
+    get _contentClass() {
+        return {
+            ...this.injectStyle?.['content-wrap']
+        };
+    }
+    ngOnInit() {
+        this.setupBreakpointObserver();
+    }
+    ngAfterViewInit() {
+        if (this.boundary) {
+            this.afterBoundaryInit.emit(this.boundary);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * 監控方向變化
+     */
+    setupBreakpointObserver() {
+        if (this.orientationMode === 'landscape') {
+            this.isLandscape = true;
+            return;
+        }
+        if (this.orientationMode === 'portrait') {
+            this.isLandscape = false;
+            return;
+        }
+        this.breakpointObserver
+            .observe('(orientation: landscape)')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(result => {
+            this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');
+            this.isLandscape = result.matches;
+        });
+    }
+}
+BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { bgColor: "bgColor", enableFrameLight: "enableFrameLight", contentClickable: "contentClickable", isDebug: "isDebug", orientationMode: "orientationMode", injectStyle: "injectStyle" }, outputs: { afterBoundaryInit: "afterBoundaryInit", orientationChange: "orientationChange" }, viewQueries: [{ propertyName: "boundary", first: true, predicate: ["boundary"], descendants: true }], ngImport: i0, template: `
+        <div
+                #boundary
+                class="drag-boundary"
+                [class.enable-debug]="isDebug"
+                [class.landscape]="isLandscape"
+                [class.enableFrameLight]="enableFrameLight"
+                [style]="_boundaryClass"
+        >
+            <div
+                    class="content-wrap"
+                    [class.clickable]="contentClickable"
+                    [style]="_contentClass"
+            >
+                <ng-content/>
+            </div>
+        </div>
+    `, isInline: true, styles: ["@charset \"UTF-8\";.scale-btn{cursor:pointer;transition:transform .1s}.scale-btn:active{transform:scale(.9)}.drag-boundary{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height);overflow:hidden;aspect-ratio:.5622188906;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.2218890555dvh);--boundary-height: min(100dvh, 177.8666666667dvw);--design-base-width: 375;--design-base-height: 667;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7786666667;--boundary-width: min(100dvw, 177.8666666667dvh);--boundary-height: min(100dvh, 56.2218890555dvw);--design-base-width: 667;--design-base-height: 375}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}@screen desktop{.drag-boundary { --boundary-height: calc(100vh - env(safe-area-inset-bottom)); } .drag-boundary.enableFrameLight:before,.drag-boundary.enableFrameLight:after {content: \"\"; position: absolute; top: 0; z-index: -1; width: auto; height: 100%; aspect-ratio: 170/1080; background: 100%; background-image: url(/assets/images/_common/bg-light.png); background-size: cover;} .drag-boundary.enableFrameLight:before {left: 100%; transform: scale(-1);} .drag-boundary.enableFrameLight:after {right: 100%;}}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-boundary', template: `
+        <div
+                #boundary
+                class="drag-boundary"
+                [class.enable-debug]="isDebug"
+                [class.landscape]="isLandscape"
+                [class.enableFrameLight]="enableFrameLight"
+                [style]="_boundaryClass"
+        >
+            <div
+                    class="content-wrap"
+                    [class.clickable]="contentClickable"
+                    [style]="_contentClass"
+            >
+                <ng-content/>
+            </div>
+        </div>
+    `, standalone: true, styles: ["@charset \"UTF-8\";.scale-btn{cursor:pointer;transition:transform .1s}.scale-btn:active{transform:scale(.9)}.drag-boundary{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height);overflow:hidden;aspect-ratio:.5622188906;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.2218890555dvh);--boundary-height: min(100dvh, 177.8666666667dvw);--design-base-width: 375;--design-base-height: 667;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7786666667;--boundary-width: min(100dvw, 177.8666666667dvh);--boundary-height: min(100dvh, 56.2218890555dvw);--design-base-width: 667;--design-base-height: 375}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}@screen desktop{.drag-boundary { --boundary-height: calc(100vh - env(safe-area-inset-bottom)); } .drag-boundary.enableFrameLight:before,.drag-boundary.enableFrameLight:after {content: \"\"; position: absolute; top: 0; z-index: -1; width: auto; height: 100%; aspect-ratio: 170/1080; background: 100%; background-image: url(/assets/images/_common/bg-light.png); background-size: cover;} .drag-boundary.enableFrameLight:before {left: 100%; transform: scale(-1);} .drag-boundary.enableFrameLight:after {right: 100%;}}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] }]
+        }], propDecorators: { bgColor: [{
+                type: Input
+            }], enableFrameLight: [{
+                type: Input
+            }], contentClickable: [{
+                type: Input
+            }], isDebug: [{
+                type: Input
+            }], orientationMode: [{
+                type: Input
+            }], injectStyle: [{
+                type: Input
+            }], boundary: [{
+                type: ViewChild,
+                args: ['boundary']
+            }], afterBoundaryInit: [{
+                type: Output
+            }], orientationChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnMtYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL2JzLWJvdW5kYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCxTQUFTLEVBRVQsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDWixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsT0FBTyxFQUFFLFNBQVMsRUFBQyxNQUFNLE1BQU0sQ0FBQzs7QUF5QnhDLE1BQU0sT0FBTyxVQUFVO0lBdkJ2QjtRQXlCYSxxQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFDekIscUJBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsb0JBQWUsR0FBc0IsTUFBTSxDQUFDO1FBRTlCLGFBQVEsR0FBc0MsSUFBSSxDQUFDO1FBQ2hFLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUE4QixDQUFDO1FBQ25FLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO1FBRTNELHVCQUFrQixHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ2hELGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBQ3ZDLGdCQUFXLEdBQUcsS0FBSyxDQUFDO0tBb0R2QjtJQWxERyxJQUFJLGNBQWM7UUFDZCxPQUFPO1lBQ0gsZUFBZSxFQUFFLElBQUksQ0FBQyxPQUFPO1lBQzdCLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLGVBQWUsQ0FBQztTQUN6QyxDQUFDO0lBQ04sQ0FBQztJQUVELElBQUksYUFBYTtRQUNiLE9BQU87WUFDSCxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxjQUFjLENBQUM7U0FDeEMsQ0FBQztJQUNOLENBQUM7SUFFRCxRQUFRO1FBQ0osSUFBSSxDQUFDLHVCQUF1QixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELGVBQWU7UUFDWCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDZixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUM5QztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRDs7T0FFRztJQUNILHVCQUF1QjtRQUNuQixJQUFJLElBQUksQ0FBQyxlQUFlLEtBQUssV0FBVyxFQUFFO1lBQ3RDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1lBQ3hCLE9BQU87U0FDVjtRQUVELElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxVQUFVLEVBQUU7WUFDckMsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7WUFDekIsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLGtCQUFrQjthQUNsQixPQUFPLENBQUMsMEJBQTBCLENBQUM7YUFDbkMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDOUIsU0FBUyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQztZQUN2RSxJQUFJLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxPQUFPLENBQUM7UUFDdEMsQ0FBQyxDQUFDLENBQUM7SUFDWCxDQUFDOzt3R0FoRVEsVUFBVTs0RkFBVixVQUFVLDBjQXJCVDs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FpQlQ7NEZBSVEsVUFBVTtrQkF2QnRCLFNBQVM7K0JBQ0ksYUFBYSxZQUNiOzs7Ozs7Ozs7Ozs7Ozs7OztLQWlCVCxjQUNXLElBQUk7OEJBSVAsT0FBTztzQkFBZixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDaUIsUUFBUTtzQkFBOUIsU0FBUzt1QkFBQyxVQUFVO2dCQUNYLGlCQUFpQjtzQkFBMUIsTUFBTTtnQkFDRyxpQkFBaUI7c0JBQTFCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCwgT25EZXN0cm95LFxuICAgIE9uSW5pdCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0NoaWxkXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUT3JpZW50YXRpb25Nb2RlLCBJSW5qZWN0U3R5bGV9IGZyb20gJy4vbW9kZWwnO1xuaW1wb3J0IHtCcmVha3BvaW50T2JzZXJ2ZXJ9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHtTdWJqZWN0LCB0YWtlVW50aWx9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2JzLWJvdW5kYXJ5JyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgI2JvdW5kYXJ5XG4gICAgICAgICAgICAgICAgY2xhc3M9XCJkcmFnLWJvdW5kYXJ5XCJcbiAgICAgICAgICAgICAgICBbY2xhc3MuZW5hYmxlLWRlYnVnXT1cImlzRGVidWdcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5sYW5kc2NhcGVdPVwiaXNMYW5kc2NhcGVcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5lbmFibGVGcmFtZUxpZ2h0XT1cImVuYWJsZUZyYW1lTGlnaHRcIlxuICAgICAgICAgICAgICAgIFtzdHlsZV09XCJfYm91bmRhcnlDbGFzc1wiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJjb250ZW50LXdyYXBcIlxuICAgICAgICAgICAgICAgICAgICBbY2xhc3MuY2xpY2thYmxlXT1cImNvbnRlbnRDbGlja2FibGVcIlxuICAgICAgICAgICAgICAgICAgICBbc3R5bGVdPVwiX2NvbnRlbnRDbGFzc1wiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQvPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIGAsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBCc0JvdW5kYXJ5IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICAgIEBJbnB1dCgpIGJnQ29sb3IhOiBzdHJpbmc7XG4gICAgQElucHV0KCkgZW5hYmxlRnJhbWVMaWdodCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGNvbnRlbnRDbGlja2FibGUgPSB0cnVlO1xuICAgIEBJbnB1dCgpIGlzRGVidWcgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBvcmllbnRhdGlvbk1vZGU/OiBUT3JpZW50YXRpb25Nb2RlID0gJ2F1dG8nO1xuICAgIEBJbnB1dCgpIGluamVjdFN0eWxlPzogSUluamVjdFN0eWxlO1xuICAgIEBWaWV3Q2hpbGQoJ2JvdW5kYXJ5JykgYm91bmRhcnk6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+IHwgbnVsbCA9IG51bGw7XG4gICAgQE91dHB1dCgpIGFmdGVyQm91bmRhcnlJbml0ID0gbmV3IEV2ZW50RW1pdHRlcjxFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50Pj4oKTtcbiAgICBAT3V0cHV0KCkgb3JpZW50YXRpb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPFRPcmllbnRhdGlvbk1vZGU+KCk7XG5cbiAgICBwcml2YXRlIGJyZWFrcG9pbnRPYnNlcnZlciA9IGluamVjdChCcmVha3BvaW50T2JzZXJ2ZXIpO1xuICAgIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuICAgIGlzTGFuZHNjYXBlID0gZmFsc2U7XG5cbiAgICBnZXQgX2JvdW5kYXJ5Q2xhc3MoKSB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoaXMuYmdDb2xvcixcbiAgICAgICAgICAgIC4uLnRoaXMuaW5qZWN0U3R5bGU/LlsnZHJhZy1ib3VuZGFyeSddXG4gICAgICAgIH07XG4gICAgfVxuXG4gICAgZ2V0IF9jb250ZW50Q2xhc3MoKSB7XG4gICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAuLi50aGlzLmluamVjdFN0eWxlPy5bJ2NvbnRlbnQtd3JhcCddXG4gICAgICAgIH07XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2V0dXBCcmVha3BvaW50T2JzZXJ2ZXIoKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLmJvdW5kYXJ5KSB7XG4gICAgICAgICAgICB0aGlzLmFmdGVyQm91bmRhcnlJbml0LmVtaXQodGhpcy5ib3VuZGFyeSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kZXN0cm95JC5uZXh0KCk7XG4gICAgICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiDnm6PmjqfmlrnlkJHororljJZcbiAgICAgKi9cbiAgICBzZXR1cEJyZWFrcG9pbnRPYnNlcnZlcigpIHtcbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb25Nb2RlID09PSAnbGFuZHNjYXBlJykge1xuICAgICAgICAgICAgdGhpcy5pc0xhbmRzY2FwZSA9IHRydWU7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy5vcmllbnRhdGlvbk1vZGUgPT09ICdwb3J0cmFpdCcpIHtcbiAgICAgICAgICAgIHRoaXMuaXNMYW5kc2NhcGUgPSBmYWxzZTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYnJlYWtwb2ludE9ic2VydmVyXG4gICAgICAgICAgICAub2JzZXJ2ZSgnKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUpJylcbiAgICAgICAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgICAgICAgIC5zdWJzY3JpYmUocmVzdWx0ID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLm9yaWVudGF0aW9uQ2hhbmdlLmVtaXQocmVzdWx0Lm1hdGNoZXMgPyAnbGFuZHNjYXBlJyA6ICdwb3J0cmFpdCcpO1xuICAgICAgICAgICAgICAgIHRoaXMuaXNMYW5kc2NhcGUgPSByZXN1bHQubWF0Y2hlcztcbiAgICAgICAgICAgIH0pO1xuICAgIH1cbn1cbiJdfQ==

package/esm2020/lib/model.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL21vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIElJbmplY3RTdHlsZSB7XG4gICAgJ2RyYWctYm91bmRhcnknPzogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgICAnY29udGVudC13cmFwJz86IFJlY29yZDxzdHJpbmcsIHN0cmluZz47XG59XG5leHBvcnQgdHlwZSBUT3JpZW50YXRpb25Nb2RlID0gJ2F1dG8nIHwgJ3BvcnRyYWl0JyB8ICdsYW5kc2NhcGUnO1xuIl19

package/esm2020/public-api.mjs

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of @bitstack/ng-boundary
+ */
+export * from './lib/bs-boundary';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2JpdHN0YWNrLW5nLWJvdW5kYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgQGJpdHN0YWNrL25nLWJvdW5kYXJ5XG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvYnMtYm91bmRhcnknO1xuIl19

package/fesm2015/bitstack-ng-boundary.mjs

@@ -0,0 +1,129 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, Component, Input, ViewChild, Output } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Subject, takeUntil } from 'rxjs';
+
+class BsBoundary {
+    constructor() {
+        this.enableFrameLight = false;
+        this.contentClickable = true;
+        this.isDebug = false;
+        this.orientationMode = 'auto';
+        this.boundary = null;
+        this.afterBoundaryInit = new EventEmitter();
+        this.orientationChange = new EventEmitter();
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.destroy$ = new Subject();
+        this.isLandscape = false;
+    }
+    get _boundaryClass() {
+        var _a;
+        return Object.assign({ backgroundColor: this.bgColor }, (_a = this.injectStyle) === null || _a === void 0 ? void 0 : _a['drag-boundary']);
+    }
+    get _contentClass() {
+        var _a;
+        return Object.assign({}, (_a = this.injectStyle) === null || _a === void 0 ? void 0 : _a['content-wrap']);
+    }
+    ngOnInit() {
+        this.setupBreakpointObserver();
+    }
+    ngAfterViewInit() {
+        if (this.boundary) {
+            this.afterBoundaryInit.emit(this.boundary);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * 監控方向變化
+     */
+    setupBreakpointObserver() {
+        if (this.orientationMode === 'landscape') {
+            this.isLandscape = true;
+            return;
+        }
+        if (this.orientationMode === 'portrait') {
+            this.isLandscape = false;
+            return;
+        }
+        this.breakpointObserver
+            .observe('(orientation: landscape)')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(result => {
+            this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');
+            this.isLandscape = result.matches;
+        });
+    }
+}
+BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { bgColor: "bgColor", enableFrameLight: "enableFrameLight", contentClickable: "contentClickable", isDebug: "isDebug", orientationMode: "orientationMode", injectStyle: "injectStyle" }, outputs: { afterBoundaryInit: "afterBoundaryInit", orientationChange: "orientationChange" }, viewQueries: [{ propertyName: "boundary", first: true, predicate: ["boundary"], descendants: true }], ngImport: i0, template: `
+        <div
+                #boundary
+                class="drag-boundary"
+                [class.enable-debug]="isDebug"
+                [class.landscape]="isLandscape"
+                [class.enableFrameLight]="enableFrameLight"
+                [style]="_boundaryClass"
+        >
+            <div
+                    class="content-wrap"
+                    [class.clickable]="contentClickable"
+                    [style]="_contentClass"
+            >
+                <ng-content/>
+            </div>
+        </div>
+    `, isInline: true, styles: ["@charset \"UTF-8\";.scale-btn{cursor:pointer;transition:transform .1s}.scale-btn:active{transform:scale(.9)}.drag-boundary{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height);overflow:hidden;aspect-ratio:.5622188906;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.2218890555dvh);--boundary-height: min(100dvh, 177.8666666667dvw);--design-base-width: 375;--design-base-height: 667;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7786666667;--boundary-width: min(100dvw, 177.8666666667dvh);--boundary-height: min(100dvh, 56.2218890555dvw);--design-base-width: 667;--design-base-height: 375}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}@screen desktop{.drag-boundary { --boundary-height: calc(100vh - env(safe-area-inset-bottom)); } .drag-boundary.enableFrameLight:before,.drag-boundary.enableFrameLight:after {content: \"\"; position: absolute; top: 0; z-index: -1; width: auto; height: 100%; aspect-ratio: 170/1080; background: 100%; background-image: url(/assets/images/_common/bg-light.png); background-size: cover;} .drag-boundary.enableFrameLight:before {left: 100%; transform: scale(-1);} .drag-boundary.enableFrameLight:after {right: 100%;}}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-boundary', template: `
+        <div
+                #boundary
+                class="drag-boundary"
+                [class.enable-debug]="isDebug"
+                [class.landscape]="isLandscape"
+                [class.enableFrameLight]="enableFrameLight"
+                [style]="_boundaryClass"
+        >
+            <div
+                    class="content-wrap"
+                    [class.clickable]="contentClickable"
+                    [style]="_contentClass"
+            >
+                <ng-content/>
+            </div>
+        </div>
+    `, standalone: true, styles: ["@charset \"UTF-8\";.scale-btn{cursor:pointer;transition:transform .1s}.scale-btn:active{transform:scale(.9)}.drag-boundary{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height);overflow:hidden;aspect-ratio:.5622188906;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.2218890555dvh);--boundary-height: min(100dvh, 177.8666666667dvw);--design-base-width: 375;--design-base-height: 667;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7786666667;--boundary-width: min(100dvw, 177.8666666667dvh);--boundary-height: min(100dvh, 56.2218890555dvw);--design-base-width: 667;--design-base-height: 375}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}@screen desktop{.drag-boundary { --boundary-height: calc(100vh - env(safe-area-inset-bottom)); } .drag-boundary.enableFrameLight:before,.drag-boundary.enableFrameLight:after {content: \"\"; position: absolute; top: 0; z-index: -1; width: auto; height: 100%; aspect-ratio: 170/1080; background: 100%; background-image: url(/assets/images/_common/bg-light.png); background-size: cover;} .drag-boundary.enableFrameLight:before {left: 100%; transform: scale(-1);} .drag-boundary.enableFrameLight:after {right: 100%;}}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] }]
+        }], propDecorators: { bgColor: [{
+                type: Input
+            }], enableFrameLight: [{
+                type: Input
+            }], contentClickable: [{
+                type: Input
+            }], isDebug: [{
+                type: Input
+            }], orientationMode: [{
+                type: Input
+            }], injectStyle: [{
+                type: Input
+            }], boundary: [{
+                type: ViewChild,
+                args: ['boundary']
+            }], afterBoundaryInit: [{
+                type: Output
+            }], orientationChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of @bitstack/ng-boundary
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BsBoundary };
+//# sourceMappingURL=bitstack-ng-boundary.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    EventEmitter,\n    inject,\n    Input, OnDestroy,\n    OnInit,\n    Output,\n    ViewChild\n} from '@angular/core';\nimport {TOrientationMode, IInjectStyle} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {Subject, takeUntil} from 'rxjs';\n\n@Component({\n    selector: 'bs-boundary',\n    template: `\n        <div\n                #boundary\n                class=\"drag-boundary\"\n                [class.enable-debug]=\"isDebug\"\n                [class.landscape]=\"isLandscape\"\n                [class.enableFrameLight]=\"enableFrameLight\"\n                [style]=\"_boundaryClass\"\n        >\n            <div\n                    class=\"content-wrap\"\n                    [class.clickable]=\"contentClickable\"\n                    [style]=\"_contentClass\"\n            >\n                <ng-content/>\n            </div>\n        </div>\n    `,\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n})\nexport class BsBoundary implements OnInit, AfterViewInit, OnDestroy {\n    @Input() bgColor!: string;\n    @Input() enableFrameLight = false;\n    @Input() contentClickable = true;\n    @Input() isDebug = false;\n    @Input() orientationMode?: TOrientationMode = 'auto';\n    @Input() injectStyle?: IInjectStyle;\n    @ViewChild('boundary') boundary: ElementRef<HTMLDivElement> | null = null;\n    @Output() afterBoundaryInit = new EventEmitter<ElementRef<HTMLDivElement>>();\n    @Output() orientationChange = new EventEmitter<TOrientationMode>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private destroy$ = new Subject<void>();\n    isLandscape = false;\n\n    get _boundaryClass() {\n        return {\n            backgroundColor: this.bgColor,\n            ...this.injectStyle?.['drag-boundary']\n        };\n    }\n\n    get _contentClass() {\n        return {\n            ...this.injectStyle?.['content-wrap']\n        };\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n    }\n\n    ngAfterViewInit(): void {\n        if (this.boundary) {\n            this.afterBoundaryInit.emit(this.boundary);\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.orientationMode === 'landscape') {\n            this.isLandscape = true;\n            return;\n        }\n\n        if (this.orientationMode === 'portrait') {\n            this.isLandscape = false;\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');\n                this.isLandscape = result.matches;\n            });\n    }\n}\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\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

@@ -0,0 +1,132 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, Component, Input, ViewChild, Output } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Subject, takeUntil } from 'rxjs';
+
+class BsBoundary {
+    constructor() {
+        this.enableFrameLight = false;
+        this.contentClickable = true;
+        this.isDebug = false;
+        this.orientationMode = 'auto';
+        this.boundary = null;
+        this.afterBoundaryInit = new EventEmitter();
+        this.orientationChange = new EventEmitter();
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.destroy$ = new Subject();
+        this.isLandscape = false;
+    }
+    get _boundaryClass() {
+        return {
+            backgroundColor: this.bgColor,
+            ...this.injectStyle?.['drag-boundary']
+        };
+    }
+    get _contentClass() {
+        return {
+            ...this.injectStyle?.['content-wrap']
+        };
+    }
+    ngOnInit() {
+        this.setupBreakpointObserver();
+    }
+    ngAfterViewInit() {
+        if (this.boundary) {
+            this.afterBoundaryInit.emit(this.boundary);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * 監控方向變化
+     */
+    setupBreakpointObserver() {
+        if (this.orientationMode === 'landscape') {
+            this.isLandscape = true;
+            return;
+        }
+        if (this.orientationMode === 'portrait') {
+            this.isLandscape = false;
+            return;
+        }
+        this.breakpointObserver
+            .observe('(orientation: landscape)')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(result => {
+            this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');
+            this.isLandscape = result.matches;
+        });
+    }
+}
+BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { bgColor: "bgColor", enableFrameLight: "enableFrameLight", contentClickable: "contentClickable", isDebug: "isDebug", orientationMode: "orientationMode", injectStyle: "injectStyle" }, outputs: { afterBoundaryInit: "afterBoundaryInit", orientationChange: "orientationChange" }, viewQueries: [{ propertyName: "boundary", first: true, predicate: ["boundary"], descendants: true }], ngImport: i0, template: `
+        <div
+                #boundary
+                class="drag-boundary"
+                [class.enable-debug]="isDebug"
+                [class.landscape]="isLandscape"
+                [class.enableFrameLight]="enableFrameLight"
+                [style]="_boundaryClass"
+        >
+            <div
+                    class="content-wrap"
+                    [class.clickable]="contentClickable"
+                    [style]="_contentClass"
+            >
+                <ng-content/>
+            </div>
+        </div>
+    `, isInline: true, styles: ["@charset \"UTF-8\";.scale-btn{cursor:pointer;transition:transform .1s}.scale-btn:active{transform:scale(.9)}.drag-boundary{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height);overflow:hidden;aspect-ratio:.5622188906;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.2218890555dvh);--boundary-height: min(100dvh, 177.8666666667dvw);--design-base-width: 375;--design-base-height: 667;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7786666667;--boundary-width: min(100dvw, 177.8666666667dvh);--boundary-height: min(100dvh, 56.2218890555dvw);--design-base-width: 667;--design-base-height: 375}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}@screen desktop{.drag-boundary { --boundary-height: calc(100vh - env(safe-area-inset-bottom)); } .drag-boundary.enableFrameLight:before,.drag-boundary.enableFrameLight:after {content: \"\"; position: absolute; top: 0; z-index: -1; width: auto; height: 100%; aspect-ratio: 170/1080; background: 100%; background-image: url(/assets/images/_common/bg-light.png); background-size: cover;} .drag-boundary.enableFrameLight:before {left: 100%; transform: scale(-1);} .drag-boundary.enableFrameLight:after {right: 100%;}}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-boundary', template: `
+        <div
+                #boundary
+                class="drag-boundary"
+                [class.enable-debug]="isDebug"
+                [class.landscape]="isLandscape"
+                [class.enableFrameLight]="enableFrameLight"
+                [style]="_boundaryClass"
+        >
+            <div
+                    class="content-wrap"
+                    [class.clickable]="contentClickable"
+                    [style]="_contentClass"
+            >
+                <ng-content/>
+            </div>
+        </div>
+    `, standalone: true, styles: ["@charset \"UTF-8\";.scale-btn{cursor:pointer;transition:transform .1s}.scale-btn:active{transform:scale(.9)}.drag-boundary{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:var(--boundary-width);max-height:var(--boundary-height);overflow:hidden;aspect-ratio:.5622188906;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.2218890555dvh);--boundary-height: min(100dvh, 177.8666666667dvw);--design-base-width: 375;--design-base-height: 667;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7786666667;--boundary-width: min(100dvw, 177.8666666667dvh);--boundary-height: min(100dvh, 56.2218890555dvw);--design-base-width: 667;--design-base-height: 375}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}@screen desktop{.drag-boundary { --boundary-height: calc(100vh - env(safe-area-inset-bottom)); } .drag-boundary.enableFrameLight:before,.drag-boundary.enableFrameLight:after {content: \"\"; position: absolute; top: 0; z-index: -1; width: auto; height: 100%; aspect-ratio: 170/1080; background: 100%; background-image: url(/assets/images/_common/bg-light.png); background-size: cover;} .drag-boundary.enableFrameLight:before {left: 100%; transform: scale(-1);} .drag-boundary.enableFrameLight:after {right: 100%;}}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] }]
+        }], propDecorators: { bgColor: [{
+                type: Input
+            }], enableFrameLight: [{
+                type: Input
+            }], contentClickable: [{
+                type: Input
+            }], isDebug: [{
+                type: Input
+            }], orientationMode: [{
+                type: Input
+            }], injectStyle: [{
+                type: Input
+            }], boundary: [{
+                type: ViewChild,
+                args: ['boundary']
+            }], afterBoundaryInit: [{
+                type: Output
+            }], orientationChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of @bitstack/ng-boundary
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BsBoundary };
+//# sourceMappingURL=bitstack-ng-boundary.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../projects/bitstack-ng-boundary/src/lib/bs-boundary.ts","../../../projects/bitstack-ng-boundary/src/public-api.ts","../../../projects/bitstack-ng-boundary/src/bitstack-ng-boundary.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    Component,\n    ElementRef,\n    EventEmitter,\n    inject,\n    Input, OnDestroy,\n    OnInit,\n    Output,\n    ViewChild\n} from '@angular/core';\nimport {TOrientationMode, IInjectStyle} from './model';\nimport {BreakpointObserver} from '@angular/cdk/layout';\nimport {Subject, takeUntil} from 'rxjs';\n\n@Component({\n    selector: 'bs-boundary',\n    template: `\n        <div\n                #boundary\n                class=\"drag-boundary\"\n                [class.enable-debug]=\"isDebug\"\n                [class.landscape]=\"isLandscape\"\n                [class.enableFrameLight]=\"enableFrameLight\"\n                [style]=\"_boundaryClass\"\n        >\n            <div\n                    class=\"content-wrap\"\n                    [class.clickable]=\"contentClickable\"\n                    [style]=\"_contentClass\"\n            >\n                <ng-content/>\n            </div>\n        </div>\n    `,\n    standalone: true,\n    styleUrls: ['./styles.scss'],\n})\nexport class BsBoundary implements OnInit, AfterViewInit, OnDestroy {\n    @Input() bgColor!: string;\n    @Input() enableFrameLight = false;\n    @Input() contentClickable = true;\n    @Input() isDebug = false;\n    @Input() orientationMode?: TOrientationMode = 'auto';\n    @Input() injectStyle?: IInjectStyle;\n    @ViewChild('boundary') boundary: ElementRef<HTMLDivElement> | null = null;\n    @Output() afterBoundaryInit = new EventEmitter<ElementRef<HTMLDivElement>>();\n    @Output() orientationChange = new EventEmitter<TOrientationMode>();\n\n    private breakpointObserver = inject(BreakpointObserver);\n    private destroy$ = new Subject<void>();\n    isLandscape = false;\n\n    get _boundaryClass() {\n        return {\n            backgroundColor: this.bgColor,\n            ...this.injectStyle?.['drag-boundary']\n        };\n    }\n\n    get _contentClass() {\n        return {\n            ...this.injectStyle?.['content-wrap']\n        };\n    }\n\n    ngOnInit(): void {\n        this.setupBreakpointObserver();\n    }\n\n    ngAfterViewInit(): void {\n        if (this.boundary) {\n            this.afterBoundaryInit.emit(this.boundary);\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    /**\n     * 監控方向變化\n     */\n    setupBreakpointObserver() {\n        if (this.orientationMode === 'landscape') {\n            this.isLandscape = true;\n            return;\n        }\n\n        if (this.orientationMode === 'portrait') {\n            this.isLandscape = false;\n            return;\n        }\n\n        this.breakpointObserver\n            .observe('(orientation: landscape)')\n            .pipe(takeUntil(this.destroy$))\n            .subscribe(result => {\n                this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');\n                this.isLandscape = result.matches;\n            });\n    }\n}\n","/*\n * Public API Surface of @bitstack/ng-boundary\n */\n\nexport * from './lib/bs-boundary';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@bitstack/ng-boundary" />
+export * from './public-api';

package/lib/bs-boundary.d.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { TOrientationMode, IInjectStyle } from './model';
+import * as i0 from "@angular/core";
+export declare class BsBoundary implements OnInit, AfterViewInit, OnDestroy {
+    bgColor: string;
+    enableFrameLight: boolean;
+    contentClickable: boolean;
+    isDebug: boolean;
+    orientationMode?: TOrientationMode;
+    injectStyle?: IInjectStyle;
+    boundary: ElementRef<HTMLDivElement> | null;
+    afterBoundaryInit: EventEmitter<ElementRef<HTMLDivElement>>;
+    orientationChange: EventEmitter<TOrientationMode>;
+    private breakpointObserver;
+    private destroy$;
+    isLandscape: boolean;
+    get _boundaryClass(): {
+        backgroundColor: string;
+    };
+    get _contentClass(): {
+        [x: string]: string;
+    };
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * 監控方向變化
+     */
+    setupBreakpointObserver(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BsBoundary, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BsBoundary, "bs-boundary", never, { "bgColor": "bgColor"; "enableFrameLight": "enableFrameLight"; "contentClickable": "contentClickable"; "isDebug": "isDebug"; "orientationMode": "orientationMode"; "injectStyle": "injectStyle"; }, { "afterBoundaryInit": "afterBoundaryInit"; "orientationChange": "orientationChange"; }, never, ["*"], true, never>;
+}

package/lib/model.d.ts

@@ -0,0 +1,5 @@
+export interface IInjectStyle {
+    'drag-boundary'?: Record<string, string>;
+    'content-wrap'?: Record<string, string>;
+}
+export type TOrientationMode = 'auto' | 'portrait' | 'landscape';

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bitstack/ng-boundary",
+  "version": "0.0.0-watch+1763402264371",
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0",
+    "@angular/cdk": "^15.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2015/bitstack-ng-boundary.mjs",
+  "es2020": "fesm2020/bitstack-ng-boundary.mjs",
+  "esm2020": "esm2020/bitstack-ng-boundary.mjs",
+  "fesm2020": "fesm2020/bitstack-ng-boundary.mjs",
+  "fesm2015": "fesm2015/bitstack-ng-boundary.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/bitstack-ng-boundary.mjs",
+      "es2020": "./fesm2020/bitstack-ng-boundary.mjs",
+      "es2015": "./fesm2015/bitstack-ng-boundary.mjs",
+      "node": "./fesm2015/bitstack-ng-boundary.mjs",
+      "default": "./fesm2020/bitstack-ng-boundary.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/bs-boundary';