@vonage/vivid 4.11.0 → 4.12.0
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/custom-elements.json +31 -365
- package/lib/fab/fab.d.ts +2 -2
- package/package.json +1 -1
- package/shared/definition24.cjs +11 -11
- package/shared/definition24.js +11 -11
- package/shared/definition58.cjs +1 -1
- package/shared/definition58.js +1 -1
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition64.cjs +55 -30
- package/shared/definition64.js +55 -30
- package/shared/foundation/button/button.d.ts +1 -1
- package/shared/foundation/button/button.template.d.ts +2 -2
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
package/custom-elements.json
CHANGED
|
@@ -2758,277 +2758,15 @@
|
|
|
2758
2758
|
},
|
|
2759
2759
|
"description": "Indicates the target's rel.",
|
|
2760
2760
|
"privacy": "public"
|
|
2761
|
-
},
|
|
2762
|
-
{
|
|
2763
|
-
"kind": "field",
|
|
2764
|
-
"name": "autofocus",
|
|
2765
|
-
"type": {
|
|
2766
|
-
"text": "boolean"
|
|
2767
|
-
},
|
|
2768
|
-
"privacy": "public",
|
|
2769
|
-
"description": "Determines if the element should receive document focus on page load.",
|
|
2770
|
-
"inheritedFrom": {
|
|
2771
|
-
"name": "FoundationButton",
|
|
2772
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2773
|
-
}
|
|
2774
|
-
},
|
|
2775
|
-
{
|
|
2776
|
-
"kind": "field",
|
|
2777
|
-
"name": "formId",
|
|
2778
|
-
"type": {
|
|
2779
|
-
"text": "string"
|
|
2780
|
-
},
|
|
2781
|
-
"privacy": "public",
|
|
2782
|
-
"description": "The id of a form to associate the element to.",
|
|
2783
|
-
"inheritedFrom": {
|
|
2784
|
-
"name": "FoundationButton",
|
|
2785
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2786
|
-
}
|
|
2787
|
-
},
|
|
2788
|
-
{
|
|
2789
|
-
"kind": "field",
|
|
2790
|
-
"name": "formaction",
|
|
2791
|
-
"type": {
|
|
2792
|
-
"text": "string"
|
|
2793
|
-
},
|
|
2794
|
-
"privacy": "public",
|
|
2795
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
2796
|
-
"inheritedFrom": {
|
|
2797
|
-
"name": "FoundationButton",
|
|
2798
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2799
|
-
}
|
|
2800
|
-
},
|
|
2801
|
-
{
|
|
2802
|
-
"kind": "method",
|
|
2803
|
-
"name": "formactionChanged",
|
|
2804
|
-
"privacy": "private",
|
|
2805
|
-
"return": {
|
|
2806
|
-
"type": {
|
|
2807
|
-
"text": "void"
|
|
2808
|
-
}
|
|
2809
|
-
},
|
|
2810
|
-
"inheritedFrom": {
|
|
2811
|
-
"name": "FoundationButton",
|
|
2812
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2813
|
-
}
|
|
2814
|
-
},
|
|
2815
|
-
{
|
|
2816
|
-
"kind": "field",
|
|
2817
|
-
"name": "formenctype",
|
|
2818
|
-
"type": {
|
|
2819
|
-
"text": "string"
|
|
2820
|
-
},
|
|
2821
|
-
"privacy": "public",
|
|
2822
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
2823
|
-
"inheritedFrom": {
|
|
2824
|
-
"name": "FoundationButton",
|
|
2825
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2826
|
-
}
|
|
2827
|
-
},
|
|
2828
|
-
{
|
|
2829
|
-
"kind": "method",
|
|
2830
|
-
"name": "formenctypeChanged",
|
|
2831
|
-
"privacy": "private",
|
|
2832
|
-
"return": {
|
|
2833
|
-
"type": {
|
|
2834
|
-
"text": "void"
|
|
2835
|
-
}
|
|
2836
|
-
},
|
|
2837
|
-
"inheritedFrom": {
|
|
2838
|
-
"name": "FoundationButton",
|
|
2839
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2840
|
-
}
|
|
2841
|
-
},
|
|
2842
|
-
{
|
|
2843
|
-
"kind": "field",
|
|
2844
|
-
"name": "formmethod",
|
|
2845
|
-
"type": {
|
|
2846
|
-
"text": "string"
|
|
2847
|
-
},
|
|
2848
|
-
"privacy": "public",
|
|
2849
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
2850
|
-
"inheritedFrom": {
|
|
2851
|
-
"name": "FoundationButton",
|
|
2852
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2853
|
-
}
|
|
2854
|
-
},
|
|
2855
|
-
{
|
|
2856
|
-
"kind": "method",
|
|
2857
|
-
"name": "formmethodChanged",
|
|
2858
|
-
"privacy": "private",
|
|
2859
|
-
"return": {
|
|
2860
|
-
"type": {
|
|
2861
|
-
"text": "void"
|
|
2862
|
-
}
|
|
2863
|
-
},
|
|
2864
|
-
"inheritedFrom": {
|
|
2865
|
-
"name": "FoundationButton",
|
|
2866
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2867
|
-
}
|
|
2868
|
-
},
|
|
2869
|
-
{
|
|
2870
|
-
"kind": "field",
|
|
2871
|
-
"name": "formnovalidate",
|
|
2872
|
-
"type": {
|
|
2873
|
-
"text": "boolean"
|
|
2874
|
-
},
|
|
2875
|
-
"privacy": "public",
|
|
2876
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
2877
|
-
"inheritedFrom": {
|
|
2878
|
-
"name": "FoundationButton",
|
|
2879
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2880
|
-
}
|
|
2881
|
-
},
|
|
2882
|
-
{
|
|
2883
|
-
"kind": "method",
|
|
2884
|
-
"name": "formnovalidateChanged",
|
|
2885
|
-
"privacy": "private",
|
|
2886
|
-
"return": {
|
|
2887
|
-
"type": {
|
|
2888
|
-
"text": "void"
|
|
2889
|
-
}
|
|
2890
|
-
},
|
|
2891
|
-
"inheritedFrom": {
|
|
2892
|
-
"name": "FoundationButton",
|
|
2893
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2894
|
-
}
|
|
2895
|
-
},
|
|
2896
|
-
{
|
|
2897
|
-
"kind": "field",
|
|
2898
|
-
"name": "formtarget",
|
|
2899
|
-
"type": {
|
|
2900
|
-
"text": "'_self' | '_blank' | '_parent' | '_top'"
|
|
2901
|
-
},
|
|
2902
|
-
"privacy": "public",
|
|
2903
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
2904
|
-
"inheritedFrom": {
|
|
2905
|
-
"name": "FoundationButton",
|
|
2906
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2907
|
-
}
|
|
2908
|
-
},
|
|
2909
|
-
{
|
|
2910
|
-
"kind": "method",
|
|
2911
|
-
"name": "formtargetChanged",
|
|
2912
|
-
"privacy": "private",
|
|
2913
|
-
"return": {
|
|
2914
|
-
"type": {
|
|
2915
|
-
"text": "void"
|
|
2916
|
-
}
|
|
2917
|
-
},
|
|
2918
|
-
"inheritedFrom": {
|
|
2919
|
-
"name": "FoundationButton",
|
|
2920
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2921
|
-
}
|
|
2922
|
-
},
|
|
2923
|
-
{
|
|
2924
|
-
"kind": "field",
|
|
2925
|
-
"name": "type",
|
|
2926
|
-
"type": {
|
|
2927
|
-
"text": "'submit' | 'reset' | 'button'"
|
|
2928
|
-
},
|
|
2929
|
-
"privacy": "public",
|
|
2930
|
-
"description": "The button type.",
|
|
2931
|
-
"inheritedFrom": {
|
|
2932
|
-
"name": "FoundationButton",
|
|
2933
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2934
|
-
}
|
|
2935
|
-
},
|
|
2936
|
-
{
|
|
2937
|
-
"kind": "method",
|
|
2938
|
-
"name": "typeChanged",
|
|
2939
|
-
"privacy": "private",
|
|
2940
|
-
"return": {
|
|
2941
|
-
"type": {
|
|
2942
|
-
"text": "void"
|
|
2943
|
-
}
|
|
2944
|
-
},
|
|
2945
|
-
"parameters": [
|
|
2946
|
-
{
|
|
2947
|
-
"name": "previous",
|
|
2948
|
-
"type": {
|
|
2949
|
-
"text": "'submit' | 'reset' | 'button' | void"
|
|
2950
|
-
}
|
|
2951
|
-
},
|
|
2952
|
-
{
|
|
2953
|
-
"name": "next",
|
|
2954
|
-
"type": {
|
|
2955
|
-
"text": "'submit' | 'reset' | 'button'"
|
|
2956
|
-
}
|
|
2957
|
-
}
|
|
2958
|
-
],
|
|
2959
|
-
"inheritedFrom": {
|
|
2960
|
-
"name": "FoundationButton",
|
|
2961
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2962
|
-
}
|
|
2963
|
-
},
|
|
2964
|
-
{
|
|
2965
|
-
"kind": "method",
|
|
2966
|
-
"name": "validate",
|
|
2967
|
-
"privacy": "public",
|
|
2968
|
-
"return": {
|
|
2969
|
-
"type": {
|
|
2970
|
-
"text": "void"
|
|
2971
|
-
}
|
|
2972
|
-
},
|
|
2973
|
-
"description": "{@inheritDoc (FormAssociated:interface).validate}",
|
|
2974
|
-
"inheritedFrom": {
|
|
2975
|
-
"name": "FoundationButton",
|
|
2976
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2977
|
-
}
|
|
2978
|
-
},
|
|
2979
|
-
{
|
|
2980
|
-
"kind": "field",
|
|
2981
|
-
"name": "handleSubmission",
|
|
2982
|
-
"privacy": "private",
|
|
2983
|
-
"description": "Submits the parent form",
|
|
2984
|
-
"inheritedFrom": {
|
|
2985
|
-
"name": "FoundationButton",
|
|
2986
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2987
|
-
}
|
|
2988
|
-
},
|
|
2989
|
-
{
|
|
2990
|
-
"kind": "field",
|
|
2991
|
-
"name": "handleFormReset",
|
|
2992
|
-
"privacy": "private",
|
|
2993
|
-
"description": "Resets the parent form",
|
|
2994
|
-
"inheritedFrom": {
|
|
2995
|
-
"name": "FoundationButton",
|
|
2996
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
2997
|
-
}
|
|
2998
|
-
},
|
|
2999
|
-
{
|
|
3000
|
-
"kind": "field",
|
|
3001
|
-
"name": "control",
|
|
3002
|
-
"type": {
|
|
3003
|
-
"text": "HTMLButtonElement"
|
|
3004
|
-
},
|
|
3005
|
-
"privacy": "public",
|
|
3006
|
-
"inheritedFrom": {
|
|
3007
|
-
"name": "FoundationButton",
|
|
3008
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3009
|
-
}
|
|
3010
|
-
},
|
|
3011
|
-
{
|
|
3012
|
-
"kind": "field",
|
|
3013
|
-
"name": "proxy",
|
|
3014
|
-
"inheritedFrom": {
|
|
3015
|
-
"name": "FormAssociatedButton",
|
|
3016
|
-
"module": "libs/components/src/shared/foundation/button/button.form-associated.ts"
|
|
3017
|
-
}
|
|
3018
2761
|
}
|
|
3019
2762
|
],
|
|
3020
2763
|
"attributes": [
|
|
3021
2764
|
{
|
|
3022
2765
|
"type": {
|
|
3023
|
-
"text": "
|
|
2766
|
+
"text": "string"
|
|
3024
2767
|
},
|
|
3025
|
-
"description": "Determines if the element should receive document focus on page load.",
|
|
3026
|
-
"fieldName": "title",
|
|
3027
2768
|
"default": "''",
|
|
3028
|
-
"
|
|
3029
|
-
"name": "FoundationButton",
|
|
3030
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3031
|
-
}
|
|
2769
|
+
"fieldName": "title"
|
|
3032
2770
|
},
|
|
3033
2771
|
{
|
|
3034
2772
|
"name": "connotation",
|
|
@@ -3161,78 +2899,6 @@
|
|
|
3161
2899
|
},
|
|
3162
2900
|
"description": "Indicates the target's rel.",
|
|
3163
2901
|
"fieldName": "target"
|
|
3164
|
-
},
|
|
3165
|
-
{
|
|
3166
|
-
"name": "form",
|
|
3167
|
-
"type": {
|
|
3168
|
-
"text": "string"
|
|
3169
|
-
},
|
|
3170
|
-
"description": "The id of a form to associate the element to.",
|
|
3171
|
-
"fieldName": "formId",
|
|
3172
|
-
"inheritedFrom": {
|
|
3173
|
-
"name": "FoundationButton",
|
|
3174
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3175
|
-
}
|
|
3176
|
-
},
|
|
3177
|
-
{
|
|
3178
|
-
"name": "formaction",
|
|
3179
|
-
"type": {
|
|
3180
|
-
"text": "string"
|
|
3181
|
-
},
|
|
3182
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
3183
|
-
"fieldName": "formaction",
|
|
3184
|
-
"inheritedFrom": {
|
|
3185
|
-
"name": "FoundationButton",
|
|
3186
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3187
|
-
}
|
|
3188
|
-
},
|
|
3189
|
-
{
|
|
3190
|
-
"name": "formenctype",
|
|
3191
|
-
"type": {
|
|
3192
|
-
"text": "string"
|
|
3193
|
-
},
|
|
3194
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
3195
|
-
"fieldName": "formenctype",
|
|
3196
|
-
"inheritedFrom": {
|
|
3197
|
-
"name": "FoundationButton",
|
|
3198
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3199
|
-
}
|
|
3200
|
-
},
|
|
3201
|
-
{
|
|
3202
|
-
"name": "formmethod",
|
|
3203
|
-
"type": {
|
|
3204
|
-
"text": "string"
|
|
3205
|
-
},
|
|
3206
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
3207
|
-
"fieldName": "formmethod",
|
|
3208
|
-
"inheritedFrom": {
|
|
3209
|
-
"name": "FoundationButton",
|
|
3210
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3211
|
-
}
|
|
3212
|
-
},
|
|
3213
|
-
{
|
|
3214
|
-
"name": "formtarget",
|
|
3215
|
-
"type": {
|
|
3216
|
-
"text": "'_self' | '_blank' | '_parent' | '_top'"
|
|
3217
|
-
},
|
|
3218
|
-
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
3219
|
-
"fieldName": "formtarget",
|
|
3220
|
-
"inheritedFrom": {
|
|
3221
|
-
"name": "FoundationButton",
|
|
3222
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3223
|
-
}
|
|
3224
|
-
},
|
|
3225
|
-
{
|
|
3226
|
-
"name": "type",
|
|
3227
|
-
"type": {
|
|
3228
|
-
"text": "'submit' | 'reset' | 'button'"
|
|
3229
|
-
},
|
|
3230
|
-
"description": "The button type.",
|
|
3231
|
-
"fieldName": "type",
|
|
3232
|
-
"inheritedFrom": {
|
|
3233
|
-
"name": "FoundationButton",
|
|
3234
|
-
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
3235
|
-
}
|
|
3236
2902
|
}
|
|
3237
2903
|
],
|
|
3238
2904
|
"superclass": {
|
|
@@ -7608,7 +7274,7 @@
|
|
|
7608
7274
|
"privacy": "public",
|
|
7609
7275
|
"description": "Determines if the element should receive document focus on page load.",
|
|
7610
7276
|
"inheritedFrom": {
|
|
7611
|
-
"name": "
|
|
7277
|
+
"name": "VividFoundationButton",
|
|
7612
7278
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7613
7279
|
}
|
|
7614
7280
|
},
|
|
@@ -7621,7 +7287,7 @@
|
|
|
7621
7287
|
"privacy": "public",
|
|
7622
7288
|
"description": "The id of a form to associate the element to.",
|
|
7623
7289
|
"inheritedFrom": {
|
|
7624
|
-
"name": "
|
|
7290
|
+
"name": "VividFoundationButton",
|
|
7625
7291
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7626
7292
|
}
|
|
7627
7293
|
},
|
|
@@ -7634,7 +7300,7 @@
|
|
|
7634
7300
|
"privacy": "public",
|
|
7635
7301
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7636
7302
|
"inheritedFrom": {
|
|
7637
|
-
"name": "
|
|
7303
|
+
"name": "VividFoundationButton",
|
|
7638
7304
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7639
7305
|
}
|
|
7640
7306
|
},
|
|
@@ -7648,7 +7314,7 @@
|
|
|
7648
7314
|
}
|
|
7649
7315
|
},
|
|
7650
7316
|
"inheritedFrom": {
|
|
7651
|
-
"name": "
|
|
7317
|
+
"name": "VividFoundationButton",
|
|
7652
7318
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7653
7319
|
}
|
|
7654
7320
|
},
|
|
@@ -7661,7 +7327,7 @@
|
|
|
7661
7327
|
"privacy": "public",
|
|
7662
7328
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7663
7329
|
"inheritedFrom": {
|
|
7664
|
-
"name": "
|
|
7330
|
+
"name": "VividFoundationButton",
|
|
7665
7331
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7666
7332
|
}
|
|
7667
7333
|
},
|
|
@@ -7675,7 +7341,7 @@
|
|
|
7675
7341
|
}
|
|
7676
7342
|
},
|
|
7677
7343
|
"inheritedFrom": {
|
|
7678
|
-
"name": "
|
|
7344
|
+
"name": "VividFoundationButton",
|
|
7679
7345
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7680
7346
|
}
|
|
7681
7347
|
},
|
|
@@ -7688,7 +7354,7 @@
|
|
|
7688
7354
|
"privacy": "public",
|
|
7689
7355
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7690
7356
|
"inheritedFrom": {
|
|
7691
|
-
"name": "
|
|
7357
|
+
"name": "VividFoundationButton",
|
|
7692
7358
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7693
7359
|
}
|
|
7694
7360
|
},
|
|
@@ -7702,7 +7368,7 @@
|
|
|
7702
7368
|
}
|
|
7703
7369
|
},
|
|
7704
7370
|
"inheritedFrom": {
|
|
7705
|
-
"name": "
|
|
7371
|
+
"name": "VividFoundationButton",
|
|
7706
7372
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7707
7373
|
}
|
|
7708
7374
|
},
|
|
@@ -7715,7 +7381,7 @@
|
|
|
7715
7381
|
"privacy": "public",
|
|
7716
7382
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7717
7383
|
"inheritedFrom": {
|
|
7718
|
-
"name": "
|
|
7384
|
+
"name": "VividFoundationButton",
|
|
7719
7385
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7720
7386
|
}
|
|
7721
7387
|
},
|
|
@@ -7729,7 +7395,7 @@
|
|
|
7729
7395
|
}
|
|
7730
7396
|
},
|
|
7731
7397
|
"inheritedFrom": {
|
|
7732
|
-
"name": "
|
|
7398
|
+
"name": "VividFoundationButton",
|
|
7733
7399
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7734
7400
|
}
|
|
7735
7401
|
},
|
|
@@ -7742,7 +7408,7 @@
|
|
|
7742
7408
|
"privacy": "public",
|
|
7743
7409
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7744
7410
|
"inheritedFrom": {
|
|
7745
|
-
"name": "
|
|
7411
|
+
"name": "VividFoundationButton",
|
|
7746
7412
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7747
7413
|
}
|
|
7748
7414
|
},
|
|
@@ -7756,7 +7422,7 @@
|
|
|
7756
7422
|
}
|
|
7757
7423
|
},
|
|
7758
7424
|
"inheritedFrom": {
|
|
7759
|
-
"name": "
|
|
7425
|
+
"name": "VividFoundationButton",
|
|
7760
7426
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7761
7427
|
}
|
|
7762
7428
|
},
|
|
@@ -7769,7 +7435,7 @@
|
|
|
7769
7435
|
"privacy": "public",
|
|
7770
7436
|
"description": "The button type.",
|
|
7771
7437
|
"inheritedFrom": {
|
|
7772
|
-
"name": "
|
|
7438
|
+
"name": "VividFoundationButton",
|
|
7773
7439
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7774
7440
|
}
|
|
7775
7441
|
},
|
|
@@ -7797,7 +7463,7 @@
|
|
|
7797
7463
|
}
|
|
7798
7464
|
],
|
|
7799
7465
|
"inheritedFrom": {
|
|
7800
|
-
"name": "
|
|
7466
|
+
"name": "VividFoundationButton",
|
|
7801
7467
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7802
7468
|
}
|
|
7803
7469
|
},
|
|
@@ -7812,7 +7478,7 @@
|
|
|
7812
7478
|
},
|
|
7813
7479
|
"description": "{@inheritDoc (FormAssociated:interface).validate}",
|
|
7814
7480
|
"inheritedFrom": {
|
|
7815
|
-
"name": "
|
|
7481
|
+
"name": "VividFoundationButton",
|
|
7816
7482
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7817
7483
|
}
|
|
7818
7484
|
},
|
|
@@ -7822,7 +7488,7 @@
|
|
|
7822
7488
|
"privacy": "private",
|
|
7823
7489
|
"description": "Submits the parent form",
|
|
7824
7490
|
"inheritedFrom": {
|
|
7825
|
-
"name": "
|
|
7491
|
+
"name": "VividFoundationButton",
|
|
7826
7492
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7827
7493
|
}
|
|
7828
7494
|
},
|
|
@@ -7832,7 +7498,7 @@
|
|
|
7832
7498
|
"privacy": "private",
|
|
7833
7499
|
"description": "Resets the parent form",
|
|
7834
7500
|
"inheritedFrom": {
|
|
7835
|
-
"name": "
|
|
7501
|
+
"name": "VividFoundationButton",
|
|
7836
7502
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7837
7503
|
}
|
|
7838
7504
|
},
|
|
@@ -7844,7 +7510,7 @@
|
|
|
7844
7510
|
},
|
|
7845
7511
|
"privacy": "public",
|
|
7846
7512
|
"inheritedFrom": {
|
|
7847
|
-
"name": "
|
|
7513
|
+
"name": "VividFoundationButton",
|
|
7848
7514
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7849
7515
|
}
|
|
7850
7516
|
},
|
|
@@ -7889,7 +7555,7 @@
|
|
|
7889
7555
|
"description": "Determines if the element should receive document focus on page load.",
|
|
7890
7556
|
"fieldName": "autofocus",
|
|
7891
7557
|
"inheritedFrom": {
|
|
7892
|
-
"name": "
|
|
7558
|
+
"name": "VividFoundationButton",
|
|
7893
7559
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7894
7560
|
}
|
|
7895
7561
|
},
|
|
@@ -7901,7 +7567,7 @@
|
|
|
7901
7567
|
"description": "The id of a form to associate the element to.",
|
|
7902
7568
|
"fieldName": "formId",
|
|
7903
7569
|
"inheritedFrom": {
|
|
7904
|
-
"name": "
|
|
7570
|
+
"name": "VividFoundationButton",
|
|
7905
7571
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7906
7572
|
}
|
|
7907
7573
|
},
|
|
@@ -7913,7 +7579,7 @@
|
|
|
7913
7579
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7914
7580
|
"fieldName": "formaction",
|
|
7915
7581
|
"inheritedFrom": {
|
|
7916
|
-
"name": "
|
|
7582
|
+
"name": "VividFoundationButton",
|
|
7917
7583
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7918
7584
|
}
|
|
7919
7585
|
},
|
|
@@ -7925,7 +7591,7 @@
|
|
|
7925
7591
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7926
7592
|
"fieldName": "formenctype",
|
|
7927
7593
|
"inheritedFrom": {
|
|
7928
|
-
"name": "
|
|
7594
|
+
"name": "VividFoundationButton",
|
|
7929
7595
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7930
7596
|
}
|
|
7931
7597
|
},
|
|
@@ -7937,7 +7603,7 @@
|
|
|
7937
7603
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7938
7604
|
"fieldName": "formmethod",
|
|
7939
7605
|
"inheritedFrom": {
|
|
7940
|
-
"name": "
|
|
7606
|
+
"name": "VividFoundationButton",
|
|
7941
7607
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7942
7608
|
}
|
|
7943
7609
|
},
|
|
@@ -7949,7 +7615,7 @@
|
|
|
7949
7615
|
"description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.",
|
|
7950
7616
|
"fieldName": "formtarget",
|
|
7951
7617
|
"inheritedFrom": {
|
|
7952
|
-
"name": "
|
|
7618
|
+
"name": "VividFoundationButton",
|
|
7953
7619
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7954
7620
|
}
|
|
7955
7621
|
},
|
|
@@ -7961,13 +7627,13 @@
|
|
|
7961
7627
|
"description": "The button type.",
|
|
7962
7628
|
"fieldName": "type",
|
|
7963
7629
|
"inheritedFrom": {
|
|
7964
|
-
"name": "
|
|
7630
|
+
"name": "VividFoundationButton",
|
|
7965
7631
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
7966
7632
|
}
|
|
7967
7633
|
}
|
|
7968
7634
|
],
|
|
7969
7635
|
"superclass": {
|
|
7970
|
-
"name": "
|
|
7636
|
+
"name": "VividFoundationButton",
|
|
7971
7637
|
"module": "/libs/components/src/shared/foundation/button"
|
|
7972
7638
|
},
|
|
7973
7639
|
"vividComponent": {
|
|
@@ -19935,7 +19601,7 @@
|
|
|
19935
19601
|
{
|
|
19936
19602
|
"kind": "class",
|
|
19937
19603
|
"description": "A Button Custom HTML Element.\nBased largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element .",
|
|
19938
|
-
"name": "
|
|
19604
|
+
"name": "VividFoundationButton",
|
|
19939
19605
|
"cssParts": [
|
|
19940
19606
|
{
|
|
19941
19607
|
"description": "The button element",
|
|
@@ -20249,9 +19915,9 @@
|
|
|
20249
19915
|
"exports": [
|
|
20250
19916
|
{
|
|
20251
19917
|
"kind": "js",
|
|
20252
|
-
"name": "
|
|
19918
|
+
"name": "VividFoundationButton",
|
|
20253
19919
|
"declaration": {
|
|
20254
|
-
"name": "
|
|
19920
|
+
"name": "VividFoundationButton",
|
|
20255
19921
|
"module": "libs/components/src/shared/foundation/button/button.ts"
|
|
20256
19922
|
}
|
|
20257
19923
|
},
|
package/lib/fab/fab.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { VividFoundationButton } from '../../shared/foundation/button';
|
|
2
2
|
import type { Connotation, Size } from '../enums.js';
|
|
3
3
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
4
4
|
export type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent | Connotation.Announcement>;
|
|
5
5
|
export type FABSize = Extract<Size, Size.Condensed | Size.Normal | Size.Expanded>;
|
|
6
|
-
export declare class Fab extends
|
|
6
|
+
export declare class Fab extends VividFoundationButton {
|
|
7
7
|
connotation?: FabConnotation;
|
|
8
8
|
size?: FABSize;
|
|
9
9
|
label?: string;
|
package/package.json
CHANGED
package/shared/definition24.cjs
CHANGED
|
@@ -29,7 +29,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
|
29
29
|
if (result) __defProp$1(target, key, result);
|
|
30
30
|
return result;
|
|
31
31
|
};
|
|
32
|
-
class
|
|
32
|
+
class VividFoundationButton extends FormAssociatedButton {
|
|
33
33
|
constructor() {
|
|
34
34
|
super(...arguments);
|
|
35
35
|
/**
|
|
@@ -131,28 +131,28 @@ class FoundationButton extends FormAssociatedButton {
|
|
|
131
131
|
}
|
|
132
132
|
__decorateClass$1([
|
|
133
133
|
index.attr({ mode: "boolean" })
|
|
134
|
-
],
|
|
134
|
+
], VividFoundationButton.prototype, "autofocus");
|
|
135
135
|
__decorateClass$1([
|
|
136
136
|
index.attr({ attribute: "form" })
|
|
137
|
-
],
|
|
137
|
+
], VividFoundationButton.prototype, "formId");
|
|
138
138
|
__decorateClass$1([
|
|
139
139
|
index.attr
|
|
140
|
-
],
|
|
140
|
+
], VividFoundationButton.prototype, "formaction");
|
|
141
141
|
__decorateClass$1([
|
|
142
142
|
index.attr
|
|
143
|
-
],
|
|
143
|
+
], VividFoundationButton.prototype, "formenctype");
|
|
144
144
|
__decorateClass$1([
|
|
145
145
|
index.attr
|
|
146
|
-
],
|
|
146
|
+
], VividFoundationButton.prototype, "formmethod");
|
|
147
147
|
__decorateClass$1([
|
|
148
148
|
index.attr({ mode: "boolean" })
|
|
149
|
-
],
|
|
149
|
+
], VividFoundationButton.prototype, "formnovalidate");
|
|
150
150
|
__decorateClass$1([
|
|
151
151
|
index.attr
|
|
152
|
-
],
|
|
152
|
+
], VividFoundationButton.prototype, "formtarget");
|
|
153
153
|
__decorateClass$1([
|
|
154
154
|
index.attr
|
|
155
|
-
],
|
|
155
|
+
], VividFoundationButton.prototype, "type");
|
|
156
156
|
class DelegatesARIAButton {
|
|
157
157
|
}
|
|
158
158
|
__decorateClass$1([
|
|
@@ -162,7 +162,7 @@ __decorateClass$1([
|
|
|
162
162
|
index.attr({ attribute: "aria-pressed" })
|
|
163
163
|
], DelegatesARIAButton.prototype, "ariaPressed");
|
|
164
164
|
applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
|
|
165
|
-
applyMixins.applyMixins(
|
|
165
|
+
applyMixins.applyMixins(VividFoundationButton, DelegatesARIAButton);
|
|
166
166
|
|
|
167
167
|
var __defProp = Object.defineProperty;
|
|
168
168
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -173,7 +173,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
173
173
|
if (result) __defProp(target, key, result);
|
|
174
174
|
return result;
|
|
175
175
|
};
|
|
176
|
-
class Fab extends
|
|
176
|
+
class Fab extends VividFoundationButton {
|
|
177
177
|
}
|
|
178
178
|
__decorateClass([
|
|
179
179
|
index.attr
|
package/shared/definition24.js
CHANGED
|
@@ -27,7 +27,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
|
27
27
|
if (result) __defProp$1(target, key, result);
|
|
28
28
|
return result;
|
|
29
29
|
};
|
|
30
|
-
class
|
|
30
|
+
class VividFoundationButton extends FormAssociatedButton {
|
|
31
31
|
constructor() {
|
|
32
32
|
super(...arguments);
|
|
33
33
|
/**
|
|
@@ -129,28 +129,28 @@ class FoundationButton extends FormAssociatedButton {
|
|
|
129
129
|
}
|
|
130
130
|
__decorateClass$1([
|
|
131
131
|
attr({ mode: "boolean" })
|
|
132
|
-
],
|
|
132
|
+
], VividFoundationButton.prototype, "autofocus");
|
|
133
133
|
__decorateClass$1([
|
|
134
134
|
attr({ attribute: "form" })
|
|
135
|
-
],
|
|
135
|
+
], VividFoundationButton.prototype, "formId");
|
|
136
136
|
__decorateClass$1([
|
|
137
137
|
attr
|
|
138
|
-
],
|
|
138
|
+
], VividFoundationButton.prototype, "formaction");
|
|
139
139
|
__decorateClass$1([
|
|
140
140
|
attr
|
|
141
|
-
],
|
|
141
|
+
], VividFoundationButton.prototype, "formenctype");
|
|
142
142
|
__decorateClass$1([
|
|
143
143
|
attr
|
|
144
|
-
],
|
|
144
|
+
], VividFoundationButton.prototype, "formmethod");
|
|
145
145
|
__decorateClass$1([
|
|
146
146
|
attr({ mode: "boolean" })
|
|
147
|
-
],
|
|
147
|
+
], VividFoundationButton.prototype, "formnovalidate");
|
|
148
148
|
__decorateClass$1([
|
|
149
149
|
attr
|
|
150
|
-
],
|
|
150
|
+
], VividFoundationButton.prototype, "formtarget");
|
|
151
151
|
__decorateClass$1([
|
|
152
152
|
attr
|
|
153
|
-
],
|
|
153
|
+
], VividFoundationButton.prototype, "type");
|
|
154
154
|
class DelegatesARIAButton {
|
|
155
155
|
}
|
|
156
156
|
__decorateClass$1([
|
|
@@ -160,7 +160,7 @@ __decorateClass$1([
|
|
|
160
160
|
attr({ attribute: "aria-pressed" })
|
|
161
161
|
], DelegatesARIAButton.prototype, "ariaPressed");
|
|
162
162
|
applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
|
|
163
|
-
applyMixins(
|
|
163
|
+
applyMixins(VividFoundationButton, DelegatesARIAButton);
|
|
164
164
|
|
|
165
165
|
var __defProp = Object.defineProperty;
|
|
166
166
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -171,7 +171,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
171
171
|
if (result) __defProp(target, key, result);
|
|
172
172
|
return result;
|
|
173
173
|
};
|
|
174
|
-
class Fab extends
|
|
174
|
+
class Fab extends VividFoundationButton {
|
|
175
175
|
}
|
|
176
176
|
__decorateClass([
|
|
177
177
|
attr
|
package/shared/definition58.cjs
CHANGED
|
@@ -7,7 +7,7 @@ const index$1 = require('./index2.cjs');
|
|
|
7
7
|
const when = require('./when.cjs');
|
|
8
8
|
const classNames = require('./class-names.cjs');
|
|
9
9
|
|
|
10
|
-
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
|
|
10
|
+
const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
|
|
11
11
|
|
|
12
12
|
var __defProp = Object.defineProperty;
|
|
13
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition58.js
CHANGED
|
@@ -5,7 +5,7 @@ import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
|
|
|
5
5
|
import { w as when } from './when.js';
|
|
6
6
|
import { c as classNames } from './class-names.js';
|
|
7
7
|
|
|
8
|
-
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
|
|
8
|
+
const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
11
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition59.cjs
CHANGED
|
@@ -6,7 +6,7 @@ const anchored = require('./anchored.cjs');
|
|
|
6
6
|
const index$1 = require('./index2.cjs');
|
|
7
7
|
const classNames = require('./class-names.cjs');
|
|
8
8
|
|
|
9
|
-
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
|
|
9
|
+
const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
|
|
10
10
|
|
|
11
11
|
var __defProp = Object.defineProperty;
|
|
12
12
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition59.js
CHANGED
|
@@ -4,7 +4,7 @@ import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
|
|
|
4
4
|
import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
|
|
5
5
|
import { c as classNames } from './class-names.js';
|
|
6
6
|
|
|
7
|
-
const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
|
|
7
|
+
const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);max-inline-size:var(--tooltip-max-inline-size, 30ch)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
10
10
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition64.cjs
CHANGED
|
@@ -1314,6 +1314,31 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
1314
1314
|
});
|
|
1315
1315
|
}
|
|
1316
1316
|
|
|
1317
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
1318
|
+
// incorrect for RTL.
|
|
1319
|
+
function getWindowScrollBarX(element, rect) {
|
|
1320
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1321
|
+
if (!rect) {
|
|
1322
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1323
|
+
}
|
|
1324
|
+
return rect.left + leftScroll;
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
|
|
1328
|
+
if (ignoreScrollbarX === void 0) {
|
|
1329
|
+
ignoreScrollbarX = false;
|
|
1330
|
+
}
|
|
1331
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
1332
|
+
const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
|
|
1333
|
+
// RTL <body> scrollbar.
|
|
1334
|
+
getWindowScrollBarX(documentElement, htmlRect));
|
|
1335
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
1336
|
+
return {
|
|
1337
|
+
x,
|
|
1338
|
+
y
|
|
1339
|
+
};
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1317
1342
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
1318
1343
|
let {
|
|
1319
1344
|
elements,
|
|
@@ -1345,11 +1370,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
1345
1370
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1346
1371
|
}
|
|
1347
1372
|
}
|
|
1373
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
|
|
1348
1374
|
return {
|
|
1349
1375
|
width: rect.width * scale.x,
|
|
1350
1376
|
height: rect.height * scale.y,
|
|
1351
|
-
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
|
|
1352
|
-
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
|
|
1377
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
1378
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
1353
1379
|
};
|
|
1354
1380
|
}
|
|
1355
1381
|
|
|
@@ -1357,16 +1383,6 @@ function getClientRects(element) {
|
|
|
1357
1383
|
return Array.from(element.getClientRects());
|
|
1358
1384
|
}
|
|
1359
1385
|
|
|
1360
|
-
// If <html> has a CSS width greater than the viewport, then this will be
|
|
1361
|
-
// incorrect for RTL.
|
|
1362
|
-
function getWindowScrollBarX(element, rect) {
|
|
1363
|
-
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1364
|
-
if (!rect) {
|
|
1365
|
-
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1366
|
-
}
|
|
1367
|
-
return rect.left + leftScroll;
|
|
1368
|
-
}
|
|
1369
|
-
|
|
1370
1386
|
// Gets the entire size of the scrollable document area, even extending outside
|
|
1371
1387
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
1372
1388
|
function getDocumentRect(element) {
|
|
@@ -1441,9 +1457,10 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
|
|
|
1441
1457
|
} else {
|
|
1442
1458
|
const visualOffsets = getVisualOffsets(element);
|
|
1443
1459
|
rect = {
|
|
1444
|
-
...clippingAncestor,
|
|
1445
1460
|
x: clippingAncestor.x - visualOffsets.x,
|
|
1446
|
-
y: clippingAncestor.y - visualOffsets.y
|
|
1461
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
1462
|
+
width: clippingAncestor.width,
|
|
1463
|
+
height: clippingAncestor.height
|
|
1447
1464
|
};
|
|
1448
1465
|
}
|
|
1449
1466
|
return rectToClientRect(rect);
|
|
@@ -1553,17 +1570,9 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1553
1570
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
1554
1571
|
}
|
|
1555
1572
|
}
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
const htmlRect = documentElement.getBoundingClientRect();
|
|
1560
|
-
htmlY = htmlRect.top + scroll.scrollTop;
|
|
1561
|
-
htmlX = htmlRect.left + scroll.scrollLeft -
|
|
1562
|
-
// RTL <body> scrollbar.
|
|
1563
|
-
getWindowScrollBarX(documentElement, htmlRect);
|
|
1564
|
-
}
|
|
1565
|
-
const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
|
|
1566
|
-
const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
|
|
1573
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1574
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1575
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
1567
1576
|
return {
|
|
1568
1577
|
x,
|
|
1569
1578
|
y,
|
|
@@ -1966,7 +1975,10 @@ class Popup extends index.FoundationElement {
|
|
|
1966
1975
|
#cleanup;
|
|
1967
1976
|
openChanged(_, newValue) {
|
|
1968
1977
|
newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
|
|
1969
|
-
index.DOM.queueUpdate(() =>
|
|
1978
|
+
index.DOM.queueUpdate(() => {
|
|
1979
|
+
this.#updateAutoUpdate();
|
|
1980
|
+
this.#togglePopover();
|
|
1981
|
+
});
|
|
1970
1982
|
}
|
|
1971
1983
|
/**
|
|
1972
1984
|
* @internal
|
|
@@ -1980,6 +1992,9 @@ class Popup extends index.FoundationElement {
|
|
|
1980
1992
|
anchorChanged() {
|
|
1981
1993
|
this.#updateAutoUpdate();
|
|
1982
1994
|
}
|
|
1995
|
+
strategyChanged() {
|
|
1996
|
+
this.#togglePopover();
|
|
1997
|
+
}
|
|
1983
1998
|
connectedCallback() {
|
|
1984
1999
|
super.connectedCallback();
|
|
1985
2000
|
this.#updateAutoUpdate();
|
|
@@ -2001,6 +2016,15 @@ class Popup extends index.FoundationElement {
|
|
|
2001
2016
|
);
|
|
2002
2017
|
}
|
|
2003
2018
|
}
|
|
2019
|
+
#togglePopover() {
|
|
2020
|
+
if (this.popupEl && this.strategy === "fixed") {
|
|
2021
|
+
if (this.open) {
|
|
2022
|
+
this.popupEl.showPopover();
|
|
2023
|
+
} else {
|
|
2024
|
+
this.popupEl.hidePopover();
|
|
2025
|
+
}
|
|
2026
|
+
}
|
|
2027
|
+
}
|
|
2004
2028
|
/**
|
|
2005
2029
|
* Updates popup's position
|
|
2006
2030
|
*
|
|
@@ -2086,7 +2110,7 @@ __decorateClass([
|
|
|
2086
2110
|
index.observable
|
|
2087
2111
|
], Popup.prototype, "anchor");
|
|
2088
2112
|
|
|
2089
|
-
const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;z-index:var(--_popup-z-index, 10);border-radius:8px;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
|
|
2113
|
+
const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
|
|
2090
2114
|
|
|
2091
2115
|
const getClasses = ({ open, dismissible, alternate }) => classNames.classNames(
|
|
2092
2116
|
"control",
|
|
@@ -2094,14 +2118,15 @@ const getClasses = ({ open, dismissible, alternate }) => classNames.classNames(
|
|
|
2094
2118
|
["dismissible", Boolean(dismissible)],
|
|
2095
2119
|
["alternate", Boolean(alternate)]
|
|
2096
2120
|
);
|
|
2121
|
+
function handlePopover(x) {
|
|
2122
|
+
return x.strategy && x.strategy === "fixed" ? "manual" : null;
|
|
2123
|
+
}
|
|
2097
2124
|
const popupTemplate = (context) => {
|
|
2098
2125
|
const elevationTag = context.tagFor(definition.Elevation);
|
|
2099
2126
|
const buttonTag = context.tagFor(definition$1.Button$1);
|
|
2100
2127
|
return index.html`
|
|
2101
2128
|
<${elevationTag}>
|
|
2102
|
-
|
|
2103
|
-
"popupEl"
|
|
2104
|
-
)} part="popup-base">
|
|
2129
|
+
<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${ref.ref("popupEl")} part="popup-base">
|
|
2105
2130
|
<div class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
|
|
2106
2131
|
part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
|
|
2107
2132
|
<div class="popup-content">
|
package/shared/definition64.js
CHANGED
|
@@ -1312,6 +1312,31 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
1312
1312
|
});
|
|
1313
1313
|
}
|
|
1314
1314
|
|
|
1315
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
1316
|
+
// incorrect for RTL.
|
|
1317
|
+
function getWindowScrollBarX(element, rect) {
|
|
1318
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1319
|
+
if (!rect) {
|
|
1320
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1321
|
+
}
|
|
1322
|
+
return rect.left + leftScroll;
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
|
|
1326
|
+
if (ignoreScrollbarX === void 0) {
|
|
1327
|
+
ignoreScrollbarX = false;
|
|
1328
|
+
}
|
|
1329
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
1330
|
+
const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
|
|
1331
|
+
// RTL <body> scrollbar.
|
|
1332
|
+
getWindowScrollBarX(documentElement, htmlRect));
|
|
1333
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
1334
|
+
return {
|
|
1335
|
+
x,
|
|
1336
|
+
y
|
|
1337
|
+
};
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1315
1340
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
1316
1341
|
let {
|
|
1317
1342
|
elements,
|
|
@@ -1343,11 +1368,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
1343
1368
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1344
1369
|
}
|
|
1345
1370
|
}
|
|
1371
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
|
|
1346
1372
|
return {
|
|
1347
1373
|
width: rect.width * scale.x,
|
|
1348
1374
|
height: rect.height * scale.y,
|
|
1349
|
-
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
|
|
1350
|
-
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
|
|
1375
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
1376
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
1351
1377
|
};
|
|
1352
1378
|
}
|
|
1353
1379
|
|
|
@@ -1355,16 +1381,6 @@ function getClientRects(element) {
|
|
|
1355
1381
|
return Array.from(element.getClientRects());
|
|
1356
1382
|
}
|
|
1357
1383
|
|
|
1358
|
-
// If <html> has a CSS width greater than the viewport, then this will be
|
|
1359
|
-
// incorrect for RTL.
|
|
1360
|
-
function getWindowScrollBarX(element, rect) {
|
|
1361
|
-
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1362
|
-
if (!rect) {
|
|
1363
|
-
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1364
|
-
}
|
|
1365
|
-
return rect.left + leftScroll;
|
|
1366
|
-
}
|
|
1367
|
-
|
|
1368
1384
|
// Gets the entire size of the scrollable document area, even extending outside
|
|
1369
1385
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
1370
1386
|
function getDocumentRect(element) {
|
|
@@ -1439,9 +1455,10 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
|
|
|
1439
1455
|
} else {
|
|
1440
1456
|
const visualOffsets = getVisualOffsets(element);
|
|
1441
1457
|
rect = {
|
|
1442
|
-
...clippingAncestor,
|
|
1443
1458
|
x: clippingAncestor.x - visualOffsets.x,
|
|
1444
|
-
y: clippingAncestor.y - visualOffsets.y
|
|
1459
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
1460
|
+
width: clippingAncestor.width,
|
|
1461
|
+
height: clippingAncestor.height
|
|
1445
1462
|
};
|
|
1446
1463
|
}
|
|
1447
1464
|
return rectToClientRect(rect);
|
|
@@ -1551,17 +1568,9 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1551
1568
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
1552
1569
|
}
|
|
1553
1570
|
}
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
const htmlRect = documentElement.getBoundingClientRect();
|
|
1558
|
-
htmlY = htmlRect.top + scroll.scrollTop;
|
|
1559
|
-
htmlX = htmlRect.left + scroll.scrollLeft -
|
|
1560
|
-
// RTL <body> scrollbar.
|
|
1561
|
-
getWindowScrollBarX(documentElement, htmlRect);
|
|
1562
|
-
}
|
|
1563
|
-
const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
|
|
1564
|
-
const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
|
|
1571
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1572
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1573
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
1565
1574
|
return {
|
|
1566
1575
|
x,
|
|
1567
1576
|
y,
|
|
@@ -1964,7 +1973,10 @@ class Popup extends FoundationElement {
|
|
|
1964
1973
|
#cleanup;
|
|
1965
1974
|
openChanged(_, newValue) {
|
|
1966
1975
|
newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
|
|
1967
|
-
DOM.queueUpdate(() =>
|
|
1976
|
+
DOM.queueUpdate(() => {
|
|
1977
|
+
this.#updateAutoUpdate();
|
|
1978
|
+
this.#togglePopover();
|
|
1979
|
+
});
|
|
1968
1980
|
}
|
|
1969
1981
|
/**
|
|
1970
1982
|
* @internal
|
|
@@ -1978,6 +1990,9 @@ class Popup extends FoundationElement {
|
|
|
1978
1990
|
anchorChanged() {
|
|
1979
1991
|
this.#updateAutoUpdate();
|
|
1980
1992
|
}
|
|
1993
|
+
strategyChanged() {
|
|
1994
|
+
this.#togglePopover();
|
|
1995
|
+
}
|
|
1981
1996
|
connectedCallback() {
|
|
1982
1997
|
super.connectedCallback();
|
|
1983
1998
|
this.#updateAutoUpdate();
|
|
@@ -1999,6 +2014,15 @@ class Popup extends FoundationElement {
|
|
|
1999
2014
|
);
|
|
2000
2015
|
}
|
|
2001
2016
|
}
|
|
2017
|
+
#togglePopover() {
|
|
2018
|
+
if (this.popupEl && this.strategy === "fixed") {
|
|
2019
|
+
if (this.open) {
|
|
2020
|
+
this.popupEl.showPopover();
|
|
2021
|
+
} else {
|
|
2022
|
+
this.popupEl.hidePopover();
|
|
2023
|
+
}
|
|
2024
|
+
}
|
|
2025
|
+
}
|
|
2002
2026
|
/**
|
|
2003
2027
|
* Updates popup's position
|
|
2004
2028
|
*
|
|
@@ -2084,7 +2108,7 @@ __decorateClass([
|
|
|
2084
2108
|
observable
|
|
2085
2109
|
], Popup.prototype, "anchor");
|
|
2086
2110
|
|
|
2087
|
-
const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;z-index:var(--_popup-z-index, 10);border-radius:8px;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
|
|
2111
|
+
const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
|
|
2088
2112
|
|
|
2089
2113
|
const getClasses = ({ open, dismissible, alternate }) => classNames(
|
|
2090
2114
|
"control",
|
|
@@ -2092,14 +2116,15 @@ const getClasses = ({ open, dismissible, alternate }) => classNames(
|
|
|
2092
2116
|
["dismissible", Boolean(dismissible)],
|
|
2093
2117
|
["alternate", Boolean(alternate)]
|
|
2094
2118
|
);
|
|
2119
|
+
function handlePopover(x) {
|
|
2120
|
+
return x.strategy && x.strategy === "fixed" ? "manual" : null;
|
|
2121
|
+
}
|
|
2095
2122
|
const popupTemplate = (context) => {
|
|
2096
2123
|
const elevationTag = context.tagFor(Elevation);
|
|
2097
2124
|
const buttonTag = context.tagFor(Button);
|
|
2098
2125
|
return html`
|
|
2099
2126
|
<${elevationTag}>
|
|
2100
|
-
|
|
2101
|
-
"popupEl"
|
|
2102
|
-
)} part="popup-base">
|
|
2127
|
+
<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${ref("popupEl")} part="popup-base">
|
|
2103
2128
|
<div class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
|
|
2104
2129
|
part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
|
|
2105
2130
|
<div class="popup-content">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
2
2
|
import { FormAssociatedButton } from './button.form-associated';
|
|
3
3
|
export type ButtonOptions = FoundationElementDefinition;
|
|
4
|
-
export declare class
|
|
4
|
+
export declare class VividFoundationButton extends FormAssociatedButton {
|
|
5
5
|
autofocus: boolean;
|
|
6
6
|
formId: string;
|
|
7
7
|
formaction: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
2
|
import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
|
|
3
|
-
import type { ButtonOptions,
|
|
4
|
-
export declare const buttonTemplate: FoundationElementTemplate<ViewTemplate<
|
|
3
|
+
import type { ButtonOptions, VividFoundationButton } from './button';
|
|
4
|
+
export declare const buttonTemplate: FoundationElementTemplate<ViewTemplate<VividFoundationButton>, ButtonOptions>;
|
package/styles/core/all.css
CHANGED
package/styles/core/theme.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Thu, 14 Nov 2024 10:14:25 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|