@solid-design-system/components 3.24.0 → 4.0.0-next.1

package/dist/package/components/checkbox/checkbox.d.ts

@@ -1,42 +0,0 @@
-import '../icon/icon';
-import SolidElement from '../../internal/solid-element';
-import type { SolidFormControl } from '../../internal/solid-element';
-export default class SdCheckbox extends SolidElement implements SolidFormControl {
-    private readonly formControlController;
-    input: HTMLInputElement;
-    invalidMessage: HTMLDivElement;
-    title: string;
-    name: string;
-    value: string;
-    size: 'sm' | 'md' | 'lg';
-    disabled: boolean;
-    checked: boolean;
-    indeterminate: boolean;
-    defaultChecked: boolean;
-    form: string;
-    required: boolean;
-    showInvalidStyle: boolean;
-    get validity(): ValidityState;
-    firstUpdated(): void;
-    private handleClick;
-    private handleBlur;
-    private handleInput;
-    private handleInvalid;
-    private handleFocus;
-    handleDisabledChange(): void;
-    handleStateChange(): void;
-    click(): void;
-    focus(options?: FocusOptions): void;
-    blur(): void;
-    checkValidity(): boolean;
-    getForm(): HTMLFormElement | null;
-    reportValidity(): boolean;
-    setCustomValidity(message: string): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-checkbox': SdCheckbox;
-    }
-}

package/dist/package/components/checkbox/checkbox.js

@@ -1,198 +0,0 @@
-import "../icon/icon.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { defaultValue } from "../../internal/default-value.js";
-import { FormControlController } from "../../internal/form.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-import { query, property, state } from "lit/decorators.js";
-import { watch } from "../../internal/watch.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 SdCheckbox = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      value: (control) => control.checked ? control.value || "on" : void 0,
-      defaultValue: (control) => control.defaultChecked,
-      setValue: (control, checked) => control.checked = checked
-    });
-    this.title = "";
-    this.name = "";
-    this.size = "lg";
-    this.disabled = false;
-    this.checked = false;
-    this.indeterminate = false;
-    this.defaultChecked = false;
-    this.form = "";
-    this.required = false;
-    this.showInvalidStyle = false;
-  }
-  /** Gets the validity state object */
-  get validity() {
-    return this.input.validity;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
-  handleClick() {
-    this.checked = !this.checked;
-    this.indeterminate = false;
-    this.emit("sd-change");
-  }
-  handleBlur() {
-    this.emit("sd-blur");
-  }
-  handleInput() {
-    this.emit("sd-input");
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-    this.invalidMessage.textContent = event.target.validationMessage;
-  }
-  handleFocus() {
-    this.emit("sd-focus");
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-    this.formControlController.setValidity(this.disabled);
-  }
-  handleStateChange() {
-    this.input.checked = this.checked;
-    this.input.indeterminate = this.indeterminate;
-    this.formControlController.updateValidity();
-  }
-  /** Simulates a click on the checkbox. */
-  click() {
-    this.input.click();
-  }
-  /** Sets focus on the checkbox. */
-  focus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the checkbox. */
-  blur() {
-    this.input.blur();
-  }
-  /** Checks for validity but does not show a validation message. Returns true when valid and false when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows a validation message if the control is invalid. */
-  reportValidity() {
-    this.formControlController.fakeUserInteraction();
-    return this.input.reportValidity();
-  }
-  /**
-   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   */
-  setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  render() {
-    const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
-    return html`<label part="base" class="${cx(
-      "sd-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
-      this.disabled && "hover:cursor-not-allowed",
-      {
-        /* sizes, fonts */
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-base"
-      }[this.size]
-    )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.checked ? "true" : "false"}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
-      `relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4
-            peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
-            peer-focus-visible:outline-primary`,
-      {
-        sm: "mt-[2px]",
-        md: "mt-[3px]",
-        lg: "mt-[3px]"
-      }[this.size],
-      {
-        disabledIndeterminate: "border-neutral-500 bg-neutral-500",
-        disabledChecked: "border-neutral-500 bg-neutral-500",
-        disabled: "border-neutral-500",
-        invalidIndeterminate: "border-error bg-error group-hover:bg-error-400",
-        invalid: "border-error group-hover:bg-neutral-200",
-        filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
-        default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
-      }[checkboxState]
-    )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
-      "select-none inline-block ml-2",
-      this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
-    )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
-  }
-};
-SdCheckbox.styles = [
-  SolidElement.styles,
-  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-width:0}:host([required]) #label::after{content:' *'}`
-];
-__decorateClass([
-  query('input[type="checkbox"]')
-], SdCheckbox.prototype, "input", 2);
-__decorateClass([
-  query("#invalid-message")
-], SdCheckbox.prototype, "invalidMessage", 2);
-__decorateClass([
-  property()
-], SdCheckbox.prototype, "title", 2);
-__decorateClass([
-  property()
-], SdCheckbox.prototype, "name", 2);
-__decorateClass([
-  property()
-], SdCheckbox.prototype, "value", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdCheckbox.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdCheckbox.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdCheckbox.prototype, "checked", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdCheckbox.prototype, "indeterminate", 2);
-__decorateClass([
-  defaultValue("checked")
-], SdCheckbox.prototype, "defaultChecked", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdCheckbox.prototype, "form", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdCheckbox.prototype, "required", 2);
-__decorateClass([
-  state()
-], SdCheckbox.prototype, "showInvalidStyle", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SdCheckbox.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
-], SdCheckbox.prototype, "handleStateChange", 1);
-SdCheckbox = __decorateClass([
-  customElement("sd-checkbox")
-], SdCheckbox);
-export {
-  SdCheckbox as default
-};

package/dist/package/components/checkbox-group/checkbox-group.d.ts

@@ -1,20 +0,0 @@
-import '../icon/icon';
-import SolidElement from '../../internal/solid-element';
-export default class SdCheckboxGroup extends SolidElement {
-    private readonly hasSlotController;
-    size: 'lg' | 'md' | 'sm';
-    orientation: 'horizontal' | 'vertical';
-    label: string;
-    private getAllCheckboxes;
-    private syncCheckboxElements;
-    private syncCheckboxes;
-    handleSizeChange(): void;
-    handleInvalid(): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-checkbox-group': SdCheckboxGroup;
-    }
-}

package/dist/package/components/checkbox-group/checkbox-group.js

@@ -1,99 +0,0 @@
-import "../icon/icon.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { HasSlotController } from "../../internal/slot.js";
-import { property } from "lit/decorators.js";
-import { watch } from "../../internal/watch.js";
-import componentStyles from "../../styles/component.styles.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 SdCheckboxGroup = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "label");
-    this.size = "lg";
-    this.orientation = "vertical";
-    this.label = "";
-  }
-  getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-checkbox")];
-  }
-  async syncCheckboxElements() {
-    const checkboxes = this.getAllCheckboxes();
-    await Promise.all(
-      // Sync the checked state and size
-      checkboxes.map(async (checkbox) => {
-        await checkbox.updateComplete;
-        checkbox.size = this.size;
-      })
-    );
-  }
-  syncCheckboxes() {
-    if (customElements.get("sd-checkbox")) {
-      this.syncCheckboxElements();
-    } else {
-      customElements.whenDefined("sd-checkbox").then(() => this.syncCheckboxes());
-    }
-  }
-  handleSizeChange() {
-    this.syncCheckboxes();
-  }
-  handleInvalid() {
-    this.syncCheckboxes();
-  }
-  render() {
-    const hasLabelSlot = this.hasSlotController.test("label");
-    const hasLabel = this.label ? true : hasLabelSlot;
-    const defaultSlot = html`<slot @slotchange="${this.syncCheckboxes}"></slot>`;
-    return html`<fieldset part="form-control" class="${cx(
-      "border-0 p-0 m-0",
-      {
-        /* sizes, fonts */
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-base"
-      }[this.size]
-    )}" role="group" aria-labelledby="label"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
-      {
-        vertical: "flex flex-col",
-        horizontal: "flex flex-row"
-      }[this.orientation]
-    )}">${defaultSlot}</div></fieldset>`;
-  }
-};
-SdCheckboxGroup.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-checkbox){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
-];
-__decorateClass([
-  property({ reflect: true })
-], SdCheckboxGroup.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdCheckboxGroup.prototype, "orientation", 2);
-__decorateClass([
-  property()
-], SdCheckboxGroup.prototype, "label", 2);
-__decorateClass([
-  watch("size", { waitUntilFirstUpdate: true })
-], SdCheckboxGroup.prototype, "handleSizeChange", 1);
-__decorateClass([
-  watch("invalid", { waitUntilFirstUpdate: true })
-], SdCheckboxGroup.prototype, "handleInvalid", 1);
-SdCheckboxGroup = __decorateClass([
-  customElement("sd-checkbox-group")
-], SdCheckboxGroup);
-export {
-  SdCheckboxGroup as default
-};

package/dist/package/components/combobox/combobox.d.ts

@@ -1,129 +0,0 @@
-import { type CSSResultGroup, type TemplateResult } from 'lit';
-import { type OptionRenderer } from './option-renderer.js';
-import SdIcon from '../icon/icon';
-import SdPopup from '../popup/popup';
-import SdTag from '../tag/tag';
-import SolidElement from '../../internal/solid-element';
-import type { SolidFormControl } from '../../internal/solid-element';
-import type SdOptgroup from '../optgroup/optgroup.js';
-import type SdOption from '../option/option';
-export default class SdCombobox extends SolidElement implements SolidFormControl {
-    static dependencies: {
-        'sd-icon': typeof SdIcon;
-        'sd-popup': typeof SdPopup;
-        'sd-tag': typeof SdTag;
-    };
-    private readonly formControlController;
-    private readonly hasSlotController;
-    private readonly localize;
-    popup: SdPopup;
-    combobox: HTMLSlotElement;
-    displayInput: HTMLInputElement;
-    valueInput: HTMLInputElement;
-    listbox: HTMLSlotElement;
-    tagWrapper: HTMLDivElement;
-    filteredWrapper: HTMLSlotElement;
-    private defaultSlot;
-    invalidMessage: HTMLDivElement;
-    hasHover: boolean;
-    private hasFocus;
-    displayInputValue: string;
-    selectedTextLabel: string;
-    selectedOptions: (SdOption | undefined)[];
-    filteredOptions: (SdOption | SdOptgroup | undefined)[];
-    allOptions: (SdOption | SdOptgroup | undefined)[];
-    lastOption: SdOption | undefined;
-    showValidStyle: boolean;
-    showInvalidStyle: boolean;
-    name: string;
-    value: string | string[];
-    defaultValue: string;
-    size: 'lg' | 'md' | 'sm';
-    placeholder: string;
-    disabled: boolean;
-    clearable: boolean;
-    open: boolean;
-    hoist: boolean;
-    label: string;
-    placement: 'top' | 'bottom';
-    helpText: string;
-    form: string;
-    required: boolean;
-    currentPlacement: "top" | "bottom";
-    getOption: OptionRenderer;
-    multiple: boolean;
-    useTags: boolean;
-    maxOptionsVisible: number;
-    styleOnValid: boolean;
-    filter: (option: SdOption, queryString: string) => boolean;
-    getTag: (option: SdOption, index: number) => TemplateResult | string | HTMLElement;
-    connectedCallback(): void;
-    firstUpdated(): void;
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    protected get options(): (SdOption | SdOptgroup | TemplateResult<1>)[];
-    protected get tags(): (TemplateResult<1> | TemplateResult<1>[])[];
-    private addOpenListeners;
-    private removeOpenListeners;
-    private handleFocus;
-    private handleBlur;
-    private handleDocumentFocusIn;
-    private handleDocumentKeyDown;
-    private handleDocumentMouseDown;
-    private handleTagKeyDown;
-    private handleTagMaxOptionsKeyDown;
-    private handleLabelClick;
-    private handleTagRemove;
-    private handleComboboxMouseDown;
-    private handleComboboxKeyDown;
-    private handleClearClick;
-    private handleNoResultsClick;
-    private clearCombobox;
-    private preventLoosingFocus;
-    private handleOptionClick;
-    private selectNextOption;
-    private getAllFilteredOptions;
-    private getCurrentOption;
-    private setCurrentOption;
-    private toggleOptionSelection;
-    private findOptionByValue;
-    private selectedOptionsAndValueSynced;
-    private isOptionSelected;
-    private syncSelectedOptionsAndValue;
-    private compareOptions;
-    private setSelectedOptions;
-    private setOrderedSelectedOptions;
-    private selectionChanged;
-    private createComboboxOptionsFromQuery;
-    private handleInvalid;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleCurrentPlacement;
-    handleFilterChange(): void;
-    handleUseTagsChange(): void;
-    applySizeToOptions(): void;
-    handleDisabledChange(): void;
-    handleValueChange(): void;
-    handleDisplayInputValueChange(): void;
-    handleOpenChange(): Promise<void>;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    checkValidity(): boolean;
-    getForm(): HTMLFormElement | null;
-    reportValidity(): boolean;
-    setCustomValidity(message: string): void;
-    focus(options?: FocusOptions): void;
-    blur(): void;
-    private handleInput;
-    private handleChange;
-    private getSlottedOptions;
-    private getSlottedOptGroups;
-    private handleDefaultSlotChange;
-    render(): TemplateResult<1>;
-    static styles: CSSResultGroup;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-combobox': SdCombobox;
-    }
-}