@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 CHANGED
@@ -1,18 +1,37 @@
1
- # speccer
1
+ # @phun-ky/speccer
2
+
3
+ ![Image of speccer](./assets/speccer.png)
2
4
 
3
5
  [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/speccer) ![issues](https://img.shields.io/github/issues/phun-ky/speccer) ![license](https://img.shields.io/npm/l/@phun-ky/speccer) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/speccer)
4
6
 
5
7
  > A zero dependency package to show specifications on components in your design system documentation
6
8
 
7
- Speccer was created to make it easier to document components in a design system.
8
-
9
- $ npm i @phun-ky/speccer
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
- See demo here: https://codepen.io/phun-ky/pen/xaOrYX
28
+ Speccer was created to make it easier to document components in a design system.
12
29
 
13
- ![Image of speccer](./assets/speccer.png)
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 <em>and all of it's children</em> padding and margin.
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 data-speccer-measure="[height right|left] | [width top|bottom]" class="..."></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
  ![Image of subtle option for measure](./assets/subtle-measure.png)
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 data-anatomy="outline [full|enclose] [left|right|top|bottom]" class="..."></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
  ![Image of subtle option for anatomy](./assets/subtle.png)
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="...">Some text</div>
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', 'Menlo Regular for Powerline', 'DejaVu Sans Mono', Consolas, Monaco,
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.5",
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 stylus && npm run postcss ",
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 stylus && npm run postcss",
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 master"
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.right {
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.top,
213
- .ph.speccer.dissection.outline.full.bottom {
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.right::after,
217
- .ph.speccer.dissection.outline.full.left::after,
218
- .ph.speccer.dissection.outline.full.top::after,
219
- .ph.speccer.dissection.outline.full.bottom::after {
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.top::after,
240
- .ph.speccer.dissection.outline.full.bottom::after {
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.right::before,
245
- .ph.speccer.dissection.outline.full.left::before,
246
- .ph.speccer.dissection.outline.full.top::before,
247
- .ph.speccer.dissection.outline.full.bottom::before {
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.top::before,
262
- .ph.speccer.dissection.outline.full.bottom::before {
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-width: var(--ph-speccer-line-width);
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":"+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,GET5BC,EAAe,IAAM,IAAIC,QAAQC,uBCDjChB,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,MAAO,EACLC,UAAS,EACTC,eAAeJ,GACM,MACd,CACLd,IAAKS,EAAeT,IAAMkB,EAC1Bd,KAAMa,EAASP,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAIXM,QAAS,EACPF,UAAS,GACY,CAAA,KACd,CACLjB,IAAKS,EAAeT,IACpBI,KAAMa,EAASP,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAIXO,SAAU,EACRH,UAAS,EACTC,eAAeJ,EACfO,eAAeT,GACM,MACd,CACLZ,IAAKS,EAAeT,IAAMqB,EAAeH,EACzCd,KAAMa,EAASP,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAGXS,WAAY,EACVL,UAAS,EACTI,eAAeT,GACM,MACd,CACLZ,IAAKS,EAAeT,IAAMqB,EAC1BjB,KAAMa,EAASP,EAAsBN,KAAOK,EAAeL,KAC3DV,OAAQkB,EACRpB,MAAOqB,IAIXU,OAAQ,EACNN,UAAS,EACTO,cAAcT,EACd1B,WAAW,GACU,MACd,CACLW,IAAKiB,EAASP,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOoB,EAAcnC,EAC1CK,OAAQkB,EACRpB,MAAOqB,IAIXY,SAAU,EACRR,UAAS,GACY,CAAA,KACd,CACLjB,IAAKiB,EAASP,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KACrBV,OAAQkB,EACRpB,MAAOqB,IAIXa,QAAS,EACPT,UAAS,EACTO,cAAcT,EACdY,cAAcd,EACdxB,WAAW,GACU,CAAA,KACd,CACLW,IAAKiB,EAASP,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOuB,EAAcH,EAAcnC,EACxDK,OAAQkB,EACRpB,MAAOqB,IAIXe,UAAW,EACTX,UAAS,EACTU,cAAcd,GACO,MACd,CACLb,IAAKiB,EAASP,EAAsBV,IAAMS,EAAeT,IACzDI,KAAMK,EAAeL,KAAOuB,EAC5BjC,OAAQkB,EACRpB,MAAOqB,IAGZ,EChKUgB,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,EAAU5D,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAM6C,QAAuBC,EAAW9C,GAExC,GAC6B,SAA3B6C,EAAeE,SACY,MAA3BF,EAAeG,SACe,WAA9BH,EAAeI,WAEf,OAGF,MAAMC,EJIkB,CACxB7D,IAEA,MAAM8D,UACJA,EAASC,aACTA,EAAYC,WACZA,EAAUC,YACVA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,YACbA,EAAWC,aACXA,GACErE,EAEJ,MAAO,CACL8D,YACAC,eACAC,aACAC,cACAC,aACAC,gBACAC,cACAC,eACD,EI3B8BC,CAAed,GACxCe,EAAgC1F,OAAOC,KAC3C+E,GACAvF,QAAQkG,GAGU,QAFHX,EAAuBW,KAKK,IAAzCD,EAA8BpG,QAElCoG,EAA8B/F,SAAQmB,MAAO6E,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,GAE1BhE,EAASlC,UAAUC,IAAI,mBC/CHiB,OACtB6E,EACArF,EACA8F,EACAtE,WAEMnB,IAEN,MAAMoB,EAAeD,EAASE,wBACxBW,QAAuBd,EAAOC,GAEnB,cAAb6D,GACFU,EAAWD,EAAW,CACpBxE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM5B,EAAQ,OAIrB,gBAAbqF,GACFU,EAAWD,EAAW,CACpBxE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KAAMK,EAAeL,KAAO/B,SAASwB,EAAaL,MAAQ,GAAI,IAAM,KACpEQ,IAAKS,EAAeT,IAAM,OAIb,iBAAbyD,GACFU,EAAWD,EAAW,CACpBxE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM3B,SAASwB,EAAaH,OAAS,GAAI,IAAM,OAItD,eAAb+D,GACFU,EAAWD,EAAW,CACpBxE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KAAMK,EAAeL,KAAOhC,EAAQ,KACpC4B,IAAKS,EAAeT,IAAM,OAIb,eAAbyD,GACFU,EAAWD,EAAW,CACpBxE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM,OAIb,kBAAbyD,GACFU,EAAWD,EAAW,CACpBxE,OAAQ,GAAGtB,MACXoB,MAAOK,EAAaL,MAAQ,KAC5BY,KAAMK,EAAeL,KAAO,KAC5BJ,IACES,EAAeT,KACd3B,SAASwB,EAAaH,OAAS,GAAI,IAAMtB,GAC1C,OAIW,iBAAbqF,GACFU,EAAWD,EAAW,CACpBxE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KACEK,EAAeL,MACd/B,SAASwB,EAAaL,MAAQ,GAAI,IAAMpB,GACzC,KACF4B,IAAKS,EAAeT,IAAM,OAIb,gBAAbyD,GACFU,EAAWD,EAAW,CACpBxE,OAAQG,EAAaH,OAAS,KAC9BF,MAAO,GAAGpB,MACVgC,KAAMK,EAAeL,KAAO,KAC5BJ,IAAKS,EAAeT,IAAM,MAE7B,EDvCOoE,CAAiBX,EAAUC,EAAQE,EAAahE,EAAS,GAC/D,MEnDQyE,EAQAC,wDARZ,SAAYD,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,KACD,CARD,CAAYA,IAAAA,EAQX,CAAA,ICfM,MAAMC,EAAU,CAACC,EAAyBC,EAAW,IAC1DC,WAAWF,EAAS,IAAIG,QAAQF,GCSrB5F,EAASD,MACpBgG,EACAhF,EACAiF,KAEA,MAAMC,EAAoBC,EAAaF,GACjCG,ERyEN7G,EACEI,iBQ1E2CsG,GR0EtBrG,iBAAiB,+BD7EE,ESI1C,MAAMyG,GAAmD,EAAxBD,EAC3BnF,EAAeD,EAASE,wBACxBoF,EAAsBL,EAAa/E,wBACnCqF,QAAmBxF,EAAOC,GAC1BwF,EACJD,EAAW/E,KAAO8E,EAAoB1F,MAAQsF,EAAoB,KAC9DO,EACJC,EACE7F,EACE0F,EAAWnF,IACXkF,EACArF,IAEA,KAEJsF,EAAW/E,KAAOP,EAAaL,MAE/B8F,EACE7F,EACE0F,EAAWnF,IACXkF,EACArF,IAGN,MAAM0F,EACJD,EACElG,EACE+F,EAAW/E,KACX8E,EACArF,IAEA,KACA2F,EACJL,EAAWnF,IAAMkF,EAAoBxF,OAASoF,EAAoB,KAC9DW,EACJH,EACElG,EACE+F,EAAW/E,KACX8E,EACArF,IAEA,KACA6F,EACJP,EAAWnF,IAAMH,EAAaH,OAASoF,EAAoB,KACvDa,QAA2BC,EAAgBf,EAAcjF,GAE/D,IAAIiG,EAAqB,CAAA,EAEzB,IAA4C,IAAxCjB,EAAKd,QAAQQ,EAAgBwB,MAC/B,IAA4C,IAAxClB,EAAKd,QAAQQ,EAAgByB,MAAc,CAC7C,MAAM3F,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,GAAWiG,EAAmBpE,OAAO,CACtDC,YAAawD,IAGfa,EAAqB,CACnBzF,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,MAEd,MAAM,IAA+C,IAA3CkF,EAAKd,QAAQQ,EAAgB0B,SAAiB,CACvD,MAAM5F,KAAEA,EAAIJ,IAAEA,EAAGN,OAAEA,EAAMF,MAAEA,GAAUmG,EAAmBxE,UAExD0E,EAAqB,CACnBzF,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MACRN,OAAQ,GAAGA,MACXF,MAAO,GAAGA,MAEb,KAAM,CACL,MAAMY,KAAEA,EAAIJ,IAAEA,GAAQ2F,EAAmBpE,OAAO,CAC9CN,QAAQ,EACR5B,SAAUyF,IAGZe,EAAqB,CACnBzF,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MAEX,MACI,IAA6C,IAAzC4E,EAAKd,QAAQQ,EAAgB2B,OACtC,IAA4C,IAAxCrB,EAAKd,QAAQQ,EAAgByB,MAC/BF,EAAqB,CACnBzF,KAAM+E,EAAW/E,KAAOP,EAAaL,MAAQ,KAC7CQ,IAAKmF,EAAWnF,IAAM,KACtBN,OAAQG,EAAaH,OAAS,WAE3B,IAA+C,IAA3CkF,EAAKd,QAAQQ,EAAgB0B,SACtCH,EAAqB,CACnBzF,KAAM+E,EAAW/E,KAAO,KACxBJ,IAAKmF,EAAWnF,IAAM,KACtBN,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,UAEzB,CACL,MAAMY,KAAEA,EAAIJ,IAAEA,GAAQ2F,EAAmB/D,UAAU,CACjDX,QAAQ,EACR5B,SAAUyF,IAGZe,EAAqB,CACnBzF,KAAM,GAAGA,MACTJ,IAAK,GAAGA,MAEX,MAGC6F,GAF8C,IAAvCjB,EAAKd,QAAQQ,EAAgB4B,MACM,IAAxCtB,EAAKd,QAAQQ,EAAgByB,MACV,CACnB/F,IAAKmF,EAAWnF,IAAMiF,EAA2B,KACjD7E,KAAM+E,EAAW/E,KAAO,KACxBZ,MAAOK,EAAaL,MAAQ,OAEsB,IAA3CoF,EAAKd,QAAQQ,EAAgB0B,SACjB,CACnBhG,IAAKmF,EAAWnF,IAAM,KACtBI,KAAM+E,EAAW/E,KAAO,KACxBV,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBY,KAAMmF,EACNvF,IAAKwF,IAG0C,IAA1CZ,EAAKd,QAAQQ,EAAgB6B,SACM,IAAxCvB,EAAKd,QAAQQ,EAAgByB,MACV,CACnB/F,IAAKmF,EAAWnF,IAAMH,EAAaH,OAAS,KAC5CU,KAAM+E,EAAW/E,KAAO,KACxBZ,MAAOK,EAAaL,MAAQ,OAEsB,IAA3CoF,EAAKd,QAAQQ,EAAgB0B,SACjB,CACnBhG,IAAKmF,EAAWnF,IAAM,KACtBI,KAAM+E,EAAW/E,KAAO,KACxBV,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBY,KAAMqF,EACNzF,IAAK0F,IAImC,IAAxCd,EAAKd,QAAQQ,EAAgByB,MACV,CACnB3F,KAAM+E,EAAW/E,KAAOP,EAAaL,MAAQ,KAC7CQ,IAAKmF,EAAWnF,IAAM,KACtBN,OAAQG,EAAaH,OAAS,OAEoB,IAA3CkF,EAAKd,QAAQQ,EAAgB0B,SACjB,CACnB5F,KAAM+E,EAAW/E,KAAOP,EAAaL,MAAQ,KAC7CQ,IAAKmF,EAAWnF,IAAM,KACtBN,OAAQG,EAAaH,OAAS,KAC9BF,MAAOK,EAAaL,MAAQ,MAGT,CACnBY,KAAMgF,EACNpF,IAAKqF,GAKX,OAAOQ,CAAkB,ECjLdhE,EAAS,CAACuE,EAAc,GAAIxB,EAAcyB,EAAI,UACzD,MAAMrE,EAAMC,SAASC,cAAcmE,GAC7BC,EAAarE,SAASG,eAAegE,GACrCG,EAAqB,CAAA,EAEd,OAAT3B,GAA0B,KAATA,IACnB2B,EAAmB3B,IAAQ,IAIa,IAAxCA,EAAKd,QAAQQ,EAAgByB,QACc,IAA3CnB,EAAKd,QAAQQ,EAAgB0B,SAE7BhE,EAAIK,YAAYiE,IAEwB,IAAxC1B,EAAKd,QAAQQ,EAAgByB,QACc,IAA3CnB,EAAKd,QAAQQ,EAAgB0B,UAE7BhE,EAAIM,aAAa,0BAA2B8D,GAG9C,MAAMI,EAAeC,EACnB,wBACAF,GAKF,OAFAhE,EAAeP,EAAKwE,GAEbxE,CAAG,EAGCQ,EAAWkE,IACtB,IAAKA,EAAW,OAEhB,MAAMC,EAAkBD,EAAUE,iBAAiB,kBAE/CD,GACFA,EAAgBlJ,SAAQmB,MAAOgB,EAAuBiH,KACpD,IAAKjH,EAAU,OAEf,MAAMkH,EAAuBlH,EAASmH,aAAa,iBAAmB,GAEtE,IACGD,GACS,KAAVA,IAC4C,IAA5CA,EAAMhD,QAAQQ,EAAgB0C,SAE9B,OAEF,MAAMC,EAAiBpF,EAAO3D,EAAiB2I,GAAcC,GAE7D7E,SAASgC,KAAK5B,YAAY4E,GAE1B,MAAMpB,QAA2BqB,EAC/BJ,EACAlH,EACAqH,GAGF9C,EAAW8C,EAAgBpB,EAAmB,GAEjD,EC/DH,MAAMhE,EAAS,CACbC,EAAwB,GACxB8C,EAAsB,GACtB7C,EAAM,UAEN,MAAMC,EAAMC,SAASC,cAAcH,GAOnC,OALAC,EAAIM,aAAa,QAASR,EAAO,MACjCE,EAAIM,aAAa,eAAgBjE,SAASyD,EAAO,GAAI,IAAM,MAE3DS,EAAeP,EAAK,sBAAsB4C,KAEnC5C,CAAG,EAGCQ,EAAU5D,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMkH,EAAuBlH,EAASmH,aAAa,wBAEnD,GAAc,KAAVD,IAAiBA,EACnB,OAGF,MAAMrE,QAAuBC,EAAW9C,GAExC,GAC6B,SAA3B6C,EAAeE,SACY,MAA3BF,EAAeG,SACe,WAA9BH,EAAeI,WAEf,aAGIpE,IAEN,MAAMoB,EAAeD,EAASE,wBACxBC,EAAiBF,EAAaG,IAAMC,OAAOC,YAC3CC,EAAkBN,EAAaO,KAAOH,OAAOI,YAEnD,IAAgC,IAA5ByG,EAAMhD,QAAQ,SAChB,IAAiC,IAA7BgD,EAAMhD,QAAQ,UAAkB,CAClC,MAAMqD,EAActF,EAAOhC,EAAaL,MAAOsH,GAE/C7E,SAASgC,KAAK5B,YAAY8E,GAE1BhD,EAAWgD,EAAa,CACtB/G,KAAMD,EAAkB,KACxBH,IAAKD,EAAiBF,EAAaH,OAAS,EAAI,KAChDF,MAAOK,EAAaL,MAAQ,MAE/B,KAAM,CACL,MAAM2H,EAActF,EAAOhC,EAAaL,MAAOsH,GAE/C7E,SAASgC,KAAK5B,YAAY8E,GAE1B,MAAMC,EAAgBD,EAAYrH,wBAElCqE,EAAWgD,EAAa,CACtB/G,KAAMD,EAAkB,KACxBH,IAAKD,EAAiBqH,EAAc1H,OAAS,EAAI,KACjDF,MAAOK,EAAaL,MAAQ,MAE/B,MACI,IAAiC,IAA7BsH,EAAMhD,QAAQ,UACvB,IAAgC,IAA5BgD,EAAMhD,QAAQ,SAAiB,CACjC,MAAMqD,EAActF,EAAOhC,EAAaH,OAAQoH,GAEhD7E,SAASgC,KAAK5B,YAAY8E,GAE1BhD,EAAWgD,EAAa,CACtB/G,KAAMD,EAAkBN,EAAaL,MAAQ,KAC7CQ,IAAKD,EAAiB,KACtBL,OAAQG,EAAaH,OAAS,MAEjC,KAAM,CACL,MAAMyH,EAActF,EAAOhC,EAAaH,OAAQoH,GAEhD7E,SAASgC,KAAK5B,YAAY8E,GAE1B,MAAMC,EAAgBD,EAAYrH,wBAElCqE,EAAWgD,EAAa,CACtB/G,KAAMD,EAAkBiH,EAAc5H,MAAQ,KAC9CQ,IAAKD,EAAiB,KACtBL,OAAQG,EAAaH,OAAS,MAEjC,CACF,ECtFI,MCFMmC,EAAS,CAACwF,EAAczC,KACnC,MAAM5C,EAAMC,SAASC,cAAc,OAC7BqE,EAAqB,CAAA,EAEd,OAAT3B,GAA0B,KAATA,IACnB2B,EAAmB3B,IAAQ,GAG7B,MAAM4B,EAAeC,EACnB,wBACAF,GAOF,OAJAvE,EAAIsF,UAAYD,EAEhB9E,EAAeP,EAAKwE,GAEbxE,CAAG,EClBL,MAAMuF,EAAYC,IACvB,MAAMC,EAAmB,IZAV,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,CYtBIK,EAAS,KACPZ,GAAS,GACR,KAELvH,OAAOoI,oBAAoB,SAAUZ,GACrCxH,OAAOqI,iBAAiB,SAAUb,EAAiB,ECFxCc,EAAOf,IACU,YAAxBvF,SAASuG,WACXvG,SAASqG,iBAAiB,oBAAoB,KAC5Cd,GAAS,IAIXA,GACD,EAGUiB,EAAO,KAClB,MAAMC,EAAiB,IAAIC,sBAAqB,CAACC,EAAKC,KACpDD,EAAInL,SAASR,IACPA,EAAG6L,kBAAoB,IACzBC,EAAa9L,EAAG+L,QAChBH,EAASI,UAAUhM,EAAG+L,QACvB,GACD,IAGJ/G,SACG2E,iBACC,4FAEDnJ,SAASR,IACRyL,EAAeQ,QAAQjM,EAAG,IAG9B,MAAMkM,EAAoB,IAAIR,sBAAqB,CAACC,EAAKC,KACvDD,EAAInL,SAASR,IACPA,EAAG6L,kBAAoB,IACzBM,EAAgBnM,EAAG+L,QACnBH,EAASI,UAAUhM,EAAG+L,QACvB,GACD,IAGJ/G,SAAS2E,iBAAiB,0BAA0BnJ,SAASR,IAC3DkM,EAAkBD,QAAQjM,EAAG,IAG/B,MAAMoM,EAAoB,IAAIV,sBAAqB,CAACC,EAAKC,KACvDD,EAAInL,SAASR,IACPA,EAAG6L,kBAAoB,IACzBQ,EAAgBrM,EAAG+L,QACnBH,EAASI,UAAUhM,EAAG+L,QACvB,GACD,IAGJ/G,SAAS2E,iBAAiB,0BAA0BnJ,SAASR,IAC3DoM,EAAkBH,QAAQjM,EAAG,GAC7B,EAGSsM,EAAU/B,IACrBvH,OAAOuH,QAAUA,CAAO,EAGbD,EAAYC,IACvB,MAAMgC,EAAUvH,SAASwH,cAEzB,GAAID,EAAS,CACX,MAAME,EAAsBF,EAAQzC,aAAa,QAG/C2C,IACgD,IAA/CA,EAAoB5F,QAAQ,gBAEmB,IAA9C4F,EAAoB5F,QAAQ,eAE1B0F,EAAQG,aAAa,eACvBJ,EAAO/B,GACEgC,EAAQG,aAAa,gBAC9BnC,IACSgC,EAAQG,aAAa,YAC9BpB,EAAIf,GACKgC,EAAQG,aAAa,aAC9BlB,IAEAF,EAAIf,GAIHgC,EAAQG,aAAa,gBACrBH,EAAQG,aAAa,cAEtBC,EAAgBpC,GAGrB,GC3FU,MAAAqC,EAAUC,EAEVC,qDAEAC,4CAEAC,iDHUUrL,MAAOgB,IAC5B,IAAKA,EAAU,OAEf,MAAMkH,EAAuBlH,EAASmH,aAAa,2BAC7CtE,QAAuBC,EAAW9C,GAExC,GAC6B,SAA3B6C,EAAeE,SACY,MAA3BF,EAAeG,SACe,WAA9BH,EAAeI,WAEf,OAGFjD,EAASlC,UAAUC,IAAI,cAEvB,MAAMuM,OIxCgBtL,OAAOgB,IAC7B,MACMuK,EhByDqB,CAC3BlL,IAEA,MAAMmL,WACJA,EAAUC,cACVA,EAAaC,WACbA,EAAUC,SACVA,EAAQC,UACRA,EAASC,sBACTA,EAAqBC,WACrBA,GACEzL,EAEJ,MAAO,CACLmL,aACAC,gBACAC,aACAC,WACAC,YACAC,wBACAC,aACD,EgB9EeC,OADajI,EAAW9C,IAElCgL,EACsB,WAA1BT,EAAoB,WAChB9L,SAAS8L,EAAoB,WAAG,IAAM,GAAK,MAC3C,SAEN,MAKE,+FAAoDA,EAAoB,kEACtBA,EAAkB,cAClE9L,SAAS8L,EAAkB,SAAG,IAAM,+DAEcA,EAAoB,gFACRA,EAA+B,+EAC3CA,EAAoB,gBAAOS,8DACxBT,EAAuB,sEAC3BA,EAAmB,uBAGtE,EJgBkBU,CAAiBjL,GAC/BgE,EAAc/B,EAAOqI,EAAOpD,GAElC7E,SAASgC,KAAK5B,YAAYuB,GAE1B,MAAMkH,ODvCgBlM,OACtBgG,EACAhF,EACAmL,KAEA,MAAMlL,EAAeD,EAASE,wBACxBgF,EAAoBC,EAAagG,GACjCC,EAAmBD,EAAUjL,wBAC7BqF,QAAmBxF,EAAOC,GAC1BwF,EACJD,EAAW/E,KAAO4K,EAAiBxL,MAAQsF,EAAoB,KAC3DO,EACJC,EACE7F,EAA2B0F,EAAWnF,IAAKgL,EAAkBnL,IAC3D,KACAoL,EACJ9F,EAAW/E,KAAOP,EAAaL,MAAQsF,EAAoB,KACvDoG,EACJ5F,EACE7F,EAA2B0F,EAAWnF,IAAKgL,EAAkBnL,IAC3D,KACA0F,EACJD,EACElG,EACE+F,EAAW/E,KACX4K,EACAnL,IAEA,KACA2F,EACJL,EAAWnF,IAAMgL,EAAiBtL,OAASoF,EAAoB,KAC3DW,EACJH,EACElG,EACE+F,EAAW/E,KACX4K,EACAnL,IAEA,KACA6F,EACJP,EAAWnF,IAAMH,EAAaH,OAASoF,EAAoB,KAE7D,IAAIgG,EAAY,CACd1K,KAAMgF,EACNpF,IAAKqF,GAoBP,OAjBIT,IAAiD,IAAzCA,EAAKd,QAAQO,EAAgB4B,OACvC6E,EAAY,CACV1K,KAAM6K,EACNjL,IAAKkL,GAEEtG,IAA+C,IAAvCA,EAAKd,QAAQO,EAAgB6B,KAC9C4E,EAAY,CACV1K,KAAMmF,EACNvF,IAAKwF,GAEEZ,IAAkD,IAA1CA,EAAKd,QAAQO,EAAgB8B,UAC9C2E,EAAY,CACV1K,KAAMqF,EACNzF,IAAK0F,IAIFoF,CAAS,ECzBQ1G,CAAiB0C,EAAOlH,EAAUgE,GAE1DO,EAAWP,EAAakH,EAAU,IG/BvBK,mEAEP3D,EAAU,KlBlBS,EAAC4D,EAAkBnO,EAAegF,YACzD,GAAGxE,QAAQ4N,KAAKpO,EAAG2J,iBAAiBwE,IAAW,SAAUE,GACvDA,EAAEC,QACJ,GAAE,EkBgBFC,CAAe,YAEf,MAAMC,EAAqBxJ,SAAS2E,iBAClC,4FAEI8E,EAAsBzJ,SAAS2E,iBACnC,0BAEI+E,EAAgC1J,SAAS2E,iBAC7C,6BAEIgF,EAAuB3J,SAAS2E,iBACpC,0BAGF6E,EAAmBhO,QAAQoM,EAAQrH,SACnCkJ,EAAoBjO,QAAQuM,EAAQxH,SACpCmJ,EAA8BlO,QAAQwM,EAAWzH,SACjDoJ,EAAqBnO,QAAQsM,EAAQvH,QAAQ,EAK/B+E,EAACC"}
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":"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"}
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}