genesys-react-components 1.0.5-DEVENGAGE-2962-date-format-config.664 → 1.0.6-devengage-2942-fix.676
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/build/index.js +16 -16
- package/build/index.js.map +1 -1
- package/package.json +5 -5
- package/src/alertblock/AlertBlock.scss +24 -26
- package/src/codefence/CodeFence.scss +5 -7
- package/src/copybutton/CopyButton.scss +1 -3
- package/src/datatable/DataTable.scss +8 -10
- package/src/dxaccordion/DxAccordion.scss +4 -6
- package/src/dxbutton/DxButton.scss +24 -26
- package/src/dxitemgroup/DxCheckbox.scss +14 -16
- package/src/dxitemgroup/DxCheckbox.tsx +4 -1
- package/src/dxitemgroup/dropdown.scss +8 -10
- package/src/dxitemgroup/multiselect.scss +10 -12
- package/src/dxlabel/DxLabel.scss +2 -4
- package/src/dxtabbedcontent/DxTabbedContent.scss +4 -6
- package/src/dxtextbox/DxTextbox.scss +13 -15
- package/src/dxtoggle/DxToggle.scss +11 -13
- package/src/loadingplaceholder/LoadingPlaceholder.scss +2 -4
package/build/index.js
CHANGED
|
@@ -32,7 +32,7 @@ function styleInject(css, ref) {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
var css_248z$i = "
|
|
35
|
+
var css_248z$i = ".dx-accordion {\n margin: 0;\n}\n.dx-accordion .accordion-heading {\n border-width: 0 0 1px 0;\n border-style: solid;\n border-color: var(--theme-core-layout-border-color);\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n line-height: 14px;\n color: var(--theme-core-text-color);\n padding: 13px 20px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n}\n.dx-accordion .accordion-heading .icon {\n line-height: 0;\n}\n.dx-accordion .accordion-heading__left {\n align-self: left;\n}\n.dx-accordion .accordion-content {\n color: var(--theme-core-text-color);\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid var(--theme-core-layout-border-color);\n}\n.dx-accordion .accordion-content > *:first-child {\n margin-top: 0;\n}\n.dx-accordion .accordion-content > *:last-child {\n margin-bottom: 0;\n}";
|
|
36
36
|
styleInject(css_248z$i);
|
|
37
37
|
|
|
38
38
|
function DxAccordion(props) {
|
|
@@ -81,7 +81,7 @@ function DxAccordionGroup(props) {
|
|
|
81
81
|
return React.createElement("div", { className: `dx-accordion-group${props.className ? ' ' + props.className : ''}` }, props.children);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
var css_248z$g = "
|
|
84
|
+
var css_248z$g = ".dx-button {\n margin: 15px 10px;\n border-radius: 2px;\n padding: 8px 15px;\n cursor: pointer;\n font-weight: 500;\n}\n.dx-button-primary {\n color: var(--theme-dxbutton-primary-text-color);\n border: 1px solid var(--theme-dxbutton-primary-background-color);\n background-color: var(--theme-dxbutton-primary-background-color);\n}\n.dx-button-primary:hover {\n background-color: var(--theme-dxbutton-primary-hover-background-color);\n border-color: var(--theme-dxbutton-primary-hover-background-color);\n transition: 0.1s;\n}\n.dx-button-primary:focus {\n background-color: var(--theme-dxbutton-primary-background-color);\n border-color: var(--theme-dxbutton-primary-background-color);\n box-shadow: 0 0 0 2px var(--theme-dxbutton-primary-shadow-color);\n transition: 0.1s;\n}\n.dx-button-primary:disabled {\n background-color: var(--theme-dxbutton-primary-disabled-background-color);\n border-color: var(--theme-dxbutton-primary-disabled-background-color);\n transition: 0.1s;\n cursor: not-allowed;\n}\n.dx-button-secondary {\n background-color: var(--theme-dxbutton-secondary-background-color);\n border: 1px solid var(--theme-dxbutton-secondary-border-color);\n color: var(--theme-dxbutton-secondary-border-color);\n}\n.dx-button-secondary:hover {\n color: var(--theme-dxbutton-secondary-hover-border-color);\n border-color: var(--theme-dxbutton-secondary-border-color);\n transition: 0.1s;\n}\n.dx-button-secondary:focus {\n color: var(--theme-dxbutton-secondary-border-color);\n border-color: var(--theme-dxbutton-secondary-border-color);\n box-shadow: 0 0 0 2px var(--theme-dxbutton-secondary-shadow-color);\n transition: 0.1s;\n}\n.dx-button-secondary:disabled {\n color: var(--theme-dxbutton-secondary-disabled-text-color);\n background-color: var(--theme-dxbutton-secondary-disabled-background-color);\n border-color: var(--theme-dxbutton-secondary-disabled-background-color);\n transition: 0.1s;\n cursor: not-allowed;\n}\n.dx-button-link {\n color: var(--theme-core-link-color);\n background: transparent;\n margin: 0;\n padding: 0 2px;\n border: 0;\n}\n.dx-button-link:hover {\n color: var(--theme-core-link-hover-color);\n border-color: var(--theme-dxbutton-secondary-border-color);\n}\n.dx-button-link:disabled {\n color: #8a9a9e;\n transition: 0.1s;\n cursor: not-allowed;\n text-decoration: line-through;\n}";
|
|
85
85
|
styleInject(css_248z$g);
|
|
86
86
|
|
|
87
87
|
function DxButton(props) {
|
|
@@ -112,13 +112,13 @@ styleInject(css_248z$f);
|
|
|
112
112
|
var css_248z$e = "";
|
|
113
113
|
styleInject(css_248z$e);
|
|
114
114
|
|
|
115
|
-
var css_248z$d = "@charset \"UTF-8\";\n
|
|
115
|
+
var css_248z$d = "@charset \"UTF-8\";\n.dx-select-group {\n appearance: none;\n position: relative;\n}\n.dx-select-group select {\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-alt-background-color);\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-textbox-text-color);\n padding: 8px 32px 8px 12px;\n width: 100%;\n appearance: none;\n}\n.dx-select-group select:focus-visible {\n outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-select-group::after {\n position: absolute;\n bottom: 12px;\n right: 12px;\n content: \"⌄\";\n font-size: 8px;\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n pointer-events: none;\n}\n.dx-select-group.disabled::after {\n color: var(--theme-core-control-disabled-text-color);\n}\n.dx-select-group.disabled select:disabled {\n background-color: var(--theme-core-control-disabled-background-color);\n border-color: var(--theme-core-control-disabled-border-color);\n color: var(--theme-core-control-disabled-text-color);\n cursor: not-allowed;\n}";
|
|
116
116
|
styleInject(css_248z$d);
|
|
117
117
|
|
|
118
|
-
var css_248z$c = "
|
|
118
|
+
var css_248z$c = ".dx-multiselect-group {\n appearance: none;\n position: relative;\n}\n.dx-multiselect-group select {\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-alt-background-color);\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-textbox-text-color);\n width: 100%;\n appearance: none;\n scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-multiselect-group select option {\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n -webkit-appearance: none;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 31px;\n padding: 8px 12px;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-multiselect-group select option:checked {\n color: var(--theme-core-tag-text-color);\n background-color: var(--theme-core-tag-background-color);\n}\n.dx-multiselect-group select option:disabled {\n color: #8a9a9e;\n cursor: not-allowed;\n}\n.dx-multiselect-group select::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n height: 7px;\n}\n.dx-multiselect-group select::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #b0b2b5;\n}\n.dx-multiselect-group select::-webkit-scrollbar-corner {\n background: transparent;\n}\n.dx-multiselect-group.disabled select:disabled {\n background-color: var(--theme-core-control-disabled-background-color);\n border-color: var(--theme-core-control-disabled-border-color);\n cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n color: var(--theme-core-control-disabled-text-color);\n}";
|
|
119
119
|
styleInject(css_248z$c);
|
|
120
120
|
|
|
121
|
-
var css_248z$b = "
|
|
121
|
+
var css_248z$b = ".dx-label {\n margin: 20px 0;\n display: block;\n}\n.dx-label .label-text,\n.dx-label .input-description {\n display: block;\n font-family: Roboto;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-core-control-label-color);\n}\n.dx-label .label-text {\n margin: 0 0 4px 0;\n}\n.dx-label .input-description {\n padding: 6px 20px;\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n}\n.dx-label .input-description .icon {\n color: var(--theme-alertblock-info-icon-color);\n line-height: 0;\n}";
|
|
122
122
|
styleInject(css_248z$b);
|
|
123
123
|
|
|
124
124
|
function DxLabel(props) {
|
|
@@ -138,7 +138,7 @@ function DxLabel(props) {
|
|
|
138
138
|
return React.createElement("label", { className: className }, contents);
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
var css_248z$a = "@charset \"UTF-8\";\n
|
|
141
|
+
var css_248z$a = "@charset \"UTF-8\";\n.dx-checkbox {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n margin: 15px 0;\n}\n.dx-checkbox:first-of-type {\n margin-top: 0;\n}\n.dx-checkbox .label-text {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n color: var(--theme-core-text-color);\n}\n.dx-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n background-color: var(--theme-core-control-background-color);\n flex-shrink: 0;\n}\n.dx-checkbox input[type=checkbox]::before {\n display: none;\n}\n.dx-checkbox input[type=checkbox]:checked {\n background-color: var(--theme-core-control-background-color);\n}\n.dx-checkbox input[type=checkbox]:checked::before {\n display: block;\n position: relative;\n top: 7px;\n left: 3px;\n font-size: 9px;\n line-height: 0;\n color: var(--theme-core-control-punch-color);\n content: \"✓\";\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox input[type=radio] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 8px;\n background-color: var(--theme-core-control-background-color);\n flex-shrink: 0;\n}\n.dx-checkbox input[type=radio]::before {\n display: none;\n}\n.dx-checkbox input[type=radio]:checked::before {\n content: \"\";\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 8px;\n position: relative;\n top: 2px;\n left: 2px;\n background-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox.disabled {\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input {\n border-color: var(--theme-core-control-disabled-border-color);\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n background-color: var(--theme-core-control-disabled-background-color);\n cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n margin: 0;\n}";
|
|
142
142
|
styleInject(css_248z$a);
|
|
143
143
|
|
|
144
144
|
function DxCheckbox(props) {
|
|
@@ -154,8 +154,8 @@ function DxCheckbox(props) {
|
|
|
154
154
|
props.onCheckChanged(checked);
|
|
155
155
|
}, [checked]);
|
|
156
156
|
return (React.createElement("label", { className: `dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}` },
|
|
157
|
-
React.createElement("input", { type: props.useRadioType ? 'radio' : 'checkbox', name: props.name, value: props.itemValue, checked: checked, onChange: (e) => setChecked(e.target.checked), disabled: props.disabled === true }),
|
|
158
|
-
React.createElement("span", { className:
|
|
157
|
+
React.createElement("input", { type: props.useRadioType ? 'radio' : 'checkbox', name: props.name, value: props.itemValue, checked: checked, onChange: (e) => setChecked(e.target.checked), disabled: props.disabled === true, title: props.description }),
|
|
158
|
+
React.createElement("span", { className: "label-text", title: props.description }, props.label)));
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
function DxItemGroup(props) {
|
|
@@ -240,7 +240,7 @@ function DxItemGroup(props) {
|
|
|
240
240
|
}
|
|
241
241
|
}
|
|
242
242
|
|
|
243
|
-
var css_248z$9 = "
|
|
243
|
+
var css_248z$9 = ".dx-tabbed-content {\n margin: 40px 0;\n}\n.dx-tabbed-content .tab-titles {\n border-bottom: 1px solid var(--theme-core-layout-border-color);\n font-weight: normal;\n font-size: 14px;\n line-height: 20px;\n}\n.dx-tabbed-content .tab-titles .tab-title {\n display: inline-block;\n padding: 5px 20px;\n border-bottom: 1px solid transparent;\n cursor: pointer;\n}\n.dx-tabbed-content .tab-titles .tab-title:hover {\n border-color: var(--theme-core-control-punch-color);\n}\n.dx-tabbed-content .tab-titles .tab-title.active {\n border-bottom-color: var(--theme-core-control-punch-color);\n font-weight: bold;\n}\n.dx-tabbed-content .tab-titles .tab-title p {\n margin: 0;\n display: inline;\n}\n.dx-tabbed-content .tab-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid var(--theme-core-layout-border-color);\n}\n.dx-tabbed-content .tab-content > *:first-child {\n margin-top: 0;\n}\n.dx-tabbed-content .tab-content > *:last-child {\n margin-bottom: 0;\n}";
|
|
244
244
|
styleInject(css_248z$9);
|
|
245
245
|
|
|
246
246
|
function DxTabbedContent(props) {
|
|
@@ -262,7 +262,7 @@ function DxTabPanel(props) {
|
|
|
262
262
|
return React.createElement("div", { className: `dx-tab-panel${props.className ? ' ' + props.className : ''}` }, props.children);
|
|
263
263
|
}
|
|
264
264
|
|
|
265
|
-
var css_248z$7 = "
|
|
265
|
+
var css_248z$7 = ".dx-textbox {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n margin: 0;\n padding: 0 10px;\n height: 32px;\n background-color: var(--theme-core-control-alt-background-color);\n}\n.dx-textbox.with-label {\n margin-top: 0;\n}\n.dx-textbox:focus-within {\n outline: #aac9ff solid 2px;\n}\n.dx-textbox .icon {\n display: block;\n flex: none;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-textbox .icon.input-icon {\n font-size: 14px;\n line-height: 0;\n}\n.dx-textbox .icon.clear-icon {\n font-size: 11px;\n line-height: 0;\n cursor: pointer;\n padding: 4px;\n margin-right: -4px;\n}\n.dx-textbox .dx-input {\n flex-grow: 1;\n border: 0;\n background: transparent;\n box-sizing: border-box;\n height: 32px;\n width: 100%;\n padding: 0;\n margin: 0;\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 16px;\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-textbox .dx-input:focus-visible {\n outline: 0;\n}\n.dx-textbox .dx-input::placeholder {\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: var(--theme-core-control-textbox-placeholder-text-color);\n}\n.dx-textbox.disabled {\n background-color: var(--theme-dxbutton-secondary-disabled-background-color);\n cursor: not-allowed;\n}\n.dx-textbox.disabled input {\n cursor: not-allowed;\n color: var(--theme-dxbutton-secondary-disabled-text-color);\n}\n.dx-textbox.disabled .icon,\n.dx-textbox.disabled input::placeholder {\n color: var(--theme-dxbutton-secondary-disabled-text-color);\n}\n\n.dx-textarea {\n padding: 10px;\n border: 1px solid var(--theme-core-control-border-color);\n border-radius: 2px;\n width: 100%;\n font-family: \"Roboto\", sans-serif;\n box-sizing: border-box;\n background-color: var(--theme-core-control-alt-background-color);\n color: var(--theme-core-control-textbox-text-color);\n}\n.dx-textarea:focus-within {\n outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-textarea::placeholder {\n font-family: \"Roboto\", sans-serif;\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: var(--theme-core-control-textbox-placeholder-text-color);\n}";
|
|
266
266
|
styleInject(css_248z$7);
|
|
267
267
|
|
|
268
268
|
function DxTextbox(props) {
|
|
@@ -416,7 +416,7 @@ function DxTextbox(props) {
|
|
|
416
416
|
return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className }, component));
|
|
417
417
|
}
|
|
418
418
|
|
|
419
|
-
var css_248z$6 = "
|
|
419
|
+
var css_248z$6 = ".dx-toggle-container {\n display: inline-block;\n}\n.dx-toggle-container .dx-toggle {\n border: 1px solid var(--theme-core-control-border-color);\n background: var(--theme-core-control-background-color);\n border-radius: 6px;\n height: 26px;\n padding: 0px 4px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 2px;\n cursor: pointer;\n}\n.dx-toggle-container .dx-toggle:hover .slider {\n border-color: var(--theme-core-control-focus-color);\n}\n.dx-toggle-container .dx-toggle .icon {\n font-size: 10px;\n line-height: 0;\n margin: 0 5px;\n color: var(--theme-core-control-border-color);\n}\n.dx-toggle-container .dx-toggle .clear-placeholder {\n width: 19px;\n padding: 0 1px 0 0;\n margin: 0;\n display: block;\n}\n.dx-toggle-container .dx-toggle .slider {\n height: 22px;\n width: 22px;\n border-radius: 22px;\n background-color: var(--theme-core-control-punch-color);\n box-shadow: 0px 1px 2px var(--theme-core-box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n}\n.dx-toggle-container .dx-toggle .slider .icon {\n font-size: 10px;\n line-height: 0;\n color: var(--theme-core-control-background-color);\n padding: 0;\n margin: 0;\n}\n.dx-toggle-container.disabled .dx-toggle {\n cursor: not-allowed;\n opacity: 0.7;\n border-color: var(--theme-core-control-border-color);\n color: var(--theme-core-control-background-color);\n}\n.dx-toggle-container.disabled .dx-toggle:hover .slider {\n border-color: transparent;\n}\n.dx-toggle-container.disabled .dx-toggle .slider {\n opacity: 0.7;\n color: var(--theme-core-control-background-color);\n background-color: var(--theme-core-control-punch-color);\n}";
|
|
420
420
|
styleInject(css_248z$6);
|
|
421
421
|
|
|
422
422
|
function DxToggle(props) {
|
|
@@ -473,7 +473,7 @@ function DxToggle(props) {
|
|
|
473
473
|
value !== true ? React.createElement(GenesysDevIcon, { icon: trueIcon }) : undefined))));
|
|
474
474
|
}
|
|
475
475
|
|
|
476
|
-
var css_248z$5 = "
|
|
476
|
+
var css_248z$5 = ".alert-container {\n margin: 40px 0;\n padding: 0;\n}\n.toc-link + .alert-container {\n margin-top: 0;\n}\n.alert-container .alert {\n display: flex;\n flex-flow: row nowrap;\n gap: 20px;\n background-color: var(--theme-alertblock-default-background-color);\n border: 1px solid var(--theme-alertblock-default-border-color);\n color: var(--theme-alertblock-default-text-color);\n border-radius: 4px;\n padding: 15px 20px;\n font-size: 14px;\n line-height: 14px;\n}\n.alert-container .alert .clickable {\n cursor: pointer;\n}\n.alert-container .alert .info-icon {\n display: inline-block;\n font-size: 16px;\n line-height: 0;\n margin-top: 2px;\n color: var(--theme-alertblock-default-icon-color);\n}\n.alert-container .alert .alert-content {\n flex-grow: 1;\n font-size: 14px;\n line-height: 20px;\n margin: 0;\n}\n.alert-container .alert .alert-content .alert-title {\n font-size: 14px;\n line-height: 20px;\n font-weight: bold;\n margin-bottom: 6px;\n}\n.alert-container .alert .alert-content .alert-title.collapsed {\n margin-bottom: 0;\n}\n.alert-container .alert p:last-of-type {\n margin-bottom: 0;\n}\n.alert-container .alert.alert-info {\n color: var(--theme-alertblock-info-text-color);\n background-color: var(--theme-alertblock-info-background-color);\n border-color: var(--theme-alertblock-info-border-color);\n}\n.alert-container .alert.alert-info .info-icon {\n color: var(--theme-alertblock-info-icon-color);\n}\n.alert-container .alert.alert-warning {\n color: var(--theme-alertblock-warning-text-color);\n background-color: var(--theme-alertblock-warning-background-color);\n border-color: var(--theme-alertblock-warning-border-color);\n}\n.alert-container .alert.alert-warning .info-icon {\n color: var(--theme-alertblock-warning-icon-color);\n}\n.alert-container .alert.alert-critical {\n color: var(--theme-alertblock-critical-text-color);\n background-color: var(--theme-alertblock-critical-background-color);\n border-color: var(--theme-alertblock-critical-border-color);\n}\n.alert-container .alert.alert-critical .info-icon {\n color: var(--theme-alertblock-critical-icon-color);\n}\n.alert-container .alert.alert-success {\n color: var(--theme-alertblock-success-text-color);\n background-color: var(--theme-alertblock-success-background-color);\n border-color: var(--theme-alertblock-success-border-color);\n}\n.alert-container .alert.alert-success .info-icon {\n color: var(--theme-alertblock-success-icon-color);\n}\n.alert-container .alert.alert-toast {\n color: var(--theme-alertblock-toast-text-color);\n background-color: var(--theme-alertblock-toast-background-color);\n border-color: var(--theme-alertblock-toast-border-color);\n}\n.alert-container .alert.alert-toast .info-icon {\n color: var(--theme-alertblock-toast-icon-color);\n}";
|
|
477
477
|
styleInject(css_248z$5);
|
|
478
478
|
|
|
479
479
|
function AlertBlock(props) {
|
|
@@ -516,7 +516,7 @@ function AlertBlock(props) {
|
|
|
516
516
|
React.createElement(GenesysDevIcon, { icon: isCollapsed ? GenesysDevIcons.AppChevronDown : GenesysDevIcons.AppChevronUp }))) : undefined)));
|
|
517
517
|
}
|
|
518
518
|
|
|
519
|
-
var css_248z$4 = "
|
|
519
|
+
var css_248z$4 = ".loading-placeholder {\n position: relative;\n width: 160px;\n height: 160px;\n margin: 60px auto;\n}\n.loading-placeholder .text {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: 100%;\n height: 100%;\n font-style: normal;\n font-weight: 300;\n font-size: 16px;\n line-height: 20px;\n color: var(--theme-loadingplaceholder-text-color);\n position: relative;\n top: 5px;\n left: 5px;\n opacity: 0.5;\n}\n.loading-placeholder div {\n position: absolute;\n border: 4px solid var(--theme-loadingplaceholder-wave-color);\n opacity: 1;\n border-radius: 50%;\n animation: loading-placeholder 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n.loading-placeholder div:nth-child(2) {\n animation-delay: -0.5s;\n}\n@keyframes loading-placeholder {\n 0% {\n top: 80px;\n left: 80px;\n width: 0;\n height: 0;\n opacity: 1;\n }\n 100% {\n top: 0px;\n left: 0px;\n width: 160px;\n height: 160px;\n opacity: 0;\n }\n}";
|
|
520
520
|
styleInject(css_248z$4);
|
|
521
521
|
|
|
522
522
|
// SimCity loading messages! https://gist.github.com/erikcox/7e96d031d00d7ecb1a2f
|
|
@@ -653,7 +653,7 @@ function Tooltip(props) {
|
|
|
653
653
|
React.createElement("div", { className: `tooltip-tip ${props.position || 'top'}${isShowing ? ' visible' : ''}` }, props.text)));
|
|
654
654
|
}
|
|
655
655
|
|
|
656
|
-
var css_248z$2 = "
|
|
656
|
+
var css_248z$2 = ".copy-button {\n cursor: pointer;\n border: 0;\n background: transparent;\n color: var(--theme-core-text-color);\n}";
|
|
657
657
|
styleInject(css_248z$2);
|
|
658
658
|
|
|
659
659
|
function CopyButton(props) {
|
|
@@ -679,7 +679,7 @@ function CopyButton(props) {
|
|
|
679
679
|
React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppCopy })))));
|
|
680
680
|
}
|
|
681
681
|
|
|
682
|
-
var css_248z$1 = "
|
|
682
|
+
var css_248z$1 = ".table-container {\n margin: 40px 0;\n}\n.table-container .filter-container {\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n width: 100%;\n box-sizing: border-box;\n}\n.table-container .filter-container .filter-toggle {\n color: var(--theme-core-link-color);\n font-size: 12px;\n line-height: 0;\n margin: 6px 0 0 10px;\n cursor: pointer;\n align-self: flex-start;\n}\n.table-container .filter-container .filter-toggle:hover {\n color: var(--theme-core-link-hover-color);\n}\n.table-container .table {\n width: 100%;\n margin: 0 30px 0 0;\n color: var(--theme-datatable-text-color);\n background-color: var(--theme-datatable-background-color);\n}\n.table-container .table td {\n border-width: 0 0 1px 0;\n border-style: solid;\n border-color: var(--theme-datatable-border-color);\n vertical-align: top;\n min-width: 80px;\n}\n.table-container .table td p {\n margin: 0;\n min-width: 10%;\n}\n.table-container .table thead tr {\n color: var(--theme-datatable-text-color);\n font-weight: bold;\n font-size: 14px;\n line-height: 24px;\n}\n.table-container .table thead tr td {\n padding: 0 10px;\n}\n.table-container .table thead tr td .header-container {\n margin: 0;\n padding: 0;\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n gap: 6px;\n width: 100%;\n}\n.table-container .table thead tr td .header-container.align-center {\n justify-content: center;\n}\n.table-container .table thead tr td .header-container.align-right {\n justify-content: flex-end;\n}\n.table-container .table thead tr td .sort-numeric {\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n align-items: center;\n}\n.table-container .table thead tr td .sort-numeric .dx-label {\n max-width: 70px;\n}\n.table-container .table thead tr td .sort-date {\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n align-items: center;\n}\n.table-container .table thead tr td .sort-date .date-filter {\n max-width: 155px;\n}\n.table-container .table thead tr.filter-spacer {\n height: 10px;\n}\n.table-container .table thead tr.filter-row {\n background-color: var(--theme-datatable-filter-background-color);\n}\n.table-container .table thead tr.filter-row td {\n border-width: 1px 0;\n vertical-align: middle;\n}\n.table-container .table thead tr.filter-row td:first-child {\n border-width: 1px 0 1px 1px;\n border-radius: 4px 0 0 4px;\n}\n.table-container .table thead tr.filter-row td:last-child {\n border-width: 1px 1px 1px 0;\n border-radius: 0 4px 4px 0;\n}\n.table-container .table tbody tr {\n font-size: 12px;\n line-height: 20px;\n}\n.table-container .table tbody tr td {\n padding: 16px 10px;\n}\n.table-container .table tbody tr td > div {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n gap: 10px;\n}\n.table-container .table tbody tr td > div.align-center {\n justify-content: center;\n}\n.table-container .table tbody tr td > div.align-right {\n justify-content: flex-end;\n}\n.table-container .table tbody tr td > div .copy-button {\n color: unset;\n}\n.table-container .table tbody tr td > div .icon {\n line-height: 0;\n}\n.table-container .table tr td:first-child {\n padding-left: 12px;\n}\n.table-container .table tr td:last-child {\n padding-right: 12px;\n}\n.table-container.paginated .table {\n margin-bottom: 10px;\n}\n.table-container.sortable .table thead tr td {\n cursor: pointer;\n}\n.table-container.sortable .table thead tr td .sort-icon,\n.table-container.sortable .table thead tr td .filter-active-icon {\n color: var(--theme-core-link-color);\n}\n.table-container.sortable .table thead tr td.unsorted .sort-icon {\n visibility: hidden;\n}\n.table-container.sortable .table thead tr td:hover .sort-icon {\n visibility: visible;\n}";
|
|
683
683
|
styleInject(css_248z$1);
|
|
684
684
|
|
|
685
685
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
@@ -979,7 +979,7 @@ function DataTable(props) {
|
|
|
979
979
|
}))))));
|
|
980
980
|
}
|
|
981
981
|
|
|
982
|
-
var css_248z = "
|
|
982
|
+
var css_248z = ".fence {\n border-radius: 0;\n margin: 40px 0;\n position: relative;\n}\n.fence.json-editor-fence {\n margin: 1rem 0 0 0;\n height: 80%;\n width: 100%;\n overflow: hidden;\n}\n.fence .fence-header {\n background-color: var(--theme-codefence-header-background-color);\n color: var(--theme-codefence-header-text-color);\n font-size: 14px;\n border-radius: 4px 4px 0px 0px;\n border-bottom: 1px solid var(--theme-codefence-border-color);\n margin: 0;\n padding: 5px 16px;\n min-height: 24px;\n display: flex;\n flex-direction: row-reverse;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n.fence .fence-header.clickable {\n cursor: pointer;\n}\n.fence .fence-header > * {\n flex-grow: 0;\n flex-shrink: 0;\n}\n.fence .fence-header .copy-button {\n font-size: 14px;\n padding: 0;\n color: var(--theme-codefence-header-text-color);\n}\n.fence .fence-header .fence-title {\n flex-grow: 1;\n}\n.fence .fence-header .icon {\n line-height: 0;\n}\n.fence .fence-body {\n padding: 0;\n overflow: auto;\n border-radius: 0 0 4px 4px;\n}\n.fence .fence-body.json-editor-body {\n height: 100%;\n line-height: 21px;\n}\n.fence .fence-body.collapsed {\n max-height: 15px;\n}\n.fence .fence-body.collapsed pre {\n padding-top: 3px;\n}\n.fence .fence-body pre {\n display: block;\n margin: 0 !important;\n padding: 0 !important;\n border-radius: 0 0 4px 4px;\n background: var(--theme-codefence-background-color) !important;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n}\n.fence .fence-body pre.json-editor-pre {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n}\n.fence .fence-body pre code {\n background-color: transparent;\n max-height: 600px;\n color: white;\n}\n.fence .fence-body pre code .linenumber {\n min-width: 26px !important;\n}";
|
|
983
983
|
styleInject(css_248z);
|
|
984
984
|
|
|
985
985
|
function CodeFence(props) {
|