shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,47 +0,0 @@
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-
-import '../../../dist/shoelace.js';
-import type SlCheckbox from './checkbox';
-
-describe('<sl-checkbox>', () => {
-  it('should be disabled with the disabled attribute', async () => {
-    const el = await fixture<SlCheckbox>(html` <sl-checkbox disabled></sl-checkbox> `);
-    const checkbox = el.shadowRoot?.querySelector('input');
-
-    expect(checkbox.disabled).to.be.true;
-  });
-
-  it('should be valid by default', async () => {
-    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
-
-    expect(el.invalid).to.be.false;
-  });
-
-  it('should fire sl-change when clicked', async () => {
-    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
-    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', async () => {
-    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
-    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 not fire sl-change when checked is set by javascript', async () => {
-    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
-    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/checkbox/checkbox.ts

@@ -1,203 +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 './checkbox.styles';
-
-let id = 0;
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The checkbox'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 checkbox control.
- * @csspart checked-icon - The container the wraps the checked icon.
- * @csspart indeterminate-icon - The container that wraps the indeterminate icon.
- * @csspart label - The checkbox label.
- */
-@customElement('sl-checkbox')
-export default class SlCheckbox extends LitElement {
-  static styles = styles;
-
-  @query('input[type="checkbox"]') input: HTMLInputElement;
-
-  // @ts-ignore
-  private formSubmitController = new FormSubmitController(this, {
-    value: (control: SlCheckbox) => (control.checked ? control.value : undefined)
-  });
-  private inputId = `checkbox-${++id}`;
-  private labelId = `checkbox-label-${id}`;
-
-  @state() private hasFocus = false;
-
-  /** The checkbox's name attribute. */
-  @property() name: string;
-
-  /** The checkbox's value attribute. */
-  @property() value: string;
-
-  /** Disables the checkbox. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Makes the checkbox a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
-
-  /** Draws the checkbox in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /** Draws the checkbox in an indeterminate state. */
-  @property({ type: Boolean, reflect: true }) indeterminate = false;
-
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
-  firstUpdated() {
-    this.invalid = !this.input.checkValidity();
-  }
-
-  /** Simulates a click on the checkbox. */
-  click() {
-    this.input.click();
-  }
-
-  /** Sets focus on the checkbox. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Removes focus from the checkbox. */
-  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();
-  }
-
-  handleClick() {
-    this.checked = !this.checked;
-    this.indeterminate = false;
-    emit(this, 'sl-change');
-  }
-
-  handleBlur() {
-    this.hasFocus = false;
-    emit(this, 'sl-blur');
-  }
-
-  @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');
-  }
-
-  @watch('checked', { waitUntilFirstUpdate: true })
-  @watch('indeterminate', { waitUntilFirstUpdate: true })
-  handleStateChange() {
-    this.invalid = !this.input.checkValidity();
-  }
-
-  render() {
-    return html`
-      <label
-        part="base"
-        class=${classMap({
-          checkbox: true,
-          'checkbox--checked': this.checked,
-          'checkbox--disabled': this.disabled,
-          'checkbox--focused': this.hasFocus,
-          'checkbox--indeterminate': this.indeterminate
-        })}
-        for=${this.inputId}
-      >
-        <input
-          id=${this.inputId}
-          class="checkbox__input"
-          type="checkbox"
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          .indeterminate=${live(this.indeterminate)}
-          .checked=${live(this.checked)}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          role="checkbox"
-          aria-checked=${this.checked ? 'true' : 'false'}
-          aria-labelledby=${this.labelId}
-          @click=${this.handleClick}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-        />
-
-        <span part="control" class="checkbox__control">
-          ${this.checked
-            ? html`
-                <span part="checked-icon" class="checkbox__icon">
-                  <svg viewBox="0 0 16 16">
-                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-                      <g stroke="currentColor" stroke-width="2">
-                        <g transform="translate(3.428571, 3.428571)">
-                          <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
-                          <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
-                        </g>
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-              `
-            : ''}
-          ${!this.checked && this.indeterminate
-            ? html`
-                <span part="indeterminate-icon" class="checkbox__icon">
-                  <svg viewBox="0 0 16 16">
-                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-                      <g stroke="currentColor" stroke-width="2">
-                        <g transform="translate(2.285714, 6.857143)">
-                          <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
-                        </g>
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-              `
-            : ''}
-        </span>
-
-        <span part="label" id=${this.labelId} class="checkbox__label">
-          <slot></slot>
-        </span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-checkbox': SlCheckbox;
-  }
-}

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

@@ -1,326 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --grid-width: 280px;
-    --grid-height: 200px;
-    --grid-handle-size: 16px;
-    --slider-height: 15px;
-    --slider-handle-size: 17px;
-    --swatch-size: 25px;
-
-    display: inline-block;
-  }
-
-  .color-picker {
-    width: var(--grid-width);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--color);
-    background-color: var(--sl-panel-background-color);
-    border-radius: var(--sl-border-radius-medium);
-    user-select: none;
-  }
-
-  .color-picker--inline {
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-  }
-
-  .color-picker__grid {
-    position: relative;
-    height: var(--grid-height);
-    background-image: linear-gradient(
-        to bottom,
-        hsl(0, 0%, 100%) 0%,
-        hsla(0, 0%, 100%, 0) 50%,
-        hsla(0, 0%, 0%, 0) 50%,
-        hsl(0, 0%, 0%) 100%
-      ),
-      linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-    border-top-left-radius: var(--sl-border-radius-medium);
-    border-top-right-radius: var(--sl-border-radius-medium);
-    cursor: crosshair;
-  }
-
-  .color-picker__grid-handle {
-    position: absolute;
-    width: var(--grid-handle-size);
-    height: var(--grid-handle-size);
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-    border: solid 2px white;
-    margin-top: calc(var(--grid-handle-size) / -2);
-    margin-left: calc(var(--grid-handle-size) / -2);
-  }
-
-  .color-picker__grid-handle${focusVisibleSelector} {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
-  }
-
-  .color-picker__controls {
-    padding: var(--sl-spacing-small);
-    display: flex;
-    align-items: center;
-  }
-
-  .color-picker__sliders {
-    flex: 1 1 auto;
-  }
-
-  .color-picker__slider {
-    position: relative;
-    height: var(--slider-height);
-    border-radius: var(--sl-border-radius-pill);
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-  }
-
-  .color-picker__slider:not(:last-of-type) {
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .color-picker__slider-handle {
-    position: absolute;
-    top: calc(50% - var(--slider-handle-size) / 2);
-    width: var(--slider-handle-size);
-    height: var(--slider-handle-size);
-    background-color: white;
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-    margin-left: calc(var(--slider-handle-size) / -2);
-  }
-
-  .color-picker__slider-handle${focusVisibleSelector} {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
-  }
-
-  .color-picker__hue {
-    background-image: linear-gradient(
-      to right,
-      rgb(255, 0, 0) 0%,
-      rgb(255, 255, 0) 17%,
-      rgb(0, 255, 0) 33%,
-      rgb(0, 255, 255) 50%,
-      rgb(0, 0, 255) 67%,
-      rgb(255, 0, 255) 83%,
-      rgb(255, 0, 0) 100%
-    );
-  }
-
-  .color-picker__alpha .color-picker__alpha-gradient {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-  }
-
-  .color-picker__preview {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 3.25rem;
-    height: 2.25rem;
-    border: none;
-    border-radius: var(--sl-input-border-radius-medium);
-    background: none;
-    margin-left: var(--sl-spacing-small);
-    cursor: copy;
-  }
-
-  .color-picker__preview:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-
-    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
-    background-color: var(--preview-color);
-  }
-
-  .color-picker__preview${focusVisibleSelector} {
-    box-shadow: var(--sl-focus-ring);
-    outline: none;
-  }
-
-  .color-picker__preview-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px rgba(0, 0, 0, 0.125);
-  }
-
-  .color-picker__preview-color--copied {
-    animation: pulse 0.75s;
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--sl-color-primary-500);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-
-  .color-picker__user-input {
-    display: flex;
-    padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
-  }
-
-  .color-picker__user-input sl-input {
-    min-width: 0; /* fix input width in Safari */
-    flex: 1 1 auto;
-  }
-
-  .color-picker__user-input sl-button-group {
-    margin-left: var(--sl-spacing-small);
-  }
-
-  .color-picker__user-input sl-button {
-    min-width: 3.25rem;
-    max-width: 3.25rem;
-    font-size: 1rem;
-  }
-
-  .color-picker__swatches {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    grid-gap: 0.5rem;
-    justify-items: center;
-    border-top: solid 1px var(--sl-color-neutral-200);
-    padding: var(--sl-spacing-small);
-  }
-
-  .color-picker__swatch {
-    position: relative;
-    width: var(--swatch-size);
-    height: var(--swatch-size);
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .color-picker__swatch .color-picker__swatch-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px rgba(0, 0, 0, 0.125);
-    border-radius: inherit;
-    cursor: pointer;
-  }
-
-  .color-picker__swatch${focusVisibleSelector} {
-    outline: none;
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
-      linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
-    background-size: 10px 10px;
-    background-position: 0 0, 0 0, -5px -5px, 5px 5px;
-  }
-
-  .color-picker--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .color-picker--disabled .color-picker__grid,
-  .color-picker--disabled .color-picker__grid-handle,
-  .color-picker--disabled .color-picker__slider,
-  .color-picker--disabled .color-picker__slider-handle,
-  .color-picker--disabled .color-picker__preview,
-  .color-picker--disabled .color-picker__swatch,
-  .color-picker--disabled .color-picker__swatch-color {
-    pointer-events: none;
-  }
-
-  /*
-   * Color dropdown
-   */
-
-  .color-dropdown::part(panel) {
-    max-height: none;
-    overflow: visible;
-  }
-
-  .color-dropdown__trigger {
-    display: inline-block;
-    position: relative;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    transition: var(--sl-transition-fast) box-shadow;
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--small {
-    width: var(--sl-input-height-small);
-    height: var(--sl-input-height-small);
-    border-radius: var(--sl-border-radius-circle);
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--medium {
-    width: var(--sl-input-height-medium);
-    height: var(--sl-input-height-medium);
-    border-radius: var(--sl-border-radius-circle);
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--large {
-    width: var(--sl-input-height-large);
-    height: var(--sl-input-height-large);
-    border-radius: var(--sl-border-radius-circle);
-  }
-
-  .color-dropdown__trigger:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background-color: currentColor;
-    box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
-    transition: inherit;
-  }
-
-  .color-dropdown__trigger${focusVisibleSelector} {
-    outline: none;
-  }
-
-  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled) {
-    box-shadow: var(--sl-focus-ring);
-    outline: none;
-  }
-
-  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled):before {
-    box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;

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

@@ -1,43 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlColorPicker from './color-picker';
-
-describe('<sl-color-picker>', () => {
-  it('should emit change and show correct color when the value changes', async () => {
-    const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
-    const trigger = el.shadowRoot.querySelector('[part="trigger"]') as HTMLElement;
-    const changeHandler = sinon.spy();
-    const color = 'rgb(255, 204, 0)';
-
-    el.addEventListener('sl-change', changeHandler);
-    el.value = color;
-
-    await waitUntil(() => changeHandler.calledOnce);
-
-    expect(changeHandler).to.have.been.calledOnce;
-    expect(trigger.style.color).to.equal(color);
-  });
-
-  it('should render in a dropdown', async () => {
-    const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
-    const dropdown = el.shadowRoot.querySelector('sl-dropdown');
-
-    expect(dropdown).to.exist;
-  });
-
-  it('should not render in a dropdown when inline is enabled', async () => {
-    const el = await fixture<SlColorPicker>(html` <sl-color-picker inline></sl-color-picker> `);
-    const dropdown = el.shadowRoot.querySelector('sl-dropdown');
-
-    expect(dropdown).to.not.exist;
-  });
-
-  it('should show opacity slider when opacity is enabled', async () => {
-    const el = await fixture<SlColorPicker>(html` <sl-color-picker opacity></sl-color-picker> `);
-    const opacitySlider = el.shadowRoot.querySelector('[part*="opacity-slider"]') as HTMLElement;
-
-    expect(opacitySlider).to.exist;
-  });
-});