@emuanalytics/flow-rdf-ui 4.0.18 → 4.1.0-preview.2

package/dist/components/card/card.styles.mjs

@@ -5,18 +5,22 @@ const styles = css`
   ${componentStyles}
 
   :host {
-    --border-color: var(--flow-ui-color-neutral-200);
-    --border-radius: var(--flow-ui-border-radius-medium);
-    --border-width: 1px;
+    --border-color: var(--flow-ui-card-border-color);
+    --border-radius: var(--flow-ui-card-border-radius);
+    --border-width: var(--flow-ui-card-border-width);
     --padding: var(--flow-ui-spacing-large);
 
+    --background-color: var(--flow-ui-card-background-color);
+    --color: var(--flow-ui-card-color);
+
     display: inline-block;
   }
 
   .card {
     display: flex;
     flex-direction: column;
-    background-color: var(--flow-ui-panel-background-color);
+    background-color: var(--background-color);
+    color: var(--color);
     box-shadow: var(--flow-ui-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);

package/dist/components/checkbox/checkbox.component.mjs

@@ -32,16 +32,16 @@ class FlowUiCheckbox extends FlowRdfFormControl {
       setValue: (control, checked) => control.checked = checked
     });
     this.hasFocus = false;
-    this.title = "";
+    this.label = "";
     this.name = "";
     this.size = "medium";
     this.disabled = false;
     this.checked = false;
     this.indeterminate = false;
     this.defaultChecked = false;
+    this.reverse = false;
     this.form = "";
     this.required = false;
-    this.fullWidth = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -49,7 +49,7 @@ class FlowUiCheckbox extends FlowRdfFormControl {
     this.indeterminate = boolean(this.indeterminate, true);
     this.disabled = boolean(this.disabled, true);
     this.required = boolean(this.required, true);
-    this.fullWidth = boolean(this.fullWidth, true);
+    this.reverse = boolean(this.reverse, true);
   }
   /** Gets the validity state object */
   get validity() {
@@ -135,19 +135,13 @@ class FlowUiCheckbox extends FlowRdfFormControl {
       "checkbox--small": this.size === "small",
       "checkbox--medium": this.size === "medium",
       "checkbox--large": this.size === "large",
-      "checkbox--primary": this.variant === "primary",
-      "checkbox--secondary": this.variant === "secondary",
-      "checkbox--success": this.variant === "success",
-      "checkbox--warning": this.variant === "warning",
-      "checkbox--danger": this.variant === "danger",
-      "checkbox--neutral": this.variant === "neutral",
-      "checkbox--full-width": this.fullWidth
+      "checkbox--reverse": this.reverse
     })}
       >
         <input
           class="checkbox__input"
           type="checkbox"
-          title=${this.title}
+          title=${this.label}
           name=${this.name}
           value=${ifDefined(this.value)}
           .indeterminate=${live(this.indeterminate)}
@@ -202,7 +196,7 @@ __decorateClass([
 ], FlowUiCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
   property()
-], FlowUiCheckbox.prototype, "title", 2);
+], FlowUiCheckbox.prototype, "label", 2);
 __decorateClass([
   property()
 ], FlowUiCheckbox.prototype, "name", 2);
@@ -224,18 +218,15 @@ __decorateClass([
 __decorateClass([
   defaultValue("checked")
 ], FlowUiCheckbox.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckbox.prototype, "reverse", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiCheckbox.prototype, "form", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiCheckbox.prototype, "required", 2);
-__decorateClass([
-  property()
-], FlowUiCheckbox.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "full-width" })
-], FlowUiCheckbox.prototype, "fullWidth", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowUiCheckbox.prototype, "handleDisabledChange", 1);

package/dist/components/checkbox/checkbox.styles.mjs

@@ -1,24 +1,26 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
 
 const styles = css`
   ${componentStyles}
+  ${formControlStyles}
 
   :host {
     display: inline-block;
 
-    --checkbox-color: var(--flow-ui-color-secondary-500);
-    --checkbox-check-color: var(--flow-ui-color-secondary-contrast);
-    --checkbox-hover-color: var(--flow-ui-color-secondary-400);
+    --checkbox-color: var(--flow-ui-checkbox-color, var(--flow-ui-color-primary-500));
+    --checkbox-check-color: var(--flow-ui-checkbox-check-color, var(--flow-ui-color-primary-contrast));
   }
 
   .checkbox {
     position: relative;
     display: inline-flex;
+    width: 100%;
     align-items: flex-start;
-    font-family: var(--flow-ui-input-font-family);
-    font-weight: var(--flow-ui-input-font-weight);
-    color: var(--flow-ui-input-label-color);
+    font-family: var(--flow-ui-control-font-family);
+    font-weight: var(--flow-ui-control-font-weight);
+    color: var(--flow-ui-control-label-color);
     vertical-align: middle;
     cursor: pointer;
   }
@@ -26,65 +28,17 @@ const styles = css`
   /* Sizes */
   .checkbox--small {
     --toggle-size: var(--flow-ui-toggle-size-small);
-    font-size: var(--flow-ui-input-font-size-small);
+    font-size: var(--flow-ui-control-font-size-small);
   }
 
   .checkbox--medium {
     --toggle-size: var(--flow-ui-toggle-size-medium);
-    font-size: var(--flow-ui-input-font-size-medium);
+    font-size: var(--flow-ui-control-font-size-medium);
   }
 
   .checkbox--large {
     --toggle-size: var(--flow-ui-toggle-size-large);
-    font-size: var(--flow-ui-input-font-size-large);
-  }
-
-  /* Color variants */
-  .checkbox--primary {
-    --checkbox-color: var(--flow-ui-color-primary-500);
-    --checkbox-hover-color: var(--flow-ui-color-primary-400);
-  }
-
-  .checkbox--secondary {
-    --checkbox-color: var(--flow-ui-color-secondary-500);
-    --checkbox-hover-color: var(--flow-ui-color-secondary-400);
-  }
-
-  .checkbox--success {
-    --checkbox-color: var(--flow-ui-color-success-500);
-    --checkbox-hover-color: var(--flow-ui-color-success-400);
-  }
-
-  .checkbox--warning {
-    --checkbox-color: var(--flow-ui-color-warning-500);
-    --checkbox-hover-color: var(--flow-ui-color-warning-400);
-  }
-
-  .checkbox--danger {
-    --checkbox-color: var(--flow-ui-color-danger-500);
-    --checkbox-hover-color: var(--flow-ui-color-danger-400);
-  }
-
-  .checkbox--neutral {
-    --checkbox-color: var(--flow-ui-color-neutral-500);
-    --checkbox-hover-color: var(--flow-ui-color-neutral-400);
-  }
-
-  /* Alternative 'full-width' style */
-  :host([full-width]) {
-    display: block;
-    margin-top: var(--flow-ui-spacing-small);
-  }
-
-  .checkbox--full-width {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-  }
-
-  .checkbox--full-width .checkbox__label {
-    flex: 1;
-    margin: 0;
+    font-size: var(--flow-ui-control-font-size-large);
   }
 
   .checkbox__control {
@@ -95,9 +49,9 @@ const styles = css`
     justify-content: center;
     width: var(--toggle-size);
     height: var(--toggle-size);
-    border: solid var(--flow-ui-input-border-width) var(--flow-ui-input-border-color);
+    border: solid var(--flow-ui-control-border-width) var(--flow-ui-control-border-color);
     border-radius: 2px;
-    background-color: var(--flow-ui-input-background-color);
+    background-color: var(--flow-ui-control-background-color);
     color: var(--checkbox-check-color);
     transition:
       var(--flow-ui-transition-fast) border-color,
@@ -123,8 +77,8 @@ const styles = css`
 
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--flow-ui-input-border-color-hover);
-    background-color: var(--flow-ui-input-background-color-hover);
+    border-color: var(--flow-ui-control-border-color-hover);
+    background-color: var(--flow-ui-control-background-color-hover);
   }
 
   /* Focus */
@@ -140,13 +94,6 @@ const styles = css`
     background-color: var(--checkbox-color);
   }
 
-  /* Checked/indeterminate + hover */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--checkbox-hover-color);
-    background-color: var(--checkbox-hover-color);
-  }
-
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
@@ -162,15 +109,26 @@ const styles = css`
 
   .checkbox__label {
     display: inline-block;
-    color: var(--flow-ui-input-label-color);
+    flex: 1;
+    color: var(--flow-ui-control-label-color);
     line-height: var(--toggle-size);
     margin-inline-start: 0.5em;
     user-select: none;
   }
 
+  /* Reverse layout */
+  .checkbox--reverse {
+    flex-direction: row-reverse;
+  }
+
+  .checkbox--reverse .checkbox__label {
+    margin-inline-start: 0;
+    margin-inline-end: 0.5em;
+  }
+
   :host([required]) .checkbox__label::after {
-    content: var(--flow-ui-input-required-content);
-    margin-inline-start: var(--flow-ui-input-required-content-offset);
+    content: var(--flow-ui-control-required-content);
+    margin-inline-start: var(--flow-ui-control-required-content-offset);
   }
 `;
 

package/dist/components/checkbox-group/checkbox-group.component.mjs

@@ -0,0 +1,290 @@
+import { html, nothing } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController, customErrorValidityState, valueMissingValidityState, validValidityState } from '../../internal/form.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './checkbox-group.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiCheckboxGroup extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.customValidityMessage = "";
+    this.errorMessage = "";
+    this.defaultValue = [];
+    this.label = "";
+    this.helpText = "";
+    this.name = "option";
+    this.value = [];
+    this.size = "medium";
+    this.form = "";
+    this.required = false;
+    this.reverse = false;
+    this.divider = false;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return customErrorValidityState;
+    } else if (isRequiredAndEmpty) {
+      return valueMissingValidityState;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return this.customValidityMessage;
+    } else if (isRequiredAndEmpty) {
+      return this.validationInput.validationMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.required = boolean(this.required, true);
+    this.reverse = boolean(this.reverse, true);
+    this.divider = boolean(this.divider, true);
+    this.defaultValue = this.value;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  getAllCheckboxes() {
+    return [...this.querySelectorAll("flow-ui-checkbox")];
+  }
+  handleCheckboxClick(event) {
+    const target = event.target.closest("flow-ui-checkbox");
+    const checkboxes = this.getAllCheckboxes();
+    const oldValue = this.value;
+    if (target.disabled) {
+      return;
+    }
+    this.value = checkboxes.filter((checkbox) => checkbox.checked).map((checkbox) => checkbox.value);
+    const arrayEqual = (arr1, arr2) => {
+      if (arr1.length !== arr2.length)
+        return false;
+      return arr2.every((arr2Item) => arr1.includes(arr2Item));
+    };
+    if (!arrayEqual(this.value, oldValue)) {
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+  }
+  handleLabelClick() {
+    const checkboxes = this.getAllCheckboxes();
+    checkboxes[0]?.focus();
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  syncCheckboxes() {
+    if (customElements.get("flow-ui-checkbox")) {
+      const checkboxes = this.getAllCheckboxes();
+      checkboxes.forEach((checkbox) => {
+        checkbox.size = this.size;
+        checkbox.reverse = this.reverse;
+      });
+      this.updateCheckedState();
+    } else {
+      customElements.whenDefined("flow-ui-checkbox").then(() => this.syncCheckboxes());
+    }
+  }
+  updateCheckedState() {
+    const checkboxes = this.getAllCheckboxes();
+    checkboxes.forEach((checkbox) => checkbox.checked = this.value.includes(checkbox.value));
+    this.formControlController.setValidity(this.validity.valid);
+  }
+  handleStyleChange() {
+    this.syncCheckboxes();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedState();
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (isRequiredAndEmpty || hasCustomValidityMessage) {
+      this.formControlController.emitInvalidEvent();
+      return false;
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    const isValid = this.validity.valid;
+    this.errorMessage = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(this.validationTimeout);
+    if (!isValid) {
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
+    }
+    return isValid;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = "") {
+    this.customValidityMessage = message;
+    this.errorMessage = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  /** Stop propagation of flow-ui-input and flow-ui-change from child checkboxes */
+  handleChildEvents(event) {
+    event.stopPropagation();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const defaultSlot = html`
+      <slot @click=${this.handleCheckboxClick} @slotchange=${this.syncCheckboxes} role="presentation"></slot>
+    `;
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--checkbox-group": true,
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-divider": this.divider
+    })}
+        role="radiogroup"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <slot
+          name="help-text"
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          ${this.helpText}
+        </slot>
+
+        <div
+          part="form-control-input"
+          class="form-control-input"
+          @flow-ui-input=${this.handleChildEvents}
+          @flow-ui-change=${this.handleChildEvents}
+        >
+          <div class="visually-hidden">
+            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
+            <label class="checkbox-group__validation">
+              <input
+                type="text"
+                class="checkbox-group__validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+                @invalid=${this.handleInvalid}
+              />
+            </label>
+          </div>
+          ${defaultSlot}
+        </div>
+
+        ${this.divider ? this.renderDivider() : nothing}
+      </fieldset>
+    `;
+  }
+}
+FlowUiCheckboxGroup.styles = styles;
+__decorateClass([
+  query("slot:not([name])")
+], FlowUiCheckboxGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".checkbox-group__validation-input")
+], FlowUiCheckboxGroup.prototype, "validationInput", 2);
+__decorateClass([
+  state()
+], FlowUiCheckboxGroup.prototype, "errorMessage", 2);
+__decorateClass([
+  state()
+], FlowUiCheckboxGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], FlowUiCheckboxGroup.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], FlowUiCheckboxGroup.prototype, "helpText", 2);
+__decorateClass([
+  property()
+], FlowUiCheckboxGroup.prototype, "name", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => value.split(" "),
+      toAttribute: (value) => value.join(" ")
+    }
+  })
+], FlowUiCheckboxGroup.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiCheckboxGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiCheckboxGroup.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckboxGroup.prototype, "reverse", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckboxGroup.prototype, "divider", 2);
+__decorateClass([
+  watch(["size", "reverse"], { waitUntilFirstUpdate: true })
+], FlowUiCheckboxGroup.prototype, "handleStyleChange", 1);
+__decorateClass([
+  watch("value")
+], FlowUiCheckboxGroup.prototype, "handleValueChange", 1);
+
+export { FlowUiCheckboxGroup as default };

package/dist/components/checkbox-group/checkbox-group.mjs

@@ -0,0 +1,5 @@
+import FlowUiCheckboxGroup from './checkbox-group.component.mjs';
+
+
+
+export { FlowUiCheckboxGroup as default };

package/dist/components/checkbox-group/checkbox-group.styles.mjs

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .form-control {
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-row-gap: var(--flow-ui-spacing-x-small);
+    align-items: center;
+    font-family: var(--flow-ui-control-font-family);
+    font-size: inherit;
+    font-weight: var(--flow-ui-control-font-weight);
+    line-height: var(--flow-ui-line-height-dense);
+
+    margin-bottom: calc(var(--control-spacing) * 0.5);
+  }
+
+  .form-control.form-control--has-divider {
+    margin-bottom: 0;
+  }
+
+  .form-control__label {
+    padding: 0;
+  }
+
+  /* Remove margins from label and help-text. Spacing is determined by row grid gap */
+  .form-control.form-control--has-label .form-control__label {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .form-control-input {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--control-spacing) * 0.8);
+  }
+
+  .form-control.form-control--has-help-text .form-control__help-text {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .checkbox-group--required .checkbox-group__label::after {
+    content: var(--flow-ui-control-required-content);
+    margin-inline-start: var(--flow-ui-control-required-content-offset);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+
+export { styles as default };

package/dist/components/color-mapper/color-mapper.component.mjs

@@ -132,6 +132,7 @@ class FlowUiColorMapper extends FlowRdfElement {
         value=${ifDefined(this.value.field)}
         size=${this.size}
         placeholder="Data Attribute"
+        inline
       >
         ${Object.keys(this.options?.fields || {}).map(
       (field) => html`
@@ -183,7 +184,7 @@ class FlowUiColorMapper extends FlowRdfElement {
   }
   infoDialogTemplate() {
     return html`
-      <flow-ui-dialog label="Color Mapping" class="dialog-info">
+      <flow-ui-dialog heading="Color Mapping" class="dialog-info">
         <slot name="info"></slot>
         <flow-ui-button autofocus slot="footer" variant="primary" @click=${() => this.infoDialog.hide()}>
           OK
@@ -206,7 +207,12 @@ class FlowUiColorMapper extends FlowRdfElement {
         @flow-ui-change=${this.handleChange}
       >
         <div part="mode-selector">
-          <flow-ui-radio-group id="mode-radio-group" size=${this.size} value=${this.value.mode}>
+          <flow-ui-radio-group
+            id="mode-radio-group"
+            class="color-mode-radio-group"
+            size=${this.size}
+            value=${this.value.mode}
+          >
             <flow-ui-radio value="fixed" class="color-mode-radio">${this.fixedColorTemplate()}</flow-ui-radio>
             <flow-ui-radio value="data-driven" class="color-mode-radio">
               ${this.dataDrivenColorTemplate()}