@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.7

package/dist/components/timer/ticker.mjs

@@ -0,0 +1,78 @@
+import { DateTime } from 'luxon';
+import { floorDateTime } from '../../internal/datetime.mjs';
+
+const TIMER_INTERVAL = 100;
+class Ticker {
+  constructor(tickUnit, tickValue, zone) {
+    this.subscribers = [];
+    this.currentDateTime = DateTime.fromMillis(0);
+    this.nextUpdateAt = DateTime.fromMillis(0);
+    this.tickUnit = tickUnit;
+    this.tickValue = tickValue;
+    this.zone = zone;
+  }
+  subscribe(fn) {
+    this.subscribers.push(fn);
+    return {
+      unsubscribe: () => {
+        this.unsubscribe(fn);
+      }
+    };
+  }
+  unsubscribe(fn) {
+    this.subscribers = this.subscribers.filter((subscriber) => subscriber !== fn);
+  }
+  start() {
+    if (this.timer) {
+      return;
+    }
+    this.stop();
+    this.timer = setInterval(this.tick.bind(this), TIMER_INTERVAL);
+    this.tick(true);
+  }
+  stop() {
+    if (!this.timer) {
+      return;
+    }
+    clearInterval(this.timer);
+    this.timer = void 0;
+  }
+  setZone(zone) {
+    this.zone = zone;
+  }
+  setTick(tickUnit, tickValue) {
+    this.tickUnit = tickUnit;
+    this.tickValue = tickValue;
+  }
+  /**
+   * Tick the clock
+   *
+   * A major-rounded tick is forced when the clock is started to ensure
+   * that the timer control updates its value as soon as 'play' is clicked,
+   * rather than waiting for the next major tick.
+   *
+   * @param forceMajor
+   */
+  tick(forceMajor = false) {
+    const now = DateTime.local({ zone: this.zone }).set({ millisecond: 0 });
+    if (now >= this.nextUpdateAt) {
+      this.nextUpdateAt = floorDateTime(now.plus({ second: 1 }), "second", 1);
+      let minorFlooredNow = floorDateTime(now, "second", 1);
+      const majorFlooredNow = floorDateTime(now, this.tickUnit, this.tickValue);
+      if (forceMajor) {
+        minorFlooredNow = majorFlooredNow;
+      }
+      if (!minorFlooredNow.equals(this.currentDateTime)) {
+        this.currentDateTime = minorFlooredNow;
+        this.notifySubscribers(this.currentDateTime, minorFlooredNow.equals(majorFlooredNow) ? "major" : "minor");
+      }
+    }
+  }
+  notifySubscribers(dateTime, tickType) {
+    if (dateTime.isValid) {
+      this.subscribers.forEach((subscriber) => subscriber(dateTime.toISO(), tickType));
+    }
+  }
+}
+
+export { Ticker };

package/dist/components/timer/timer.component.mjs

@@ -0,0 +1,297 @@
+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 { DateTime } from 'luxon';
+import { boolean } from '../../internal/boolean.mjs';
+import { parseDuration, floorDateTime, ceilDateTime } from '../../internal/datetime.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { isStringFull } from '../../internal/type-checks.mjs';
+import { watch } from '../../internal/watch.mjs';
+import { Ticker } from './ticker.mjs';
+import styles from './timer.styles.mjs';
+import { debounce } from '@emuanalytics/flow-rdf-core/utils';
+
+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;
+};
+const STEP_DEBOUNCE_TIME = 300;
+class FlowUiTimer extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this._displayDateTime = DateTime.now();
+    this.running = false;
+    this.dateFormat = "DD";
+    this.dayFormat = "ccc";
+    this.timeFormat = "TT";
+    this.zoneFormat = "ZZZZ";
+    this.majorStep = "1 minute";
+    this.minorStep = "5 seconds";
+    this.hideZone = false;
+    this.placement = "bottom-start";
+    this.debouncedEmitChange = debounce(
+      () => {
+        this.emit("flow-ui-input");
+        this.emit("flow-ui-change");
+      },
+      STEP_DEBOUNCE_TIME,
+      { leading: true, trailing: true, context: this }
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.hideZone = boolean(this.hideZone, true);
+    this.running = boolean(this.running, true);
+    this.ticker = new Ticker("second", 5, "Europe/London");
+    this.tickerSubscription = this.ticker.subscribe((dateTime, tickType) => {
+      if (tickType === "major") {
+        this.value = dateTime;
+        this.emit("flow-ui-change");
+      } else {
+        this.setDisplayDateTime(dateTime);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.tickerSubscription.unsubscribe();
+  }
+  updateDisplayValue() {
+    this.setDisplayDateTime(this.value);
+  }
+  updateParsedSteps() {
+    this.minorStepDuration = parseDuration(this.minorStep) ?? { second: 5 };
+    this.majorStepDuration = parseDuration(this.majorStep) ?? { minute: 1 };
+  }
+  updateRunning() {
+    if (this.running) {
+      this.ticker.start();
+    } else {
+      this.ticker.stop();
+    }
+  }
+  setDisplayDateTime(dateTime) {
+    const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    this._displayDateTime = DateTime.fromISO(dateTime, { zone, locale });
+  }
+  handleDateTimeKeyDown(event) {
+    if (event.key === "Enter") ;
+    event.stopPropagation();
+  }
+  handleCalendarChange(event) {
+    event.stopPropagation();
+    const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const calendarDateTime = DateTime.fromISO(this.calendar.value, { zone, locale });
+    if (!this._displayDateTime.startOf("day").equals(calendarDateTime.startOf("day"))) {
+      this.dropdown.hide();
+    }
+    this.value = this.calendar.value;
+    this.emit("flow-ui-input");
+    this.emit("flow-ui-change");
+  }
+  handlePlayPauseClicked() {
+    this.running = !this.running;
+  }
+  handleStepClicked(ev, direction) {
+    ev.stopPropagation();
+    this.running = false;
+    let dateTime;
+    const majorStepUnit = Object.keys(this.majorStepDuration)[0];
+    const minorStepUnit = Object.keys(this.minorStepDuration)[0];
+    const majorStepValue = this.majorStepDuration[majorStepUnit];
+    const minorStepValue = this.minorStepDuration[minorStepUnit];
+    switch (direction) {
+      case "fast-back":
+        dateTime = ceilDateTime(
+          this._displayDateTime.minus(this.majorStepDuration),
+          majorStepUnit,
+          majorStepValue
+        );
+        break;
+      case "back":
+        dateTime = ceilDateTime(
+          this._displayDateTime.minus(this.minorStepDuration),
+          minorStepUnit,
+          minorStepValue
+        );
+        break;
+      case "forward":
+        dateTime = floorDateTime(
+          this._displayDateTime.plus(this.minorStepDuration),
+          minorStepUnit,
+          minorStepValue
+        );
+        break;
+      case "fast-forward":
+        dateTime = floorDateTime(
+          this._displayDateTime.plus(this.majorStepDuration),
+          majorStepUnit,
+          majorStepValue
+        );
+        break;
+      default:
+        dateTime = this._displayDateTime;
+    }
+    this.value = dateTime.toISO() ?? "";
+    this.setDisplayDateTime(this.value);
+    this.debouncedEmitChange();
+  }
+  formattedDisplayDateTime(format, uppercase = false) {
+    const formatted = this._displayDateTime.isValid ? this._displayDateTime.toFormat(format) : "--";
+    return uppercase ? formatted.toUpperCase() : formatted;
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      timer: true
+    })}
+      >
+        <flow-ui-dropdown
+          class="timer__dropdown"
+          placement=${this.placement}
+          distance="4"
+          strategy="fixed"
+          flip
+          shift
+          sync="width"
+          auto-size="height"
+          @flow-ui-show=${() => {
+      this.running = false;
+    }}
+        >
+          <div slot="trigger" class="timer__date-time-container" @keydown=${this.handleDateTimeKeyDown}>
+            <flow-ui-icon library="system" name="calendar" tabindex="0"></flow-ui-icon>
+            <div class="timer__date-container">
+              <span class="timer__day">${this.formattedDisplayDateTime(this.dayFormat, true)}</span>
+              <span class="timer__date">${this.formattedDisplayDateTime(this.dateFormat)}</span>
+            </div>
+            <flow-ui-icon library="system" name="clock" tabindex="0"></flow-ui-icon>
+            <div class="timer__time-container">
+              <span class="timer__time">${this.formattedDisplayDateTime(this.timeFormat)}</span>
+
+              ${!this.hideZone ? html`
+                    <flow-ui-tooltip hoist placement="top" content=${this.formattedDisplayDateTime("ZZZZZ")}>
+                      <span class="timer__zone">${this.formattedDisplayDateTime(this.zoneFormat)}</span>
+                    </flow-ui-tooltip>
+                  ` : nothing}
+            </div>
+          </div>
+
+          ${html`
+            <flow-ui-calendar
+              class="timer__calendar"
+              display-mode="datetime"
+              value=${this.value}
+              timezone=${ifDefined(this.timezone)}
+              locale=${ifDefined(this.locale)}
+              @flow-ui-change=${this.handleCalendarChange}
+            ></flow-ui-calendar>
+          `}
+        </flow-ui-dropdown>
+
+        <div class="timer__vcr-controls">
+          <flow-ui-icon-button
+            library="system"
+            name="backward-step"
+            title="Fast rewind"
+            @click=${(ev) => this.handleStepClicked(ev, "fast-back")}
+          ></flow-ui-icon-button>
+          <flow-ui-icon-button
+            library="system"
+            name="backward"
+            title="Rewind"
+            @click=${(ev) => this.handleStepClicked(ev, "back")}
+          ></flow-ui-icon-button>
+          <flow-ui-icon-button
+            library="system"
+            name=${this.running ? "pause" : "play"}
+            title=${this.running ? "pause" : "play"}
+            @click=${this.handlePlayPauseClicked}
+          ></flow-ui-icon-button>
+          <flow-ui-icon-button
+            library="system"
+            name="forward"
+            title="Forward"
+            @click=${(ev) => this.handleStepClicked(ev, "forward")}
+          ></flow-ui-icon-button>
+          <flow-ui-icon-button
+            library="system"
+            name="forward-step"
+            title="Fast Forward"
+            .value=${3}
+            @click=${(ev) => this.handleStepClicked(ev, "fast-forward")}
+          ></flow-ui-icon-button>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiTimer.styles = styles;
+__decorateClass([
+  query(".timer__dropdown")
+], FlowUiTimer.prototype, "dropdown", 2);
+__decorateClass([
+  query(".timer__calendar")
+], FlowUiTimer.prototype, "calendar", 2);
+__decorateClass([
+  state()
+], FlowUiTimer.prototype, "_displayDateTime", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "value", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "timezone", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "locale", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTimer.prototype, "running", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "dateFormat", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "dayFormat", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "timeFormat", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "zoneFormat", 2);
+__decorateClass([
+  property({ attribute: "major-step" })
+], FlowUiTimer.prototype, "majorStep", 2);
+__decorateClass([
+  property({ attribute: "minor-step" })
+], FlowUiTimer.prototype, "minorStep", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-zone" })
+], FlowUiTimer.prototype, "hideZone", 2);
+__decorateClass([
+  property()
+], FlowUiTimer.prototype, "placement", 2);
+__decorateClass([
+  watch(["value", "timezone", "locale"])
+], FlowUiTimer.prototype, "updateDisplayValue", 1);
+__decorateClass([
+  watch(["majorStep", "minorStep"])
+], FlowUiTimer.prototype, "updateParsedSteps", 1);
+__decorateClass([
+  watch("running")
+], FlowUiTimer.prototype, "updateRunning", 1);
+
+export { FlowUiTimer as default };

package/dist/components/timer/timer.mjs

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

package/dist/components/timer/timer.styles.mjs

@@ -0,0 +1,95 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    min-width: fit-content;
+  }
+
+  .timer__dropdown::part(panel) {
+    background-color: var(--flow-ui-color-neutral-0);
+    padding: var(--flow-ui-spacing-2x-small);
+  }
+
+  .timer {
+    /* Balance top spacing with VCR button spacing */
+    padding-top: var(--flow-ui-spacing-x-small);
+    min-width: fit-content;
+    font-family: var(--flow-ui-input-font-family);
+  }
+
+  .timer__dropdown {
+    display: block;
+  }
+
+  .timer__date-time-container {
+    display: grid;
+    grid-template-columns: max-content 1fr max-content max-content;
+
+    align-items: start;
+    line-height: 16px;
+    cursor: pointer;
+  }
+
+  .timer__date-time-container flow-ui-icon {
+    color: var(--flow-ui-color-neutral-600);
+  }
+
+  .timer__date-container {
+    margin-left: var(--flow-ui-spacing-x-small);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .timer__day {
+    font-size: var(--flow-ui-font-size-small);
+    font-weight: var(--flow-ui-font-weight-bold);
+  }
+
+  .timer__date {
+    font-size: var(--flow-ui-font-size-x-small);
+  }
+
+  .timer__time-container {
+    margin-left: var(--flow-ui-spacing-2x-small);
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    min-width: 84px;
+  }
+
+  .timer__time {
+    font-size: var(--flow-ui-font-size-large);
+  }
+
+  .timer__zone {
+    font-size: var(--flow-ui-font-size-2x-small);
+  }
+
+  .timer__vcr-controls {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .timer__vcr-controls flow-ui-icon-button:first-of-type::part(base) {
+    padding-left: 0;
+  }
+
+  .timer__vcr-controls flow-ui-icon-button:last-of-type::part(base) {
+    padding-right: 0;
+  }
+
+  .timer__calendar {
+    width: 100%;
+  }
+
+  .timer__calendar::part(base) {
+    width: 100%;
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,208 @@
+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 { html } from 'lit/static-html.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './tool-button.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 FlowUiToolButton extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix", "icon");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.pill = false;
+    this.outline = false;
+    this.tooltip = "";
+    this.tooltipPlacement = "top";
+    this.tooltipDistance = 8;
+    this.tooltipSkidding = 0;
+    this.iconLibrary = "default";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checked = boolean(this.checked, true);
+    this.disabled = boolean(this.disabled, true);
+    this.pill = boolean(this.pill, true);
+    this.outline = boolean(this.outline, true);
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  renderWithTooltip(content) {
+    return html`
+      <flow-ui-tooltip
+        part="tooltip"
+        class=${classMap({
+      "tool-button__tooltip": true
+    })}
+        hoist
+        placement=${ifDefined(this.tooltipPlacement)}
+        distance=${ifDefined(this.tooltipDistance)}
+        skidding=${ifDefined(this.tooltipSkidding)}
+      >
+        ${content}
+        <slot name="tooltip" slot="content">${this.tooltip}</slot>
+      </flow-ui-tooltip>
+    `;
+  }
+  render() {
+    const hasTooltip = this.tooltip || this.hasSlotController.test("tooltip");
+    const toolButtonTemplate = html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+      button: true,
+      "button--default": true,
+      "button--x-small": this.size === "x-small",
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--outline": this.outline,
+      "button--text": !this.outline,
+      "button--pill": this.pill,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix"),
+      "button--has-icon": this.icon || this.hasSlotController.test("icon"),
+      "button--primary": this.variant === "primary",
+      "button--secondary": this.variant === "secondary",
+      "button--success": this.variant === "success",
+      "button--warning": this.variant === "warning",
+      "button--danger": this.variant === "danger",
+      "button--neutral": this.variant === "neutral"
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          tabindex="0"
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <div part="label-wrapper" class="button__label-wrapper">
+            <slot name="icon" part="icon" class="button__icon">
+              <flow-ui-icon
+                name=${ifDefined(this.icon)}
+                src=${ifDefined(this.iconSrc)}
+                library=${ifDefined(this.iconLibrary)}
+              ></flow-ui-icon>
+            </slot>
+
+            <span part="label" class="button__label"><slot part="label"></slot></span>
+          </div>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+    if (hasTooltip) {
+      return this.renderWithTooltip(toolButtonTemplate);
+    } else {
+      return toolButtonTemplate;
+    }
+  }
+}
+FlowUiToolButton.styles = styles;
+__decorateClass([
+  query(".button")
+], FlowUiToolButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], FlowUiToolButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], FlowUiToolButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], FlowUiToolButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiToolButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButton.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiToolButton.prototype, "outline", 2);
+__decorateClass([
+  property()
+], FlowUiToolButton.prototype, "tooltip", 2);
+__decorateClass([
+  property({ attribute: "tooltip-placement" })
+], FlowUiToolButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  property({ attribute: "tooltip-distance", type: Number })
+], FlowUiToolButton.prototype, "tooltipDistance", 2);
+__decorateClass([
+  property({ attribute: "tooltip-skidding", type: Number })
+], FlowUiToolButton.prototype, "tooltipSkidding", 2);
+__decorateClass([
+  property()
+], FlowUiToolButton.prototype, "icon", 2);
+__decorateClass([
+  property({ attribute: "icon-src" })
+], FlowUiToolButton.prototype, "iconSrc", 2);
+__decorateClass([
+  property({ attribute: "icon-library" })
+], FlowUiToolButton.prototype, "iconLibrary", 2);
+__decorateClass([
+  property()
+], FlowUiToolButton.prototype, "variant", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiToolButton.prototype, "handleDisabledChange", 1);
+
+export { FlowUiToolButton as default };

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

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