@pacem/pacem-ui 2.0.0-goldbach → 2.0.0-hadamard
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/dist/browser/pacem-ui.js +228 -145
- package/dist/browser/pacem-ui.js.map +1 -1
- package/dist/browser/pacem-ui.min.js +2 -2
- package/dist/bundle/pacem-ui.min.mjs +71 -71
- package/dist/bundle/pacem-ui.mjs +282 -226
- package/dist/bundle/pacem-ui.mjs.map +4 -4
- package/dist/docs/pacem-ui.json +171 -149
- package/dist/esm/adapter.js +1 -1
- package/dist/esm/anchor.js +1 -1
- package/dist/esm/balloon.js +94 -28
- package/dist/esm/binder.js +1 -1
- package/dist/esm/blade.js +1 -1
- package/dist/esm/bottom-sheet.js +1 -1
- package/dist/esm/button.js +4 -5
- package/dist/esm/buttonset.js +1 -1
- package/dist/esm/calendar.js +1 -1
- package/dist/esm/collapse.js +1 -1
- package/dist/esm/dialog-abstractions.js +17 -5
- package/dist/esm/dialog.js +1 -1
- package/dist/esm/divider.js +1 -1
- package/dist/esm/icon.js +1 -1
- package/dist/esm/image.js +1 -1
- package/dist/esm/index-components-ui.js +1 -1
- package/dist/esm/index-components.js +1 -1
- package/dist/esm/index-iife.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/infinite-scroller.js +1 -1
- package/dist/esm/iterative.js +1 -1
- package/dist/esm/lightbox-abstractions.js +1 -1
- package/dist/esm/lightbox.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/markdown-svc.js +1 -1
- package/dist/esm/markdown.js +1 -1
- package/dist/esm/marquee.js +1 -1
- package/dist/esm/media-query.js +1 -1
- package/dist/esm/menu.js +1 -1
- package/dist/esm/pager.js +1 -1
- package/dist/esm/picture.js +1 -1
- package/dist/esm/progressbar.js +1 -1
- package/dist/esm/sidebar.js +1 -1
- package/dist/esm/slideshow.js +1 -1
- package/dist/esm/social-twitter.js +1 -1
- package/dist/esm/sticky-header.js +1 -1
- package/dist/esm/tabs.js +1 -1
- package/dist/esm/ticker.js +5 -2
- package/dist/esm/toast.js +1 -1
- package/dist/esm/toc.js +1 -1
- package/dist/esm/tuner.js +1 -1
- package/dist/esm/types.js +1 -1
- package/dist/esm/vibration.js +1 -1
- package/dist/esm/view.js +1 -1
- package/dist/esm/window.js +1 -1
- package/package.json +1 -1
- package/typings/index.d.ts +47 -10
package/dist/docs/pacem-ui.json
CHANGED
|
@@ -503,6 +503,33 @@
|
|
|
503
503
|
"endIndex": 0
|
|
504
504
|
}
|
|
505
505
|
},
|
|
506
|
+
{
|
|
507
|
+
"kind": "Variable",
|
|
508
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.AVAILABLE_HEIGHT_VAR:var",
|
|
509
|
+
"docComment": "/**\n * CSS custom property a balloon publishes on itself when placed: the room left (px) on its side of the target, within the viewport, so that its contents can fit (e.g. `max-height: var(--pacem-balloon-available-height)` on a scrolling list). Updated whenever the balloon repositions (scroll, resize, when tracking).\n */\n",
|
|
510
|
+
"excerptTokens": [
|
|
511
|
+
{
|
|
512
|
+
"kind": "Content",
|
|
513
|
+
"text": "AVAILABLE_HEIGHT_VAR = "
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"kind": "Content",
|
|
517
|
+
"text": "\"--pacem-balloon-available-height\""
|
|
518
|
+
}
|
|
519
|
+
],
|
|
520
|
+
"fileUrlPath": "dist/types/balloon.d.ts",
|
|
521
|
+
"initializerTokenRange": {
|
|
522
|
+
"startIndex": 1,
|
|
523
|
+
"endIndex": 2
|
|
524
|
+
},
|
|
525
|
+
"isReadonly": true,
|
|
526
|
+
"releaseTag": "Public",
|
|
527
|
+
"name": "AVAILABLE_HEIGHT_VAR",
|
|
528
|
+
"variableTypeTokenRange": {
|
|
529
|
+
"startIndex": 0,
|
|
530
|
+
"endIndex": 0
|
|
531
|
+
}
|
|
532
|
+
},
|
|
506
533
|
{
|
|
507
534
|
"kind": "Enum",
|
|
508
535
|
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonAlignment:enum",
|
|
@@ -709,7 +736,7 @@
|
|
|
709
736
|
{
|
|
710
737
|
"kind": "Reference",
|
|
711
738
|
"text": "BalloonPosition",
|
|
712
|
-
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:
|
|
739
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:type"
|
|
713
740
|
},
|
|
714
741
|
{
|
|
715
742
|
"kind": "Content",
|
|
@@ -740,7 +767,16 @@
|
|
|
740
767
|
},
|
|
741
768
|
{
|
|
742
769
|
"kind": "Content",
|
|
743
|
-
"text": ";\n autoAdjust?: boolean;\n
|
|
770
|
+
"text": ";\n autoAdjust?: boolean;\n prefer?: "
|
|
771
|
+
},
|
|
772
|
+
{
|
|
773
|
+
"kind": "Reference",
|
|
774
|
+
"text": "BalloonPlacement",
|
|
775
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPlacement:type"
|
|
776
|
+
},
|
|
777
|
+
{
|
|
778
|
+
"kind": "Content",
|
|
779
|
+
"text": ";\n}"
|
|
744
780
|
},
|
|
745
781
|
{
|
|
746
782
|
"kind": "Content",
|
|
@@ -752,7 +788,74 @@
|
|
|
752
788
|
"name": "BalloonOptions",
|
|
753
789
|
"typeTokenRange": {
|
|
754
790
|
"startIndex": 1,
|
|
755
|
-
"endIndex":
|
|
791
|
+
"endIndex": 14
|
|
792
|
+
}
|
|
793
|
+
},
|
|
794
|
+
{
|
|
795
|
+
"kind": "TypeAlias",
|
|
796
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPlacement:type",
|
|
797
|
+
"docComment": "/**\n * A side of `target` a {@link PacemBalloonElement} can sit on.\n */\n",
|
|
798
|
+
"excerptTokens": [
|
|
799
|
+
{
|
|
800
|
+
"kind": "Content",
|
|
801
|
+
"text": "export declare type BalloonPlacement = "
|
|
802
|
+
},
|
|
803
|
+
{
|
|
804
|
+
"kind": "Content",
|
|
805
|
+
"text": "typeof "
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
"kind": "Reference",
|
|
809
|
+
"text": "BalloonPlacement",
|
|
810
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPlacement:var"
|
|
811
|
+
},
|
|
812
|
+
{
|
|
813
|
+
"kind": "Content",
|
|
814
|
+
"text": "[keyof typeof "
|
|
815
|
+
},
|
|
816
|
+
{
|
|
817
|
+
"kind": "Reference",
|
|
818
|
+
"text": "BalloonPlacement",
|
|
819
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPlacement:var"
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
"kind": "Content",
|
|
823
|
+
"text": "]"
|
|
824
|
+
},
|
|
825
|
+
{
|
|
826
|
+
"kind": "Content",
|
|
827
|
+
"text": ";"
|
|
828
|
+
}
|
|
829
|
+
],
|
|
830
|
+
"fileUrlPath": "dist/types/balloon.d.ts",
|
|
831
|
+
"releaseTag": "Public",
|
|
832
|
+
"name": "BalloonPlacement",
|
|
833
|
+
"typeTokenRange": {
|
|
834
|
+
"startIndex": 1,
|
|
835
|
+
"endIndex": 6
|
|
836
|
+
}
|
|
837
|
+
},
|
|
838
|
+
{
|
|
839
|
+
"kind": "Variable",
|
|
840
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPlacement:var",
|
|
841
|
+
"docComment": "/**\n * A side of `target` a {@link PacemBalloonElement} can sit on.\n */\n",
|
|
842
|
+
"excerptTokens": [
|
|
843
|
+
{
|
|
844
|
+
"kind": "Content",
|
|
845
|
+
"text": "BalloonPlacement: "
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
"kind": "Content",
|
|
849
|
+
"text": "{\n readonly Top: 'top';\n readonly Left: 'left';\n readonly Bottom: 'bottom';\n readonly Right: 'right';\n}"
|
|
850
|
+
}
|
|
851
|
+
],
|
|
852
|
+
"fileUrlPath": "dist/types/balloon.d.ts",
|
|
853
|
+
"isReadonly": true,
|
|
854
|
+
"releaseTag": "Public",
|
|
855
|
+
"name": "BalloonPlacement",
|
|
856
|
+
"variableTypeTokenRange": {
|
|
857
|
+
"startIndex": 1,
|
|
858
|
+
"endIndex": 2
|
|
756
859
|
}
|
|
757
860
|
},
|
|
758
861
|
{
|
|
@@ -810,168 +913,71 @@
|
|
|
810
913
|
}
|
|
811
914
|
},
|
|
812
915
|
{
|
|
813
|
-
"kind": "
|
|
814
|
-
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:
|
|
916
|
+
"kind": "TypeAlias",
|
|
917
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:type",
|
|
815
918
|
"docComment": "/**\n * Side of `target` a {@link PacemBalloonElement} is anchored to (with automatic variants that pick the side with the most room).\n */\n",
|
|
816
919
|
"excerptTokens": [
|
|
817
920
|
{
|
|
818
921
|
"kind": "Content",
|
|
819
|
-
"text": "export declare
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"fileUrlPath": "dist/types/balloon.d.ts",
|
|
823
|
-
"releaseTag": "Public",
|
|
824
|
-
"name": "BalloonPosition",
|
|
825
|
-
"preserveMemberOrder": false,
|
|
826
|
-
"members": [
|
|
922
|
+
"text": "export declare type BalloonPosition = "
|
|
923
|
+
},
|
|
827
924
|
{
|
|
828
|
-
"kind": "
|
|
829
|
-
"
|
|
830
|
-
"docComment": "",
|
|
831
|
-
"excerptTokens": [
|
|
832
|
-
{
|
|
833
|
-
"kind": "Content",
|
|
834
|
-
"text": "Auto = "
|
|
835
|
-
},
|
|
836
|
-
{
|
|
837
|
-
"kind": "Content",
|
|
838
|
-
"text": "\"auto\""
|
|
839
|
-
}
|
|
840
|
-
],
|
|
841
|
-
"initializerTokenRange": {
|
|
842
|
-
"startIndex": 1,
|
|
843
|
-
"endIndex": 2
|
|
844
|
-
},
|
|
845
|
-
"releaseTag": "Public",
|
|
846
|
-
"name": "Auto"
|
|
925
|
+
"kind": "Content",
|
|
926
|
+
"text": "typeof "
|
|
847
927
|
},
|
|
848
928
|
{
|
|
849
|
-
"kind": "
|
|
850
|
-
"
|
|
851
|
-
"
|
|
852
|
-
"excerptTokens": [
|
|
853
|
-
{
|
|
854
|
-
"kind": "Content",
|
|
855
|
-
"text": "Bottom = "
|
|
856
|
-
},
|
|
857
|
-
{
|
|
858
|
-
"kind": "Content",
|
|
859
|
-
"text": "\"bottom\""
|
|
860
|
-
}
|
|
861
|
-
],
|
|
862
|
-
"initializerTokenRange": {
|
|
863
|
-
"startIndex": 1,
|
|
864
|
-
"endIndex": 2
|
|
865
|
-
},
|
|
866
|
-
"releaseTag": "Public",
|
|
867
|
-
"name": "Bottom"
|
|
929
|
+
"kind": "Reference",
|
|
930
|
+
"text": "BalloonPosition",
|
|
931
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:var"
|
|
868
932
|
},
|
|
869
933
|
{
|
|
870
|
-
"kind": "
|
|
871
|
-
"
|
|
872
|
-
"docComment": "",
|
|
873
|
-
"excerptTokens": [
|
|
874
|
-
{
|
|
875
|
-
"kind": "Content",
|
|
876
|
-
"text": "HorizontalAuto = "
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
"kind": "Content",
|
|
880
|
-
"text": "\"x\""
|
|
881
|
-
}
|
|
882
|
-
],
|
|
883
|
-
"initializerTokenRange": {
|
|
884
|
-
"startIndex": 1,
|
|
885
|
-
"endIndex": 2
|
|
886
|
-
},
|
|
887
|
-
"releaseTag": "Public",
|
|
888
|
-
"name": "HorizontalAuto"
|
|
934
|
+
"kind": "Content",
|
|
935
|
+
"text": "[keyof typeof "
|
|
889
936
|
},
|
|
890
937
|
{
|
|
891
|
-
"kind": "
|
|
892
|
-
"
|
|
893
|
-
"
|
|
894
|
-
"excerptTokens": [
|
|
895
|
-
{
|
|
896
|
-
"kind": "Content",
|
|
897
|
-
"text": "Left = "
|
|
898
|
-
},
|
|
899
|
-
{
|
|
900
|
-
"kind": "Content",
|
|
901
|
-
"text": "\"left\""
|
|
902
|
-
}
|
|
903
|
-
],
|
|
904
|
-
"initializerTokenRange": {
|
|
905
|
-
"startIndex": 1,
|
|
906
|
-
"endIndex": 2
|
|
907
|
-
},
|
|
908
|
-
"releaseTag": "Public",
|
|
909
|
-
"name": "Left"
|
|
938
|
+
"kind": "Reference",
|
|
939
|
+
"text": "BalloonPosition",
|
|
940
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:var"
|
|
910
941
|
},
|
|
911
942
|
{
|
|
912
|
-
"kind": "
|
|
913
|
-
"
|
|
914
|
-
"docComment": "",
|
|
915
|
-
"excerptTokens": [
|
|
916
|
-
{
|
|
917
|
-
"kind": "Content",
|
|
918
|
-
"text": "Right = "
|
|
919
|
-
},
|
|
920
|
-
{
|
|
921
|
-
"kind": "Content",
|
|
922
|
-
"text": "\"right\""
|
|
923
|
-
}
|
|
924
|
-
],
|
|
925
|
-
"initializerTokenRange": {
|
|
926
|
-
"startIndex": 1,
|
|
927
|
-
"endIndex": 2
|
|
928
|
-
},
|
|
929
|
-
"releaseTag": "Public",
|
|
930
|
-
"name": "Right"
|
|
943
|
+
"kind": "Content",
|
|
944
|
+
"text": "]"
|
|
931
945
|
},
|
|
932
946
|
{
|
|
933
|
-
"kind": "
|
|
934
|
-
"
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
"
|
|
947
|
+
"kind": "Content",
|
|
948
|
+
"text": ";"
|
|
949
|
+
}
|
|
950
|
+
],
|
|
951
|
+
"fileUrlPath": "dist/types/balloon.d.ts",
|
|
952
|
+
"releaseTag": "Public",
|
|
953
|
+
"name": "BalloonPosition",
|
|
954
|
+
"typeTokenRange": {
|
|
955
|
+
"startIndex": 1,
|
|
956
|
+
"endIndex": 6
|
|
957
|
+
}
|
|
958
|
+
},
|
|
959
|
+
{
|
|
960
|
+
"kind": "Variable",
|
|
961
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.BalloonPosition:var",
|
|
962
|
+
"docComment": "/**\n * Side of `target` a {@link PacemBalloonElement} is anchored to (with automatic variants that pick the side with the most room).\n */\n",
|
|
963
|
+
"excerptTokens": [
|
|
964
|
+
{
|
|
965
|
+
"kind": "Content",
|
|
966
|
+
"text": "BalloonPosition: "
|
|
952
967
|
},
|
|
953
968
|
{
|
|
954
|
-
"kind": "
|
|
955
|
-
"
|
|
956
|
-
"docComment": "",
|
|
957
|
-
"excerptTokens": [
|
|
958
|
-
{
|
|
959
|
-
"kind": "Content",
|
|
960
|
-
"text": "VerticalAuto = "
|
|
961
|
-
},
|
|
962
|
-
{
|
|
963
|
-
"kind": "Content",
|
|
964
|
-
"text": "\"y\""
|
|
965
|
-
}
|
|
966
|
-
],
|
|
967
|
-
"initializerTokenRange": {
|
|
968
|
-
"startIndex": 1,
|
|
969
|
-
"endIndex": 2
|
|
970
|
-
},
|
|
971
|
-
"releaseTag": "Public",
|
|
972
|
-
"name": "VerticalAuto"
|
|
969
|
+
"kind": "Content",
|
|
970
|
+
"text": "{\n readonly Top: 'top';\n readonly Left: 'left';\n readonly Bottom: 'bottom';\n readonly Right: 'right';\n readonly Auto: 'auto';\n readonly HorizontalAuto: 'x';\n readonly VerticalAuto: 'y';\n}"
|
|
973
971
|
}
|
|
974
|
-
]
|
|
972
|
+
],
|
|
973
|
+
"fileUrlPath": "dist/types/balloon.d.ts",
|
|
974
|
+
"isReadonly": true,
|
|
975
|
+
"releaseTag": "Public",
|
|
976
|
+
"name": "BalloonPosition",
|
|
977
|
+
"variableTypeTokenRange": {
|
|
978
|
+
"startIndex": 1,
|
|
979
|
+
"endIndex": 2
|
|
980
|
+
}
|
|
975
981
|
},
|
|
976
982
|
{
|
|
977
983
|
"kind": "Enum",
|
|
@@ -9923,6 +9929,14 @@
|
|
|
9923
9929
|
"kind": "Content",
|
|
9924
9930
|
"text": "any"
|
|
9925
9931
|
},
|
|
9932
|
+
{
|
|
9933
|
+
"kind": "Content",
|
|
9934
|
+
"text": ", rejectOnDeny?: "
|
|
9935
|
+
},
|
|
9936
|
+
{
|
|
9937
|
+
"kind": "Content",
|
|
9938
|
+
"text": "boolean"
|
|
9939
|
+
},
|
|
9926
9940
|
{
|
|
9927
9941
|
"kind": "Content",
|
|
9928
9942
|
"text": "): "
|
|
@@ -9952,8 +9966,8 @@
|
|
|
9952
9966
|
],
|
|
9953
9967
|
"isStatic": false,
|
|
9954
9968
|
"returnTypeTokenRange": {
|
|
9955
|
-
"startIndex":
|
|
9956
|
-
"endIndex":
|
|
9969
|
+
"startIndex": 5,
|
|
9970
|
+
"endIndex": 9
|
|
9957
9971
|
},
|
|
9958
9972
|
"releaseTag": "Public",
|
|
9959
9973
|
"isProtected": false,
|
|
@@ -9966,6 +9980,14 @@
|
|
|
9966
9980
|
"endIndex": 2
|
|
9967
9981
|
},
|
|
9968
9982
|
"isOptional": true
|
|
9983
|
+
},
|
|
9984
|
+
{
|
|
9985
|
+
"parameterName": "rejectOnDeny",
|
|
9986
|
+
"parameterTypeTokenRange": {
|
|
9987
|
+
"startIndex": 3,
|
|
9988
|
+
"endIndex": 4
|
|
9989
|
+
},
|
|
9990
|
+
"isOptional": true
|
|
9969
9991
|
}
|
|
9970
9992
|
],
|
|
9971
9993
|
"isOptional": false,
|
package/dist/esm/adapter.js
CHANGED
package/dist/esm/anchor.js
CHANGED
package/dist/esm/balloon.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @pacem/pacem-ui v2.0.0-
|
|
2
|
+
* @pacem/pacem-ui v2.0.0-hadamard (https://js.pacem.it)
|
|
3
3
|
* Pacem (https://pacem.it)
|
|
4
4
|
* Licensed under Apache-2.0
|
|
5
5
|
*/
|
|
@@ -35,17 +35,24 @@ export var BalloonAlignment;
|
|
|
35
35
|
BalloonAlignment["End"] = "end";
|
|
36
36
|
BalloonAlignment["Auto"] = "auto";
|
|
37
37
|
})(BalloonAlignment || (BalloonAlignment = {}));
|
|
38
|
+
/** A side of `target` a {@link PacemBalloonElement} can sit on. */
|
|
39
|
+
export const BalloonPlacement = {
|
|
40
|
+
Top: 'top',
|
|
41
|
+
Left: 'left',
|
|
42
|
+
Bottom: 'bottom',
|
|
43
|
+
Right: 'right',
|
|
44
|
+
};
|
|
45
|
+
/** The automatic placements of a {@link PacemBalloonElement}: the side with the most room, on both axes or on one. */
|
|
46
|
+
const BalloonPlacementOption = {
|
|
47
|
+
Auto: 'auto',
|
|
48
|
+
HorizontalAuto: 'x',
|
|
49
|
+
VerticalAuto: 'y'
|
|
50
|
+
};
|
|
38
51
|
/** Side of `target` a {@link PacemBalloonElement} is anchored to (with automatic variants that pick the side with the most room). */
|
|
39
|
-
export
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
BalloonPosition["Bottom"] = "bottom";
|
|
44
|
-
BalloonPosition["Right"] = "right";
|
|
45
|
-
BalloonPosition["Auto"] = "auto";
|
|
46
|
-
BalloonPosition["HorizontalAuto"] = "x";
|
|
47
|
-
BalloonPosition["VerticalAuto"] = "y";
|
|
48
|
-
})(BalloonPosition || (BalloonPosition = {}));
|
|
52
|
+
export const BalloonPosition = {
|
|
53
|
+
...BalloonPlacement,
|
|
54
|
+
...BalloonPlacementOption
|
|
55
|
+
};
|
|
49
56
|
/** Whether a {@link PacemBalloonElement} sizes itself freely or matches its `target`'s size along the anchored axis. */
|
|
50
57
|
export var BalloonSizing;
|
|
51
58
|
(function (BalloonSizing) {
|
|
@@ -70,9 +77,20 @@ const BalloonConsts = {
|
|
|
70
77
|
'track': true
|
|
71
78
|
}
|
|
72
79
|
};
|
|
80
|
+
/**
|
|
81
|
+
* CSS custom property a balloon publishes on itself when placed: the room left (px) on its side of the target, within
|
|
82
|
+
* the viewport, so that its contents can fit (e.g. `max-height: var(--pacem-balloon-available-height)` on a scrolling
|
|
83
|
+
* list). Updated whenever the balloon repositions (scroll, resize, when tracking).
|
|
84
|
+
*/
|
|
85
|
+
export const AVAILABLE_HEIGHT_VAR = '--pacem-balloon-available-height';
|
|
86
|
+
/** Breathing room (px) kept between a balloon and the viewport's edge when computing {@link AVAILABLE_HEIGHT_VAR}. */
|
|
87
|
+
const AVAILABLE_HEIGHT_GUTTER = 8;
|
|
73
88
|
const positioningStyles = 'balloon-right balloon-left balloon-bottom balloon-top balloon-start balloon-center balloon-end';
|
|
74
89
|
const allStyles = PCSS + '-balloon ' + positioningStyles + ' balloon-out balloon-in balloon-on';
|
|
75
90
|
/** Positions its content as a floating popup (menu or tooltip) anchored to a `target` element or point; see {@link BalloonOptions}. */
|
|
91
|
+
// (the content's `<p-resize>` is `display: block` inline: in the shadow root the theme's `pacem-resize { display: block }`
|
|
92
|
+
// does not apply, and an inline element never reports a resize, i.e. the balloon would not reposition when its content
|
|
93
|
+
// grows or shrinks, e.g. a filtered list above its target)
|
|
76
94
|
let PacemBalloonElement = class PacemBalloonElement extends Components.PacemElement {
|
|
77
95
|
constructor() {
|
|
78
96
|
super(...arguments);
|
|
@@ -268,6 +286,32 @@ let PacemBalloonElement = class PacemBalloonElement extends Components.PacemElem
|
|
|
268
286
|
this._adjust();
|
|
269
287
|
}
|
|
270
288
|
}
|
|
289
|
+
/**
|
|
290
|
+
* The side {@link BalloonOptions.prefer} asks for, when the balloon fits there (its natural size, on that side of the
|
|
291
|
+
* target, within the viewport); `null` otherwise, or when nothing is preferred.
|
|
292
|
+
* @param room The room around the target, per side.
|
|
293
|
+
*/
|
|
294
|
+
_preferredSide(opts, room) {
|
|
295
|
+
const prefer = opts.prefer;
|
|
296
|
+
if (Utils.isNull(prefer) || !(prefer in room)) {
|
|
297
|
+
return null;
|
|
298
|
+
}
|
|
299
|
+
const isVertical = prefer === BalloonPlacement.Top || prefer === BalloonPlacement.Bottom;
|
|
300
|
+
const size = isVertical ? this.offsetHeight : this.offsetWidth;
|
|
301
|
+
const fits = size + AVAILABLE_HEIGHT_GUTTER <= room[prefer];
|
|
302
|
+
return fits ? prefer : null;
|
|
303
|
+
}
|
|
304
|
+
/** The room left on a side of the target (the whole viewport height for a side that is not above or below). */
|
|
305
|
+
_availableHeight(position, offsetTop, offsetBottom, viewportHeight) {
|
|
306
|
+
switch (position) {
|
|
307
|
+
case BalloonPosition.Top:
|
|
308
|
+
return Math.max(offsetTop - AVAILABLE_HEIGHT_GUTTER, 0);
|
|
309
|
+
case BalloonPosition.Bottom:
|
|
310
|
+
return Math.max(offsetBottom - AVAILABLE_HEIGHT_GUTTER, 0);
|
|
311
|
+
default:
|
|
312
|
+
return viewportHeight;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
271
315
|
_adjust() {
|
|
272
316
|
const popup = this, el = popup.target;
|
|
273
317
|
if (Utils.isNull(el)) {
|
|
@@ -277,24 +321,39 @@ let PacemBalloonElement = class PacemBalloonElement extends Components.PacemElem
|
|
|
277
321
|
const vieportSize = Utils.windowSize;
|
|
278
322
|
var opts = this._options;
|
|
279
323
|
var chosenPosition = opts.position, chosenAlignment = opts.align;
|
|
324
|
+
// room around the target, in the viewport
|
|
325
|
+
const viewportHeight = vieportSize.height;
|
|
326
|
+
const viewportWidth = vieportSize.width;
|
|
327
|
+
const offsetLeft = coords.left - Utils.scrollLeft;
|
|
328
|
+
const offsetTop = coords.top - Utils.scrollTop;
|
|
329
|
+
const offsetBottom = viewportHeight - (offsetTop + coords.height);
|
|
330
|
+
const offsetRight = viewportWidth - (offsetLeft + coords.width);
|
|
331
|
+
// (the natural size, uncapped: see AVAILABLE_HEIGHT_VAR below)
|
|
332
|
+
popup.style.removeProperty(AVAILABLE_HEIGHT_VAR);
|
|
280
333
|
if (chosenPosition != BalloonPosition.Top &&
|
|
281
334
|
chosenPosition != BalloonPosition.Bottom && chosenPosition != BalloonPosition.Left && chosenPosition != BalloonPosition.Right) {
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
const
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
335
|
+
// an automatic position: the preferred side wins, whenever the balloon fits there (on either axis)...
|
|
336
|
+
const room = { top: offsetTop, bottom: offsetBottom, left: offsetLeft, right: offsetRight };
|
|
337
|
+
const preferred = this._preferredSide(opts, room);
|
|
338
|
+
if (!Utils.isNull(preferred)) {
|
|
339
|
+
chosenPosition = preferred;
|
|
340
|
+
}
|
|
341
|
+
else {
|
|
342
|
+
// ...otherwise the larger side
|
|
343
|
+
switch (chosenPosition) {
|
|
344
|
+
case BalloonPosition.HorizontalAuto:
|
|
345
|
+
chosenPosition = offsetLeft > offsetRight ? BalloonPosition.Left : BalloonPosition.Right;
|
|
346
|
+
break;
|
|
347
|
+
default:
|
|
348
|
+
// (!) exclude 'left' and 'right' also when position is simply set to 'auto'
|
|
349
|
+
chosenPosition = offsetTop > offsetBottom ? BalloonPosition.Top : BalloonPosition.Bottom;
|
|
350
|
+
break;
|
|
351
|
+
}
|
|
296
352
|
}
|
|
297
353
|
}
|
|
354
|
+
// the room left on the chosen side, for contents that must fit in the viewport (e.g. a scrolling list)
|
|
355
|
+
const availableHeight = this._availableHeight(chosenPosition, offsetTop, offsetBottom, viewportHeight);
|
|
356
|
+
popup.style.setProperty(AVAILABLE_HEIGHT_VAR, `${availableHeight}px`);
|
|
298
357
|
if (opts.size === BalloonSizing.Match) {
|
|
299
358
|
switch (chosenPosition) {
|
|
300
359
|
case BalloonPosition.Bottom:
|
|
@@ -462,11 +521,14 @@ let PacemBalloonElement = class PacemBalloonElement extends Components.PacemElem
|
|
|
462
521
|
this._timer = setTimeout(() => this.popup(), delay);
|
|
463
522
|
return;
|
|
464
523
|
}
|
|
465
|
-
const popup = this, isVisible = Utils.isVisible(popup)
|
|
524
|
+
const popup = this, isVisible = Utils.isVisible(popup),
|
|
525
|
+
// (popping out: still visible, but leaving; popping up again cancels that)
|
|
526
|
+
isLeaving = Utils.hasClass(popup, 'balloon-out');
|
|
466
527
|
this._adjustWatchers(true);
|
|
467
|
-
if (isVisible || this.disabled) {
|
|
528
|
+
if ((isVisible && !isLeaving) || this.disabled) {
|
|
468
529
|
return;
|
|
469
530
|
}
|
|
531
|
+
Utils.removeClass(popup, 'balloon-out');
|
|
470
532
|
// attach closured behavior to popup
|
|
471
533
|
//if (!sameTrigger) {
|
|
472
534
|
this._registerEvents(); // $popup.on('mouseenter', obj.methods.hover).on('mouseleave', obj.methods.out).data(vars.TRIGGER, obj);
|
|
@@ -508,6 +570,10 @@ let PacemBalloonElement = class PacemBalloonElement extends Components.PacemElem
|
|
|
508
570
|
Utils.removeClass(popup, 'balloon-in balloon-on');
|
|
509
571
|
Utils.addClass(popup, 'balloon-out');
|
|
510
572
|
Utils.addAnimationEndCallback(popup, () => {
|
|
573
|
+
// (popped up again meanwhile: stays)
|
|
574
|
+
if (!Utils.hasClass(popup, 'balloon-out')) {
|
|
575
|
+
return;
|
|
576
|
+
}
|
|
511
577
|
popup.style.visibility = 'hidden';
|
|
512
578
|
this._visible = false;
|
|
513
579
|
Utils.removeClass(popup, allStyles);
|
|
@@ -592,7 +658,7 @@ PacemBalloonElement = __decorate([
|
|
|
592
658
|
shadow: true,
|
|
593
659
|
template: `<${P}-resize target="{{ :host.target }}" disabled="true" watch-position="true" on-${Components.ResizeEventName}=":host._onLayoutChange($event)"></${P}-resize>
|
|
594
660
|
<div class="${PCSS}-balloon-face"></div>
|
|
595
|
-
<div class="${PCSS}-balloon"><${P}-resize on-${Components.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content><slot></slot></${P}-resize></div>
|
|
661
|
+
<div class="${PCSS}-balloon"><${P}-resize on-${Components.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content style="display: block"><slot></slot></${P}-resize></div>
|
|
596
662
|
<div class="corner top-left" part="corner-topleft"></div><div class="corner bottom-left" part="corner-bottomleft"></div><div class="corner top-right" part="corner-topright"></div><div class="corner bottom-right" part="corner-bottomright"></div>`
|
|
597
663
|
})
|
|
598
664
|
], PacemBalloonElement);
|
package/dist/esm/binder.js
CHANGED
package/dist/esm/blade.js
CHANGED
package/dist/esm/bottom-sheet.js
CHANGED
package/dist/esm/button.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @pacem/pacem-ui v2.0.0-
|
|
2
|
+
* @pacem/pacem-ui v2.0.0-hadamard (https://js.pacem.it)
|
|
3
3
|
* Pacem (https://pacem.it)
|
|
4
4
|
* Licensed under Apache-2.0
|
|
5
5
|
*/
|
|
@@ -10,7 +10,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
10
10
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
11
11
|
};
|
|
12
12
|
import { P, PCSS, CustomElement, Watch, Utils, PropertyConverters, Components, CommandEvent } from '@pacem/pacem-core';
|
|
13
|
-
import { DialogButton } from './dialog-abstractions';
|
|
14
13
|
//namespace Pacem.Components.UI {
|
|
15
14
|
/** Clickable button element with optional icon, command dispatching (via {@link CommandEvent}) and an optional confirmation dialog gate. */
|
|
16
15
|
let PacemButtonElement = class PacemButtonElement extends Components.PacemIterableElement {
|
|
@@ -78,9 +77,9 @@ let PacemButtonElement = class PacemButtonElement extends Components.PacemIterab
|
|
|
78
77
|
}
|
|
79
78
|
};
|
|
80
79
|
if (!this.disabled && evt.type === 'click' && !Utils.isNull(this.confirmationDialog)) {
|
|
81
|
-
this.confirmationDialog.open(this.confirmationMessage).then(r => {
|
|
82
|
-
if (r.button === DialogButton.Yes || r.button === DialogButton.Ok)
|
|
83
|
-
|
|
80
|
+
this.confirmationDialog.open(this.confirmationMessage, true).then(r => {
|
|
81
|
+
//if (r.button === DialogButton.Yes || r.button === DialogButton.Ok)
|
|
82
|
+
fn(evt);
|
|
84
83
|
});
|
|
85
84
|
}
|
|
86
85
|
else if (!(evt instanceof MouseEvent) || evt.button === 0) {
|
package/dist/esm/buttonset.js
CHANGED