shoelace-rails-ui 0.1.0 → 0.1.1

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

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

@@ -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/animation/animation.ts

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

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

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

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

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