shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/form-control.ts

@@ -0,0 +1,203 @@
+import { html, ReactiveController, ReactiveControllerHost, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './formdata-event-polyfill';
+
+export interface FormSubmitControllerOptions {
+  /** A function that returns the form containing the form control. */
+  form: (input: unknown) => HTMLFormElement;
+  /** A function that returns the form control's name, which will be submitted with the form data. */
+  name: (input: unknown) => string;
+  /** A function that returns the form control's current value. */
+  value: (input: unknown) => any;
+  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+  disabled: (input: unknown) => boolean;
+  /**
+   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+   * prevent submission and trigger the browser's constraint violation warning.
+   */
+  reportValidity: (input: unknown) => boolean;
+}
+
+export class FormSubmitController implements ReactiveController {
+  host?: ReactiveControllerHost & Element;
+  form?: HTMLFormElement;
+  options?: FormSubmitControllerOptions;
+
+  constructor(host: ReactiveControllerHost & Element, options?: FormSubmitControllerOptions) {
+    (this.host = host).addController(this);
+    this.options = Object.assign(
+      {
+        form: (input: HTMLInputElement) => input.closest('form'),
+        name: (input: HTMLInputElement) => input.name,
+        value: (input: HTMLInputElement) => input.value,
+        disabled: (input: HTMLInputElement) => input.disabled,
+        reportValidity: (input: HTMLInputElement) => {
+          return typeof input.reportValidity === 'function' ? input.reportValidity() : true;
+        }
+      },
+      options
+    );
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+
+  hostConnected() {
+    this.form = this.options?.form(this.host);
+
+    if (this.form) {
+      this.form.addEventListener('formdata', this.handleFormData);
+      this.form.addEventListener('submit', this.handleFormSubmit);
+    }
+  }
+
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener('formdata', this.handleFormData);
+      this.form.removeEventListener('submit', this.handleFormSubmit);
+      this.form = undefined;
+    }
+  }
+
+  handleFormData(event: FormDataEvent) {
+    const disabled = this.options?.disabled(this.host);
+    const name = this.options?.name(this.host);
+    const value = this.options?.value(this.host);
+
+    if (!disabled && name && value !== undefined) {
+      if (Array.isArray(value)) {
+        value.map(val => event.formData.append(name, val));
+      } else {
+        event.formData.append(name, value);
+      }
+    }
+  }
+
+  handleFormSubmit(event: Event) {
+    const form = this.form;
+    const disabled = this.options?.disabled(this.host);
+    const reportValidity = this.options?.reportValidity;
+
+    if (form && !form.noValidate && !disabled && reportValidity && !reportValidity(this.host)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  submit() {
+    // Calling form.submit() seems to bypass the submit event and constraint validation. Instead, we can inject a
+    // native submit button into the form, click it, then remove it to simulate a standard form submission.
+    const button = document.createElement('button');
+    if (this.form) {
+      button.type = 'submit';
+      button.style.position = 'absolute';
+      button.style.width = '0';
+      button.style.height = '0';
+      button.style.clip = 'rect(0 0 0 0)';
+      button.style.clipPath = 'inset(50%)';
+      button.style.overflow = 'hidden';
+      button.style.whiteSpace = 'nowrap';
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+}
+
+export const renderFormControl = (
+  props: {
+    /** The input id, used to map the input to the label */
+    inputId: string;
+
+    /** The size of the form control */
+    size: 'small' | 'medium' | 'large';
+
+    /** The label id, used to map the label to the input */
+    labelId?: string;
+
+    /** The label text (if the label slot isn't used) */
+    label?: string;
+
+    /** Whether or not a label slot has been provided. */
+    hasLabelSlot?: boolean;
+
+    /** The help text id, used to map the input to the help text */
+    helpTextId?: string;
+
+    /** The help text (if the help-text slot isn't used) */
+    helpText?: string;
+
+    /** Whether or not a help text slot has been provided. */
+    hasHelpTextSlot?: boolean;
+
+    /** A function that gets called when the label is clicked. */
+    onLabelClick?: (event: MouseEvent) => void;
+  },
+  input: TemplateResult
+) => {
+  const hasLabel = props.label ? true : !!props.hasLabelSlot;
+  const hasHelpText = props.helpText ? true : !!props.hasHelpTextSlot;
+
+  return html`
+    <div
+      part="form-control"
+      class=${classMap({
+        'form-control': true,
+        'form-control--small': props.size === 'small',
+        'form-control--medium': props.size === 'medium',
+        'form-control--large': props.size === 'large',
+        'form-control--has-label': hasLabel,
+        'form-control--has-help-text': hasHelpText
+      })}
+    >
+      <label
+        part="label"
+        id=${ifDefined(props.labelId)}
+        class="form-control__label"
+        for=${props.inputId}
+        aria-hidden=${hasLabel ? 'false' : 'true'}
+        @click=${(event: MouseEvent) => (props.onLabelClick ? props.onLabelClick(event) : null)}
+      >
+        <slot name="label">${props.label}</slot>
+      </label>
+
+      <div class="form-control__input">${html`${input}`}</div>
+
+      <div
+        part="help-text"
+        id=${ifDefined(props.helpTextId)}
+        class="form-control__help-text"
+        aria-hidden=${hasHelpText ? 'false' : 'true'}
+      >
+        <slot name="help-text">${props.helpText}</slot>
+      </div>
+    </div>
+  `;
+};
+
+export function getLabelledBy(props: {
+  /** The label id, used to map the label to the input */
+  labelId: string;
+
+  /** The label text (if the label slot isn't used) */
+  label: string;
+
+  /** Whether or not a label slot has been provided. */
+  hasLabelSlot: boolean;
+
+  /** The help text id, used to map the input to the help text */
+  helpTextId: string;
+
+  /** The help text (if the help-text slot isn't used) */
+  helpText: string;
+
+  /** Whether or not a help text slot has been provided. */
+  hasHelpTextSlot: boolean;
+}) {
+  const labelledBy = [
+    props.label || props.hasLabelSlot ? props.labelId : '',
+    props.helpText || props.hasHelpTextSlot ? props.helpTextId : ''
+  ].filter(val => val);
+
+  return labelledBy.join(' ') || undefined;
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/formdata-event-polyfill.ts

@@ -0,0 +1,93 @@
+//
+// Polyfills the formdata event in unsupportive browsers. This is a partial polyfill to support appending custom element
+// form data on submit. The formdata event landed in Safari until 15.1, which is slighly too new to rely on. All other
+// browsers have great support.
+//
+// https://caniuse.com/mdn-api_htmlformelement_formdata_event
+//
+// Original code derived from: https://gist.github.com/WickyNilliams/eb6a44075356ee504dd9491c5a3ab0be
+//
+// Copyright (c) 2021 Nick Williams (https://wicky.nillia.ms)
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+class FormDataEventPolyfill extends Event {
+  formData: FormData;
+
+  constructor(formData: FormData) {
+    super('formdata');
+    this.formData = formData;
+  }
+}
+
+class FormDataPolyfill extends FormData {
+  private form: HTMLFormElement;
+
+  constructor(form: HTMLFormElement) {
+    super(form);
+    this.form = form;
+    form.dispatchEvent(new FormDataEventPolyfill(this));
+  }
+
+  append(name: string, value: any) {
+    let input = this.form.elements[name as any] as HTMLInputElement;
+
+    if (!input) {
+      input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = name;
+      this.form.appendChild(input);
+    }
+
+    if (this.has(name)) {
+      const entries = this.getAll(name);
+      const index = entries.indexOf(input.value);
+
+      if (index !== -1) {
+        entries.splice(index, 1);
+      }
+
+      entries.push(value);
+      this.set(name, entries as any);
+    } else {
+      super.append(name, value);
+    }
+
+    input.value = value;
+  }
+}
+
+function supportsFormDataEvent() {
+  const form = document.createElement('form');
+  let isSupported = false;
+
+  document.body.append(form);
+
+  form.addEventListener('submit', event => {
+    new FormData(event.target as HTMLFormElement);
+    event.preventDefault();
+  });
+
+  form.addEventListener('formdata', () => (isSupported = true));
+  form.dispatchEvent(new Event('submit', { cancelable: true }));
+  form.remove();
+
+  return isSupported;
+}
+
+function polyfillFormData() {
+  if (!window.FormData || supportsFormDataEvent()) {
+    return;
+  }
+
+  window.FormData = FormDataPolyfill;
+  window.addEventListener('submit', event => {
+    if (!event.defaultPrevented) {
+      new FormData(event.target as HTMLFormElement);
+    }
+  });
+}
+
+polyfillFormData();

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/math.ts

@@ -0,0 +1,8 @@
+//
+// Ensures a number stays within a minimum and maximum value
+//
+export function clamp(value: number, min: number, max: number) {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/modal.ts

@@ -0,0 +1,53 @@
+import { getTabbableBoundary } from '../internal/tabbable';
+
+let activeModals: HTMLElement[] = [];
+
+export default class Modal {
+  element: HTMLElement;
+  tabDirection: 'forward' | 'backward' = 'forward';
+
+  constructor(element: HTMLElement) {
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  deactivate() {
+    activeModals = activeModals.filter(modal => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+
+  handleFocusIn(event: Event) {
+    const path = event.composedPath();
+
+    // Trap focus so it doesn't go out of the modal's boundary
+    if (this.isActive() && !path.includes(this.element)) {
+      const { start, end } = getTabbableBoundary(this.element);
+      const target = this.tabDirection === 'forward' ? start : end;
+
+      if (typeof target?.focus === 'function') {
+        target.focus({ preventScroll: true });
+      }
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    // Quick hack to determine tab direction
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.tabDirection = 'backward';
+      setTimeout(() => (this.tabDirection = 'forward'));
+    }
+  }
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/number.ts

@@ -0,0 +1,32 @@
+//
+// Formats a number to a human-readable string of bytes or bits such as "100 MB"
+//
+export function formatBytes(bytes: number, options: FormatBytesOptions) {
+  options = Object.assign(
+    {
+      unit: 'bytes',
+      formatter: (number: number) => number.toLocaleString()
+    },
+    options
+  );
+
+  const byteUnits = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const bitUnits = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit']; // cspell:disable-line
+  const units = options.unit === 'bytes' ? byteUnits : bitUnits;
+  const isNegative = bytes < 0;
+
+  bytes = Math.abs(bytes);
+  if (bytes === 0) return '0 B';
+
+  const i = Math.min(Math.floor(Math.log10(bytes) / 3), units.length - 1);
+  const num = Number((bytes / Math.pow(1000, i)).toPrecision(3));
+  const numString = options.formatter ? options.formatter(num) : num;
+  const prefix = isNegative ? '-' : '';
+
+  return `${prefix}${numString} ${units[i]}`;
+}
+
+interface FormatBytesOptions {
+  unit?: 'bytes' | 'bits';
+  formatter?: (number: number) => string;
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/offset.ts

@@ -0,0 +1,13 @@
+//
+// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+// parent doesn't have to be positioned relative or absolute.
+//
+// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent
+// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+//
+export function getOffset(element: HTMLElement, parent: HTMLElement) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+  };
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/scroll.ts

@@ -0,0 +1,57 @@
+import { getOffset } from './offset';
+
+const locks = new Set();
+
+//
+// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+// without premature unlocking.
+//
+export function lockBodyScrolling(lockingEl: HTMLElement) {
+  locks.add(lockingEl);
+  document.body.classList.add('sl-scroll-lock');
+}
+
+//
+// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+//
+export function unlockBodyScrolling(lockingEl: HTMLElement) {
+  locks.delete(lockingEl);
+
+  if (locks.size === 0) {
+    document.body.classList.remove('sl-scroll-lock');
+  }
+}
+
+//
+// Scrolls an element into view of its container. If the element is already in view, nothing will happen.
+//
+export function scrollIntoView(
+  element: HTMLElement,
+  container: HTMLElement,
+  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',
+  behavior: 'smooth' | 'auto' = 'smooth'
+) {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+
+  if (direction === 'horizontal' || direction === 'both') {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+    }
+  }
+
+  if (direction === 'vertical' || direction === 'both') {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/slot.ts

@@ -0,0 +1,91 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export class HasSlotController implements ReactiveController {
+  host: ReactiveControllerHost & Element;
+  slotNames: string[] = [];
+
+  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+
+  private hasDefaultSlot() {
+    return [...this.host.childNodes].some(node => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {
+        return true;
+      }
+
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        if (!el.hasAttribute('slot')) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+  }
+
+  private hasNamedSlot(name: string) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+
+  test(slotName: string) {
+    return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+
+  hostConnected() {
+    this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);
+  }
+
+  hostDisconnected() {
+    this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
+  }
+
+  handleSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+
+    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames?.includes(slot.name))) {
+      this.host.requestUpdate();
+    }
+  }
+}
+
+//
+// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+//
+export function getInnerHTML(slot: HTMLSlotElement): string {
+  const nodes = slot.assignedNodes({ flatten: true });
+  let html = '';
+
+  [...nodes].map(node => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      html += (node as HTMLElement).outerHTML;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      html += node.textContent;
+    }
+  });
+
+  return html;
+}
+
+//
+// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+// string. This is useful because we can't use slot.textContent as an alternative.
+//
+export function getTextContent(slot: HTMLSlotElement): string {
+  const nodes = slot ? slot.assignedNodes({ flatten: true }) : [];
+  let text = '';
+
+  [...nodes].map(node => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent;
+    }
+  });
+
+  return text;
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/string.ts

@@ -0,0 +1,3 @@
+export function uppercaseFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/support.ts

@@ -0,0 +1,15 @@
+//
+// Determines if the browser supports focus({ preventScroll })
+//
+export function isPreventScrollSupported() {
+  let supported = false;
+
+  document.createElement('div').focus({
+    get preventScroll() {
+      supported = true;
+      return false;
+    }
+  });
+
+  return supported;
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/tabbable.ts

@@ -0,0 +1,81 @@
+// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
+function isTabbable(el: HTMLElement) {
+  const tag = el.tagName.toLowerCase();
+
+  // Elements with a -1 tab index are not tabbable
+  if (el.getAttribute('tabindex') === '-1') {
+    return false;
+  }
+
+  // Elements with a disabled attribute are not tabbable
+  if (el.hasAttribute('disabled')) {
+    return false;
+  }
+
+  // Elements with aria-disabled are not tabbable
+  if (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') !== 'false') {
+    return false;
+  }
+
+  // Radios without a checked attribute are not tabbable
+  if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {
+    return false;
+  }
+
+  // Elements that are hidden have no offsetParent and are not tabbable
+  if (!el.offsetParent) {
+    return false;
+  }
+
+  // Elements without visibility are not tabbable
+  if (window.getComputedStyle(el).visibility === 'hidden') {
+    return false;
+  }
+
+  // Audio and video elements with the controls attribute are tabbable
+  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+    return true;
+  }
+
+  // Elements with a tabindex other than -1 are tabbable
+  if (el.hasAttribute('tabindex')) {
+    return true;
+  }
+
+  // Elements with a contenteditable attribute are tabbable
+  if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {
+    return true;
+  }
+
+  // At this point, the following elements are considered tabbable
+  return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary'].includes(tag);
+}
+
+//
+// Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+// element because it short-circuits after finding the first and last ones.
+//
+export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
+  const allElements: HTMLElement[] = [];
+
+  function walk(el: HTMLElement | ShadowRoot) {
+    if (el instanceof HTMLElement) {
+      allElements.push(el);
+
+      if (el.shadowRoot && el.shadowRoot.mode === 'open') {
+        walk(el.shadowRoot);
+      }
+    }
+
+    [...el.querySelectorAll('*')].map((e: HTMLElement) => walk(e));
+  }
+
+  // Collect all elements including the root
+  walk(root);
+
+  // Find the first and last tabbable elements
+  const start = allElements.find(el => isTabbable(el)) || null;
+  const end = allElements.reverse().find(el => isTabbable(el)) || null;
+
+  return { start, end };
+}