shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,120 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { watch } from '../../internal/watch';
+import { emit } from '../../internal/event';
+import styles from './animated-image.styles';
+
+import '../icon/icon';
+
+/**
+ * @since 2.0
+ * @status experimental
+ *
+ * @dependency sl-icon
+ *
+ * @event sl-load - Emitted when the image loads successfully.
+ * @event sl-error - Emitted when the image fails to load.
+ *
+ * @part - control-box - The container that surrounds the pause/play icons and provides their background.
+ * @part - play-icon - The icon to use for the play button.
+ * @part - pause-icon - The icon to use for the pause button.
+ *
+ * @cssproperty --control-box-size - The size of the icon box.
+ * @cssproperty --icon-size - The size of the play/pause icons.
+ */
+@customElement('sl-animated-image')
+export default class SlAnimatedImage extends LitElement {
+  static styles = styles;
+
+  @state() frozenFrame: string;
+  @state() isLoaded = false;
+
+  @query('.animated-image__animated') animatedImage: HTMLImageElement;
+
+  /** The image's src attribute. */
+  @property() src: string;
+
+  /** The image's alt attribute. */
+  @property() alt: string;
+
+  /** When set, the image will animate. Otherwise, it will be paused. */
+  @property({ type: Boolean, reflect: true }) play: boolean;
+
+  handleClick() {
+    this.play = !this.play;
+  }
+
+  handleLoad() {
+    const canvas = document.createElement('canvas');
+    const { width, height } = this.animatedImage;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d')!.drawImage(this.animatedImage, 0, 0, width, height);
+    this.frozenFrame = canvas.toDataURL('image/gif');
+
+    if (!this.isLoaded) {
+      emit(this, 'sl-load');
+      this.isLoaded = true;
+    }
+  }
+
+  handleError() {
+    emit(this, 'sl-error');
+  }
+
+  @watch('play')
+  async handlePlayChange() {
+    // When the animation starts playing, reset the src so it plays from the beginning. Since the src is cached, this
+    // won't trigger another request.
+    if (this.play) {
+      this.animatedImage.src = '';
+      this.animatedImage.src = this.src;
+    }
+  }
+
+  @watch('src')
+  handleSrcChange() {
+    this.isLoaded = false;
+  }
+
+  render() {
+    return html`
+      <div class="animated-image">
+        <img
+          class="animated-image__animated"
+          src=${this.src}
+          alt=${this.alt}
+          crossorigin="anonymous"
+          aria-hidden=${this.play ? 'false' : 'true'}
+          @click=${this.handleClick}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />
+
+        ${this.isLoaded
+          ? html`
+              <img
+                class="animated-image__frozen"
+                src=${this.frozenFrame}
+                alt=${this.alt}
+                aria-hidden=${this.play ? 'true' : 'false'}
+                @click=${this.handleClick}
+              />
+
+              <div part="control-box" class="animated-image__control-box">
+                ${this.play
+                  ? html`<sl-icon part="pause-icon" name="pause-fill" library="system"></sl-icon>`
+                  : html`<sl-icon part="play-icon" name="play-fill" library="system"></sl-icon>`}
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-animated-image': SlAnimatedImage;
+  }
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/animation/animation.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/animation/animation.ts

@@ -0,0 +1,222 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { animations } from './animations';
+import styles from './animation.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @event sl-cancel - Emitted when the animation is canceled.
+ * @event sl-finish - Emitted when the animation finishes.
+ * @event sl-start - Emitted when the animation starts or restarts.
+ *
+ * @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container or use
+ * multiple animation elements.
+ */
+@customElement('sl-animation')
+export default class SlAnimation extends LitElement {
+  static styles = styles;
+
+  private animation: Animation;
+  private hasStarted = false;
+
+  @queryAsync('slot') defaultSlot: Promise<HTMLSlotElement>;
+
+  /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
+  @property() name = 'none';
+
+  /**
+   * Plays the animation. When omitted, the animation will be paused. This prop will be automatically removed when the
+   * animation finishes or gets canceled.
+   */
+  @property({ type: Boolean, reflect: true }) play = false;
+
+  /** The number of milliseconds to delay the start of the animation. */
+  @property({ type: Number }) delay = 0;
+
+  /** Determines the direction of playback as well as the behavior when reaching the end of an iteration. */
+  @property() direction: PlaybackDirection = 'normal';
+
+  /** The number of milliseconds each iteration of the animation takes to complete. */
+  @property({ type: Number }) duration = 1000;
+
+  /**
+   * The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
+   * such as `cubic-bezier(0, 1, .76, 1.14)`.
+   */
+  @property() easing = 'linear';
+
+  /** The number of milliseconds to delay after the active period of an animation sequence. */
+  @property({ attribute: 'end-delay', type: Number }) endDelay = 0;
+
+  /** Sets how the animation applies styles to its target before and after its execution. */
+  @property() fill: FillMode = 'auto';
+
+  /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
+  @property({ type: Number }) iterations: number = Infinity;
+
+  /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
+  @property({ attribute: 'iteration-start', type: Number }) iterationStart = 0;
+
+  /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
+  @property({ attribute: false }) keyframes: Keyframe[];
+
+  /**
+   * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
+   * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
+   * value can be changed without causing the animation to restart.
+   */
+  @property({ attribute: 'playback-rate', type: Number }) playbackRate = 1;
+
+  /** Gets and sets the current animation time. */
+  get currentTime(): number {
+    return this.animation?.currentTime || 0;
+  }
+
+  set currentTime(time: number) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+    this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
+    this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+
+  @watch('name')
+  @watch('delay')
+  @watch('direction')
+  @watch('duration')
+  @watch('easing')
+  @watch('endDelay')
+  @watch('fill')
+  @watch('iterations')
+  @watch('iterationsStart')
+  @watch('keyframes')
+  async handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+
+    this.createAnimation();
+  }
+
+  handleAnimationFinish() {
+    this.play = false;
+    this.hasStarted = false;
+    emit(this, 'sl-finish');
+  }
+
+  handleAnimationCancel() {
+    this.play = false;
+    this.hasStarted = false;
+    emit(this, 'sl-cancel');
+  }
+
+  @watch('play')
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        emit(this, 'sl-start');
+      }
+
+      this.play ? this.animation.play() : this.animation.pause();
+
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  @watch('playbackRate')
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+
+  async createAnimation() {
+    const easing = animations.easings[this.easing] || this.easing;
+    const keyframes: Keyframe[] = this.keyframes ? this.keyframes : (animations as any)[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0] as HTMLElement;
+
+    if (!element) {
+      return false;
+    }
+
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener('cancel', this.handleAnimationCancel);
+    this.animation.addEventListener('finish', this.handleAnimationFinish);
+
+    if (this.play) {
+      this.hasStarted = true;
+      emit(this, 'sl-start');
+    } else {
+      this.animation.pause();
+    }
+
+    return true;
+  }
+
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener('cancel', this.handleAnimationCancel);
+      this.animation.removeEventListener('finish', this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+
+  /** Clears all KeyframeEffects caused by this animation and aborts its playback. */
+  cancel() {
+    try {
+      this.animation.cancel();
+    } catch {}
+  }
+
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    try {
+      this.animation.finish();
+    } catch {}
+  }
+
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-animation': SlAnimation;
+  }
+}

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

@@ -0,0 +1,15 @@
+import * as animations from '@shoelace-style/animations';
+
+export { animations };
+
+/** Gets a list of all supported animation names. */
+export function getAnimationNames() {
+  return Object.entries(animations)
+    .filter(([name]) => name !== 'easings')
+    .map(([name]) => name);
+}
+
+/** Gets a list of all supported easing function names. */
+export function getEasingNames() {
+  return Object.entries(animations.easings).map(([name]) => name);
+}

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

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+
+    --size: 3rem;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--sl-color-neutral-400);
+    font-family: var(--sl-font-sans);
+    font-size: calc(var(--size) * 0.5);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-0);
+    overflow: hidden;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .avatar--circle {
+    border-radius: var(--sl-border-radius-circle);
+  }
+
+  .avatar--rounded {
+    border-radius: var(--sl-border-radius-medium);
+  }
+
+  .avatar--square {
+    border-radius: 0;
+  }
+
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar__initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .avatar__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;

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

@@ -0,0 +1,111 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../../dist/shoelace.js';
+import type SlAvatar from './avatar';
+
+describe('<sl-avatar>', () => {
+  let el: SlAvatar;
+
+  describe('when provided no parameters', async () => {
+    before(async () => {
+      el = await fixture<SlAvatar>(html` <sl-avatar label="Avatar"></sl-avatar> `);
+    });
+
+    it('passes accessibility test', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should default to circle styling', async () => {
+      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+      expect(el.getAttribute('shape')).to.eq('circle');
+      expect(part.classList.value.trim()).to.eq('avatar avatar--circle');
+    });
+  });
+
+  describe('when provided an image and label parameter', async () => {
+    const image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    const label = 'Small transparent square';
+    before(async () => {
+      el = await fixture<SlAvatar>(html`<sl-avatar image="${image}" label="${label}"></sl-avatar>`);
+    });
+
+    it('passes accessibility test', async () => {
+      /**
+       * The image element itself is ancillary, because it's parent container contains the
+       * aria-label which dictates what "sl-avatar" is. This also implies that label text will
+       * resolve to "" when not provided and ignored by readers. This is why we use alt="" on
+       * the image element to pass accessibility.
+       * https://html.spec.whatwg.org/multipage/images.html#ancillary-images
+       */
+      await expect(el).to.be.accessible();
+    });
+
+    it('renders "image" part, with src and a role of presentation', async () => {
+      const part = el.shadowRoot?.querySelector('[part="image"]') as HTMLImageElement;
+
+      expect(part.getAttribute('src')).to.eq(image);
+    });
+
+    it('renders the label attribute in the "base" part', async () => {
+      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+
+      expect(part.getAttribute('aria-label')).to.eq(label);
+    });
+  });
+
+  describe('when provided initials parameter', async () => {
+    const initials = 'SL';
+    before(async () => {
+      el = await fixture<SlAvatar>(html`<sl-avatar initials="${initials}" label="Avatar"></sl-avatar>`);
+    });
+
+    it('passes accessibility test', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('renders "initials" part, with initials as the text node', async () => {
+      const part = el.shadowRoot?.querySelector('[part="initials"]') as HTMLImageElement;
+
+      expect(part.innerText).to.eq(initials);
+    });
+  });
+
+  ['square', 'rounded', 'circle'].forEach(shape => {
+    describe(`when passed a shape attribute ${shape}`, () => {
+      before(async () => {
+        el = await fixture<SlAvatar>(html`<sl-avatar shape="${shape as any}" label="Shaped avatar"></sl-avatar>`);
+      });
+
+      it('passes accessibility test', async () => {
+        await expect(el).to.be.accessible();
+      });
+
+      it('appends the appropriate class on the "base" part', async () => {
+        const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+
+        expect(el.getAttribute('shape')).to.eq(shape);
+        expect(part.classList.value.trim()).to.eq(`avatar avatar--${shape}`);
+      });
+    });
+  });
+
+  describe('when passed a <span>, on slot "icon"', async () => {
+    before(async () => {
+      el = await fixture<SlAvatar>(html`<sl-avatar label="Avatar"><span slot="icon">random content</span></sl-avatar>`);
+    });
+
+    it('passes accessibility test', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should accept as an assigned child in the shadow root', async () => {
+      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=icon]');
+      const childNodes = slot.assignedNodes({ flatten: true });
+
+      expect(childNodes.length).to.eq(1);
+
+      const span = <HTMLElement>childNodes[0];
+      expect(span.innerHTML).to.eq('random content');
+    });
+  });
+});

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

@@ -0,0 +1,83 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './avatar.styles';
+
+import '../icon/icon';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-icon
+ *
+ * @slot icon - The default icon to use when no image or initials are present.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The container that wraps the avatar icon.
+ * @csspart initials - The container that wraps the avatar initials.
+ * @csspart image - The avatar image.
+ *
+ * @cssproperty --size - The size of the avatar.
+ */
+@customElement('sl-avatar')
+export default class SlAvatar extends LitElement {
+  static styles = styles;
+
+  @state() private hasError = false;
+
+  /** The image source to use for the avatar. */
+  @property() image: string;
+
+  /** A label to use to describe the avatar to assistive devices. */
+  @property() label: string;
+
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  @property() initials: string;
+
+  /** The shape of the avatar. */
+  @property({ reflect: true }) shape: 'circle' | 'square' | 'rounded' = 'circle';
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          avatar: true,
+          'avatar--circle': this.shape === 'circle',
+          'avatar--rounded': this.shape === 'rounded',
+          'avatar--square': this.shape === 'square'
+        })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.initials
+          ? html` <div part="initials" class="avatar__initials">${this.initials}</div> `
+          : html`
+              <div part="icon" class="avatar__icon" aria-hidden="true">
+                <slot name="icon">
+                  <sl-icon name="person-fill" library="system"></sl-icon>
+                </slot>
+              </div>
+            `}
+        ${this.image && !this.hasError
+          ? html`
+              <img
+                part="image"
+                class="avatar__image"
+                src="${this.image}"
+                alt=""
+                @error="${() => (this.hasError = true)}"
+              />
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-avatar': SlAvatar;
+  }
+}