@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/input/input.styles.mjs

@@ -0,0 +1,310 @@
+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;
+  }
+
+  .input {
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: start;
+    position: relative;
+    width: 100%;
+    font-family: var(--flow-ui-input-font-family);
+    font-weight: var(--flow-ui-input-font-weight);
+    letter-spacing: var(--flow-ui-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: text;
+    transition:
+      var(--flow-ui-transition-fast) color,
+      var(--flow-ui-transition-fast) border,
+      var(--flow-ui-transition-fast) box-shadow,
+      var(--flow-ui-transition-fast) background-color;
+  }
+
+  /* Standard inputs */
+  .input--standard {
+    background-color: var(--flow-ui-input-background-color);
+    border: solid var(--flow-ui-input-border-width) var(--flow-ui-input-border-color);
+  }
+
+  .input--standard:hover:not(.input--disabled) {
+    background-color: var(--flow-ui-input-background-color-hover);
+    border-color: var(--flow-ui-input-border-color-hover);
+  }
+
+  .input--standard.input--focused:not(.input--disabled) {
+    background-color: var(--flow-ui-input-background-color-focus);
+    border-color: var(--flow-ui-input-border-color-focus);
+    box-shadow: 0 0 0 var(--flow-ui-focus-ring-width) var(--flow-ui-input-focus-ring-color);
+  }
+
+  .input--standard.input--focused:not(.input--disabled) .input__control {
+    color: var(--flow-ui-input-color-focus);
+  }
+
+  .input--standard.input--disabled {
+    background-color: var(--flow-ui-input-background-color-disabled);
+    border-color: var(--flow-ui-input-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--standard.input--disabled .input__control {
+    color: var(--flow-ui-input-color-disabled);
+  }
+
+  .input--standard.input--disabled .input__control::placeholder {
+    color: var(--flow-ui-input-placeholder-color-disabled);
+  }
+
+  /* Filled inputs */
+  .input--filled {
+    border: none;
+    background-color: var(--flow-ui-input-filled-background-color);
+    color: var(--flow-ui-input-color);
+  }
+
+  .input--filled:hover:not(.input--disabled) {
+    background-color: var(--flow-ui-input-filled-background-color-hover);
+  }
+
+  .input--filled.input--focused:not(.input--disabled) {
+    background-color: var(--flow-ui-input-filled-background-color-focus);
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .input--filled.input--disabled {
+    background-color: var(--flow-ui-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input__control {
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: 0;
+    height: 100%;
+    color: var(--flow-ui-input-color);
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input__control:-webkit-autofill,
+  .input__control:-webkit-autofill:hover,
+  .input__control:-webkit-autofill:focus,
+  .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--flow-ui-input-height-large) var(--flow-ui-input-background-color-hover) inset !important;
+    -webkit-text-fill-color: var(--flow-ui-color-primary-400);
+    caret-color: var(--flow-ui-input-color);
+  }
+
+  .input--filled .input__control:-webkit-autofill,
+  .input--filled .input__control:-webkit-autofill:hover,
+  .input--filled .input__control:-webkit-autofill:focus,
+  .input--filled .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--flow-ui-input-height-large) var(--flow-ui-input-filled-background-color) inset !important;
+  }
+
+  .input__control::placeholder {
+    color: var(--flow-ui-input-placeholder-color);
+    user-select: none;
+  }
+
+  .input:hover:not(.input--disabled) .input__control {
+    color: var(--flow-ui-input-color-hover);
+  }
+
+  .input__control:focus {
+    outline: none;
+  }
+
+  .input__prefix,
+  .input__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  .input__prefix::slotted(flow-ui-icon),
+  .input__suffix::slotted(flow-ui-icon) {
+    color: var(--flow-ui-input-icon-color);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small {
+    border-radius: var(--flow-ui-input-border-radius-small);
+    font-size: var(--flow-ui-input-font-size-small);
+    height: var(--flow-ui-input-height-small);
+  }
+
+  .input--small .input__control {
+    height: calc(var(--flow-ui-input-height-small) - var(--flow-ui-input-border-width) * 2);
+    padding: 0 var(--flow-ui-input-spacing-small);
+  }
+
+  .input--small .input__clear,
+  .input--small .input__password-toggle {
+    width: calc(1em + var(--flow-ui-input-spacing-small) * 2);
+  }
+
+  .input--small .input__prefix::slotted(*) {
+    margin-inline-start: var(--flow-ui-input-spacing-small);
+  }
+
+  .input--small .input__suffix::slotted(*) {
+    margin-inline-end: var(--flow-ui-input-spacing-small);
+  }
+
+  .input--medium {
+    border-radius: var(--flow-ui-input-border-radius-medium);
+    font-size: var(--flow-ui-input-font-size-medium);
+    height: var(--flow-ui-input-height-medium);
+  }
+
+  .input--medium .input__control {
+    height: calc(var(--flow-ui-input-height-medium) - var(--flow-ui-input-border-width) * 2);
+    padding: 0 var(--flow-ui-input-spacing-medium);
+  }
+
+  .input--medium .input__clear,
+  .input--medium .input__password-toggle {
+    width: calc(1em + var(--flow-ui-input-spacing-medium) * 2);
+  }
+
+  .input--medium .input__prefix::slotted(*) {
+    margin-inline-start: var(--flow-ui-input-spacing-medium);
+  }
+
+  .input--medium .input__suffix::slotted(*) {
+    margin-inline-end: var(--flow-ui-input-spacing-medium);
+  }
+
+  .input--large {
+    border-radius: var(--flow-ui-input-border-radius-large);
+    font-size: var(--flow-ui-input-font-size-large);
+    height: var(--flow-ui-input-height-large);
+  }
+
+  .input--large .input__control {
+    height: calc(var(--flow-ui-input-height-large) - var(--flow-ui-input-border-width) * 2);
+    padding: 0 var(--flow-ui-input-spacing-large);
+  }
+
+  .input--large .input__clear,
+  .input--large .input__password-toggle {
+    width: calc(1em + var(--flow-ui-input-spacing-large) * 2);
+  }
+
+  .input--large .input__prefix::slotted(*) {
+    margin-inline-start: var(--flow-ui-input-spacing-large);
+  }
+
+  .input--large .input__suffix::slotted(*) {
+    margin-inline-end: var(--flow-ui-input-spacing-large);
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  .input--pill.input--small {
+    border-radius: var(--flow-ui-input-height-small);
+  }
+
+  .input--pill.input--medium {
+    border-radius: var(--flow-ui-input-height-medium);
+  }
+
+  .input--pill.input--large {
+    border-radius: var(--flow-ui-input-height-large);
+  }
+
+  /*
+   * Clearable + Password Toggle
+   */
+
+  .input__clear,
+  .input__password-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--flow-ui-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--flow-ui-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .input__clear:hover,
+  .input__password-toggle:hover {
+    color: var(--flow-ui-input-icon-color-hover);
+  }
+
+  .input__clear:focus,
+  .input__password-toggle:focus {
+    outline: none;
+  }
+
+  .input--empty .input__clear {
+    visibility: hidden;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+
+  /* Hide the built-in number spinner */
+  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
+  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+
+  .input--no-spin-buttons input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  .input__stepper-button-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-inline: var(--flow-ui-spacing-x-small);
+  }
+
+  .input__stepper-button::part(base) {
+    padding: 0;
+  }
+`;
+
+export { styles as default };

package/dist/components/map/map.component.mjs

@@ -0,0 +1,196 @@
+import { FlowCoreMap } from '@emuanalytics/flow-rdf-core';
+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 './map.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;
+};
+let mapIdCounter = 0;
+class FlowUiMap extends FlowRdfElement {
+  constructor() {
+    super();
+    this._mapLoading = false;
+    this.baseStyle = "fjord";
+    this.center = [-0.1, 51.5];
+    this.zoom = 9;
+    this.busy = false;
+    this.fixed = false;
+    this.bearingSnap = 7;
+    this._initialized = new Promise((resolve) => {
+      this._resolveInitialized = resolve;
+    });
+  }
+  /**
+   * The underlying core FlowCoreMap instance. Note that this is
+   * `undefined` until the map has been initialized.
+   */
+  get map() {
+    return this._map;
+  }
+  /**
+   * A promise that resolves to a map instance when the map has been initialized.
+   *
+   * This is the safest way to retrieve the underlying core FlowCoreMap instance before
+   * using its API.
+   */
+  get initialized() {
+    return this._initialized;
+  }
+  handleCenterChange() {
+    if (this._map) {
+      this._map.setCenter({
+        lng: this.center[0],
+        lat: this.center[1],
+        bearing: this.bearing,
+        pitch: this.pitch,
+        zoom: this.zoom
+      });
+    }
+  }
+  handleBaseStyleChange() {
+    if (this._map) {
+      this._map.setBaseStyle(this.baseStyle);
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    this.busy = boolean(this.busy, true);
+    this.fixed = boolean(this.fixed, true);
+    await this.updateComplete;
+    this._map = await this.initializeMap();
+    this._resolveInitialized(this._map);
+    this.emit("flow-ui-map-load", { detail: { map: this._map } });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._map) {
+      this._map.destroy();
+      this._map = void 0;
+    }
+  }
+  async initializeMap() {
+    const mapContainer = document.createElement("div");
+    mapContainer.slot = "map";
+    this.appendChild(mapContainer);
+    const map = new FlowCoreMap({
+      id: this.mapId ?? `flow-map-${mapIdCounter++}`,
+      container: mapContainer,
+      baseStyle: this.baseStyle,
+      center: this.center,
+      zoom: this.zoom,
+      bearingSnap: this.bearingSnap
+    });
+    await map.initialized;
+    map.on("loading", (ev) => {
+      this._mapLoading = ev.loading;
+    });
+    return map;
+  }
+  render() {
+    const showBusyIndicator = this.busy || this._mapLoading;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      map: true,
+      "map--fixed": this.fixed
+    })}
+      >
+        <div class="map__container">
+          <slot name="map"></slot>
+        </div>
+
+        <div class="map__overlay">
+          <flow-ui-progress-bar
+            part="busy-indicator"
+            class=${classMap({ "map__busy-indicator": true, "map__busy-indicator--busy": showBusyIndicator })}
+            indeterminate
+          ></flow-ui-progress-bar>
+          <div class="map__control-containers">
+            <div
+              part="control-container control-container--top-left"
+              class="map__control-container map__control-container--top-left"
+            >
+              <slot name="top-left"></slot>
+            </div>
+            <div
+              part="control-container control-container--top-right"
+              class="map__control-container map__control-container--top-right"
+            >
+              <slot name="top-right"></slot>
+            </div>
+            <div
+              part="control-container control-container--bottom-left"
+              class="map__control-container map__control-container--bottom-left"
+            >
+              <slot name="bottom-left"></slot>
+            </div>
+            <div
+              part="control-container control-container--bottom-right"
+              class="map__control-container map__control-container--bottom-right"
+            >
+              <slot name="bottom-right"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiMap.styles = styles;
+__decorateClass([
+  state()
+], FlowUiMap.prototype, "_mapLoading", 2);
+__decorateClass([
+  property({ attribute: "map-id" })
+], FlowUiMap.prototype, "mapId", 2);
+__decorateClass([
+  property({ attribute: "base-style" })
+], FlowUiMap.prototype, "baseStyle", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => value.split(",").map((n) => parseFloat(n)),
+      toAttribute: (value) => value.map((n) => n.toString()).join(",")
+    }
+  })
+], FlowUiMap.prototype, "center", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiMap.prototype, "zoom", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiMap.prototype, "bearing", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiMap.prototype, "pitch", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiMap.prototype, "busy", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiMap.prototype, "fixed", 2);
+__decorateClass([
+  property({ type: Number, attribute: "bearing-snap" })
+], FlowUiMap.prototype, "bearingSnap", 2);
+__decorateClass([
+  watch(["center", "zoom", "bearing", "pitch"])
+], FlowUiMap.prototype, "handleCenterChange", 1);
+__decorateClass([
+  watch(["baseStyle"])
+], FlowUiMap.prototype, "handleBaseStyleChange", 1);
+
+export { FlowUiMap as default };

package/dist/components/map/map.mjs

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

package/dist/components/map/map.styles.mjs

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    min-height: 100px;
+  }
+
+  .map {
+    background-color: var(--flow-ui-map-background-color);
+    position: relative;
+    height: 100%;
+  }
+
+  .map__container {
+    position: absolute;
+    inset: 0;
+  }
+
+  ::slotted(.maplibregl-map) {
+    position: absolute !important;
+    inset: 0;
+  }
+
+  .map--fixed ::slotted(.maplibregl-map) {
+    position: fixed !important;
+  }
+
+  .map__overlay {
+    position: absolute;
+    inset: 0;
+
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .map__control-containers {
+    flex: 1;
+    position: relative;
+  }
+
+  .map__control-container {
+    position: absolute;
+  }
+
+  .map__control-container--top-left {
+    top: var(--flow-ui-spacing-small);
+    left: var(--flow-ui-spacing-small);
+  }
+
+  .map__control-container--top-right {
+    top: var(--flow-ui-spacing-small);
+    right: var(--flow-ui-spacing-small);
+  }
+
+  .map__control-container--bottom-left {
+    bottom: var(--flow-ui-spacing-small);
+    left: var(--flow-ui-spacing-small);
+  }
+
+  .map__control-container--bottom-right {
+    bottom: var(--flow-ui-spacing-small);
+    right: var(--flow-ui-spacing-small);
+  }
+
+  .map__busy-indicator {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    display: none;
+
+    --height: var(--flow-ui-map-busy-track-size);
+    --track-color: var(--flow-ui-map-busy-track-color);
+    --indicator-color: var(--flow-ui-map-busy-indicator-color);
+
+    &::part(base) {
+      border-radius: 0;
+    }
+  }
+
+  .map__busy-indicator--busy {
+    display: unset;
+  }
+`;
+
+export { styles as default };