@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

package/dist/components/tool-button/tool-button.styles.mjs

@@ -0,0 +1,251 @@
+import { css } from 'lit';
+import buttonStyles from '../button/button.styles.mjs';
+
+const styles = css`
+  ${buttonStyles}
+
+  :host {
+    --background-color: var(--flow-ui-color-primary-50);
+    --border-color: var(--flow-ui-color-primary-300);
+    --color: var(--flow-ui-color-primary-500);
+    --flow-ui-button-text-transform: none;
+  }
+
+  .button {
+    /* font-weight: var(--flow-ui-font-weight-light); */
+  }
+
+  .button__prefix,
+  .button__suffix,
+  .button__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+  }
+
+  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
+    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
+  .hidden-input {
+    all: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    outline: dotted 1px red;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  /* Hide unused parts of button */
+  .button:not(.button--has-label) .button__label {
+    display: none;
+  }
+
+  .button:not(.button--has-icon) .button__icon {
+    display: none;
+  }
+
+  /* Remove use of line-height to set height of button */
+  .button {
+    line-height: normal;
+    min-height: 0;
+  }
+
+  /* Remove padding from label. This is added to label wrapper div instead. */
+  .button--has-label.button--x-small .button__label {
+    padding: 0;
+  }
+
+  .button--has-label.button--small .button__label {
+    padding: 0;
+  }
+
+  .button--has-label.button--medium .button__label {
+    padding: 0;
+  }
+
+  .button--has-label.button--large .button__label {
+    padding: 0;
+  }
+
+  /* Variants */
+  .button--primary {
+    --background-color: var(--flow-ui-color-primary-50);
+    --border-color: var(--flow-ui-color-primary-300);
+    --color: var(--flow-ui-color-primary-500);
+  }
+
+  .button--secondary {
+    --background-color: var(--flow-ui-color-secondary-50);
+    --border-color: var(--flow-ui-color-secondary-300);
+    --color: var(--flow-ui-color-secondary-500);
+  }
+
+  .button--success {
+    --background-color: var(--flow-ui-color-success-50);
+    --border-color: var(--flow-ui-color-success-300);
+    --color: var(--flow-ui-color-success-500);
+  }
+
+  .button--warning {
+    --background-color: var(--flow-ui-color-warning-50);
+    --border-color: var(--flow-ui-color-warning-300);
+    --color: var(--flow-ui-color-warning-500);
+  }
+
+  .button--danger {
+    --background-color: var(--flow-ui-color-danger-50);
+    --border-color: var(--flow-ui-color-danger-300);
+    --color: var(--flow-ui-color-danger-500);
+  }
+
+  .button--neutral {
+    --background-color: var(--flow-ui-color-neutral-50);
+    --border-color: var(--flow-ui-color-neutral-300);
+    --color: var(--flow-ui-color-neutral-500);
+  }
+
+  /* Override outline style */
+  .button--outline.button--default {
+    border-color: var(--flow-ui-color-neutral-300);
+    color: var(--flow-ui-color-neutral-700);
+  }
+
+  .button--outline.button--default.button--checked:not(.button--disabled) {
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  .button--outline.button--default:hover:not(.button--disabled) {
+    border-color: var(--flow-ui-color-neutral-300);
+    background-color: transparent;
+    color: var(--color);
+  }
+
+  .button--outline.button--default.button--checked:hover:not(.button--disabled) {
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  .button--outline.button--default:active:not(.button--disabled) {
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  .button--outline.button--default.button--checked:active:not(.button--disabled) {
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  /* Override text style */
+  .button--text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--flow-ui-color-neutral-500);
+  }
+
+  .button--text.button--checked:not(.button--disabled) {
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  .button--text:hover:not(.button--disabled) {
+    color: var(--color);
+  }
+
+  .button--text:active:not(.button--disabled) {
+    color: var(--color);
+  }
+
+  .button--text.button--x-small {
+    border-radius: var(--flow-ui-input-border-radius-x-small) !important;
+  }
+
+  .button--text.button--small {
+    border-radius: var(--flow-ui-input-border-radius-small) !important;
+  }
+
+  .button--text.button--medium {
+    border-radius: var(--flow-ui-input-border-radius-medium) !important;
+  }
+
+  .button--text.button--large {
+    border-radius: var(--flow-ui-input-border-radius-large) !important;
+  }
+
+  /* Label wrapper styles */
+  .button__label-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: unset;
+  }
+
+  .button--x-small .button__label-wrapper {
+    padding: var(--flow-ui-spacing-2x-small);
+    gap: var(--flow-ui-spacing-2x-small);
+  }
+
+  .button--x-small .button__icon {
+    font-size: var(--flow-ui-font-size-small);
+  }
+
+  .button--small .button__label-wrapper {
+    padding: var(--flow-ui-spacing-x-small);
+    gap: var(--flow-ui-spacing-2x-small);
+  }
+
+  .button--small .button__icon {
+    font-size: var(--flow-ui-font-size-small);
+  }
+
+  .button--medium .button__label-wrapper {
+    padding: var(--flow-ui-spacing-small);
+    gap: var(--flow-ui-spacing-x-small);
+  }
+
+  .button--medium .button__icon {
+    font-size: var(--flow-ui-font-size-medium);
+  }
+
+  .button--large .button__label-wrapper {
+    padding: var(--flow-ui-spacing-medium);
+    gap: var(--flow-ui-spacing-small);
+  }
+
+  .button--large .button__icon {
+    font-size: var(--flow-ui-font-size-large);
+  }
+
+  /*
+   * Pill modifier
+   */
+  .button--pill.button--x-small {
+    border-radius: var(--flow-ui-input-height-small);
+  }
+
+  .button--pill.button--small {
+    border-radius: var(--flow-ui-input-height-small);
+  }
+
+  .button--pill.button--medium {
+    border-radius: var(--flow-ui-input-height-medium);
+  }
+
+  .button--pill.button--large {
+    border-radius: var(--flow-ui-input-height-large);
+  }
+
+  /* Tooltip */
+  .tool-button__tooltip {
+    --show-delay: var(--flow-ui-button-tooltip-delay);
+  }
+`;
+
+export { styles as default };

package/dist/components/tool-button-group/tool-button-group.component.mjs

@@ -0,0 +1,347 @@
+import { html } 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 { ensureArray } from '../../internal/ensure-array.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController, customErrorValidityState, validValidityState } from '../../internal/form.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './tool-button-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 FlowUiToolButtonGroup extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    /** @internal */
+    this.formControlController = new FormControlController(this);
+    this.customValidityMessage = "";
+    this.errorMessage = "";
+    this.label = "";
+    this.name = "option";
+    this.value = "";
+    this.size = "medium";
+    this.pill = false;
+    this.outline = false;
+    this.variant = "primary";
+    this.form = "";
+    this.vertical = false;
+    this.mode = "radio";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return customErrorValidityState;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return this.customValidityMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.pill = boolean(this.pill, true);
+    this.outline = boolean(this.outline, true);
+    this.vertical = boolean(this.vertical, true);
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  getAllToolButtons() {
+    return [...this.querySelectorAll("flow-ui-tool-button")];
+  }
+  handleButtonClick(event) {
+    const target = event.target.closest("flow-ui-tool-button");
+    if (!target) {
+      return;
+    }
+    const toolButtons = this.getAllToolButtons();
+    const oldValue = this.value;
+    if (target.disabled) {
+      return;
+    }
+    if (this.mode === "radio") {
+      target.checked = true;
+      this.value = target.value;
+    } else {
+      target.checked = !target.checked;
+      this.value = toolButtons.filter((button) => !button.disabled && button.checked).map((button) => button.value);
+      if (!target.checked) {
+        target.blur();
+      }
+    }
+    this.updateCheckedButtons();
+    if (this.value !== oldValue) {
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+  }
+  handleKeyDown(event) {
+    if (this.mode === "checkbox") {
+      return;
+    }
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+      return;
+    }
+    const buttons = this.getAllToolButtons().filter((radio) => !radio.disabled);
+    const checkedButton = buttons.find((button) => button.checked) ?? buttons[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = buttons.indexOf(checkedButton) + incr;
+    if (index < 0) {
+      index = buttons.length - 1;
+    }
+    if (index > buttons.length - 1) {
+      index = 0;
+    }
+    this.getAllToolButtons().forEach((radio) => {
+      radio.checked = false;
+    });
+    this.value = buttons[index].value;
+    buttons[index].checked = true;
+    buttons[index].shadowRoot.querySelector("button").focus();
+    if (this.value !== oldValue) {
+      this.emit("flow-ui-change");
+      this.emit("flow-ui-input");
+    }
+    event.preventDefault();
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  syncButtons() {
+    if (customElements.get("flow-ui-tool-button")) {
+      const buttons = this.getAllToolButtons();
+      const valueArray = ensureArray(this.value);
+      buttons.forEach((button) => {
+        button.checked = valueArray.includes(button.value);
+        button.size = this.size;
+        button.pill = this.pill;
+        button.outline = this.outline;
+        button.variant = this.variant;
+      });
+      if (this.mode === "checkbox") {
+        buttons.forEach((button) => {
+          const buttonControl = button.shadowRoot?.querySelector("button");
+          if (buttonControl) {
+            buttonControl.tabIndex = 0;
+          }
+        });
+      } else if (!buttons.some((button) => button.checked)) {
+        const buttonControl = buttons[0].shadowRoot?.querySelector("button");
+        if (buttonControl) {
+          buttonControl.tabIndex = 0;
+        }
+      }
+      const buttonGroup = this.shadowRoot?.querySelector("flow-ui-button-group");
+      if (buttonGroup) {
+        buttonGroup.disableRole = true;
+      }
+    } else {
+      customElements.whenDefined("flow-ui-tool-button").then(() => this.syncButtons());
+    }
+  }
+  updateCheckedButtons() {
+    const buttons = this.getAllToolButtons();
+    const valueArray = ensureArray(this.value);
+    buttons.forEach((button) => button.checked = valueArray.includes(button.value));
+    this.updateTabbableState();
+    this.formControlController.setValidity(this.validity.valid);
+  }
+  handleSizeChange() {
+    this.syncButtons();
+  }
+  handleOutlineChange() {
+    this.syncButtons();
+  }
+  handleVariantChange() {
+    this.syncButtons();
+  }
+  handlePillChange() {
+    this.syncButtons();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedButtons();
+    }
+  }
+  updateTabbableState() {
+    const buttons = this.getAllToolButtons();
+    buttons.forEach((button) => {
+      const buttonControl = button.shadowRoot?.querySelector("button");
+      if (buttonControl) {
+        buttonControl.tabIndex = this.mode === "checkbox" ? 0 : button.checked ? 0 : -1;
+      }
+    });
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (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();
+  }
+  render() {
+    const defaultSlot = html`
+      <slot
+        @click=${this.handleButtonClick}
+        @keydown=${this.handleKeyDown}
+        @slotchange=${this.syncButtons}
+        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--radio-group": true
+    })}
+        role="radiogroup"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        <div part="form-control-input" class="form-control-input">
+          <div class="visually-hidden">
+            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
+            <label class="radio-group__validation">
+              <input
+                type="text"
+                class="radio-group__validation-input"
+                tabindex=${this.mode === "radio" ? "-1" : "0"}
+                hidden
+                @invalid=${this.handleInvalid}
+              />
+            </label>
+          </div>
+
+          <flow-ui-button-group
+            class=${classMap({
+      "button-group": true,
+      "button-group--x-small": this.size === "x-small",
+      "button-group--small": this.size === "small",
+      "button-group--medium": this.size === "medium",
+      "button-group--large": this.size === "large",
+      "button-group--outline": this.outline,
+      "button-group--no-outline": !this.outline
+    })}
+            part="button-group"
+            exportparts="base:button-group__base"
+            ?vertical=${this.vertical}
+          >
+            ${defaultSlot}
+          </flow-ui-button-group>
+        </div>
+      </fieldset>
+    `;
+  }
+}
+FlowUiToolButtonGroup.styles = styles;
+__decorateClass([
+  query(".radio-group__validation-input")
+], FlowUiToolButtonGroup.prototype, "validationInput", 2);
+__decorateClass([
+  state()
+], FlowUiToolButtonGroup.prototype, "errorMessage", 2);
+__decorateClass([
+  property()
+], FlowUiToolButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property()
+], FlowUiToolButtonGroup.prototype, "name", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => value.split(" "),
+      toAttribute: (value) => value.join(" ")
+    }
+  })
+], FlowUiToolButtonGroup.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiToolButtonGroup.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButtonGroup.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButtonGroup.prototype, "outline", 2);
+__decorateClass([
+  property()
+], FlowUiToolButtonGroup.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiToolButtonGroup.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButtonGroup.prototype, "vertical", 2);
+__decorateClass([
+  property()
+], FlowUiToolButtonGroup.prototype, "mode", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], FlowUiToolButtonGroup.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("outline", { waitUntilFirstUpdate: true })
+], FlowUiToolButtonGroup.prototype, "handleOutlineChange", 1);
+__decorateClass([
+  watch("variant", { waitUntilFirstUpdate: true })
+], FlowUiToolButtonGroup.prototype, "handleVariantChange", 1);
+__decorateClass([
+  watch("pill", { waitUntilFirstUpdate: true })
+], FlowUiToolButtonGroup.prototype, "handlePillChange", 1);
+__decorateClass([
+  watch("value")
+], FlowUiToolButtonGroup.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("mode", { waitUntilFirstUpdate: true })
+], FlowUiToolButtonGroup.prototype, "updateTabbableState", 1);
+
+export { FlowUiToolButtonGroup as default };

package/dist/components/tool-button-group/tool-button-group.mjs

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

package/dist/components/tool-button-group/tool-button-group.styles.mjs

@@ -0,0 +1,59 @@
+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;
+    isolation: isolate;
+  }
+
+  .form-control {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .form-control__label {
+    padding: 0;
+  }
+
+  .radio-group--required .radio-group__label::after {
+    content: var(--flow-ui-input-required-content);
+    margin-inline-start: var(--flow-ui-input-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;
+  }
+
+  /* Add gap between buttons when text-only buttons are used */
+  .button-group--x-small.button-group--no-outline::part(base) {
+    gap: var(--flow-ui-spacing-2x-small)
+  }
+
+  .button-group--small.button-group--no-outline::part(base) {
+    gap: var(--flow-ui-spacing-2x-small)
+  }
+
+  .button-group--medium.button-group--no-outline::part(base) {
+    gap: var(--flow-ui-spacing-2x-small)
+  }
+
+  .button-group--large.button-group--no-outline::part(base) {
+    gap: var(--flow-ui-spacing-x-small)
+  }
+`;
+
+export { styles as default };