shoelace-rails-ui 0.1.0

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

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

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

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

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

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

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

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