@pega/dx-component-builder-sdk 0.25.5 → 0.25.6

package/tests/assets/sdk-r/components/createAll/override-sdk/field/ObjectReference/ObjectReference.tsx

@@ -0,0 +1,235 @@
+import { useMemo } from 'react';
+
+import Grid2 from '@mui/material/Grid2';
+
+import { SELECTION_MODE, generateColumns, getDataRelationshipContextFromKey } from './utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ObjectReferenceProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on ObjectReference here
+  getPConnect: any;
+  displayMode;
+  allowAndPersistChangesInReviewMode: any;
+  targetObjectType: any;
+  mode: string;
+  parameters: object;
+  hideLabel: boolean;
+  inline: boolean;
+  showPromotedFilters: boolean;
+  additionalFields: any;
+}
+
+export default function ObjectReference(props: ObjectReferenceProps) {
+  const {
+    getPConnect,
+    displayMode,
+    allowAndPersistChangesInReviewMode: editableInReview = false,
+    targetObjectType,
+    mode = '',
+    parameters,
+    hideLabel = false,
+    inline = false,
+    showPromotedFilters = false,
+    additionalFields
+  } = props;
+
+  const SingleReferenceReadonly = getComponentFromMap('SingleReferenceReadOnly');
+
+  // Configs
+  const pConn = getPConnect();
+  const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
+  const rawViewMetadata = pConn.getRawMetadata();
+  const refFieldMetadata = pConn.getFieldMetadata(rawViewMetadata?.config?.value?.split('.', 2)[1]);
+
+  // Destructured properties
+  const propsToUse = { ...pConn.getInheritedProps(), ...props };
+
+  // Computed variables
+  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+  const canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes(rawViewMetadata.config.componentType);
+
+  // Editable first child on change handler
+  const onRecordChange = event => {
+    const caseKey = pConn.getCaseInfo().getKey();
+    const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
+    refreshOptions.propertyName = rawViewMetadata.config?.value;
+
+    if (!canBeChangedInReviewMode || !pConn.getValue('__currentPageTabViewName')) {
+      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
+      const viewName = rawViewMetadata.name;
+      if (viewName && viewName.length > 0) {
+        getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+      }
+    }
+
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value if event.id is unset
+    // When value is empty propValue will be undefined here and no value will be set for the reference
+    const propValue = event?.id || event?.target?.value;
+    const propName =
+      rawViewMetadata.type === 'SimpleTableSelect' && mode === SELECTION_MODE.MULTI
+        ? PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config.selectionList)
+        : PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config?.value);
+
+    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+      PCore.getCaseUtils()
+        .getCaseEditLock(caseKey, '')
+        .then(caseResponse => {
+          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+          let curr = {};
+          const commitData = curr;
+
+          pageTokens.forEach(el => {
+            if (el !== '') {
+              curr[el] = {};
+              curr = curr[el];
+            }
+          });
+
+          // expecting format like {Customer: {pyID:"C-100"}}
+          const propArr = propName.split('.');
+          propArr.forEach((element, idx) => {
+            if (idx + 1 === propArr.length) {
+              curr[element] = propValue;
+            } else {
+              curr[element] = {};
+              curr = curr[element];
+            }
+          });
+
+          PCore.getCaseUtils()
+            .updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, pConn.getContextName())
+            .then(response => {
+              PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), (response.data as any).data.caseInfo.lastUpdateTime);
+              PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
+            });
+        });
+    }
+  };
+
+  // Prepare first child
+  const recreatedFirstChild = useMemo(() => {
+    const type = rawViewMetadata.config.componentType;
+
+    /* Read-only variants */
+    if (type === 'SemanticLink' && !canBeChangedInReviewMode) {
+      const config = {
+        ...rawViewMetadata.config,
+        primaryField: rawViewMetadata.config.displayField
+      };
+      config.caseClass = rawViewMetadata.config.targetObjectClass;
+      config.text = config.primaryField;
+      config.caseID = config.value;
+      config.contextPage = `@P .${
+        rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null
+      }`;
+      config.resourceParams = {
+        workID: config.value
+      };
+      config.resourcePayload = {
+        caseClassName: config.caseClass
+      };
+
+      return getPConnect().createComponent({
+        type: 'SemanticLink',
+        config: {
+          ...config,
+          displayMode,
+          referenceType,
+          hideLabel,
+          dataRelationshipContext: rawViewMetadata.config?.displayField
+            ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
+            : null
+        }
+      });
+    }
+    if (isDisplayModeEnabled && !canBeChangedInReviewMode) {
+      return (
+        <SingleReferenceReadonly
+          config={{
+            ...rawViewMetadata.config,
+            primaryField: rawViewMetadata.config.displayField
+          }}
+          getPConnect={getPConnect}
+          label={propsToUse.label}
+          type={type}
+          displayAs='readonly'
+          displayMode={displayMode}
+          activeViewRuleClass={rawViewMetadata.config.targetObjectClass} // for older views which may not have context class set, fall back to previous behavior
+          referenceType={referenceType}
+          hideLabel={hideLabel}
+          dataRelationshipContext={
+            rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null
+          }
+          additionalFields={additionalFields}
+        />
+      );
+    }
+
+    // 1) Set datasource
+    generateColumns(rawViewMetadata.config, pConn, referenceType);
+    rawViewMetadata.config.deferDatasource = true;
+    rawViewMetadata.config.listType = 'datapage';
+    if (['Dropdown', 'AutoComplete'].includes(type) && !rawViewMetadata.config.placeholder) {
+      rawViewMetadata.config.placeholder = '@L Select...';
+    }
+
+    // 2) Pass through configs
+    rawViewMetadata.config.showPromotedFilters = showPromotedFilters;
+
+    if (!canBeChangedInReviewMode) {
+      rawViewMetadata.config.displayMode = displayMode;
+    }
+
+    // 3) Define field meta
+    let fieldMetaData: any = null;
+
+    fieldMetaData = {
+      datasourceMetadata: {
+        datasource: {
+          parameters: {}
+        }
+      }
+    };
+    if (rawViewMetadata.config?.parameters) {
+      fieldMetaData.datasourceMetadata.datasource.parameters = parameters;
+    }
+    fieldMetaData.datasourceMetadata.datasource.propertyForDisplayText = rawViewMetadata?.config?.datasource?.fields?.text.startsWith('@P')
+      ? rawViewMetadata?.config?.datasource?.fields?.text?.substring(3)
+      : rawViewMetadata?.config?.datasource?.fields?.text;
+    fieldMetaData.datasourceMetadata.datasource.propertyForValue = rawViewMetadata?.config?.datasource?.fields?.value.startsWith('@P')
+      ? rawViewMetadata?.config?.datasource?.fields?.value?.substring(3)
+      : rawViewMetadata?.config?.datasource?.fields?.value;
+    fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;
+
+    return getPConnect().createComponent({
+      type,
+      config: {
+        ...rawViewMetadata.config,
+        descriptors: mode === SELECTION_MODE.SINGLE ? refFieldMetadata?.descriptors : null,
+        datasourceMetadata: fieldMetaData?.datasourceMetadata,
+        required: propsToUse.required,
+        visibility: propsToUse.visibility,
+        disabled: propsToUse.disabled,
+        label: propsToUse.label,
+        parameters: rawViewMetadata.config.parameters,
+        readOnly: false,
+        localeReference: rawViewMetadata.config.localeReference,
+        ...(mode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+        contextClass: rawViewMetadata.config.targetObjectClass,
+        primaryField: rawViewMetadata.config?.displayField,
+        dataRelationshipContext: rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null,
+        hideLabel,
+        onRecordChange,
+        inline
+      }
+    });
+  }, [rawViewMetadata.config?.datasource?.source, parameters, propsToUse.required, propsToUse.disabled, getPConnect().getPageReference()]);
+
+  // Prepare children to render
+  return (
+    <Grid2 container>
+      <Grid2>{recreatedFirstChild}</Grid2>
+    </Grid2>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/ObjectReference/index.tsx

@@ -0,0 +1 @@
+export { default } from './ObjectReference';

package/tests/assets/sdk-r/components/createAll/override-sdk/field/ObjectReference/utils.ts

@@ -0,0 +1,111 @@
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+export const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+const getLeafNameFromPropertyName = property => property?.substr(property.lastIndexOf('.'));
+
+const isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];
+
+export const AT_FILTEREDLIST = '@FILTERED_LIST';
+export const AT_PROPERTY = '@P';
+export const SQUARE_BRACKET_START = '[';
+export const SQUARE_BRACKET_END = ']';
+
+export const SIMPLE_TABLE_MANUAL_READONLY = 'SimpleTableManualReadOnly';
+export const PAGE = '!P!';
+export const PAGELIST = '!PL!';
+export const PERIOD = '.';
+const AT = '@';
+
+export function updatePageListPropertyValue(value) {
+  value = value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);
+  return value;
+}
+
+export function getPropertyValue(value) {
+  if (value.startsWith(AT)) {
+    value = value.substring(value.indexOf(' ') + 1);
+    if (value.startsWith(PERIOD)) value = value.substring(1);
+  }
+  if (value.includes(SQUARE_BRACKET_START)) {
+    value = updatePageListPropertyValue(value);
+  }
+  return value;
+}
+
+const getCompositeKeys = (c11nEnv, property) => {
+  const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(property) || {};
+  return Object.values(parameters).reduce((compositeKeys: any, param) => {
+    if (isSelfReferencedProperty(property, param)) {
+      let propName = getPropertyValue(param);
+      propName = propName.substring(propName.indexOf('.'));
+      compositeKeys.push(propName);
+    }
+    return compositeKeys;
+  }, []);
+};
+
+export const generateColumns = (config, pConn, referenceType) => {
+  const displayField = getLeafNameFromPropertyName(config.displayField);
+  const referenceProp = config.value.split('.', 2)[1];
+  const compositeKeys: any = getCompositeKeys(pConn, referenceProp);
+  let value = getLeafNameFromPropertyName(config.value);
+
+  const columns: any = [];
+  if (displayField) {
+    columns.push({
+      value: displayField,
+      display: 'true',
+      useForSearch: true,
+      primary: 'true'
+    });
+  }
+  if (value && compositeKeys.indexOf(value) !== -1) {
+    columns.push({
+      value,
+      setProperty: 'Associated property',
+      key: 'true'
+    });
+  } else {
+    const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;
+    config.value = `@P .${referenceProp}${actualValue}`;
+    value = actualValue;
+    columns.push({
+      value: actualValue,
+      setProperty: 'Associated property',
+      key: 'true'
+    });
+  }
+
+  config.datasource = {
+    fields: {
+      key: getLeafNameFromPropertyName(config.value),
+      text: getLeafNameFromPropertyName(config.displayField),
+      value: getLeafNameFromPropertyName(config.value)
+    }
+  };
+
+  if (referenceType === 'Case') {
+    columns.push({
+      secondary: 'true',
+      display: 'true',
+      value: Utils.getMappedKey('pyID'),
+      useForSearch: true
+    });
+  }
+
+  compositeKeys.forEach(key => {
+    if (value !== key)
+      columns.push({
+        value: key,
+        display: 'false',
+        secondary: 'true',
+        useForSearch: false,
+        setProperty: `.${referenceProp}${key}`
+      });
+  });
+
+  config.columns = columns;
+};
+
+export const getDataRelationshipContextFromKey = key => key.split('.', 2)[1];

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Percentage/Percentage.tsx

@@ -1,8 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
-import { useState } from 'react';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -50,7 +50,11 @@ export default function Percentage(props: PercentageProps) {
   const helperTextToDisplay = validatemessage || helperText;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
@@ -58,7 +62,7 @@ export default function Percentage(props: PercentageProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
@@ -66,11 +70,7 @@ export default function Percentage(props: PercentageProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -105,7 +105,7 @@ export default function Percentage(props: PercentageProps) {
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={decimalPrecision}
       suffix='%'
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx

@@ -1,8 +1,8 @@
-import MuiPhoneNumber from 'material-ui-phone-number';
 import { useEffect, useState } from 'react';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface PhoneProps extends PConnFieldProps {
@@ -45,7 +45,7 @@ export default function Phone(props: PhoneProps) {
     'data-test-id': testId
   };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -57,20 +57,23 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <MuiTelInput
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
+          defaultCountry='US'
           required={required}
           disabled={disabled}
           onChange={onChange}
           error={status === 'error'}
           label={label}
           value={value}
-          InputProps={{
-            readOnly: true,
-            inputProps: { ...testProp }
+          slotProps={{
+            input: {
+              readOnly: true,
+              ...testProp
+            }
           }}
           disableDropdown={disableDropdown}
         />
@@ -90,13 +93,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}
@@ -104,7 +107,7 @@ export default function Phone(props: PhoneProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...testProp }}
+      slotProps={{ input: { ...testProp } }}
     />
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Phone",
+    "name": "Phone",
+    "label": "Phone",
+    "description": "Phone",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/RadioButtons/RadioButtons.tsx

@@ -1,21 +1,29 @@
 import { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
 interface RadioButtonsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on RadioButtons here
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
 }
 
 export default function RadioButtons(props: RadioButtonsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -29,7 +37,14 @@ export default function RadioButtons(props: RadioButtonsProps) {
     inline,
     displayMode,
     hideLabel,
-    fieldMetadata
+    fieldMetadata,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    datasource,
+    imagePosition,
+    imageSize,
+    showImageDescription
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -61,11 +76,10 @@ export default function RadioButtons(props: RadioButtonsProps) {
     setSelectedButton(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -75,7 +89,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         variant='stacked'
       />
@@ -90,8 +103,38 @@ export default function RadioButtons(props: RadioButtonsProps) {
     thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
+  if (variant === 'card') {
+    const stateProps = thePConn.getStateProps();
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+          <SelectableCard
+            hideFieldLabels={hideFieldLabels}
+            additionalProps={additionalProps}
+            getPConnect={getPConnect}
+            dataSource={datasource}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: stateProps.image?.split('.').pop(),
+              imageDescription: stateProps.imageDescription?.split('.').pop()
+            }}
+            onChange={handleChange}
+            recordKey={stateProps.value?.split('.').pop()}
+            cardLabel={stateProps.primaryField?.split('.').pop()}
+            radioBtnValue={value}
+            type='radio'
+            setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <FormControl error={status === 'error'} required={required}>
+    <FormControl variant='standard' error={status === 'error'} required={required}>
       <FormLabel component='legend'>{label}</FormLabel>
       <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
         {theOptions.map(theOption => {
@@ -102,7 +145,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
               label={thePConn.getLocalizedValue(
                 theOption.value,
                 localePath,
-                // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
                 thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
               )}
               control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}

package/tests/assets/sdk-r/components/createAll/override-sdk/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}