@bitstack/ng-boundary 14.0.1-alpha.1 → 14.0.1-alpha.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.
- package/README.md +190 -36
- package/esm2020/lib/bs-boundary.mjs +4 -4
- package/fesm2015/bitstack-ng-boundary.mjs +3 -3
- package/fesm2015/bitstack-ng-boundary.mjs.map +1 -1
- package/fesm2020/bitstack-ng-boundary.mjs +3 -3
- package/fesm2020/bitstack-ng-boundary.mjs.map +1 -1
- package/lib/bs-boundary.d.ts +1 -1
- package/lib/model.d.ts +1 -1
- package/package.json +5 -5
- package/src/lib/_/_awd.scss +109 -0
- package/src/lib/_/_fonts.scss +33 -0
- package/src/lib/_/_mixin.scss +107 -0
- package/src/lib/_/_responsive.scss +698 -0
- package/src/lib/_/_variables.scss +29 -0
- package/src/styles/index.scss +20 -0
- package/styles.scss +8 -0
package/README.md
CHANGED
|
@@ -1,63 +1,217 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @bitstack/ng-boundary
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A responsive boundary component for Angular applications with built-in orientation support and SCSS utilities for pixel-perfect responsive design.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- Responsive boundary container with automatic aspect ratio management
|
|
8
|
+
- Portrait and landscape orientation support with auto-detection
|
|
9
|
+
- CSS custom properties for responsive sizing
|
|
10
|
+
- Comprehensive SCSS utilities for responsive design
|
|
11
|
+
- Standalone component architecture (Angular 14+)
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
8
14
|
|
|
9
15
|
```bash
|
|
10
|
-
|
|
16
|
+
npm install @bitstack/ng-boundary
|
|
11
17
|
```
|
|
12
18
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### 1. Using the Component
|
|
22
|
+
|
|
23
|
+
Import and use the `BsBoundary` component in your Angular application:
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { Component } from '@angular/core';
|
|
27
|
+
import { BsBoundary } from '@bitstack/ng-boundary';
|
|
28
|
+
|
|
29
|
+
@Component({
|
|
30
|
+
selector: 'app-root',
|
|
31
|
+
standalone: true,
|
|
32
|
+
imports: [BsBoundary],
|
|
33
|
+
template: `
|
|
34
|
+
<bs-boundary
|
|
35
|
+
[isDebug]="false"
|
|
36
|
+
[bgColor]="'transparent'"
|
|
37
|
+
[contentClickable]="true"
|
|
38
|
+
[orientationMode]="'auto'"
|
|
39
|
+
(afterBoundaryInit)="onBoundaryInit($event)"
|
|
40
|
+
(orientationChange)="onOrientationChange($event)">
|
|
41
|
+
<!-- Your content here -->
|
|
42
|
+
<div class="my-content">
|
|
43
|
+
Hello World
|
|
44
|
+
</div>
|
|
45
|
+
</bs-boundary>
|
|
46
|
+
`
|
|
47
|
+
})
|
|
48
|
+
export class AppComponent {
|
|
49
|
+
onBoundaryInit(boundary: ElementRef<HTMLDivElement>) {
|
|
50
|
+
console.log('Boundary initialized:', boundary);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
onOrientationChange(mode: 'portrait' | 'landscape') {
|
|
54
|
+
console.log('Orientation changed to:', mode);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
17
57
|
```
|
|
18
58
|
|
|
19
|
-
|
|
59
|
+
#### Component Inputs
|
|
20
60
|
|
|
21
|
-
|
|
61
|
+
- `isDebug`: (boolean) Enable debug mode with background color - default: `false`
|
|
62
|
+
- `bgColor`: (string) Background color for the boundary
|
|
63
|
+
- `contentClickable`: (boolean) Whether content is clickable - default: `true`
|
|
64
|
+
- `orientationMode`: ('auto' | 'portrait' | 'landscape') Orientation mode - default: `'auto'`
|
|
65
|
+
- `injectStyle`: (IInjectStyle) Custom styles to inject
|
|
22
66
|
|
|
23
|
-
|
|
24
|
-
ng build bitstack-ng-boundary
|
|
25
|
-
```
|
|
67
|
+
#### Component Outputs
|
|
26
68
|
|
|
27
|
-
|
|
69
|
+
- `afterBoundaryInit`: Emits after boundary initialization with ElementRef
|
|
70
|
+
- `orientationChange`: Emits when orientation changes
|
|
28
71
|
|
|
29
|
-
###
|
|
72
|
+
### 2. Using SCSS Utilities
|
|
30
73
|
|
|
31
|
-
|
|
74
|
+
The boundary component provides CSS custom properties that you can use with the included SCSS utilities:
|
|
32
75
|
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
cd dist/bitstack-ng-boundary
|
|
36
|
-
```
|
|
76
|
+
#### Import SCSS Utilities
|
|
37
77
|
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
npm publish
|
|
41
|
-
```
|
|
78
|
+
In your component SCSS file or global styles:
|
|
42
79
|
|
|
43
|
-
|
|
80
|
+
```scss
|
|
81
|
+
@use '@bitstack/ng-boundary/styles' as boundary;
|
|
44
82
|
|
|
45
|
-
|
|
83
|
+
.my-component {
|
|
84
|
+
// Use the px2vw function for responsive sizing
|
|
85
|
+
// This automatically adapts to portrait/landscape mode
|
|
86
|
+
width: boundary.px2vw(100);
|
|
87
|
+
height: boundary.px2vw(200);
|
|
88
|
+
padding: boundary.px2vw(20);
|
|
46
89
|
|
|
47
|
-
|
|
48
|
-
|
|
90
|
+
// Or use mixins for specific properties
|
|
91
|
+
@include boundary.width(100);
|
|
92
|
+
@include boundary.height(200);
|
|
93
|
+
@include boundary.padding-left(20);
|
|
94
|
+
}
|
|
49
95
|
```
|
|
50
96
|
|
|
51
|
-
|
|
97
|
+
#### Available SCSS Functions
|
|
98
|
+
|
|
99
|
+
- `px2vw($px)` - Converts px to responsive units based on boundary
|
|
100
|
+
- `px2vw-unbounded($px)` - Converts px to viewport units (not bounded)
|
|
101
|
+
- `vw($w)` - Returns viewport width unit (dvw or vw)
|
|
102
|
+
- `vh($h)` - Returns viewport height unit (dvh or vh)
|
|
103
|
+
|
|
104
|
+
#### Available SCSS Mixins
|
|
105
|
+
|
|
106
|
+
**Responsive sizing mixins:**
|
|
107
|
+
- `@include width($px)` - Set responsive width
|
|
108
|
+
- `@include height($px)` - Set responsive height
|
|
109
|
+
- `@include padding-left($px)` - Set responsive left padding
|
|
110
|
+
- `@include padding-right($px)` - Set responsive right padding
|
|
111
|
+
- `@include padding-top($px)` - Set responsive top padding
|
|
112
|
+
- `@include padding-bottom($px)` - Set responsive bottom padding
|
|
113
|
+
- `@include px2vw($property, $px)` - Set any property with responsive value
|
|
114
|
+
|
|
115
|
+
**Utility mixins:**
|
|
116
|
+
- `@include flexCenter` - Flex center alignment
|
|
117
|
+
- `@include hideScrollbar` - Hide scrollbars
|
|
118
|
+
- `@include bg-contain` - Background contain
|
|
119
|
+
- `@include bg-cover` - Background cover
|
|
120
|
+
- `@include text-center` - Center text
|
|
121
|
+
- `@include text-shadow($color)` - Text shadow
|
|
122
|
+
- `@include size($w, $h: $w)` - Set width and height
|
|
123
|
+
|
|
124
|
+
**Responsive breakpoint mixins:**
|
|
125
|
+
- `@include s { ... }` - Small devices and up
|
|
126
|
+
- `@include landscape { ... }` - Mobile landscape
|
|
127
|
+
- `@include portrait { ... }` - Mobile portrait
|
|
128
|
+
- `@include pc_landscape { ... }` - PC landscape
|
|
129
|
+
- `@include pc_portrait { ... }` - PC portrait
|
|
130
|
+
|
|
131
|
+
#### CSS Custom Properties
|
|
132
|
+
|
|
133
|
+
The boundary component sets these CSS variables that the SCSS utilities use:
|
|
134
|
+
|
|
135
|
+
- `--boundary-width` - Current boundary width
|
|
136
|
+
- `--boundary-height` - Current boundary height
|
|
137
|
+
- `--design-base-width` - Design base width (portrait: 540, landscape: 960)
|
|
138
|
+
- `--design-base-height` - Design base height (portrait: 960, landscape: 540)
|
|
139
|
+
- `--px2vw-ratio` - Ratio for px to responsive unit conversion
|
|
140
|
+
|
|
141
|
+
### 3. Complete Example
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
// app.component.ts
|
|
145
|
+
import { Component } from '@angular/core';
|
|
146
|
+
import { BsBoundary } from '@bitstack/ng-boundary';
|
|
147
|
+
|
|
148
|
+
@Component({
|
|
149
|
+
selector: 'app-root',
|
|
150
|
+
standalone: true,
|
|
151
|
+
imports: [BsBoundary],
|
|
152
|
+
templateUrl: './app.component.html',
|
|
153
|
+
styleUrls: ['./app.component.scss']
|
|
154
|
+
})
|
|
155
|
+
export class AppComponent {}
|
|
156
|
+
```
|
|
52
157
|
|
|
53
|
-
|
|
158
|
+
```html
|
|
159
|
+
<!-- app.component.html -->
|
|
160
|
+
<bs-boundary [orientationMode]="'auto'">
|
|
161
|
+
<div class="game-container">
|
|
162
|
+
<h1 class="title">My Game</h1>
|
|
163
|
+
<button class="play-button">Play</button>
|
|
164
|
+
</div>
|
|
165
|
+
</bs-boundary>
|
|
166
|
+
```
|
|
54
167
|
|
|
55
|
-
```
|
|
56
|
-
|
|
168
|
+
```scss
|
|
169
|
+
// app.component.scss
|
|
170
|
+
@use '@bitstack/ng-boundary/styles' as boundary;
|
|
171
|
+
|
|
172
|
+
.game-container {
|
|
173
|
+
@include boundary.flexCenter;
|
|
174
|
+
flex-direction: column;
|
|
175
|
+
width: 100%;
|
|
176
|
+
height: 100%;
|
|
177
|
+
gap: boundary.px2vw(20);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.title {
|
|
181
|
+
font-size: boundary.px2vw(48);
|
|
182
|
+
@include boundary.padding-top(40);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.play-button {
|
|
186
|
+
@include boundary.width(200);
|
|
187
|
+
@include boundary.height(60);
|
|
188
|
+
font-size: boundary.px2vw(24);
|
|
189
|
+
border-radius: boundary.px2vw(12);
|
|
190
|
+
}
|
|
57
191
|
```
|
|
58
192
|
|
|
59
|
-
|
|
193
|
+
## Design System
|
|
194
|
+
|
|
195
|
+
The component is designed with these base dimensions:
|
|
196
|
+
- Portrait mode: 540px × 960px
|
|
197
|
+
- Landscape mode: 960px × 540px
|
|
198
|
+
|
|
199
|
+
The `px2vw()` function automatically scales your design to fit within the boundary while maintaining aspect ratio.
|
|
200
|
+
|
|
201
|
+
## Requirements
|
|
202
|
+
|
|
203
|
+
- Angular 14.0.0 or higher
|
|
204
|
+
- @angular/cdk 14.0.0 or higher
|
|
205
|
+
- SCSS support in your Angular project
|
|
206
|
+
|
|
207
|
+
## Building
|
|
208
|
+
|
|
209
|
+
To build the library:
|
|
210
|
+
|
|
211
|
+
```bash
|
|
212
|
+
ng build bitstack-ng-boundary
|
|
213
|
+
```
|
|
60
214
|
|
|
61
|
-
##
|
|
215
|
+
## License
|
|
62
216
|
|
|
63
|
-
|
|
217
|
+
MIT
|
|
@@ -58,9 +58,9 @@ export class BsBoundary {
|
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
62
|
-
BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
61
|
+
BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
+
BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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></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"] });
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
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></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
66
|
}], propDecorators: { isDebug: [{
|
|
@@ -81,4 +81,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
81
81
|
}], orientationChange: [{
|
|
82
82
|
type: Output
|
|
83
83
|
}] } });
|
|
84
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
84
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnMtYm91bmRhcnkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9iaXRzdGFjay1uZy1ib3VuZGFyeS9zcmMvbGliL2JzLWJvdW5kYXJ5LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvYml0c3RhY2stbmctYm91bmRhcnkvc3JjL2xpYi90ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCxTQUFTLEVBRVQsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDWixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsT0FBTyxFQUFFLFNBQVMsRUFBQyxNQUFNLE1BQU0sQ0FBQzs7QUFReEMsTUFBTSxPQUFPLFVBQVU7SUFOdkI7UUFPYSxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBRWhCLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUN4QixvQkFBZSxHQUFzQixNQUFNLENBQUM7UUFFOUIsYUFBUSxHQUFzQyxJQUFJLENBQUM7UUFFaEUsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQThCLENBQUM7UUFDbkUsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFM0QsdUJBQWtCLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFDaEQsYUFBUSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFFdkMsZ0JBQVcsR0FBRyxLQUFLLENBQUM7S0FvRHZCO0lBbERHLElBQUksY0FBYztRQUNkLE9BQU87WUFDSCxlQUFlLEVBQUUsSUFBSSxDQUFDLE9BQU87WUFDN0IsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsZUFBZSxDQUFDO1NBQ3pDLENBQUM7SUFDTixDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2IsT0FBTztZQUNILEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLGNBQWMsQ0FBQztTQUN4QyxDQUFDO0lBQ04sQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNmLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1NBQzlDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVEOztPQUVHO0lBQ0gsdUJBQXVCO1FBQ25CLElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxXQUFXLEVBQUU7WUFDdEMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7WUFDeEIsT0FBTztTQUNWO1FBRUQsSUFBSSxJQUFJLENBQUMsZUFBZSxLQUFLLFVBQVUsRUFBRTtZQUNyQyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztZQUN6QixPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsa0JBQWtCO2FBQ2xCLE9BQU8sQ0FBQywwQkFBMEIsQ0FBQzthQUNuQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDaEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBQ3ZFLElBQUksQ0FBQyxXQUFXLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQztRQUN0QyxDQUFDLENBQUMsQ0FBQztJQUNYLENBQUM7O3VHQWpFUSxVQUFVOzJGQUFWLFVBQVUsb2FDckJ2QiwrVEFlQTsyRkRNYSxVQUFVO2tCQU50QixTQUFTOytCQUNJLGFBQWEsY0FFWCxJQUFJOzhCQUlQLE9BQU87c0JBQWYsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDaUIsUUFBUTtzQkFBOUIsU0FBUzt1QkFBQyxVQUFVO2dCQUVYLGlCQUFpQjtzQkFBMUIsTUFBTTtnQkFDRyxpQkFBaUI7c0JBQTFCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCwgT25EZXN0cm95LFxuICAgIE9uSW5pdCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0NoaWxkXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUT3JpZW50YXRpb25Nb2RlLCBJSW5qZWN0U3R5bGV9IGZyb20gJy4vbW9kZWwnO1xuaW1wb3J0IHtCcmVha3BvaW50T2JzZXJ2ZXJ9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHtTdWJqZWN0LCB0YWtlVW50aWx9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2JzLWJvdW5kYXJ5JyxcbiAgICB0ZW1wbGF0ZVVybDogJ3RlbXBsYXRlLmh0bWwnLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3R5bGVzLnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQnNCb3VuZGFyeSBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgICBASW5wdXQoKSBpc0RlYnVnID0gZmFsc2U7XG4gICAgQElucHV0KCkgYmdDb2xvciE6IHN0cmluZztcbiAgICBASW5wdXQoKSBjb250ZW50Q2xpY2thYmxlID0gdHJ1ZTtcbiAgICBASW5wdXQoKSBvcmllbnRhdGlvbk1vZGU/OiBUT3JpZW50YXRpb25Nb2RlID0gJ2F1dG8nO1xuICAgIEBJbnB1dCgpIGluamVjdFN0eWxlPzogSUluamVjdFN0eWxlO1xuICAgIEBWaWV3Q2hpbGQoJ2JvdW5kYXJ5JykgYm91bmRhcnk6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+IHwgbnVsbCA9IG51bGw7XG5cbiAgICBAT3V0cHV0KCkgYWZ0ZXJCb3VuZGFyeUluaXQgPSBuZXcgRXZlbnRFbWl0dGVyPEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+PigpO1xuICAgIEBPdXRwdXQoKSBvcmllbnRhdGlvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8VE9yaWVudGF0aW9uTW9kZT4oKTtcblxuICAgIHByaXZhdGUgYnJlYWtwb2ludE9ic2VydmVyID0gaW5qZWN0KEJyZWFrcG9pbnRPYnNlcnZlcik7XG4gICAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgICBpc0xhbmRzY2FwZSA9IGZhbHNlO1xuXG4gICAgZ2V0IF9ib3VuZGFyeUNsYXNzKCkge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGlzLmJnQ29sb3IsXG4gICAgICAgICAgICAuLi50aGlzLmluamVjdFN0eWxlPy5bJ2RyYWctYm91bmRhcnknXVxuICAgICAgICB9O1xuICAgIH1cblxuICAgIGdldCBfY29udGVudENsYXNzKCkge1xuICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgLi4udGhpcy5pbmplY3RTdHlsZT8uWydjb250ZW50LXdyYXAnXVxuICAgICAgICB9O1xuICAgIH1cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNldHVwQnJlYWtwb2ludE9ic2VydmVyKCk7XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5ib3VuZGFyeSkge1xuICAgICAgICAgICAgdGhpcy5hZnRlckJvdW5kYXJ5SW5pdC5lbWl0KHRoaXMuYm91bmRhcnkpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICog55uj5o6n5pa55ZCR6K6K5YyWXG4gICAgICovXG4gICAgc2V0dXBCcmVha3BvaW50T2JzZXJ2ZXIoKSB7XG4gICAgICAgIGlmICh0aGlzLm9yaWVudGF0aW9uTW9kZSA9PT0gJ2xhbmRzY2FwZScpIHtcbiAgICAgICAgICAgIHRoaXMuaXNMYW5kc2NhcGUgPSB0cnVlO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb25Nb2RlID09PSAncG9ydHJhaXQnKSB7XG4gICAgICAgICAgICB0aGlzLmlzTGFuZHNjYXBlID0gZmFsc2U7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmJyZWFrcG9pbnRPYnNlcnZlclxuICAgICAgICAgICAgLm9ic2VydmUoJyhvcmllbnRhdGlvbjogbGFuZHNjYXBlKScpXG4gICAgICAgICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKHJlc3VsdCA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNoYW5nZS5lbWl0KHJlc3VsdC5tYXRjaGVzID8gJ2xhbmRzY2FwZScgOiAncG9ydHJhaXQnKTtcbiAgICAgICAgICAgICAgICB0aGlzLmlzTGFuZHNjYXBlID0gcmVzdWx0Lm1hdGNoZXM7XG4gICAgICAgICAgICB9KTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICNib3VuZGFyeVxuICBjbGFzcz1cImRyYWctYm91bmRhcnlcIlxuICBbY2xhc3MuZW5hYmxlLWRlYnVnXT1cImlzRGVidWdcIlxuICBbY2xhc3MubGFuZHNjYXBlXT1cImlzTGFuZHNjYXBlXCJcbiAgW3N0eWxlXT1cIl9ib3VuZGFyeUNsYXNzXCJcbj5cbiAgPGRpdlxuICAgIGNsYXNzPVwiY29udGVudC13cmFwXCJcbiAgICBbY2xhc3MuY2xpY2thYmxlXT1cImNvbnRlbnRDbGlja2FibGVcIlxuICAgIFtzdHlsZV09XCJfY29udGVudENsYXNzXCJcbiAgPlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -56,9 +56,9 @@ class BsBoundary {
|
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
60
|
-
BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
59
|
+
BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
60
|
+
BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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></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"] });
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
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></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
64
|
}], propDecorators: { isDebug: [{
|
|
@@ -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/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></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;AAOa,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAEhB,QAAA,IAAgB,CAAA,gBAAA,GAAG,IAAI,CAAC;AACxB,QAAA,IAAe,CAAA,eAAA,GAAsB,MAAM,CAAC;AAE9B,QAAA,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;AAEvC,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KAoDvB;AAlDG,IAAA,IAAI,cAAc,GAAA;;AACd,QAAA,OAAA,MAAA,CAAA,MAAA,CAAA,EACI,eAAe,EAAE,IAAI,CAAC,OAAO,EAAA,EAC1B,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,eAAe,CAAC,CACxC,CAAA;KACL;AAED,IAAA,IAAI,aAAa,GAAA;;AACb,QAAA,OAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACO,MAAA,IAAI,CAAC,WAAW,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,cAAc,CAAC,CACvC,CAAA;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;;
|
|
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></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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"}
|
|
@@ -59,9 +59,9 @@ class BsBoundary {
|
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
-
BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
63
|
-
BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
62
|
+
BsBoundary.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
+
BsBoundary.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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></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
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BsBoundary, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
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></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
67
|
}], propDecorators: { isDebug: [{
|
|
@@ -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/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></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;;
|
|
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></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/lib/bs-boundary.d.ts
CHANGED
|
@@ -27,5 +27,5 @@ export declare class BsBoundary implements OnInit, AfterViewInit, OnDestroy {
|
|
|
27
27
|
*/
|
|
28
28
|
setupBreakpointObserver(): void;
|
|
29
29
|
static ɵfac: i0.ɵɵFactoryDeclaration<BsBoundary, 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
|
|
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>;
|
|
31
31
|
}
|
package/lib/model.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitstack/ng-boundary",
|
|
3
|
-
"version": "14.0.1-alpha.
|
|
3
|
+
"version": "14.0.1-alpha.3",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/common": "
|
|
6
|
-
"@angular/core": "
|
|
7
|
-
"@angular/cdk": "
|
|
5
|
+
"@angular/common": "^14.0.0",
|
|
6
|
+
"@angular/core": "^14.0.0",
|
|
7
|
+
"@angular/cdk": "^14.0.0"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"tslib": "^2.3.0"
|
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
"default": "./fesm2020/bitstack-ng-boundary.mjs"
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
// check support device-vh
|
|
2
|
+
@use "sass:math";
|
|
3
|
+
@use "variables";
|
|
4
|
+
@use "responsive";
|
|
5
|
+
|
|
6
|
+
// Import required mixins from responsive
|
|
7
|
+
@mixin supports-dv {
|
|
8
|
+
@supports (width: 100dvh) {
|
|
9
|
+
@content;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
@mixin not-supports-dv {
|
|
13
|
+
@supports not (width: 100dvh) {
|
|
14
|
+
@content;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Import and re-export functions from responsive
|
|
19
|
+
@function responsive-size-by-px($px, $unit: 'v', $isLandscape: false, $isMax: false) {
|
|
20
|
+
$w: math.div($px, 5.4);
|
|
21
|
+
@return responsive.responsive-size-by-vw($w, $unit, $isLandscape, $isMax);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Note: responsive-size-by-vw is provided by the responsive module
|
|
25
|
+
// and should be accessed via @use "responsive"
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// use vw, vh or dvw, dvh
|
|
30
|
+
@function vw($w) {
|
|
31
|
+
@return #{$w}#{variables.$vw-unit};
|
|
32
|
+
}
|
|
33
|
+
@function vh($h) {
|
|
34
|
+
@return #{$h}#{variables.$vh-unit};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
@mixin setProperty($property, $value) {
|
|
40
|
+
@include supports-dv {
|
|
41
|
+
#{$property}: responsive-size-by-px($value, 'dv');
|
|
42
|
+
}
|
|
43
|
+
@include not-supports-dv {
|
|
44
|
+
#{$property}: responsive-size-by-px($value, 'v');
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// 響應式尺寸 mixin 版本 (包含 supports-dv 判斷)
|
|
49
|
+
@mixin px2vw($property, $px) {
|
|
50
|
+
$layout-width-num: variables.$design-width; // 375
|
|
51
|
+
$layout-height-num: variables.$design-height; // 667
|
|
52
|
+
|
|
53
|
+
$vw-value: math.div($px, $layout-width-num) * 100; // 70/375*100
|
|
54
|
+
$vh-value: math.div($px, $layout-height-num) * 100; // 70/667*100
|
|
55
|
+
|
|
56
|
+
@include supports-dv {
|
|
57
|
+
#{$property}: min(#{$vw-value}dvw, #{$vh-value}dvh);
|
|
58
|
+
}
|
|
59
|
+
@include not-supports-dv {
|
|
60
|
+
#{$property}: min(#{$vw-value}vw, #{$vh-value}vh);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// 單一屬性響應式 mixin (你想要的語法)
|
|
65
|
+
@mixin height($px) {
|
|
66
|
+
@include px2vw(height, $px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@mixin width($px) {
|
|
70
|
+
@include px2vw(width, $px);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@mixin padding-left($px) {
|
|
74
|
+
@include px2vw(padding-left, $px);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@mixin padding-right($px) {
|
|
78
|
+
@include px2vw(padding-right, $px);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@mixin padding-top($px) {
|
|
82
|
+
@include px2vw(padding-top, $px);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@mixin padding-bottom($px) {
|
|
86
|
+
@include px2vw(padding-bottom, $px);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// 響應式尺寸函數 (自動適應直式/橫式)
|
|
90
|
+
// 使用 CSS 變數來獲取當前模式下的設計基準寬度
|
|
91
|
+
// Portrait: --design-base-width = 375
|
|
92
|
+
// Landscape: --design-base-width = 667
|
|
93
|
+
@function px2vw($px) {
|
|
94
|
+
@return calc(#{$px} * var(--px2vw-ratio));
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// 原始的 px2vw 函數 (不受 boundary 限制，直接基於 viewport)
|
|
98
|
+
@function px2vw-unbounded($px) {
|
|
99
|
+
$layout-width-num: variables.$design-width; // 375
|
|
100
|
+
$layout-height-num: variables.$design-height; // 667
|
|
101
|
+
|
|
102
|
+
$vw-value: math.div($px, $layout-width-num) * 100; // 70/375*100 = 18.666667
|
|
103
|
+
$vh-value: math.div($px, $layout-height-num) * 100; // 70/667*100 = 10.494948
|
|
104
|
+
|
|
105
|
+
@return unquote("min(#{$vw-value}#{variables.$vw-unit}, #{$vh-value}#{variables.$vw-unit})");
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* 字體定義 */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: 'MicrosoftYaHei';
|
|
4
|
+
src: url('/assets/fonts/msyh.woff2') format('woff2');
|
|
5
|
+
font-weight: normal;
|
|
6
|
+
font-style: normal;
|
|
7
|
+
font-display: swap;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: 'Myanmar MN';
|
|
12
|
+
src: url('/assets/fonts/myanmar-mn.woff2') format('woff2');
|
|
13
|
+
font-weight: normal;
|
|
14
|
+
font-style: normal;
|
|
15
|
+
font-display: swap;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@font-face {
|
|
19
|
+
font-family: 'Myanmar MN';
|
|
20
|
+
src: url('/assets/fonts/myanmar-mn-bold.woff2') format('woff2');
|
|
21
|
+
font-weight: bold;
|
|
22
|
+
font-style: normal;
|
|
23
|
+
font-display: swap;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: 'Prompt';
|
|
28
|
+
src: url('/assets/fonts/prompt-regular.woff2') format('woff2');
|
|
29
|
+
font-weight: normal;
|
|
30
|
+
font-style: normal;
|
|
31
|
+
font-display: swap;
|
|
32
|
+
}
|
|
33
|
+
|