@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

package/dist/components/color-picker/color-picker.mjs

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

package/dist/components/color-picker/color-picker.styles.mjs

@@ -0,0 +1,337 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --grid-width: 280px;
+    --grid-height: 200px;
+    --grid-handle-size: 16px;
+    --slider-height: 15px;
+    --slider-handle-size: 17px;
+    --swatch-size: 25px;
+
+    display: inline-block;
+  }
+
+  .color-picker {
+    width: var(--grid-width);
+    font-family: var(--flow-ui-font-sans);
+    font-size: var(--flow-ui-font-size-medium);
+    font-weight: var(--flow-ui-font-weight-normal);
+    color: var(--color);
+    background-color: var(--flow-ui-panel-background-color);
+    border-radius: var(--flow-ui-border-radius-medium);
+    user-select: none;
+  }
+
+  .color-picker--inline {
+    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+  }
+
+  .color-picker--inline:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .color-picker__grid {
+    position: relative;
+    height: var(--grid-height);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    border-top-left-radius: var(--flow-ui-border-radius-medium);
+    border-top-right-radius: var(--flow-ui-border-radius-medium);
+    cursor: crosshair;
+    forced-color-adjust: none;
+  }
+
+  .color-picker__grid-handle {
+    position: absolute;
+    width: var(--grid-handle-size);
+    height: var(--grid-handle-size);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    border: solid 2px white;
+    margin-top: calc(var(--grid-handle-size) / -2);
+    margin-left: calc(var(--grid-handle-size) / -2);
+    transition: var(--flow-ui-transition-fast) scale;
+  }
+
+  .color-picker__grid-handle--dragging {
+    cursor: none;
+    scale: 1.5;
+  }
+
+  .color-picker__grid-handle:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+  }
+
+  .color-picker__controls {
+    padding: var(--flow-ui-spacing-small);
+    display: flex;
+    align-items: center;
+  }
+
+  .color-picker__sliders {
+    flex: 1 1 auto;
+  }
+
+  .color-picker__slider {
+    position: relative;
+    height: var(--slider-height);
+    border-radius: var(--flow-ui-border-radius-pill);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    forced-color-adjust: none;
+  }
+
+  .color-picker__slider:not(:last-of-type) {
+    margin-bottom: var(--flow-ui-spacing-small);
+  }
+
+  .color-picker__slider-handle {
+    position: absolute;
+    top: calc(50% - var(--slider-handle-size) / 2);
+    width: var(--slider-handle-size);
+    height: var(--slider-handle-size);
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    margin-left: calc(var(--slider-handle-size) / -2);
+  }
+
+  .color-picker__slider-handle:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+  }
+
+  .color-picker__hue {
+    background-image: linear-gradient(
+      to right,
+      rgb(255, 0, 0) 0%,
+      rgb(255, 255, 0) 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      rgb(0, 0, 255) 67%,
+      rgb(255, 0, 255) 83%,
+      rgb(255, 0, 0) 100%
+    );
+  }
+
+  .color-picker__alpha .color-picker__alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .color-picker__preview {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: none;
+    border-radius: var(--flow-ui-border-radius-circle);
+    background: none;
+    margin-left: var(--flow-ui-spacing-small);
+    cursor: copy;
+    forced-color-adjust: none;
+  }
+
+  .color-picker__preview:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
+    background-color: var(--preview-color);
+  }
+
+  .color-picker__preview:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .color-picker__preview-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+  }
+
+  .color-picker__preview-color--copied {
+    animation: pulse 0.75s;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--flow-ui-color-primary-400);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  .color-picker__user-input {
+    display: flex;
+    padding: 0 var(--flow-ui-spacing-small) var(--flow-ui-spacing-small) var(--flow-ui-spacing-small);
+  }
+
+  .color-picker__user-input flow-ui-input {
+    min-width: 0; /* fix input width in Safari */
+    flex: 1 1 auto;
+  }
+
+  .color-picker__user-input flow-ui-button-group {
+    margin-left: var(--flow-ui-spacing-small);
+  }
+
+  .color-picker__user-input flow-ui-button {
+    min-width: 3.25rem;
+    max-width: 3.25rem;
+    font-size: 1rem;
+  }
+
+  .color-picker__swatches {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-gap: 0.5rem;
+    justify-items: center;
+    border-top: solid 1px var(--flow-ui-color-neutral-200);
+    padding: var(--flow-ui-spacing-small);
+    forced-color-adjust: none;
+  }
+
+  .color-picker__swatch {
+    position: relative;
+    width: var(--swatch-size);
+    height: var(--swatch-size);
+    border-radius: var(--flow-ui-border-radius-small);
+  }
+
+  .color-picker__swatch .color-picker__swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+    border-radius: inherit;
+    cursor: pointer;
+  }
+
+  .color-picker__swatch:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .color-picker__transparent-bg {
+    background-image: linear-gradient(45deg, var(--flow-ui-color-neutral-300) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--flow-ui-color-neutral-300) 75%),
+      linear-gradient(45deg, transparent 75%, var(--flow-ui-color-neutral-300) 75%),
+      linear-gradient(45deg, var(--flow-ui-color-neutral-300) 25%, transparent 25%);
+    background-size: 10px 10px;
+    background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+  }
+
+  .color-picker--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .color-picker--disabled .color-picker__grid,
+  .color-picker--disabled .color-picker__grid-handle,
+  .color-picker--disabled .color-picker__slider,
+  .color-picker--disabled .color-picker__slider-handle,
+  .color-picker--disabled .color-picker__preview,
+  .color-picker--disabled .color-picker__swatch,
+  .color-picker--disabled .color-picker__swatch-color {
+    pointer-events: none;
+  }
+
+  /*
+   * Color dropdown
+   */
+
+  .color-dropdown::part(panel) {
+    max-height: none;
+    background-color: var(--flow-ui-panel-background-color);
+    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    border-radius: var(--flow-ui-border-radius-medium);
+    overflow: visible;
+  }
+
+  .color-dropdown__trigger {
+    display: inline-block;
+    vertical-align: bottom;
+    position: relative;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    forced-color-adjust: none;
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--small {
+    width: var(--flow-ui-input-height-small);
+    height: var(--flow-ui-input-height-small);
+    border-radius: var(--flow-ui-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--medium {
+    width: var(--flow-ui-input-height-medium);
+    height: var(--flow-ui-input-height-medium);
+    border-radius: var(--flow-ui-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--large {
+    width: var(--flow-ui-input-height-large);
+    height: var(--flow-ui-input-height-large);
+    border-radius: var(--flow-ui-border-radius-circle);
+  }
+
+  .color-dropdown__trigger:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: currentColor;
+    box-shadow: inset 0 0 0 var(--flow-ui-input-border-width) var(--flow-ui-input-border-color), inset 0 0 0 4px var(--flow-ui-color-neutral-0);
+  }
+
+  .color-dropdown__trigger--empty:before {
+    background-color: transparent;
+  }
+
+  .color-dropdown__trigger:focus-visible {
+    outline: none;
+  }
+
+  .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,289 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController, validValidityState, customErrorValidityState } from '../../internal/form.mjs';
+import { isNumber, isNumeric } from '../../internal/type-checks.mjs';
+import styles from './color-stop.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 FlowUiColorStop extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    // private readonly localize = new LocalizeController(this);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["flow-ui-blur", "flow-ui-change"]
+    });
+    this.name = "";
+    this.form = "";
+    this.required = false;
+    this.size = "small";
+    this.placeholder = false;
+    this.fixed = void 0;
+    this.swatches = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.placeholder = boolean(this.placeholder, true);
+    this.required = boolean(this.required, true);
+  }
+  /** Gets the validity state object. */
+  get validity() {
+    return this.validate() ? validValidityState : customErrorValidityState;
+  }
+  /** Gets the validation message. */
+  get validationMessage() {
+    return this.validate() ? "" : "Invalid regular expression";
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.validate();
+  }
+  /** 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() {
+    this.input.setCustomValidity(this.validationMessage);
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  handleRemove() {
+    this.emit("flow-ui-remove");
+  }
+  async handleChange(event) {
+    const textOptions = this.textOptions?.value ?? [];
+    const newValue = {
+      value: this.input.value,
+      color: this.picker.value,
+      options: {
+        caseSensitive: textOptions.includes("match-case"),
+        regex: textOptions.includes("regex")
+      }
+    };
+    this.value = newValue;
+    event.stopPropagation();
+    event.preventDefault();
+    this.emitChange();
+  }
+  emitChange() {
+    this.emit("flow-ui-change");
+  }
+  validate() {
+    if (this.value.options?.regex) {
+      try {
+        new RegExp(this.value.value.toString());
+      } catch (e) {
+        return false;
+      }
+    }
+    return true;
+  }
+  textInputTemplate() {
+    const toolButtons = [];
+    if (this.value.options?.caseSensitive) {
+      toolButtons.push("match-case");
+    }
+    if (this.value.options?.regex) {
+      toolButtons.push("regex");
+    }
+    const textOptionsSize = this.size === "small" ? "x-small" : this.size === "medium" ? "small" : "medium";
+    return html`
+      <flow-ui-input
+        part="input"
+        class="color-stop__input"
+        type="text"
+        value=${this.value.value.toString()}
+        size=${this.size}
+        placeholder="Add a new value"
+      >
+        <flow-ui-tool-button-group
+          class="text-options-button-group"
+          slot="suffix"
+          size=${textOptionsSize}
+          mode="checkbox"
+          .value=${toolButtons}
+          @flow-ui-change=${this.handleChange}
+        >
+          <flow-ui-tool-button
+            icon-library="system"
+            icon="type"
+            value="match-case"
+            tooltip="Match case"
+            tooltip-placement="bottom-end"
+          ></flow-ui-tool-button>
+          <flow-ui-tool-button
+            icon-library="system"
+            icon="regex"
+            value="regex"
+            tooltip="Use regular expression"
+            tooltip-placement="bottom-end"
+          ></flow-ui-tool-button>
+        </flow-ui-tool-button-group>
+      </flow-ui-input>
+    `;
+  }
+  numberInputTemplate() {
+    const options = this.options;
+    return html`
+      <flow-ui-input
+        type="number"
+        part="input"
+        class="color-stop__input"
+        value=${isNumber(this.value.value) || isNumeric(this.value.value) ? this.value.value : ""}
+        min=${ifDefined(options.min)}
+        max=${ifDefined(options.max)}
+        step=${ifDefined(options.step)}
+        placeholder="Add a new number"
+        size=${this.size}
+      >
+        ${options.units && html`
+          <span slot="suffix">${options.units}</span>
+        `}
+      </flow-ui-input>
+    `;
+  }
+  fixedInputTemplate() {
+    return html`
+      <flow-ui-input
+        class="color-stop__input"
+        type="text"
+        value=${this.fixed ?? "Fixed color"}
+        disabled
+        size=${this.size}
+      ></flow-ui-input>
+    `;
+  }
+  selectInputTemplate() {
+    const options = this.options;
+    return html`
+      <flow-ui-select
+        part="select"
+        class="color-stop__input"
+        size=${this.size}
+        value=${this.value.value}
+        placeholder="Add a new value"
+      >
+        ${options.options.map((option) => {
+      if (typeof option === "string") {
+        return html`
+              <flow-ui-option value=${option}>${option}</flow-ui-option>
+            `;
+      } else {
+        return html`
+              <flow-ui-option value=${option.value}>${option.name ?? option.value}</flow-ui-option>
+            `;
+      }
+    })}
+      </flow-ui-select>
+    `;
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "color-stop": true,
+      "color-stop--small": this.size === "small",
+      "color-stop--medium": this.size === "medium",
+      "color-stop--large": this.size === "large",
+      "color-stop--placeholder": this.placeholder,
+      "color-stop--fixed": typeof this.fixed !== "undefined"
+    })}
+        @flow-ui-change=${this.handleChange}
+      >
+        <flow-ui-icon-button
+          class="color-stop__remove-button"
+          label="Remove color stop"
+          library="system"
+          name="dash-circle"
+          confirm="Are you sure?"
+          tooltip-placement="right"
+          tooltip-distance="1"
+          @click=${this.handleRemove}
+        ></flow-ui-icon-button>
+
+        ${choose(
+      this.fixed ? "fixed" : this.options.type,
+      [
+        ["fixed", () => this.fixedInputTemplate()],
+        ["number", () => this.numberInputTemplate()],
+        ["select", () => this.selectInputTemplate()]
+      ],
+      () => this.textInputTemplate()
+    )}
+
+        <flow-ui-color-picker
+          part="color-picker"
+          size=${this.size}
+          format="hex"
+          placement="bottom-end"
+          skidding="0"
+          distance="4"
+          opacity
+          class="color-stop__picker"
+          value=${this.placeholder ? "rgba(0,0,0,0)" : this.value.color}
+          .swatches=${this.swatches}
+          ?disabled=${this.placeholder}
+        ></flow-ui-color-picker>
+      </div>
+    `;
+  }
+}
+FlowUiColorStop.styles = styles;
+__decorateClass([
+  query(".color-stop__input")
+], FlowUiColorStop.prototype, "input", 2);
+__decorateClass([
+  query(".color-stop__picker")
+], FlowUiColorStop.prototype, "picker", 2);
+__decorateClass([
+  query(".text-options-button-group")
+], FlowUiColorStop.prototype, "textOptions", 2);
+__decorateClass([
+  property()
+], FlowUiColorStop.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiColorStop.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiColorStop.prototype, "required", 2);
+__decorateClass([
+  property({ type: Object })
+], FlowUiColorStop.prototype, "options", 2);
+__decorateClass([
+  property({ type: Object })
+], FlowUiColorStop.prototype, "value", 2);
+__decorateClass([
+  property()
+], FlowUiColorStop.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiColorStop.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], FlowUiColorStop.prototype, "fixed", 2);
+__decorateClass([
+  property()
+], FlowUiColorStop.prototype, "swatches", 2);
+
+export { FlowUiColorStop as default };

package/dist/components/color-stop/color-stop.mjs

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