shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,68 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
-import '../../../dist/shoelace.js';
-import type SlProgressRing from './progress-ring';
-
-describe('<sl-progress-ring>', () => {
-  let el: SlProgressRing;
-
-  describe('when provided just a value parameter', async () => {
-    before(async () => {
-      el = await fixture<SlProgressRing>(html`<sl-progress-ring value="25"></sl-progress-ring>`);
-    });
-
-    it('should render a component that passes accessibility test.', async () => {
-      await expect(el).to.be.accessible();
-    });
-  });
-
-  describe('when provided a title, and value parameter', async () => {
-    let base: HTMLDivElement;
-
-    before(async () => {
-      el = await fixture<SlProgressRing>(
-        html`<sl-progress-ring title="Titled Progress Ring" value="25"></sl-progress-ring>`
-      );
-      base = el.shadowRoot?.querySelector('[part="base"]') as HTMLDivElement;
-    });
-
-    it('should render a component that passes accessibility test.', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('uses the value parameter on the base, as aria-valuenow', async () => {
-      expect(base).attribute('aria-valuenow', '25');
-    });
-
-    it('translates the value parameter to a percentage, and uses translation on the base, as percentage css variable', async () => {
-      expect(base).attribute('style', '--percentage: 0.25');
-    });
-  });
-
-  describe('when provided a ariaLabel, and value parameter', async () => {
-    before(async () => {
-      el = await fixture<SlProgressRing>(
-        html`<sl-progress-ring ariaLabel="Labelled Progress Ring" value="25"></sl-progress-ring>`
-      );
-    });
-
-    it('should render a component that passes accessibility test.', async () => {
-      await expect(el).to.be.accessible();
-    });
-  });
-
-  describe('when provided a ariaLabelledBy, and value parameter', async () => {
-    before(async () => {
-      el = await fixture<SlProgressRing>(
-        html`
-          <label id="labelledby">Progress Ring Label</label>
-          <sl-progress-ring ariaLabelledBy="labelledby" value="25"></sl-progress-ring>
-        `
-      );
-    });
-
-    it('should render a component that passes accessibility test.', async () => {
-      await expect(el).to.be.accessible();
-    });
-  });
-});

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

@@ -1,84 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { LocalizeController } from '../../utilities/localize';
-import styles from './progress-ring.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - A label to show inside the ring.
- *
- * @csspart base - The component's base wrapper.
- * @csspart label - The progress ring label.
- *
- * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
- * @cssproperty --track-width - The width of the track.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The indicator color.
- */
-@customElement('sl-progress-ring')
-export default class SlProgressRing extends LitElement {
-  static styles = styles;
-  private localize = new LocalizeController(this);
-
-  @query('.progress-ring__indicator') indicator: SVGCircleElement;
-
-  @state() indicatorOffset: string;
-
-  /** The current progress, 0 to 100. */
-  @property({ type: Number, reflect: true }) value = 0;
-
-  /** A custom label for the progress ring's aria label. */
-  @property() label: string;
-
-  /** The locale to render the component in. */
-  @property() lang: string;
-
-  updated(changedProps: Map<string, any>) {
-    super.updated(changedProps);
-
-    //
-    // This block is only required for Safari because it doesn't transition the circle when the custom properties
-    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
-    // but I couldn't pinpoint it so this works around the problem.
-    //
-    if (changedProps.has('percentage')) {
-      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
-      const circumference = 2 * Math.PI * radius;
-      const offset = circumference - (this.value / 100) * circumference;
-
-      this.indicatorOffset = String(offset) + 'px';
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class="progress-ring"
-        role="progressbar"
-        aria-label=${this.label || this.localize.term('progress')}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow="${this.value}"
-        style="--percentage: ${this.value / 100}"
-      >
-        <svg class="progress-ring__image">
-          <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
-        </svg>
-
-        <span part="label" class="progress-ring__label">
-          <slot></slot>
-        </span>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-progress-ring': SlProgressRing;
-  }
-}

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

@@ -1,22 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-block;
-  }
-
-  .qr-code {
-    position: relative;
-  }
-
-  canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-`;

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

@@ -1,90 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { watch } from '../../internal/watch';
-import QrCreator from 'qr-creator';
-import styles from './qr-code.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @csspart base - The component's base wrapper.
- */
-@customElement('sl-qr-code')
-export default class SlQrCode extends LitElement {
-  static styles = styles;
-
-  @query('canvas') canvas: HTMLElement;
-
-  /** The QR code's value. */
-  @property() value = '';
-
-  /** The label used when screen readers announce the code. If unspecified, the value will be used. */
-  @property() label = '';
-
-  /** The size of the code's overall square in pixels. */
-  @property({ type: Number }) size = 128;
-
-  /** The fill color. This can be any valid CSS color, but not a CSS custom property. */
-  @property() fill = '#000';
-
-  /** The background color. This can be any valid CSS color or `transparent`, but not a CSS custom property. */
-  @property() background = '#fff';
-
-  /** The edge radius of each module. Must be between 0 and 0.5. */
-  @property({ type: Number }) radius = 0;
-
-  /** The level of error correction to use. */
-  @property({ attribute: 'error-correction' }) errorCorrection: 'L' | 'M' | 'Q' | 'H' = 'H';
-
-  firstUpdated() {
-    this.generate();
-  }
-
-  @watch('background')
-  @watch('errorCorrection')
-  @watch('fill')
-  @watch('radius')
-  @watch('size')
-  @watch('value')
-  generate() {
-    if (!this.hasUpdated) {
-      return;
-    }
-
-    QrCreator.render(
-      {
-        text: this.value,
-        radius: this.radius,
-        ecLevel: this.errorCorrection,
-        fill: this.fill,
-        background: this.background === 'transparent' ? null : this.background,
-        // We draw the canvas larger and scale its container down to avoid blurring on high-density displays
-        size: this.size * 2
-      },
-      this.canvas
-    );
-  }
-
-  render() {
-    return html`
-      <div
-        class="qr-code"
-        part="base"
-        style=${styleMap({
-          width: `${this.size}px`,
-          height: `${this.size}px`
-        })}
-      >
-        <canvas role="img" aria-label=${this.label || this.value}></canvas>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-qr-code': SlQrCode;
-  }
-}

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

@@ -1,107 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-block;
-  }
-
-  .radio {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--sl-input-font-family);
-    font-size: var(--sl-input-font-size-medium);
-    font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .radio__icon {
-    display: inline-flex;
-    width: var(--sl-toggle-size);
-    height: var(--sl-toggle-size);
-  }
-
-  .radio__icon svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  .radio__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--sl-toggle-size);
-    height: var(--sl-toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-    border-radius: 50%;
-    background-color: var(--sl-input-background-color);
-    color: transparent;
-    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
-  }
-
-  .radio__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
-  }
-
-  /* Focus */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
-    border-color: var(--sl-input-border-color-focus);
-    background-color: var(--sl-input-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  /* Checked */
-  .radio--checked .radio__control {
-    color: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
-  }
-
-  /* Checked + focus */
-  .radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  /* Disabled */
-  .radio--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  .radio:not(.radio--checked) svg circle {
-    opacity: 0;
-  }
-
-  .radio__label {
-    line-height: var(--sl-toggle-size);
-    margin-left: 0.5em;
-    user-select: none;
-  }
-`;

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

@@ -1,65 +0,0 @@
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-
-import '../../../dist/shoelace.js';
-import type SlRadio from './radio';
-import type SlRadioGroup from '../radio-group/radio-group';
-
-describe('<sl-radio>', () => {
-  it('should be disabled with the disabled attribute', async () => {
-    const el = await fixture<SlRadio>(html` <sl-radio disabled></sl-radio> `);
-    const radio = el.shadowRoot?.querySelector('input');
-
-    expect(radio.disabled).to.be.true;
-  });
-
-  it('should be valid by default', async () => {
-    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
-
-    expect(el.invalid).to.be.false;
-  });
-
-  it('should fire sl-change when clicked', async () => {
-    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
-    setTimeout(() => el.shadowRoot?.querySelector('input').click());
-    const event = await oneEvent(el, 'sl-change');
-    expect(event.target).to.equal(el);
-    expect(el.checked).to.be.true;
-  });
-
-  it('should fire sl-change when toggled via keyboard - space', async () => {
-    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
-    const input = el.shadowRoot?.querySelector('input');
-    input.focus();
-    setTimeout(() => sendKeys({ press: ' ' }));
-    const event = await oneEvent(el, 'sl-change');
-    expect(event.target).to.equal(el);
-    expect(el.checked).to.be.true;
-  });
-
-  it('should fire sl-change when toggled via keyboard - arrow key', async () => {
-    const radioGroup = await fixture<SlRadioGroup>(html`
-      <sl-radio-group>
-        <sl-radio id="radio-1"></sl-radio>
-        <sl-radio id="radio-2"></sl-radio>
-      </sl-radio-group>
-    `);
-    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
-    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
-    const input1 = radio1.shadowRoot?.querySelector('input');
-    input1.focus();
-    setTimeout(() => sendKeys({ press: 'ArrowRight' }));
-    const event = await oneEvent(radio2, 'sl-change');
-    expect(event.target).to.equal(radio2);
-    expect(radio2.checked).to.be.true;
-  });
-
-  it('should not fire sl-change when checked is set by javascript', async () => {
-    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
-    el.addEventListener('sl-change', () => expect.fail('event fired'));
-    el.checked = true;
-    await el.updateComplete;
-    el.checked = false;
-    await el.updateComplete;
-  });
-});

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

@@ -1,226 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import { FormSubmitController } from '../../internal/form-control';
-import styles from './radio.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The radio's label.
- *
- * @event sl-blur - Emitted when the control loses focus.
- * @event sl-change - Emitted when the control's checked state changes.
- * @event sl-focus - Emitted when the control gains focus.
- *
- * @csspart base - The component's base wrapper.
- * @csspart control - The radio control.
- * @csspart checked-icon - The container the wraps the checked icon.
- * @csspart label - The radio label.
- */
-@customElement('sl-radio')
-export default class SlRadio extends LitElement {
-  static styles = styles;
-
-  @query('input[type="radio"]') input: HTMLInputElement;
-
-  // @ts-ignore
-  private formSubmitController = new FormSubmitController(this, {
-    value: (control: SlRadio) => (control.checked ? control.value : undefined)
-  });
-
-  @state() private hasFocus = false;
-
-  /** The radio's name attribute. */
-  @property() name: string;
-
-  /** The radio's value attribute. */
-  @property() value: string;
-
-  /** Disables the radio. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Draws the radio in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
-  firstUpdated() {
-    const radios = this.getAllRadios();
-    const checkedRadio = radios.find(radio => radio.checked);
-
-    radios.map(radio => {
-      if (radio.input) {
-        radio.input.tabIndex = -1;
-      }
-    });
-
-    if (checkedRadio) {
-      checkedRadio.input.tabIndex = 0;
-    } else if (radios.length) {
-      radios[0].input.tabIndex = 0;
-    }
-  }
-
-  /** Simulates a click on the radio. */
-  click() {
-    this.input.click();
-  }
-
-  /** Sets focus on the radio. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Removes focus from the radio. */
-  blur() {
-    this.input.blur();
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string) {
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
-  }
-
-  getAllRadios() {
-    const radioGroup = this.closest('sl-radio-group');
-
-    // Radios must be part of a radio group
-    if (!radioGroup) {
-      return [this];
-    }
-
-    return [...radioGroup.querySelectorAll('sl-radio')].filter((radio: this) => radio.name === this.name) as this[];
-  }
-
-  getSiblingRadios() {
-    return this.getAllRadios().filter(radio => radio !== this) as this[];
-  }
-
-  handleBlur() {
-    this.hasFocus = false;
-    emit(this, 'sl-blur');
-  }
-
-  @watch('checked', { waitUntilFirstUpdate: true })
-  handleCheckedChange() {
-    if (this.checked) {
-      this.input.tabIndex = 0;
-
-      this.getSiblingRadios().map(radio => {
-        radio.input.tabIndex = -1;
-        radio.checked = false;
-      });
-    }
-  }
-
-  handleClick() {
-    this.checked = true;
-    emit(this, 'sl-change');
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    if (this.input) {
-      this.input.disabled = this.disabled;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
-  handleFocus() {
-    this.hasFocus = true;
-    emit(this, 'sl-focus');
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      const radios = this.getAllRadios().filter(radio => !radio.disabled);
-      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-      let index = radios.indexOf(this) + incr;
-      if (index < 0) index = radios.length - 1;
-      if (index > radios.length - 1) index = 0;
-
-      this.getAllRadios().map(radio => {
-        radio.checked = false;
-        radio.input.tabIndex = -1;
-      });
-
-      radios[index].focus();
-      radios[index].checked = true;
-      radios[index].input.tabIndex = 0;
-
-      emit(radios[index], 'sl-change');
-
-      event.preventDefault();
-    }
-  }
-
-  render() {
-    this.setAttribute('role', 'radio');
-    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-
-    return html`
-      <label
-        part="base"
-        class=${classMap({
-          radio: true,
-          'radio--checked': this.checked,
-          'radio--disabled': this.disabled,
-          'radio--focused': this.hasFocus
-        })}
-        @keydown=${this.handleKeyDown}
-      >
-        <input
-          class="radio__input"
-          type="radio"
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          .checked=${live(this.checked)}
-          .disabled=${this.disabled}
-          aria-hidden="true"
-          @click=${this.handleClick}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-        />
-        <span part="control" class="radio__control">
-          <span part="checked-icon" class="radio__icon">
-            <svg viewBox="0 0 16 16">
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g fill="currentColor">
-                  <circle cx="8" cy="8" r="3.42857143"></circle>
-                </g>
-              </g>
-            </svg>
-          </span>
-        </span>
-
-        <span part="label" class="radio__label">
-          <slot></slot>
-        </span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-radio': SlRadio;
-  }
-}