@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/chart/chartjs-support.mjs

@@ -0,0 +1,59 @@
+import { Chart, BarController, LineController, ScatterController, LineElement, PointElement, BarElement, CategoryScale, LinearScale, LogarithmicScale, TimeScale, TimeSeriesScale, Legend, Tooltip, Title, Interaction } from 'chart.js';
+export { Chart as ChartJs } from 'chart.js';
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
+import AnnotationPlugin from 'chartjs-plugin-annotation';
+import Interpolate from './chartjs-plugins/interaction.interpolate.mjs';
+import FlowUiColorsPlugin from './chartjs-plugins/plugin.flow-ui-colors.mjs';
+import CursorPositioner from './chartjs-plugins/positioner.cursor.mjs';
+import SymlogAxis from './chartjs-plugins/symlog.scale.mjs';
+
+let chartJsInitialized = false;
+function initializeChartJs() {
+  if (chartJsInitialized) {
+    return;
+  }
+  chartJsInitialized = true;
+  Chart.register(
+    FlowUiColorsPlugin,
+    BarController,
+    LineController,
+    ScatterController,
+    LineElement,
+    PointElement,
+    BarElement,
+    CategoryScale,
+    LinearScale,
+    LogarithmicScale,
+    TimeScale,
+    TimeSeriesScale,
+    SymlogAxis,
+    Legend,
+    Tooltip,
+    Title,
+    AnnotationPlugin,
+    MatrixController,
+    MatrixElement
+  );
+  Tooltip.positioners.cursor = CursorPositioner;
+  Interaction.modes.interpolate = Interpolate;
+  Chart.defaults.animation = false;
+  Chart.defaults.responsive = true;
+  Chart.defaults.maintainAspectRatio = false;
+  Chart.defaults.layout.padding = {
+    top: 5,
+    right: 10,
+    bottom: 5,
+    left: 5
+  };
+  Chart.defaults.plugins.legend.position = "bottom";
+  Chart.defaults.plugins.legend.align = "start";
+  Chart.defaults.plugins.tooltip.position = "cursor";
+  Chart.defaults.plugins.title.font = { size: 12 };
+  Chart.defaults.plugins.title.align = "start";
+  Chart.defaults.plugins.title.padding = { top: 0, bottom: 10 };
+}
+function registerChartComponent(...components) {
+  Chart.register(...components);
+}
+
+export { initializeChartJs, registerChartComponent };

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

@@ -0,0 +1,246 @@
+import { html, nothing } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { defaultValue } from '../../internal/default-value.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController } from '../../internal/form.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './checkbox.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 FlowUiCheckbox extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]");
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.size = "medium";
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+    this.fullWidth = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checked = boolean(this.checked, true);
+    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() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    this.emit("flow-ui-change");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleInput() {
+    this.emit("flow-ui-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleStateChange() {
+    this.input.checked = this.checked;
+    this.input.indeterminate = this.indeterminate;
+    this.formControlController.updateValidity();
+  }
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the checkbox. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** 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() {
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    return html`
+      <label
+        part="base"
+        class=${classMap({
+      checkbox: true,
+      "checkbox--checked": this.checked,
+      "checkbox--disabled": this.disabled,
+      "checkbox--focused": this.hasFocus,
+      "checkbox--indeterminate": this.indeterminate,
+      "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
+    })}
+      >
+        <input
+          class="checkbox__input"
+          type="checkbox"
+          title=${this.title}
+          name=${this.name}
+          value=${ifDefined(this.value)}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? "true" : "false"}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+
+        <span
+          part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}"
+          class="checkbox__control"
+        >
+          ${this.checked ? html`
+                <flow-ui-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  library="system"
+                  name="check"
+                ></flow-ui-icon>
+              ` : ""}
+          ${!this.checked && this.indeterminate ? html`
+                <flow-ui-icon
+                  part="indeterminate-icon"
+                  class="checkbox__indeterminate-icon"
+                  library="system"
+                  name="indeterminate"
+                ></flow-ui-icon>
+              ` : ""}
+        </span>
+
+        ${this.hasSlotController.test("[default]") ? html`
+              <div part="label" class="checkbox__label">
+                <slot></slot>
+              </div>
+            ` : nothing}
+      </label>
+    `;
+  }
+}
+FlowUiCheckbox.styles = styles;
+__decorateClass([
+  query('input[type="checkbox"]')
+], FlowUiCheckbox.prototype, "input", 2);
+__decorateClass([
+  state()
+], FlowUiCheckbox.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], FlowUiCheckbox.prototype, "title", 2);
+__decorateClass([
+  property()
+], FlowUiCheckbox.prototype, "name", 2);
+__decorateClass([
+  property()
+], FlowUiCheckbox.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiCheckbox.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckbox.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckbox.prototype, "indeterminate", 2);
+__decorateClass([
+  defaultValue("checked")
+], FlowUiCheckbox.prototype, "defaultChecked", 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);
+__decorateClass([
+  watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
+], FlowUiCheckbox.prototype, "handleStateChange", 1);
+
+export { FlowUiCheckbox as default };

package/dist/components/checkbox/checkbox.mjs

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

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

@@ -0,0 +1,177 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+
+    --checkbox-color: var(--flow-ui-color-secondary-500);
+    --checkbox-check-color: var(--flow-ui-color-neutral-0);
+    --checkbox-hover-color: var(--flow-ui-color-secondary-400);
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    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);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  /* Sizes */
+  .checkbox--small {
+    --toggle-size: var(--flow-ui-toggle-size-small);
+    font-size: var(--flow-ui-input-font-size-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--flow-ui-toggle-size-medium);
+    font-size: var(--flow-ui-input-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;
+  }
+
+  .checkbox__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: 2px;
+    background-color: var(--flow-ui-input-background-color);
+    color: var(--checkbox-check-color);
+    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;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  /* 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);
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    border-color: var(--checkbox-color);
+    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 {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox__label {
+    display: inline-block;
+    color: var(--flow-ui-input-label-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  :host([required]) .checkbox__label::after {
+    content: var(--flow-ui-input-required-content);
+    margin-inline-start: var(--flow-ui-input-required-content-offset);
+  }
+`;
+
+export { styles as default };