shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,147 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { clamp } from '../../internal/math';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import styles from './image-comparer.styles';
-
-import '../icon/icon';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-icon
- *
- * @slot before - The before image, an `<img>` or `<svg>` element.
- * @slot after - The after image, an `<img>` or `<svg>` element.
- * @slot handle-icon - The icon used inside the handle.
- *
- * @event sl-change - Emitted when the position changes.
- *
- * @csspart base - The component's base wrapper.
- * @csspart before - The container that holds the "before" image.
- * @csspart after - The container that holds the "after" image.
- * @csspart divider - The divider that separates the images.
- * @csspart handle - The handle that the user drags to expose the after image.
- *
- * @cssproperty --divider-width - The width of the dividing line.
- * @cssproperty --handle-size - The size of the compare handle.
- */
-@customElement('sl-image-comparer')
-export default class SlImageComparer extends LitElement {
-  static styles = styles;
-
-  @query('.image-comparer') base: HTMLElement;
-  @query('.image-comparer__handle') handle: HTMLElement;
-
-  /** The position of the divider as a percentage. */
-  @property({ type: Number, reflect: true }) position = 50;
-
-  handleDrag(event: any) {
-    const { width } = this.base.getBoundingClientRect();
-
-    function drag(event: any, container: HTMLElement, onMove: (x: number) => void) {
-      const move = (event: any) => {
-        const { left } = container.getBoundingClientRect();
-        const { pageXOffset } = container.ownerDocument.defaultView!;
-        const offsetX = left + pageXOffset;
-        const x = (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - offsetX;
-
-        onMove(x);
-      };
-
-      // Move on init
-      move(event);
-
-      const stop = () => {
-        document.removeEventListener('mousemove', move);
-        document.removeEventListener('touchmove', move);
-        document.removeEventListener('mouseup', stop);
-        document.removeEventListener('touchend', stop);
-      };
-
-      document.addEventListener('mousemove', move);
-      document.addEventListener('touchmove', move);
-      document.addEventListener('mouseup', stop);
-      document.addEventListener('touchend', stop);
-    }
-
-    event.preventDefault();
-
-    drag(event, this.base, x => {
-      this.position = Number(clamp((x / width) * 100, 0, 100).toFixed(2));
-    });
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
-      const incr = event.shiftKey ? 10 : 1;
-      let newPosition = this.position;
-
-      event.preventDefault();
-
-      if (event.key === 'ArrowLeft') newPosition = newPosition - incr;
-      if (event.key === 'ArrowRight') newPosition = newPosition + incr;
-      if (event.key === 'Home') newPosition = 0;
-      if (event.key === 'End') newPosition = 100;
-      newPosition = clamp(newPosition, 0, 100);
-
-      this.position = newPosition;
-    }
-  }
-
-  @watch('position', { waitUntilFirstUpdate: true })
-  handlePositionChange() {
-    emit(this, 'sl-change');
-  }
-
-  render() {
-    return html`
-      <div part="base" class="image-comparer" @keydown=${this.handleKeyDown}>
-        <div class="image-comparer__image">
-          <div part="before" class="image-comparer__before">
-            <slot name="before"></slot>
-          </div>
-
-          <div
-            part="after"
-            class="image-comparer__after"
-            style=${styleMap({ clipPath: `inset(0 ${100 - this.position}% 0 0)` })}
-          >
-            <slot name="after"></slot>
-          </div>
-        </div>
-
-        <div
-          part="divider"
-          class="image-comparer__divider"
-          style=${styleMap({ left: this.position + '%' })}
-          @mousedown=${this.handleDrag}
-          @touchstart=${this.handleDrag}
-        >
-          <div
-            part="handle"
-            class="image-comparer__handle"
-            role="scrollbar"
-            aria-valuenow=${this.position}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            tabindex="0"
-          >
-            <slot name="handle-icon">
-              <sl-icon class="image-comparer__handle-icon" name="grip-vertical" library="system"></sl-icon>
-            </slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-image-comparer': SlImageComparer;
-  }
-}

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

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

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

@@ -1,62 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlInclude from './include';
-
-const stubbedFetchResponse: Response = {
-  headers: new Headers(),
-  ok: true,
-  redirected: false,
-  status: 200,
-  statusText: 'OK',
-  type: 'default',
-  url: '',
-  json: () => Promise.resolve({}),
-  text: () => Promise.resolve(''),
-  blob: sinon.fake(),
-  arrayBuffer: sinon.fake(),
-  formData: sinon.fake(),
-  bodyUsed: false,
-  body: null,
-  clone: sinon.fake()
-};
-
-describe('<sl-include>', () => {
-  afterEach(() => {
-    sinon.verifyAndRestore();
-  });
-
-  it('should load content and emit sl-load', async () => {
-    sinon.stub(window, 'fetch').resolves({
-      ...stubbedFetchResponse,
-      ok: true,
-      status: 200,
-      text: () => Promise.resolve('"id": 1')
-    });
-    const el = await fixture<SlInclude>(html` <sl-include src="/found"></sl-include> `);
-    const loadHandler = sinon.spy();
-
-    el.addEventListener('sl-load', loadHandler);
-    await waitUntil(() => loadHandler.calledOnce);
-
-    expect(el.innerHTML).to.contain('"id": 1');
-    expect(loadHandler).to.have.been.calledOnce;
-  });
-
-  it('should emit sl-error when content cannot be loaded', async () => {
-    sinon.stub(window, 'fetch').resolves({
-      ...stubbedFetchResponse,
-      ok: false,
-      status: 404,
-      text: () => Promise.resolve('{}')
-    });
-    const el = await fixture<SlInclude>(html` <sl-include src="/not-found"></sl-include> `);
-    const loadHandler = sinon.spy();
-
-    el.addEventListener('sl-error', loadHandler);
-    await waitUntil(() => loadHandler.calledOnce);
-
-    expect(loadHandler).to.have.been.calledOnce;
-  });
-});

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

@@ -1,80 +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 { requestInclude } from './request';
-import styles from './include.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @event sl-load - Emitted when the included file is loaded.
- * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error.
- */
-@customElement('sl-include')
-export default class SlInclude extends LitElement {
-  static styles = styles;
-
-  /** The location of the HTML file to include. */
-  @property() src: string;
-
-  /** The fetch mode to use. */
-  @property() mode: 'cors' | 'no-cors' | 'same-origin' = 'cors';
-
-  /**
-   * Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this
-   * option can lead to XSS vulnerabilities in your app!
-   */
-  @property({ attribute: 'allow-scripts', type: Boolean }) allowScripts = false;
-
-  executeScript(script: HTMLScriptElement) {
-    // Create a copy of the script and swap it out so the browser executes it
-    const newScript = document.createElement('script');
-    [...script.attributes].map(attr => newScript.setAttribute(attr.name, attr.value));
-    newScript.textContent = script.textContent;
-    script.parentNode!.replaceChild(newScript, script);
-  }
-
-  @watch('src')
-  async handleSrcChange() {
-    try {
-      const src = this.src;
-      const file = await requestInclude(src, this.mode);
-
-      // If the src changed since the request started do nothing, otherwise we risk overwriting a subsequent response
-      if (src !== this.src) {
-        return;
-      }
-
-      if (!file) {
-        return;
-      }
-
-      if (!file.ok) {
-        emit(this, 'sl-error', { detail: { status: file.status } });
-        return;
-      }
-
-      this.innerHTML = file.html;
-
-      if (this.allowScripts) {
-        [...this.querySelectorAll('script')].map(script => this.executeScript(script));
-      }
-
-      emit(this, 'sl-load');
-    } catch {
-      emit(this, 'sl-error', { detail: { status: -1 } });
-    }
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-include': SlInclude;
-  }
-}

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

@@ -1,23 +0,0 @@
-interface IncludeFile {
-  ok: boolean;
-  status: number;
-  html: string;
-}
-
-const includeFiles = new Map<string, Promise<IncludeFile>>();
-
-export const requestInclude = async (src: string, mode: 'cors' | 'no-cors' | 'same-origin' = 'cors') => {
-  if (includeFiles.has(src)) {
-    return includeFiles.get(src);
-  } else {
-    const request = fetch(src, { mode: mode }).then(async response => {
-      return {
-        ok: response.ok,
-        status: response.status,
-        html: await response.text()
-      };
-    });
-    includeFiles.set(src, request);
-    return request;
-  }
-};

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

@@ -1,282 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import formControlStyles from '../../styles/form-control.styles';
-
-export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
-  :host {
-    display: block;
-  }
-
-  .input {
-    flex: 1 1 auto;
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: start;
-    position: relative;
-    width: 100%;
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-input-font-weight);
-    letter-spacing: var(--sl-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    cursor: text;
-    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
-      var(--sl-transition-fast) background-color;
-  }
-
-  /* Standard inputs */
-  .input--standard {
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-  }
-
-  .input--standard:hover:not(.input--disabled) {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--sl-input-color-focus);
-  }
-
-  .input--standard.input--disabled {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .input--standard.input--disabled .input__control {
-    color: var(--sl-input-color-disabled);
-  }
-
-  .input--standard.input--disabled .input__control::placeholder {
-    color: var(--sl-input-placeholder-color-disabled);
-  }
-
-  /* Filled inputs */
-  .input--filled {
-    border: none;
-    background-color: var(--sl-input-filled-background-color);
-    color: var(--sl-input-color);
-  }
-
-  .input--filled:hover:not(.input--disabled) {
-    background-color: var(--sl-input-filled-background-color-hover);
-  }
-
-  .input--filled.input--focused:not(.input--disabled) {
-    background-color: var(--sl-input-filled-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  .input--filled.input--disabled {
-    background-color: var(--sl-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .input__control {
-    flex: 1 1 auto;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    min-width: 0;
-    height: 100%;
-    color: var(--sl-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-  }
-
-  .input__control::-webkit-search-decoration,
-  .input__control::-webkit-search-cancel-button,
-  .input__control::-webkit-search-results-button,
-  .input__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .input__control:-webkit-autofill,
-  .input__control:-webkit-autofill:hover,
-  .input__control:-webkit-autofill:focus,
-  .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
-    -webkit-text-fill-color: var(--sl-color-primary-500);
-    caret-color: var(--sl-input-color);
-  }
-
-  .input--filled .input__control:-webkit-autofill,
-  .input--filled .input__control:-webkit-autofill:hover,
-  .input--filled .input__control:-webkit-autofill:focus,
-  .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-filled-background-color) inset !important;
-  }
-
-  .input__control::placeholder {
-    color: var(--sl-input-placeholder-color);
-    user-select: none;
-  }
-
-  .input:hover:not(.input--disabled) .input__control {
-    color: var(--sl-input-color-hover);
-  }
-
-  .input__control:focus {
-    outline: none;
-  }
-
-  .input__prefix,
-  .input__suffix {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    cursor: default;
-  }
-
-  .input__prefix ::slotted(sl-icon),
-  .input__suffix ::slotted(sl-icon) {
-    color: var(--sl-input-icon-color);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .input--small {
-    border-radius: var(--sl-input-border-radius-small);
-    font-size: var(--sl-input-font-size-small);
-    height: var(--sl-input-height-small);
-  }
-
-  .input--small .input__control {
-    height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
-    padding: 0 var(--sl-input-spacing-small);
-  }
-
-  .input--small .input__clear,
-  .input--small .input__password-toggle {
-    width: calc(1em + var(--sl-input-spacing-small) * 2);
-  }
-
-  .input--small .input__prefix ::slotted(*) {
-    padding-left: var(--sl-input-spacing-small);
-  }
-
-  .input--small .input__suffix ::slotted(*) {
-    padding-right: var(--sl-input-spacing-small);
-  }
-
-  .input--medium {
-    border-radius: var(--sl-input-border-radius-medium);
-    font-size: var(--sl-input-font-size-medium);
-    height: var(--sl-input-height-medium);
-  }
-
-  .input--medium .input__control {
-    height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
-    padding: 0 var(--sl-input-spacing-medium);
-  }
-
-  .input--medium .input__clear,
-  .input--medium .input__password-toggle {
-    width: calc(1em + var(--sl-input-spacing-medium) * 2);
-  }
-
-  .input--medium .input__prefix ::slotted(*) {
-    padding-left: var(--sl-input-spacing-medium);
-  }
-
-  .input--medium .input__suffix ::slotted(*) {
-    padding-right: var(--sl-input-spacing-medium);
-  }
-
-  .input--large {
-    border-radius: var(--sl-input-border-radius-large);
-    font-size: var(--sl-input-font-size-large);
-    height: var(--sl-input-height-large);
-  }
-
-  .input--large .input__control {
-    height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
-    padding: 0 var(--sl-input-spacing-large);
-  }
-
-  .input--large .input__clear,
-  .input--large .input__password-toggle {
-    width: calc(1em + var(--sl-input-spacing-large) * 2);
-  }
-
-  .input--large .input__prefix ::slotted(*) {
-    padding-left: var(--sl-input-spacing-large);
-  }
-
-  .input--large .input__suffix ::slotted(*) {
-    padding-right: var(--sl-input-spacing-large);
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .input--pill.input--small {
-    border-radius: var(--sl-input-height-small);
-  }
-
-  .input--pill.input--medium {
-    border-radius: var(--sl-input-height-medium);
-  }
-
-  .input--pill.input--large {
-    border-radius: var(--sl-input-height-large);
-  }
-
-  /*
-   * Clearable + Password Toggle
-   */
-
-  .input__clear,
-  .input__password-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    color: var(--sl-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--sl-transition-fast) color;
-    cursor: pointer;
-  }
-
-  .input__clear:hover,
-  .input__password-toggle:hover {
-    color: var(--sl-input-icon-color-hover);
-  }
-
-  .input__clear:focus,
-  .input__password-toggle:focus {
-    outline: none;
-  }
-
-  .input--empty .input__clear {
-    visibility: hidden;
-  }
-
-  /* Don't show the browser's password toggle in Edge */
-  ::-ms-reveal {
-    display: none;
-  }
-`;

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

@@ -1,35 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlInput from './input';
-
-describe('<sl-input>', () => {
-  it('should be disabled with the disabled attribute', async () => {
-    const el = await fixture<SlInput>(html` <sl-input disabled></sl-input> `);
-    const input = el.shadowRoot?.querySelector('[part="input"]') as HTMLInputElement;
-
-    expect(input.disabled).to.be.true;
-  });
-
-  it('should be valid by default', async () => {
-    const el = await fixture<SlInput>(html` <sl-input></sl-input> `);
-
-    expect(el.invalid).to.be.false;
-  });
-
-  it('should be invalid when required and empty', async () => {
-    const el = await fixture<SlInput>(html` <sl-input required></sl-input> `);
-
-    expect(el.invalid).to.be.true;
-  });
-
-  it('should be invalid when required and after removing disabled ', async () => {
-    const el = await fixture<SlInput>(html` <sl-input disabled required></sl-input> `);
-
-    el.disabled = false;
-    await el.updateComplete;
-
-    expect(el.invalid).to.be.true;
-  });
-});