@phun-ky/speccer 6.2.5 → 6.3.2
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 +67 -14
- package/package.json +5 -5
- package/speccer.css +109 -49
- package/speccer.js +1 -1
- package/speccer.js.map +1 -1
- package/speccer.min.css +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,37 @@
|
|
|
1
|
-
# speccer
|
|
1
|
+
# @phun-ky/speccer
|
|
2
|
+
|
|
3
|
+

|
|
2
4
|
|
|
3
5
|
[](http://commitizen.github.io/cz-cli/) [](http://makeapullrequest.com) [](http://semver.org/spec/v2.0.0.html)    
|
|
4
6
|
|
|
5
7
|
> A zero dependency package to show specifications on components in your design system documentation
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
- [@phun-ky/speccer](#phun-kyspeccer)
|
|
10
|
+
- [About](#about)
|
|
11
|
+
- [Usage](#usage)
|
|
12
|
+
- [ESM](#esm)
|
|
13
|
+
- [Script](#script)
|
|
14
|
+
- [React](#react)
|
|
15
|
+
- [Element spacing](#element-spacing)
|
|
16
|
+
- [Element dimensions](#element-dimensions)
|
|
17
|
+
- [Subtle measure](#subtle-measure)
|
|
18
|
+
- [Highlight the anatomy of an element](#highlight-the-anatomy-of-an-element)
|
|
19
|
+
- [Subtle anatomy](#subtle-anatomy)
|
|
20
|
+
- [Curly brackets](#curly-brackets)
|
|
21
|
+
- [Element typogpraphy](#element-typogpraphy)
|
|
22
|
+
- [Advanced usage](#advanced-usage)
|
|
23
|
+
- [Lazy](#lazy)
|
|
24
|
+
- [Customization](#customization)
|
|
25
|
+
|
|
26
|
+
## About
|
|
10
27
|
|
|
11
|
-
|
|
28
|
+
Speccer was created to make it easier to document components in a design system.
|
|
12
29
|
|
|
13
|
-
|
|
30
|
+
```zsh
|
|
31
|
+
npm i @phun-ky/speccer
|
|
32
|
+
```
|
|
14
33
|
|
|
15
|
-
|
|
34
|
+
See demo here: <https://codepen.io/phun-ky/pen/xaOrYX>
|
|
16
35
|
|
|
17
36
|
## Usage
|
|
18
37
|
|
|
@@ -84,7 +103,7 @@ In your component examples, use the following attribute:
|
|
|
84
103
|
<div data-speccer class="..."></div>
|
|
85
104
|
```
|
|
86
105
|
|
|
87
|
-
This will display the element
|
|
106
|
+
This will display the element _and all of it's children_ padding and margin.
|
|
88
107
|
|
|
89
108
|
### Element dimensions
|
|
90
109
|
|
|
@@ -93,12 +112,15 @@ This will display the element <em>and all of it's children</em> padding and marg
|
|
|
93
112
|
In your component examples, use the following attribute:
|
|
94
113
|
|
|
95
114
|
```html
|
|
96
|
-
<div
|
|
115
|
+
<div
|
|
116
|
+
data-speccer-measure="[height right|left] | [width top|bottom]"
|
|
117
|
+
class="..."
|
|
118
|
+
></div>
|
|
97
119
|
```
|
|
98
120
|
|
|
99
121
|
Where `height` and `width` comes with placement flags. Default for `height` is `left`, default for `width` is `top`.
|
|
100
122
|
|
|
101
|
-
#### Subtle
|
|
123
|
+
#### Subtle measure
|
|
102
124
|
|
|
103
125
|

|
|
104
126
|
|
|
@@ -118,13 +140,16 @@ In your component examples, use the following attribute. Remember to use the `da
|
|
|
118
140
|
|
|
119
141
|
```html
|
|
120
142
|
<div data-anatomy-section>
|
|
121
|
-
<div
|
|
143
|
+
<div
|
|
144
|
+
data-anatomy="outline [full|enclose][curly] [left|right|top|bottom]"
|
|
145
|
+
class="..."
|
|
146
|
+
></div>
|
|
122
147
|
</div>
|
|
123
148
|
```
|
|
124
149
|
|
|
125
150
|
This will place a pin to the outline of the element. Default is `top`.
|
|
126
151
|
|
|
127
|
-
#### Subtle
|
|
152
|
+
#### Subtle anatomy
|
|
128
153
|
|
|
129
154
|

|
|
130
155
|
|
|
@@ -136,6 +161,31 @@ You can also give a more subtle touch to the anatomy elements.
|
|
|
136
161
|
</div>
|
|
137
162
|
```
|
|
138
163
|
|
|
164
|
+
### Curly brackets
|
|
165
|
+
|
|
166
|
+
You can use curly brackets with the `curly` tag in `data-anatomy` along side `outline full` to provide a more sleek look to the style.
|
|
167
|
+
|
|
168
|
+
**_NOTE!_** Only works with `outline full`
|
|
169
|
+
|
|
170
|
+
The curly brackets are made with SVG paths, and it is required to have the following snippet on your page for it to render:
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<svg
|
|
174
|
+
class="ph"
|
|
175
|
+
viewBox="0 0"
|
|
176
|
+
id="ph-speccer-svg"
|
|
177
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
178
|
+
>
|
|
179
|
+
<path
|
|
180
|
+
class="ph path original"
|
|
181
|
+
id="ph-speccer-path"
|
|
182
|
+
fill="none"
|
|
183
|
+
stroke-width="1"
|
|
184
|
+
stroke="currentColor"
|
|
185
|
+
/>
|
|
186
|
+
</svg>
|
|
187
|
+
```
|
|
188
|
+
|
|
139
189
|
This will give a dashed border, and a more subtle pin style.
|
|
140
190
|
|
|
141
191
|
### Element typogpraphy
|
|
@@ -145,7 +195,9 @@ This will give a dashed border, and a more subtle pin style.
|
|
|
145
195
|
In your component examples, use the following attribute.
|
|
146
196
|
|
|
147
197
|
```html
|
|
148
|
-
<div data-speccer-typography="[left|right|top|bottom]" class="...">
|
|
198
|
+
<div data-speccer-typography="[left|right|top|bottom]" class="...">
|
|
199
|
+
Some text
|
|
200
|
+
</div>
|
|
149
201
|
```
|
|
150
202
|
|
|
151
203
|
This will place a box to display typography information. Default is `left`.
|
|
@@ -212,7 +264,8 @@ Allthough the styling works nicely with dark mode, you can use the provided CSS
|
|
|
212
264
|
--ph-speccer-typography-color-text: #57575b;
|
|
213
265
|
--ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
|
|
214
266
|
--ph-speccer-depth-opacity-400: 0.4;
|
|
215
|
-
--ph-speccer-font-family: 'Menlo for Powerline',
|
|
267
|
+
--ph-speccer-font-family: 'Menlo for Powerline',
|
|
268
|
+
'Menlo Regular for Powerline', 'DejaVu Sans Mono', Consolas, Monaco,
|
|
216
269
|
'Andale Mono', 'Ubuntu Mono', monospace;
|
|
217
270
|
--ph-speccer-font-size: 12px;
|
|
218
271
|
--ph-speccer-line-height: 12px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phun-ky/speccer",
|
|
3
|
-
"version": "6.2
|
|
3
|
+
"version": "6.3.2",
|
|
4
4
|
"description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
|
|
5
5
|
"main": "speccer.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
"scripts": {
|
|
10
10
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
11
|
"rollup": "rollup -c",
|
|
12
|
-
"prerollup:dev": "npm run clean && npm run
|
|
12
|
+
"prerollup:dev": "npm run clean && npm run styles",
|
|
13
13
|
"rollup:dev": "rollup -c -w",
|
|
14
14
|
"clean": "rm -rf dist/ dts/ ./speccer.css ./speccer.min.css ./speccer.js",
|
|
15
|
-
"build": "npm run clean && npm run rollup && npm run
|
|
15
|
+
"build": "npm run clean && npm run rollup && npm run styles",
|
|
16
16
|
"styles": "npm run stylus && npm run postcss",
|
|
17
17
|
"stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
|
|
18
18
|
"postcss": "rm -rf ./speccer.min.css && postcss ./speccer.css -o speccer.min.css",
|
|
19
|
-
"dev": "npx browser-sync start --server --files \"dev/*.html\" --index \"dev/index.html\" --serveStatic \"/dev/*.html\"",
|
|
19
|
+
"dev": "npx browser-sync start --server --files \"dev/*.html\" \"*.css\" --index \"dev/index.html\" --serveStatic \"/dev/*.html\"",
|
|
20
20
|
"commit": "npx git-cz",
|
|
21
21
|
"release": "npx standard-version"
|
|
22
22
|
},
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"standard-version": {
|
|
30
30
|
"scripts": {
|
|
31
31
|
"prerelease": "npm run build && git add .",
|
|
32
|
-
"posttag": "git push --follow-tags origin
|
|
32
|
+
"posttag": "git push --follow-tags origin main"
|
|
33
33
|
},
|
|
34
34
|
"types": [
|
|
35
35
|
{
|
package/speccer.css
CHANGED
|
@@ -23,21 +23,38 @@
|
|
|
23
23
|
--ph-speccer-line-width-negative: -1px;
|
|
24
24
|
--ph-speccer-measure-size: 8px;
|
|
25
25
|
}
|
|
26
|
+
svg.ph,
|
|
26
27
|
.ph.speccer,
|
|
27
28
|
.ph.speccer::after,
|
|
29
|
+
.ph.speccer::before {
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
user-select: none;
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
}
|
|
34
|
+
.ph.speccer:not(path),
|
|
35
|
+
.ph.speccer::after,
|
|
28
36
|
.ph.speccer::before {
|
|
29
37
|
font-family: var(--ph-speccer-font-family) !important;
|
|
30
38
|
justify-content: center;
|
|
31
39
|
align-items: center;
|
|
32
40
|
z-index: 99999;
|
|
33
41
|
position: absolute;
|
|
34
|
-
pointer-events: none;
|
|
35
|
-
user-select: none;
|
|
36
42
|
display: flex;
|
|
37
43
|
font-size: 12px;
|
|
38
|
-
box-sizing: border-box;
|
|
39
44
|
line-height: 12px;
|
|
40
45
|
}
|
|
46
|
+
#ph-speccer-svg {
|
|
47
|
+
position: absolute;
|
|
48
|
+
top: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
z-index: 3;
|
|
54
|
+
}
|
|
55
|
+
svg.ph .ph.path {
|
|
56
|
+
color: var(--ph-speccer-color-contrast, #ff3aa8);
|
|
57
|
+
}
|
|
41
58
|
.ph.speccer.dissection {
|
|
42
59
|
font-family: sans-serif;
|
|
43
60
|
height: var(--ph-speccer-pin-size);
|
|
@@ -63,6 +80,10 @@
|
|
|
63
80
|
background-color: var(--ph-speccer-pin-color);
|
|
64
81
|
z-index: 99999;
|
|
65
82
|
}
|
|
83
|
+
.ph.speccer.dissection.svg::after,
|
|
84
|
+
.ph.speccer.dissection.curly::after {
|
|
85
|
+
content: none !important;
|
|
86
|
+
}
|
|
66
87
|
.ph.speccer.dissection.outline::after,
|
|
67
88
|
.ph.speccer.dissection.outline.top::after {
|
|
68
89
|
height: var(--ph-speccer-pin-space);
|
|
@@ -75,11 +96,13 @@
|
|
|
75
96
|
width: var(--ph-speccer-pin-space);
|
|
76
97
|
top: 50%;
|
|
77
98
|
left: 100%;
|
|
99
|
+
right: auto;
|
|
78
100
|
}
|
|
79
101
|
.ph.speccer.dissection.outline.right::after {
|
|
80
102
|
height: var(--ph-speccer-line-width);
|
|
81
103
|
width: var(--ph-speccer-pin-space);
|
|
82
104
|
top: 50%;
|
|
105
|
+
left: auto;
|
|
83
106
|
right: 100%;
|
|
84
107
|
}
|
|
85
108
|
.ph.speccer.dissection.outline.bottom::after {
|
|
@@ -115,6 +138,14 @@
|
|
|
115
138
|
color: var(--ph-speccer-measure-color);
|
|
116
139
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
117
140
|
}
|
|
141
|
+
.ph.speccer.dissection.outline.enclose::after {
|
|
142
|
+
top: calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));
|
|
143
|
+
bottom: auto;
|
|
144
|
+
}
|
|
145
|
+
.ph.speccer.dissection.outline.enclose::before {
|
|
146
|
+
bottom: 100%;
|
|
147
|
+
top: auto;
|
|
148
|
+
}
|
|
118
149
|
.ph.speccer.dissection.outline.enclose.right::after {
|
|
119
150
|
left: calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)));
|
|
120
151
|
right: auto;
|
|
@@ -147,46 +178,59 @@
|
|
|
147
178
|
top: 100%;
|
|
148
179
|
bottom: auto;
|
|
149
180
|
}
|
|
150
|
-
.ph.speccer.dissection.outline.full {
|
|
181
|
+
.ph.speccer.dissection.outline.full:not(.curly) {
|
|
151
182
|
border-radius: 0;
|
|
152
183
|
background-color: transparent;
|
|
153
184
|
color: var(--ph-speccer-measure-color);
|
|
154
185
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
186
|
+
border-bottom: none;
|
|
155
187
|
}
|
|
156
|
-
.ph.speccer.dissection.outline.full.
|
|
188
|
+
.ph.speccer.dissection.outline.full:not(.curly)::after {
|
|
189
|
+
top: calc(-8px - var(--ph-speccer-pin-space));
|
|
190
|
+
}
|
|
191
|
+
.ph.speccer.dissection.outline.full:not(.curly)::before {
|
|
192
|
+
bottom: 100%;
|
|
193
|
+
}
|
|
194
|
+
.ph.speccer.dissection.outline.full:not(.curly).right {
|
|
195
|
+
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
157
196
|
border-left: none;
|
|
158
197
|
}
|
|
159
|
-
.ph.speccer.dissection.outline.full.right::after {
|
|
198
|
+
.ph.speccer.dissection.outline.full:not(.curly).right::after {
|
|
160
199
|
left: calc(8px + var(--ph-speccer-pin-space));
|
|
161
200
|
}
|
|
162
|
-
.ph.speccer.dissection.outline.full.right::before {
|
|
201
|
+
.ph.speccer.dissection.outline.full:not(.curly).right::before {
|
|
163
202
|
left: 100%;
|
|
203
|
+
right: auto;
|
|
164
204
|
}
|
|
165
|
-
.ph.speccer.dissection.outline.full.left {
|
|
205
|
+
.ph.speccer.dissection.outline.full:not(.curly).left {
|
|
206
|
+
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
166
207
|
border-right: none;
|
|
167
208
|
}
|
|
168
|
-
.ph.speccer.dissection.outline.full.left::after {
|
|
209
|
+
.ph.speccer.dissection.outline.full:not(.curly).left::after {
|
|
169
210
|
left: calc(-8px - var(--ph-speccer-pin-space));
|
|
170
211
|
}
|
|
171
|
-
.ph.speccer.dissection.outline.full.left::before {
|
|
212
|
+
.ph.speccer.dissection.outline.full:not(.curly).left::before {
|
|
172
213
|
right: 100%;
|
|
214
|
+
left: auto;
|
|
173
215
|
}
|
|
174
|
-
.ph.speccer.dissection.outline.full.top {
|
|
216
|
+
.ph.speccer.dissection.outline.full:not(.curly).top {
|
|
217
|
+
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
175
218
|
border-bottom: none;
|
|
176
219
|
}
|
|
177
|
-
.ph.speccer.dissection.outline.full.top::after {
|
|
220
|
+
.ph.speccer.dissection.outline.full:not(.curly).top::after {
|
|
178
221
|
top: calc(-8px - var(--ph-speccer-pin-space));
|
|
179
222
|
}
|
|
180
|
-
.ph.speccer.dissection.outline.full.top::before {
|
|
223
|
+
.ph.speccer.dissection.outline.full:not(.curly).top::before {
|
|
181
224
|
bottom: 100%;
|
|
182
225
|
}
|
|
183
|
-
.ph.speccer.dissection.outline.full.bottom {
|
|
226
|
+
.ph.speccer.dissection.outline.full:not(.curly).bottom {
|
|
227
|
+
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
184
228
|
border-top: none;
|
|
185
229
|
}
|
|
186
|
-
.ph.speccer.dissection.outline.full.bottom::after {
|
|
230
|
+
.ph.speccer.dissection.outline.full:not(.curly).bottom::after {
|
|
187
231
|
top: calc(8px + var(--ph-speccer-pin-space));
|
|
188
232
|
}
|
|
189
|
-
.ph.speccer.dissection.outline.full.bottom::before {
|
|
233
|
+
.ph.speccer.dissection.outline.full:not(.curly).bottom::before {
|
|
190
234
|
top: 100%;
|
|
191
235
|
}
|
|
192
236
|
.ph.speccer.dissection.outline.bottom::after {
|
|
@@ -205,18 +249,20 @@
|
|
|
205
249
|
[data-anatomy-section] {
|
|
206
250
|
counter-reset: type;
|
|
207
251
|
}
|
|
208
|
-
.ph.speccer.dissection.outline.full.right,
|
|
209
|
-
.ph.speccer.dissection.outline.full.left {
|
|
252
|
+
.ph.speccer.dissection.outline.full.right:not(.curly),
|
|
253
|
+
.ph.speccer.dissection.outline.full.left:not(.curly) {
|
|
210
254
|
width: 8px;
|
|
211
255
|
}
|
|
212
|
-
.ph.speccer.dissection.outline.full.
|
|
213
|
-
.ph.speccer.dissection.outline.full.
|
|
256
|
+
.ph.speccer.dissection.outline.full:not(.curly),
|
|
257
|
+
.ph.speccer.dissection.outline.full.top:not(.curly),
|
|
258
|
+
.ph.speccer.dissection.outline.full.bottom:not(.curly) {
|
|
214
259
|
height: 8px;
|
|
215
260
|
}
|
|
216
|
-
.ph.speccer.dissection.outline.full.
|
|
217
|
-
.ph.speccer.dissection.outline.full.
|
|
218
|
-
.ph.speccer.dissection.outline.full.
|
|
219
|
-
.ph.speccer.dissection.outline.full.
|
|
261
|
+
.ph.speccer.dissection.outline.full:not(.curly)::after,
|
|
262
|
+
.ph.speccer.dissection.outline.full.right:not(.curly)::after,
|
|
263
|
+
.ph.speccer.dissection.outline.full.left:not(.curly)::after,
|
|
264
|
+
.ph.speccer.dissection.outline.full.top:not(.curly)::after,
|
|
265
|
+
.ph.speccer.dissection.outline.full.bottom:not(.curly)::after {
|
|
220
266
|
content: attr(data-dissection-counter);
|
|
221
267
|
height: var(--ph-speccer-pin-size);
|
|
222
268
|
width: var(--ph-speccer-pin-size);
|
|
@@ -231,35 +277,38 @@
|
|
|
231
277
|
font-size: 16px;
|
|
232
278
|
z-index: 100000;
|
|
233
279
|
}
|
|
234
|
-
.ph.speccer.dissection.outline.full.right::after,
|
|
235
|
-
.ph.speccer.dissection.outline.full.left::after {
|
|
280
|
+
.ph.speccer.dissection.outline.full.right:not(.curly)::after,
|
|
281
|
+
.ph.speccer.dissection.outline.full.left:not(.curly)::after {
|
|
236
282
|
top: 50%;
|
|
237
283
|
transform: translateY(-50%);
|
|
238
284
|
}
|
|
239
|
-
.ph.speccer.dissection.outline.full.
|
|
240
|
-
.ph.speccer.dissection.outline.full.
|
|
285
|
+
.ph.speccer.dissection.outline.full:not(.curly)::after,
|
|
286
|
+
.ph.speccer.dissection.outline.full.top:not(.curly)::after,
|
|
287
|
+
.ph.speccer.dissection.outline.full.bottom:not(.curly)::after {
|
|
241
288
|
left: 50%;
|
|
242
289
|
transform: translateX(-50%);
|
|
243
290
|
}
|
|
244
|
-
.ph.speccer.dissection.outline.full.
|
|
245
|
-
.ph.speccer.dissection.outline.full.
|
|
246
|
-
.ph.speccer.dissection.outline.full.
|
|
247
|
-
.ph.speccer.dissection.outline.full.
|
|
291
|
+
.ph.speccer.dissection.outline.full:not(.curly)::before,
|
|
292
|
+
.ph.speccer.dissection.outline.full.right:not(.curly)::before,
|
|
293
|
+
.ph.speccer.dissection.outline.full.left:not(.curly)::before,
|
|
294
|
+
.ph.speccer.dissection.outline.full.top:not(.curly)::before,
|
|
295
|
+
.ph.speccer.dissection.outline.full.bottom:not(.curly)::before {
|
|
248
296
|
content: "";
|
|
249
297
|
position: absolute;
|
|
250
298
|
background-color: var(--ph-speccer-pin-color);
|
|
251
299
|
z-index: 100000;
|
|
252
300
|
display: block;
|
|
253
301
|
}
|
|
254
|
-
.ph.speccer.dissection.outline.full.right::before,
|
|
255
|
-
.ph.speccer.dissection.outline.full.left::before {
|
|
302
|
+
.ph.speccer.dissection.outline.full.right:not(.curly)::before,
|
|
303
|
+
.ph.speccer.dissection.outline.full.left:not(.curly)::before {
|
|
256
304
|
top: 50%;
|
|
257
305
|
transform: translateY(-50%);
|
|
258
306
|
height: var(--ph-speccer-line-width);
|
|
259
307
|
width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
|
|
260
308
|
}
|
|
261
|
-
.ph.speccer.dissection.outline.full.
|
|
262
|
-
.ph.speccer.dissection.outline.full.
|
|
309
|
+
.ph.speccer.dissection.outline.full:not(.curly)::before,
|
|
310
|
+
.ph.speccer.dissection.outline.full.top:not(.curly)::before,
|
|
311
|
+
.ph.speccer.dissection.outline.full.bottom:not(.curly)::before {
|
|
263
312
|
left: 50%;
|
|
264
313
|
transform: translateX(-50%);
|
|
265
314
|
width: var(--ph-speccer-line-width);
|
|
@@ -269,10 +318,12 @@
|
|
|
269
318
|
.ph.speccer.dissection.outline.enclose.left {
|
|
270
319
|
width: 8px;
|
|
271
320
|
}
|
|
321
|
+
.ph.speccer.dissection.outline.enclose,
|
|
272
322
|
.ph.speccer.dissection.outline.enclose.top,
|
|
273
323
|
.ph.speccer.dissection.outline.enclose.bottom {
|
|
274
324
|
height: 8px;
|
|
275
325
|
}
|
|
326
|
+
.ph.speccer.dissection.outline.enclose::after,
|
|
276
327
|
.ph.speccer.dissection.outline.enclose.right::after,
|
|
277
328
|
.ph.speccer.dissection.outline.enclose.left::after,
|
|
278
329
|
.ph.speccer.dissection.outline.enclose.top::after,
|
|
@@ -296,11 +347,13 @@
|
|
|
296
347
|
top: 50%;
|
|
297
348
|
transform: translateY(-50%);
|
|
298
349
|
}
|
|
350
|
+
.ph.speccer.dissection.outline.enclose::after,
|
|
299
351
|
.ph.speccer.dissection.outline.enclose.top::after,
|
|
300
352
|
.ph.speccer.dissection.outline.enclose.bottom::after {
|
|
301
353
|
left: 50%;
|
|
302
354
|
transform: translateX(-50%);
|
|
303
355
|
}
|
|
356
|
+
.ph.speccer.dissection.outline.enclose::before,
|
|
304
357
|
.ph.speccer.dissection.outline.enclose.right::before,
|
|
305
358
|
.ph.speccer.dissection.outline.enclose.left::before,
|
|
306
359
|
.ph.speccer.dissection.outline.enclose.top::before,
|
|
@@ -318,6 +371,7 @@
|
|
|
318
371
|
height: var(--ph-speccer-line-width);
|
|
319
372
|
width: calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));
|
|
320
373
|
}
|
|
374
|
+
.ph.speccer.dissection.outline.enclose::before,
|
|
321
375
|
.ph.speccer.dissection.outline.enclose.top::before,
|
|
322
376
|
.ph.speccer.dissection.outline.enclose.bottom::before {
|
|
323
377
|
left: 50%;
|
|
@@ -342,39 +396,42 @@
|
|
|
342
396
|
background-color: transparent;
|
|
343
397
|
border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
344
398
|
}
|
|
345
|
-
.ph.speccer.dissection.outline.full.subtle {
|
|
346
|
-
border
|
|
347
|
-
border-style: dashed;
|
|
348
|
-
border-color: var(--ph-speccer-pin-color);
|
|
399
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly) {
|
|
400
|
+
border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
349
401
|
background-color: transparent;
|
|
402
|
+
border-bottom: none;
|
|
350
403
|
}
|
|
351
|
-
.ph.speccer.dissection.outline.full.subtle.top {
|
|
404
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).top {
|
|
405
|
+
border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
352
406
|
border-bottom: none;
|
|
353
407
|
}
|
|
354
|
-
.ph.speccer.dissection.outline.full.subtle.bottom {
|
|
408
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom {
|
|
409
|
+
border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
355
410
|
border-top: none;
|
|
356
411
|
}
|
|
357
|
-
.ph.speccer.dissection.outline.full.subtle.right {
|
|
412
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).right {
|
|
413
|
+
border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
358
414
|
border-left: none;
|
|
359
415
|
}
|
|
360
|
-
.ph.speccer.dissection.outline.full.subtle.left {
|
|
416
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).left {
|
|
417
|
+
border: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
361
418
|
border-right: none;
|
|
362
419
|
}
|
|
363
|
-
.ph.speccer.dissection.outline.full.subtle::after {
|
|
420
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly)::after {
|
|
364
421
|
height: var(--ph-speccer-pin-size);
|
|
365
422
|
width: var(--ph-speccer-pin-size);
|
|
366
423
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);
|
|
367
424
|
background-color: var(--ph-speccer-color-text-light);
|
|
368
425
|
color: var(--ph-speccer-pin-color);
|
|
369
426
|
}
|
|
370
|
-
.ph.speccer.dissection.outline.full.subtle.top::before,
|
|
371
|
-
.ph.speccer.dissection.outline.full.subtle.bottom::before {
|
|
427
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).top::before,
|
|
428
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom::before {
|
|
372
429
|
width: 0;
|
|
373
430
|
background-color: transparent;
|
|
374
431
|
border-right: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
375
432
|
}
|
|
376
|
-
.ph.speccer.dissection.outline.full.subtle.right::before,
|
|
377
|
-
.ph.speccer.dissection.outline.full.subtle.left::before {
|
|
433
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).right::before,
|
|
434
|
+
.ph.speccer.dissection.outline.full.subtle:not(.curly).left::before {
|
|
378
435
|
height: 0;
|
|
379
436
|
background-color: transparent;
|
|
380
437
|
border-top: var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);
|
|
@@ -590,6 +647,9 @@
|
|
|
590
647
|
list-style: none;
|
|
591
648
|
border: none;
|
|
592
649
|
}
|
|
650
|
+
.ph.speccer.measure {
|
|
651
|
+
display: flex;
|
|
652
|
+
}
|
|
593
653
|
.ph.speccer.measure.width {
|
|
594
654
|
color: var(--ph-speccer-measure-color);
|
|
595
655
|
border: var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);
|
package/speccer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,i="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==i)).forEach((e=>t.classList.add(e))))},i=(t,e)=>t?e||"string"==typeof t?`${t} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():`${Object.keys(t).filter((e=>t[e])).join(" ")}`.trim():"",o=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],n=t=>parseInt(t,10),p=t=>n(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,a=()=>new Promise(requestAnimationFrame),l=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await a(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((i=>t.style[i]=e[i])))},r=async t=>(await a(),getComputedStyle(t,null)),c=(t,e,i)=>t-e.width/2+i.width/2,h=(t,e,i)=>t-e.height/2+i.height/2,d=async t=>{await a();const e=t.getBoundingClientRect(),i=e.top+window.pageYOffset,o=e.left+window.pageXOffset;return{height:e.height,width:e.width,top:i,left:o}},s=async(t,e)=>{await a();const i=t.getBoundingClientRect(),o=await d(e),n=await(async(t,e)=>{await a();const i=t.getBoundingClientRect(),o=e.getBoundingClientRect(),n=o.top+window.pageYOffset,p=o.left+window.pageXOffset;return{height:o.height,width:o.width,top:h(n,i,o),left:c(p,i,o)}})(t,e),p=o.height,l=o.width,r=i.height,s=i.width;return{toTop:({center:t=!1,sourceHeight:e=r}={})=>({top:o.top-e,left:t?n.left:o.left,height:p,width:l}),fromTop:({center:t=!1}={})=>({top:o.top,left:t?n.left:o.left,height:p,width:l}),toBottom:({center:t=!1,sourceHeight:e=r,targetHeight:i=p}={})=>({top:o.top+i-e,left:t?n.left:o.left,height:p,width:l}),fromBottom:({center:t=!1,targetHeight:e=p}={})=>({top:o.top+e,left:t?n.left:o.left,height:p,width:l}),toLeft:({center:t=!1,sourceWidth:e=s,modifier:i=0}={})=>({top:t?n.top:o.top,left:o.left-e-i,height:p,width:l}),fromLeft:({center:t=!1}={})=>({top:t?n.top:o.top,left:o.left,height:p,width:l}),toRight:({center:t=!1,sourceWidth:e=s,targetWidth:i=l,modifier:a=0}={})=>({top:t?n.top:o.top,left:o.left+i-e+a,height:p,width:l}),fromRight:({center:t=!1,targetWidth:e=l}={})=>({top:t?n.top:o.top,left:o.left+e,height:p,width:l})}},f=(t="",i="span")=>{const o=document.createElement(i),n=document.createTextNode(t+"");return o.appendChild(n),o.setAttribute("title",t+"px"),e(o,"ph speccer spacing"),o},g=async t=>{if(!t)return;const i=await r(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;const o=(t=>{const{marginTop:e,marginBottom:i,marginLeft:o,marginRight:n,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}=t;return{marginTop:e,marginBottom:i,marginLeft:o,marginRight:n,paddingTop:p,paddingBottom:a,paddingLeft:l,paddingRight:r}})(i),p=Object.keys(o).filter((t=>"0px"!==o[t]));0!==p.length&&p.forEach((async i=>{const p=n(o[i]),r=f(p),c=(t=>-1!==t.indexOf("Top")?t.replace("Top"," top"):-1!==t.indexOf("Right")?t.replace("Right"," right"):-1!==t.indexOf("Bottom")?t.replace("Bottom"," bottom"):-1!==t.indexOf("Left")?t.replace("Left"," left"):"")(i);e(r,c),document.body.appendChild(r),t.classList.add("is-specced"),await(async(t,e,i,o)=>{await a();const n=o.getBoundingClientRect(),p=await d(o);"marginTop"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top-e+"px"}),"marginRight"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left+parseInt(n.width+"",10)+"px",top:p.top+"px"}),"marginBottom"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top+parseInt(n.height+"",10)+"px"}),"marginLeft"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left-e+"px",top:p.top+"px"}),"paddingTop"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top+"px"}),"paddingBottom"===t&&l(i,{height:`${e}px`,width:n.width+"px",left:p.left+"px",top:p.top+(parseInt(n.height+"",10)-e)+"px"}),"paddingRight"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left+(parseInt(n.width+"",10)-e)+"px",top:p.top+"px"}),"paddingLeft"===t&&l(i,{height:n.height+"px",width:`${e}px`,left:p.left+"px",top:p.top+"px"})})(i,p,r,t)}))};var u,x,m=Object.freeze({__proto__:null,create:f,element:g});!function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(u||(u={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(x||(x={}));const w=(t,e=3)=>parseFloat(t+"").toFixed(e),y=async(t,e,i)=>{const o=p(i),a=n(getComputedStyle(i).getPropertyValue("--ph-speccer-measure-size"))||8;const l=-1*a,r=e.getBoundingClientRect(),f=i.getBoundingClientRect(),g=await d(e),u=g.left-f.width-o+"px",m=w(h(g.top,f,r))+"px";g.left,r.width,w(h(g.top,f,r));const y=w(c(g.left,f,r))+"px",O=g.top-f.height-o+"px",b=w(c(g.left,f,r))+"px",E=g.top+r.height+o+"px",$=await s(i,e);let R={};if(-1!==t.indexOf(x.Left))if(-1!==t.indexOf(x.Full)){const{left:t,top:e,height:i}=$.toLeft({sourceWidth:a});R={left:`${t}px`,top:`${e}px`,height:`${i}px`}}else if(-1!==t.indexOf(x.Enclose)){const{left:t,top:e,height:i,width:o}=$.fromTop();R={left:`${t}px`,top:`${e}px`,height:`${i}px`,width:`${o}px`}}else{const{left:t,top:e}=$.toLeft({center:!0,modifier:o});R={left:`${t}px`,top:`${e}px`}}else if(-1!==t.indexOf(x.Right))if(-1!==t.indexOf(x.Full))R={left:g.left+r.width+"px",top:g.top+"px",height:r.height+"px"};else if(-1!==t.indexOf(x.Enclose))R={left:g.left+"px",top:g.top+"px",height:r.height+"px",width:r.width+"px"};else{const{left:t,top:e}=$.fromRight({center:!0,modifier:o});R={left:`${t}px`,top:`${e}px`}}else R=-1!==t.indexOf(x.Top)?-1!==t.indexOf(x.Full)?{top:g.top+l+"px",left:g.left+"px",width:r.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:g.top+"px",left:g.left+"px",height:r.height+"px",width:r.width+"px"}:{left:y,top:O}:-1!==t.indexOf(x.Bottom)?-1!==t.indexOf(x.Full)?{top:g.top+r.height+"px",left:g.left+"px",width:r.width+"px"}:-1!==t.indexOf(x.Enclose)?{top:g.top+"px",left:g.left+"px",height:r.height+"px",width:r.width+"px"}:{left:b,top:E}:-1!==t.indexOf(x.Full)?{left:g.left+r.width+"px",top:g.top+"px",height:r.height+"px"}:-1!==t.indexOf(x.Enclose)?{left:g.left+r.width+"px",top:g.top+"px",height:r.height+"px",width:r.width+"px"}:{left:u,top:m};return R},O=(t="",o,n="span")=>{const p=document.createElement(n),a=document.createTextNode(t),l={};null!==o&&""!==o&&(l[o]=!0),-1===o.indexOf(x.Full)&&-1===o.indexOf(x.Enclose)?p.appendChild(a):-1===o.indexOf(x.Full)&&-1===o.indexOf(x.Enclose)||p.setAttribute("data-dissection-counter",t);const r=i("ph speccer dissection",l);return e(p,r),p},b=t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");e&&e.forEach((async(t,e)=>{if(!t)return;const i=t.getAttribute("data-anatomy")||"";if(!i||""===i||-1===i.indexOf(x.Outline))return;const n=O(o[e],i);document.body.appendChild(n);const p=await y(i,t,n);l(n,p)}))};const E=(t="",i="",o="span")=>{const n=document.createElement(o);return n.setAttribute("title",t+"px"),n.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(n,`ph speccer measure ${i}`),n},$=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const i=await r(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;await a();const o=t.getBoundingClientRect(),n=o.top+window.pageYOffset,p=o.left+window.pageXOffset;if(-1!==e.indexOf("width"))if(-1!==e.indexOf("bottom")){const t=E(o.width,e);document.body.appendChild(t),l(t,{left:p+"px",top:n+o.height+1+"px",width:o.width+"px"})}else{const t=E(o.width,e);document.body.appendChild(t);const i=t.getBoundingClientRect();l(t,{left:p+"px",top:n-i.height+1+"px",width:o.width+"px"})}else if(-1!==e.indexOf("height"))if(-1!==e.indexOf("right")){const t=E(o.height,e);document.body.appendChild(t),l(t,{left:p+o.width+"px",top:n+"px",height:o.height+"px"})}else{const t=E(o.height,e);document.body.appendChild(t);const i=t.getBoundingClientRect();l(t,{left:p-i.width+"px",top:n+"px",height:o.height+"px"})}};const R=(t,o)=>{const n=document.createElement("div"),p={};null!==o&&""!==o&&(p[o]=!0);const a=i("ph speccer typography",p);return n.innerHTML=t,e(n,a),n};const A=t=>{const e=()=>function(t,e,i){let o;return function(n,...p){const a=i&&!o;o&&clearTimeout(o),o=setTimeout((function(){o=null,i||t.apply(n,p)}),e),a&&t.apply(n,p)}}((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},S=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},B=()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(g(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&($(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const i=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(b(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{i.observe(t)}))},C=t=>{window.speccer=t},L=t=>{const e=document.currentScript;if(e){const i=e.getAttribute("src");!i||-1===i.indexOf("speccer.js")&&-1===i.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?C(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?S(t):e.hasAttribute("data-lazy")?B():S(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||A(t))}};const v=m,T=Object.freeze({__proto__:null,create:O,element:b}),_=Object.freeze({__proto__:null,element:$}),j=Object.freeze({__proto__:null,create:R,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),i=await r(t);if("none"===i.display||"0"===i.opacity||"hidden"===i.visibility)return;t.classList.add("is-specced");const o=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:i,fontFamily:o,fontSize:n,fontStyle:p,fontVariationSettings:a,fontWeight:l}=t;return{lineHeight:e,letterSpacing:i,fontFamily:o,fontSize:n,fontStyle:p,fontVariationSettings:a,fontWeight:l}})(await r(t)),i="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${e.fontFamily};</li> <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${e.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${e.lineHeight} / ${i};</li> <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li> <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),n=R(o,e);document.body.appendChild(n);const a=await(async(t,e,i)=>{const o=e.getBoundingClientRect(),n=p(i),a=i.getBoundingClientRect(),l=await d(e),r=l.left-a.width-n+"px",s=w(h(l.top,a,o))+"px",f=l.left+o.width+n+"px",g=w(h(l.top,a,o))+"px",x=w(c(l.left,a,o))+"px",m=l.top-a.height-n+"px",y=w(c(l.left,a,o))+"px",O=l.top+o.height+n+"px";let b={left:r,top:s};return t&&-1!==t.indexOf(u.Right)?b={left:f,top:g}:t&&-1!==t.indexOf(u.Top)?b={left:x,top:m}:t&&-1!==t.indexOf(u.Bottom)&&(b={left:y,top:O}),b})(e,t,n);l(n,a)}}),z=Object.freeze({__proto__:null,dom:S,lazy:B,manual:C,activate:L}),F=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),i=document.querySelectorAll("[data-speccer-typography]"),o=document.querySelectorAll("[data-anatomy-section]");t.forEach(v.element),e.forEach(_.element),i.forEach(j.element),o.forEach(T.element)};L(F),t.default=F,t.dissect=T,t.measure=_,t.modes=z,t.spacing=v,t.typography=j,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).speccer={})}(this,(function(t){"use strict";const e=(t,e,o="noop")=>{t&&(!e||e&&0===e.length||e.trim().split(" ").filter((t=>t!==o)).forEach((e=>t.classList.add(e))))},o=(t,e)=>t?e||"string"==typeof t?`${t} ${e?Object.keys(e).filter((t=>e[t])).join(" "):""}`.trim():`${Object.keys(t).filter((e=>t[e])).join(" ")}`.trim():"",i=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"],n=t=>parseInt(t,10),r=t=>n(getComputedStyle(t).getPropertyValue("--ph-speccer-pin-space"))||48,s=()=>new Promise(requestAnimationFrame),a=async(t,e)=>{!t||!e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e||Array.isArray(e)&&0===e.length||0===Object.keys(e).length&&e.constructor===Object||(await s(),Array.isArray(e)?e.forEach((e=>t.style[e.key]=e.value)):Object.keys(e).forEach((o=>t.style[o]=e[o])))},p=async t=>(await s(),getComputedStyle(t,null)),c=(t,e,o)=>t-e.width/2+o.width/2,l=(t,e,o)=>t-e.height/2+o.height/2,h=async t=>{await s();const e=t.getBoundingClientRect(),o=e.top+window.pageYOffset,i=e.left+window.pageXOffset;return{height:e.height,width:e.width,top:o,left:i}},d=async(t,e)=>{await s();const o=t.getBoundingClientRect(),i=await h(e),n=await(async(t,e)=>{await s();const o=t.getBoundingClientRect(),i=e.getBoundingClientRect(),n=i.top+window.pageYOffset,r=i.left+window.pageXOffset;return{height:i.height,width:i.width,top:l(n,o,i),left:c(r,o,i)}})(t,e),r=i.height,a=i.width,p=o.height,d=o.width;return{absolute:()=>({top:i.top,left:i.left,height:r,width:a}),toTop:({center:t=!1,sourceHeight:e=p,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:a}),fromTop:({center:t=!1,sourceHeight:e=p,modifier:o=0}={})=>({top:i.top-e-o,left:t?n.left:i.left,height:r,width:a}),toBottom:({center:t=!1,sourceHeight:e=p,targetHeight:o=r,modifier:s=0}={})=>({top:i.top+o-(e+s),left:t?n.left:i.left,height:r,width:a}),fromBottom:({center:t=!1,targetHeight:e=r,modifier:o=0}={})=>({top:i.top+e+o,left:t?n.left:i.left,height:r,width:a}),toLeft:({center:t=!1,sourceWidth:e=d,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:a}),fromLeft:({center:t=!1,sourceWidth:e=d,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left-e-o,height:r,width:a}),toRight:({center:t=!1,sourceWidth:e=d,targetWidth:o=a,modifier:s=0}={})=>({top:t?n.top:i.top,left:i.left+o-(e+s),height:r,width:a}),fromRight:({center:t=!1,targetWidth:e=a,modifier:o=0}={})=>({top:t?n.top:i.top,left:i.left+e+o,height:r,width:a})}},f=(t="",o="span")=>{const i=document.createElement(o),n=document.createTextNode(t+"");return i.appendChild(n),i.setAttribute("title",t+"px"),e(i,"ph speccer spacing"),i},u=async t=>{if(!t)return;const o=await p(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;const i=(t=>{const{marginTop:e,marginBottom:o,marginLeft:i,marginRight:n,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:p}=t;return{marginTop:e,marginBottom:o,marginLeft:i,marginRight:n,paddingTop:r,paddingBottom:s,paddingLeft:a,paddingRight:p}})(o),r=Object.keys(i).filter((t=>"0px"!==i[t]));0!==r.length&&r.forEach((async o=>{const r=n(i[o]),p=f(r),c=(t=>-1!==t.indexOf("Top")?t.replace("Top"," top"):-1!==t.indexOf("Right")?t.replace("Right"," right"):-1!==t.indexOf("Bottom")?t.replace("Bottom"," bottom"):-1!==t.indexOf("Left")?t.replace("Left"," left"):"")(o);e(p,c),document.body.appendChild(p),t.classList.add("is-specced"),await(async(t,e,o,i)=>{await s();const n=i.getBoundingClientRect(),r=await h(i);"marginTop"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top-e+"px"}),"marginRight"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left+parseInt(n.width+"",10)+"px",top:r.top+"px"}),"marginBottom"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+parseInt(n.height+"",10)+"px"}),"marginLeft"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left-e+"px",top:r.top+"px"}),"paddingTop"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+"px"}),"paddingBottom"===t&&a(o,{height:`${e}px`,width:n.width+"px",left:r.left+"px",top:r.top+(parseInt(n.height+"",10)-e)+"px"}),"paddingRight"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left+(parseInt(n.width+"",10)-e)+"px",top:r.top+"px"}),"paddingLeft"===t&&a(o,{height:n.height+"px",width:`${e}px`,left:r.left+"px",top:r.top+"px"})})(o,r,p,t)}))};var m=Object.freeze({__proto__:null,create:f,element:u});function g(t,e,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(t):i?i.value:e.get(t)}function y(t,e,o,i,n){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?n.call(t,o):n?n.value=o:e.set(t,o),o}const w=()=>"_"+Math.random().toString(36).substring(2,11),x=t=>t.top,b=t=>t.left+t.width,E=t=>t.top+t.height,$=t=>t.left,v=t=>t.left+t.width/2,A=t=>t.top+t.height/2,S={center:t=>({x:v(t),y:A(t)}),top:t=>({x:v(t),y:x(t)}),right:t=>({x:b(t),y:A(t)}),bottom:t=>({x:v(t),y:E(t)}),left:t=>({x:$(t),y:A(t)}),"right-top":t=>({x:b(t),y:x(t)}),"right-bottom":t=>({x:b(t),y:E(t)}),"left-top":t=>({x:$(t),y:x(t)}),"left-bottom":t=>({x:$(t),y:E(t)}),"top-left":t=>({x:$(t),y:x(t)}),"top-right":t=>({x:b(t),y:x(t)}),"bottom-left":t=>({x:$(t),y:E(t)}),"bottom-right":t=>({x:b(t),y:E(t)}),"top-center":t=>({x:v(t),y:x(t)}),"right-center":t=>({x:b(t),y:A(t)}),"bottom-center":t=>({x:v(t),y:E(t)}),"left-center":t=>({x:$(t),y:A(t)})},O=async(t,e,o="center",i="center")=>{if(!t||!e)throw"No element given";const{x:n,y:r}=await C(t,o),{x:s,y:a}=await C(e,i);return{x1:n,y1:r,x2:s,y2:a}},C=async(t,e="center")=>{if(!e)throw"No position given";if("string"!=typeof e)throw"The position given is not the required type: pos: "+typeof e;const o=["center","left","right","top","bottom","right-top","right-bottom","left-top","left-bottom","top-left","top-right","bottom-left","bottom-right","top-center","right-center","bottom-center","left-center"];if(!o.includes(e))throw`The position given does not match allowed positions to use! Valid positions are: ${o.join(", ")}`;await s();const i=t.getBoundingClientRect();return S[e](i)},B=async({start:t,stop:e,crude:o=!1})=>{const{x1:i,y1:n,x2:r,y2:s}=await O(t,e),a=((t,e,o,i,n=!0)=>{if(!(t&&e&&o&&i))throw new SyntaxError("Missing input for `angle`");if("number"!=typeof t||"number"!=typeof e||"number"!=typeof o||"number"!=typeof i)throw new TypeError(`Parameters for \`angle\` does not have required type. Requires number! Got: ${typeof t} ${typeof e} ${typeof o} ${typeof i}`);const r=i-e,s=o-t;let a=Math.atan2(r,s);return a*=180/Math.PI,n&&a<0&&(a=360+a),a})(i,n,r,s);return o?T(a):R(a)},R=t=>{if(t>360)throw RangeError("parameter cannot exceed 360");if(t<0)throw RangeError("parameter cannot be lower than 0");return t>=0&&t<=22.5?"east":t>=22.5&&t<=67.5?"south-east":t>=67.5&&t<=112.5?"south":t>=112.5&&t<=157.5?"south-west":t>=157.5&&t<=202.5?"west":t>=202.5&&t<=247.5?"north-west":t>=247.5&&t<=292.5?"north":t>=292.5&&t<=337.5?"north-east":"east"},T=t=>{if(t>360)throw RangeError("parameter cannot exceed 360");if(t<0)throw RangeError("parameter cannot be lower than 0");return t>=45&&t<=135?"south":t>135&&t<=225?"west":t>225&&t<=315?"north":"east"},L=(t,e)=>{const{x1:o,x2:i,y1:n,y2:r}=t,{direct:s=!1,firstSet:a=!1,direction:p}=e;let c={x:o+(i-o)/2,y:n},l={x:o+(i-o)/2,y:r};return s&&(a?"west"===p?(c={x:o-32,y:n-8},l={x:i+32,y:r}):"south"===p?(c={x:o-8,y:n+32},l={x:i,y:r-32}):"east"===p?(c={x:o+32,y:n-8},l={x:i-32,y:r}):(c={x:o-8,y:n-32},l={x:i,y:r+32}):"west"===p?(c={x:o-32,y:n+8},l={x:i+32,y:r}):"south"===p?(c={x:o+8,y:n+32},l={x:i,y:r-32}):"east"===p?(c={x:o+32,y:n+8},l={x:i-32,y:r}):(c={x:o+8,y:n-32},l={x:i,y:r+32})),{firstPoint:{x:o,y:n},firstControl:c,lastPoint:{x:i,y:r},lastControl:l}},P=async(t,e,o)=>{const{pos1:i,pos2:n,firstSet:r=!1,direction:s}=o,{x1:a,y1:p,x2:c,y2:l}=await O(t,e,i,n);let h=0,d=0;"north"==s?d=8:"west"==s?h=8:"east"==s?h=-8:"south"==s&&(d=-8);const f=L({x1:a+0,x2:c+h,y1:p+0,y2:l+d},{direct:!0,firstSet:r,direction:s}),{firstPoint:u,firstControl:m,lastControl:g,lastPoint:y}=f;return"M "+u.x+" "+u.y+"C "+m.x+" "+m.y+", "+g.x+" "+g.y+", "+y.x+" "+y.y};var _,M,j,k,N,W,I,z,q,H,V,F;class D{constructor(t,e){_.add(this),M.set(this,void 0),j.set(this,void 0),g(this,_,"m",k).call(this,t,e)}connect(){this.draw(g(this,j,"f"))}async draw(t){if(!t)throw"No path given to draw!";const e=`ph_draw_path-path-${w()}`,o=t.cloneNode(!1);if(o.setAttribute("id",e),o.setAttribute("data-start-el",this.startElement.getAttribute("id")||"no-id-found"),o.classList.remove("original"),o.classList.add("speccer"),!t.parentNode)throw"No parentNode found for path";this.line=t.parentNode.insertBefore(o,t.nextSibling);const i=await B({start:this.startElement,stop:this.stopElement,crude:!0}),{pos1:n,pos2:r}=(t=>{let e,o;switch(t){case"east":e="right",o="left";break;case"south":e="bottom",o="top";break;case"west":e="left",o="right";break;default:e="top",o="bottom"}return{pos1:e,pos2:o}})(i),s=await(async(t,e,o)=>{const{pos1:i,pos2:n}=o,{x1:r,y1:s,x2:a,y2:p}=await O(t,e,i,n),c=L({x1:r,x2:a,y1:s,y2:p},{direction:""}),{firstPoint:l,firstControl:h,lastControl:d,lastPoint:f}=c;return"M "+l.x+" "+l.y+"C "+h.x+" "+h.y+", "+d.x+" "+d.y+", "+f.x+" "+f.y})(this.startElement,this.stopElement,{pos1:n,pos2:r});this.line.setAttribute("data-direction",i),this.line.setAttribute("data-pos1",n),this.line.setAttribute("data-pos2",r),this.line.setAttribute("d",s)}}M=new WeakMap,j=new WeakMap,_=new WeakSet,k=function(t,e){if(!t||!e)throw"Missing inputs startElement and stopElement";if(!document.body.contains(e))throw"stopElement is not in the DOM";if(!document.body.contains(t))throw"startElement is not in the DOM";if(this.startElement=t,this.stopElement=e,y(this,M,document.getElementById("ph-speccer-svg"),"f"),y(this,j,document.getElementById("ph-speccer-path"),"f"),!g(this,j,"f")||!g(this,M,"f"))throw"Missing required SVG element to draw lines. Please see the documentation";this.connect()},window.DrawSVGLine=D;class G{constructor(t,e){N.add(this),W.set(this,void 0),I.set(this,void 0),g(this,N,"m",z).call(this,t,e)}connect(){this.draw(g(this,I,"f"))}async draw(t){if(!t)throw"No path given to draw!";const e=g(this,N,"m",q).call(this,t),o=g(this,N,"m",q).call(this,t);if(!t.parentNode)throw"No parentNode found for path";this.firstPathElement=t.parentNode.insertBefore(e,t.nextSibling),this.secondPathElement=t.parentNode.insertBefore(o,t.nextSibling);const i=await B({stop:this.stopElement,start:this.startElement,crude:!0}),{path1pos1:n,path1pos2:r,path2pos1:s,path2pos2:a}=(t=>{let e,o,i,n;switch(t){case"east":e="right-top",o="left-center",i="right-bottom",n="left-center";break;case"south":e="bottom-left",o="top-center",i="bottom-right",n="top-center";break;case"west":e="left-top",o="right-center",i="left-bottom",n="right-center";break;default:e="top-left",o="bottom-center",i="top-right",n="bottom-center"}return{path1pos1:e,path1pos2:o,path2pos1:i,path2pos2:n}})(i),p=await P(this.startElement,this.stopElement,{pos1:n,pos2:r,firstSet:!0,direction:i}),c=await P(this.startElement,this.stopElement,{pos1:s,pos2:a,direction:i});this.firstPathElement.setAttribute("data-direction",i),this.firstPathElement.setAttribute("data-pos1",n),this.firstPathElement.setAttribute("data-pos2",r),this.firstPathElement.setAttribute("d",p),this.secondPathElement.setAttribute("data-direction",i),this.secondPathElement.setAttribute("data-pos1",s),this.secondPathElement.setAttribute("data-pos2",a),this.secondPathElement.setAttribute("d",c)}}W=new WeakMap,I=new WeakMap,N=new WeakSet,z=function(t,e){if(!t||!e)throw"Missing inputs startElement and stopElement";if(!document.body.contains(e))throw"stopElement is not in the DOM";if(!document.body.contains(t))throw"startElement is not in the DOM";if(this.startElement=t,this.stopElement=e,y(this,W,document.getElementById("ph-speccer-svg"),"f"),y(this,I,document.getElementById("ph-speccer-path"),"f"),!g(this,I,"f")||!g(this,W,"f"))throw"Missing required SVG element to draw lines. Please see the documentation";this.connect()},q=function(t){if(!t)throw"No path given to #getPathElement!";const e=`ph_draw_path-path-${w()}`,o=t.cloneNode(!1);return o.setAttribute("data-start-el",this.startElement.getAttribute("id")||"no-id-found"),o.setAttribute("id",e),o.classList.remove("original"),o.classList.add("speccer"),o},window.DrawSVGCurlyBracket=G,function(t){t.Empty="",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(H||(H={})),function(t){t.Outline="outline",t.Enclose="enclose",t.Full="full",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top",t.SVG="svg",t.Curly="curly"}(V||(V={})),function(t){t.Width="width",t.Height="height",t.Left="left",t.Right="right",t.Bottom="bottom",t.Top="top"}(F||(F={}));const X=t=>t.split(" "),Y=t=>X(t).includes(V.Right),J=t=>X(t).includes(V.Bottom),K=t=>X(t).includes(V.Full),Q=t=>X(t).includes(V.Enclose),U=t=>-1!==t.indexOf(V.Full)&&-1!==t.indexOf(V.Curly),Z=async(t,e,o,i)=>{const{isCurly:s}=i,a=r(o),p=n(getComputedStyle(o).getPropertyValue("--ph-speccer-measure-size"))||8;const c=await d(o,e);if(Q(t)){const{left:t,top:e,height:o,width:i}=c.absolute();return{left:`${t}px`,top:`${e}px`,height:`${o}px`,width:`${i}px`}}if(X(t).includes(V.Left)){if(K(t)&&!s){const{left:t,top:e,height:o}=c.fromLeft({sourceWidth:p});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}{const{left:t,top:e}=c.fromLeft({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}}if(Y(t)){if(K(t)&&!s){const{left:t,top:e,height:o}=c.fromRight({center:!1});return{left:`${t}px`,top:`${e}px`,height:`${o}px`}}{const{left:t,top:e}=c.fromRight({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}}if(J(t)){if(K(t)&&!s){const{left:t,top:e,width:o}=c.fromBottom({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}{const{left:t,top:e}=c.fromBottom({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}}if(K(t)&&!s){const{left:t,top:e,width:o}=c.fromTop({center:!1});return{left:`${t}px`,top:`${e}px`,width:`${o}px`}}{const{left:t,top:e}=c.fromTop({center:!0,modifier:s?a/1.5:a});return{left:`${t}px`,top:`${e}px`}}},tt=(t="",i,n="span")=>{const r=document.createElement(n),s=document.createTextNode(t),a={};null!==i&&""!==i&&(a[i]=!0),!K(i)&&!Q(i)||K(i)&&U(i)?r.appendChild(s):(K(i)||Q(i))&&r.setAttribute("data-dissection-counter",t);const p=o("ph speccer dissection",a);return e(r,p),r},et=t=>{if(!t)return;const e=t.querySelectorAll("[data-anatomy]");if(e){let t=0;e.forEach((async(e,o)=>{if(!e)return Promise.resolve();const n=e.getAttribute("data-anatomy")||"";if(!n||""===n||-1===n.indexOf(V.Outline))return;let r=i[o];r||(r=`${i[t]}${i[t].toLowerCase()}`,t++);const s=tt(r,n);document.body.appendChild(s);const p=await Z(n,e,s,{isCurly:U(n)});var c;await a(s,p),-1===(c=n).indexOf(V.Curly)&&-1===c.indexOf(V.Full)&&-1===c.indexOf(V.Enclose)&&-1!==c.indexOf(V.SVG)?new D(e,s):U(n)&&new G(e,s)}))}};const ot=(t="",o="",i="span")=>{const n=document.createElement(i);return n.setAttribute("title",t+"px"),n.setAttribute("data-measure",parseInt(t+"",10)+"px"),e(n,`ph speccer measure ${o}`),n},it=async t=>{if(!t)return;const e=t.getAttribute("data-speccer-measure");if(""===e||!e)return;const o=await p(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;await s();const i=t.getBoundingClientRect();if(X(e).includes(F.Width))if(J(e)){const o=ot(i.width,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,width:p}=n.fromBottom({center:!1});await a(o,{left:`${r}px`,top:`${s}px`,width:`${p}px`})}else{const o=ot(i.width,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,width:p}=n.fromTop({center:!1,modifier:-8});await a(o,{left:`${r}px`,top:`${s}px`,width:`${p}px`})}else if((t=>X(t).includes(F.Height))(e))if(Y(e)){const o=ot(i.height,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,height:p}=n.fromRight({center:!1});await a(o,{left:`${r}px`,top:`${s}px`,height:`${p}px`})}else{const o=ot(i.height,e);document.body.appendChild(o);const n=await d(o,t),{left:r,top:s,height:p}=n.fromLeft({center:!1,modifier:-8});await a(o,{left:`${r}px`,top:`${s}px`,height:`${p}px`})}};const nt=(t,e=3)=>parseFloat(t+"").toFixed(e),rt=(t,i)=>{const n=document.createElement("div"),r={};null!==i&&""!==i&&(r[i]=!0);const s=o("ph speccer typography",r);return n.innerHTML=t,e(n,s),n};const st=t=>{const e=()=>function(t,e,o){let i;return function(n,...r){const s=o&&!i;i&&clearTimeout(i),i=setTimeout((function(){i=null,o||t.apply(n,r)}),e),s&&t.apply(n,r)}}((()=>{t()}),300);window.removeEventListener("resize",e),window.addEventListener("resize",e)},at=t=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{t()})):t()},pt=()=>{const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(u(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)").forEach((e=>{t.observe(e)}));const e=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(it(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-speccer-measure]").forEach((t=>{e.observe(t)}));const o=new IntersectionObserver(((t,e)=>{t.forEach((t=>{t.intersectionRatio>0&&(et(t.target),e.unobserve(t.target))}))}));document.querySelectorAll("[data-anatomy-section]").forEach((t=>{o.observe(t)}))},ct=t=>{window.speccer=t},lt=t=>{const e=document.currentScript;if(e){const o=e.getAttribute("src");!o||-1===o.indexOf("speccer.js")&&-1===o.indexOf("JaXpOK.js")||(e.hasAttribute("data-manual")?ct(t):e.hasAttribute("data-instant")?t():e.hasAttribute("data-dom")?at(t):e.hasAttribute("data-lazy")?pt():at(t),e.hasAttribute("data-manual")||e.hasAttribute("data-lazy")||st(t))}};const ht=m,dt=Object.freeze({__proto__:null,create:tt,element:et}),ft=Object.freeze({__proto__:null,element:it}),ut=Object.freeze({__proto__:null,create:rt,element:async t=>{if(!t)return;const e=t.getAttribute("data-speccer-typography"),o=await p(t);if("none"===o.display||"0"===o.opacity||"hidden"===o.visibility)return;t.classList.add("is-specced");const i=await(async t=>{const e=(t=>{const{lineHeight:e,letterSpacing:o,fontFamily:i,fontSize:n,fontStyle:r,fontVariationSettings:s,fontWeight:a}=t;return{lineHeight:e,letterSpacing:o,fontFamily:i,fontSize:n,fontStyle:r,fontVariationSettings:s,fontWeight:a}})(await p(t)),o="normal"!==e.lineHeight?parseInt(e.lineHeight,10)/16+"rem":"normal";return`\nfont-styles: {<ul class="speccer-styles"> <li><span class="property">font-family:</span> ${e.fontFamily};</li> <li><span class="property">font-size:</span> ${e.fontSize} / ${parseInt(e.fontSize,10)/16}rem;</li> <li><span class="property">font-weight:</span> ${e.fontWeight};</li> <li><span class="property">font-variation-settings:</span> ${e.fontVariationSettings};</li> <li><span class="property">line-height:</span> ${e.lineHeight} / ${o};</li> <li><span class="property">letter-spacing:</span> ${e.letterSpacing};</li> <li><span class="property">font-style:</span> ${e.fontStyle};</li></ul>}`})(t),n=rt(i,e);document.body.appendChild(n);const s=await(async(t,e,o)=>{const i=e.getBoundingClientRect(),n=r(o),s=o.getBoundingClientRect(),a=await h(e),p=a.left-s.width-n+"px",d=nt(l(a.top,s,i))+"px",f=a.left+i.width+n+"px",u=nt(l(a.top,s,i))+"px",m=nt(c(a.left,s,i))+"px",g=a.top-s.height-n+"px",y=nt(c(a.left,s,i))+"px",w=a.top+i.height+n+"px";let x={left:p,top:d};return t&&-1!==t.indexOf(H.Right)?x={left:f,top:u}:t&&-1!==t.indexOf(H.Top)?x={left:m,top:g}:t&&-1!==t.indexOf(H.Bottom)&&(x={left:y,top:w}),x})(e,t,n);a(n,s)}}),mt=Object.freeze({__proto__:null,dom:at,lazy:pt,manual:ct,activate:lt}),gt=()=>{((t,e=document)=>{[].forEach.call(e.querySelectorAll(t),(function(t){t.remove()}))})(".speccer");const t=document.querySelectorAll("[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)"),e=document.querySelectorAll("[data-speccer-measure]"),o=document.querySelectorAll("[data-speccer-typography]"),i=document.querySelectorAll("[data-anatomy-section]");t.forEach(ht.element),e.forEach(ft.element),o.forEach(ut.element),i.forEach(dt.element)};lt(gt),t.default=gt,t.dissect=dt,t.measure=ft,t.modes=mt,t.spacing=ht,t.typography=ut,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
2
2
|
//# sourceMappingURL=speccer.js.map
|
package/speccer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/debounce.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/helpers/spacing/position.ts","src/enums/area.ts","src/lib/number.ts","src/helpers/dissect/styles.ts","src/tasks/dissect.ts","src/tasks/measure.ts","src/helpers/typography/position.ts","src/tasks/typography.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts"],"sourcesContent":["export const after = (el: HTMLElement | null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport { ClassNamesObjectMapInterface } from 'interfaces/classnames';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (\n cls: string,\n cls_obj?: ClassNamesObjectMapInterface\n): string => {\n if (!cls) return '';\n\n if (!cls_obj && typeof cls !== 'string') {\n return `${Object.keys(cls)\n .filter((classname) => cls[classname])\n .join(' ')}`.trim();\n }\n\n return `${cls} ${\n cls_obj\n ? Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')\n : ''\n }`.trim();\n};\n","/* eslint no-console:0 */\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = [\n 'TR',\n 'TH',\n 'TD',\n 'TBODY',\n 'THEAD',\n 'TFOOT'\n];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n\nexport const SPECCER_DEFAULT_MEASURE_SIZE = 8;\n\nexport const SPECCER_DEFAULT_LINE_WIDTH = 1;\n","/* eslint no-console:0 */\n'use strict';\nimport {\n SPECCER_DEFAULT_PIN_SPACE,\n SPECCER_DEFAULT_MEASURE_SIZE,\n SPECCER_DEFAULT_LINE_WIDTH\n} from './constants';\nimport {\n SpacingCSSPropertiesType,\n TypographyCSSPropertiesType\n} from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string | number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1)\n ? 0\n : _value;\n};\n\nexport const getClassNameFromCSSProperty = (property: string) => {\n if (property.indexOf('Top') !== -1) {\n return property.replace('Top', ' top');\n } else if (property.indexOf('Right') !== -1) {\n return property.replace('Right', ' right');\n } else if (property.indexOf('Bottom') !== -1) {\n return property.replace('Bottom', ' bottom');\n } else if (property.indexOf('Left') !== -1) {\n return property.replace('Left', ' left');\n }\n\n return '';\n};\n\nexport const getSpacing = (\n style: SpacingCSSPropertiesType\n): SpacingCSSPropertiesType => {\n const {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n } = style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (\n style: TypographyCSSPropertiesType\n): TypographyCSSPropertiesType => {\n const {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')\n ) || SPECCER_DEFAULT_PIN_SPACE;\n\nexport const measureSize = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-measure-size')\n ) || SPECCER_DEFAULT_MEASURE_SIZE;\n\nexport const lineWidth = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-line-width')\n ) || SPECCER_DEFAULT_LINE_WIDTH;\n","/* eslint @typescript-eslint/no-explicit-any: [\"error\", { \"fixToUnknown\": true }] */\n'use strict';\n\nimport { DebounceAnyFunctionType } from 'types/debounce';\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n\nconst debounce = function (\n func: DebounceAnyFunctionType,\n wait: number,\n immediate?: boolean\n): DebounceAnyFunctionType {\n let timeout: null | ReturnType<typeof setTimeout>;\n\n return function (context: unknown, ...args: unknown[]) {\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","/* eslint no-console:0 */\n'use strict';\nimport { waitForFrame } from './debounce';\n\nexport const add = async (el: HTMLElement, styles: [] | object) => {\n if (\n !el ||\n !styles ||\n typeof styles === 'string' ||\n typeof styles === 'number' ||\n typeof styles === 'boolean' ||\n (Array.isArray(styles) && styles.length === 0) ||\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach(\n (style: { key: string; value: string }) =>\n (el.style[style.key] = style.value)\n );\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","import { waitForFrame } from './debounce';\n\nimport { PositionPropertiesType, PositionInputType } from '../types/position';\nimport { GetRecPropertiesInterface } from 'interfaces/position';\n\nexport const get_horizontal_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const offset = async (\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: _el_offset_top,\n left: _el_offset_left\n };\n};\n\nexport const offsetWithCenter = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: get_vertical_center_of_els(_el_offset_top, _source_rect, _target_rect),\n left: get_horizontal_center_of_els(\n _el_offset_left,\n _source_rect,\n _target_rect\n )\n };\n};\n\nexport const getRec = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<GetRecPropertiesInterface> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n const _target_offset_center = await offsetWithCenter(sourceEl, targetEl);\n const _target_height = _target_offset.height;\n const _target_width = _target_offset.width;\n const _source_height = _source_rect.height;\n const _source_width = _source_rect.width;\n\n return {\n toTop: ({\n center = false,\n sourceHeight = _source_height\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top - sourceHeight,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromTop: ({\n center = false\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toBottom: ({\n center = false,\n sourceHeight = _source_height,\n targetHeight = _target_height\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight - sourceHeight,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n fromBottom: ({\n center = false,\n targetHeight = _target_height\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toLeft: ({\n center = false,\n sourceWidth = _source_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left - sourceWidth - modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromLeft: ({\n center = false\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toRight: ({\n center = false,\n sourceWidth = _source_width,\n targetWidth = _target_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth - sourceWidth + modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromRight: ({\n center = false,\n targetWidth = _target_width\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth,\n height: _target_height,\n width: _target_width\n };\n }\n };\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/spacing';\n\nexport const create = (text: string | number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' ||\n _target_styles.opacity === '0' ||\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n const _target_spacing_styles = css.getSpacing(_target_styles);\n const _target_pruned_spacing_styles = Object.keys(\n _target_spacing_styles\n ).filter((property) => {\n const _value = _target_spacing_styles[property];\n\n return _value !== '0px';\n });\n\n if (_target_pruned_spacing_styles.length === 0) return;\n\n _target_pruned_spacing_styles.forEach(async (property) => {\n const _value = css.getNumberValue(_target_spacing_styles[property]);\n const _speccer_el = create(_value);\n const _class_name = css.getClassNameFromCSSProperty(property);\n\n classnames.set(_speccer_el, _class_name);\n document.body.appendChild(_speccer_el);\n\n targetEl.classList.add('is-specced');\n await helpers.position(property, _value, _speccer_el, targetEl);\n });\n};\n","import * as styles from '../../lib/styles';\nimport { offset } from '../../lib/position';\nimport { waitForFrame } from '../../lib/debounce';\n\nexport const position = async (\n property: string,\n value: number,\n spacingEl: HTMLElement,\n targetEl: HTMLElement\n) => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n\n if (property === 'marginTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top - value + 'px'\n });\n }\n\n if (property === 'marginRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'marginBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n }\n\n if (property === 'marginLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left - value + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top:\n _target_offset.top +\n (parseInt(_target_rect.height + '', 10) - value) +\n 'px'\n });\n }\n\n if (property === 'paddingRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left:\n _target_offset.left +\n (parseInt(_target_rect.width + '', 10) - value) +\n 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n};\n","/* eslint-disable no-unused-vars */\n\nexport enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","/* eslint no-console:0 */\n'use strict';\n\nexport const decimal = (number: string | number, decimals = 3): string =>\n parseFloat(number + '').toFixed(decimals);\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport * as position from '../../lib/position';\nimport {\n get_horizontal_center_of_els,\n get_vertical_center_of_els,\n offset\n} from '../../lib/position';\nimport { DissectAreaEnum } from '../../enums/area';\n\n/**\n @todo Finalize converstion to position.get()!\n*/\nexport const styles = async (\n area: string,\n targetEl: HTMLElement,\n dissectionEl: HTMLElement\n) => {\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const SPECCER_MEASURE_SIZE = css.measureSize(dissectionEl);\n const SPECCER_MEASURE_SIZE_NEG = SPECCER_MEASURE_SIZE * -1;\n const _target_rect = targetEl.getBoundingClientRect();\n const _dissection_el_rect = dissectionEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left =\n _el_offset.left - _dissection_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(\n _el_offset.top,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _right_layout_position_left =\n _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(\n _el_offset.top,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_top =\n _el_offset.top - _dissection_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _dissection_el_rect,\n _target_rect\n )\n ) + 'px';\n const _bottom_layout_position_top =\n _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n const _positional_styles = await position.getRec(dissectionEl, targetEl);\n\n let _dissection_styles = {};\n\n if (area.indexOf(DissectAreaEnum.Left) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n const { left, top, height } = _positional_styles.toLeft({\n sourceWidth: SPECCER_MEASURE_SIZE\n });\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n const { left, top, height, width } = _positional_styles.fromTop();\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`,\n width: `${width}px`\n };\n } else {\n const { left, top } = _positional_styles.toLeft({\n center: true,\n modifier: SPECCER_PIN_SPACE\n });\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Right) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n const { left, top } = _positional_styles.fromRight({\n center: true,\n modifier: SPECCER_PIN_SPACE\n });\n\n _dissection_styles = {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Top) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + SPECCER_MEASURE_SIZE_NEG + 'px',\n left: _el_offset.left + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + 'px',\n left: _el_offset.left + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n }\n } else if (area.indexOf(DissectAreaEnum.Bottom) !== -1) {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + _target_rect.height + 'px',\n left: _el_offset.left + 'px',\n width: _target_rect.width + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n top: _el_offset.top + 'px',\n left: _el_offset.left + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n } else {\n if (area.indexOf(DissectAreaEnum.Full) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px'\n };\n } else if (area.indexOf(DissectAreaEnum.Enclose) !== -1) {\n _dissection_styles = {\n left: _el_offset.left + _target_rect.width + 'px',\n top: _el_offset.top + 'px',\n height: _target_rect.height + 'px',\n width: _target_rect.width + 'px'\n };\n } else {\n _dissection_styles = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n }\n }\n\n return _dissection_styles;\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as styles from '../lib/styles';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (\n area.indexOf(DissectAreaEnum.Full) === -1 &&\n area.indexOf(DissectAreaEnum.Enclose) === -1\n ) {\n _el.appendChild(_text_node);\n } else if (\n area.indexOf(DissectAreaEnum.Full) !== -1 ||\n area.indexOf(DissectAreaEnum.Enclose) !== -1\n ) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx(\n 'ph speccer dissection',\n _extra_class_names\n );\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = (sectionEl: HTMLElement) => {\n if (!sectionEl) return;\n\n const _dissection_els = sectionEl.querySelectorAll('[data-anatomy]');\n\n if (_dissection_els) {\n _dissection_els.forEach(async (targetEl: HTMLElement, targetIndex) => {\n if (!targetEl) return;\n\n const _area: string | null = targetEl.getAttribute('data-anatomy') || '';\n\n if (\n !_area ||\n _area === '' ||\n _area.indexOf(DissectAreaEnum.Outline) === -1\n )\n return;\n\n const _dissection_el = create(SPECCER_LITERALS[targetIndex], _area);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = await helpers.styles(\n _area,\n targetEl,\n _dissection_el\n );\n\n styles.add(_dissection_el, _dissection_styles);\n });\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { waitForFrame } from '../lib/debounce';\n\nconst create = (\n text: string | number = '',\n area: string | null = '',\n tag = 'span'\n) => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string | null = targetEl.getAttribute('data-speccer-measure');\n\n if (_area === '' || !_area) {\n return;\n }\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' ||\n _target_styles.opacity === '0' ||\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n if (_area.indexOf('width') !== -1) {\n if (_area.indexOf('bottom') !== -1) {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top + _target_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.width, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left + 'px',\n top: _el_offset_top - _measure_rect.height + 1 + 'px',\n width: _target_rect.width + 'px'\n });\n }\n } else if (_area.indexOf('height') !== -1) {\n if (_area.indexOf('right') !== -1) {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n styles.add(_measure_el, {\n left: _el_offset_left + _target_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n } else {\n const _measure_el = create(_target_rect.height, _area);\n\n document.body.appendChild(_measure_el);\n\n const _measure_rect = _measure_el.getBoundingClientRect();\n\n styles.add(_measure_el, {\n left: _el_offset_left - _measure_rect.width + 'px',\n top: _el_offset_top + 'px',\n height: _target_rect.height + 'px'\n });\n }\n }\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport {\n get_horizontal_center_of_els,\n get_vertical_center_of_els,\n offset\n} from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = async (\n area: string | null,\n targetEl: HTMLElement,\n speccerEl: HTMLElement\n) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left =\n _el_offset.left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _right_layout_position_left =\n _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _top_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_top =\n _el_offset.top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _bottom_layout_position_top =\n _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string | null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx(\n 'ph speccer typography',\n _extra_class_names\n );\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string | null = targetEl.getAttribute('data-speccer-typography');\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' ||\n _target_styles.opacity === '0' ||\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n targetEl.classList.add('is-specced');\n\n const _html = await helpers.template(targetEl);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = await helpers.position(_area, targetEl, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport * as resize from './lib/resize';\n\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: SpeccerFunctionType) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document\n .querySelectorAll(\n '[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n )\n .forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n dissect.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: SpeccerFunctionType) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 ||\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (\n !_script.hasAttribute('data-manual') &&\n !_script.hasAttribute('data-lazy')\n ) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport './interfaces/global';\nimport * as node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nexport const modes = browser;\n\nconst speccer = () => {\n node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll(\n '[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n );\n const _els_to_be_measured = document.querySelectorAll(\n '[data-speccer-measure]'\n );\n const _els_to_be_typography_specced = document.querySelectorAll(\n '[data-speccer-typography]'\n );\n const _els_to_be_dissected = document.querySelectorAll(\n '[data-anatomy-section]'\n );\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\nbrowser.activate(speccer);\n","import * as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (targetEl: HTMLElement): Promise<string> => {\n const _target_styles = await styles.get(targetEl);\n const _styles = css.getTypography(_target_styles);\n const _line_height =\n _styles['lineHeight'] !== 'normal'\n ? parseInt(_styles['lineHeight'], 10) / 16 + 'rem'\n : 'normal';\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${_line_height};</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","offset","targetEl","_target_rect","getBoundingClientRect","_el_offset_top","top","window","pageYOffset","_el_offset_left","left","pageXOffset","getRec","sourceEl","_source_rect","_target_offset","_target_offset_center","offsetWithCenter","_target_height","_target_width","_source_height","_source_width","toTop","center","sourceHeight","fromTop","toBottom","targetHeight","fromBottom","toLeft","sourceWidth","fromLeft","toRight","targetWidth","fromRight","create","text","tag","_el","document","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_target_styles","styles.get","display","opacity","visibility","_target_spacing_styles","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_target_pruned_spacing_styles","property","_value","css.getNumberValue","_speccer_el","_class_name","indexOf","replace","css.getClassNameFromCSSProperty","body","spacingEl","styles.add","helpers.position","SpeccerAreaEnum","DissectAreaEnum","decimal","number","decimals","parseFloat","toFixed","area","dissectionEl","SPECCER_PIN_SPACE","css.pinSpace","SPECCER_MEASURE_SIZE","SPECCER_MEASURE_SIZE_NEG","_dissection_el_rect","_el_offset","_left_layout_position_left","_left_layout_position_top","number.decimal","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","_positional_styles","position.getRec","_dissection_styles","Left","Full","Enclose","Right","Top","Bottom","textContent","n","_text_node","_extra_class_names","_class_names","classnames.cx","sectionEl","_dissection_els","querySelectorAll","targetIndex","_area","getAttribute","Outline","_dissection_el","helpers.styles","_measure_el","_measure_rect","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","args","callNow","clearTimeout","setTimeout","apply","debounce","removeEventListener","addEventListener","dom","readyState","lazy","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","dissect.element","manual","_script","currentScript","_speccer_script_src","hasAttribute","resize.activate","spacing","__spacing","dissect","measure","typography","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","_line_height","helpers.template","_position","speccerEl","_speccer_el_rect","_right_layout_position_left","_right_layout_position_top","modes","selector","call","e","remove","node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"speccer.js","sources":["src/lib/node.ts","src/lib/classnames.ts","src/lib/constants.ts","src/lib/css.ts","src/lib/wait.ts","src/lib/styles.ts","src/lib/position.ts","src/tasks/spec.ts","src/helpers/spacing/position.ts","node_modules/tslib/tslib.es6.js","src/lib/id.ts","src/lib/cardinal.ts","src/lib/bezier.ts","src/enums/area.ts","src/lib/classes/DrawSVGLine.ts","src/lib/classes/DrawSVGCurlyBracket.ts","src/lib/area.ts","src/helpers/dissect/styles.ts","src/tasks/dissect.ts","src/tasks/measure.ts","src/lib/number.ts","src/tasks/typography.ts","src/lib/debounce.ts","src/lib/resize.ts","src/browser.ts","src/index.ts","src/helpers/typography/template.ts","src/helpers/typography/position.ts"],"sourcesContent":["export const after = (el: HTMLElement | null, newSibling: HTMLElement) =>\n el && el.insertAdjacentElement('afterend', newSibling);\n\nexport const removeAll = (selector: string, el: Document = document) => {\n [].forEach.call(el.querySelectorAll(selector), function (e: HTMLElement) {\n e.remove();\n });\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport { ClassNamesObjectMapInterface } from 'interfaces/classnames';\n\nexport const set = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.add(cl));\n};\n\nexport const toggle = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.toggle(cl));\n};\n\nexport const remove = (el: HTMLElement, cls: string, avoid = 'noop') => {\n if (!el) return;\n\n if (!cls || (cls && cls.length === 0)) return;\n\n cls\n .trim()\n .split(' ')\n .filter((cl) => cl !== avoid)\n .forEach((cl) => el.classList.remove(cl));\n};\n\nexport const cx = (\n cls: string,\n cls_obj?: ClassNamesObjectMapInterface\n): string => {\n if (!cls) return '';\n\n if (!cls_obj && typeof cls !== 'string') {\n return `${Object.keys(cls)\n .filter((classname) => cls[classname])\n .join(' ')}`.trim();\n }\n\n return `${cls} ${\n cls_obj\n ? Object.keys(cls_obj)\n .filter((classname) => cls_obj[classname])\n .join(' ')\n : ''\n }`.trim();\n};\n","/* eslint no-console:0 */\n'use strict';\n\nexport const SPECCER_LITERALS = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];\n\nexport const SPECCER_TAGS_TO_AVOID = [\n 'TR',\n 'TH',\n 'TD',\n 'TBODY',\n 'THEAD',\n 'TFOOT'\n];\n\nexport const SPECCER_DEFAULT_PIN_SPACE = 48;\n\nexport const SPECCER_DEFAULT_PIN_SPACE_NEG = SPECCER_DEFAULT_PIN_SPACE * -1;\n\nexport const SPECCER_DEFAULT_MEASURE_SIZE = 8;\n\nexport const SPECCER_DEFAULT_MEASURE_SIZE_NEG =\n SPECCER_DEFAULT_MEASURE_SIZE * -1;\n\nexport const SPECCER_DEFAULT_LINE_WIDTH = 1;\n","/* eslint no-console:0 */\n'use strict';\nimport {\n SPECCER_DEFAULT_PIN_SPACE,\n SPECCER_DEFAULT_MEASURE_SIZE,\n SPECCER_DEFAULT_LINE_WIDTH\n} from './constants';\nimport {\n SpacingCSSPropertiesType,\n TypographyCSSPropertiesType\n} from '../types/css';\n\nexport const getNumberValue = (value: string): number => parseInt(value, 10);\n\nexport const normalizeNumberValue = (value: string | number): number => {\n const _value = parseFloat(value + '');\n\n return (_value >= 0 && _value < 1) || (_value <= 0 && _value > -1)\n ? 0\n : _value;\n};\n\nexport const getClassNameFromCSSProperty = (property: string) => {\n if (property.indexOf('Top') !== -1) {\n return property.replace('Top', ' top');\n } else if (property.indexOf('Right') !== -1) {\n return property.replace('Right', ' right');\n } else if (property.indexOf('Bottom') !== -1) {\n return property.replace('Bottom', ' bottom');\n } else if (property.indexOf('Left') !== -1) {\n return property.replace('Left', ' left');\n }\n\n return '';\n};\n\nexport const getSpacing = (\n style: SpacingCSSPropertiesType\n): SpacingCSSPropertiesType => {\n const {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n } = style;\n\n return {\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight\n };\n};\n\nexport const getTypography = (\n style: TypographyCSSPropertiesType\n): TypographyCSSPropertiesType => {\n const {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n } = style;\n\n return {\n lineHeight,\n letterSpacing,\n fontFamily,\n fontSize,\n fontStyle,\n fontVariationSettings,\n fontWeight\n };\n};\n\nexport const pinSpace = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-pin-space')\n ) || SPECCER_DEFAULT_PIN_SPACE;\n\nexport const measureSize = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-measure-size')\n ) || SPECCER_DEFAULT_MEASURE_SIZE;\n\nexport const lineWidth = (el: HTMLElement): number =>\n getNumberValue(\n getComputedStyle(el).getPropertyValue('--ph-speccer-line-width')\n ) || SPECCER_DEFAULT_LINE_WIDTH;\n","export const waitFor = (ms: number) =>\n new Promise((resolve) => setTimeout(resolve, ms));\n\nexport const waitForFrame = () => new Promise(requestAnimationFrame);\n","/* eslint no-console:0 */\n'use strict';\nimport { waitForFrame } from './wait';\n\nexport const add = async (el: HTMLElement, styles: [] | object) => {\n if (\n !el ||\n !styles ||\n typeof styles === 'string' ||\n typeof styles === 'number' ||\n typeof styles === 'boolean' ||\n (Array.isArray(styles) && styles.length === 0) ||\n (Object.keys(styles).length === 0 && styles.constructor === Object)\n ) {\n return;\n }\n\n await waitForFrame();\n\n if (Array.isArray(styles)) {\n styles.forEach(\n (style: { key: string; value: string }) =>\n (el.style[style.key] = style.value)\n );\n } else {\n Object.keys(styles).forEach((key) => (el.style[key] = styles[key]));\n }\n};\n\nexport const get = async (el: HTMLElement): Promise<CSSStyleDeclaration> => {\n await waitForFrame();\n\n return getComputedStyle(el, null);\n};\n","import { waitForFrame } from './wait';\n\nimport { PositionPropertiesType, PositionInputType } from '../types/position';\nimport { GetRecPropertiesInterface } from 'interfaces/position';\n\nexport const get_horizontal_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.width / 2 + targetRect.width / 2;\n\nexport const get_vertical_center_of_els = (\n modifier: number,\n startRect: DOMRect,\n targetRect: DOMRect\n): number => modifier - startRect.height / 2 + targetRect.height / 2;\n\nexport const offset = async (\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: _el_offset_top,\n left: _el_offset_left\n };\n};\n\nexport const offsetWithCenter = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<PositionPropertiesType> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_rect = targetEl.getBoundingClientRect();\n const _el_offset_top = _target_rect.top + window.pageYOffset;\n const _el_offset_left = _target_rect.left + window.pageXOffset;\n\n return {\n height: _target_rect.height,\n width: _target_rect.width,\n top: get_vertical_center_of_els(_el_offset_top, _source_rect, _target_rect),\n left: get_horizontal_center_of_els(\n _el_offset_left,\n _source_rect,\n _target_rect\n )\n };\n};\n\nexport const getRec = async (\n sourceEl: HTMLElement,\n targetEl: HTMLElement\n): Promise<GetRecPropertiesInterface> => {\n await waitForFrame();\n\n const _source_rect = sourceEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n const _target_offset_center = await offsetWithCenter(sourceEl, targetEl);\n const _target_height = _target_offset.height;\n const _target_width = _target_offset.width;\n const _source_height = _source_rect.height;\n const _source_width = _source_rect.width;\n\n return {\n absolute: (): PositionPropertiesType => {\n return {\n top: _target_offset.top,\n left: _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n toTop: ({\n center = false,\n sourceHeight = _source_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + sourceHeight + modifier,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromTop: ({\n center = false,\n sourceHeight = _source_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top - sourceHeight - modifier,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toBottom: ({\n center = false,\n sourceHeight = _source_height,\n targetHeight = _target_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight - (sourceHeight + modifier),\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n fromBottom: ({\n center = false,\n targetHeight = _target_height,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: _target_offset.top + targetHeight + modifier,\n left: center ? _target_offset_center.left : _target_offset.left,\n height: _target_height,\n width: _target_width\n };\n },\n\n toLeft: ({\n center = false,\n sourceWidth = _source_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + sourceWidth + modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n fromLeft: ({\n center = false,\n sourceWidth = _source_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left - sourceWidth - modifier,\n height: _target_height,\n width: _target_width\n };\n },\n\n toRight: ({\n center = false,\n sourceWidth = _source_width,\n targetWidth = _target_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth - (sourceWidth + modifier),\n height: _target_height,\n width: _target_width\n };\n },\n\n fromRight: ({\n center = false,\n targetWidth = _target_width,\n modifier = 0\n }: PositionInputType = {}): PositionPropertiesType => {\n return {\n top: center ? _target_offset_center.top : _target_offset.top,\n left: _target_offset.left + targetWidth + modifier,\n height: _target_height,\n width: _target_width\n };\n }\n };\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as css from '../lib/css';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/spacing';\n\nexport const create = (text: string | number = '', tag = 'span') => {\n const _el = document.createElement(tag);\n const _text_content = document.createTextNode(text + '');\n\n _el.appendChild(_text_content);\n _el.setAttribute('title', text + 'px');\n classnames.set(_el, 'ph speccer spacing');\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' ||\n _target_styles.opacity === '0' ||\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n const _target_spacing_styles = css.getSpacing(_target_styles);\n const _target_pruned_spacing_styles = Object.keys(\n _target_spacing_styles\n ).filter((property) => {\n const _value = _target_spacing_styles[property];\n\n return _value !== '0px';\n });\n\n if (_target_pruned_spacing_styles.length === 0) return;\n\n _target_pruned_spacing_styles.forEach(async (property) => {\n const _value = css.getNumberValue(_target_spacing_styles[property]);\n const _speccer_el = create(_value);\n const _class_name = css.getClassNameFromCSSProperty(property);\n\n classnames.set(_speccer_el, _class_name);\n document.body.appendChild(_speccer_el);\n\n targetEl.classList.add('is-specced');\n await helpers.position(property, _value, _speccer_el, targetEl);\n });\n};\n","import * as styles from '../../lib/styles';\nimport { offset } from '../../lib/position';\nimport { waitForFrame } from '../../lib/wait';\n\nexport const position = async (\n property: string,\n value: number,\n spacingEl: HTMLElement,\n targetEl: HTMLElement\n) => {\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n const _target_offset = await offset(targetEl);\n\n if (property === 'marginTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top - value + 'px'\n });\n }\n\n if (property === 'marginRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + parseInt(_target_rect.width + '', 10) + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'marginBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + parseInt(_target_rect.height + '', 10) + 'px'\n });\n }\n\n if (property === 'marginLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left - value + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingTop') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingBottom') {\n styles.add(spacingEl, {\n height: `${value}px`,\n width: _target_rect.width + 'px',\n left: _target_offset.left + 'px',\n top:\n _target_offset.top +\n (parseInt(_target_rect.height + '', 10) - value) +\n 'px'\n });\n }\n\n if (property === 'paddingRight') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left:\n _target_offset.left +\n (parseInt(_target_rect.width + '', 10) - value) +\n 'px',\n top: _target_offset.top + 'px'\n });\n }\n\n if (property === 'paddingLeft') {\n styles.add(spacingEl, {\n height: _target_rect.height + 'px',\n width: `${value}px`,\n left: _target_offset.left + 'px',\n top: _target_offset.top + 'px'\n });\n }\n};\n","/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n var desc = Object.getOwnPropertyDescriptor(m, k);\r\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n desc = { enumerable: true, get: function() { return m[k]; } };\r\n }\r\n Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar || !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n","/* eslint no-console:0 */\n'use strict';\n\nexport const uniqueID = () => '_' + Math.random().toString(36).substring(2, 11);\n","/* eslint no-console:0 */\n'use strict';\n\nimport { waitForFrame } from './wait';\n\n/**\n * Returns the angle between two sets of coordinates\n *\n * See {@link https://stackoverflow.com/a/9614122/460422}\n * @param cx {number}\n * @param cy {number}\n * @param ex {number}\n * @param ey {number}\n * @param [normalize=true] {bool} If the angle output should be normalized to return value between 0° and 360°\n * @returns {number} The angle of the given coordinates\n */\nexport const angle = (\n cx: number,\n cy: number,\n ex: number,\n ey: number,\n normalize = true\n) => {\n if (!cx || !cy || !ex || !ey) {\n throw new SyntaxError('Missing input for `angle`');\n }\n\n if (\n typeof cx !== 'number' ||\n typeof cy !== 'number' ||\n typeof ex !== 'number' ||\n typeof ey !== 'number'\n ) {\n throw new TypeError(\n `Parameters for \\`angle\\` does not have required type. Requires number! Got: ${typeof cx} ${typeof cy} ${typeof ex} ${typeof ey}`\n );\n }\n\n const dy = ey - cy;\n const dx = ex - cx;\n\n let theta = Math.atan2(dy, dx); // range (-PI, PI]\n\n theta *= 180 / Math.PI; // rads to degs, range (-180, 180]\n\n if (normalize && theta < 0) theta = 360 + theta; // range [0, 360)\n\n return theta;\n};\n\nexport const coords = {\n top: (rect: DOMRect) => rect.top,\n right: (rect: DOMRect) => rect.left + rect.width,\n bottom: (rect: DOMRect) => rect.top + rect.height,\n left: (rect: DOMRect) => rect.left,\n center_x: (rect: DOMRect) => rect.left + rect.width / 2,\n center_y: (rect: DOMRect) => rect.top + rect.height / 2\n};\n\nexport const xy = {\n center: (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.center_y(rect)\n }),\n top: (rect: DOMRect) => ({ x: coords.center_x(rect), y: coords.top(rect) }),\n right: (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.center_y(rect)\n }),\n bottom: (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.bottom(rect)\n }),\n left: (rect: DOMRect) => ({ x: coords.left(rect), y: coords.center_y(rect) }),\n 'right-top': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.top(rect)\n }),\n 'right-bottom': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.bottom(rect)\n }),\n 'left-top': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.top(rect)\n }),\n 'left-bottom': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.bottom(rect)\n }),\n 'top-left': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.top(rect)\n }),\n 'top-right': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.top(rect)\n }),\n 'bottom-left': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.bottom(rect)\n }),\n 'bottom-right': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.bottom(rect)\n }),\n 'top-center': (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.top(rect)\n }),\n 'right-center': (rect: DOMRect) => ({\n x: coords.right(rect),\n y: coords.center_y(rect)\n }),\n 'bottom-center': (rect: DOMRect) => ({\n x: coords.center_x(rect),\n y: coords.bottom(rect)\n }),\n 'left-center': (rect: DOMRect) => ({\n x: coords.left(rect),\n y: coords.center_y(rect)\n })\n};\n\nexport const get_coords_pair_from_objects = async (\n el1: HTMLElement,\n el2: HTMLElement,\n pos1 = 'center',\n pos2 = 'center'\n) => {\n if (!el1 || !el2) {\n throw 'No element given';\n }\n\n const { x: x1, y: y1 } = await intrinsic_coords(el1, pos1);\n const { x: x2, y: y2 } = await intrinsic_coords(el2, pos2);\n\n return {\n x1,\n y1,\n x2,\n y2\n };\n};\n\nexport const intrinsic_coords = async (el: HTMLElement, pos = 'center') => {\n if (!pos) {\n throw 'No position given';\n }\n\n if (typeof pos !== 'string') {\n throw `The position given is not the required type: pos: ${typeof pos}`;\n }\n\n const _allowed_positions = [\n 'center',\n 'left',\n 'right',\n 'top',\n 'bottom',\n 'right-top',\n 'right-bottom',\n 'left-top',\n 'left-bottom',\n 'top-left',\n 'top-right',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'right-center',\n 'bottom-center',\n 'left-center'\n ];\n\n if (!_allowed_positions.includes(pos)) {\n throw `The position given does not match allowed positions to use! Valid positions are: ${_allowed_positions.join(\n ', '\n )}`;\n }\n\n await waitForFrame();\n\n const _el_rect = el.getBoundingClientRect();\n\n return xy[pos](_el_rect);\n};\n\nexport const direction_of_element = async ({ start, stop, crude = false }) => {\n const { x1, y1, x2, y2 } = await get_coords_pair_from_objects(start, stop);\n const _angle = angle(x1, y1, x2, y2);\n const _direction = crude\n ? cardinal_direction_crude(_angle)\n : cardinal_direction(_angle);\n\n return _direction;\n};\n\n/**\n * Gives you the cardinal direction based on degrees\n * Note! The degrees start at 0, which is EAST (orignally, north should be 0, but here, north is 270),\n * and we travel clockwise\n */\nexport const cardinal_direction = (degrees: number): string => {\n if (degrees > 360) throw RangeError('parameter cannot exceed 360');\n\n if (degrees < 0) throw RangeError('parameter cannot be lower than 0');\n\n if (degrees >= 0 && degrees <= 22.5) {\n return 'east';\n } else if (degrees >= 22.5 && degrees <= 67.5) {\n return 'south-east';\n } else if (degrees >= 67.5 && degrees <= 112.5) {\n return 'south';\n } else if (degrees >= 112.5 && degrees <= 157.5) {\n return 'south-west';\n } else if (degrees >= 157.5 && degrees <= 202.5) {\n return 'west';\n } else if (degrees >= 202.5 && degrees <= 247.5) {\n return 'north-west';\n } else if (degrees >= 247.5 && degrees <= 292.5) {\n return 'north';\n } else if (degrees >= 292.5 && degrees <= 337.5) {\n return 'north-east';\n } else {\n return 'east';\n }\n};\n\n/**\n * Note! The degrees start at 0, which is EAST (orignally, north should be 0, but here, north is 270),\n * and we travel clockwise\n */\nexport const cardinal_direction_crude = (degrees: number): string => {\n if (degrees > 360) throw RangeError('parameter cannot exceed 360');\n\n if (degrees < 0) throw RangeError('parameter cannot be lower than 0');\n\n if (degrees >= 45 && degrees <= 135) {\n return 'south';\n } else if (degrees > 135 && degrees <= 225) {\n return 'west';\n } else if (degrees > 225 && degrees <= 315) {\n return 'north';\n } else if (degrees > 315) {\n return 'east';\n } else {\n return 'east';\n }\n};\n","import {\n BezierPathOptions,\n CreateCoordinatesForCurveCoordParamType,\n CreateCoordinatesForCurveOptionsParamType,\n CurlyBezierPathOptions\n} from 'types/bezier';\nimport * as cardinal from './cardinal';\n\nexport const createCoordinatesForCurve = (\n coords: CreateCoordinatesForCurveCoordParamType,\n options: CreateCoordinatesForCurveOptionsParamType\n) => {\n const { x1, x2, y1, y2 } = coords;\n const { direct = false, firstSet = false, direction } = options;\n const firstPoint = { x: x1, y: y1 }; // The first point of line\n const lastPoint = { x: x2, y: y2 }; // The last point of line\n\n let firstControl = { x: x1 + (x2 - x1) / 2, y: y1 }; // Controller for p0\n let lastControl = { x: x1 + (x2 - x1) / 2, y: y2 }; // Controller for p1\n\n if (direct) {\n // first part of the curly bracket\n\n if (firstSet) {\n if (direction === 'west') {\n firstControl = { x: x1 - 32, y: y1 - 16 / 2 }; // Controller for p0\n lastControl = { x: x2 + 32, y: y2 }; // Controller for p1\n } else if (direction === 'south') {\n firstControl = { x: x1 - 16 / 2, y: y1 + 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 - 32 }; // Controller for p1\n } else if (direction === 'east') {\n firstControl = { x: x1 + 32, y: y1 - 16 / 2 }; // Controller for p0\n lastControl = { x: x2 - 32, y: y2 }; // Controller for p1\n } else {\n firstControl = { x: x1 - 16 / 2, y: y1 - 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 + 32 }; // Controller for p1\n }\n } else {\n if (direction === 'west') {\n firstControl = { x: x1 - 32, y: y1 + 16 / 2 }; // Controller for p0\n lastControl = { x: x2 + 32, y: y2 }; // Controller for p1\n } else if (direction === 'south') {\n firstControl = { x: x1 + 16 / 2, y: y1 + 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 - 32 }; // Controller for p1\n } else if (direction === 'east') {\n firstControl = { x: x1 + 32, y: y1 + 16 / 2 }; // Controller for p0\n lastControl = { x: x2 - 32, y: y2 }; // Controller for p1\n } else {\n firstControl = { x: x1 + 16 / 2, y: y1 - 32 }; // Controller for p0\n lastControl = { x: x2, y: y2 + 32 }; // Controller for p1\n }\n }\n }\n\n return {\n firstPoint,\n firstControl,\n lastPoint,\n lastControl\n };\n};\n\nexport const getCurlySVGPath = async (\n startEl: HTMLElement,\n stopEl: HTMLElement,\n options: CurlyBezierPathOptions\n) => {\n const { pos1, pos2, firstSet = false, direction } = options;\n const { x1, y1, x2, y2 } = await cardinal.get_coords_pair_from_objects(\n startEl,\n stopEl,\n pos1,\n pos2\n );\n const x1modifier = 0;\n const y1modifier = 0;\n\n let x2modifier = 0;\n let y2modifier = 0;\n\n // make a gap between the pin and the bracket center\n if (direction == 'north') {\n y2modifier = 8;\n } else if (direction == 'west') {\n x2modifier = 8;\n } else if (direction == 'east') {\n x2modifier = -8;\n } else if (direction == 'south') {\n y2modifier = -8;\n }\n\n const _coordinates = createCoordinatesForCurve(\n {\n x1: x1 + x1modifier,\n x2: x2 + x2modifier,\n y1: y1 + y1modifier,\n y2: y2 + y2modifier\n },\n {\n direct: true,\n firstSet,\n direction\n }\n );\n const { firstPoint, firstControl, lastControl, lastPoint } = _coordinates;\n\n return (\n 'M ' +\n firstPoint.x +\n ' ' +\n firstPoint.y +\n 'C ' +\n firstControl.x +\n ' ' +\n firstControl.y +\n ', ' +\n lastControl.x +\n ' ' +\n lastControl.y +\n ', ' +\n lastPoint.x +\n ' ' +\n lastPoint.y\n );\n};\n\nexport const getSVGPath = async (\n startEl: HTMLElement,\n stopEl: HTMLElement,\n options: BezierPathOptions\n) => {\n const { pos1, pos2 } = options;\n const { x1, y1, x2, y2 } = await cardinal.get_coords_pair_from_objects(\n startEl,\n stopEl,\n pos1,\n pos2\n );\n const _coordinates = createCoordinatesForCurve(\n { x1, x2, y1, y2 },\n {\n direction: ''\n }\n );\n const { firstPoint, firstControl, lastControl, lastPoint } = _coordinates;\n\n return (\n 'M ' +\n firstPoint.x +\n ' ' +\n firstPoint.y +\n 'C ' +\n firstControl.x +\n ' ' +\n firstControl.y +\n ', ' +\n lastControl.x +\n ' ' +\n lastControl.y +\n ', ' +\n lastPoint.x +\n ' ' +\n lastPoint.y\n );\n};\n\nexport const getPositionsForSVGPath = (direction: string) => {\n let _pos1: string;\n let _pos2: string;\n\n switch (direction) {\n case 'east': {\n _pos1 = 'right';\n _pos2 = 'left';\n break;\n }\n case 'south': {\n _pos1 = 'bottom';\n _pos2 = 'top';\n break;\n }\n\n case 'west': {\n _pos1 = 'left';\n _pos2 = 'right';\n break;\n }\n case 'north':\n default: {\n _pos1 = 'top';\n _pos2 = 'bottom';\n break;\n }\n }\n\n return {\n pos1: _pos1,\n pos2: _pos2\n };\n};\n\nexport const getPositionsForCurlySVGPath = (direction: string) => {\n let _path1_pos1: string;\n let _path1_pos2: string;\n let _path2_pos1: string;\n let _path2_pos2: string;\n\n switch (direction) {\n case 'east': {\n _path1_pos1 = 'right-top';\n _path1_pos2 = 'left-center';\n _path2_pos1 = 'right-bottom';\n _path2_pos2 = 'left-center';\n break;\n }\n case 'south': {\n _path1_pos1 = 'bottom-left';\n _path1_pos2 = 'top-center';\n _path2_pos1 = 'bottom-right';\n _path2_pos2 = 'top-center';\n break;\n }\n case 'west': {\n _path1_pos1 = 'left-top';\n _path1_pos2 = 'right-center';\n _path2_pos1 = 'left-bottom';\n _path2_pos2 = 'right-center';\n break;\n }\n case 'north':\n default: {\n _path1_pos1 = 'top-left';\n _path1_pos2 = 'bottom-center';\n _path2_pos1 = 'top-right';\n _path2_pos2 = 'bottom-center';\n break;\n }\n }\n\n return {\n path1pos1: _path1_pos1,\n path1pos2: _path1_pos2,\n path2pos1: _path2_pos1,\n path2pos2: _path2_pos2\n };\n};\n","/* eslint-disable no-unused-vars */\n\nexport enum SpeccerAreaEnum {\n Empty = '',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n\nexport enum DissectAreaEnum {\n Outline = 'outline',\n Enclose = 'enclose',\n Full = 'full',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n SVG = 'svg',\n Curly = 'curly',\n}\n\nexport enum MeasureAreaEnum {\n Width = 'width',\n Height = 'height',\n Left = 'left',\n Right = 'right',\n Bottom = 'bottom',\n Top = 'top',\n}\n","'use strict';\n\nimport { uniqueID } from '../id';\nimport * as cardinal from '../cardinal';\nimport { getPositionsForSVGPath, getSVGPath } from 'lib/bezier';\n\nexport class DrawSVGLine {\n #canvas: HTMLElement | SVGElement | null;\n #originalPathElement: HTMLElement | SVGPathElement | null;\n startElement: HTMLElement;\n stopElement: HTMLElement;\n line: SVGPathElement;\n\n constructor(startElement: HTMLElement, stopElement: HTMLElement) {\n this.#init(startElement, stopElement);\n }\n\n #init(startElement: HTMLElement, stopElement: HTMLElement) {\n if (!startElement || !stopElement) {\n throw 'Missing inputs startElement and stopElement';\n }\n\n if (!document.body.contains(stopElement)) {\n throw 'stopElement is not in the DOM';\n }\n\n if (!document.body.contains(startElement)) {\n throw 'startElement is not in the DOM';\n }\n\n this.startElement = startElement;\n this.stopElement = stopElement;\n\n this.#canvas = document.getElementById('ph-speccer-svg');\n this.#originalPathElement = document.getElementById('ph-speccer-path');\n\n if (!this.#originalPathElement || !this.#canvas) {\n throw 'Missing required SVG element to draw lines. Please see the documentation';\n }\n\n this.connect();\n }\n\n connect() {\n this.draw(this.#originalPathElement as SVGPathElement);\n }\n\n async draw(path: SVGPathElement) {\n if (!path) {\n throw 'No path given to draw!';\n }\n\n const _id = uniqueID();\n const _path_el_id = `ph_draw_path-path-${_id}`;\n const _new_path = path.cloneNode(false) as SVGPathElement;\n\n _new_path.setAttribute('id', _path_el_id);\n _new_path.setAttribute(\n 'data-start-el',\n this.startElement.getAttribute('id') || 'no-id-found'\n );\n _new_path.classList.remove('original');\n _new_path.classList.add('speccer');\n\n if (path.parentNode) {\n this.line = path.parentNode.insertBefore(_new_path, path.nextSibling);\n } else {\n throw 'No parentNode found for path';\n }\n\n const _direction = await cardinal.direction_of_element({\n start: this.startElement,\n stop: this.stopElement,\n crude: true\n });\n const { pos1, pos2 } = getPositionsForSVGPath(_direction);\n const _d = await getSVGPath(this.startElement, this.stopElement, {\n pos1,\n pos2\n });\n\n this.line.setAttribute('data-direction', _direction);\n this.line.setAttribute('data-pos1', pos1);\n this.line.setAttribute('data-pos2', pos2);\n\n this.line.setAttribute('d', _d); //svg attributes\n }\n}\n\nwindow.DrawSVGLine = DrawSVGLine;\n","'use strict';\n\nimport { uniqueID } from '../id';\nimport * as cardinal from '../cardinal';\nimport { getCurlySVGPath, getPositionsForCurlySVGPath } from 'lib/bezier';\n\nexport class DrawSVGCurlyBracket {\n #canvas: HTMLElement | SVGElement | null;\n #originalPathElement: HTMLElement | SVGPathElement | null;\n startElement: HTMLElement;\n stopElement: HTMLElement;\n firstPathElement: SVGPathElement;\n secondPathElement: SVGPathElement;\n\n constructor(startElement: HTMLElement, stopElement: HTMLElement) {\n this.#init(startElement, stopElement);\n }\n\n #init(startElement: HTMLElement, stopElement: HTMLElement) {\n if (!startElement || !stopElement) {\n throw 'Missing inputs startElement and stopElement';\n }\n\n if (!document.body.contains(stopElement)) {\n throw 'stopElement is not in the DOM';\n }\n\n if (!document.body.contains(startElement)) {\n throw 'startElement is not in the DOM';\n }\n\n this.startElement = startElement;\n this.stopElement = stopElement;\n\n this.#canvas = document.getElementById('ph-speccer-svg');\n this.#originalPathElement = document.getElementById('ph-speccer-path');\n\n if (!this.#originalPathElement || !this.#canvas) {\n throw 'Missing required SVG element to draw lines. Please see the documentation';\n }\n\n this.connect();\n }\n\n connect() {\n this.draw(this.#originalPathElement as SVGPathElement);\n }\n\n #getPathElement(path: SVGPathElement) {\n if (!path) {\n throw 'No path given to #getPathElement!';\n }\n\n const _id = uniqueID();\n const _path_el_id = `ph_draw_path-path-${_id}`;\n const _new_path = path.cloneNode(false) as SVGPathElement;\n\n _new_path.setAttribute(\n 'data-start-el',\n this.startElement.getAttribute('id') || 'no-id-found'\n );\n _new_path.setAttribute('id', _path_el_id);\n _new_path.classList.remove('original');\n _new_path.classList.add('speccer');\n\n return _new_path;\n }\n\n async draw(path: SVGPathElement) {\n if (!path) {\n throw 'No path given to draw!';\n }\n\n const _first_path_element = this.#getPathElement(path);\n const _second_path_element = this.#getPathElement(path);\n\n if (path.parentNode) {\n this.firstPathElement = path.parentNode.insertBefore(\n _first_path_element,\n path.nextSibling\n );\n this.secondPathElement = path.parentNode.insertBefore(\n _second_path_element,\n path.nextSibling\n );\n } else {\n throw 'No parentNode found for path';\n }\n\n const _direction = await cardinal.direction_of_element({\n stop: this.stopElement,\n start: this.startElement,\n crude: true\n });\n const { path1pos1, path1pos2, path2pos1, path2pos2 } =\n getPositionsForCurlySVGPath(_direction);\n const _first_path_d = await getCurlySVGPath(\n this.startElement,\n this.stopElement,\n {\n pos1: path1pos1,\n pos2: path1pos2,\n firstSet: true,\n direction: _direction\n }\n );\n const _second_path_d = await getCurlySVGPath(\n this.startElement,\n this.stopElement,\n {\n pos1: path2pos1,\n pos2: path2pos2,\n direction: _direction\n }\n );\n\n this.firstPathElement.setAttribute('data-direction', _direction);\n this.firstPathElement.setAttribute('data-pos1', path1pos1);\n this.firstPathElement.setAttribute('data-pos2', path1pos2);\n this.firstPathElement.setAttribute('d', _first_path_d); //svg attributes\n this.secondPathElement.setAttribute('data-direction', _direction);\n this.secondPathElement.setAttribute('data-pos1', path2pos1);\n this.secondPathElement.setAttribute('data-pos2', path2pos2);\n this.secondPathElement.setAttribute('d', _second_path_d); //svg attributes\n }\n}\n\nwindow.DrawSVGCurlyBracket = DrawSVGCurlyBracket;\n","import { DissectAreaEnum, MeasureAreaEnum } from 'enums/area';\n\nexport const getAreasFromString = (areaString: string): string[] =>\n areaString.split(' ');\n\nexport const isLeftArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Left);\n};\n\nexport const isRightArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Right);\n};\n\nexport const isTopArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Top);\n};\n\nexport const isBottomArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Bottom);\n};\n\nexport const isFullArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Full);\n};\n\nexport const isEncloseArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(DissectAreaEnum.Enclose);\n};\n\nexport const isHeightArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(MeasureAreaEnum.Height);\n};\n\nexport const isWidthArea = (areaString: string): boolean => {\n const areas = getAreasFromString(areaString);\n\n return areas.includes(MeasureAreaEnum.Width);\n};\n\nexport const useSVG = (areaString: string): boolean =>\n areaString.indexOf(DissectAreaEnum.Curly) === -1 &&\n areaString.indexOf(DissectAreaEnum.Full) === -1 &&\n areaString.indexOf(DissectAreaEnum.Enclose) === -1 &&\n areaString.indexOf(DissectAreaEnum.SVG) !== -1;\n\nexport const isCurly = (areaString: string): boolean =>\n areaString.indexOf(DissectAreaEnum.Full) !== -1 &&\n areaString.indexOf(DissectAreaEnum.Curly) !== -1;\n","import * as css from '../../lib/css';\nimport * as position from '../../lib/position';\nimport {\n isBottomArea,\n isEncloseArea,\n isFullArea,\n isLeftArea,\n isRightArea\n} from 'lib/area';\nimport { DissectStylesOptionsType } from 'types/bezier';\n\nexport const styles = async (\n area: string,\n targetEl: HTMLElement,\n dissectionEl: HTMLElement,\n options: DissectStylesOptionsType\n) => {\n const { isCurly } = options;\n const SPECCER_PIN_SPACE = css.pinSpace(dissectionEl);\n const SPECCER_MEASURE_SIZE = css.measureSize(dissectionEl);\n const _positional_styles = await position.getRec(dissectionEl, targetEl);\n\n if (isEncloseArea(area)) {\n const { left, top, height, width } = _positional_styles.absolute();\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`,\n width: `${width}px`\n };\n }\n\n if (isLeftArea(area)) {\n if (isFullArea(area) && !isCurly) {\n const { left, top, height } = _positional_styles.fromLeft({\n sourceWidth: SPECCER_MEASURE_SIZE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n };\n } else {\n const { left, top } = _positional_styles.fromLeft({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (isRightArea(area)) {\n if (isFullArea(area) && !isCurly) {\n const { left, top, height } = _positional_styles.fromRight({\n center: false\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n };\n } else {\n const { left, top } = _positional_styles.fromRight({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else if (isBottomArea(area)) {\n if (isFullArea(area) && !isCurly) {\n const { left, top, width } = _positional_styles.fromBottom({\n center: false\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n };\n } else {\n const { left, top } = _positional_styles.fromBottom({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n } else {\n if (isFullArea(area) && !isCurly) {\n const { left, top, width } = _positional_styles.fromTop({\n center: false\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n };\n } else {\n const { left, top } = _positional_styles.fromTop({\n center: true,\n modifier: isCurly ? SPECCER_PIN_SPACE / 1.5 : SPECCER_PIN_SPACE\n });\n\n return {\n left: `${left}px`,\n top: `${top}px`\n };\n }\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as styles from '../lib/styles';\nimport { DrawSVGLine, DrawSVGCurlyBracket } from '../lib/classes';\nimport * as classnames from '../lib/classnames';\nimport { DissectAreaEnum } from '../enums/area';\nimport * as helpers from '../helpers/dissect';\nimport { SPECCER_LITERALS } from '../lib/constants';\nimport { isCurly, isEncloseArea, isFullArea, useSVG } from 'lib/area';\n\nexport const create = (textContent = '', area: string, n = 'span') => {\n const _el = document.createElement(n);\n const _text_node = document.createTextNode(textContent);\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n if (\n (!isFullArea(area) && !isEncloseArea(area)) ||\n (isFullArea(area) && isCurly(area))\n ) {\n _el.appendChild(_text_node);\n } else if (isFullArea(area) || isEncloseArea(area)) {\n _el.setAttribute('data-dissection-counter', textContent);\n }\n\n const _class_names = classnames.cx(\n 'ph speccer dissection',\n _extra_class_names\n );\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = (sectionEl: HTMLElement) => {\n if (!sectionEl) return;\n\n const _dissection_els = sectionEl.querySelectorAll('[data-anatomy]');\n\n if (_dissection_els) {\n let _index_to_use = 0;\n\n _dissection_els.forEach(async (targetEl: HTMLElement, targetIndex) => {\n if (!targetEl) return Promise.resolve();\n\n const _areas_string: string = targetEl.getAttribute('data-anatomy') || '';\n\n if (\n !_areas_string ||\n _areas_string === '' ||\n _areas_string.indexOf(DissectAreaEnum.Outline) === -1\n )\n return;\n\n /**\n * If we're running out of literals to use,\n * make a new one with uppercase and lower case pairs\n */\n let _literal_to_use = SPECCER_LITERALS[targetIndex];\n\n if (!_literal_to_use) {\n _literal_to_use = `${SPECCER_LITERALS[_index_to_use]}${SPECCER_LITERALS[\n _index_to_use\n ].toLowerCase()}`;\n _index_to_use++;\n }\n\n const _dissection_el = create(_literal_to_use, _areas_string);\n\n document.body.appendChild(_dissection_el);\n\n const _dissection_styles = await helpers.styles(\n _areas_string,\n targetEl,\n _dissection_el,\n {\n isCurly: isCurly(_areas_string)\n }\n );\n\n await styles.add(_dissection_el, _dissection_styles);\n\n if (useSVG(_areas_string)) {\n new DrawSVGLine(targetEl, _dissection_el);\n } else if (isCurly(_areas_string)) {\n new DrawSVGCurlyBracket(targetEl, _dissection_el);\n }\n });\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport { isBottomArea, isHeightArea, isRightArea, isWidthArea } from 'lib/area';\nimport * as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport { waitForFrame } from '../lib/wait';\nimport * as position from '../lib/position';\nimport { SPECCER_DEFAULT_MEASURE_SIZE_NEG } from 'lib/constants';\n\nconst create = (\n text: string | number = '',\n area: string | null = '',\n tag = 'span'\n) => {\n const _el = document.createElement(tag);\n\n _el.setAttribute('title', text + 'px');\n _el.setAttribute('data-measure', parseInt(text + '', 10) + 'px');\n\n classnames.set(_el, `ph speccer measure ${area}`);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _areas_string: string | null = targetEl.getAttribute(\n 'data-speccer-measure'\n );\n\n if (_areas_string === '' || !_areas_string) {\n return;\n }\n\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' ||\n _target_styles.opacity === '0' ||\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n await waitForFrame();\n\n const _target_rect = targetEl.getBoundingClientRect();\n\n if (isWidthArea(_areas_string)) {\n if (isBottomArea(_areas_string)) {\n const _measure_el = create(_target_rect.width, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, width } = _positional_styles.fromBottom({\n center: false\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n });\n } else {\n const _measure_el = create(_target_rect.width, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, width } = _positional_styles.fromTop({\n center: false,\n modifier: SPECCER_DEFAULT_MEASURE_SIZE_NEG\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n width: `${width}px`\n });\n }\n } else if (isHeightArea(_areas_string)) {\n if (isRightArea(_areas_string)) {\n const _measure_el = create(_target_rect.height, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, height } = _positional_styles.fromRight({\n center: false\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n });\n } else {\n const _measure_el = create(_target_rect.height, _areas_string);\n\n document.body.appendChild(_measure_el);\n\n const _positional_styles = await position.getRec(_measure_el, targetEl);\n const { left, top, height } = _positional_styles.fromLeft({\n center: false,\n modifier: SPECCER_DEFAULT_MEASURE_SIZE_NEG\n });\n\n await styles.add(_measure_el, {\n left: `${left}px`,\n top: `${top}px`,\n height: `${height}px`\n });\n }\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nexport const decimal = (number: string | number, decimals = 3): string =>\n parseFloat(number + '').toFixed(decimals);\n","/* eslint no-console:0 */\n'use strict';\n\nimport * as classnames from '../lib/classnames';\nimport * as styles from '../lib/styles';\nimport * as helpers from '../helpers/typography';\n\nexport const create = (html: string, area: string | null) => {\n const _el = document.createElement('div');\n const _extra_class_names = {};\n\n if (area !== null && area !== '') {\n _extra_class_names[area] = true;\n }\n\n const _class_names = classnames.cx(\n 'ph speccer typography',\n _extra_class_names\n );\n\n _el.innerHTML = html;\n\n classnames.set(_el, _class_names);\n\n return _el;\n};\n\nexport const element = async (targetEl: HTMLElement) => {\n if (!targetEl) return;\n\n const _area: string | null = targetEl.getAttribute('data-speccer-typography');\n const _target_styles = await styles.get(targetEl);\n\n if (\n _target_styles.display === 'none' ||\n _target_styles.opacity === '0' ||\n _target_styles.visibility === 'hidden'\n ) {\n return;\n }\n\n targetEl.classList.add('is-specced');\n\n const _html = await helpers.template(targetEl);\n const _speccer_el = create(_html, _area);\n\n document.body.appendChild(_speccer_el);\n\n const _position = await helpers.position(_area, targetEl, _speccer_el);\n\n styles.add(_speccer_el, _position);\n};\n","/* eslint @typescript-eslint/no-explicit-any: [\"error\", { \"fixToUnknown\": true }] */\n'use strict';\n\nimport { DebounceAnyFunctionType } from 'types/debounce';\n\nconst debounce = function (\n func: DebounceAnyFunctionType,\n wait: number,\n immediate?: boolean\n): DebounceAnyFunctionType {\n let timeout: null | ReturnType<typeof setTimeout>;\n\n return function (context: unknown, ...args: unknown[]) {\n const later = function () {\n timeout = null;\n\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n\n if (timeout) {\n clearTimeout(timeout);\n }\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(context, args);\n };\n};\n\nexport default debounce;\n","'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport debounce from './debounce';\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const speccerEventFunc = () =>\n debounce(() => {\n speccer();\n }, 300);\n\n window.removeEventListener('resize', speccerEventFunc);\n window.addEventListener('resize', speccerEventFunc);\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport { SpeccerFunctionType } from 'types/speccer';\n\nimport * as resize from './lib/resize';\n\nimport * as spec from './tasks/spec';\nimport * as measure from './tasks/measure';\nimport * as dissect from './tasks/dissect';\n\nexport const dom = (speccer: SpeccerFunctionType) => {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n speccer();\n });\n } else {\n // `DOMContentLoaded` already fired\n speccer();\n }\n};\n\nexport const lazy = () => {\n const _spec_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el: IntersectionObserverEntry) => {\n if (el.intersectionRatio > 0) {\n spec.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document\n .querySelectorAll(\n '[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n )\n .forEach((el) => {\n _spec_observer.observe(el);\n });\n\n const _measure_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n measure.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-speccer-measure]').forEach((el) => {\n _measure_observer.observe(el);\n });\n\n const _dissect_observer = new IntersectionObserver((els, observer) => {\n els.forEach((el) => {\n if (el.intersectionRatio > 0) {\n dissect.element(el.target as HTMLElement);\n observer.unobserve(el.target);\n }\n });\n });\n\n document.querySelectorAll('[data-anatomy-section]').forEach((el) => {\n _dissect_observer.observe(el);\n });\n};\n\nexport const manual = (speccer: SpeccerFunctionType) => {\n window.speccer = speccer;\n};\n\nexport const activate = (speccer: SpeccerFunctionType) => {\n const _script = document.currentScript;\n\n if (_script) {\n const _speccer_script_src = _script.getAttribute('src');\n\n if (\n _speccer_script_src &&\n (_speccer_script_src.indexOf('speccer.js') !== -1 ||\n // for codepen\n _speccer_script_src.indexOf('JaXpOK.js') !== -1)\n ) {\n if (_script.hasAttribute('data-manual')) {\n manual(speccer);\n } else if (_script.hasAttribute('data-instant')) {\n speccer();\n } else if (_script.hasAttribute('data-dom')) {\n dom(speccer);\n } else if (_script.hasAttribute('data-lazy')) {\n lazy();\n } else {\n dom(speccer);\n }\n\n if (\n !_script.hasAttribute('data-manual') &&\n !_script.hasAttribute('data-lazy')\n ) {\n resize.activate(speccer);\n }\n }\n }\n};\n","/* eslint no-console:0 */\n'use strict';\n\nimport './interfaces/global';\nimport * as node from './lib/node';\nimport * as __spacing from './tasks/spec';\nimport * as __dissect from './tasks/dissect';\nimport * as __measure from './tasks/measure';\nimport * as __typography from './tasks/typography';\nimport * as browser from './browser';\n\nexport const spacing = __spacing;\n\nexport const dissect = __dissect;\n\nexport const measure = __measure;\n\nexport const typography = __typography;\n\nexport const modes = browser;\n\nconst speccer = () => {\n node.removeAll('.speccer');\n\n const _els_to_be_specced = document.querySelectorAll(\n '[data-speccer],[data-speccer] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)'\n );\n const _els_to_be_measured = document.querySelectorAll(\n '[data-speccer-measure]'\n );\n const _els_to_be_typography_specced = document.querySelectorAll(\n '[data-speccer-typography]'\n );\n const _els_to_be_dissected = document.querySelectorAll(\n '[data-anatomy-section]'\n );\n\n _els_to_be_specced.forEach(spacing.element);\n _els_to_be_measured.forEach(measure.element);\n _els_to_be_typography_specced.forEach(typography.element);\n _els_to_be_dissected.forEach(dissect.element);\n};\n\nexport default speccer;\n\nbrowser.activate(speccer);\n","import * as css from '../../lib/css';\nimport * as styles from '../../lib/styles';\n\nexport const template = async (targetEl: HTMLElement): Promise<string> => {\n const _target_styles = await styles.get(targetEl);\n const _styles = css.getTypography(_target_styles);\n const _line_height =\n _styles['lineHeight'] !== 'normal'\n ? parseInt(_styles['lineHeight'], 10) / 16 + 'rem'\n : 'normal';\n\n return (\n `\n` +\n 'font-styles: {' +\n '<ul class=\"speccer-styles\">' +\n ` <li><span class=\"property\">font-family:</span> ${_styles['fontFamily']};</li>` +\n ` <li><span class=\"property\">font-size:</span> ${_styles['fontSize']} / ${\n parseInt(_styles['fontSize'], 10) / 16\n }rem;</li>` +\n ` <li><span class=\"property\">font-weight:</span> ${_styles['fontWeight']};</li>` +\n ` <li><span class=\"property\">font-variation-settings:</span> ${_styles['fontVariationSettings']};</li>` +\n ` <li><span class=\"property\">line-height:</span> ${_styles['lineHeight']} / ${_line_height};</li>` +\n ` <li><span class=\"property\">letter-spacing:</span> ${_styles['letterSpacing']};</li>` +\n ` <li><span class=\"property\">font-style:</span> ${_styles['fontStyle']};</li>` +\n '</ul>' +\n '}'\n );\n};\n","import * as css from '../../lib/css';\nimport * as number from '../../lib/number';\nimport {\n get_horizontal_center_of_els,\n get_vertical_center_of_els,\n offset\n} from '../../lib/position';\nimport { SpeccerAreaEnum } from '../../enums/area';\n\nexport const position = async (\n area: string | null,\n targetEl: HTMLElement,\n speccerEl: HTMLElement\n) => {\n const _target_rect = targetEl.getBoundingClientRect();\n const SPECCER_PIN_SPACE = css.pinSpace(speccerEl);\n const _speccer_el_rect = speccerEl.getBoundingClientRect();\n const _el_offset = await offset(targetEl);\n const _left_layout_position_left =\n _el_offset.left - _speccer_el_rect.width - SPECCER_PIN_SPACE + 'px';\n const _left_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _right_layout_position_left =\n _el_offset.left + _target_rect.width + SPECCER_PIN_SPACE + 'px';\n const _right_layout_position_top =\n number.decimal(\n get_vertical_center_of_els(_el_offset.top, _speccer_el_rect, _target_rect)\n ) + 'px';\n const _top_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _top_layout_position_top =\n _el_offset.top - _speccer_el_rect.height - SPECCER_PIN_SPACE + 'px';\n const _bottom_layout_position_left =\n number.decimal(\n get_horizontal_center_of_els(\n _el_offset.left,\n _speccer_el_rect,\n _target_rect\n )\n ) + 'px';\n const _bottom_layout_position_top =\n _el_offset.top + _target_rect.height + SPECCER_PIN_SPACE + 'px';\n\n let _position = {\n left: _left_layout_position_left,\n top: _left_layout_position_top\n };\n\n if (area && area.indexOf(SpeccerAreaEnum.Right) !== -1) {\n _position = {\n left: _right_layout_position_left,\n top: _right_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Top) !== -1) {\n _position = {\n left: _top_layout_position_left,\n top: _top_layout_position_top\n };\n } else if (area && area.indexOf(SpeccerAreaEnum.Bottom) !== -1) {\n _position = {\n left: _bottom_layout_position_left,\n top: _bottom_layout_position_top\n };\n }\n\n return _position;\n};\n"],"names":["set","el","cls","avoid","length","trim","split","filter","cl","forEach","classList","add","cx","cls_obj","Object","keys","classname","join","SPECCER_LITERALS","getNumberValue","value","parseInt","pinSpace","getComputedStyle","getPropertyValue","waitForFrame","Promise","requestAnimationFrame","async","styles","Array","isArray","constructor","style","key","get","get_horizontal_center_of_els","modifier","startRect","targetRect","width","get_vertical_center_of_els","height","offset","targetEl","_target_rect","getBoundingClientRect","_el_offset_top","top","window","pageYOffset","_el_offset_left","left","pageXOffset","getRec","sourceEl","_source_rect","_target_offset","_target_offset_center","offsetWithCenter","_target_height","_target_width","_source_height","_source_width","absolute","toTop","center","sourceHeight","fromTop","toBottom","targetHeight","fromBottom","toLeft","sourceWidth","fromLeft","toRight","targetWidth","fromRight","create","text","tag","_el","document","createElement","_text_content","createTextNode","appendChild","setAttribute","classnames.set","element","_target_styles","styles.get","display","opacity","visibility","_target_spacing_styles","marginTop","marginBottom","marginLeft","marginRight","paddingTop","paddingBottom","paddingLeft","paddingRight","css.getSpacing","_target_pruned_spacing_styles","property","_value","css.getNumberValue","_speccer_el","_class_name","indexOf","replace","css.getClassNameFromCSSProperty","body","spacingEl","styles.add","helpers.position","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","__classPrivateFieldSet","uniqueID","Math","random","toString","substring","coords","rect","xy","x","y","right","bottom","get_coords_pair_from_objects","el1","el2","pos1","pos2","x1","y1","intrinsic_coords","x2","y2","pos","_allowed_positions","includes","_el_rect","direction_of_element","start","stop","crude","_angle","cy","ex","ey","normalize","SyntaxError","dy","dx","theta","atan2","PI","angle","cardinal_direction_crude","cardinal_direction","degrees","RangeError","createCoordinatesForCurve","options","direct","firstSet","direction","firstControl","lastControl","firstPoint","lastPoint","getCurlySVGPath","startEl","stopEl","cardinal.get_coords_pair_from_objects","x2modifier","y2modifier","_coordinates","SpeccerAreaEnum","DissectAreaEnum","MeasureAreaEnum","DrawSVGLine","startElement","stopElement","_DrawSVGLine_canvas","this","_DrawSVGLine_originalPathElement","connect","draw","path","_path_el_id","_new_path","cloneNode","getAttribute","remove","parentNode","line","insertBefore","nextSibling","_direction","cardinal.direction_of_element","_pos1","_pos2","getPositionsForSVGPath","_d","getSVGPath","WeakMap","_DrawSVGLine_instances","WeakSet","_DrawSVGLine_init","contains","getElementById","DrawSVGCurlyBracket","_DrawSVGCurlyBracket_canvas","_DrawSVGCurlyBracket_originalPathElement","_first_path_element","_DrawSVGCurlyBracket_instances","_DrawSVGCurlyBracket_getPathElement","_second_path_element","firstPathElement","secondPathElement","path1pos1","path1pos2","path2pos1","path2pos2","_path1_pos1","_path1_pos2","_path2_pos1","_path2_pos2","getPositionsForCurlySVGPath","_first_path_d","_second_path_d","_DrawSVGCurlyBracket_init","getAreasFromString","areaString","isRightArea","Right","isBottomArea","Bottom","isFullArea","Full","isEncloseArea","Enclose","isCurly","Curly","area","dissectionEl","SPECCER_PIN_SPACE","css.pinSpace","SPECCER_MEASURE_SIZE","_positional_styles","position.getRec","Left","textContent","n","_text_node","_extra_class_names","_class_names","classnames.cx","sectionEl","_dissection_els","querySelectorAll","_index_to_use","targetIndex","resolve","_areas_string","Outline","_literal_to_use","toLowerCase","_dissection_el","_dissection_styles","helpers.styles","SVG","Width","_measure_el","SPECCER_DEFAULT_MEASURE_SIZE","Height","isHeightArea","decimal","number","decimals","parseFloat","toFixed","html","innerHTML","activate","speccer","speccerEventFunc","func","wait","immediate","timeout","context","args","callNow","clearTimeout","setTimeout","apply","debounce","removeEventListener","addEventListener","dom","readyState","lazy","_spec_observer","IntersectionObserver","els","observer","intersectionRatio","spec.element","target","unobserve","observe","_measure_observer","measure.element","_dissect_observer","dissect.element","manual","_script","currentScript","_speccer_script_src","hasAttribute","resize.activate","spacing","__spacing","dissect","measure","typography","_area","_html","_styles","lineHeight","letterSpacing","fontFamily","fontSize","fontStyle","fontVariationSettings","fontWeight","css.getTypography","_line_height","helpers.template","_position","speccerEl","_speccer_el_rect","_el_offset","_left_layout_position_left","_left_layout_position_top","number.decimal","_right_layout_position_left","_right_layout_position_top","_top_layout_position_left","_top_layout_position_top","_bottom_layout_position_left","_bottom_layout_position_top","Top","modes","selector","e","node.removeAll","_els_to_be_specced","_els_to_be_measured","_els_to_be_typography_specced","_els_to_be_dissected"],"mappings":"+OAGO,MCEMA,EAAM,CAACC,EAAiBC,EAAaC,EAAQ,UACnDF,KAEAC,GAAQA,GAAsB,IAAfA,EAAIE,QAExBF,EACGG,OACAC,MAAM,KACNC,QAAQC,GAAOA,IAAOL,IACtBM,SAASD,GAAOP,EAAGS,UAAUC,IAAIH,KAAI,EA2B7BI,EAAK,CAChBV,EACAW,IAEKX,EAEAW,GAA0B,iBAARX,EAMhB,GAAGA,KACRW,EACIC,OAAOC,KAAKF,GACXN,QAAQS,GAAcH,EAAQG,KAC9BC,KAAK,KACN,KACHZ,OAXM,GAAGS,OAAOC,KAAKb,GACnBK,QAAQS,GAAcd,EAAIc,KAC1BC,KAAK,OAAOZ,OALA,GC1CNa,EAAmB,IAAI,8BCSvBC,EAAkBC,GAA0BC,SAASD,EAAO,IA0E5DE,EAAYrB,GACvBkB,EACEI,iBAAiBtB,GAAIuB,iBAAiB,4BD1ED,GEX5BC,EAAe,IAAM,IAAIC,QAAQC,uBCCjChB,EAAMiB,MAAO3B,EAAiB4B,MAEtC5B,IACA4B,GACiB,iBAAXA,GACW,iBAAXA,GACW,kBAAXA,GACNC,MAAMC,QAAQF,IAA6B,IAAlBA,EAAOzB,QACD,IAA/BU,OAAOC,KAAKc,GAAQzB,QAAgByB,EAAOG,cAAgBlB,eAKxDW,IAEFK,MAAMC,QAAQF,GAChBA,EAAOpB,SACJwB,GACEhC,EAAGgC,MAAMA,EAAMC,KAAOD,EAAMb,QAGjCN,OAAOC,KAAKc,GAAQpB,SAASyB,GAASjC,EAAGgC,MAAMC,GAAOL,EAAOK,KAC9D,EAGUC,EAAMP,MAAO3B,UAClBwB,IAECF,iBAAiBtB,EAAI,OC3BjBmC,EAA+B,CAC1CC,EACAC,EACAC,IACWF,EAAWC,EAAUE,MAAQ,EAAID,EAAWC,MAAQ,EAEpDC,EAA6B,CACxCJ,EACAC,EACAC,IACWF,EAAWC,EAAUI,OAAS,EAAIH,EAAWG,OAAS,EAEtDC,EAASf,MACpBgB,UAEMnB,IAEN,MAAMoB,EAAeD,EAASE,wBACxBC,EAAiBF,EAAaG,IAAMC,OAAOC,YAC3CC,EAAkBN,EAAaO,KAAOH,OAAOI,YAEnD,MAAO,CACLX,OAAQG,EAAaH,OACrBF,MAAOK,EAAaL,MACpBQ,IAAKD,EACLK,KAAMD,EACP,EA0BUG,EAAS1B,MACpB2B,EACAX,WAEMnB,IAEN,MAAM+B,EAAeD,EAAST,wBACxBW,QAAuBd,EAAOC,GAC9Bc,OA/BwB9B,OAC9B2B,EACAX,WAEMnB,IAEN,MAAM+B,EAAeD,EAAST,wBACxBD,EAAeD,EAASE,wBACxBC,EAAiBF,EAAaG,IAAMC,OAAOC,YAC3CC,EAAkBN,EAAaO,KAAOH,OAAOI,YAEnD,MAAO,CACLX,OAAQG,EAAaH,OACrBF,MAAOK,EAAaL,MACpBQ,IAAKP,EAA2BM,EAAgBS,EAAcX,GAC9DO,KAAMhB,EACJe,EACAK,EACAX,GAEH,EAWmCc,CAAiBJ,EAAUX,GACzDgB,EAAiBH,EAAef,OAChCmB,EAAgBJ,EAAejB,MAC/BsB,EAAiBN,EAAad,OAC9BqB,EAAgBP,EAAahB,MAEnC,MAAO,CACLwB,SAAU,KACD,CACLhB,IAAKS,EAAeT,IACpBI,KAAMK,EAAeL,KACrBV,OAAQkB,EACRpB,MAAOqB,IAGXI,MAAO,EACLC,UAAS,EACTC,eAAeL,EACfzB,WAAW,GACU,MACd,CACLW,IAAKS,EAAeT,IAAMmB,EAAe9B,EACzCe,KAAMc,EAASR,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAIXO,QAAS,EACPF,UAAS,EACTC,eAAeL,EACfzB,WAAW,GACU,MACd,CACLW,IAAKS,EAAeT,IAAMmB,EAAe9B,EACzCe,KAAMc,EAASR,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAIXQ,SAAU,EACRH,UAAS,EACTC,eAAeL,EACfQ,eAAeV,EACfvB,WAAW,GACU,CAAA,KACd,CACLW,IAAKS,EAAeT,IAAMsB,GAAgBH,EAAe9B,GACzDe,KAAMc,EAASR,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAGXU,WAAY,EACVL,UAAS,EACTI,eAAeV,EACfvB,WAAW,GACU,MACd,CACLW,IAAKS,EAAeT,IAAMsB,EAAejC,EACzCe,KAAMc,EAASR,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAIXW,OAAQ,EACNN,UAAS,EACTO,cAAcV,EACd1B,WAAW,GACU,MACd,CACLW,IAAKkB,EAASR,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOqB,EAAcpC,EAC1CK,OAAQkB,EACRpB,MAAOqB,IAIXa,SAAU,EACRR,UAAS,EACTO,cAAcV,EACd1B,WAAW,GACU,MACd,CACLW,IAAKkB,EAASR,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOqB,EAAcpC,EAC1CK,OAAQkB,EACRpB,MAAOqB,IAIXc,QAAS,EACPT,UAAS,EACTO,cAAcV,EACda,cAAcf,EACdxB,WAAW,GACU,CAAA,KACd,CACLW,IAAKkB,EAASR,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOwB,GAAeH,EAAcpC,GACzDK,OAAQkB,EACRpB,MAAOqB,IAIXgB,UAAW,EACTX,UAAS,EACTU,cAAcf,EACdxB,WAAW,GACU,MACd,CACLW,IAAKkB,EAASR,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOwB,EAAcvC,EAC1CK,OAAQkB,EACRpB,MAAOqB,IAGZ,EChLUiB,EAAS,CAACC,EAAwB,GAAIC,EAAM,UACvD,MAAMC,EAAMC,SAASC,cAAcH,GAC7BI,EAAgBF,SAASG,eAAeN,EAAO,IAMrD,OAJAE,EAAIK,YAAYF,GAChBH,EAAIM,aAAa,QAASR,EAAO,MACjCS,EAAeP,EAAK,sBAEbA,CAAG,EAGCQ,EAAU7D,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAM8C,QAAuBC,EAAW/C,GAExC,GAC6B,SAA3B8C,EAAeE,SACY,MAA3BF,EAAeG,SACe,WAA9BH,EAAeI,WAEf,OAGF,MAAMC,EJIkB,CACxB9D,IAEA,MAAM+D,UACJA,EAASC,aACTA,EAAYC,WACZA,EAAUC,YACVA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,YACbA,EAAWC,aACXA,GACEtE,EAEJ,MAAO,CACL+D,YACAC,eACAC,aACAC,cACAC,aACAC,gBACAC,cACAC,eACD,EI3B8BC,CAAed,GACxCe,EAAgC3F,OAAOC,KAC3CgF,GACAxF,QAAQmG,GAGU,QAFHX,EAAuBW,KAKK,IAAzCD,EAA8BrG,QAElCqG,EAA8BhG,SAAQmB,MAAO8E,IAC3C,MAAMC,EAASC,EAAmBb,EAAuBW,IACnDG,EAAc/B,EAAO6B,GACrBG,EJxBiC,CAACJ,IACT,IAA7BA,EAASK,QAAQ,OACZL,EAASM,QAAQ,MAAO,SACS,IAA/BN,EAASK,QAAQ,SACnBL,EAASM,QAAQ,QAAS,WACQ,IAAhCN,EAASK,QAAQ,UACnBL,EAASM,QAAQ,SAAU,YACK,IAA9BN,EAASK,QAAQ,QACnBL,EAASM,QAAQ,OAAQ,SAG3B,GIaeC,CAAgCP,GAEpDlB,EAAeqB,EAAaC,GAC5B5B,SAASgC,KAAK5B,YAAYuB,GAE1BjE,EAASlC,UAAUC,IAAI,mBC/CHiB,OACtB8E,EACAtF,EACA+F,EACAvE,WAEMnB,IAEN,MAAMoB,EAAeD,EAASE,wBACxBW,QAAuBd,EAAOC,GAEnB,cAAb8D,GACFU,EAAWD,EAAW,CACpBzE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM5B,EAAQ,OAIrB,gBAAbsF,GACFU,EAAWD,EAAW,CACpBzE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KAAMK,EAAeL,KAAO/B,SAASwB,EAAaL,MAAQ,GAAI,IAAM,KACpEQ,IAAKS,EAAeT,IAAM,OAIb,iBAAb0D,GACFU,EAAWD,EAAW,CACpBzE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM3B,SAASwB,EAAaH,OAAS,GAAI,IAAM,OAItD,eAAbgE,GACFU,EAAWD,EAAW,CACpBzE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KAAMK,EAAeL,KAAOhC,EAAQ,KACpC4B,IAAKS,EAAeT,IAAM,OAIb,eAAb0D,GACFU,EAAWD,EAAW,CACpBzE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM,OAIb,kBAAb0D,GACFU,EAAWD,EAAW,CACpBzE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IACES,EAAeT,KACd3B,SAASwB,EAAaH,OAAS,GAAI,IAAMtB,GAC1C,OAIW,iBAAbsF,GACFU,EAAWD,EAAW,CACpBzE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KACEK,EAAeL,MACd/B,SAASwB,EAAaL,MAAQ,GAAI,IAAMpB,GACzC,KACF4B,IAAKS,EAAeT,IAAM,OAIb,gBAAb0D,GACFU,EAAWD,EAAW,CACpBzE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM,MAE7B,EDvCOqE,CAAiBX,EAAUC,EAAQE,EAAajE,EAAS,GAC/D,2DEkLG,SAAS0E,EAAuBC,EAAUC,EAAOC,EAAMC,GAC1D,GAAa,MAATD,IAAiBC,EAAG,MAAM,IAAIC,UAAU,iDAC5C,GAAqB,mBAAVH,EAAuBD,IAAaC,IAAUE,GAAKF,EAAMI,IAAIL,GAAW,MAAM,IAAII,UAAU,4EACvG,MAAgB,MAATF,EAAeC,EAAa,MAATD,EAAeC,EAAEG,KAAKN,GAAYG,EAAIA,EAAEtG,MAAQoG,EAAMrF,IAAIoF,EACxF,CAEO,SAASO,EAAuBP,EAAUC,EAAOpG,EAAOqG,EAAMC,GACjE,GAAa,MAATD,EAAc,MAAM,IAAIE,UAAU,kCACtC,GAAa,MAATF,IAAiBC,EAAG,MAAM,IAAIC,UAAU,iDAC5C,GAAqB,mBAAVH,EAAuBD,IAAaC,IAAUE,GAAKF,EAAMI,IAAIL,GAAW,MAAM,IAAII,UAAU,2EACvG,MAAiB,MAATF,EAAeC,EAAEG,KAAKN,EAAUnG,GAASsG,EAAIA,EAAEtG,MAAQA,EAAQoG,EAAMxH,IAAIuH,EAAUnG,GAASA,CACxG,CC/OO,MAAM2G,EAAW,IAAM,IAAMC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,IC+C/DC,EACLC,GAAkBA,EAAKrF,IADlBoF,EAEHC,GAAkBA,EAAKjF,KAAOiF,EAAK7F,MAFhC4F,EAGFC,GAAkBA,EAAKrF,IAAMqF,EAAK3F,OAHhC0F,EAIJC,GAAkBA,EAAKjF,KAJnBgF,EAKAC,GAAkBA,EAAKjF,KAAOiF,EAAK7F,MAAQ,EAL3C4F,EAMAC,GAAkBA,EAAKrF,IAAMqF,EAAK3F,OAAS,EAG3C4F,EAAK,CAChBpE,OAASmE,IAAmB,CAC1BE,EAAGH,EAAgBC,GACnBG,EAAGJ,EAAgBC,KAErBrF,IAAMqF,IAAa,CAAQE,EAAGH,EAAgBC,GAAOG,EAAGJ,EAAWC,KACnEI,MAAQJ,IAAmB,CACzBE,EAAGH,EAAaC,GAChBG,EAAGJ,EAAgBC,KAErBK,OAASL,IAAmB,CAC1BE,EAAGH,EAAgBC,GACnBG,EAAGJ,EAAcC,KAEnBjF,KAAOiF,IAAa,CAAQE,EAAGH,EAAYC,GAAOG,EAAGJ,EAAgBC,KACrE,YAAcA,IAAmB,CAC/BE,EAAGH,EAAaC,GAChBG,EAAGJ,EAAWC,KAEhB,eAAiBA,IAAmB,CAClCE,EAAGH,EAAaC,GAChBG,EAAGJ,EAAcC,KAEnB,WAAaA,IAAmB,CAC9BE,EAAGH,EAAYC,GACfG,EAAGJ,EAAWC,KAEhB,cAAgBA,IAAmB,CACjCE,EAAGH,EAAYC,GACfG,EAAGJ,EAAcC,KAEnB,WAAaA,IAAmB,CAC9BE,EAAGH,EAAYC,GACfG,EAAGJ,EAAWC,KAEhB,YAAcA,IAAmB,CAC/BE,EAAGH,EAAaC,GAChBG,EAAGJ,EAAWC,KAEhB,cAAgBA,IAAmB,CACjCE,EAAGH,EAAYC,GACfG,EAAGJ,EAAcC,KAEnB,eAAiBA,IAAmB,CAClCE,EAAGH,EAAaC,GAChBG,EAAGJ,EAAcC,KAEnB,aAAeA,IAAmB,CAChCE,EAAGH,EAAgBC,GACnBG,EAAGJ,EAAWC,KAEhB,eAAiBA,IAAmB,CAClCE,EAAGH,EAAaC,GAChBG,EAAGJ,EAAgBC,KAErB,gBAAkBA,IAAmB,CACnCE,EAAGH,EAAgBC,GACnBG,EAAGJ,EAAcC,KAEnB,cAAgBA,IAAmB,CACjCE,EAAGH,EAAYC,GACfG,EAAGJ,EAAgBC,MAIVM,EAA+B/G,MAC1CgH,EACAC,EACAC,EAAO,SACPC,EAAO,YAEP,IAAKH,IAAQC,EACX,KAAM,mBAGR,MAAQN,EAAGS,EAAIR,EAAGS,SAAaC,EAAiBN,EAAKE,IAC7CP,EAAGY,EAAIX,EAAGY,SAAaF,EAAiBL,EAAKE,GAErD,MAAO,CACLC,KACAC,KACAE,KACAC,KACD,EAGUF,EAAmBtH,MAAO3B,EAAiBoJ,EAAM,YAC5D,IAAKA,EACH,KAAM,oBAGR,GAAmB,iBAARA,EACT,KAAM,4DAA4DA,EAGpE,MAAMC,EAAqB,CACzB,SACA,OACA,QACA,MACA,SACA,YACA,eACA,WACA,cACA,WACA,YACA,cACA,eACA,aACA,eACA,gBACA,eAGF,IAAKA,EAAmBC,SAASF,GAC/B,KAAM,oFAAoFC,EAAmBrI,KAC3G,cAIEQ,IAEN,MAAM+H,EAAWvJ,EAAG6C,wBAEpB,OAAOwF,EAAGe,GAAKG,EAAS,EAGbC,EAAuB7H,OAAS8H,QAAOC,OAAMC,SAAQ,MAChE,MAAMZ,GAAEA,EAAEC,GAAEA,EAAEE,GAAEA,EAAEC,GAAEA,SAAaT,EAA6Be,EAAOC,GAC/DE,EA7Ka,EACnBjJ,EACAkJ,EACAC,EACAC,EACAC,GAAY,KAEZ,KAAKrJ,GAAOkJ,GAAOC,GAAOC,GACxB,MAAM,IAAIE,YAAY,6BAGxB,GACgB,iBAAPtJ,GACO,iBAAPkJ,GACO,iBAAPC,GACO,iBAAPC,EAEP,MAAM,IAAIrC,UACR,sFAAsF/G,YAAakJ,YAAaC,YAAaC,KAIjI,MAAMG,EAAKH,EAAKF,EACVM,EAAKL,EAAKnJ,EAEhB,IAAIyJ,EAAQrC,KAAKsC,MAAMH,EAAIC,GAM3B,OAJAC,GAAS,IAAMrC,KAAKuC,GAEhBN,GAAaI,EAAQ,IAAGA,EAAQ,IAAMA,GAEnCA,CAAK,EA8IGG,CAAMxB,EAAIC,EAAIE,EAAIC,GAKjC,OAJmBQ,EACfa,EAAyBZ,GACzBa,EAAmBb,EAEN,EAQNa,EAAsBC,IACjC,GAAIA,EAAU,IAAK,MAAMC,WAAW,+BAEpC,GAAID,EAAU,EAAG,MAAMC,WAAW,oCAElC,OAAID,GAAW,GAAKA,GAAW,KACtB,OACEA,GAAW,MAAQA,GAAW,KAChC,aACEA,GAAW,MAAQA,GAAW,MAChC,QACEA,GAAW,OAASA,GAAW,MACjC,aACEA,GAAW,OAASA,GAAW,MACjC,OACEA,GAAW,OAASA,GAAW,MACjC,aACEA,GAAW,OAASA,GAAW,MACjC,QACEA,GAAW,OAASA,GAAW,MACjC,aAEA,MACR,EAOUF,EAA4BE,IACvC,GAAIA,EAAU,IAAK,MAAMC,WAAW,+BAEpC,GAAID,EAAU,EAAG,MAAMC,WAAW,oCAElC,OAAID,GAAW,IAAMA,GAAW,IACvB,QACEA,EAAU,KAAOA,GAAW,IAC9B,OACEA,EAAU,KAAOA,GAAW,IAC9B,QAEA,MAGR,EC/OUE,EAA4B,CACvCzC,EACA0C,KAEA,MAAM9B,GAAEA,EAAEG,GAAEA,EAAEF,GAAEA,EAAEG,GAAEA,GAAOhB,GACrB2C,OAAEA,GAAS,EAAKC,SAAEA,GAAW,EAAKC,UAAEA,GAAcH,EAIxD,IAAII,EAAe,CAAE3C,EAAGS,GAAMG,EAAKH,GAAM,EAAGR,EAAGS,GAC3CkC,EAAc,CAAE5C,EAAGS,GAAMG,EAAKH,GAAM,EAAGR,EAAGY,GAoC9C,OAlCI2B,IAGEC,EACgB,SAAdC,GACFC,EAAe,CAAE3C,EAAGS,EAAK,GAAIR,EAAGS,EAAK,GACrCkC,EAAc,CAAE5C,EAAGY,EAAK,GAAIX,EAAGY,IACR,UAAd6B,GACTC,EAAe,CAAE3C,EAAGS,EAAK,EAAQR,EAAGS,EAAK,IACzCkC,EAAc,CAAE5C,EAAGY,EAAIX,EAAGY,EAAK,KACR,SAAd6B,GACTC,EAAe,CAAE3C,EAAGS,EAAK,GAAIR,EAAGS,EAAK,GACrCkC,EAAc,CAAE5C,EAAGY,EAAK,GAAIX,EAAGY,KAE/B8B,EAAe,CAAE3C,EAAGS,EAAK,EAAQR,EAAGS,EAAK,IACzCkC,EAAc,CAAE5C,EAAGY,EAAIX,EAAGY,EAAK,KAGf,SAAd6B,GACFC,EAAe,CAAE3C,EAAGS,EAAK,GAAIR,EAAGS,EAAK,GACrCkC,EAAc,CAAE5C,EAAGY,EAAK,GAAIX,EAAGY,IACR,UAAd6B,GACTC,EAAe,CAAE3C,EAAGS,EAAK,EAAQR,EAAGS,EAAK,IACzCkC,EAAc,CAAE5C,EAAGY,EAAIX,EAAGY,EAAK,KACR,SAAd6B,GACTC,EAAe,CAAE3C,EAAGS,EAAK,GAAIR,EAAGS,EAAK,GACrCkC,EAAc,CAAE5C,EAAGY,EAAK,GAAIX,EAAGY,KAE/B8B,EAAe,CAAE3C,EAAGS,EAAK,EAAQR,EAAGS,EAAK,IACzCkC,EAAc,CAAE5C,EAAGY,EAAIX,EAAGY,EAAK,MAK9B,CACLgC,WAzCiB,CAAE7C,EAAGS,EAAIR,EAAGS,GA0C7BiC,eACAG,UA1CgB,CAAE9C,EAAGY,EAAIX,EAAGY,GA2C5B+B,cACD,EAGUG,EAAkB1J,MAC7B2J,EACAC,EACAV,KAEA,MAAMhC,KAAEA,EAAIC,KAAEA,EAAIiC,SAAEA,GAAW,EAAKC,UAAEA,GAAcH,GAC9C9B,GAAEA,EAAEC,GAAEA,EAAEE,GAAEA,EAAEC,GAAEA,SAAaqC,EAC/BF,EACAC,EACA1C,EACAC,GAKF,IAAI2C,EAAa,EACbC,EAAa,EAGA,SAAbV,EACFU,EAAa,EACS,QAAbV,EACTS,EAAa,EACS,QAAbT,EACTS,GAAc,EACQ,SAAbT,IACTU,GAAc,GAGhB,MAAMC,EAAef,EACnB,CACE7B,GAAIA,EAnBW,EAoBfG,GAAIA,EAAKuC,EACTzC,GAAIA,EApBW,EAqBfG,GAAIA,EAAKuC,GAEX,CACEZ,QAAQ,EACRC,WACAC,eAGEG,WAAEA,EAAUF,aAAEA,EAAYC,YAAEA,EAAWE,UAAEA,GAAcO,EAE7D,MACE,KACAR,EAAW7C,EACX,IACA6C,EAAW5C,EACX,KACA0C,EAAa3C,EACb,IACA2C,EAAa1C,EACb,KACA2C,EAAY5C,EACZ,IACA4C,EAAY3C,EACZ,KACA6C,EAAU9C,EACV,IACA8C,EAAU7C,CACV,wBCzHQqD,EAQAC,EAYAC,QChBCC,EAOXhK,YAAYiK,EAA2BC,eANvCC,EAAyCnM,IAAAoM,UAAA,GACzCC,EAA0DrM,IAAAoM,UAAA,GAMxD9E,EAAA8E,cAAAvE,KAAAuE,KAAWH,EAAcC,EAC1B,CA4BDI,UACEF,KAAKG,KAAKjF,EAAA8E,KAAIC,EAAA,KACf,CAEDzK,WAAW4K,GACT,IAAKA,EACH,KAAM,yBAGR,MACMC,EAAc,qBADR1E,MAEN2E,EAAYF,EAAKG,WAAU,GAUjC,GARAD,EAAUnH,aAAa,KAAMkH,GAC7BC,EAAUnH,aACR,gBACA6G,KAAKH,aAAaW,aAAa,OAAS,eAE1CF,EAAUhM,UAAUmM,OAAO,YAC3BH,EAAUhM,UAAUC,IAAI,YAEpB6L,EAAKM,WAGP,KAAM,+BAFNV,KAAKW,KAAOP,EAAKM,WAAWE,aAAaN,EAAWF,EAAKS,aAK3D,MAAMC,QAAmBC,EAA8B,CACrDzD,MAAO0C,KAAKH,aACZtC,KAAMyC,KAAKF,YACXtC,OAAO,KAEHd,KAAEA,EAAIC,KAAEA,GF2FoB,CAACkC,IACrC,IAAImC,EACAC,EAEJ,OAAQpC,GACN,IAAK,OACHmC,EAAQ,QACRC,EAAQ,OACR,MAEF,IAAK,QACHD,EAAQ,SACRC,EAAQ,MACR,MAGF,IAAK,OACHD,EAAQ,OACRC,EAAQ,QACR,MAGF,QACED,EAAQ,MACRC,EAAQ,SAKZ,MAAO,CACLvE,KAAMsE,EACNrE,KAAMsE,EACP,EE3HwBC,CAAuBJ,GACxCK,OFkDgB3L,OACxB2J,EACAC,EACAV,KAEA,MAAMhC,KAAEA,EAAIC,KAAEA,GAAS+B,GACjB9B,GAAEA,EAAEC,GAAEA,EAAEE,GAAEA,EAAEC,GAAEA,SAAaqC,EAC/BF,EACAC,EACA1C,EACAC,GAEI6C,EAAef,EACnB,CAAE7B,KAAIG,KAAIF,KAAIG,MACd,CACE6B,UAAW,MAGTG,WAAEA,EAAUF,aAAEA,EAAYC,YAAEA,EAAWE,UAAEA,GAAcO,EAE7D,MACE,KACAR,EAAW7C,EACX,IACA6C,EAAW5C,EACX,KACA0C,EAAa3C,EACb,IACA2C,EAAa1C,EACb,KACA2C,EAAY5C,EACZ,IACA4C,EAAY3C,EACZ,KACA6C,EAAU9C,EACV,IACA8C,EAAU7C,CACV,EEvFiBgF,CAAWpB,KAAKH,aAAcG,KAAKF,YAAa,CAC/DpD,OACAC,SAGFqD,KAAKW,KAAKxH,aAAa,iBAAkB2H,GACzCd,KAAKW,KAAKxH,aAAa,YAAauD,GACpCsD,KAAKW,KAAKxH,aAAa,YAAawD,GAEpCqD,KAAKW,KAAKxH,aAAa,IAAKgI,EAC7B,EArEKpB,EAAA,IAAAsB,QAAApB,EAAA,IAAAoB,QAAAC,EAAA,IAAAC,QAAAC,EAAA,SAAA3B,EAA2BC,GAC/B,IAAKD,IAAiBC,EACpB,KAAM,8CAGR,IAAKhH,SAASgC,KAAK2G,SAAS3B,GAC1B,KAAM,gCAGR,IAAKhH,SAASgC,KAAK2G,SAAS5B,GAC1B,KAAM,iCASR,GANAG,KAAKH,aAAeA,EACpBG,KAAKF,YAAcA,EAEnBpE,EAAAsE,OAAelH,SAAS4I,eAAe,kBAAiB,KACxDhG,EAAAsE,OAA4BlH,SAAS4I,eAAe,mBAAkB,MAEjExG,EAAA8E,KAAIC,EAAA,OAA0B/E,EAAA8E,KAAID,EAAA,KACrC,KAAM,2EAGRC,KAAKE,SACP,EAgDFrJ,OAAO+I,YAAcA,QCnFR+B,EAQX/L,YAAYiK,EAA2BC,eAPvC8B,EAAyChO,IAAAoM,UAAA,GACzC6B,EAA0DjO,IAAAoM,UAAA,GAOxD9E,EAAA8E,cAAAvE,KAAAuE,KAAWH,EAAcC,EAC1B,CA4BDI,UACEF,KAAKG,KAAKjF,EAAA8E,KAAI6B,EAAA,KACf,CAsBDrM,WAAW4K,GACT,IAAKA,EACH,KAAM,yBAGR,MAAM0B,EAAsB5G,EAAA8E,KAAI+B,EAAA,IAAAC,QAAJhC,KAAqBI,GAC3C6B,EAAuB/G,EAAA8E,KAAI+B,EAAA,IAAAC,QAAJhC,KAAqBI,GAElD,IAAIA,EAAKM,WAUP,KAAM,+BATNV,KAAKkC,iBAAmB9B,EAAKM,WAAWE,aACtCkB,EACA1B,EAAKS,aAEPb,KAAKmC,kBAAoB/B,EAAKM,WAAWE,aACvCqB,EACA7B,EAAKS,aAMT,MAAMC,QAAmBC,EAA8B,CACrDxD,KAAMyC,KAAKF,YACXxC,MAAO0C,KAAKH,aACZrC,OAAO,KAEH4E,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,GH2GF,CAAC1D,IAC1C,IAAI2D,EACAC,EACAC,EACAC,EAEJ,OAAQ9D,GACN,IAAK,OACH2D,EAAc,YACdC,EAAc,cACdC,EAAc,eACdC,EAAc,cACd,MAEF,IAAK,QACHH,EAAc,cACdC,EAAc,aACdC,EAAc,eACdC,EAAc,aACd,MAEF,IAAK,OACHH,EAAc,WACdC,EAAc,eACdC,EAAc,cACdC,EAAc,eACd,MAGF,QACEH,EAAc,WACdC,EAAc,gBACdC,EAAc,YACdC,EAAc,gBAKlB,MAAO,CACLP,UAAWI,EACXH,UAAWI,EACXH,UAAWI,EACXH,UAAWI,EACZ,EGrJGC,CAA4B9B,GACxB+B,QAAsB3D,EAC1Bc,KAAKH,aACLG,KAAKF,YACL,CACEpD,KAAM0F,EACNzF,KAAM0F,EACNzD,UAAU,EACVC,UAAWiC,IAGTgC,QAAuB5D,EAC3Bc,KAAKH,aACLG,KAAKF,YACL,CACEpD,KAAM4F,EACN3F,KAAM4F,EACN1D,UAAWiC,IAIfd,KAAKkC,iBAAiB/I,aAAa,iBAAkB2H,GACrDd,KAAKkC,iBAAiB/I,aAAa,YAAaiJ,GAChDpC,KAAKkC,iBAAiB/I,aAAa,YAAakJ,GAChDrC,KAAKkC,iBAAiB/I,aAAa,IAAK0J,GACxC7C,KAAKmC,kBAAkBhJ,aAAa,iBAAkB2H,GACtDd,KAAKmC,kBAAkBhJ,aAAa,YAAamJ,GACjDtC,KAAKmC,kBAAkBhJ,aAAa,YAAaoJ,GACjDvC,KAAKmC,kBAAkBhJ,aAAa,IAAK2J,EAC1C,EA1GKlB,EAAA,IAAAP,QAAAQ,EAAA,IAAAR,QAAAU,EAAA,IAAAR,QAAAwB,EAAA,SAAAlD,EAA2BC,GAC/B,IAAKD,IAAiBC,EACpB,KAAM,8CAGR,IAAKhH,SAASgC,KAAK2G,SAAS3B,GAC1B,KAAM,gCAGR,IAAKhH,SAASgC,KAAK2G,SAAS5B,GAC1B,KAAM,iCASR,GANAG,KAAKH,aAAeA,EACpBG,KAAKF,YAAcA,EAEnBpE,EAAAsE,OAAelH,SAAS4I,eAAe,kBAAiB,KACxDhG,EAAAsE,OAA4BlH,SAAS4I,eAAe,mBAAkB,MAEjExG,EAAA8E,KAAI6B,EAAA,OAA0B3G,EAAA8E,KAAI4B,EAAA,KACrC,KAAM,2EAGR5B,KAAKE,SACP,aAMgBE,GACd,IAAKA,EACH,KAAM,oCAGR,MACMC,EAAc,qBADR1E,MAEN2E,EAAYF,EAAKG,WAAU,GAUjC,OARAD,EAAUnH,aACR,gBACA6G,KAAKH,aAAaW,aAAa,OAAS,eAE1CF,EAAUnH,aAAa,KAAMkH,GAC7BC,EAAUhM,UAAUmM,OAAO,YAC3BH,EAAUhM,UAAUC,IAAI,WAEjB+L,CACT,EA6DFzJ,OAAO8K,oBAAsBA,EF7H7B,SAAYlC,GACVA,EAAA,MAAA,GACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,IAAA,KACD,CAND,CAAYA,IAAAA,EAMX,CAAA,IAED,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,QAAA,UACAA,EAAA,KAAA,OACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,IAAA,MACAA,EAAA,IAAA,MACAA,EAAA,MAAA,OACD,CAVD,CAAYA,IAAAA,EAUX,CAAA,IAED,SAAYC,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,IAAA,KACD,CAPD,CAAYA,IAAAA,EAOX,CAAA,IG3BM,MAAMqD,EAAsBC,GACjCA,EAAW/O,MAAM,KAQNgP,EAAeD,GACZD,EAAmBC,GAEpB9F,SAASuC,EAAgByD,OAS3BC,EAAgBH,GACbD,EAAmBC,GAEpB9F,SAASuC,EAAgB2D,QAG3BC,EAAcL,GACXD,EAAmBC,GAEpB9F,SAASuC,EAAgB6D,MAG3BC,EAAiBP,GACdD,EAAmBC,GAEpB9F,SAASuC,EAAgB+D,SAqB3BC,EAAWT,IACwB,IAA9CA,EAAWtI,QAAQ+E,EAAgB6D,QACY,IAA/CN,EAAWtI,QAAQ+E,EAAgBiE,OClDxBlO,EAASD,MACpBoO,EACApN,EACAqN,EACAnF,KAEA,MAAMgF,QAAEA,GAAYhF,EACdoF,EAAoBC,EAAaF,GACjCG,EdyENjP,EACEI,iBc1E2C0O,Gd0EtBzO,iBAAiB,+BD3EE,EeE1C,MAAM6O,QAA2BC,EAAgBL,EAAcrN,GAE/D,GAAIgN,EAAcI,GAAO,CACvB,MAAM5M,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,EAAMF,MAAEA,GAAU6N,EAAmBrM,WAExD,MAAO,CACLZ,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,MACXF,MAAO,GAAGA,MAEb,CAED,GD3Bc4M,EC2BCY,GDzBFzG,SAASuC,EAAgByE,MCyBhB,CACpB,GAAIb,EAAWM,KAAUF,EAAS,CAChC,MAAM1M,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,GAAW2N,EAAmB3L,SAAS,CACxDD,YAAa2L,IAGf,MAAO,CACLhN,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,MAEd,CAAM,CACL,MAAMU,KAAEA,EAAIJ,IAAEA,GAAQqN,EAAmB3L,SAAS,CAChDR,QAAQ,EACR7B,SAAUyN,EAAUI,EAAoB,IAAMA,IAGhD,MAAO,CACL9M,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MAEX,CACF,CAAM,GAAIsM,EAAYU,GAAO,CAC5B,GAAIN,EAAWM,KAAUF,EAAS,CAChC,MAAM1M,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,GAAW2N,EAAmBxL,UAAU,CACzDX,QAAQ,IAGV,MAAO,CACLd,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,MAEd,CAAM,CACL,MAAMU,KAAEA,EAAIJ,IAAEA,GAAQqN,EAAmBxL,UAAU,CACjDX,QAAQ,EACR7B,SAAUyN,EAAUI,EAAoB,IAAMA,IAGhD,MAAO,CACL9M,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MAEX,CACF,CAAM,GAAIwM,EAAaQ,GAAO,CAC7B,GAAIN,EAAWM,KAAUF,EAAS,CAChC,MAAM1M,KAAEA,EAAIJ,IAAEA,EAAGR,MAAEA,GAAU6N,EAAmB9L,WAAW,CACzDL,QAAQ,IAGV,MAAO,CACLd,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRR,MAAO,GAAGA,MAEb,CAAM,CACL,MAAMY,KAAEA,EAAIJ,IAAEA,GAAQqN,EAAmB9L,WAAW,CAClDL,QAAQ,EACR7B,SAAUyN,EAAUI,EAAoB,IAAMA,IAGhD,MAAO,CACL9M,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MAEX,CACF,CACC,GAAI0M,EAAWM,KAAUF,EAAS,CAChC,MAAM1M,KAAEA,EAAIJ,IAAEA,EAAGR,MAAEA,GAAU6N,EAAmBjM,QAAQ,CACtDF,QAAQ,IAGV,MAAO,CACLd,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRR,MAAO,GAAGA,MAEb,CAAM,CACL,MAAMY,KAAEA,EAAIJ,IAAEA,GAAQqN,EAAmBjM,QAAQ,CAC/CF,QAAQ,EACR7B,SAAUyN,EAAUI,EAAoB,IAAMA,IAGhD,MAAO,CACL9M,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MAEX,CACF,EC9GU8B,GAAS,CAAC0L,EAAc,GAAIR,EAAcS,EAAI,UACzD,MAAMxL,EAAMC,SAASC,cAAcsL,GAC7BC,EAAaxL,SAASG,eAAemL,GACrCG,EAAqB,CAAA,EAEd,OAATX,GAA0B,KAATA,IACnBW,EAAmBX,IAAQ,IAIzBN,EAAWM,KAAUJ,EAAcI,IACpCN,EAAWM,IAASF,EAAQE,GAE7B/K,EAAIK,YAAYoL,IACPhB,EAAWM,IAASJ,EAAcI,KAC3C/K,EAAIM,aAAa,0BAA2BiL,GAG9C,MAAMI,EAAeC,EACnB,wBACAF,GAKF,OAFAnL,EAAeP,EAAK2L,GAEb3L,CAAG,EAGCQ,GAAWqL,IACtB,IAAKA,EAAW,OAEhB,MAAMC,EAAkBD,EAAUE,iBAAiB,kBAEnD,GAAID,EAAiB,CACnB,IAAIE,EAAgB,EAEpBF,EAAgBtQ,SAAQmB,MAAOgB,EAAuBsO,KACpD,IAAKtO,EAAU,OAAOlB,QAAQyP,UAE9B,MAAMC,EAAwBxO,EAASgK,aAAa,iBAAmB,GAEvE,IACGwE,GACiB,KAAlBA,IACoD,IAApDA,EAAcrK,QAAQ+E,EAAgBuF,SAEtC,OAMF,IAAIC,EAAkBpQ,EAAiBgQ,GAElCI,IACHA,EAAkB,GAAGpQ,EAAiB+P,KAAiB/P,EACrD+P,GACAM,gBACFN,KAGF,MAAMO,EAAiB1M,GAAOwM,EAAiBF,GAE/ClM,SAASgC,KAAK5B,YAAYkM,GAE1B,MAAMC,QAA2BC,EAC/BN,EACAxO,EACA4O,EACA,CACE1B,QAASA,EAAQsB,KF5BL,IAAC/B,QEgCXjI,EAAWoK,EAAgBC,IF/BU,KAD1BpC,EEkCN+B,GFjCJrK,QAAQ+E,EAAgBiE,SACW,IAA9CV,EAAWtI,QAAQ+E,EAAgB6D,QACc,IAAjDN,EAAWtI,QAAQ+E,EAAgB+D,WACU,IAA7CR,EAAWtI,QAAQ+E,EAAgB6F,KE+B7B,IAAI3F,EAAYpJ,EAAU4O,GACjB1B,EAAQsB,IACjB,IAAIrD,EAAoBnL,EAAU4O,EACnC,GAEJ,GCnFH,MAAM1M,GAAS,CACbC,EAAwB,GACxBiL,EAAsB,GACtBhL,EAAM,UAEN,MAAMC,EAAMC,SAASC,cAAcH,GAOnC,OALAC,EAAIM,aAAa,QAASR,EAAO,MACjCE,EAAIM,aAAa,eAAgBlE,SAAS0D,EAAO,GAAI,IAAM,MAE3DS,EAAeP,EAAK,sBAAsB+K,KAEnC/K,CAAG,EAGCQ,GAAU7D,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMwO,EAA+BxO,EAASgK,aAC5C,wBAGF,GAAsB,KAAlBwE,IAAyBA,EAC3B,OAGF,MAAM1L,QAAuBC,EAAW/C,GAExC,GAC6B,SAA3B8C,EAAeE,SACY,MAA3BF,EAAeG,SACe,WAA9BH,EAAeI,WAEf,aAGIrE,IAEN,MAAMoB,EAAeD,EAASE,wBAE9B,GHFcsM,EGEEgC,GHAH7H,SAASwC,EAAgB6F,OGCpC,GAAIpC,EAAa4B,GAAgB,CAC/B,MAAMS,EAAc/M,GAAOjC,EAAaL,MAAO4O,GAE/ClM,SAASgC,KAAK5B,YAAYuM,GAE1B,MAAMxB,QAA2BC,EAAgBuB,EAAajP,IACxDQ,KAAEA,EAAIJ,IAAEA,EAAGR,MAAEA,GAAU6N,EAAmB9L,WAAW,CACzDL,QAAQ,UAGJkD,EAAWyK,EAAa,CAC5BzO,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRR,MAAO,GAAGA,OAEb,KAAM,CACL,MAAMqP,EAAc/M,GAAOjC,EAAaL,MAAO4O,GAE/ClM,SAASgC,KAAK5B,YAAYuM,GAE1B,MAAMxB,QAA2BC,EAAgBuB,EAAajP,IACxDQ,KAAEA,EAAIJ,IAAEA,EAAGR,MAAEA,GAAU6N,EAAmBjM,QAAQ,CACtDF,QAAQ,EACR7B,UjBrDNyP,UiBwDU1K,EAAWyK,EAAa,CAC5BzO,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRR,MAAO,GAAGA,OAEb,MACI,GH1CmB,CAAC6M,GACbD,EAAmBC,GAEpB9F,SAASwC,EAAgBgG,QGuC3BC,CAAaZ,GACtB,GAAI9B,EAAY8B,GAAgB,CAC9B,MAAMS,EAAc/M,GAAOjC,EAAaH,OAAQ0O,GAEhDlM,SAASgC,KAAK5B,YAAYuM,GAE1B,MAAMxB,QAA2BC,EAAgBuB,EAAajP,IACxDQ,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,GAAW2N,EAAmBxL,UAAU,CACzDX,QAAQ,UAGJkD,EAAWyK,EAAa,CAC5BzO,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,OAEd,KAAM,CACL,MAAMmP,EAAc/M,GAAOjC,EAAaH,OAAQ0O,GAEhDlM,SAASgC,KAAK5B,YAAYuM,GAE1B,MAAMxB,QAA2BC,EAAgBuB,EAAajP,IACxDQ,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,GAAW2N,EAAmB3L,SAAS,CACxDR,QAAQ,EACR7B,UjBtFNyP,UiByFU1K,EAAWyK,EAAa,CAC5BzO,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,OAEd,CACF,ECjHI,MAAMuP,GAAU,CAACC,EAAyBC,EAAW,IAC1DC,WAAWF,EAAS,IAAIG,QAAQF,GCGrBrN,GAAS,CAACwN,EAActC,KACnC,MAAM/K,EAAMC,SAASC,cAAc,OAC7BwL,EAAqB,CAAA,EAEd,OAATX,GAA0B,KAATA,IACnBW,EAAmBX,IAAQ,GAG7B,MAAMY,EAAeC,EACnB,wBACAF,GAOF,OAJA1L,EAAIsN,UAAYD,EAEhB9M,EAAeP,EAAK2L,GAEb3L,CAAG,ECnBZ,MCCauN,GAAYC,IACvB,MAAMC,EAAmB,IDFV,SACfC,EACAC,EACAC,GAEA,IAAIC,EAEJ,OAAO,SAAUC,KAAqBC,GACpC,MAKMC,EAAUJ,IAAcC,EAE1BA,GACFI,aAAaJ,GAGfA,EAAUK,YAXI,WACZL,EAAU,KAELD,GAAWF,EAAKS,MAAML,EAASC,EACtC,GAO4BJ,GAExBK,GAASN,EAAKS,MAAML,EAASC,EACnC,CACF,CCpBIK,EAAS,KACPZ,GAAS,GACR,KAELxP,OAAOqQ,oBAAoB,SAAUZ,GACrCzP,OAAOsQ,iBAAiB,SAAUb,EAAiB,ECFxCc,GAAOf,IACU,YAAxBvN,SAASuO,WACXvO,SAASqO,iBAAiB,oBAAoB,KAC5Cd,GAAS,IAIXA,GACD,EAGUiB,GAAO,KAClB,MAAMC,EAAiB,IAAIC,sBAAqB,CAACC,EAAKC,KACpDD,EAAIpT,SAASR,IACPA,EAAG8T,kBAAoB,IACzBC,EAAa/T,EAAGgU,QAChBH,EAASI,UAAUjU,EAAGgU,QACvB,GACD,IAGJ/O,SACG8L,iBACC,4FAEDvQ,SAASR,IACR0T,EAAeQ,QAAQlU,EAAG,IAG9B,MAAMmU,EAAoB,IAAIR,sBAAqB,CAACC,EAAKC,KACvDD,EAAIpT,SAASR,IACPA,EAAG8T,kBAAoB,IACzBM,GAAgBpU,EAAGgU,QACnBH,EAASI,UAAUjU,EAAGgU,QACvB,GACD,IAGJ/O,SAAS8L,iBAAiB,0BAA0BvQ,SAASR,IAC3DmU,EAAkBD,QAAQlU,EAAG,IAG/B,MAAMqU,EAAoB,IAAIV,sBAAqB,CAACC,EAAKC,KACvDD,EAAIpT,SAASR,IACPA,EAAG8T,kBAAoB,IACzBQ,GAAgBtU,EAAGgU,QACnBH,EAASI,UAAUjU,EAAGgU,QACvB,GACD,IAGJ/O,SAAS8L,iBAAiB,0BAA0BvQ,SAASR,IAC3DqU,EAAkBH,QAAQlU,EAAG,GAC7B,EAGSuU,GAAU/B,IACrBxP,OAAOwP,QAAUA,CAAO,EAGbD,GAAYC,IACvB,MAAMgC,EAAUvP,SAASwP,cAEzB,GAAID,EAAS,CACX,MAAME,EAAsBF,EAAQ7H,aAAa,QAG/C+H,IACgD,IAA/CA,EAAoB5N,QAAQ,gBAEmB,IAA9C4N,EAAoB5N,QAAQ,eAE1B0N,EAAQG,aAAa,eACvBJ,GAAO/B,GACEgC,EAAQG,aAAa,gBAC9BnC,IACSgC,EAAQG,aAAa,YAC9BpB,GAAIf,GACKgC,EAAQG,aAAa,aAC9BlB,KAEAF,GAAIf,GAIHgC,EAAQG,aAAa,gBACrBH,EAAQG,aAAa,cAEtBC,GAAgBpC,GAGrB,GC3FU,MAAAqC,GAAUC,EAEVC,wDAEAC,8CAEAC,mDJUUtT,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMuS,EAAuBvS,EAASgK,aAAa,2BAC7ClH,QAAuBC,EAAW/C,GAExC,GAC6B,SAA3B8C,EAAeE,SACY,MAA3BF,EAAeG,SACe,WAA9BH,EAAeI,WAEf,OAGFlD,EAASlC,UAAUC,IAAI,cAEvB,MAAMyU,OKxCgBxT,OAAOgB,IAC7B,MACMyS,EvByDqB,CAC3BpT,IAEA,MAAMqT,WACJA,EAAUC,cACVA,EAAaC,WACbA,EAAUC,SACVA,EAAQC,UACRA,EAASC,sBACTA,EAAqBC,WACrBA,GACE3T,EAEJ,MAAO,CACLqT,aACAC,gBACAC,aACAC,WACAC,YACAC,wBACAC,aACD,EuB9EeC,OADalQ,EAAW/C,IAElCkT,EACsB,WAA1BT,EAAoB,WAChBhU,SAASgU,EAAoB,WAAG,IAAM,GAAK,MAC3C,SAEN,MAKE,+FAAoDA,EAAoB,kEACtBA,EAAkB,cAClEhU,SAASgU,EAAkB,SAAG,IAAM,+DAEcA,EAAoB,gFACRA,EAA+B,+EAC3CA,EAAoB,gBAAOS,8DACxBT,EAAuB,sEAC3BA,EAAmB,uBAGtE,ELgBkBU,CAAiBnT,GAC/BiE,EAAc/B,GAAOsQ,EAAOD,GAElCjQ,SAASgC,KAAK5B,YAAYuB,GAE1B,MAAMmP,OMvCgBpU,OACtBoO,EACApN,EACAqT,KAEA,MAAMpT,EAAeD,EAASE,wBACxBoN,EAAoBC,EAAa8F,GACjCC,EAAmBD,EAAUnT,wBAC7BqT,QAAmBxT,EAAOC,GAC1BwT,EACJD,EAAW/S,KAAO8S,EAAiB1T,MAAQ0N,EAAoB,KAC3DmG,EACJC,GACE7T,EAA2B0T,EAAWnT,IAAKkT,EAAkBrT,IAC3D,KACA0T,EACJJ,EAAW/S,KAAOP,EAAaL,MAAQ0N,EAAoB,KACvDsG,EACJF,GACE7T,EAA2B0T,EAAWnT,IAAKkT,EAAkBrT,IAC3D,KACA4T,EACJH,GACElU,EACE+T,EAAW/S,KACX8S,EACArT,IAEA,KACA6T,EACJP,EAAWnT,IAAMkT,EAAiBxT,OAASwN,EAAoB,KAC3DyG,EACJL,GACElU,EACE+T,EAAW/S,KACX8S,EACArT,IAEA,KACA+T,EACJT,EAAWnT,IAAMH,EAAaH,OAASwN,EAAoB,KAE7D,IAAI8F,EAAY,CACd5S,KAAMgT,EACNpT,IAAKqT,GAoBP,OAjBIrG,IAAiD,IAAzCA,EAAKjJ,QAAQ8E,EAAgB0D,OACvCyG,EAAY,CACV5S,KAAMmT,EACNvT,IAAKwT,GAEExG,IAA+C,IAAvCA,EAAKjJ,QAAQ8E,EAAgBgL,KAC9Cb,EAAY,CACV5S,KAAMqT,EACNzT,IAAK0T,GAEE1G,IAAkD,IAA1CA,EAAKjJ,QAAQ8E,EAAgB4D,UAC9CuG,EAAY,CACV5S,KAAMuT,EACN3T,IAAK4T,IAIFZ,CAAS,ENzBQ3O,CAAiB8N,EAAOvS,EAAUiE,GAE1DO,EAAWP,EAAamP,EAAU,II/BvBc,wEAEPrE,GAAU,KzBlBS,EAACsE,EAAkB9W,EAAeiF,YACzD,GAAGzE,QAAQoH,KAAK5H,EAAG+Q,iBAAiB+F,IAAW,SAAUC,GACvDA,EAAEnK,QACJ,GAAE,EyBgBFoK,CAAe,YAEf,MAAMC,EAAqBhS,SAAS8L,iBAClC,4FAEImG,EAAsBjS,SAAS8L,iBACnC,0BAEIoG,EAAgClS,SAAS8L,iBAC7C,6BAEIqG,EAAuBnS,SAAS8L,iBACpC,0BAGFkG,EAAmBzW,QAAQqU,GAAQrP,SACnC0R,EAAoB1W,QAAQwU,GAAQxP,SACpC2R,EAA8B3W,QAAQyU,GAAWzP,SACjD4R,EAAqB5W,QAAQuU,GAAQvP,QAAQ,EAK/B+M,GAACC"}
|
package/speccer.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before{box-sizing:border-box;font-family:var(--ph-speccer-font-family)!important;font-size:12px;line-height:12px;pointer-events:none;user-select:none;z-index:99999}.ph.speccer,.ph.speccer.dissection,.ph.speccer:after,.ph.speccer:before{align-items:center;display:flex;justify-content:center;position:absolute}.ph.speccer.dissection{background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);line-height:150%;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full.right{border-left:none}.ph.speccer.dissection.outline.full.right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.right:before{left:100%}.ph.speccer.dissection.outline.full.left{border-right:none}.ph.speccer.dissection.outline.full.left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.left:before{right:100%}.ph.speccer.dissection.outline.full.top{border-bottom:none}.ph.speccer.dissection.outline.full.top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.top:before{bottom:100%}.ph.speccer.dissection.outline.full.bottom{border-top:none}.ph.speccer.dissection.outline.full.bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full.bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left,.ph.speccer.dissection.outline.full.right{width:8px}.ph.speccer.dissection.outline.full.bottom,.ph.speccer.dissection.outline.full.top{height:8px}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after,.ph.speccer.dissection.outline.full.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:after,.ph.speccer.dissection.outline.full.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:after,.ph.speccer.dissection.outline.full.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before,.ph.speccer.dissection.outline.full.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:before,.ph.speccer.dissection.outline.full.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:before,.ph.speccer.dissection.outline.full.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.subtle.bottom:after,.ph.speccer.dissection.outline.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.subtle.left:after,.ph.speccer.dissection.outline.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.full.subtle{background-color:initial;border-color:var(--ph-speccer-pin-color);border-style:dashed;border-width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.full.subtle.top{border-bottom:none}.ph.speccer.dissection.outline.full.subtle.bottom{border-top:none}.ph.speccer.dissection.outline.full.subtle.right{border-left:none}.ph.speccer.dissection.outline.full.subtle.left{border-right:none}.ph.speccer.dissection.outline.full.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.full.subtle.bottom:before,.ph.speccer.dissection.outline.full.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.full.subtle.left:before,.ph.speccer.dissection.outline.full.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.enclose.subtle{border-style:dashed}.ph.speccer.dissection.outline.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.enclose.subtle.bottom:before,.ph.speccer.dissection.outline.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.enclose.subtle.left:before,.ph.speccer.dissection.outline.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph.speccer.measure.subtle.height.left,.ph.speccer.measure.subtle.height.right,.ph.speccer.measure.subtle.width.bottom,.ph.speccer.measure.subtle.width.top{border-style:dashed}.ph.speccer.measure.subtle.width.top{border-bottom:none}.ph.speccer.measure.subtle.width.bottom{border-top:none}.ph.speccer.measure.subtle.height.right{border-left:none}.ph.speccer.measure.subtle.height.left{border-right:none}
|
|
1
|
+
.ph.speccer{--ph-speccer-color-padding:#db6fff66;--ph-speccer-color-padding-hover:#db6fff;--ph-speccer-color-margin:#fff76f66;--ph-speccer-color-margin-hover:#fff76f;--ph-speccer-color-text-light:#fff;--ph-speccer-color-text-dark:#333;--ph-speccer-color-contrast:#ff3aa8;--ph-speccer-spacing-color:var(--ph-speccer-color-contrast);--ph-speccer-measure-color:red;--ph-speccer-pin-color:var(--ph-speccer-color-contrast);--ph-speccer-typography-background-color:#fff;--ph-speccer-typography-color-property:#3f85f2;--ph-speccer-typography-color-text:#57575b;--ph-speccer-typography-color-value:var(--ph-speccer-color-contrast);--ph-speccer-depth-opacity-400:0.4;--ph-speccer-font-family:"Menlo for Powerline","Menlo Regular for Powerline","DejaVu Sans Mono",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--ph-speccer-font-size:12px;--ph-speccer-line-height:12px;--ph-speccer-pin-size:24px;--ph-speccer-pin-space:48px;--ph-speccer-line-width:1px;--ph-speccer-line-width-negative:-1px;--ph-speccer-measure-size:8px}.ph.speccer,.ph.speccer:after,.ph.speccer:before,svg.ph{box-sizing:border-box;pointer-events:none;user-select:none}.ph.speccer:after,.ph.speccer:before,.ph.speccer:not(path){align-items:center;display:flex;font-family:var(--ph-speccer-font-family)!important;font-size:12px;justify-content:center;line-height:12px;position:absolute;z-index:99999}#ph-speccer-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:3}svg.ph .ph.path{color:var(--ph-speccer-color-contrast,#ff3aa8)}.ph.speccer.dissection{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);display:flex;font-family:sans-serif;font-size:16px;font-weight:400;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.curly:after,.ph.speccer.dissection.svg:after{content:none!important}.ph.speccer.dissection.outline.left:after{right:auto}.ph.speccer.dissection.outline.right:after{left:auto}.ph.speccer.dissection:after{background-color:var(--ph-speccer-pin-color);content:"";height:var(--ph-speccer-pin-space);position:absolute;top:100%;width:var(--ph-speccer-line-width);z-index:99999}.ph.speccer.dissection.outline.left:after{height:var(--ph-speccer-line-width);left:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.right:after{height:var(--ph-speccer-line-width);right:100%;top:50%;width:var(--ph-speccer-pin-space)}.ph.speccer.dissection.outline.enclose{background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.enclose:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.right:after{left:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));right:auto}.ph.speccer.dissection.outline.enclose.right:before{left:100%;right:auto}.ph.speccer.dissection.outline.enclose.left:after{left:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space));right:auto}.ph.speccer.dissection.outline.enclose.left:before{left:auto;right:100%}.ph.speccer.dissection.outline.enclose.top:after{bottom:auto;top:calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.enclose.top:before{bottom:100%;top:auto}.ph.speccer.dissection.outline.enclose.bottom:after{bottom:auto;top:calc(100% + var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before{bottom:auto;top:100%}.ph.speccer.dissection.outline.full:not(.curly){background-color:initial;border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none;border-radius:0;color:var(--ph-speccer-measure-color)}.ph.speccer.dissection.outline.full:not(.curly):after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly):before{bottom:100%}.ph.speccer.dissection.outline.full:not(.curly).right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-left:none}.ph.speccer.dissection.outline.full:not(.curly).right:after{left:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).right:before{left:100%;right:auto}.ph.speccer.dissection.outline.full:not(.curly).left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-right:none}.ph.speccer.dissection.outline.full:not(.curly).left:after{left:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).left:before{left:auto;right:100%}.ph.speccer.dissection.outline.full:not(.curly).top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-bottom:none}.ph.speccer.dissection.outline.full:not(.curly).top:after{top:calc(-8px - var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).top:before{bottom:100%}.ph.speccer.dissection.outline.full:not(.curly).bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);border-top:none}.ph.speccer.dissection.outline.full:not(.curly).bottom:after{top:calc(8px + var(--ph-speccer-pin-space))}.ph.speccer.dissection.outline.full:not(.curly).bottom:before{top:100%}.ph.speccer.dissection.outline.bottom:after{height:var(--ph-speccer-pin-space);right:50%;top:calc(-100% - var(--ph-speccer-pin-space)/2);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.top:after,.ph.speccer.dissection.outline:after{height:var(--ph-speccer-pin-space);right:50%;top:100%;width:var(--ph-speccer-line-width)}[data-anatomy-section]{counter-reset:type}.ph.speccer.dissection.outline.full.left:not(.curly),.ph.speccer.dissection.outline.full.right:not(.curly){width:8px}.ph.speccer.dissection.outline.full.bottom:not(.curly),.ph.speccer.dissection.outline.full.top:not(.curly),.ph.speccer.dissection.outline.full:not(.curly){height:8px}.ph.speccer.dissection.outline.full.bottom:not(.curly):after,.ph.speccer.dissection.outline.full.left:not(.curly):after,.ph.speccer.dissection.outline.full.right:not(.curly):after,.ph.speccer.dissection.outline.full.top:not(.curly):after,.ph.speccer.dissection.outline.full:not(.curly):after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.full.left:not(.curly):after,.ph.speccer.dissection.outline.full.right:not(.curly):after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.full.bottom:not(.curly):after,.ph.speccer.dissection.outline.full.top:not(.curly):after,.ph.speccer.dissection.outline.full:not(.curly):after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.full.bottom:not(.curly):before,.ph.speccer.dissection.outline.full.left:not(.curly):before,.ph.speccer.dissection.outline.full.right:not(.curly):before,.ph.speccer.dissection.outline.full.top:not(.curly):before,.ph.speccer.dissection.outline.full:not(.curly):before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.full.left:not(.curly):before,.ph.speccer.dissection.outline.full.right:not(.curly):before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.full.bottom:not(.curly):before,.ph.speccer.dissection.outline.full.top:not(.curly):before,.ph.speccer.dissection.outline.full:not(.curly):before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.enclose.left,.ph.speccer.dissection.outline.enclose.right{width:8px}.ph.speccer.dissection.outline.enclose,.ph.speccer.dissection.outline.enclose.bottom,.ph.speccer.dissection.outline.enclose.top{height:8px}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after,.ph.speccer.dissection.outline.enclose.top:after,.ph.speccer.dissection.outline.enclose:after{align-items:center;background-color:var(--ph-speccer-pin-color);border-radius:100%;color:var(--ph-speccer-color-text-light);content:attr(data-dissection-counter);display:flex;font-size:16px;height:var(--ph-speccer-pin-size);justify-content:center;line-height:150%;position:absolute;width:var(--ph-speccer-pin-size);z-index:100000}.ph.speccer.dissection.outline.enclose.left:after,.ph.speccer.dissection.outline.enclose.right:after{top:50%;transform:translateY(-50%)}.ph.speccer.dissection.outline.enclose.bottom:after,.ph.speccer.dissection.outline.enclose.top:after,.ph.speccer.dissection.outline.enclose:after{left:50%;transform:translateX(-50%)}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before,.ph.speccer.dissection.outline.enclose.top:before,.ph.speccer.dissection.outline.enclose:before{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute;z-index:100000}.ph.speccer.dissection.outline.enclose.left:before,.ph.speccer.dissection.outline.enclose.right:before{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))}.ph.speccer.dissection.outline.enclose.bottom:before,.ph.speccer.dissection.outline.enclose.top:before,.ph.speccer.dissection.outline.enclose:before{height:calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width));left:50%;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.dissection.outline.subtle{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color)}.ph.speccer.dissection.outline.subtle.bottom:after,.ph.speccer.dissection.outline.subtle.top:after{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.subtle.left:after,.ph.speccer.dissection.outline.subtle.right:after{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.full.subtle:not(.curly){background-color:initial}.ph.speccer.dissection.outline.full.subtle:not(.curly),.ph.speccer.dissection.outline.full.subtle:not(.curly).top{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-bottom:none}.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-top:none}.ph.speccer.dissection.outline.full.subtle:not(.curly).right{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-left:none}.ph.speccer.dissection.outline.full.subtle:not(.curly).left{border:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);border-right:none}.ph.speccer.dissection.outline.full.subtle:not(.curly):after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.full.subtle:not(.curly).bottom:before,.ph.speccer.dissection.outline.full.subtle:not(.curly).top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.full.subtle:not(.curly).left:before,.ph.speccer.dissection.outline.full.subtle:not(.curly).right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.dissection.outline.enclose.subtle{border-style:dashed}.ph.speccer.dissection.outline.enclose.subtle:after{background-color:var(--ph-speccer-color-text-light);border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color);color:var(--ph-speccer-pin-color);height:var(--ph-speccer-pin-size);width:var(--ph-speccer-pin-size)}.ph.speccer.dissection.outline.enclose.subtle.bottom:before,.ph.speccer.dissection.outline.enclose.subtle.top:before{background-color:initial;border-right:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);width:0}.ph.speccer.dissection.outline.enclose.subtle.left:before,.ph.speccer.dissection.outline.enclose.subtle.right:before{background-color:initial;border-top:var(--ph-speccer-line-width) dashed var(--ph-speccer-pin-color);height:0}.ph.speccer.spacing{border:var(--ph-speccer-line-width) solid #0000;pointer-events:auto;transition:none}.ph.speccer.spacing:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.margin{background-color:var(--ph-speccer-color-margin);color:var(--ph-speccer-color-text-dark)}.ph.speccer.spacing.padding{background-color:var(--ph-speccer-color-padding);color:var(--ph-speccer-spacing-color)}.ph.speccer.spacing.margin.bottom:after,.ph.speccer.spacing.margin.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.margin.bottom:before,.ph.speccer.spacing.margin.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.margin.left:after,.ph.speccer.spacing.margin.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.margin.left:before,.ph.speccer.spacing.margin.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.bottom:after,.ph.speccer.spacing.padding.top:after{border-bottom:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;position:absolute;transition:none;width:9px}.ph.speccer.spacing.padding.bottom:before,.ph.speccer.spacing.padding.top:before{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:100%;left:40%;margin-left:4px;position:absolute;transition:none;width:0}.ph.speccer.spacing.padding.left:after,.ph.speccer.spacing.padding.right:after{border-left:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);border-right:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:9px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.spacing.padding.left:before,.ph.speccer.spacing.padding.right:before{border-top:var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color);content:"";height:0;margin-top:4px;position:absolute;top:10%;transition:none;width:100%}.ph.speccer.typography{background-color:var(--ph-speccer-typography-background-color);color:var(--ph-speccer-typography-color-text);display:block;font-size:10px;line-height:140%;max-width:none;padding:8px;text-align:left;width:auto}.ph.speccer.typography,.ph.speccer.typography:hover{border:var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)}.ph.speccer.typography:after{background-color:var(--ph-speccer-pin-color);content:"";display:block;position:absolute}.ph.speccer.typography.left:after,.ph.speccer.typography:after{left:100%}.ph.speccer.typography.left:after,.ph.speccer.typography.right:after,.ph.speccer.typography:after{height:var(--ph-speccer-line-width);top:50%;transform:translateY(-50%);width:var(--ph-speccer-pin-space)}.ph.speccer.typography.right:after{left:auto;right:100%}.ph.speccer.typography.top:after{top:100%}.ph.speccer.typography.bottom:after,.ph.speccer.typography.top:after{height:var(--ph-speccer-pin-space);left:50%;right:auto;transform:translateX(-50%);width:var(--ph-speccer-line-width)}.ph.speccer.typography.bottom:after{bottom:100%;top:auto}.ph.speccer.typography .speccer-styles{font-size:10px;line-height:140%;list-style:none;margin:0;padding:0 0 0 8px;width:100%}.ph.speccer.typography .speccer-styles .property{color:var(--ph-speccer-typography-color-property);font-size:10px;font-weight:400;margin:0;padding:0;text-align:left}.ph.speccer.typography .speccer-styles>li{border:none;color:var(--ph-speccer-typography-color-value);font-size:10px;font-weight:400;list-style:none;margin:0;padding:0;text-align:left}.ph.speccer.measure{display:flex}.ph.speccer.measure.width{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color);height:var(--ph-speccer-measure-size)}.ph.speccer.measure.width:after{content:attr(data-measure);position:absolute;top:calc(-100% - 10px)}.ph.speccer.measure.width.bottom{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-top:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.bottom:after{content:attr(data-measure);position:absolute;top:calc(100% + 5px)}.ph.speccer.measure.width.top{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-bottom:none;color:var(--ph-speccer-measure-color)}.ph.speccer.measure.width.top:after{bottom:calc(100% + 5px);content:attr(data-measure);position:absolute}.ph.speccer.measure.height.left{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-right:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.left:after{content:attr(data-measure);left:calc(-100% - 20px - var(--ph-speccer-line-width));position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg)}.ph.speccer.measure.height.right{border:var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color);border-left:none;color:var(--ph-speccer-measure-color);width:var(--ph-speccer-measure-size)}.ph.speccer.measure.height.right:after{content:attr(data-measure);left:calc(100% - var(--ph-speccer-measure-size));position:absolute;top:50%;transform:translateY(-50%) rotate(90deg)}.ph.speccer.measure.subtle.height.left,.ph.speccer.measure.subtle.height.right,.ph.speccer.measure.subtle.width.bottom,.ph.speccer.measure.subtle.width.top{border-style:dashed}.ph.speccer.measure.subtle.width.top{border-bottom:none}.ph.speccer.measure.subtle.width.bottom{border-top:none}.ph.speccer.measure.subtle.height.right{border-left:none}.ph.speccer.measure.subtle.height.left{border-right:none}
|