shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,249 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,50 @@
+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;
+  }
+}