@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

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

@@ -0,0 +1,108 @@
+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 FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './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 FlowUiButtonGroup extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.vertical = boolean(this.vertical, true);
+  }
+  async handleVerticalChange() {
+    this.handleSlotChange();
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button?.classList.add("flow-ui-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button?.classList.remove("flow-ui-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button?.classList.add("flow-ui-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button?.classList.remove("flow-ui-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("flow-ui-button-group__button");
+        button.classList.toggle("flow-ui-button-group__button--vertical", this.vertical);
+        button.classList.toggle("flow-ui-button-group__button--first", index === 0);
+        button.classList.toggle("flow-ui-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("flow-ui-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle(
+          "flow-ui-button-group__button--tool",
+          button.tagName.toLowerCase() === "flow-ui-tool-button"
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+      "button-group": true,
+      "button-group--vertical": this.vertical
+    })}
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+        @slotchange=${this.handleSlotChange}
+      ></slot>
+    `;
+  }
+}
+FlowUiButtonGroup.styles = styles;
+__decorateClass([
+  query("slot")
+], FlowUiButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], FlowUiButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], FlowUiButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiButtonGroup.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical", { waitUntilFirstUpdate: true })
+], FlowUiButtonGroup.prototype, "handleVerticalChange", 1);
+function findButton(el) {
+  const selector = "flow-ui-button, flow-ui-tool-button";
+  return el.closest(selector) ?? el.querySelector(selector);
+}
+
+export { FlowUiButtonGroup as default };

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

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

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

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+  }
+`;
+
+export { styles as default };

package/dist/components/calendar/calendar.component.mjs

@@ -0,0 +1,320 @@
+import { html, nothing } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { DateTime, Info } from 'luxon';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { isStringFull, isDefined } from '../../internal/type-checks.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './calendar.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 FlowUiCalendar extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.displayMode = "date";
+    this.size = "medium";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleValueChange();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  handleValueChange() {
+    this._selectedDate = this.makeDate(this.value)?.set({ millisecond: 0 });
+    if (this._selectedDate) {
+      if (this.displayMode === "date") {
+        this._selectedDate = this._selectedDate.startOf("day");
+      }
+      this._displayDate = this._selectedDate.startOf("month");
+    } else {
+      this._displayDate = this.makeDate().startOf("month");
+    }
+  }
+  handleTimezoneChange() {
+    this.handleValueChange();
+    this.updateValue();
+  }
+  dateClicked(val) {
+    const date = this.makeDate(val);
+    if (this._selectedDate) {
+      this._selectedDate = date.set({
+        hour: this._selectedDate.hour,
+        minute: this._selectedDate.minute,
+        second: this._selectedDate.second
+      });
+    } else {
+      this._selectedDate = date;
+    }
+    this.updateValue();
+  }
+  stepDisplayDate(duration) {
+    this._displayDate = this._displayDate.plus(duration);
+  }
+  /**
+   * Generate a list of years for the year select dropdown
+   */
+  yearOptionsForDate(date) {
+    const years = [];
+    for (let y = date.year + 1; y >= date.year - 6; y--) {
+      years.push(y);
+    }
+    return years;
+  }
+  makeDate(d) {
+    try {
+      let date;
+      const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+      const locale = isStringFull(this.locale) ? this.locale : void 0;
+      if (isStringFull(d)) {
+        date = DateTime.fromISO(d, { zone, locale });
+      } else {
+        date = DateTime.local({ zone, locale });
+      }
+      return date.isValid ? date : void 0;
+    } catch (e) {
+      console.error(`Invalid date in makeDate: ${d} (${this.timezone})`);
+      return void 0;
+    }
+  }
+  updateValue(emitEvents = true) {
+    const iso = this._selectedDate?.toISO();
+    this.value = isDefined(iso) ? iso : "";
+    if (emitEvents) {
+      this.emit("flow-ui-input");
+      this.emit("flow-ui-change");
+    }
+  }
+  handleHeaderSelectChange(ev) {
+    ev.stopPropagation();
+    this._displayDate = this.makeDate().set({
+      year: +this._yearSelect.value,
+      month: +this._monthSelect.value
+    }).startOf("month");
+  }
+  handleTimeChange(ev) {
+    ev.stopPropagation();
+    if (!this._selectedDate) {
+      this._selectedDate = this.makeDate().startOf("day");
+    }
+    const target = ev.target;
+    const unit = target.getAttribute("name");
+    this._selectedDate = this._selectedDate.set({ [unit]: +target.value });
+    this.updateValue();
+  }
+  calendarHeaderTemplate() {
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const monthsShort = Info.months("short", { locale });
+    return html`
+      <div class="calendar__header">
+        <flow-ui-icon-button
+          name="chevron-left"
+          library="system"
+          @click=${() => this.stepDisplayDate({ month: -1 })}
+        ></flow-ui-icon-button>
+        <flow-ui-select
+          class="calendar__month-select calendar__header-select"
+          value=${this._displayDate.month}
+          @flow-ui-change=${this.handleHeaderSelectChange}
+        >
+          ${monthsShort.map(
+      (month, index) => html`
+              <flow-ui-option value=${index + 1}>${month}</flow-ui-option>
+            `
+    )}
+        </flow-ui-select>
+        <flow-ui-select
+          class="calendar__year-select calendar__header-select"
+          value=${this._displayDate.year}
+          @flow-ui-change=${this.handleHeaderSelectChange}
+        >
+          ${this.yearOptionsForDate(DateTime.now()).map(
+      (year) => html`
+              <flow-ui-option value=${year}>${year}</flow-ui-option>
+            `
+    )}
+        </flow-ui-select>
+        <flow-ui-icon-button
+          name="chevron-right"
+          library="system"
+          @click=${() => this.stepDisplayDate({ month: 1 })}
+        ></flow-ui-icon-button>
+      </div>
+    `;
+  }
+  dayOfWeekGridTemplate() {
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const days = Info.weekdays("narrow", { locale });
+    return html`
+      ${days.map(
+      (day) => html`
+          <span class="calendar__header-day">${day}</span>
+        `
+    )}
+    `;
+  }
+  dayGridTemplate() {
+    const today = this.makeDate();
+    const startOfMonth = this._displayDate.startOf("month");
+    const endOfMonth = this._displayDate.endOf("month");
+    const calendarStart = startOfMonth.startOf("week");
+    const calendarEnd = endOfMonth.endOf("week");
+    const daysInMonth = this._displayDate.daysInMonth;
+    const days = [];
+    for (let date = calendarStart; date < startOfMonth; date = date.plus({ day: 1 })) {
+      days.push({
+        day: date.toFormat("d"),
+        date: date.toISO(),
+        isFiller: true,
+        today: date === today,
+        selected: !!this._selectedDate && date.startOf("day").equals(this._selectedDate.startOf("day"))
+      });
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = startOfMonth.plus({ days: day - 1 }).startOf("day");
+      days.push({
+        day: date.toFormat("d"),
+        date: date.toISO(),
+        isFiller: false,
+        today: date.startOf("day").equals(today.startOf("day")),
+        selected: !!this._selectedDate && date.startOf("day").equals(this._selectedDate.startOf("day"))
+      });
+    }
+    for (let date = endOfMonth.plus({ day: 1 }).startOf("day"); date < calendarEnd; date = date.plus({ day: 1 })) {
+      days.push({
+        day: date.toFormat("d"),
+        date: date.toISO(),
+        isFiller: true,
+        today: date.startOf("day").equals(today.startOf("day")),
+        selected: !!this._selectedDate && date.startOf("day").equals(this._selectedDate.startOf("day"))
+      });
+    }
+    return html`
+      ${days.map(
+      (day) => html`
+          <button
+            class=${classMap({
+        calendar__day: true,
+        "calendar__day--filler": day.isFiller,
+        "calendar__day--today": day.today,
+        "calendar__day--selected": day.selected
+      })}
+            value=${day.date}
+            @click=${() => this.dateClicked(day.date)}
+          >
+            ${day.day}
+          </button>
+        `
+    )}
+    `;
+  }
+  timeTemplate() {
+    return html`
+      <div class="calendar__time-container">
+        <flow-ui-input
+          type="number"
+          size=${this.size === "small" ? "small" : "medium"}
+          name="hour"
+          min="0"
+          max="23"
+          format="02"
+          class="calendar__time-input"
+          value=${this._selectedDate ? this._selectedDate.hour : 0}
+          @flow-ui-change=${this.handleTimeChange}
+        ></flow-ui-input>
+        <span class="calendar__time-separator">:</span>
+        <flow-ui-input
+          type="number"
+          size=${this.size === "small" ? "small" : "medium"}
+          name="minute"
+          min="0"
+          max="59"
+          format="02"
+          class="calendar__time-input"
+          value=${this._selectedDate ? this._selectedDate.minute : 0}
+          @flow-ui-change=${this.handleTimeChange}
+        ></flow-ui-input>
+        <span class="calendar__time-separator">:</span>
+        <flow-ui-input
+          type="number"
+          size=${this.size === "small" ? "small" : "medium"}
+          name="second"
+          min="0"
+          max="59"
+          format="02"
+          class="calendar__time-input"
+          value=${this._selectedDate ? this._selectedDate.second : 0}
+          @flow-ui-change=${this.handleTimeChange}
+        ></flow-ui-input>
+      </div>
+    `;
+  }
+  render() {
+    const showCalendar = this.displayMode === "date" || this.displayMode === "datetime";
+    const showTime = this.displayMode === "time" || this.displayMode === "datetime";
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      calendar: true,
+      "calendar--small": this.size === "small",
+      "calendar--medium": this.size === "medium",
+      "calendar--large": this.size === "large"
+    })}
+      >
+        ${showCalendar ? html`
+              ${this.calendarHeaderTemplate()}
+              <div class="calendar__grid">${this.dayOfWeekGridTemplate()} ${this.dayGridTemplate()}</div>
+            ` : nothing}
+        ${showTime ? this.timeTemplate() : nothing}
+      </div>
+    `;
+  }
+}
+FlowUiCalendar.styles = styles;
+__decorateClass([
+  query(".calendar__month-select")
+], FlowUiCalendar.prototype, "_monthSelect", 2);
+__decorateClass([
+  query(".calendar__year-select")
+], FlowUiCalendar.prototype, "_yearSelect", 2);
+__decorateClass([
+  state()
+], FlowUiCalendar.prototype, "_displayDate", 2);
+__decorateClass([
+  state()
+], FlowUiCalendar.prototype, "_selectedDate", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiCalendar.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: "display-mode" })
+], FlowUiCalendar.prototype, "displayMode", 2);
+__decorateClass([
+  property()
+], FlowUiCalendar.prototype, "timezone", 2);
+__decorateClass([
+  property()
+], FlowUiCalendar.prototype, "locale", 2);
+__decorateClass([
+  property()
+], FlowUiCalendar.prototype, "size", 2);
+__decorateClass([
+  watch("value")
+], FlowUiCalendar.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch(["timezone"])
+], FlowUiCalendar.prototype, "handleTimezoneChange", 1);
+
+export { FlowUiCalendar as default };

package/dist/components/calendar/calendar.mjs

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

package/dist/components/calendar/calendar.styles.mjs

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+    --width: 300px;
+    --font-size: var(--flow-ui-font-size-medium);
+    --day-font-size: var(--flow-ui-font-size-small);
+  }
+
+  .calendar {
+    width: var(--width);
+    font-size: var(--font-size);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--flow-ui-spacing-x-small);
+    user-select: none;
+  }
+
+  .calendar--small {
+    --width: 270px;
+    --font-size: var(--flow-ui-font-size-small);
+    --day-font-size: var(--flow-ui-font-size-x-small);
+  }
+
+  .calendar--medium {
+    --width: 300px;
+    --font-size: var(--flow-ui-font-size-medium);
+    --day-font-size: var(--flow-ui-font-size-small);
+  }
+
+  .calendar--large {
+    --width: 350px;
+    --font-size: var(--flow-ui-font-size-large);
+    --day-font-size: var(--flow-ui-font-size-medium);
+  }
+
+  .calendar__header {
+    display: flex;
+    align-items: center;
+  }
+
+  .calendar__header-month {
+    flex: 1;
+    text-align: center;
+  }
+
+  .calendar__grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--flow-ui-spacing-2x-small);
+  }
+
+  .calendar__header-day {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: var(--flow-ui-font-weight-bold);
+  }
+
+  .calendar__day {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    border-radius: var(--flow-ui-border-radius-circle);
+    background-color: inherit;
+    aspect-ratio: 1 / 1;
+    cursor: pointer;
+    font-size: var(--day-font-size);
+  }
+
+  .calendar__day:hover:not(.calendar__day--selected) {
+    background-color: var(--flow-ui-color-neutral-100);
+  }
+
+  .calendar__day--filler {
+    color: var(--flow-ui-color-neutral-400);
+  }
+
+  .calendar__day--today {
+    border: 1px solid var(--flow-ui-color-neutral-300);
+  }
+
+  .calendar__day--selected {
+    color: var(--flow-ui-color-neutral-0);
+    background-color: var(--flow-ui-color-primary-500);
+  }
+
+  .calendar__header-select::part(combobox) {
+    background-color: inherit;
+    border: none;
+    min-height: auto;
+    gap: var(--flow-ui-spacing-x-small);
+  }
+
+  .calendar__header-select::part(expand-icon) {
+    margin: 0;
+  }
+
+  .calendar__header-select::part(listbox) {
+    max-height: min(var(--auto-size-available-height), 10rem);
+  }
+
+  .calendar__time-container {
+    display: flex;
+    gap: var(--flow-ui-spacing-2x-small);
+    align-items: center;
+  }
+
+  .calendar__time-input {
+    flex: 1;
+    /* Allow the input to shrink to accommodate narrow calendars in sidebars */
+    min-width: 0;
+    --flow-ui-input-spacing-medium: var(--flow-ui-spacing-small);
+  }
+
+  .calendar__time-input::part(input) {
+    /* Remove padding between spin controls to accommodate narrow calendars */
+    padding-right: 0;
+  }
+
+  .calendar__time-separator {
+    font-weight: var(--flow-ui-font-weight-bold);
+  }
+
+  .calendar__utc-marker {
+    font-size: var(--flow-ui-font-size-2x-small);
+    font-weight: var(--flow-ui-font-weight-bold);
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    margin-left: calc(var(--flow-ui-spacing-2x-small) * -1);
+  }
+
+  .calendar--small .calendar__utc-marker {
+    font-size: var(--flow-ui-font-size-3x-small);
+  }
+`;
+
+export { styles as default };

package/dist/components/card/card.component.mjs

@@ -0,0 +1,33 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import styles from './card.styles.mjs';
+
+class FlowUiCard extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      card: true,
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header")
+    })}
+      >
+        <slot name="image" part="image" class="card__image"></slot>
+        <slot name="header" part="header" class="card__header"></slot>
+        <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" class="card__footer"></slot>
+      </div>
+    `;
+  }
+}
+FlowUiCard.styles = styles;
+
+export { FlowUiCard as default };

package/dist/components/card/card.mjs

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