@solid-design-system/components 3.23.4 → 4.0.0-next.0

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

@@ -1,238 +0,0 @@
-import "../popup/popup.js";
-import { parseDuration, stopAnimations, animateTo } from "../../internal/animate.js";
-import { unsafeCSS, css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
-import { LocalizeController } from "../../utilities/localize.js";
-import { query, property } from "lit/decorators.js";
-import { waitForEvent } from "../../internal/event.js";
-import { watch } from "../../internal/watch.js";
-import cx from "classix";
-import InteractiveStyles from "../../styles/interactive/interactive.css.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 SdTooltip = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.isFocusTriggered = false;
-    this.localize = new LocalizeController(this);
-    this.size = "lg";
-    this.content = "";
-    this.placement = "top";
-    this.disabled = false;
-    this.open = false;
-    this.trigger = "click focus";
-    this.hoist = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseOut = this.handleMouseOut.bind(this);
-    this.updateComplete.then(() => {
-      this.addEventListener("blur", this.handleBlur, true);
-      this.addEventListener("focus", this.handleFocus, true);
-      this.addEventListener("click", this.handleClick);
-      this.addEventListener("keydown", this.handleKeyDown);
-      this.addEventListener("mouseover", this.handleMouseOver);
-      this.addEventListener("mouseout", this.handleMouseOut);
-    });
-  }
-  firstUpdated() {
-    this.body.hidden = !this.open;
-    if (this.open) {
-      this.popup.active = true;
-      this.popup.reposition();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("blur", this.handleBlur, true);
-    this.removeEventListener("focus", this.handleFocus, true);
-    this.removeEventListener("click", this.handleClick);
-    this.removeEventListener("keydown", this.handleKeyDown);
-    this.removeEventListener("mouseover", this.handleMouseOver);
-    this.removeEventListener("mouseout", this.handleMouseOut);
-  }
-  handleBlur() {
-    if (this.hasTrigger("focus")) {
-      this.hide();
-    }
-  }
-  handleClick() {
-    if (this.hasTrigger("click")) {
-      if (this.isFocusTriggered) {
-        this.isFocusTriggered = false;
-        return;
-      }
-      if (this.open) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }
-  }
-  handleFocus() {
-    if (this.hasTrigger("focus")) {
-      this.isFocusTriggered = true;
-      this.show();
-    }
-  }
-  handleKeyDown(event) {
-    if (this.open && event.key === "Escape") {
-      event.stopPropagation();
-      this.hide();
-    }
-  }
-  handleMouseOver() {
-    if (this.hasTrigger("hover")) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue("--show-delay"));
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.show(), delay);
-    }
-  }
-  handleMouseOut() {
-    if (this.hasTrigger("hover")) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue("--hide-delay"));
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
-    }
-  }
-  hasTrigger(triggerType) {
-    const triggers = this.trigger.split(" ");
-    return triggers.includes(triggerType);
-  }
-  async handleOpenChange() {
-    if (this.open) {
-      if (this.disabled) {
-        return;
-      }
-      this.emit("sd-show");
-      await stopAnimations(this.body);
-      this.body.hidden = false;
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, "tooltip.show", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("sd-after-show");
-    } else {
-      this.emit("sd-hide");
-      await stopAnimations(this.body);
-      const { keyframes, options } = getAnimation(this, "tooltip.hide", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.popup.active = false;
-      this.body.hidden = true;
-      this.emit("sd-after-hide");
-    }
-  }
-  async handleOptionsChange() {
-    if (this.hasUpdated) {
-      await this.updateComplete;
-      this.popup.reposition();
-    }
-  }
-  handleDisabledChange() {
-    if (this.disabled && this.open) {
-      this.hide();
-    }
-  }
-  /** Shows the tooltip. */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "sd-after-show");
-  }
-  /** Hides the tooltip */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "sd-after-hide");
-  }
-  render() {
-    const isStart = this.placement.endsWith("-start");
-    const isEnd = this.placement.endsWith("-end");
-    return html`<sd-3-23-4-popup part="base" exportparts="
-          popup:base__popup,
-          arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-23-4-icon library="system" name="info-circle" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-3-23-4-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-3-23-4-popup>`;
-  }
-};
-SdTooltip.styles = [
-  SolidElement.styles,
-  unsafeCSS(InteractiveStyles),
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-23-4-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-23-4-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-23-4-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-23-4-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-23-4-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`
-];
-__decorateClass([
-  query("slot:not([name])")
-], SdTooltip.prototype, "defaultSlot", 2);
-__decorateClass([
-  query("#tooltip")
-], SdTooltip.prototype, "body", 2);
-__decorateClass([
-  query("sd-3-23-4-popup")
-], SdTooltip.prototype, "popup", 2);
-__decorateClass([
-  property()
-], SdTooltip.prototype, "size", 2);
-__decorateClass([
-  property()
-], SdTooltip.prototype, "content", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdTooltip.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdTooltip.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdTooltip.prototype, "open", 2);
-__decorateClass([
-  property()
-], SdTooltip.prototype, "trigger", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SdTooltip.prototype, "hoist", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SdTooltip.prototype, "handleOpenChange", 1);
-__decorateClass([
-  watch(["content", "hoist", "placement"])
-], SdTooltip.prototype, "handleOptionsChange", 1);
-__decorateClass([
-  watch("disabled")
-], SdTooltip.prototype, "handleDisabledChange", 1);
-SdTooltip = __decorateClass([
-  customElement("sd-3-23-4-tooltip")
-], SdTooltip);
-setDefaultAnimation("tooltip.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 150, easing: "ease" }
-});
-setDefaultAnimation("tooltip.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
-  ],
-  options: { duration: 150, easing: "ease" }
-});
-export {
-  SdTooltip as default
-};

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

@@ -1,26 +0,0 @@
-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 get video();
-    private fadeoutPoster;
-    private hidePoster;
-    private setVideoInert;
-    private play;
-    private handleKeydown;
-    private handleButtonResize;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-23-4-video': SdVideo;
-    }
-}

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

@@ -1,131 +0,0 @@
-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;
-  }
-  get video() {
-    return this.querySelector("video");
-  }
-  /** 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";
-    }
-  }
-  setVideoInert(inert) {
-    var _a, _b;
-    if (inert) {
-      (_a = this.video) == null ? void 0 : _a.setAttribute("inert", "");
-    } else {
-      (_b = this.video) == null ? void 0 : _b.removeAttribute("inert");
-    }
-  }
-  /** Utility function to group play behaviors. */
-  play() {
-    var _a;
-    this.emit("sd-play");
-    this.playing = true;
-    (_a = this.video) == null ? void 0 : _a.play();
-    this.fadeoutPoster();
-    this.setVideoInert(false);
-  }
-  /** 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.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.setVideoInert(true);
-    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",
-      "group 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 outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-3-23-4-icon id="default-play-icon" library="system" name="start"></sd-3-23-4-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-property:opacity;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::slotted([slot=poster]){position:absolute;left:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:10;width:100%}#default-play-icon,::slotted([slot=play-icon]){position:absolute;left:50%;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}`
-];
-__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-3-23-4-video")
-], SdVideo);
-export {
-  SdVideo as default
-};

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

@@ -1,10 +0,0 @@
-export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
-export declare function parseDuration(delay: number | string): number;
-export declare function prefersReducedMotion(): boolean;
-export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
-export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
-    height: string | number | null | undefined;
-    composite?: CompositeOperationOrAuto | undefined;
-    easing?: string | undefined;
-    offset?: number | null | undefined;
-}[];

package/dist/versioned-package/internal/animate.js

@@ -1,52 +0,0 @@
-function animateTo(el, keyframes, options) {
-  return new Promise((resolve) => {
-    if ((options == null ? void 0 : options.duration) === Infinity) {
-      throw new Error("Promise-based animations must be finite.");
-    }
-    const animation = el.animate(keyframes, {
-      ...options,
-      duration: prefersReducedMotion() ? 0 : options.duration
-    });
-    animation.addEventListener("cancel", resolve, { once: true });
-    animation.addEventListener("finish", resolve, { once: true });
-  });
-}
-function parseDuration(delay) {
-  delay = delay.toString().toLowerCase();
-  if (delay.indexOf("ms") > -1) {
-    return parseFloat(delay);
-  }
-  if (delay.indexOf("s") > -1) {
-    return parseFloat(delay) * 1e3;
-  }
-  return parseFloat(delay);
-}
-function prefersReducedMotion() {
-  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-  return query.matches;
-}
-function stopAnimations(el) {
-  return Promise.all(
-    el.getAnimations().map((animation) => {
-      return new Promise((resolve) => {
-        const handleAnimationEvent = requestAnimationFrame(resolve);
-        animation.addEventListener("cancel", () => handleAnimationEvent, { once: true });
-        animation.addEventListener("finish", () => handleAnimationEvent, { once: true });
-        animation.cancel();
-      });
-    })
-  );
-}
-function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
-  return keyframes.map((keyframe) => ({
-    ...keyframe,
-    height: keyframe.height === "auto" ? `${calculatedHeight}px` : keyframe.height
-  }));
-}
-export {
-  animateTo,
-  parseDuration,
-  prefersReducedMotion,
-  shimKeyframesHeightAuto,
-  stopAnimations
-};

package/dist/versioned-package/internal/debounce.js

@@ -1,15 +0,0 @@
-const TIMER_ID_KEY = Symbol();
-const debounce = (delay) => {
-  return (_target, _propertyKey, descriptor) => {
-    const fn = descriptor.value;
-    descriptor.value = function(...args) {
-      clearTimeout(this[TIMER_ID_KEY]);
-      this[TIMER_ID_KEY] = window.setTimeout(() => {
-        fn.apply(this, args);
-      }, delay);
-    };
-  };
-};
-export {
-  debounce
-};

package/dist/versioned-package/internal/default-value.js

@@ -1,21 +0,0 @@
-import { defaultConverter } from "lit";
-const defaultValue = (propertyName = "value") => (proto, key) => {
-  const ctor = proto.constructor;
-  const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
-  ctor.prototype.attributeChangedCallback = function(name, old, value) {
-    const options = ctor.getPropertyOptions(propertyName);
-    const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
-    if (name === attributeName) {
-      const converter = options.converter || defaultConverter;
-      const fromAttribute = typeof converter === "function" ? converter : (converter == null ? void 0 : converter.fromAttribute) ?? defaultConverter.fromAttribute;
-      const newValue = fromAttribute(value, options.type);
-      if (this[propertyName] !== newValue) {
-        this[key] = newValue;
-      }
-    }
-    attributeChangedCallback.call(this, name, old, value);
-  };
-};
-export {
-  defaultValue
-};

package/dist/versioned-package/internal/event.js

@@ -1,14 +0,0 @@
-function waitForEvent(el, eventName) {
-  return new Promise((resolve) => {
-    function done(event) {
-      if (event.target === el) {
-        el.removeEventListener(eventName, done);
-        resolve();
-      }
-    }
-    el.addEventListener(eventName, done);
-  });
-}
-export {
-  waitForEvent
-};