@emuanalytics/flow-rdf-ui 4.0.3 → 4.0.4

package/dist/index.cjs

@@ -1782,6 +1782,32 @@ function waitForEvent(el, eventName) {
   });
 }
 
+function watch(propertyName, options) {
+  const resolvedOptions = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, decoratedFnName) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              this[decoratedFnName](oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
 var __defProp$Z = Object.defineProperty;
 var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
 var __decorateClass$Z = (decorators, target, key, kind) => {
@@ -1820,6 +1846,23 @@ __decorateClass$Z([
 __decorateClass$Z([
   decorators_js.property()
 ], FlowRdfElement.prototype, "lang", 2);
+const _FlowRdfFormControl = class _FlowRdfFormControl extends FlowRdfElement {
+  handleClassChange() {
+    this.classList.add(_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
+};
+_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS = "flow-ui-form-control";
+__decorateClass$Z([
+  decorators_js.property({ reflect: true })
+], _FlowRdfFormControl.prototype, "class", 2);
+__decorateClass$Z([
+  watch("class")
+], _FlowRdfFormControl.prototype, "handleClassChange", 1);
+let FlowRdfFormControl = _FlowRdfFormControl;
 
 class HasSlotController {
   constructor(host, ...slotNames) {
@@ -1879,32 +1922,6 @@ function getTextContent(slot) {
   return text;
 }
 
-function watch(propertyName, options) {
-  const resolvedOptions = {
-    waitUntilFirstUpdate: false,
-    ...options
-  };
-  return (proto, decoratedFnName) => {
-    const { update } = proto;
-    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
-    proto.update = function(changedProps) {
-      watchedProperties.forEach((property) => {
-        const key = property;
-        if (changedProps.has(key)) {
-          const oldValue = changedProps.get(key);
-          const newValue = this[key];
-          if (oldValue !== newValue) {
-            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-              this[decoratedFnName](oldValue, newValue);
-            }
-          }
-        }
-      });
-      update.call(this, changedProps);
-    };
-  };
-}
-
 const defaultAnimationRegistry = /* @__PURE__ */ new Map();
 const customAnimationRegistry = /* @__PURE__ */ new WeakMap();
 function ensureAnimation(animation) {
@@ -5511,7 +5528,7 @@ var __decorateClass$N = (decorators, target, key, kind) => {
     __defProp$N(target, key, result);
   return result;
 };
-let FlowUiButton = class extends FlowRdfElement {
+let FlowUiButton = class extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -7346,6 +7363,7 @@ const styles$K = lit.css`
     cursor: pointer;
   }
 
+  /* Sizes */
   .checkbox--small {
     --toggle-size: var(--flow-ui-toggle-size-small);
     font-size: var(--flow-ui-input-font-size-small);
@@ -7361,6 +7379,7 @@ const styles$K = lit.css`
     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);
@@ -7391,6 +7410,23 @@ const styles$K = lit.css`
     --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;
+  }
+
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
@@ -7489,7 +7525,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
     __defProp$I(target, key, result);
   return result;
 };
-let FlowUiCheckbox = class extends FlowRdfElement {
+let FlowUiCheckbox = class extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "[default]");
@@ -7508,6 +7544,7 @@ let FlowUiCheckbox = class extends FlowRdfElement {
     this.defaultChecked = false;
     this.form = "";
     this.required = false;
+    this.fullWidth = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -7515,6 +7552,7 @@ let FlowUiCheckbox = class extends FlowRdfElement {
     this.indeterminate = boolean(this.indeterminate, true);
     this.disabled = boolean(this.disabled, true);
     this.required = boolean(this.required, true);
+    this.fullWidth = boolean(this.fullWidth, true);
   }
   /** Gets the validity state object */
   get validity() {
@@ -7605,7 +7643,8 @@ let FlowUiCheckbox = class extends FlowRdfElement {
       "checkbox--success": this.variant === "success",
       "checkbox--warning": this.variant === "warning",
       "checkbox--danger": this.variant === "danger",
-      "checkbox--neutral": this.variant === "neutral"
+      "checkbox--neutral": this.variant === "neutral",
+      "checkbox--full-width": this.fullWidth
     })}
       >
         <input
@@ -7697,6 +7736,9 @@ __decorateClass$I([
 __decorateClass$I([
   decorators_js.property()
 ], FlowUiCheckbox.prototype, "variant", 2);
+__decorateClass$I([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiCheckbox.prototype, "fullWidth", 2);
 __decorateClass$I([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowUiCheckbox.prototype, "handleDisabledChange", 1);
@@ -7860,8 +7902,12 @@ class FlowUiColorMapper extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.defaultColorStop = boolean(this.defaultColorStop, true);
   }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
   handleFixedPickerClick(event) {
     event.stopPropagation();
   }
@@ -8043,6 +8089,9 @@ __decorateClass$H([
 __decorateClass$H([
   decorators_js.query(".dialog-info")
 ], FlowUiColorMapper.prototype, "infoDialog", 2);
+__decorateClass$H([
+  decorators_js.property({ reflect: true })
+], FlowUiColorMapper.prototype, "class", 2);
 __decorateClass$H([
   decorators_js.property({ type: Object })
 ], FlowUiColorMapper.prototype, "options", 2);
@@ -8058,6 +8107,9 @@ __decorateClass$H([
 __decorateClass$H([
   decorators_js.property()
 ], FlowUiColorMapper.prototype, "swatches", 2);
+__decorateClass$H([
+  watch("class")
+], FlowUiColorMapper.prototype, "handleClassChange", 1);
 __decorateClass$H([
   throttle(100)
 ], FlowUiColorMapper.prototype, "emitChange", 1);
@@ -8939,7 +8991,7 @@ const d3Format = d3Format$1.formatLocale({
   currency: ["\xA3", ""]
 }).format;
 const DEFAULT_FORMATTER$1 = (val) => isNil(val) ? "--" : val.toString();
-class FlowUiInput extends FlowRdfElement {
+class FlowUiInput extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -9822,7 +9874,7 @@ var __decorateClass$E = (decorators, target, key, kind) => {
   return result;
 };
 const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
-class FlowUiColorPicker extends FlowRdfElement {
+class FlowUiColorPicker extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this);
@@ -10822,7 +10874,7 @@ var __decorateClass$D = (decorators, target, key, kind) => {
     __defProp$D(target, key, result);
   return result;
 };
-class FlowUiColorStop extends FlowRdfElement {
+class FlowUiColorStop extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     // private readonly localize = new LocalizeController(this);
@@ -11569,7 +11621,7 @@ const popupOptions = {
   medium: { distance: -3, skidding: -9 },
   large: { distance: -5, skidding: -15 }
 };
-class FlowUiDateTimePicker extends FlowRdfElement {
+class FlowUiDateTimePicker extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -15622,7 +15674,7 @@ const styles$n = lit.css`
   /* Footer */
   .query-builder__footer {
     text-align: right;
-    padding-block: var(--footer-spacing);
+    padding-top: var(--footer-spacing);
   }
 
   .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {
@@ -15649,7 +15701,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this._value = { condition: "and", rules: [] };
-    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.hasSlotController = new HasSlotController(this, "help-text", "label", "footer");
     this.value = { condition: "and", rules: [] };
     this.config = { fields: {} };
     this.size = "medium";
@@ -15676,8 +15728,12 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.disabled = boolean(this.disabled, true);
   }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
   handleValueChange() {
     this._value = this.subQueryBuilder ? this.value : cloneDeep__default(this.value);
     if (isNil(this._value)) {
@@ -16007,9 +16063,11 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
             ${this.helpText}
           </slot>
 
-          <footer part="footer" class="query-builder__footer">
-            <slot name="footer"></slot>
-          </footer>
+          ${this.hasSlotController.test("footer") ? lit.html`
+                <footer part="footer" class="query-builder__footer">
+                  <slot name="footer"></slot>
+                </footer>
+              ` : lit.nothing}
         </div>
       </div>
     `;
@@ -16020,6 +16078,9 @@ _FlowUiQueryBuilder.fieldDefinitions = /* @__PURE__ */ new Map();
 __decorateClass$m([
   decorators_js.state()
 ], _FlowUiQueryBuilder.prototype, "_value", 2);
+__decorateClass$m([
+  decorators_js.property({ reflect: true })
+], _FlowUiQueryBuilder.prototype, "class", 2);
 __decorateClass$m([
   decorators_js.property({ attribute: false })
 ], _FlowUiQueryBuilder.prototype, "value", 2);
@@ -16044,6 +16105,9 @@ __decorateClass$m([
 __decorateClass$m([
   decorators_js.property({ type: Boolean, attribute: "sub-query-builder" })
 ], _FlowUiQueryBuilder.prototype, "subQueryBuilder", 2);
+__decorateClass$m([
+  watch("class")
+], _FlowUiQueryBuilder.prototype, "handleClassChange", 1);
 __decorateClass$m([
   watch("value")
 ], _FlowUiQueryBuilder.prototype, "handleValueChange", 1);
@@ -16081,6 +16145,14 @@ const styles$m = lit.css`
     display: block;
   }
 
+  .form-control-input {
+    line-height: 1;
+  }
+
+  ::slotted(flow-ui-radio:not(:first-child)) {
+    margin-top: var(--flow-ui-form-spacing, var(--flow-ui-form-spacing-dense));
+  }
+
   .form-control {
     border: none;
     padding: 0;
@@ -16120,7 +16192,7 @@ var __decorateClass$l = (decorators, target, key, kind) => {
     __defProp$l(target, key, result);
   return result;
 };
-class FlowUiRadioGroup extends FlowRdfElement {
+class FlowUiRadioGroup extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this);
@@ -16136,7 +16208,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
     this.variant = "secondary";
     this.form = "";
     this.required = false;
-    this.vertical = false;
+    this.fullWidth = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -16163,7 +16235,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
   connectedCallback() {
     super.connectedCallback();
     this.required = boolean(this.required, true);
-    this.vertical = boolean(this.vertical, true);
+    this.fullWidth = boolean(this.fullWidth, true);
     this.defaultValue = this.value;
   }
   firstUpdated() {
@@ -16234,6 +16306,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
         radio.checked = radio.value === this.value;
         radio.size = this.size;
         radio.variant = this.variant;
+        radio.fullWidth = this.fullWidth;
       });
       if (!radios.some((radio) => radio.checked)) {
         radios[0].tabIndex = 0;
@@ -16247,10 +16320,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
     radios.forEach((radio) => radio.checked = radio.value === this.value);
     this.formControlController.setValidity(this.validity.valid);
   }
-  handleSizeChange() {
-    this.syncRadios();
-  }
-  handleVariantChange() {
+  handleStyleChange() {
     this.syncRadios();
   }
   handleValueChange() {
@@ -16401,14 +16471,11 @@ __decorateClass$l([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowUiRadioGroup.prototype, "required", 2);
 __decorateClass$l([
-  decorators_js.property({ type: Boolean, reflect: true })
-], FlowUiRadioGroup.prototype, "vertical", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiRadioGroup.prototype, "fullWidth", 2);
 __decorateClass$l([
-  watch("size", { waitUntilFirstUpdate: true })
-], FlowUiRadioGroup.prototype, "handleSizeChange", 1);
-__decorateClass$l([
-  watch("variant", { waitUntilFirstUpdate: true })
-], FlowUiRadioGroup.prototype, "handleVariantChange", 1);
+  watch(["size", "variant", "fullWidth"], { waitUntilFirstUpdate: true })
+], FlowUiRadioGroup.prototype, "handleStyleChange", 1);
 __decorateClass$l([
   watch("value")
 ], FlowUiRadioGroup.prototype, "handleValueChange", 1);
@@ -16437,6 +16504,19 @@ const styles$l = lit.css`
     cursor: pointer;
   }
 
+  /* Alternative 'full-width' style */
+  .radio--full-width {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  .radio--full-width .radio__label {
+    flex: 1;
+    margin: 0;
+  }
+
+  /* Variants */
   .radio--primary {
     --radio-color: var(--flow-ui-color-primary-500);
     --radio-hover-color: var(--flow-ui-color-primary-400);
@@ -16579,10 +16659,12 @@ class FlowUiRadio extends FlowRdfElement {
     this.size = "medium";
     this.variant = "secondary";
     this.disabled = false;
+    this.fullWidth = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this.disabled = boolean(this.disabled, true);
+    this.fullWidth = boolean(this.fullWidth, true);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -16644,7 +16726,8 @@ class FlowUiRadio extends FlowRdfElement {
       "radio--success": this.variant === "success",
       "radio--warning": this.variant === "warning",
       "radio--danger": this.variant === "danger",
-      "radio--neutral": this.variant === "neutral"
+      "radio--neutral": this.variant === "neutral",
+      "radio--full-width": this.fullWidth
     })}
       >
         <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
@@ -16682,6 +16765,9 @@ __decorateClass$k([
 __decorateClass$k([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowUiRadio.prototype, "disabled", 2);
+__decorateClass$k([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiRadio.prototype, "fullWidth", 2);
 __decorateClass$k([
   watch("checked")
 ], FlowUiRadio.prototype, "handleCheckedChange", 1);
@@ -16928,7 +17014,7 @@ var __decorateClass$j = (decorators, target, key, kind) => {
     __defProp$j(target, key, result);
   return result;
 };
-class FlowUiRange extends FlowRdfElement {
+class FlowUiRange extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this);
@@ -18505,7 +18591,7 @@ var __decorateClass$g = (decorators, target, key, kind) => {
     __defProp$g(target, key, result);
   return result;
 };
-class FlowUiSelect extends FlowRdfElement {
+class FlowUiSelect extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -20708,7 +20794,7 @@ var __decorateClass$9 = (decorators, target, key, kind) => {
     __defProp$9(target, key, result);
   return result;
 };
-class FlowUiSwitch extends FlowRdfElement {
+class FlowUiSwitch extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -22208,7 +22294,7 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
     __defProp$5(target, key, result);
   return result;
 };
-class FlowUiTextarea extends FlowRdfElement {
+class FlowUiTextarea extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -23113,7 +23199,7 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
     __defProp$3(target, key, result);
   return result;
 };
-class FlowUiToolButtonGroup extends FlowRdfElement {
+class FlowUiToolButtonGroup extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     /** @internal */
@@ -24466,6 +24552,7 @@ class FlowUiTree extends FlowRdfElement {
   }
   async connectedCallback() {
     super.connectedCallback();
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.handleTreeChanged = this.handleTreeChanged.bind(this);
     this.handleFocusIn = this.handleFocusIn.bind(this);
     this.handleFocusOut = this.handleFocusOut.bind(this);
@@ -24485,6 +24572,9 @@ class FlowUiTree extends FlowRdfElement {
     this.removeEventListener("focusout", this.handleFocusOut);
     this.removeEventListener("flow-ui-lazy-change", this.handleSlotChange);
   }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
   // Generates a clone of the expand icon element to use for each tree item
   getExpandButtonIcon(status) {
     const slot = status === "expand" ? this.expandedIconSlot : this.collapsedIconSlot;
@@ -24723,6 +24813,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.query("slot[name=collapse-icon]")
 ], FlowUiTree.prototype, "collapsedIconSlot", 2);
+__decorateClass([
+  decorators_js.property({ reflect: true })
+], FlowUiTree.prototype, "class", 2);
 __decorateClass([
   decorators_js.property({
     converter: {
@@ -24737,6 +24830,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ reflect: true })
 ], FlowUiTree.prototype, "size", 2);
+__decorateClass([
+  watch("class")
+], FlowUiTree.prototype, "handleClassChange", 1);
 __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], FlowUiTree.prototype, "handleSizeChange", 1);
@@ -24908,7 +25004,7 @@ async function registerComponents() {
   });
 }
 
-const version = "4.0.3";
+const version = "4.0.4";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;