@solid-design-system/components 1.18.1 → 1.20.0

package/dist/versioned-package/components/radio-group/radio-group.js

@@ -0,0 +1,321 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { FormControlController, customErrorValidityState, valueMissingValidityState, validValidityState } from "../../internal/form.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { query, state, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import SdButtonGroup from "../../_components/button-group/button-group.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdRadioGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "label", "error-text");
+    this.customValidityMessage = "";
+    this.hasButtonGroup = false;
+    this.defaultValue = "";
+    this.invalid = false;
+    this.errorText = "";
+    this.label = "";
+    this.name = "option";
+    this.value = "";
+    this.size = "lg";
+    this.form = "";
+    this.required = false;
+    this.orientation = "vertical";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      this.invalid = true;
+      return customErrorValidityState;
+    } else if (isRequiredAndEmpty) {
+      this.invalid = true;
+      return valueMissingValidityState;
+    }
+    this.invalid = false;
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      console.log("this.customValidityMessage", this.customValidityMessage);
+      return this.customValidityMessage;
+    } else if (isRequiredAndEmpty) {
+      console.log("this.validationInput.validationMessage", this.validationInput);
+      return this.validationInput.validationMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  getAllRadios() {
+    return [...this.querySelectorAll("sd-1-20-0-radio, sd-1-20-0-radio-button")];
+  }
+  handleRadioClick(event) {
+    const target = event.target.closest("sd-1-20-0-radio, sd-1-20-0-radio-button");
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+    if (target.disabled) {
+      return;
+    }
+    this.value = target.value;
+    radios.forEach((radio) => radio.checked = radio === target);
+    if (this.value !== oldValue) {
+      this.emit("sd-change");
+      this.emit("sd-input");
+    }
+  }
+  handleKeyDown(event) {
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+      return;
+    }
+    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = radios.indexOf(checkedRadio) + incr;
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+    this.getAllRadios().forEach((radio) => {
+      radio.checked = false;
+      if (!this.hasButtonGroup) {
+        radio.tabIndex = -1;
+      }
+    });
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    if (!this.hasButtonGroup) {
+      radios[index].tabIndex = 0;
+      radios[index].focus();
+    } else {
+      radios[index].shadowRoot.querySelector("button").focus();
+    }
+    if (this.value !== oldValue) {
+      this.emit("sd-change");
+      this.emit("sd-input");
+    }
+    event.preventDefault();
+  }
+  handleLabelClick() {
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const radioToFocus = checked || radios[0];
+    if (radioToFocus) {
+      radioToFocus.focus();
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  async syncRadioElements() {
+    var _a, _b;
+    const radios = this.getAllRadios();
+    await Promise.all(
+      // Sync the checked state and size
+      radios.map(async (radio) => {
+        await radio.updateComplete;
+        radio.checked = radio.value === this.value;
+        radio.size = this.size;
+        radio.invalid = this.invalid;
+      })
+    );
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-1-20-0-radio-button");
+    if (!radios.some((radio) => radio.checked)) {
+      if (this.hasButtonGroup) {
+        const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
+        if (buttonRadio) {
+          buttonRadio.tabIndex = 0;
+        }
+      } else {
+        radios[0].tabIndex = 0;
+      }
+    }
+    if (this.hasButtonGroup) {
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-1-20-0-button-group");
+      if (buttonGroup) {
+        buttonGroup.disableRole = true;
+      }
+    }
+  }
+  syncRadios() {
+    if (customElements.get("sd-1-20-0-radio") && customElements.get("sd-1-20-0-radio-button")) {
+      this.syncRadioElements();
+      return;
+    }
+    if (customElements.get("sd-1-20-0-radio")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("sd-1-20-0-radio").then(() => this.syncRadios());
+    }
+    if (customElements.get("sd-1-20-0-radio-button")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("sd-1-20-0-radio-button").then(() => this.syncRadios());
+    }
+  }
+  updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach((radio) => radio.checked = radio.value === this.value);
+    this.formControlController.setValidity(this.validity.valid);
+  }
+  handleSizeChange() {
+    this.syncRadios();
+  }
+  handleInvalidChange() {
+    this.syncRadios();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedRadio();
+      this.reportValidity();
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (isRequiredAndEmpty || hasCustomValidityMessage) {
+      this.formControlController.emitInvalidEvent();
+      return false;
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  // TODO: https://github.com/solid-design-system/solid/issues/501
+  reportValidity() {
+    const isValid = this.validity.valid;
+    this.errorText = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(this.validationTimeout);
+    if (!isValid) {
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
+    }
+    return isValid;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = "") {
+    this.customValidityMessage = message;
+    this.errorText = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasErrorTextSlot = this.hasSlotController.test("error-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasErrorText = this.errorText ? true : !!hasErrorTextSlot;
+    const defaultSlot = html`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;
+    return html`<fieldset part="form-control" class="${cx(
+      "form-control form-control--radio-group border-0 p-0 m-0",
+      hasLabel && "form-control--has-label",
+      hasErrorText && "text-error",
+      {
+        /* sizes, fonts */
+        sm: "text-sm",
+        lg: "text-base"
+      }[this.size]
+    )}" role="radiogroup" aria-labelledby="label" aria-errormessage="error-text"><label part="form-control-label" id="label" class="form-control__label mb-2 hidden p-0 font-bold leading-normal text-black" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
+      "form-control-input flex",
+      this.invalid && "form-control-input--invalid text-error",
+      {
+        vertical: "form-control-input--vertical flex-col",
+        horizontal: "form-control-input--horizontal flex-row"
+      }[this.orientation]
+    )}"><div class="sr-only"><div id="error-message" aria-live="assertive">${this.errorText}</div><label class="radio-group__validation"><input type="text" class="radio-group__validation-input" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${defaultSlot}</div></fieldset>`;
+  }
+};
+SdRadioGroup.dependencies = { "sd-1-20-0-button-group": SdButtonGroup };
+SdRadioGroup.styles = [
+  componentStyles,
+  SolidElement.styles,
+  css`:host{display:block}.form-control-input--vertical ::slotted(sd-1-20-0-radio){margin-bottom:8px;display:flex}.form-control-input--vertical ::slotted(sd-1-20-0-radio:last-of-type){margin-bottom:0}.form-control-input--horizontal ::slotted(sd-1-20-0-radio){margin-right:24px}.form-control-input--horizontal ::slotted(sd-1-20-0-radio:last-of-type){margin-right:0}.form-control--has-label .form-control__label{display:flex}:host([required]) .form-control--has-label .form-control__label::after{content:'*';margin-left:2px}`
+];
+__decorateClass([
+  query("slot:not([name])")
+], SdRadioGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".radio-group__validation-input")
+], SdRadioGroup.prototype, "validationInput", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "hasButtonGroup", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], SdRadioGroup.prototype, "errorText", 2);
+__decorateClass([
+  property()
+], SdRadioGroup.prototype, "label", 2);
+__decorateClass([
+  property()
+], SdRadioGroup.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioGroup.prototype, "required", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], SdRadioGroup.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("invalid", { waitUntilFirstUpdate: true })
+], SdRadioGroup.prototype, "handleInvalidChange", 1);
+__decorateClass([
+  watch("value")
+], SdRadioGroup.prototype, "handleValueChange", 1);
+SdRadioGroup = __decorateClass([
+  customElement("sd-1-20-0-radio-group")
+], SdRadioGroup);
+export {
+  SdRadioGroup as default
+};

package/dist/versioned-package/components/spinner/spinner.d.ts

@@ -7,6 +7,6 @@ export default class SdSpinner extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-18-1-spinner': SdSpinner;
+        'sd-1-20-0-spinner': SdSpinner;
     }
 }

package/dist/versioned-package/components/spinner/spinner.js

@@ -40,7 +40,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-1-18-1-spinner")
+  customElement("sd-1-20-0-spinner")
 ], SdSpinner);
 export {
   SdSpinner as default

package/dist/versioned-package/components/tag/tag.d.ts

@@ -19,6 +19,6 @@ export default class SdTag extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-18-1-tag': SdTag;
+        'sd-1-20-0-tag': SdTag;
     }
 }

package/dist/versioned-package/components/tag/tag.js

@@ -72,7 +72,7 @@ let SdTag = class extends SolidElement {
         lg: "text-base",
         sm: "text-[12px]"
       }[this.size]
-    )}"><sd-1-18-1-icon library="system" name="close" label="remove"></sd-1-18-1-icon></slot></${tag}>`;
+    )}"><sd-1-20-0-icon library="system" name="close" label="remove"></sd-1-20-0-icon></slot></${tag}>`;
   }
 };
 SdTag.styles = [
@@ -104,7 +104,7 @@ __decorateClass([
   property()
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-1-18-1-tag")
+  customElement("sd-1-20-0-tag")
 ], SdTag);
 export {
   SdTag as default

package/dist/versioned-package/components/teaser/teaser.js

@@ -96,7 +96,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-1-18-1-teaser")
+  customElement("sd-1-20-0-teaser")
 ], SdTeaser);
 export {
   SdTeaser as default

package/dist/versioned-package/components/video/video.d.ts

@@ -0,0 +1,24 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdVideo extends SolidElement {
+    hostEl: HTMLElement;
+    playing: boolean;
+    overlay: boolean;
+    isBelowBreakpoint: boolean;
+    private resizeObserver;
+    private readonly hasSlotController;
+    private get poster();
+    private fadeoutPoster;
+    private hidePoster;
+    private play;
+    private handleKeydown;
+    private handleButtonResize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-1-20-0-video': SdVideo;
+    }
+}

package/dist/versioned-package/components/video/video.js

@@ -0,0 +1,117 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { query, property } from "lit/decorators.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdVideo = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.playing = false;
+    this.overlay = false;
+    this.isBelowBreakpoint = false;
+    this.hasSlotController = new HasSlotController(this, "[default]", "play-icon", "poster");
+  }
+  /** Getter for optional poster slot. */
+  get poster() {
+    const slot = this.shadowRoot.querySelector("slot[name=poster]");
+    if ((slot == null ? void 0 : slot.assignedElements().length) > 0) {
+      return slot.assignedElements()[0];
+    }
+    return null;
+  }
+  /** Fade out poster after initial play. */
+  fadeoutPoster() {
+    if (this.poster instanceof HTMLImageElement) {
+      this.poster.style.opacity = "0";
+    }
+  }
+  /** Hide poster after initial play & fadeout. */
+  hidePoster() {
+    if (this.poster instanceof HTMLImageElement) {
+      this.poster.style.display = "none";
+    }
+  }
+  /** Utility function to group play behaviors. */
+  play() {
+    this.emit("sd-play");
+    this.playing = true;
+    this.fadeoutPoster();
+  }
+  /** Restrict keydown control to enter and space bar to mimic the native video tag behavior. If a KeyboardEvent is used, refocus on the native video element to give the user seamless keyboard control. */
+  handleKeydown(e) {
+    if (e instanceof KeyboardEvent && (e.key === "Enter" || e.key === " ")) {
+      this.play();
+      setTimeout(() => {
+        var _a;
+        (_a = this.querySelector("video")) == null ? void 0 : _a.focus();
+      });
+    }
+  }
+  /** Resize the play-button-bg when passing host element width breakpoint 414px. */
+  handleButtonResize() {
+    if (this.hostEl.clientWidth <= 414 && !this.isBelowBreakpoint) {
+      this.isBelowBreakpoint = true;
+    }
+    if (this.hostEl.clientWidth > 414 && this.isBelowBreakpoint) {
+      this.isBelowBreakpoint = false;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.handleButtonResize());
+    this.updateComplete.then(() => {
+      this.resizeObserver.observe(this.hostEl);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this.hostEl);
+  }
+  render() {
+    return html`<div part="base" aria-label="Video Player" class="cursor-pointer"><button part="play-button" aria-label="Play video" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${cx(
+      this.playing && "pointer-events-none",
+      "w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline"
+    )}"><div part="play-button-bg" class="${cx(
+      this.playing ? "opacity-0" : "opacity-100",
+      this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
+      "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition"
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-1-20-0-icon id="default-play-icon" library="system" name="start"></sd-1-20-0-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
+      this.overlay && !this.playing ? "opacity-100" : "opacity-0",
+      "bg-[rgba(0,0,0,0.65)] w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition"
+    )}"></div><slot></slot></div>`;
+  }
+};
+SdVideo.styles = [
+  SolidElement.styles,
+  css`:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){transition:opacity .3s}::slotted([slot=poster]){position:absolute;left:0;top:0;width:100%;z-index:10}#default-play-icon,::slotted([slot=play-icon]){position:absolute;left:50%;top:50%;translate:-50% -50%}`
+];
+__decorateClass([
+  query("[part=base]")
+], SdVideo.prototype, "hostEl", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdVideo.prototype, "playing", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdVideo.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SdVideo.prototype, "isBelowBreakpoint", 2);
+SdVideo = __decorateClass([
+  customElement("sd-1-20-0-video")
+], SdVideo);
+export {
+  SdVideo as default
+};

package/dist/versioned-package/internal/form.d.ts

@@ -5,11 +5,12 @@ export declare const formCollections: WeakMap<HTMLFormElement, Set<SolidFormCont
 export interface FormControlControllerOptions {
     form: (input: SolidFormControl) => HTMLFormElement | null;
     name: (input: SolidFormControl) => string;
-    value: (input: SolidFormControl) => unknown | unknown[];
-    defaultValue: (input: SolidFormControl) => unknown | unknown[];
+    value: (input: SolidFormControl) => unknown;
+    defaultValue: (input: SolidFormControl) => unknown;
     disabled: (input: SolidFormControl) => boolean;
     reportValidity: (input: SolidFormControl) => boolean;
     setValue: (input: SolidFormControl, value: unknown) => void;
+    assumeInteractionOn: string[];
 }
 export declare class FormControlController implements ReactiveController {
     host: SolidFormControl & ReactiveControllerHost;
@@ -24,12 +25,17 @@ export declare class FormControlController implements ReactiveController {
     private handleFormData;
     private handleFormSubmit;
     private handleFormReset;
-    private handleUserInput;
+    private handleInteraction;
     private reportFormValidity;
     private setUserInteracted;
     private doAction;
+    getForm(): HTMLFormElement | null;
     reset(invoker?: HTMLInputElement | SdButton): void;
     submit(invoker?: HTMLInputElement | SdButton): void;
     setValidity(isValid: boolean): void;
     updateValidity(): void;
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
 }
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;