@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.7

package/dist/components/query-builder/query-builder.styles.mjs

@@ -0,0 +1,261 @@
+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: block;
+
+    --footer-spacing: var(--flow-ui-spacing-medium);
+  }
+
+  /* Toolbar */
+  .query-builder__toolbar {
+    display: flex;
+    gap: var(--flow-ui-spacing-2x-small);
+  }
+
+  .query-builder__toolbar .spacer {
+    flex: 1;
+  }
+
+  .query-builder-and-or-button-group flow-ui-tool-button::part(label) {
+    text-transform: uppercase;
+    font-weight: var(--flow-ui-font-weight-bold);
+  }
+
+  .query-builder__toolbar-button::part(base) {
+    color: var(--flow-ui-color-neutral-500);
+    padding-inline: 0;
+  }
+
+  /* Rule */
+  .query-builder__rule:not(.query-builder--child) {
+    display: flex;
+    gap: var(--flow-ui-spacing-x-small);
+    align-items: center;
+  }
+
+  .query-builder__rule + .query-builder__rule {
+    margin-top: var(--flow-ui-spacing-x-small);
+  }
+
+  .query-builder__rule-remove-button::part(base) {
+    padding-inline: 0;
+  }
+
+  .query-builder__rule-checkbox::part(base) {
+    display: flex;
+    padding-inline: 0;
+  }
+
+  .query-builder__rule-control-container {
+    display: flex;
+    position: relative;
+    flex: 1;
+    gap: var(--flow-ui-spacing-x-small);
+  }
+
+  .query-builder__field-select {
+    flex: 1;
+  }
+
+  .query-builder__operator-select {
+    flex: 1;
+  }
+
+  .query-builder__rule-value-wrapper {
+    display: flex;
+    flex: 1;
+  }
+
+  .query-builder__rule-value-control {
+    flex: 1;
+    /* Override the browser minimum width on inputs */
+    width: 0;
+  }
+
+  /* Grey out disabled rules */
+  .query-builder__rule--disabled {
+    background-color: var(--flow-ui-color-neutral-100);
+  }
+
+  /* Add strike-through for disabled rules */
+  .query-builder__rule--disabled .query-builder__rule-control-container::before {
+    content: '';
+
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: -5px;
+    right: 5px;
+    z-index: 1;
+
+    border-bottom: 1px solid var(--flow-ui-color-danger-200);
+  }
+
+  .query-builder__rule-checkbox {
+    /* Adjust alignment of checkbox with query builder toolbar buttons */
+    margin-right: -4px;
+  }
+
+  .query-builder__unrecognized-field-container {
+    flex: 1;
+    background-color: var(--flow-ui-color-danger-100);
+    padding-inline: var(--flow-ui-spacing-small);
+  }
+
+  /* Small rule sizes */
+  .query-builder--small .query-builder__field-select {
+    max-width: 200px;
+  }
+
+  .query-builder--small .query-builder__operator-select {
+    max-width: 120px;
+  }
+
+  .query-builder--small .query-builder-and-or-button-group flow-ui-tool-button {
+    width: 30px;
+  }
+
+  .query-builder--small .q-connector {
+    margin-left: 38px;
+  }
+
+  /* Medium rule sizes */
+  .query-builder--medium .query-builder__field-select {
+    max-width: 250px;
+  }
+
+  .query-builder--medium .query-builder__operator-select {
+    max-width: 150px;
+  }
+
+  .query-builder--medium .query-builder-and-or-button-group flow-ui-tool-button {
+    width: 30px;
+  }
+
+  /* Large rule sizes */
+  .query-builder--large .query-builder__toolbar {
+    margin-bottom: var(--flow-ui-spacing-x-small);
+  }
+
+  .query-builder--large .query-builder__field-select {
+    max-width: 250px;
+  }
+
+  .query-builder--large .query-builder__operator-select {
+    max-width: 150px;
+  }
+
+  .query-builder--large .query-builder-and-or-button-group flow-ui-tool-button {
+    width: 40px;
+  }
+
+  .query-builder--large.query-builder--tree-lines .query-builder__rule.query-builder--child {
+    margin-top: var(--flow-ui-spacing-x-small);
+  }
+
+  /* Query builder with tree connector lines */
+
+  .query-builder--tree-lines .query-builder__rules {
+    margin-top: var(--flow-ui-spacing-3x-small);
+  }
+
+  .query-builder--tree-lines .query-builder__rule:not(.query-builder--child) {
+    position: relative;
+    margin-left: 38px;
+
+    &::before {
+      top: calc(var(--flow-ui-spacing-x-small) * -1);
+      bottom: 50%;
+      border-width: 0 0 2px 2px;
+    }
+
+    &::after {
+      border-width: 0 0 0 2px;
+      top: 0;
+      bottom: 0;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      left: -10px;
+      border-color: var(--flow-ui-color-neutral-200);
+      border-style: solid;
+      width: 9px;
+      position: absolute;
+    }
+
+    &:last-child::after {
+      content: none;
+    }
+  }
+
+  .query-builder--tree-lines .query-builder__rule.query-builder--child {
+    position: relative;
+    margin-top: var(--flow-ui-spacing-2x-small);
+    margin-left: 38px;
+
+    &::before {
+      top: calc(var(--flow-ui-spacing-x-small) * -1);
+      height: 20px;
+      border-width: 0 0 2px 2px;
+    }
+
+    &::after {
+      border-width: 0 0 0 2px;
+      top: 0;
+      bottom: 0;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      left: -10px;
+      border-color: var(--flow-ui-color-neutral-200);
+      border-style: solid;
+      width: 9px;
+      position: absolute;
+    }
+
+    &:last-child::after {
+      content: none;
+    }
+  }
+
+  .query-builder--tree-lines.query-builder--large .query-builder__rule {
+    margin-left: 48px;
+  }
+
+  /* Child query builder */
+  .query-builder--child:not([tree-lines]) {
+    padding: var(--flow-ui-spacing-small);
+    border: 1px solid var(--flow-ui-color-neutral-200);
+    border-radius: var(--flow-ui-border-radius-medium);
+  }
+
+  .query-builder--child.query-builder--no-rules {
+    background-color: var(--flow-ui-color-danger-100);
+  }
+
+  /* Footer */
+  .query-builder__footer {
+    text-align: right;
+    padding-top: var(--footer-spacing);
+  }
+
+  .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {
+    margin-inline-start: var(--flow-ui-spacing-x-small);
+  }
+
+  .dialog:not(.query-builder--has-footer) .query-builder__footer {
+    display: none;
+  }
+`;
+
+export { styles as default };

package/dist/components/radio/radio.component.mjs

@@ -0,0 +1,144 @@
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './radio.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 FlowUiRadio extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.hasFocus = false;
+    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);
+    this.setInitialAttributes();
+    this.addEventListeners();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("focus", this.handleFocus);
+  }
+  removeEventListeners() {
+    this.removeEventListener("blur", this.handleBlur);
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("focus", this.handleFocus);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.setAttribute("tabindex", "-1");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      radio: true,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--focused": this.hasFocus,
+      "radio--small": this.size === "small",
+      "radio--medium": this.size === "medium",
+      "radio--large": this.size === "large",
+      "radio--primary": this.variant === "primary",
+      "radio--secondary": this.variant === "secondary",
+      "radio--success": this.variant === "success",
+      "radio--warning": this.variant === "warning",
+      "radio--danger": this.variant === "danger",
+      "radio--neutral": this.variant === "neutral",
+      "radio--full-width": this.fullWidth
+    })}
+      >
+        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
+          ${this.checked ? html`
+                <flow-ui-icon
+                  part="checked-icon"
+                  class="radio__checked-icon"
+                  library="system"
+                  name="radio"
+                ></flow-ui-icon>
+              ` : ""}
+        </span>
+
+        <slot part="label" class="radio__label"></slot>
+      </span>
+    `;
+  }
+}
+FlowUiRadio.styles = styles;
+__decorateClass([
+  state()
+], FlowUiRadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], FlowUiRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], FlowUiRadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiRadio.prototype, "size", 2);
+__decorateClass([
+  property()
+], FlowUiRadio.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiRadio.prototype, "fullWidth", 2);
+__decorateClass([
+  watch("checked")
+], FlowUiRadio.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiRadio.prototype, "handleDisabledChange", 1);
+
+export { FlowUiRadio as default };

package/dist/components/radio/radio.mjs

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

package/dist/components/radio/radio.styles.mjs

@@ -0,0 +1,164 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    --radio-color: var(--flow-ui-color-secondary-500);
+    --radio-hover-color: var(--flow-ui-color-secondary-400);
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio {
+    display: inline-flex;
+    align-items: top;
+    font-family: var(--flow-ui-input-font-family);
+    font-size: var(--flow-ui-input-font-size-medium);
+    font-weight: var(--flow-ui-input-font-weight);
+    color: var(--flow-ui-input-label-color);
+    vertical-align: middle;
+    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);
+  }
+
+  .radio--secondary {
+    --radio-color: var(--flow-ui-color-secondary-500);
+    --radio-hover-color: var(--flow-ui-color-secondary-400);
+  }
+
+  .radio--success {
+    --radio-color: var(--flow-ui-color-success-500);
+    --radio-hover-color: var(--flow-ui-color-success-400);
+  }
+
+  .radio--warning {
+    --radio-color: var(--flow-ui-color-warning-500);
+    --radio-hover-color: var(--flow-ui-color-warning-400);
+  }
+
+  .radio--danger {
+    --radio-color: var(--flow-ui-color-danger-500);
+    --radio-hover-color: var(--flow-ui-color-danger-400);
+  }
+
+  .radio--neutral {
+    --radio-color: var(--flow-ui-color-neutral-500);
+    --radio-hover-color: var(--flow-ui-color-neutral-400);
+  }
+
+  .radio--small {
+    --toggle-size: var(--flow-ui-toggle-size-small);
+    font-size: var(--flow-ui-input-font-size-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--flow-ui-toggle-size-medium);
+    font-size: var(--flow-ui-input-font-size-medium);
+  }
+
+  .radio--large {
+    --toggle-size: var(--flow-ui-toggle-size-large);
+    font-size: var(--flow-ui-input-font-size-large);
+  }
+
+  .radio__checked-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  .radio__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    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-radius: 50%;
+    background-color: var(--flow-ui-input-background-color);
+    color: transparent;
+    transition:
+      var(--flow-ui-transition-fast) border-color,
+      var(--flow-ui-transition-fast) background-color,
+      var(--flow-ui-transition-fast) color,
+      var(--flow-ui-transition-fast) box-shadow;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    border-color: var(--flow-ui-input-border-color-hover);
+    background-color: var(--flow-ui-input-background-color-hover);
+  }
+
+  /* Checked */
+  .radio--checked .radio__control {
+    color: var(--flow-ui-color-neutral-0);
+    border-color: var(--radio-color);
+    background-color: var(--radio-color);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
+    border-color: var(--radio-hover-color);
+    background-color: var(--radio-hover-color);
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) .radio__control {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .radio--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
+  .radio:not(.radio--checked) svg circle {
+    opacity: 0;
+  }
+
+  .radio__label {
+    display: inline-block;
+    color: var(--flow-ui-input-label-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+`;
+
+export { styles as default };