@webqit/webflo 0.20.30 → 0.20.32
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/package.json
CHANGED
|
@@ -266,6 +266,7 @@ export class ToastElement extends HTMLElement {
|
|
|
266
266
|
align-items: center;
|
|
267
267
|
justify-content: center;
|
|
268
268
|
appearance: none;
|
|
269
|
+
font-size: inherit;
|
|
269
270
|
color: gray;
|
|
270
271
|
cursor: pointer;
|
|
271
272
|
border: none;
|
|
@@ -329,13 +330,13 @@ export class ModalElement extends HTMLElement {
|
|
|
329
330
|
|
|
330
331
|
updateScrollViewDimensions() {
|
|
331
332
|
const viewElement = this.shadowRoot.querySelector('.view');
|
|
332
|
-
const
|
|
333
|
-
const
|
|
334
|
-
const
|
|
333
|
+
const headerElement = this.shadowRoot.querySelector('header');
|
|
334
|
+
const headerBoxElement = this.shadowRoot.querySelector('.header-box');
|
|
335
|
+
const footerElement = this.shadowRoot.querySelector('footer');
|
|
335
336
|
requestAnimationFrame(() => {
|
|
336
|
-
viewElement.style.setProperty('--header-box-height',
|
|
337
|
-
viewElement.style.setProperty('--header-
|
|
338
|
-
viewElement.style.setProperty('--footer-
|
|
337
|
+
viewElement.style.setProperty('--header-box-height', headerBoxElement.offsetHeight + 'px');
|
|
338
|
+
viewElement.style.setProperty('--header-max-height', headerElement.offsetHeight + 'px');
|
|
339
|
+
viewElement.style.setProperty('--footer-max-height', footerElement.offsetHeight + 'px');
|
|
339
340
|
if (this.classList.contains('_container')) return;
|
|
340
341
|
viewElement.style.setProperty('--view-width', viewElement.clientWidth/* instead of offsetHeight; safari reasons */ + 'px');
|
|
341
342
|
viewElement.style.setProperty('--view-height', viewElement.clientHeight/* instead of offsetHeight; safari reasons */ + 'px');
|
|
@@ -479,7 +480,7 @@ export class ModalElement extends HTMLElement {
|
|
|
479
480
|
<div class="_content" style="flex-grow: 1">
|
|
480
481
|
<slot
|
|
481
482
|
name="header"
|
|
482
|
-
onslotchange="this.closest('.view').style.setProperty('--header-
|
|
483
|
+
onslotchange="this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');"
|
|
483
484
|
>${this.headerHTML}</slot>
|
|
484
485
|
</div>
|
|
485
486
|
</div>
|
|
@@ -512,7 +513,7 @@ export class ModalElement extends HTMLElement {
|
|
|
512
513
|
<div class="footer-bar" part="footer-bar">
|
|
513
514
|
<slot
|
|
514
515
|
name="footer"
|
|
515
|
-
onslotchange="this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-
|
|
516
|
+
onslotchange="this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-max-height', this.closest('footer').offsetHeight + 'px');"
|
|
516
517
|
>${this.footerHTML}</slot>
|
|
517
518
|
</div>
|
|
518
519
|
</footer>
|
|
@@ -569,14 +570,15 @@ export class ModalElement extends HTMLElement {
|
|
|
569
570
|
--color-error: var(--modal-color-error, whitesmoke);
|
|
570
571
|
--color-warning: var(--modal-color-warning, whitesmoke);
|
|
571
572
|
|
|
572
|
-
--header-color-default: var(--modal-header-color-default,
|
|
573
|
+
--header-color-default: var(--modal-header-color-default, var(--color-default));
|
|
573
574
|
--header-color-info: var(--modal-header-color-info, skyblue);
|
|
574
575
|
--header-color-success: var(--modal-header-color-success, lightgreen);
|
|
575
576
|
--header-color-error: var(--modal-header-color-error, coral);
|
|
576
577
|
--header-background: var(--modal-header-background, var(--background));
|
|
578
|
+
|
|
577
579
|
--header-open-background: var(--modal-header-open-background, var(--header-background));
|
|
578
580
|
|
|
579
|
-
--footer-color-default: var(--modal-footer-color-default,
|
|
581
|
+
--footer-color-default: var(--modal-footer-color-default, var(--color-default));
|
|
580
582
|
--footer-color-info: var(--modal-footer-color-info, skyblue);
|
|
581
583
|
--footer-color-success: var(--modal-footer-color-success, lightgreen);
|
|
582
584
|
--footer-color-error: var(--modal-footer-color-error, coral);
|
|
@@ -618,11 +620,14 @@ export class ModalElement extends HTMLElement {
|
|
|
618
620
|
/* -------- internal, dynamic props (view) -------- */
|
|
619
621
|
|
|
620
622
|
.view {
|
|
623
|
+
--header-max-height: 1.6rem;
|
|
621
624
|
--header-box-height: 0px;
|
|
622
|
-
--
|
|
623
|
-
|
|
625
|
+
--footer-max-height: 0px;
|
|
626
|
+
|
|
627
|
+
--header-min-height: calc(var(--header-max-height) - var(--header-box-height));
|
|
628
|
+
--footer-min-height: var(--footer-max-height);
|
|
624
629
|
|
|
625
|
-
--view-inner-height: calc(var(--view-height) - var(--header-
|
|
630
|
+
--view-inner-height: calc(var(--view-height) - var(--header-min-height) - var(--footer-min-height));
|
|
626
631
|
--total-minmax-length: calc(var(--minmax-length) + var(--swipe-dismiss-length));
|
|
627
632
|
|
|
628
633
|
--y-scroll-effect-exclude: var(--total-minmax-length);
|
|
@@ -995,8 +1000,8 @@ export class ModalElement extends HTMLElement {
|
|
|
995
1000
|
|
|
996
1001
|
.main {
|
|
997
1002
|
flex-grow: 1;
|
|
998
|
-
scroll-margin-top: var(--header-
|
|
999
|
-
scroll-margin-bottom: var(--footer-
|
|
1003
|
+
scroll-margin-top: var(--header-min-height);
|
|
1004
|
+
scroll-margin-bottom: var(--footer-min-height);
|
|
1000
1005
|
scroll-snap-align: var(--scroll-snap-start);
|
|
1001
1006
|
}
|
|
1002
1007
|
|
|
@@ -1030,7 +1035,7 @@ export class ModalElement extends HTMLElement {
|
|
|
1030
1035
|
|
|
1031
1036
|
.scrollport {
|
|
1032
1037
|
position: sticky;
|
|
1033
|
-
top: var(--header-
|
|
1038
|
+
top: var(--header-min-height);
|
|
1034
1039
|
left: 0;
|
|
1035
1040
|
right: 0;
|
|
1036
1041
|
|
|
@@ -1194,6 +1199,7 @@ export class ModalElement extends HTMLElement {
|
|
|
1194
1199
|
align-items: center;
|
|
1195
1200
|
justify-content: center;
|
|
1196
1201
|
appearance: none;
|
|
1202
|
+
font-size: inherit;
|
|
1197
1203
|
color: gray;
|
|
1198
1204
|
cursor: pointer;
|
|
1199
1205
|
border: none;
|
|
@@ -1354,6 +1360,7 @@ export class DialogElement extends ModalElement {
|
|
|
1354
1360
|
padding: 0.5rem 1rem;
|
|
1355
1361
|
cursor: pointer;
|
|
1356
1362
|
transition: all 0.2s;
|
|
1363
|
+
font-size: inherit;
|
|
1357
1364
|
font-weight: bold;
|
|
1358
1365
|
flex-grow: 1;
|
|
1359
1366
|
}
|