@bitstack/ng-boundary 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/lib/bs-boundary.mjs +78 -13
  2. package/esm2020/lib/model.mjs +2 -0
  3. package/fesm2015/bitstack-ng-boundary.mjs +74 -12
  4. package/fesm2015/bitstack-ng-boundary.mjs.map +1 -1
  5. package/fesm2020/bitstack-ng-boundary.mjs +77 -12
  6. package/fesm2020/bitstack-ng-boundary.mjs.map +1 -1
  7. package/lib/bs-boundary.d.ts +28 -2
  8. package/lib/model.d.ts +5 -0
  9. package/package.json +3 -2
package/esm2020/lib/bs-boundary.mjs CHANGED
@@ -1,19 +1,84 @@
1
- import { Component } from '@angular/core';
1
+ import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
2
+ import { BreakpointObserver } from '@angular/cdk/layout';
3
+ import { Subject, takeUntil } from 'rxjs';
2
4
  import * as i0 from "@angular/core";
3
5
  export class BsBoundary {
6
+ constructor() {
7
+ this.isDebug = false;
8
+ this.contentClickable = true;
9
+ this.orientationMode = 'auto';
10
+ this.boundary = null;
11
+ this.afterBoundaryInit = new EventEmitter();
12
+ this.orientationChange = new EventEmitter();
13
+ this.breakpointObserver = inject(BreakpointObserver);
14
+ this.destroy$ = new Subject();
15
+ this.isLandscape = false;
16
+ }
17
+ get _boundaryClass() {
18
+ return {
19
+ backgroundColor: this.bgColor,
20
+ ...this.injectStyle?.['drag-boundary']
21
+ };
22
+ }
23
+ get _contentClass() {
24
+ return {
25
+ ...this.injectStyle?.['content-wrap']
26
+ };
27
+ }
28
+ ngOnInit() {
29
+ this.setupBreakpointObserver();
30
+ }
31
+ ngAfterViewInit() {
32
+ if (this.boundary) {
33
+ this.afterBoundaryInit.emit(this.boundary);
34
+ }
35
+ }
36
+ ngOnDestroy() {
37
+ this.destroy$.next();
38
+ this.destroy$.complete();
39
+ }
40
+ /**
41
+ * 監控方向變化
42
+ */
43
+ setupBreakpointObserver() {
44
+ if (this.orientationMode === 'landscape') {
45
+ this.isLandscape = true;
46
+ return;
47
+ }
48
+ if (this.orientationMode === 'portrait') {
49
+ this.isLandscape = false;
50
+ return;
51
+ }
52
+ this.breakpointObserver
53
+ .observe('(orientation: landscape)')
54
+ .pipe(takeUntil(this.destroy$))
55
+ .subscribe(result => {
56
+ this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');
57
+ this.isLandscape = result.matches;
58
+ });
59
+ }
4
60
  }
5
61
  BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
6
- BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", ngImport: i0, template: `
7
- <p>
8
- bs-boundary works!
9
- </p>
10
- `, isInline: true });
62
+ BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isDebug: "isDebug", bgColor: "bgColor", contentClickable: "contentClickable", orientationMode: "orientationMode", injectStyle: "injectStyle" }, outputs: { afterBoundaryInit: "afterBoundaryInit", orientationChange: "orientationChange" }, viewQueries: [{ propertyName: "boundary", first: true, predicate: ["boundary"], descendants: true }], ngImport: i0, template: "<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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", 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:.5625;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.25dvh);--boundary-height: min(100dvh, 177.7777777778dvw);--design-base-width: 540;--design-base-height: 960;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7777777778;--boundary-width: min(100dvw, 177.7777777778dvh);--boundary-height: min(100dvh, 56.25dvw);--design-base-width: 960;--design-base-height: 540}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] });
11
63
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, decorators: [{
12
64
  type: Component,
13
- args: [{ selector: 'bs-boundary', template: `
14
- <p>
15
- bs-boundary works!
16
- </p>
17
- `, standalone: true }]
18
- }] });
19
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnMtYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL2JzLWJvdW5kYXJ5LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBWTFDLE1BQU0sT0FBTyxVQUFVOzt3R0FBVixVQUFVOzRGQUFWLFVBQVUsdUVBUlg7Ozs7R0FJVDs0RkFJVSxVQUFVO2tCQVZ0QixTQUFTOytCQUNFLGFBQWEsWUFDYjs7OztHQUlULGNBQ1csSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdicy1ib3VuZGFyeScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPHA+XG4gICAgICBicy1ib3VuZGFyeSB3b3JrcyFcbiAgICA8L3A+XG4gIGAsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHN0eWxlczogW11cbn0pXG5leHBvcnQgY2xhc3MgQnNCb3VuZGFyeSB7XG5cbn1cbiJdfQ==
65
+ args: [{ selector: 'bs-boundary', standalone: true, template: "<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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", 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:.5625;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.25dvh);--boundary-height: min(100dvh, 177.7777777778dvw);--design-base-width: 540;--design-base-height: 960;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7777777778;--boundary-width: min(100dvw, 177.7777777778dvh);--boundary-height: min(100dvh, 56.25dvw);--design-base-width: 960;--design-base-height: 540}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] }]
66
+ }], propDecorators: { isDebug: [{
67
+ type: Input
68
+ }], bgColor: [{
69
+ type: Input
70
+ }], contentClickable: [{
71
+ type: Input
72
+ }], orientationMode: [{
73
+ type: Input
74
+ }], injectStyle: [{
75
+ type: Input
76
+ }], boundary: [{
77
+ type: ViewChild,
78
+ args: ['boundary']
79
+ }], afterBoundaryInit: [{
80
+ type: Output
81
+ }], orientationChange: [{
82
+ type: Output
83
+ }] } });
84
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnMtYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL2JzLWJvdW5kYXJ5LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvYml0c3RhY2stbmctYm91bmRhcnkvc3JjL2xpYi90ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCxTQUFTLEVBRVQsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDWixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsT0FBTyxFQUFFLFNBQVMsRUFBQyxNQUFNLE1BQU0sQ0FBQzs7QUFReEMsTUFBTSxPQUFPLFVBQVU7SUFOdkI7UUFPYSxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBRWhCLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUN4QixvQkFBZSxHQUFzQixNQUFNLENBQUM7UUFFOUIsYUFBUSxHQUFzQyxJQUFJLENBQUM7UUFFaEUsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQThCLENBQUM7UUFDbkUsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFM0QsdUJBQWtCLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFDaEQsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFFdkMsZ0JBQVcsR0FBRyxLQUFLLENBQUM7S0FvRHZCO0lBbERHLElBQUksY0FBYztRQUNkLE9BQU87WUFDSCxlQUFlLEVBQUUsSUFBSSxDQUFDLE9BQU87WUFDN0IsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsZUFBZSxDQUFDO1NBQ3pDLENBQUM7SUFDTixDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2IsT0FBTztZQUNILEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLGNBQWMsQ0FBQztTQUN4QyxDQUFDO0lBQ04sQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNmLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1NBQzlDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsdUJBQXVCO1FBQ25CLElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxXQUFXLEVBQUU7WUFDdEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7WUFDeEIsT0FBTztTQUNWO1FBRUQsSUFBSSxJQUFJLENBQUMsZUFBZSxLQUFLLFVBQVUsRUFBRTtZQUNyQyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztZQUN6QixPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsa0JBQWtCO2FBQ2xCLE9BQU8sQ0FBQywwQkFBMEIsQ0FBQzthQUNuQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDaEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBQ3ZFLElBQUksQ0FBQyxXQUFXLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQztRQUN0QyxDQUFDLENBQUMsQ0FBQztJQUNYLENBQUM7O3dHQWpFUSxVQUFVOzRGQUFWLFVBQVUsb2FDckJ2QixtVEFlQTs0RkRNYSxVQUFVO2tCQU50QixTQUFTOytCQUNJLGFBQWEsY0FFWCxJQUFJOzhCQUlQLE9BQU87c0JBQWYsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDaUIsUUFBUTtzQkFBOUIsU0FBUzt1QkFBQyxVQUFVO2dCQUVYLGlCQUFpQjtzQkFBMUIsTUFBTTtnQkFDRyxpQkFBaUI7c0JBQTFCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCwgT25EZXN0cm95LFxuICAgIE9uSW5pdCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0NoaWxkXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUT3JpZW50YXRpb25Nb2RlLCBJSW5qZWN0U3R5bGV9IGZyb20gJy4vbW9kZWwnO1xuaW1wb3J0IHtCcmVha3BvaW50T2JzZXJ2ZXJ9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHtTdWJqZWN0LCB0YWtlVW50aWx9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2JzLWJvdW5kYXJ5JyxcbiAgICB0ZW1wbGF0ZVVybDogJ3RlbXBsYXRlLmh0bWwnLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3R5bGVzLnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQnNCb3VuZGFyeSBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgICBASW5wdXQoKSBpc0RlYnVnID0gZmFsc2U7XG4gICAgQElucHV0KCkgYmdDb2xvciE6IHN0cmluZztcbiAgICBASW5wdXQoKSBjb250ZW50Q2xpY2thYmxlID0gdHJ1ZTtcbiAgICBASW5wdXQoKSBvcmllbnRhdGlvbk1vZGU/OiBUT3JpZW50YXRpb25Nb2RlID0gJ2F1dG8nO1xuICAgIEBJbnB1dCgpIGluamVjdFN0eWxlPzogSUluamVjdFN0eWxlO1xuICAgIEBWaWV3Q2hpbGQoJ2JvdW5kYXJ5JykgYm91bmRhcnk6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+IHwgbnVsbCA9IG51bGw7XG5cbiAgICBAT3V0cHV0KCkgYWZ0ZXJCb3VuZGFyeUluaXQgPSBuZXcgRXZlbnRFbWl0dGVyPEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+PigpO1xuICAgIEBPdXRwdXQoKSBvcmllbnRhdGlvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8VE9yaWVudGF0aW9uTW9kZT4oKTtcblxuICAgIHByaXZhdGUgYnJlYWtwb2ludE9ic2VydmVyID0gaW5qZWN0KEJyZWFrcG9pbnRPYnNlcnZlcik7XG4gICAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgICBpc0xhbmRzY2FwZSA9IGZhbHNlO1xuXG4gICAgZ2V0IF9ib3VuZGFyeUNsYXNzKCkge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGlzLmJnQ29sb3IsXG4gICAgICAgICAgICAuLi50aGlzLmluamVjdFN0eWxlPy5bJ2RyYWctYm91bmRhcnknXVxuICAgICAgICB9O1xuICAgIH1cblxuICAgIGdldCBfY29udGVudENsYXNzKCkge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgLi4udGhpcy5pbmplY3RTdHlsZT8uWydjb250ZW50LXdyYXAnXVxuICAgICAgICB9O1xuICAgIH1cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNldHVwQnJlYWtwb2ludE9ic2VydmVyKCk7XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5ib3VuZGFyeSkge1xuICAgICAgICAgICAgdGhpcy5hZnRlckJvdW5kYXJ5SW5pdC5lbWl0KHRoaXMuYm91bmRhcnkpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICog55uj5o6n5pa55ZCR6K6K5YyWXG4gICAgICovXG4gICAgc2V0dXBCcmVha3BvaW50T2JzZXJ2ZXIoKSB7XG4gICAgICAgIGlmICh0aGlzLm9yaWVudGF0aW9uTW9kZSA9PT0gJ2xhbmRzY2FwZScpIHtcbiAgICAgICAgICAgIHRoaXMuaXNMYW5kc2NhcGUgPSB0cnVlO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb25Nb2RlID09PSAncG9ydHJhaXQnKSB7XG4gICAgICAgICAgICB0aGlzLmlzTGFuZHNjYXBlID0gZmFsc2U7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmJyZWFrcG9pbnRPYnNlcnZlclxuICAgICAgICAgICAgLm9ic2VydmUoJyhvcmllbnRhdGlvbjogbGFuZHNjYXBlKScpXG4gICAgICAgICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKHJlc3VsdCA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNoYW5nZS5lbWl0KHJlc3VsdC5tYXRjaGVzID8gJ2xhbmRzY2FwZScgOiAncG9ydHJhaXQnKTtcbiAgICAgICAgICAgICAgICB0aGlzLmlzTGFuZHNjYXBlID0gcmVzdWx0Lm1hdGNoZXM7XG4gICAgICAgICAgICB9KTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICNib3VuZGFyeVxuICBjbGFzcz1cImRyYWctYm91bmRhcnlcIlxuICBbY2xhc3MuZW5hYmxlLWRlYnVnXT1cImlzRGVidWdcIlxuICBbY2xhc3MubGFuZHNjYXBlXT1cImlzTGFuZHNjYXBlXCJcbiAgW3N0eWxlXT1cIl9ib3VuZGFyeUNsYXNzXCJcbj5cbiAgPGRpdlxuICAgIGNsYXNzPVwiY29udGVudC13cmFwXCJcbiAgICBbY2xhc3MuY2xpY2thYmxlXT1cImNvbnRlbnRDbGlja2FibGVcIlxuICAgIFtzdHlsZV09XCJfY29udGVudENsYXNzXCJcbiAgPlxuICAgIDxuZy1jb250ZW50Lz5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
package/esm2020/lib/model.mjs ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL21vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIElJbmplY3RTdHlsZSB7XG4gICAgJ2RyYWctYm91bmRhcnknPzogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgICAnY29udGVudC13cmFwJz86IFJlY29yZDxzdHJpbmcsIHN0cmluZz47XG59XG5leHBvcnQgdHlwZSBUT3JpZW50YXRpb25Nb2RlID0gJ2F1dG8nIHwgJ3BvcnRyYWl0JyB8ICdsYW5kc2NhcGUnO1xuIl19
package/fesm2015/bitstack-ng-boundary.mjs CHANGED
@@ -1,22 +1,84 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component } from '@angular/core';
2
+ import { EventEmitter, inject, Component, Input, ViewChild, Output } from '@angular/core';
3
+ import { BreakpointObserver } from '@angular/cdk/layout';
4
+ import { Subject, takeUntil } from 'rxjs';
3
5
 
4
6
  class BsBoundary {
7
+ constructor() {
8
+ this.isDebug = false;
9
+ this.contentClickable = true;
10
+ this.orientationMode = 'auto';
11
+ this.boundary = null;
12
+ this.afterBoundaryInit = new EventEmitter();
13
+ this.orientationChange = new EventEmitter();
14
+ this.breakpointObserver = inject(BreakpointObserver);
15
+ this.destroy$ = new Subject();
16
+ this.isLandscape = false;
17
+ }
18
+ get _boundaryClass() {
19
+ var _a;
20
+ return Object.assign({ backgroundColor: this.bgColor }, (_a = this.injectStyle) === null || _a === void 0 ? void 0 : _a['drag-boundary']);
21
+ }
22
+ get _contentClass() {
23
+ var _a;
24
+ return Object.assign({}, (_a = this.injectStyle) === null || _a === void 0 ? void 0 : _a['content-wrap']);
25
+ }
26
+ ngOnInit() {
27
+ this.setupBreakpointObserver();
28
+ }
29
+ ngAfterViewInit() {
30
+ if (this.boundary) {
31
+ this.afterBoundaryInit.emit(this.boundary);
32
+ }
33
+ }
34
+ ngOnDestroy() {
35
+ this.destroy$.next();
36
+ this.destroy$.complete();
37
+ }
38
+ /**
39
+ * 監控方向變化
40
+ */
41
+ setupBreakpointObserver() {
42
+ if (this.orientationMode === 'landscape') {
43
+ this.isLandscape = true;
44
+ return;
45
+ }
46
+ if (this.orientationMode === 'portrait') {
47
+ this.isLandscape = false;
48
+ return;
49
+ }
50
+ this.breakpointObserver
51
+ .observe('(orientation: landscape)')
52
+ .pipe(takeUntil(this.destroy$))
53
+ .subscribe(result => {
54
+ this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');
55
+ this.isLandscape = result.matches;
56
+ });
57
+ }
5
58
  }
6
59
  BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
7
- BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", ngImport: i0, template: `
8
- <p>
9
- bs-boundary works!
10
- </p>
11
- `, isInline: true });
60
+ BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isDebug: "isDebug", bgColor: "bgColor", contentClickable: "contentClickable", orientationMode: "orientationMode", injectStyle: "injectStyle" }, outputs: { afterBoundaryInit: "afterBoundaryInit", orientationChange: "orientationChange" }, viewQueries: [{ propertyName: "boundary", first: true, predicate: ["boundary"], descendants: true }], ngImport: i0, template: "<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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", 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:.5625;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.25dvh);--boundary-height: min(100dvh, 177.7777777778dvw);--design-base-width: 540;--design-base-height: 960;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7777777778;--boundary-width: min(100dvw, 177.7777777778dvh);--boundary-height: min(100dvh, 56.25dvw);--design-base-width: 960;--design-base-height: 540}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] });
12
61
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, decorators: [{
13
62
  type: Component,
14
- args: [{ selector: 'bs-boundary', template: `
15
- <p>
16
- bs-boundary works!
17
- </p>
18
- `, standalone: true }]
19
- }] });
63
+ args: [{ selector: 'bs-boundary', standalone: true, template: "<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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", 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:.5625;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.25dvh);--boundary-height: min(100dvh, 177.7777777778dvw);--design-base-width: 540;--design-base-height: 960;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7777777778;--boundary-width: min(100dvw, 177.7777777778dvh);--boundary-height: min(100dvh, 56.25dvw);--design-base-width: 960;--design-base-height: 540}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] }]
64
+ }], propDecorators: { isDebug: [{
65
+ type: Input
66
+ }], bgColor: [{
67
+ type: Input
68
+ }], contentClickable: [{
69
+ type: Input
70
+ }], orientationMode: [{
71
+ type: Input
72
+ }], injectStyle: [{
73
+ type: Input
74
+ }], boundary: [{
75
+ type: ViewChild,
76
+ args: ['boundary']
77
+ }], afterBoundaryInit: [{
78
+ type: Output
79
+ }], orientationChange: [{
80
+ type: Output
81
+ }] } });
20
82
 
21
83
  /*
22
84
  * Public API Surface of @bitstack/ng-boundary
package/fesm2015/bitstack-ng-boundary.mjs.map CHANGED
@@ -1 +1 @@
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 { Component } from '@angular/core';\n\n@Component({\n selector: 'bs-boundary',\n template: `\n <p>\n bs-boundary works!\n </p>\n `,\n standalone: true,\n styles: []\n})\nexport class BsBoundary {\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":";;;MAYa,UAAU,CAAA;;wGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,UAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,EARX,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;4FAIU,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;YACE,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EACb,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,UAAA,EACW,IAAI,EAAA,CAAA;;;ACTlB;;AAEG;;ACFH;;AAEG;;;;"}
1
+ {"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../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 {\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 templateUrl: 'template.html',\n standalone: true,\n styleUrls: ['./styles.scss'],\n})\nexport class BsBoundary implements OnInit, AfterViewInit, OnDestroy {\n @Input() isDebug = false;\n @Input() bgColor!: string;\n @Input() contentClickable = true;\n @Input() orientationMode?: TOrientationMode = 'auto';\n @Input() injectStyle?: IInjectStyle;\n @ViewChild('boundary') boundary: ElementRef<HTMLDivElement> | null = null;\n\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\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","<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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 * 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 CHANGED
@@ -1,22 +1,87 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component } from '@angular/core';
2
+ import { EventEmitter, inject, Component, Input, ViewChild, Output } from '@angular/core';
3
+ import { BreakpointObserver } from '@angular/cdk/layout';
4
+ import { Subject, takeUntil } from 'rxjs';
3
5
 
4
6
  class BsBoundary {
7
+ constructor() {
8
+ this.isDebug = false;
9
+ this.contentClickable = true;
10
+ this.orientationMode = 'auto';
11
+ this.boundary = null;
12
+ this.afterBoundaryInit = new EventEmitter();
13
+ this.orientationChange = new EventEmitter();
14
+ this.breakpointObserver = inject(BreakpointObserver);
15
+ this.destroy$ = new Subject();
16
+ this.isLandscape = false;
17
+ }
18
+ get _boundaryClass() {
19
+ return {
20
+ backgroundColor: this.bgColor,
21
+ ...this.injectStyle?.['drag-boundary']
22
+ };
23
+ }
24
+ get _contentClass() {
25
+ return {
26
+ ...this.injectStyle?.['content-wrap']
27
+ };
28
+ }
29
+ ngOnInit() {
30
+ this.setupBreakpointObserver();
31
+ }
32
+ ngAfterViewInit() {
33
+ if (this.boundary) {
34
+ this.afterBoundaryInit.emit(this.boundary);
35
+ }
36
+ }
37
+ ngOnDestroy() {
38
+ this.destroy$.next();
39
+ this.destroy$.complete();
40
+ }
41
+ /**
42
+ * 監控方向變化
43
+ */
44
+ setupBreakpointObserver() {
45
+ if (this.orientationMode === 'landscape') {
46
+ this.isLandscape = true;
47
+ return;
48
+ }
49
+ if (this.orientationMode === 'portrait') {
50
+ this.isLandscape = false;
51
+ return;
52
+ }
53
+ this.breakpointObserver
54
+ .observe('(orientation: landscape)')
55
+ .pipe(takeUntil(this.destroy$))
56
+ .subscribe(result => {
57
+ this.orientationChange.emit(result.matches ? 'landscape' : 'portrait');
58
+ this.isLandscape = result.matches;
59
+ });
60
+ }
5
61
  }
6
62
  BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
7
- BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", ngImport: i0, template: `
8
- <p>
9
- bs-boundary works!
10
- </p>
11
- `, isInline: true });
63
+ BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BsBoundary, isStandalone: true, selector: "bs-boundary", inputs: { isDebug: "isDebug", bgColor: "bgColor", contentClickable: "contentClickable", orientationMode: "orientationMode", injectStyle: "injectStyle" }, outputs: { afterBoundaryInit: "afterBoundaryInit", orientationChange: "orientationChange" }, viewQueries: [{ propertyName: "boundary", first: true, predicate: ["boundary"], descendants: true }], ngImport: i0, template: "<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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", 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:.5625;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.25dvh);--boundary-height: min(100dvh, 177.7777777778dvw);--design-base-width: 540;--design-base-height: 960;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7777777778;--boundary-width: min(100dvw, 177.7777777778dvh);--boundary-height: min(100dvh, 56.25dvw);--design-base-width: 960;--design-base-height: 540}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] });
12
64
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BsBoundary, decorators: [{
13
65
  type: Component,
14
- args: [{ selector: 'bs-boundary', template: `
15
- <p>
16
- bs-boundary works!
17
- </p>
18
- `, standalone: true }]
19
- }] });
66
+ args: [{ selector: 'bs-boundary', standalone: true, template: "<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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", 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:.5625;z-index:1;pointer-events:none;transform-origin:center;--boundary-width: min(100dvw, 56.25dvh);--boundary-height: min(100dvh, 177.7777777778dvw);--design-base-width: 540;--design-base-height: 960;--px2vw-ratio: calc(var(--boundary-width) / var(--design-base-width))}.drag-boundary.landscape{aspect-ratio:1.7777777778;--boundary-width: min(100dvw, 177.7777777778dvh);--boundary-height: min(100dvh, 56.25dvw);--design-base-width: 960;--design-base-height: 540}.drag-boundary.enable-debug{background-color:#86cee668}.drag-boundary.hidden{visibility:hidden}.content-wrap{width:100%;height:100%}.content-wrap.clickable{pointer-events:all}\n"] }]
67
+ }], propDecorators: { isDebug: [{
68
+ type: Input
69
+ }], bgColor: [{
70
+ type: Input
71
+ }], contentClickable: [{
72
+ type: Input
73
+ }], orientationMode: [{
74
+ type: Input
75
+ }], injectStyle: [{
76
+ type: Input
77
+ }], boundary: [{
78
+ type: ViewChild,
79
+ args: ['boundary']
80
+ }], afterBoundaryInit: [{
81
+ type: Output
82
+ }], orientationChange: [{
83
+ type: Output
84
+ }] } });
20
85
 
21
86
  /*
22
87
  * Public API Surface of @bitstack/ng-boundary
package/fesm2020/bitstack-ng-boundary.mjs.map CHANGED
@@ -1 +1 @@
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 { Component } from '@angular/core';\n\n@Component({\n selector: 'bs-boundary',\n template: `\n <p>\n bs-boundary works!\n </p>\n `,\n standalone: true,\n styles: []\n})\nexport class BsBoundary {\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":";;;MAYa,UAAU,CAAA;;wGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,UAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,EARX,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;4FAIU,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EACb,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,UAAA,EACW,IAAI,EAAA,CAAA;;;ACTlB;;AAEG;;ACFH;;AAEG;;;;"}
1
+ {"version":3,"file":"bitstack-ng-boundary.mjs","sources":["../../../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 {\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 templateUrl: 'template.html',\n standalone: true,\n styleUrls: ['./styles.scss'],\n})\nexport class BsBoundary implements OnInit, AfterViewInit, OnDestroy {\n @Input() isDebug = false;\n @Input() bgColor!: string;\n @Input() contentClickable = true;\n @Input() orientationMode?: TOrientationMode = 'auto';\n @Input() injectStyle?: IInjectStyle;\n @ViewChild('boundary') boundary: ElementRef<HTMLDivElement> | null = null;\n\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\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","<div\n #boundary\n class=\"drag-boundary\"\n [class.enable-debug]=\"isDebug\"\n [class.landscape]=\"isLandscape\"\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 * 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":";;;;;MAqBa,UAAU,CAAA;AANvB,IAAA,WAAA,GAAA;QAOa,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;QAEhB,IAAgB,CAAA,gBAAA,GAAG,IAAI,CAAC;QACxB,IAAe,CAAA,eAAA,GAAsB,MAAM,CAAC;QAE9B,IAAQ,CAAA,QAAA,GAAsC,IAAI,CAAC;AAEhE,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,YAAY,EAA8B,CAAC;AACnE,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,YAAY,EAAoB,CAAC;AAE3D,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAChD,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAQ,CAAC;QAEvC,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAoDvB,KAAA;AAlDG,IAAA,IAAI,cAAc,GAAA;QACd,OAAO;YACH,eAAe,EAAE,IAAI,CAAC,OAAO;AAC7B,YAAA,GAAG,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;SACzC,CAAC;KACL;AAED,IAAA,IAAI,aAAa,GAAA;QACb,OAAO;AACH,YAAA,GAAG,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;SACxC,CAAC;KACL;IAED,QAAQ,GAAA;QACJ,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAED,eAAe,GAAA;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9C,SAAA;KACJ;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;KAC5B;AAED;;AAEG;IACH,uBAAuB,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,WAAW,EAAE;AACtC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,OAAO;AACV,SAAA;AAED,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,UAAU,EAAE;AACrC,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,OAAO;AACV,SAAA;AAED,QAAA,IAAI,CAAC,kBAAkB;aAClB,OAAO,CAAC,0BAA0B,CAAC;AACnC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC9B,SAAS,CAAC,MAAM,IAAG;AAChB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;AACvE,YAAA,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;AACtC,SAAC,CAAC,CAAC;KACV;;wGAjEQ,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,UAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,oaCrBvB,mTAeA,EAAA,MAAA,EAAA,CAAA,k7BAAA,CAAA,EAAA,CAAA,CAAA;4FDMa,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cAEX,IAAI,EAAA,QAAA,EAAA,mTAAA,EAAA,MAAA,EAAA,CAAA,k7BAAA,CAAA,EAAA,CAAA;8BAIP,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBACG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACiB,QAAQ,EAAA,CAAA;sBAA9B,SAAS;uBAAC,UAAU,CAAA;gBAEX,iBAAiB,EAAA,CAAA;sBAA1B,MAAM;gBACG,iBAAiB,EAAA,CAAA;sBAA1B,MAAM;;;AE9BX;;AAEG;;ACFH;;AAEG;;;;"}
package/lib/bs-boundary.d.ts CHANGED
@@ -1,5 +1,31 @@
1
+ import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
2
+ import { TOrientationMode, IInjectStyle } from './model';
1
3
  import * as i0 from "@angular/core";
2
- export declare class BsBoundary {
4
+ export declare class BsBoundary implements OnInit, AfterViewInit, OnDestroy {
5
+ isDebug: boolean;
6
+ bgColor: string;
7
+ contentClickable: boolean;
8
+ orientationMode?: TOrientationMode;
9
+ injectStyle?: IInjectStyle;
10
+ boundary: ElementRef<HTMLDivElement> | null;
11
+ afterBoundaryInit: EventEmitter<ElementRef<HTMLDivElement>>;
12
+ orientationChange: EventEmitter<TOrientationMode>;
13
+ private breakpointObserver;
14
+ private destroy$;
15
+ isLandscape: boolean;
16
+ get _boundaryClass(): {
17
+ backgroundColor: string;
18
+ };
19
+ get _contentClass(): {
20
+ [x: string]: string;
21
+ };
22
+ ngOnInit(): void;
23
+ ngAfterViewInit(): void;
24
+ ngOnDestroy(): void;
25
+ /**
26
+ * 監控方向變化
27
+ */
28
+ setupBreakpointObserver(): void;
3
29
  static ɵfac: i0.ɵɵFactoryDeclaration<BsBoundary, never>;
4
- static ɵcmp: i0.ɵɵComponentDeclaration<BsBoundary, "bs-boundary", never, {}, {}, never, never, true, never>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<BsBoundary, "bs-boundary", never, { "isDebug": "isDebug"; "bgColor": "bgColor"; "contentClickable": "contentClickable"; "orientationMode": "orientationMode"; "injectStyle": "injectStyle"; }, { "afterBoundaryInit": "afterBoundaryInit"; "orientationChange": "orientationChange"; }, never, ["*"], true, never>;
5
31
  }
package/lib/model.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export interface IInjectStyle {
2
+ 'drag-boundary'?: Record<string, string>;
3
+ 'content-wrap'?: Record<string, string>;
4
+ }
5
+ export type TOrientationMode = 'auto' | 'portrait' | 'landscape';
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "@bitstack/ng-boundary",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^15.2.0",
6
- "@angular/core": "^15.2.0"
6
+ "@angular/core": "^15.2.0",
7
+ "@angular/cdk": "^15.2.0"
7
8
  },
8
9
  "dependencies": {
9
10
  "tslib": "^2.3.0"