shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,249 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import { clamp } from '../../internal/math';
-import styles from './rating.styles';
-
-import '../icon/icon';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-icon
- *
- * @event sl-change - Emitted when the rating's value changes.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --symbol-color - The inactive color for symbols.
- * @cssproperty --symbol-color-active - The active color for symbols.
- * @cssproperty --symbol-size - The size of symbols.
- * @cssproperty --symbol-spacing - The spacing to use around symbols.
- */
-@customElement('sl-rating')
-export default class SlRating extends LitElement {
-  static styles = styles;
-
-  @query('.rating') rating: HTMLElement;
-
-  @state() private hoverValue = 0;
-  @state() private isHovering = false;
-
-  /** The current rating. */
-  @property({ type: Number }) value = 0;
-
-  /** The highest rating to show. */
-  @property({ type: Number }) max = 5;
-
-  /** The minimum increment value allowed by the control. */
-  @property({ type: Number }) precision = 1;
-
-  /** Makes the rating readonly. */
-  @property({ type: Boolean, reflect: true }) readonly = false;
-
-  /** Disables the rating. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** The name of the icon to display as the symbol. */
-  // @ts-ignore
-  @property() getSymbol: (value: number) => string = (value: number) =>
-    '<sl-icon name="star-fill" library="system"></sl-icon>';
-
-  /** Sets focus on the rating. */
-  focus(options?: FocusOptions) {
-    this.rating.focus(options);
-  }
-
-  /** Removes focus from the rating. */
-  blur() {
-    this.rating.blur();
-  }
-
-  getValueFromMousePosition(event: MouseEvent) {
-    return this.getValueFromXCoordinate(event.clientX);
-  }
-
-  getValueFromTouchPosition(event: TouchEvent) {
-    return this.getValueFromXCoordinate(event.touches[0].clientX);
-  }
-
-  getValueFromXCoordinate(coordinate: number) {
-    const containerLeft = this.rating.getBoundingClientRect().left;
-    const containerWidth = this.rating.getBoundingClientRect().width;
-    return clamp(
-      this.roundToPrecision(((coordinate - containerLeft) / containerWidth) * this.max, this.precision),
-      0,
-      this.max
-    );
-  }
-
-  handleClick(event: MouseEvent) {
-    this.setValue(this.getValueFromMousePosition(event));
-  }
-
-  setValue(newValue: number) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-
-    this.value = newValue === this.value ? 0 : newValue;
-    this.isHovering = false;
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-
-    if (event.key === 'ArrowLeft') {
-      const decrement = event.shiftKey ? 1 : this.precision;
-      this.value = Math.max(0, this.value - decrement);
-      event.preventDefault();
-    }
-
-    if (event.key === 'ArrowRight') {
-      const increment = event.shiftKey ? 1 : this.precision;
-      this.value = Math.min(this.max, this.value + increment);
-      event.preventDefault();
-    }
-
-    if (event.key === 'Home') {
-      this.value = 0;
-      event.preventDefault();
-    }
-
-    if (event.key === 'End') {
-      this.value = this.max;
-      event.preventDefault();
-    }
-  }
-
-  handleMouseEnter() {
-    this.isHovering = true;
-  }
-
-  handleMouseMove(event: MouseEvent) {
-    this.hoverValue = this.getValueFromMousePosition(event);
-  }
-
-  handleMouseLeave() {
-    this.isHovering = false;
-  }
-
-  handleTouchStart(event: TouchEvent) {
-    this.hoverValue = this.getValueFromTouchPosition(event);
-
-    // Prevent scrolling when touch is initiated
-    event.preventDefault();
-  }
-
-  handleTouchMove(event: TouchEvent) {
-    this.isHovering = true;
-    this.hoverValue = this.getValueFromTouchPosition(event);
-  }
-
-  handleTouchEnd(event: TouchEvent) {
-    this.isHovering = false;
-    this.setValue(this.hoverValue);
-
-    // Prevent click on mobile devices
-    event.preventDefault();
-  }
-
-  @watch('value', { waitUntilFirstUpdate: true })
-  handleValueChange() {
-    emit(this, 'sl-change');
-  }
-
-  roundToPrecision(numberToRound: number, precision = 0.5) {
-    const multiplier = 1 / precision;
-    return Math.ceil(numberToRound * multiplier) / multiplier;
-  }
-
-  render() {
-    const counter = Array.from(Array(this.max).keys());
-    let displayValue = 0;
-
-    if (this.disabled || this.readonly) {
-      displayValue = this.value;
-    } else {
-      displayValue = this.isHovering ? this.hoverValue : this.value;
-    }
-
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          rating: true,
-          'rating--readonly': this.readonly,
-          'rating--disabled': this.disabled
-        })}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        aria-readonly=${this.readonly ? 'true' : 'false'}
-        aria-value=${this.value}
-        aria-valuemin=${0}
-        aria-valuemax=${this.max}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-        @mouseenter=${this.handleMouseEnter}
-        @touchstart=${this.handleTouchStart}
-        @mouseleave=${this.handleMouseLeave}
-        @touchend=${this.handleTouchEnd}
-        @mousemove=${this.handleMouseMove}
-        @touchmove=${this.handleTouchMove}
-      >
-        <span class="rating__symbols rating__symbols--inactive">
-          ${counter.map(index => {
-            // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
-            // false to prevent the hover state from confusing them as they move the mouse out of the control. This
-            // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            return html`
-              <span
-                class=${classMap({
-                  rating__symbol: true,
-                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
-                })}
-                role="presentation"
-                @mouseenter=${this.handleMouseEnter}
-              >
-                ${unsafeHTML(this.getSymbol(index + 1))}
-              </span>
-            `;
-          })}
-        </span>
-
-        <span class="rating__symbols rating__symbols--indicator">
-          ${counter.map(index => {
-            return html`
-              <span
-                class=${classMap({
-                  rating__symbol: true,
-                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
-                })}
-                style=${styleMap({
-                  clipPath:
-                    displayValue > index + 1 ? 'none' : `inset(0 ${100 - ((displayValue - index) / 1) * 100}% 0 0)`
-                })}
-                role="presentation"
-              >
-                ${unsafeHTML(this.getSymbol(index + 1))}
-              </span>
-            `;
-          })}
-        </span>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-rating': SlRating;
-  }
-}

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

@@ -1,116 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { LocalizeController } from '../../utilities/localize';
-
-/**
- * @since 2.0
- * @status stable
- */
-@customElement('sl-relative-time')
-export default class SlRelativeTime extends LitElement {
-  private localize = new LocalizeController(this);
-  private updateTimeout: any;
-
-  @state() private isoTime = '';
-  @state() private relativeTime = '';
-  @state() private titleTime = '';
-
-  /** The date from which to calculate time from. */
-  @property() date: Date | string;
-
-  /** The locale to use when formatting the number. */
-  @property() lang: string;
-
-  /** The formatting style to use. */
-  @property() format: 'long' | 'short' | 'narrow' = 'long';
-
-  /**
-   * When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
-   * "1 day ago" and "in 1 day" will be shown.
-   */
-  @property() numeric: 'always' | 'auto' = 'auto';
-
-  /** Keep the displayed value up to date as time passes. */
-  @property({ type: Boolean }) sync = false;
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearTimeout(this.updateTimeout);
-  }
-
-  render() {
-    const now = new Date();
-    const then = new Date(this.date);
-
-    // Check for an invalid date
-    if (isNaN(then.getMilliseconds())) {
-      this.relativeTime = '';
-      this.isoTime = '';
-      return '';
-    }
-
-    const diff = +then - +now;
-    const availableUnits = [
-      { max: 2760000, value: 60000, unit: 'minute' }, // max 46 minutes
-      { max: 72000000, value: 3600000, unit: 'hour' }, // max 20 hours
-      { max: 518400000, value: 86400000, unit: 'day' }, // max 6 days
-      { max: 2419200000, value: 604800000, unit: 'week' }, // max 28 days
-      { max: 28512000000, value: 2592000000, unit: 'month' }, // max 11 months
-      { max: Infinity, value: 31536000000, unit: 'year' }
-    ];
-    const { unit, value } = availableUnits.find(unit => Math.abs(diff) < unit.max) as any;
-
-    this.isoTime = then.toISOString();
-    this.titleTime = this.localize.date(then, {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-      timeZoneName: 'short'
-    });
-
-    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
-      numeric: this.numeric,
-      style: this.format
-    });
-
-    // If sync is enabled, update as time passes
-    clearTimeout(this.updateTimeout);
-
-    if (this.sync) {
-      // Calculates the number of milliseconds until the next respective unit changes. This ensures that all components
-      // update at the same time which is less distracting than updating independently.
-      const getTimeUntilNextUnit = (unit: 'second' | 'minute' | 'hour' | 'day') => {
-        const units = { second: 1000, minute: 60000, hour: 3600000, day: 86400000 };
-        const value = units[unit];
-        return value - (now.getTime() % value);
-      };
-      let nextInterval: number;
-
-      // NOTE: this could be optimized to determine when the next update should actually occur, but the size and cost of
-      // that logic probably isn't worth the performance benefit
-      if (unit === 'minute') {
-        nextInterval = getTimeUntilNextUnit('second');
-      } else if (unit === 'hour') {
-        nextInterval = getTimeUntilNextUnit('minute');
-      } else if (unit === 'day') {
-        nextInterval = getTimeUntilNextUnit('hour');
-      } else {
-        // Cap updates at once per day. It's unlikely a user will reach this value, plus setTimeout has a limit on the
-        // value it can accept. https://stackoverflow.com/a/3468650/567486
-        nextInterval = getTimeUntilNextUnit('day'); // next day
-      }
-
-      this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval);
-    }
-
-    return html` <time datetime=${this.isoTime} title=${this.titleTime}>${this.relativeTime}</time> `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-relative-time': SlRelativeTime;
-  }
-}

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

@@ -1,10 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: contents;
-  }
-`;

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

@@ -1,87 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import styles from './resize-observer.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - One or more elements to watch for resizing.
- *
- * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized.
- */
-@customElement('sl-resize-observer')
-export default class SlResizeObserver extends LitElement {
-  static styles = styles;
-
-  private resizeObserver: ResizeObserver;
-  private observedElements: HTMLElement[] = [];
-
-  /** Disables the observer. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      emit(this, 'sl-resize', { detail: { entries } });
-    });
-
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stopObserver();
-  }
-
-  handleSlotChange() {
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-
-  startObserver() {
-    const slot = this.shadowRoot!.querySelector('slot')!;
-
-    if (slot) {
-      const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];
-
-      // Unwatch previous elements
-      this.observedElements.map(el => this.resizeObserver.unobserve(el));
-      this.observedElements = [];
-
-      // Watch new elements
-      elements.map(el => {
-        this.resizeObserver.observe(el);
-        this.observedElements.push(el);
-      });
-    }
-  }
-
-  stopObserver() {
-    this.resizeObserver.disconnect();
-  }
-
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    if (this.disabled) {
-      this.stopObserver();
-    } else {
-      this.startObserver();
-    }
-  }
-
-  render() {
-    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-resize-observer': SlResizeObserver;
-  }
-}

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

@@ -1,36 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: block;
-  }
-
-  .responsive-media {
-    position: relative;
-  }
-
-  .responsive-media ::slotted(*) {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-  }
-
-  .responsive-media--cover ::slotted(embed),
-  .responsive-media--cover ::slotted(iframe),
-  .responsive-media--cover ::slotted(img),
-  .responsive-media--cover ::slotted(video) {
-    object-fit: cover !important;
-  }
-
-  .responsive-media--contain ::slotted(embed),
-  .responsive-media--contain ::slotted(iframe),
-  .responsive-media--contain ::slotted(img),
-  .responsive-media--contain ::slotted(video) {
-    object-fit: contain !important;
-  }
-`;

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

@@ -1,50 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import styles from './responsive-media.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The element to receive the aspect ratio. Should be a replaced element, such as `<img>`, `<iframe>`, or `<video>`.
- */
-@customElement('sl-responsive-media')
-export default class SlResponsiveMedia extends LitElement {
-  static styles = styles;
-
-  /**
-   * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in
-   * this format will be ignored.
-   */
-  @property({ attribute: 'aspect-ratio' }) aspectRatio = '16:9';
-
-  /** Determines how content will be resized to fit its container. */
-  @property() fit: 'cover' | 'contain' = 'cover';
-
-  render() {
-    const split = this.aspectRatio.split(':');
-    const x = parseFloat(split[0]);
-    const y = parseFloat(split[1]);
-    const paddingBottom = x && y ? `${(y / x) * 100}%` : '0';
-
-    return html`
-      <div
-        class=${classMap({
-          'responsive-media': true,
-          'responsive-media--cover': this.fit === 'cover',
-          'responsive-media--contain': this.fit === 'contain'
-        })}
-        style="padding-bottom: ${paddingBottom}"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-responsive-media': SlResponsiveMedia;
-  }
-}