@genesislcap/foundation-zero 14.92.2 → 14.92.3-beta.0a7ca6c.1
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/custom-elements.json +240 -158
- package/dist/dts/banner/banner.stories.d.ts.map +1 -1
- package/dist/dts/dialog/dialog.stories.d.ts.map +1 -1
- package/dist/dts/error-banner/error-banner.template.d.ts +2 -3
- package/dist/dts/error-banner/error-banner.template.d.ts.map +1 -1
- package/dist/dts/snackbar/snackbar.template.d.ts +2 -3
- package/dist/dts/snackbar/snackbar.template.d.ts.map +1 -1
- package/dist/esm/banner/banner.stories.js +43 -10
- package/dist/esm/dialog/dialog.stories.js +28 -1
- package/dist/esm/error-banner/error-banner.template.js +3 -34
- package/dist/esm/snackbar/snackbar.template.js +3 -27
- package/package.json +8 -8
|
@@ -1003,154 +1003,6 @@
|
|
|
1003
1003
|
}
|
|
1004
1004
|
]
|
|
1005
1005
|
},
|
|
1006
|
-
{
|
|
1007
|
-
"kind": "javascript-module",
|
|
1008
|
-
"path": "src/accordion-item/accordion-item.styles.ts",
|
|
1009
|
-
"declarations": [
|
|
1010
|
-
{
|
|
1011
|
-
"kind": "function",
|
|
1012
|
-
"name": "zeroAccordionItemStyles",
|
|
1013
|
-
"return": {
|
|
1014
|
-
"type": {
|
|
1015
|
-
"text": "ElementStyles"
|
|
1016
|
-
}
|
|
1017
|
-
},
|
|
1018
|
-
"parameters": [
|
|
1019
|
-
{
|
|
1020
|
-
"name": "context",
|
|
1021
|
-
"type": {
|
|
1022
|
-
"text": "ElementDefinitionContext"
|
|
1023
|
-
}
|
|
1024
|
-
},
|
|
1025
|
-
{
|
|
1026
|
-
"name": "definition",
|
|
1027
|
-
"type": {
|
|
1028
|
-
"text": "FoundationElementDefinition"
|
|
1029
|
-
}
|
|
1030
|
-
}
|
|
1031
|
-
]
|
|
1032
|
-
}
|
|
1033
|
-
],
|
|
1034
|
-
"exports": [
|
|
1035
|
-
{
|
|
1036
|
-
"kind": "js",
|
|
1037
|
-
"name": "zeroAccordionItemStyles",
|
|
1038
|
-
"declaration": {
|
|
1039
|
-
"name": "zeroAccordionItemStyles",
|
|
1040
|
-
"module": "src/accordion-item/accordion-item.styles.ts"
|
|
1041
|
-
}
|
|
1042
|
-
}
|
|
1043
|
-
]
|
|
1044
|
-
},
|
|
1045
|
-
{
|
|
1046
|
-
"kind": "javascript-module",
|
|
1047
|
-
"path": "src/accordion-item/accordion-item.template.ts",
|
|
1048
|
-
"declarations": [
|
|
1049
|
-
{
|
|
1050
|
-
"kind": "function",
|
|
1051
|
-
"name": "zeroAccordionItemTemplate",
|
|
1052
|
-
"return": {
|
|
1053
|
-
"type": {
|
|
1054
|
-
"text": "ViewTemplate<AccordionItem>"
|
|
1055
|
-
}
|
|
1056
|
-
},
|
|
1057
|
-
"parameters": [
|
|
1058
|
-
{
|
|
1059
|
-
"name": "context",
|
|
1060
|
-
"type": {
|
|
1061
|
-
"text": "ElementDefinitionContext"
|
|
1062
|
-
}
|
|
1063
|
-
},
|
|
1064
|
-
{
|
|
1065
|
-
"name": "definition",
|
|
1066
|
-
"type": {
|
|
1067
|
-
"text": "FoundationElementDefinition"
|
|
1068
|
-
}
|
|
1069
|
-
}
|
|
1070
|
-
]
|
|
1071
|
-
}
|
|
1072
|
-
],
|
|
1073
|
-
"exports": [
|
|
1074
|
-
{
|
|
1075
|
-
"kind": "js",
|
|
1076
|
-
"name": "zeroAccordionItemTemplate",
|
|
1077
|
-
"declaration": {
|
|
1078
|
-
"name": "zeroAccordionItemTemplate",
|
|
1079
|
-
"module": "src/accordion-item/accordion-item.template.ts"
|
|
1080
|
-
}
|
|
1081
|
-
}
|
|
1082
|
-
]
|
|
1083
|
-
},
|
|
1084
|
-
{
|
|
1085
|
-
"kind": "javascript-module",
|
|
1086
|
-
"path": "src/accordion-item/accordion-item.ts",
|
|
1087
|
-
"declarations": [
|
|
1088
|
-
{
|
|
1089
|
-
"kind": "class",
|
|
1090
|
-
"description": "",
|
|
1091
|
-
"name": "AccordionItem",
|
|
1092
|
-
"superclass": {
|
|
1093
|
-
"name": "FoundationAccordionItem",
|
|
1094
|
-
"package": "@genesislcap/foundation-ui"
|
|
1095
|
-
},
|
|
1096
|
-
"tagName": "%%prefix%%-card",
|
|
1097
|
-
"customElement": true
|
|
1098
|
-
},
|
|
1099
|
-
{
|
|
1100
|
-
"kind": "variable",
|
|
1101
|
-
"name": "zeroAccordionItem"
|
|
1102
|
-
}
|
|
1103
|
-
],
|
|
1104
|
-
"exports": [
|
|
1105
|
-
{
|
|
1106
|
-
"kind": "js",
|
|
1107
|
-
"name": "AccordionItem",
|
|
1108
|
-
"declaration": {
|
|
1109
|
-
"name": "AccordionItem",
|
|
1110
|
-
"module": "src/accordion-item/accordion-item.ts"
|
|
1111
|
-
}
|
|
1112
|
-
},
|
|
1113
|
-
{
|
|
1114
|
-
"kind": "js",
|
|
1115
|
-
"name": "zeroAccordionItem",
|
|
1116
|
-
"declaration": {
|
|
1117
|
-
"name": "zeroAccordionItem",
|
|
1118
|
-
"module": "src/accordion-item/accordion-item.ts"
|
|
1119
|
-
}
|
|
1120
|
-
}
|
|
1121
|
-
]
|
|
1122
|
-
},
|
|
1123
|
-
{
|
|
1124
|
-
"kind": "javascript-module",
|
|
1125
|
-
"path": "src/accordion-item/index.ts",
|
|
1126
|
-
"declarations": [],
|
|
1127
|
-
"exports": [
|
|
1128
|
-
{
|
|
1129
|
-
"kind": "js",
|
|
1130
|
-
"name": "*",
|
|
1131
|
-
"declaration": {
|
|
1132
|
-
"name": "*",
|
|
1133
|
-
"package": "./accordion-item"
|
|
1134
|
-
}
|
|
1135
|
-
},
|
|
1136
|
-
{
|
|
1137
|
-
"kind": "js",
|
|
1138
|
-
"name": "*",
|
|
1139
|
-
"declaration": {
|
|
1140
|
-
"name": "*",
|
|
1141
|
-
"package": "./accordion-item.styles"
|
|
1142
|
-
}
|
|
1143
|
-
},
|
|
1144
|
-
{
|
|
1145
|
-
"kind": "js",
|
|
1146
|
-
"name": "*",
|
|
1147
|
-
"declaration": {
|
|
1148
|
-
"name": "*",
|
|
1149
|
-
"package": "./accordion-item.template"
|
|
1150
|
-
}
|
|
1151
|
-
}
|
|
1152
|
-
]
|
|
1153
|
-
},
|
|
1154
1006
|
{
|
|
1155
1007
|
"kind": "javascript-module",
|
|
1156
1008
|
"path": "src/actions-menu/actions-menu.stories.ts",
|
|
@@ -2193,7 +2045,7 @@
|
|
|
2193
2045
|
"type": {
|
|
2194
2046
|
"text": "StoryObj"
|
|
2195
2047
|
},
|
|
2196
|
-
"default": "{\n args: {\n bannerText: ` Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.\n Lorem, ipsum dolor.`,\n actionIgnoreActionText: 'Ignore',\n actionDemoText: 'Diagnose',\n actionButtonAppearance: 'lightweight',\n },\n argTypes: {\n actionButtonAppearance: {\n control: 'select',\n options: [...FastAppearanceValues, ...ZeroAppearanceValues],\n },\n },\n render: ({
|
|
2048
|
+
"default": "{\n args: {\n notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',\n bannerText: ` Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.\n Lorem, ipsum dolor.`,\n actionIgnoreActionText: 'Ignore',\n actionDemoText: 'Diagnose',\n actionButtonAppearance: 'lightweight',\n },\n argTypes: {\n actionButtonAppearance: {\n control: 'select',\n options: [...FastAppearanceValues, ...ZeroAppearanceValues],\n },\n },\n render: ({\n bannerText,\n notifyText,\n actionButtonAppearance,\n actionIgnoreActionText,\n actionDemoText,\n }) => html`\n <div style=\"display: flex; flex-direction: column;\">\n <zero-banner id=\"banner\">\n <div slot=\"content\">${bannerText}</div>\n <zero-button slot=\"action\" @click=\"${ignoreClick}\" appearance=\"${actionButtonAppearance}\">\n ${actionIgnoreActionText}\n </zero-button>\n <zero-button slot=\"action\" appearance=\"${actionButtonAppearance}\">\n ${actionDemoText}\n </zero-button>\n </zero-banner>\n <div id=\"zero-banner\" style=\"width: 100%;\">\n <zero-button @click=\"${() => showNotify(notifyText)}\">\n Show Zero Banner - Notification Structure\n </zero-button>\n </div>\n </div>\n `,\n}"
|
|
2197
2049
|
}
|
|
2198
2050
|
],
|
|
2199
2051
|
"exports": [
|
|
@@ -2656,6 +2508,154 @@
|
|
|
2656
2508
|
}
|
|
2657
2509
|
]
|
|
2658
2510
|
},
|
|
2511
|
+
{
|
|
2512
|
+
"kind": "javascript-module",
|
|
2513
|
+
"path": "src/accordion-item/accordion-item.styles.ts",
|
|
2514
|
+
"declarations": [
|
|
2515
|
+
{
|
|
2516
|
+
"kind": "function",
|
|
2517
|
+
"name": "zeroAccordionItemStyles",
|
|
2518
|
+
"return": {
|
|
2519
|
+
"type": {
|
|
2520
|
+
"text": "ElementStyles"
|
|
2521
|
+
}
|
|
2522
|
+
},
|
|
2523
|
+
"parameters": [
|
|
2524
|
+
{
|
|
2525
|
+
"name": "context",
|
|
2526
|
+
"type": {
|
|
2527
|
+
"text": "ElementDefinitionContext"
|
|
2528
|
+
}
|
|
2529
|
+
},
|
|
2530
|
+
{
|
|
2531
|
+
"name": "definition",
|
|
2532
|
+
"type": {
|
|
2533
|
+
"text": "FoundationElementDefinition"
|
|
2534
|
+
}
|
|
2535
|
+
}
|
|
2536
|
+
]
|
|
2537
|
+
}
|
|
2538
|
+
],
|
|
2539
|
+
"exports": [
|
|
2540
|
+
{
|
|
2541
|
+
"kind": "js",
|
|
2542
|
+
"name": "zeroAccordionItemStyles",
|
|
2543
|
+
"declaration": {
|
|
2544
|
+
"name": "zeroAccordionItemStyles",
|
|
2545
|
+
"module": "src/accordion-item/accordion-item.styles.ts"
|
|
2546
|
+
}
|
|
2547
|
+
}
|
|
2548
|
+
]
|
|
2549
|
+
},
|
|
2550
|
+
{
|
|
2551
|
+
"kind": "javascript-module",
|
|
2552
|
+
"path": "src/accordion-item/accordion-item.template.ts",
|
|
2553
|
+
"declarations": [
|
|
2554
|
+
{
|
|
2555
|
+
"kind": "function",
|
|
2556
|
+
"name": "zeroAccordionItemTemplate",
|
|
2557
|
+
"return": {
|
|
2558
|
+
"type": {
|
|
2559
|
+
"text": "ViewTemplate<AccordionItem>"
|
|
2560
|
+
}
|
|
2561
|
+
},
|
|
2562
|
+
"parameters": [
|
|
2563
|
+
{
|
|
2564
|
+
"name": "context",
|
|
2565
|
+
"type": {
|
|
2566
|
+
"text": "ElementDefinitionContext"
|
|
2567
|
+
}
|
|
2568
|
+
},
|
|
2569
|
+
{
|
|
2570
|
+
"name": "definition",
|
|
2571
|
+
"type": {
|
|
2572
|
+
"text": "FoundationElementDefinition"
|
|
2573
|
+
}
|
|
2574
|
+
}
|
|
2575
|
+
]
|
|
2576
|
+
}
|
|
2577
|
+
],
|
|
2578
|
+
"exports": [
|
|
2579
|
+
{
|
|
2580
|
+
"kind": "js",
|
|
2581
|
+
"name": "zeroAccordionItemTemplate",
|
|
2582
|
+
"declaration": {
|
|
2583
|
+
"name": "zeroAccordionItemTemplate",
|
|
2584
|
+
"module": "src/accordion-item/accordion-item.template.ts"
|
|
2585
|
+
}
|
|
2586
|
+
}
|
|
2587
|
+
]
|
|
2588
|
+
},
|
|
2589
|
+
{
|
|
2590
|
+
"kind": "javascript-module",
|
|
2591
|
+
"path": "src/accordion-item/accordion-item.ts",
|
|
2592
|
+
"declarations": [
|
|
2593
|
+
{
|
|
2594
|
+
"kind": "class",
|
|
2595
|
+
"description": "",
|
|
2596
|
+
"name": "AccordionItem",
|
|
2597
|
+
"superclass": {
|
|
2598
|
+
"name": "FoundationAccordionItem",
|
|
2599
|
+
"package": "@genesislcap/foundation-ui"
|
|
2600
|
+
},
|
|
2601
|
+
"tagName": "%%prefix%%-card",
|
|
2602
|
+
"customElement": true
|
|
2603
|
+
},
|
|
2604
|
+
{
|
|
2605
|
+
"kind": "variable",
|
|
2606
|
+
"name": "zeroAccordionItem"
|
|
2607
|
+
}
|
|
2608
|
+
],
|
|
2609
|
+
"exports": [
|
|
2610
|
+
{
|
|
2611
|
+
"kind": "js",
|
|
2612
|
+
"name": "AccordionItem",
|
|
2613
|
+
"declaration": {
|
|
2614
|
+
"name": "AccordionItem",
|
|
2615
|
+
"module": "src/accordion-item/accordion-item.ts"
|
|
2616
|
+
}
|
|
2617
|
+
},
|
|
2618
|
+
{
|
|
2619
|
+
"kind": "js",
|
|
2620
|
+
"name": "zeroAccordionItem",
|
|
2621
|
+
"declaration": {
|
|
2622
|
+
"name": "zeroAccordionItem",
|
|
2623
|
+
"module": "src/accordion-item/accordion-item.ts"
|
|
2624
|
+
}
|
|
2625
|
+
}
|
|
2626
|
+
]
|
|
2627
|
+
},
|
|
2628
|
+
{
|
|
2629
|
+
"kind": "javascript-module",
|
|
2630
|
+
"path": "src/accordion-item/index.ts",
|
|
2631
|
+
"declarations": [],
|
|
2632
|
+
"exports": [
|
|
2633
|
+
{
|
|
2634
|
+
"kind": "js",
|
|
2635
|
+
"name": "*",
|
|
2636
|
+
"declaration": {
|
|
2637
|
+
"name": "*",
|
|
2638
|
+
"package": "./accordion-item"
|
|
2639
|
+
}
|
|
2640
|
+
},
|
|
2641
|
+
{
|
|
2642
|
+
"kind": "js",
|
|
2643
|
+
"name": "*",
|
|
2644
|
+
"declaration": {
|
|
2645
|
+
"name": "*",
|
|
2646
|
+
"package": "./accordion-item.styles"
|
|
2647
|
+
}
|
|
2648
|
+
},
|
|
2649
|
+
{
|
|
2650
|
+
"kind": "js",
|
|
2651
|
+
"name": "*",
|
|
2652
|
+
"declaration": {
|
|
2653
|
+
"name": "*",
|
|
2654
|
+
"package": "./accordion-item.template"
|
|
2655
|
+
}
|
|
2656
|
+
}
|
|
2657
|
+
]
|
|
2658
|
+
},
|
|
2659
2659
|
{
|
|
2660
2660
|
"kind": "javascript-module",
|
|
2661
2661
|
"path": "src/breadcrumb-item/breadcrumb-item.styles.ts",
|
|
@@ -4750,7 +4750,7 @@
|
|
|
4750
4750
|
"type": {
|
|
4751
4751
|
"text": "StoryObj"
|
|
4752
4752
|
},
|
|
4753
|
-
"default": "{\n args: {\n dialogMaxWidth: '557px',\n dialogTitle: 'Dialog title',\n dialogInitialText: 'Some text in a Zero Dialog',\n dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n voluptas illo? Voluptatum, atque quidem?`,\n dialogCloseButtonText: 'Close this dialog',\n },\n render: ({\n dialogMaxWidth,\n dialogTitle,\n dialogInitialText,\n dialogMainText,\n dialogCloseButtonText,\n }) => html`\n <zero-button @click=\"${showDialog}\">Show Zero Dialog</zero-button>\n <zero-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\">\n <h5 slot=\"top\">${dialogTitle}</h5>\n <p>${dialogInitialText}</p>\n <p>${dialogMainText}</p>\n <zero-divider slot=\"bottom\"></zero-divider>\n <zero-button appearance=\"primary-gradient\" slot=\"bottom\" @click=\"${closeDialog}\">\n ${dialogCloseButtonText}\n </zero-button>\n </zero-dialog>\n `,\n}"
|
|
4753
|
+
"default": "{\n args: {\n notifyText:\n 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',\n dialogMaxWidth: '557px',\n dialogTitle: 'Dialog title',\n dialogInitialText: 'Some text in a Zero Dialog',\n dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n voluptas illo? Voluptatum, atque quidem?`,\n dialogCloseButtonText: 'Close this dialog',\n },\n render: ({\n notifyText,\n dialogMaxWidth,\n dialogTitle,\n dialogInitialText,\n dialogMainText,\n dialogCloseButtonText,\n }) => html`\n <zero-button @click=\"${showDialog}\">Show Zero Dialog</zero-button>\n <zero-button @click=\"${() => showDialogNotify(notifyText)}\">\n Show Zero Dialog - Notification Structure\n </zero-button>\n <div id=\"dialog-container\"></div>\n <zero-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\">\n <h5 slot=\"top\">${dialogTitle}</h5>\n <p>${dialogInitialText}</p>\n <p>${dialogMainText}</p>\n <zero-divider slot=\"bottom\"></zero-divider>\n <zero-button appearance=\"primary-gradient\" slot=\"bottom\" @click=\"${closeDialog}\">\n ${dialogCloseButtonText}\n </zero-button>\n </zero-dialog>\n `,\n}"
|
|
4754
4754
|
}
|
|
4755
4755
|
],
|
|
4756
4756
|
"exports": [
|
|
@@ -4862,6 +4862,25 @@
|
|
|
4862
4862
|
"module": "src/dialog/dialog.ts"
|
|
4863
4863
|
}
|
|
4864
4864
|
},
|
|
4865
|
+
{
|
|
4866
|
+
"kind": "field",
|
|
4867
|
+
"name": "notification",
|
|
4868
|
+
"type": {
|
|
4869
|
+
"text": "NotificationStructure"
|
|
4870
|
+
},
|
|
4871
|
+
"inheritedFrom": {
|
|
4872
|
+
"name": "DialogElement",
|
|
4873
|
+
"module": "src/dialog/dialog.ts"
|
|
4874
|
+
}
|
|
4875
|
+
},
|
|
4876
|
+
{
|
|
4877
|
+
"kind": "method",
|
|
4878
|
+
"name": "notificationChanged",
|
|
4879
|
+
"inheritedFrom": {
|
|
4880
|
+
"name": "DialogElement",
|
|
4881
|
+
"module": "src/dialog/dialog.ts"
|
|
4882
|
+
}
|
|
4883
|
+
},
|
|
4865
4884
|
{
|
|
4866
4885
|
"kind": "field",
|
|
4867
4886
|
"name": "position",
|
|
@@ -4952,6 +4971,31 @@
|
|
|
4952
4971
|
"module": "src/dialog/dialog.ts"
|
|
4953
4972
|
}
|
|
4954
4973
|
},
|
|
4974
|
+
{
|
|
4975
|
+
"kind": "method",
|
|
4976
|
+
"name": "dismiss",
|
|
4977
|
+
"privacy": "public",
|
|
4978
|
+
"description": "Dismiss the Dialog from display and calls the dismissing action.",
|
|
4979
|
+
"inheritedFrom": {
|
|
4980
|
+
"name": "DialogElement",
|
|
4981
|
+
"module": "src/dialog/dialog.ts"
|
|
4982
|
+
}
|
|
4983
|
+
},
|
|
4984
|
+
{
|
|
4985
|
+
"kind": "method",
|
|
4986
|
+
"name": "closeDialog",
|
|
4987
|
+
"privacy": "public",
|
|
4988
|
+
"return": {
|
|
4989
|
+
"type": {
|
|
4990
|
+
"text": "void"
|
|
4991
|
+
}
|
|
4992
|
+
},
|
|
4993
|
+
"description": "Dismiss the Dialog from display.",
|
|
4994
|
+
"inheritedFrom": {
|
|
4995
|
+
"name": "DialogElement",
|
|
4996
|
+
"module": "src/dialog/dialog.ts"
|
|
4997
|
+
}
|
|
4998
|
+
},
|
|
4955
4999
|
{
|
|
4956
5000
|
"kind": "field",
|
|
4957
5001
|
"name": "_presentation",
|
|
@@ -5857,10 +5901,7 @@
|
|
|
5857
5901
|
{
|
|
5858
5902
|
"kind": "variable",
|
|
5859
5903
|
"name": "zeroErrorBannerTemplate",
|
|
5860
|
-
"
|
|
5861
|
-
"text": "ViewTemplate<ErrorBanner>"
|
|
5862
|
-
},
|
|
5863
|
-
"default": "html`\n <zero-banner ${ref('banner')}>\n <div slot=\"content\">\n <div>\n ${(x) => x.error?.errorDetails || x.notification?.body || 'Place holder for error message'}\n </div>\n </div>\n\n <zero-button slot=\"action\" appearance=\"lightweight\" @click=${(x) => x.dismiss()}>\n ${(x) =>\n x.error?.config?.banner?.dismissingAction?.label ||\n x.notification?.config?.banner?.dismissingAction?.label ||\n 'Ignore'}\n </zero-button>\n\n ${repeat(\n (x) =>\n x.error?.config?.banner.confirmingActions ||\n x.notification?.config?.banner.confirmingActions,\n html`\n <zero-button\n slot=\"action\"\n appearance=\"lightweight\"\n @click=${(x, c) => {\n x?.action();\n c.parent.dismiss();\n }}\n >\n ${(x) => x.label}\n </zero-button>\n `,\n )}\n </zero-banner>\n`"
|
|
5904
|
+
"default": "html<ErrorBanner>`\n ${getPrefixedErrorBanner('zero')}\n`"
|
|
5864
5905
|
}
|
|
5865
5906
|
],
|
|
5866
5907
|
"exports": [
|
|
@@ -9801,6 +9842,25 @@
|
|
|
9801
9842
|
"module": "src/dialog/dialog.ts"
|
|
9802
9843
|
}
|
|
9803
9844
|
},
|
|
9845
|
+
{
|
|
9846
|
+
"kind": "field",
|
|
9847
|
+
"name": "notification",
|
|
9848
|
+
"type": {
|
|
9849
|
+
"text": "NotificationStructure"
|
|
9850
|
+
},
|
|
9851
|
+
"inheritedFrom": {
|
|
9852
|
+
"name": "DialogElement",
|
|
9853
|
+
"module": "src/dialog/dialog.ts"
|
|
9854
|
+
}
|
|
9855
|
+
},
|
|
9856
|
+
{
|
|
9857
|
+
"kind": "method",
|
|
9858
|
+
"name": "notificationChanged",
|
|
9859
|
+
"inheritedFrom": {
|
|
9860
|
+
"name": "DialogElement",
|
|
9861
|
+
"module": "src/dialog/dialog.ts"
|
|
9862
|
+
}
|
|
9863
|
+
},
|
|
9804
9864
|
{
|
|
9805
9865
|
"kind": "field",
|
|
9806
9866
|
"name": "position",
|
|
@@ -9891,6 +9951,31 @@
|
|
|
9891
9951
|
"module": "src/dialog/dialog.ts"
|
|
9892
9952
|
}
|
|
9893
9953
|
},
|
|
9954
|
+
{
|
|
9955
|
+
"kind": "method",
|
|
9956
|
+
"name": "dismiss",
|
|
9957
|
+
"privacy": "public",
|
|
9958
|
+
"description": "Dismiss the Dialog from display and calls the dismissing action.",
|
|
9959
|
+
"inheritedFrom": {
|
|
9960
|
+
"name": "DialogElement",
|
|
9961
|
+
"module": "src/dialog/dialog.ts"
|
|
9962
|
+
}
|
|
9963
|
+
},
|
|
9964
|
+
{
|
|
9965
|
+
"kind": "method",
|
|
9966
|
+
"name": "closeDialog",
|
|
9967
|
+
"privacy": "public",
|
|
9968
|
+
"return": {
|
|
9969
|
+
"type": {
|
|
9970
|
+
"text": "void"
|
|
9971
|
+
}
|
|
9972
|
+
},
|
|
9973
|
+
"description": "Dismiss the Dialog from display.",
|
|
9974
|
+
"inheritedFrom": {
|
|
9975
|
+
"name": "DialogElement",
|
|
9976
|
+
"module": "src/dialog/dialog.ts"
|
|
9977
|
+
}
|
|
9978
|
+
},
|
|
9894
9979
|
{
|
|
9895
9980
|
"kind": "field",
|
|
9896
9981
|
"name": "_presentation",
|
|
@@ -12726,10 +12811,7 @@
|
|
|
12726
12811
|
{
|
|
12727
12812
|
"kind": "variable",
|
|
12728
12813
|
"name": "zeroSnackbarTemplate",
|
|
12729
|
-
"
|
|
12730
|
-
"text": "ViewTemplate<Snackbar>"
|
|
12731
|
-
},
|
|
12732
|
-
"default": "html`\n <div class=\"snackbar ${(x) => x.deleteAnimation}\" ${ref('snackbar')}>\n <div part=\"content\" class=\"content\">\n <div>\n ${(x) => x.error?.errorDetails || x.notification?.body || 'Place holder for error message'}\n </div>\n </div>\n <div part=\"action\" class=\"action\">\n ${repeat(\n (x) =>\n x.error?.config?.snackbar?.confirmingActions ||\n x.notification?.config?.snackbar?.confirmingActions,\n html`\n <zero-button\n slot=\"action\"\n appearance=\"lightweight\"\n @click=${(x, c) => {\n x?.action();\n c.parent?.dismiss();\n }}\n >\n ${(x) => x.label}\n </zero-button>\n `,\n )}\n </div>\n </div>\n`"
|
|
12814
|
+
"default": "html<Snackbar>`\n ${getPrefixedSnackbar('zero')}\n`"
|
|
12733
12815
|
}
|
|
12734
12816
|
],
|
|
12735
12817
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner.stories.d.ts","sourceRoot":"","sources":["../../../src/banner/banner.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAKhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"banner.stories.d.ts","sourceRoot":"","sources":["../../../src/banner/banner.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAKhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AA+BpB,eAAO,MAAM,OAAO,EAAE,QAuCrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAmCpB,eAAO,MAAM,OAAO,EAAE,QAqCrB,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export declare const zeroErrorBannerTemplate: ViewTemplate<ErrorBanner>;
|
|
1
|
+
import { ErrorBanner } from './error-banner';
|
|
2
|
+
export declare const zeroErrorBannerTemplate: import("@microsoft/fast-element").ViewTemplate<ErrorBanner, any>;
|
|
4
3
|
//# sourceMappingURL=error-banner.template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error-banner.template.d.ts","sourceRoot":"","sources":["../../../src/error-banner/error-banner.template.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"error-banner.template.d.ts","sourceRoot":"","sources":["../../../src/error-banner/error-banner.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,uBAAuB,kEAEnC,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export declare const zeroSnackbarTemplate: ViewTemplate<Snackbar>;
|
|
1
|
+
import { Snackbar } from './snackbar';
|
|
2
|
+
export declare const zeroSnackbarTemplate: import("@microsoft/fast-element").ViewTemplate<Snackbar, any>;
|
|
4
3
|
//# sourceMappingURL=snackbar.template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.template.d.ts","sourceRoot":"","sources":["../../../src/snackbar/snackbar.template.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"snackbar.template.d.ts","sourceRoot":"","sources":["../../../src/snackbar/snackbar.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAO,MAAM,oBAAoB,+DAEhC,CAAC"}
|
|
@@ -5,12 +5,38 @@ const meta = {
|
|
|
5
5
|
component: 'zero-banner',
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
|
+
const showNotify = (notifyText) => {
|
|
9
|
+
var _a;
|
|
10
|
+
let errorBanner = document.querySelector('#js-banner');
|
|
11
|
+
if (!errorBanner) {
|
|
12
|
+
errorBanner = document.createElement('zero-banner');
|
|
13
|
+
errorBanner.id = 'js-banner';
|
|
14
|
+
(_a = document.querySelector('#zero-banner')) === null || _a === void 0 ? void 0 : _a.appendChild(errorBanner);
|
|
15
|
+
}
|
|
16
|
+
errorBanner.notification = {
|
|
17
|
+
title: 'Notify Title',
|
|
18
|
+
body: `${notifyText} ID - notify - ${Math.random()}`,
|
|
19
|
+
config: {
|
|
20
|
+
banner: {
|
|
21
|
+
confirmingActions: [
|
|
22
|
+
{
|
|
23
|
+
label: 'Action',
|
|
24
|
+
action: () => {
|
|
25
|
+
alert('Action in progress');
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
],
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
};
|
|
8
33
|
const ignoreClick = (e) => {
|
|
9
34
|
const banner = document.querySelector('#banner');
|
|
10
35
|
banner.dismiss();
|
|
11
36
|
};
|
|
12
37
|
export const Primary = {
|
|
13
38
|
args: {
|
|
39
|
+
notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
|
|
14
40
|
bannerText: ` Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
|
|
15
41
|
Lorem, ipsum dolor.`,
|
|
16
42
|
actionIgnoreActionText: 'Ignore',
|
|
@@ -23,15 +49,22 @@ export const Primary = {
|
|
|
23
49
|
options: [...FastAppearanceValues, ...ZeroAppearanceValues],
|
|
24
50
|
},
|
|
25
51
|
},
|
|
26
|
-
render: ({ bannerText, actionButtonAppearance, actionIgnoreActionText, actionDemoText }) => html `
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
${
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
${
|
|
34
|
-
|
|
35
|
-
|
|
52
|
+
render: ({ bannerText, notifyText, actionButtonAppearance, actionIgnoreActionText, actionDemoText, }) => html `
|
|
53
|
+
<div style="display: flex; flex-direction: column;">
|
|
54
|
+
<zero-banner id="banner">
|
|
55
|
+
<div slot="content">${bannerText}</div>
|
|
56
|
+
<zero-button slot="action" @click="${ignoreClick}" appearance="${actionButtonAppearance}">
|
|
57
|
+
${actionIgnoreActionText}
|
|
58
|
+
</zero-button>
|
|
59
|
+
<zero-button slot="action" appearance="${actionButtonAppearance}">
|
|
60
|
+
${actionDemoText}
|
|
61
|
+
</zero-button>
|
|
62
|
+
</zero-banner>
|
|
63
|
+
<div id="zero-banner" style="width: 100%;">
|
|
64
|
+
<zero-button @click="${() => showNotify(notifyText)}">
|
|
65
|
+
Show Zero Banner - Notification Structure
|
|
66
|
+
</zero-button>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
36
69
|
`,
|
|
37
70
|
};
|
|
@@ -12,8 +12,31 @@ const closeDialog = (e) => {
|
|
|
12
12
|
const dialog = document.querySelector('zero-dialog');
|
|
13
13
|
dialog.close();
|
|
14
14
|
};
|
|
15
|
+
const showDialogNotify = (notifyText) => {
|
|
16
|
+
const dialog = document.createElement('zero-dialog');
|
|
17
|
+
const container = document.getElementById('dialog-container');
|
|
18
|
+
container.appendChild(dialog);
|
|
19
|
+
dialog.notification = {
|
|
20
|
+
title: 'Notify Title',
|
|
21
|
+
body: `${notifyText} ID - notify - ${Math.random()}`,
|
|
22
|
+
config: {
|
|
23
|
+
dialog: {
|
|
24
|
+
confirmingActions: [
|
|
25
|
+
{
|
|
26
|
+
label: 'Action',
|
|
27
|
+
action: () => {
|
|
28
|
+
alert('Action in progress');
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
dialog.show();
|
|
36
|
+
};
|
|
15
37
|
export const Primary = {
|
|
16
38
|
args: {
|
|
39
|
+
notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',
|
|
17
40
|
dialogMaxWidth: '557px',
|
|
18
41
|
dialogTitle: 'Dialog title',
|
|
19
42
|
dialogInitialText: 'Some text in a Zero Dialog',
|
|
@@ -24,8 +47,12 @@ export const Primary = {
|
|
|
24
47
|
voluptas illo? Voluptatum, atque quidem?`,
|
|
25
48
|
dialogCloseButtonText: 'Close this dialog',
|
|
26
49
|
},
|
|
27
|
-
render: ({ dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, }) => html `
|
|
50
|
+
render: ({ notifyText, dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, }) => html `
|
|
28
51
|
<zero-button @click="${showDialog}">Show Zero Dialog</zero-button>
|
|
52
|
+
<zero-button @click="${() => showDialogNotify(notifyText)}">
|
|
53
|
+
Show Zero Dialog - Notification Structure
|
|
54
|
+
</zero-button>
|
|
55
|
+
<div id="dialog-container"></div>
|
|
29
56
|
<zero-dialog style="--dialog-max-width: ${dialogMaxWidth};">
|
|
30
57
|
<h5 slot="top">${dialogTitle}</h5>
|
|
31
58
|
<p>${dialogInitialText}</p>
|
|
@@ -1,36 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getPrefixedErrorBanner } from '@genesislcap/foundation-ui';
|
|
2
|
+
import { html } from '@microsoft/fast-element';
|
|
2
3
|
export const zeroErrorBannerTemplate = html `
|
|
3
|
-
|
|
4
|
-
<div slot="content">
|
|
5
|
-
<div>
|
|
6
|
-
${(x) => { var _a, _b; return ((_a = x.error) === null || _a === void 0 ? void 0 : _a.errorDetails) || ((_b = x.notification) === null || _b === void 0 ? void 0 : _b.body) || 'Place holder for error message'; }}
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
|
|
10
|
-
<zero-button slot="action" appearance="lightweight" @click=${(x) => x.dismiss()}>
|
|
11
|
-
${(x) => {
|
|
12
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
13
|
-
return ((_d = (_c = (_b = (_a = x.error) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.banner) === null || _c === void 0 ? void 0 : _c.dismissingAction) === null || _d === void 0 ? void 0 : _d.label) ||
|
|
14
|
-
((_h = (_g = (_f = (_e = x.notification) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.banner) === null || _g === void 0 ? void 0 : _g.dismissingAction) === null || _h === void 0 ? void 0 : _h.label) ||
|
|
15
|
-
'Ignore';
|
|
16
|
-
}}
|
|
17
|
-
</zero-button>
|
|
18
|
-
|
|
19
|
-
${repeat((x) => {
|
|
20
|
-
var _a, _b, _c, _d;
|
|
21
|
-
return ((_b = (_a = x.error) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.banner.confirmingActions) ||
|
|
22
|
-
((_d = (_c = x.notification) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.banner.confirmingActions);
|
|
23
|
-
}, html `
|
|
24
|
-
<zero-button
|
|
25
|
-
slot="action"
|
|
26
|
-
appearance="lightweight"
|
|
27
|
-
@click=${(x, c) => {
|
|
28
|
-
x === null || x === void 0 ? void 0 : x.action();
|
|
29
|
-
c.parent.dismiss();
|
|
30
|
-
}}
|
|
31
|
-
>
|
|
32
|
-
${(x) => x.label}
|
|
33
|
-
</zero-button>
|
|
34
|
-
`)}
|
|
35
|
-
</zero-banner>
|
|
4
|
+
${getPrefixedErrorBanner('zero')}
|
|
36
5
|
`;
|
|
@@ -1,29 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getPrefixedSnackbar } from '@genesislcap/foundation-ui';
|
|
2
|
+
import { html } from '@microsoft/fast-element';
|
|
2
3
|
export const zeroSnackbarTemplate = html `
|
|
3
|
-
|
|
4
|
-
<div part="content" class="content">
|
|
5
|
-
<div>
|
|
6
|
-
${(x) => { var _a, _b; return ((_a = x.error) === null || _a === void 0 ? void 0 : _a.errorDetails) || ((_b = x.notification) === null || _b === void 0 ? void 0 : _b.body) || 'Place holder for error message'; }}
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<div part="action" class="action">
|
|
10
|
-
${repeat((x) => {
|
|
11
|
-
var _a, _b, _c, _d, _e, _f;
|
|
12
|
-
return ((_c = (_b = (_a = x.error) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.snackbar) === null || _c === void 0 ? void 0 : _c.confirmingActions) ||
|
|
13
|
-
((_f = (_e = (_d = x.notification) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.snackbar) === null || _f === void 0 ? void 0 : _f.confirmingActions);
|
|
14
|
-
}, html `
|
|
15
|
-
<zero-button
|
|
16
|
-
slot="action"
|
|
17
|
-
appearance="lightweight"
|
|
18
|
-
@click=${(x, c) => {
|
|
19
|
-
var _a;
|
|
20
|
-
x === null || x === void 0 ? void 0 : x.action();
|
|
21
|
-
(_a = c.parent) === null || _a === void 0 ? void 0 : _a.dismiss();
|
|
22
|
-
}}
|
|
23
|
-
>
|
|
24
|
-
${(x) => x.label}
|
|
25
|
-
</zero-button>
|
|
26
|
-
`)}
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
4
|
+
${getPrefixedSnackbar('zero')}
|
|
29
5
|
`;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-zero",
|
|
3
3
|
"description": "Genesis Foundation Zero Design System",
|
|
4
|
-
"version": "14.92.
|
|
4
|
+
"version": "14.92.3-beta.0a7ca6c.1",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
8
8
|
"types": "dist/dts/index.d.ts",
|
|
9
9
|
"engines": {
|
|
10
|
-
"node": ">=
|
|
10
|
+
"node": ">=20.0.0"
|
|
11
11
|
},
|
|
12
12
|
"config": {
|
|
13
13
|
"PREFIX": "zero",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"storybook": "storybook dev -p 6006"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@genesislcap/genx": "14.92.
|
|
68
|
+
"@genesislcap/genx": "14.92.3-beta.0a7ca6c.1",
|
|
69
69
|
"@storybook/addon-essentials": "^7.1.0",
|
|
70
70
|
"@storybook/addon-links": "^7.1.0",
|
|
71
71
|
"@storybook/addons": "^7.1.0",
|
|
@@ -78,10 +78,10 @@
|
|
|
78
78
|
"storybook": "^7.1.0"
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
|
-
"@genesislcap/foundation-comms": "14.92.
|
|
82
|
-
"@genesislcap/foundation-logger": "14.92.
|
|
83
|
-
"@genesislcap/foundation-ui": "14.92.
|
|
84
|
-
"@genesislcap/foundation-utils": "14.92.
|
|
81
|
+
"@genesislcap/foundation-comms": "14.92.3-beta.0a7ca6c.1",
|
|
82
|
+
"@genesislcap/foundation-logger": "14.92.3-beta.0a7ca6c.1",
|
|
83
|
+
"@genesislcap/foundation-ui": "14.92.3-beta.0a7ca6c.1",
|
|
84
|
+
"@genesislcap/foundation-utils": "14.92.3-beta.0a7ca6c.1",
|
|
85
85
|
"@microsoft/fast-colors": "^5.1.4",
|
|
86
86
|
"@microsoft/fast-components": "^2.21.3",
|
|
87
87
|
"@microsoft/fast-element": "^1.7.0",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"access": "public"
|
|
99
99
|
},
|
|
100
100
|
"customElements": "dist/custom-elements.json",
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "521267599ab4dd8d042ae4b59c0c842af9018ae5"
|
|
102
102
|
}
|