shoelace-rails-ui 0.1.0 → 0.1.1

data/remote-src/2.0.0.beta64/shoelace-next/src/components/dropdown/dropdown.ts

@@ -1,459 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { Instance as PopperInstance, createPopper } from '@popperjs/core/dist/esm';
-import { animateTo, stopAnimations } from '../../internal/animate';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import { waitForEvent } from '../../internal/event';
-import { scrollIntoView } from '../../internal/scroll';
-import { getTabbableBoundary } from '../../internal/tabbable';
-import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry';
-import type SlMenu from '../menu/menu';
-import type SlMenuItem from '../menu-item/menu-item';
-import styles from './dropdown.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The dropdown's content.
- * @slot trigger - The dropdown's trigger, usually a `<sl-button>` element.
- *
- * @event sl-show - Emitted when the dropdown opens.
- * @event sl-after-show - Emitted after the dropdown opens and all animations are complete.
- * @event sl-hide - Emitted when the dropdown closes.
- * @event sl-after-hide - Emitted after the dropdown closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart trigger - The container that wraps the trigger.
- * @csspart panel - The panel that gets shown when the dropdown is open.
- *
- * @animation dropdown.show - The animation to use when showing the dropdown.
- * @animation dropdown.hide - The animation to use when hiding the dropdown.
- */
-@customElement('sl-dropdown')
-export default class SlDropdown extends LitElement {
-  static styles = styles;
-
-  @query('.dropdown__trigger') trigger: HTMLElement;
-  @query('.dropdown__panel') panel: HTMLElement;
-  @query('.dropdown__positioner') positioner: HTMLElement;
-
-  private popover: PopperInstance;
-
-  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /**
-   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-   * inside of the viewport.
-   */
-  @property() placement:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end' = 'bottom-start';
-
-  /** Disables the dropdown so the panel will not open. */
-  @property({ type: Boolean }) disabled = false;
-
-  /**
-   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
-   * controls that allow multiple selections.
-   */
-  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;
-
-  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
-  @property({ attribute: false }) containingElement: HTMLElement;
-
-  /** The distance in pixels from which to offset the panel away from its trigger. */
-  @property({ type: Number }) distance = 0;
-
-  /** The distance in pixels from which to offset the panel along its trigger. */
-  @property({ type: Number }) skidding = 0;
-
-  /**
-   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-   * `overflow: auto|scroll`.
-   */
-  @property({ type: Boolean }) hoist = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-
-    if (!this.containingElement) {
-      this.containingElement = this;
-    }
-
-    // Create the popover after render
-    this.updateComplete.then(() => {
-      this.popover = createPopper(this.trigger, this.positioner, {
-        placement: this.placement,
-        strategy: this.hoist ? 'fixed' : 'absolute',
-        modifiers: [
-          {
-            name: 'flip',
-            options: {
-              boundary: 'viewport'
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [this.skidding, this.distance]
-            }
-          }
-        ]
-      });
-    });
-  }
-
-  firstUpdated() {
-    this.panel.hidden = !this.open;
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.hide();
-
-    if (this.popover) {
-      this.popover.destroy();
-    }
-  }
-
-  focusOnTrigger() {
-    const slot = this.trigger.querySelector('slot')!;
-    const trigger = slot.assignedElements({ flatten: true })[0] as any;
-    if (trigger && typeof trigger.focus === 'function') {
-      trigger.focus();
-    }
-  }
-
-  getMenu() {
-    const slot = this.panel.querySelector('slot')!;
-    return slot.assignedElements({ flatten: true }).filter(el => el.tagName.toLowerCase() === 'sl-menu')[0] as SlMenu;
-  }
-
-  handleDocumentKeyDown(event: KeyboardEvent) {
-    // Close when escape is pressed
-    if (event.key === 'Escape') {
-      this.hide();
-      this.focusOnTrigger();
-      return;
-    }
-
-    // Handle tabbing
-    if (event.key === 'Tab') {
-      // Tabbing within an open menu should close the dropdown and refocus the trigger
-      if (this.open && document.activeElement?.tagName.toLowerCase() === 'sl-menu-item') {
-        event.preventDefault();
-        this.hide();
-        this.focusOnTrigger();
-        return;
-      }
-
-      // Tabbing outside of the containing element closes the panel
-      //
-      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
-      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
-      setTimeout(() => {
-        const activeElement =
-          this.containingElement.getRootNode() instanceof ShadowRoot
-            ? document.activeElement?.shadowRoot?.activeElement
-            : document.activeElement;
-
-        if (activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
-          this.hide();
-          return;
-        }
-      });
-    }
-  }
-
-  handleDocumentMouseDown(event: MouseEvent) {
-    // Close when clicking outside of the containing element
-    const path = event.composedPath() as Array<EventTarget>;
-    if (!path.includes(this.containingElement)) {
-      this.hide();
-      return;
-    }
-  }
-
-  handleMenuItemActivate(event: CustomEvent) {
-    const item = event.target as SlMenuItem;
-    scrollIntoView(item, this.panel);
-  }
-
-  handlePanelSelect(event: CustomEvent) {
-    const target = event.target as HTMLElement;
-
-    // Hide the dropdown when a menu item is selected
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'sl-menu') {
-      this.hide();
-      this.focusOnTrigger();
-    }
-  }
-
-  @watch('distance')
-  @watch('hoist')
-  @watch('placement')
-  @watch('skidding')
-  handlePopoverOptionsChange() {
-    if (this.popover) {
-      this.popover.setOptions({
-        placement: this.placement,
-        strategy: this.hoist ? 'fixed' : 'absolute',
-        modifiers: [
-          {
-            name: 'flip',
-            options: {
-              boundary: 'viewport'
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [this.skidding, this.distance]
-            }
-          }
-        ]
-      });
-    }
-  }
-
-  handleTriggerClick() {
-    this.open ? this.hide() : this.show();
-  }
-
-  handleTriggerKeyDown(event: KeyboardEvent) {
-    const menu = this.getMenu();
-    const menuItems = menu ? ([...menu.querySelectorAll('sl-menu-item')] as SlMenuItem[]) : [];
-    const firstMenuItem = menuItems[0];
-    const lastMenuItem = menuItems[menuItems.length - 1];
-
-    // Close when escape or tab is pressed
-    if (event.key === 'Escape') {
-      this.focusOnTrigger();
-      this.hide();
-      return;
-    }
-
-    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
-    // key again to hide the menu in case they don't want to make a selection.
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      this.open ? this.hide() : this.show();
-      return;
-    }
-
-    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
-    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
-    // faster navigation.
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      event.preventDefault();
-
-      // Show the menu if it's not already open
-      if (!this.open) {
-        this.show();
-      }
-
-      // Focus on a menu item
-      if (event.key === 'ArrowDown' && firstMenuItem) {
-        const menu = this.getMenu();
-        menu.setCurrentItem(firstMenuItem);
-        firstMenuItem.focus();
-        return;
-      }
-
-      if (event.key === 'ArrowUp' && lastMenuItem) {
-        menu.setCurrentItem(lastMenuItem);
-        lastMenuItem.focus();
-        return;
-      }
-    }
-
-    // Other keys bring focus to the menu and initiate type-to-select behavior
-    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
-    if (this.open && menu && !ignoredKeys.includes(event.key)) {
-      menu.typeToSelect(event.key);
-      return;
-    }
-  }
-
-  handleTriggerKeyUp(event: KeyboardEvent) {
-    // Prevent space from triggering a click event in Firefox
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-  }
-
-  handleTriggerSlotChange() {
-    this.updateAccessibleTrigger();
-  }
-
-  //
-  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
-  // a child of the slotted element, or an element in the slotted element's shadow root.
-  //
-  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
-  //
-  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
-  //
-  updateAccessibleTrigger() {
-    if (this.trigger) {
-      const slot = this.trigger.querySelector('slot') as HTMLSlotElement;
-      const assignedElements = slot.assignedElements({ flatten: true }) as HTMLElement[];
-      const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
-
-      if (accessibleTrigger) {
-        accessibleTrigger.setAttribute('aria-haspopup', 'true');
-        accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-      }
-    }
-  }
-
-  /** Shows the dropdown panel. */
-  async show() {
-    if (this.open) {
-      return;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'sl-after-show');
-  }
-
-  /** Hides the dropdown panel */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'sl-after-hide');
-  }
-
-  /**
-   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   */
-  reposition() {
-    if (!this.open) {
-      return;
-    }
-
-    this.popover.update();
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.disabled) {
-      return;
-    }
-
-    this.updateAccessibleTrigger();
-
-    if (this.open) {
-      // Show
-      emit(this, 'sl-show');
-      this.panel.addEventListener('sl-activate', this.handleMenuItemActivate);
-      this.panel.addEventListener('sl-select', this.handlePanelSelect);
-      document.addEventListener('keydown', this.handleDocumentKeyDown);
-      document.addEventListener('mousedown', this.handleDocumentMouseDown);
-
-      await stopAnimations(this);
-      this.popover.update();
-      this.panel.hidden = false;
-      const { keyframes, options } = getAnimation(this, 'dropdown.show');
-      await animateTo(this.panel, keyframes, options);
-
-      emit(this, 'sl-after-show');
-    } else {
-      // Hide
-      emit(this, 'sl-hide');
-      this.panel.removeEventListener('sl-activate', this.handleMenuItemActivate);
-      this.panel.removeEventListener('sl-select', this.handlePanelSelect);
-      document.removeEventListener('keydown', this.handleDocumentKeyDown);
-      document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-
-      await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, 'dropdown.hide');
-      await animateTo(this.panel, keyframes, options);
-      this.panel.hidden = true;
-
-      emit(this, 'sl-after-hide');
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        id="dropdown"
-        class=${classMap({
-          dropdown: true,
-          'dropdown--open': this.open
-        })}
-      >
-        <span
-          part="trigger"
-          class="dropdown__trigger"
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeyDown}
-          @keyup=${this.handleTriggerKeyUp}
-        >
-          <slot name="trigger" @slotchange=${this.handleTriggerSlotChange}></slot>
-        </span>
-
-        <!-- Position the panel with a wrapper since the popover makes use of translate. This let's us add animations
-        on the panel without interfering with the position. -->
-        <div class="dropdown__positioner">
-          <div
-            part="panel"
-            class="dropdown__panel"
-            aria-hidden=${this.open ? 'false' : 'true'}
-            aria-labelledby="dropdown"
-          >
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-setDefaultAnimation('dropdown.show', {
-  keyframes: [
-    { opacity: 0, transform: 'scale(0.9)' },
-    { opacity: 1, transform: 'scale(1)' }
-  ],
-  options: { duration: 100, easing: 'ease' }
-});
-
-setDefaultAnimation('dropdown.hide', {
-  keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.9)' }
-  ],
-  options: { duration: 100, easing: 'ease' }
-});
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-dropdown': SlDropdown;
-  }
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-bytes/format-bytes.ts

@@ -1,35 +0,0 @@
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { formatBytes } from '../../internal/number';
-import { LocalizeController } from '../../utilities/localize';
-
-/**
- * @since 2.0
- * @status stable
- */
-@customElement('sl-format-bytes')
-export default class SlFormatBytes extends LitElement {
-  private localize = new LocalizeController(this);
-
-  /** The number to format in bytes. */
-  @property({ type: Number }) value = 0;
-
-  /** The unit to display. */
-  @property() unit: 'bytes' | 'bits' = 'bytes';
-
-  /** The locale to use when formatting the number. */
-  @property() lang: string;
-
-  render() {
-    return formatBytes(this.value, {
-      unit: this.unit,
-      formatter: num => this.localize.number(num)
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-format-bytes': SlFormatBytes;
-  }
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/format-date/format-date.ts

@@ -1,81 +0,0 @@
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { LocalizeController } from '../../utilities/localize';
-
-/**
- * @since 2.0
- * @status stable
- */
-@customElement('sl-format-date')
-export default class SlFormatDate extends LitElement {
-  private localize = new LocalizeController(this);
-
-  /** The date/time to format. If not set, the current date and time will be used. */
-  @property() date: Date | string = new Date();
-
-  /** The locale to use when formatting the date/time. */
-  @property() lang: string;
-
-  /** The format for displaying the weekday. */
-  @property() weekday: 'narrow' | 'short' | 'long';
-
-  /** The format for displaying the era. */
-  @property() era: 'narrow' | 'short' | 'long';
-
-  /** The format for displaying the year. */
-  @property() year: 'numeric' | '2-digit';
-
-  /** The format for displaying the month. */
-  @property() month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
-
-  /** The format for displaying the day. */
-  @property() day: 'numeric' | '2-digit';
-
-  /** The format for displaying the hour. */
-  @property() hour: 'numeric' | '2-digit';
-
-  /** The format for displaying the minute. */
-  @property() minute: 'numeric' | '2-digit';
-
-  /** The format for displaying the second. */
-  @property() second: 'numeric' | '2-digit';
-
-  /** The format for displaying the time. */
-  @property({ attribute: 'time-zone-name' }) timeZoneName: 'short' | 'long';
-
-  /** The time zone to express the time in. */
-  @property({ attribute: 'time-zone' }) timeZone: string;
-
-  /** When set, 24 hour time will always be used. */
-  @property({ attribute: 'hour-format' }) hourFormat: 'auto' | '12' | '24' = 'auto';
-
-  render() {
-    const date = new Date(this.date);
-    const hour12 = this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';
-
-    // Check for an invalid date
-    if (isNaN(date.getMilliseconds())) {
-      return;
-    }
-
-    return this.localize.date(date, {
-      weekday: this.weekday,
-      era: this.era,
-      year: this.year,
-      month: this.month,
-      day: this.day,
-      hour: this.hour,
-      minute: this.minute,
-      second: this.second,
-      timeZoneName: this.timeZoneName,
-      timeZone: this.timeZone,
-      hour12: hour12
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-format-date': SlFormatDate;
-  }
-}

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

@@ -1,69 +0,0 @@
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { LocalizeController } from '../../utilities/localize';
-
-/**
- * @since 2.0
- * @status stable
- */
-@customElement('sl-format-number')
-export default class SlFormatNumber extends LitElement {
-  private localize = new LocalizeController(this);
-
-  /** The number to format. */
-  @property({ type: Number }) value = 0;
-
-  /** The locale to use when formatting the number. */
-  @property() lang: string;
-
-  /** The formatting style to use. */
-  @property() type: 'currency' | 'decimal' | 'percent' = 'decimal';
-
-  /** Turns off grouping separators. */
-  @property({ attribute: 'no-grouping', type: Boolean }) noGrouping = false;
-
-  /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
-  @property() currency = 'USD';
-
-  /** How to display the currency. */
-  @property({ attribute: 'currency-display' }) currencyDisplay: 'symbol' | 'narrowSymbol' | 'code' | 'name' = 'symbol';
-
-  /** The minimum number of integer digits to use. Possible values are 1 - 21. */
-  @property({ attribute: 'minimum-integer-digits', type: Number }) minimumIntegerDigits: number;
-
-  /** The minimum number of fraction digits to use. Possible values are 0 - 20. */
-  @property({ attribute: 'minimum-fraction-digits', type: Number }) minimumFractionDigits: number;
-
-  /** The maximum number of fraction digits to use. Possible values are 0 - 20. */
-  @property({ attribute: 'maximum-fraction-digits', type: Number }) maximumFractionDigits: number;
-
-  /** The minimum number of significant digits to use. Possible values are 1 - 21. */
-  @property({ attribute: 'minimum-significant-digits', type: Number }) minimumSignificantDigits: number;
-
-  /** The maximum number of significant digits to use,. Possible values are 1 - 21. */
-  @property({ attribute: 'maximum-significant-digits', type: Number }) maximumSignificantDigits: number;
-
-  render() {
-    if (isNaN(this.value)) {
-      return '';
-    }
-
-    return this.localize.number(this.value, {
-      style: this.type,
-      currency: this.currency,
-      currencyDisplay: this.currencyDisplay,
-      useGrouping: !this.noGrouping,
-      minimumIntegerDigits: this.minimumIntegerDigits,
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits,
-      minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-format-number': SlFormatNumber;
-  }
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/icon/icon.styles.ts

@@ -1,21 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    contain: strict;
-    box-sizing: content-box !important;
-  }
-
-  .icon,
-  svg {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-`;