sp-component 0.0.1

package/dist/components/alert/sp-alert.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import { SpAlertVariant } from './sp-alert.types.js';
+/**
+ * Alert component for displaying contextual feedback messages.
+ *
+ * @element sp-alert
+ *
+ * @prop {SpAlertVariant} variant     - Visual style: info | success | warning | error
+ * @prop {string}         title       - Optional bold title above the message
+ * @prop {boolean}        dismissible - Shows a close button when true
+ * @prop {boolean}        open        - Controls visibility of the alert
+ *
+ * @fires {CustomEvent} sp-close - Emitted when the dismiss button is clicked
+ *
+ * @slot - Alert message content
+ */
+export declare class SpAlertComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    variant: SpAlertVariant;
+    title: string;
+    dismissible: boolean;
+    open: boolean;
+    render(): import('lit-html').TemplateResult;
+    /** Returns aria role based on variant urgency */
+    _getRole(): string;
+    readonly _handleClose: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-alert": SpAlertComponent;
+    }
+}
+//# sourceMappingURL=sp-alert.d.ts.map

package/dist/components/alert/sp-alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/sp-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;;;;;;;;;;;;GAaG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,cAAc,CAAU;IAGjC,KAAK,SAAM;IAGX,WAAW,UAAS;IAGpB,IAAI,UAAQ;IAEH,MAAM;IAIf,iDAAiD;IACjD,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,YAAY,aAGnB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

package/dist/components/alert/sp-alert.js

@@ -0,0 +1,42 @@
+import { unsafeCSS as m, LitElement as u } from "lit";
+import { property as p, customElement as f } from "lit/decorators.js";
+import c from "./sp-alert.css.js";
+import { alertTemplate as h } from "./sp-alert.template.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (a, s, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? y(s, i) : s, l = a.length - 1, n; l >= 0; l--)
+    (n = a[l]) && (e = (o ? n(s, i, e) : n(e)) || e);
+  return o && e && v(s, i, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "info", this.title = "", this.dismissible = !1, this.open = !0, this._handleClose = () => {
+      this.open = !1, this.dispatchEvent(new CustomEvent("sp-close", { bubbles: !0, composed: !0 }));
+    };
+  }
+  render() {
+    return h.call(this);
+  }
+  /** Returns aria role based on variant urgency */
+  _getRole() {
+    return this.variant === "error" || this.variant === "warning" ? "alert" : "status";
+  }
+};
+t.styles = m(c);
+r([
+  p({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+r([
+  p({ type: String })
+], t.prototype, "title", 2);
+r([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "dismissible", 2);
+r([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+t = r([
+  f("sp-alert")
+], t);
+export {
+  t as SpAlertComponent
+};

package/dist/components/alert/sp-alert.template.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from 'lit';
+import { SpAlertComponent } from './sp-alert.js';
+/**
+ * HTML template for sp-alert.
+ *
+ * Call as: alertTemplate.call(this) inside render()
+ */
+export declare function alertTemplate(this: SpAlertComponent): TemplateResult;
+//# sourceMappingURL=sp-alert.template.d.ts.map

package/dist/components/alert/sp-alert.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-alert.template.d.ts","sourceRoot":"","sources":["../../../src/components/alert/sp-alert.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc,CAkCpE"}

package/dist/components/alert/sp-alert.template.js

@@ -0,0 +1,27 @@
+import { nothing as e, html as l } from "lit";
+function i() {
+  return l`
+    ${this.open ? l`
+          <div class="sp-alert" role=${this._getRole()}>
+            <span class="sp-alert-icon" aria-hidden="true">
+              ${this.variant === "success" ? l`<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>` : this.variant === "warning" ? l`<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>` : this.variant === "error" ? l`<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>` : l`<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`}
+            </span>
+            <div class="sp-alert-body">
+              ${this.title ? l`<strong class="sp-alert-title">${this.title}</strong>` : e}
+              <div class="sp-alert-message"><slot></slot></div>
+            </div>
+            ${this.dismissible ? l`
+                  <button
+                    class="sp-alert-close"
+                    type="button"
+                    aria-label="Close"
+                    @click=${this._handleClose}
+                  >✕</button>
+                ` : e}
+          </div>
+        ` : e}
+  `;
+}
+export {
+  i as alertTemplate
+};

package/dist/components/alert/sp-alert.types.d.ts

@@ -0,0 +1,8 @@
+export type SpAlertVariant = "info" | "success" | "warning" | "error";
+export interface SpAlertProps {
+    variant: SpAlertVariant;
+    title: string;
+    dismissible: boolean;
+    open: boolean;
+}
+//# sourceMappingURL=sp-alert.types.d.ts.map

package/dist/components/alert/sp-alert.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-alert.types.d.ts","sourceRoot":"","sources":["../../../src/components/alert/sp-alert.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;CACf"}

package/dist/components/autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export { SpAutocompleteComponent } from './sp-autocomplete.js';
+export type { SpAutocompleteProps, SpAutocompleteOption, SpAutocompleteSize, SpAutocompleteFilterMode } from './sp-autocomplete.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/autocomplete/sp-autocomplete.css.js

@@ -0,0 +1,4 @@
+const e = ':host{display:block;font-family:inherit}.sp-ac-wrapper{position:relative}.sp-ac-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-ac-required{color:var(--sp-error, #FF4D4F)}.sp-ac-container{position:relative;display:flex;align-items:center;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);transition:border-color .2s,box-shadow .2s}.sp-ac-container--open,.sp-ac-container:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59,130,246,.2))}.sp-ac-container--error{border-color:var(--sp-error, #FF4D4F)}.sp-ac-container--error:focus-within{box-shadow:0 0 0 2px var(--sp-error-focus, rgba(255,77,79,.2))}.sp-ac-container--disabled{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}.sp-ac-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 12px;min-width:0;cursor:text}.sp-ac-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-ac-container--disabled .sp-ac-input{cursor:not-allowed}:host([size="sm"]) .sp-ac-input{padding:5px 8px;font-size:12px}:host([size="lg"]) .sp-ac-input{padding:11px 16px;font-size:16px}.sp-ac-multi-wrap{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center;padding:4px 6px;min-height:36px}:host([size="sm"]) .sp-ac-multi-wrap{min-height:28px;padding:3px 5px}:host([size="lg"]) .sp-ac-multi-wrap{min-height:46px;padding:6px 8px}.sp-ac-input--multi{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:2px 4px;cursor:text}:host([size="sm"]) .sp-ac-input--multi{font-size:12px}:host([size="lg"]) .sp-ac-input--multi{font-size:16px}.sp-ac-input--multi::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-ac-tag{display:inline-flex;align-items:center;gap:3px;background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);border:1px solid var(--sp-primary-focus, rgba(59,130,246,.3));border-radius:4px;padding:2px 4px 2px 8px;font-size:12px;line-height:1.4;max-width:200px}.sp-ac-tag-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-ac-tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--sp-primary, #3b82f6);padding:0 2px;line-height:1;font-size:14px;flex-shrink:0;border-radius:2px}.sp-ac-tag-remove:hover{color:var(--sp-error, #FF4D4F);background:var(--sp-error-bg, #FFF2F0)}.sp-ac-clear{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0 6px;flex-shrink:0;font-size:14px;line-height:1}.sp-ac-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-ac-arrow-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0 10px;align-self:stretch;color:var(--sp-text-muted, #6b7280);flex-shrink:0}.sp-ac-arrow-btn:disabled{cursor:not-allowed}.sp-ac-arrow{font-size:12px;pointer-events:none;transition:transform .2s}.sp-ac-container--open .sp-ac-arrow{transform:rotate(180deg)}.sp-ac-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:9999;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;box-shadow:0 10px 25px #0000001f,0 4px 8px #0000000f;max-height:var(--sp-ac-max-height, 300px);overflow-y:auto;padding:4px 0}.sp-ac-group-label{padding:6px 12px 2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sp-text-muted, #6b7280)}.sp-ac-option{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s}.sp-ac-option:hover:not(.sp-ac-option--disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-ac-option--highlighted{background:var(--sp-bg-muted, #f3f4f6)}.sp-ac-option--selected{background:var(--sp-primary-bg, #eff6ff)}.sp-ac-option--selected.sp-ac-option--highlighted{filter:brightness(.97)}.sp-ac-option--disabled{opacity:.4;cursor:not-allowed}.sp-ac-option-check{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--sp-primary, #3b82f6);display:flex;align-items:center;justify-content:center}.sp-ac-option-content{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.sp-ac-option-label{font-size:14px;color:var(--sp-text-secondary, #374151);line-height:1.4}.sp-ac-option--selected .sp-ac-option-label{color:var(--sp-primary, #3b82f6);font-weight:500}.sp-ac-option-desc{font-size:12px;color:var(--sp-text-muted, #6b7280);line-height:1.3}.sp-ac-option--create .sp-ac-option-create-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--sp-success, #52C41A)}.sp-ac-option--create{color:var(--sp-success, #52C41A);font-size:14px}.sp-ac-option--create:hover,.sp-ac-option--create.sp-ac-option--highlighted{background:var(--sp-success-bg, #F6FFED)}.sp-ac-no-results{padding:14px 12px;font-size:14px;color:var(--sp-text-placeholder, #9ca3af);text-align:center}.sp-ac-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 12px;font-size:14px;color:var(--sp-text-muted, #6b7280)}.sp-ac-spinner{width:16px;height:16px;flex-shrink:0;border:2px solid var(--sp-border, #d1d5db);border-top-color:var(--sp-primary, #3b82f6);border-radius:50%;animation:sp-ac-spin .7s linear infinite}@keyframes sp-ac-spin{to{transform:rotate(360deg)}}.sp-ac-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-ac-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(max-width:479px){.sp-ac-wrapper{width:100%}.sp-ac-dropdown{left:0;right:0}}@media(prefers-reduced-motion:reduce){.sp-ac-container,.sp-ac-arrow,.sp-ac-option{transition:none}.sp-ac-spinner{animation:none}}';
+export {
+  e as default
+};

package/dist/components/autocomplete/sp-autocomplete.d.ts

@@ -0,0 +1,102 @@
+import { LitElement } from 'lit';
+import { SpAutocompleteSize, SpAutocompleteFilterMode, SpAutocompleteOption } from './sp-autocomplete.types.js';
+/**
+ * Autocomplete component with single/multiple selection, option groups,
+ * descriptions, creatable mode, and async search support.
+ *
+ * @element sp-autocomplete
+ *
+ * @prop {string}                    value         - Selected value (single mode)
+ * @prop {string[]}                  values        - Selected values (multiple mode)
+ * @prop {SpAutocompleteOption[]}    options       - Array of options (supports group & description)
+ * @prop {string}                    placeholder   - Input placeholder
+ * @prop {boolean}                   disabled      - Disables the component
+ * @prop {boolean}                   required      - Marks the field as required
+ * @prop {string}                    name          - Form field name
+ * @prop {SpAutocompleteSize}        size          - sm | md | lg
+ * @prop {boolean}                   clearable     - Shows clear button
+ * @prop {boolean}                   multiple      - Enables multiple selection
+ * @prop {number}                    maxSelections - Max selections (0 = unlimited)
+ * @prop {SpAutocompleteFilterMode}  filterMode    - contains | startsWith | none (async)
+ * @prop {boolean}                   loading       - Shows loading spinner in dropdown
+ * @prop {boolean}                   creatable     - Allows creating new options
+ * @prop {string}                    createText    - Template for create option label
+ * @prop {number}                    debounce      - Debounce ms for sp-search event
+ * @prop {string}                    error         - Error message
+ * @prop {string}                    hint          - Hint message
+ * @prop {string}                    label         - Label text
+ * @prop {string}                    noResultsText - Text when no options match
+ *
+ * @fires {CustomEvent<{ value: string }>}    sp-change - Single mode selection change
+ * @fires {CustomEvent<{ values: string[] }>} sp-change - Multiple mode selection change
+ * @fires {CustomEvent<{ query: string }>}    sp-search - Input query changed (for async fetch)
+ * @fires {CustomEvent<{ label: string }>}    sp-create - User requested to create a new option
+ * @fires {CustomEvent}                        sp-clear  - Selection was cleared
+ */
+export declare class SpAutocompleteComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: string;
+    values: string[];
+    options: SpAutocompleteOption[];
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    size: SpAutocompleteSize;
+    clearable: boolean;
+    multiple: boolean;
+    maxSelections: number;
+    filterMode: SpAutocompleteFilterMode;
+    loading: boolean;
+    creatable: boolean;
+    createText: string;
+    debounce: number;
+    error: string;
+    hint: string;
+    label: string;
+    noResultsText: string;
+    _query: string;
+    _open: boolean;
+    _highlightedIndex: number | null;
+    get _filteredOptions(): SpAutocompleteOption[];
+    /** Flat navigable options (used for keyboard index) */
+    get _flatOptions(): SpAutocompleteOption[];
+    /** Options grouped for rendering */
+    get _renderGroups(): Array<{
+        label: string | null;
+        options: Array<{
+            option: SpAutocompleteOption;
+            flatIndex: number;
+        }>;
+    }>;
+    get _selectedLabel(): string;
+    /** True if the "create" option should be shown */
+    get _showCreate(): boolean;
+    get _createLabel(): string;
+    private _updateFormValue;
+    formResetCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private readonly _handleOutsideClick;
+    private _close;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    readonly _handleToggleDropdown: (e: Event) => void;
+    readonly _handleInputFocus: () => void;
+    readonly _handleInputInput: (e: Event) => void;
+    readonly _handleSelect: (option: SpAutocompleteOption) => void;
+    readonly _handleCreate: () => void;
+    readonly _handleRemoveValue: (val: string, e: Event) => void;
+    readonly _handleClear: (e: Event) => void;
+    readonly _handleKeydown: (e: KeyboardEvent) => void;
+    private _scrollHighlightedIntoView;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-autocomplete": SpAutocompleteComponent;
+    }
+}
+//# sourceMappingURL=sp-autocomplete.d.ts.map

package/dist/components/autocomplete/sp-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/sp-autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAErH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,uBAAwB,SAAQ,UAAU;;IACrD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAW7B,KAAK,SAAM;IAGX,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,OAAO,EAAE,oBAAoB,EAAE,CAAM;IAGrC,WAAW,SAAe;IAG1B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,IAAI,EAAE,kBAAkB,CAAQ;IAGhC,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,aAAa,SAAK;IAGlB,UAAU,EAAE,wBAAwB,CAAc;IAGlD,OAAO,UAAS;IAGhB,SAAS,UAAS;IAGlB,UAAU,SAAsB;IAGhC,QAAQ,SAAK;IAGb,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,aAAa,SAAsB;IAGnC,MAAM,SAAM;IAGZ,KAAK,UAAS;IAGd,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAIxC,IAAI,gBAAgB,IAAI,oBAAoB,EAAE,CAQ7C;IAED,uDAAuD;IACvD,IAAI,YAAY,IAAI,oBAAoB,EAAE,CAEzC;IAED,oCAAoC;IACpC,IAAI,aAAa,IAAI,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC;YAAE,MAAM,EAAE,oBAAoB,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,CAAC,CAgBxH;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,kDAAkD;IAClD,IAAI,WAAW,IAAI,OAAO,CAGzB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAID,OAAO,CAAC,gBAAgB;IAoBxB,iBAAiB,IAAI,IAAI;IAOhB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAS/D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAIlC;IAEF,OAAO,CAAC,MAAM;IAML,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAQrC,QAAQ,CAAC,qBAAqB,GAAI,GAAG,KAAK,UAWxC;IAEF,QAAQ,CAAC,iBAAiB,aAExB;IAEF,QAAQ,CAAC,iBAAiB,GAAI,GAAG,KAAK,UAapC;IAEF,QAAQ,CAAC,aAAa,GAAI,QAAQ,oBAAoB,UA0BpD;IAEF,QAAQ,CAAC,aAAa,aAOpB;IAEF,QAAQ,CAAC,kBAAkB,GAAI,KAAK,MAAM,EAAE,GAAG,KAAK,UAKlD;IAEF,QAAQ,CAAC,YAAY,GAAI,GAAG,KAAK,UAY/B;IAEF,QAAQ,CAAC,cAAc,GAAI,GAAG,aAAa,KAAG,IAAI,CAmDhD;IAEF,OAAO,CAAC,0BAA0B;IAMzB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,uBAAuB,CAAC;KAC5C;CACF"}

package/dist/components/autocomplete/sp-autocomplete.js

@@ -0,0 +1,220 @@
+import { unsafeCSS as m, LitElement as g } from "lit";
+import { property as a, state as c, customElement as b } from "lit/decorators.js";
+import w from "./sp-autocomplete.css.js";
+import { autocompleteTemplate as C } from "./sp-autocomplete.template.js";
+var x = Object.defineProperty, q = Object.getOwnPropertyDescriptor, v = (e) => {
+  throw TypeError(e);
+}, l = (e, t, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? q(t, s) : t, u = e.length - 1, d; u >= 0; u--)
+    (d = e[u]) && (o = (r ? d(t, s, o) : d(o)) || o);
+  return r && o && x(t, s, o), o;
+}, y = (e, t, s) => t.has(e) || v("Cannot " + s), h = (e, t, s) => (y(e, t, "read from private field"), t.get(e)), _ = (e, t, s) => t.has(e) ? v("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), f = (e, t, s, r) => (y(e, t, "write to private field"), t.set(e, s), s), n, p;
+let i = class extends g {
+  constructor() {
+    super(), _(this, n), _(this, p, null), this.value = "", this.values = [], this.options = [], this.placeholder = "Search...", this.disabled = !1, this.required = !1, this.name = "", this.size = "md", this.clearable = !1, this.multiple = !1, this.maxSelections = 0, this.filterMode = "contains", this.loading = !1, this.creatable = !1, this.createText = 'Create "{query}"', this.debounce = 0, this.error = "", this.hint = "", this.label = "", this.noResultsText = "No results found", this._query = "", this._open = !1, this._highlightedIndex = null, this._handleOutsideClick = (e) => {
+      !this.contains(e.target) && e.composedPath()[0] !== this && this._close();
+    }, this._handleToggleDropdown = (e) => {
+      e.stopPropagation(), !this.disabled && (this._open ? this._close() : (this._open = !0, this.updateComplete.then(() => {
+        var t;
+        (t = this.renderRoot.querySelector(".sp-ac-input")) == null || t.focus();
+      })));
+    }, this._handleInputFocus = () => {
+      this._open = !0;
+    }, this._handleInputInput = (e) => {
+      this._query = e.target.value, this._open = !0, this._highlightedIndex = null, this.debounce > 0 ? (h(this, p) && clearTimeout(h(this, p)), f(this, p, setTimeout(() => {
+        this.dispatchEvent(new CustomEvent("sp-search", { detail: { query: this._query }, bubbles: !0, composed: !0 }));
+      }, this.debounce))) : this.dispatchEvent(new CustomEvent("sp-search", { detail: { query: this._query }, bubbles: !0, composed: !0 }));
+    }, this._handleSelect = (e) => {
+      if (!e.disabled) {
+        if (this.multiple) {
+          this.values.includes(e.value) ? this.values = this.values.filter((s) => s !== e.value) : (this.maxSelections === 0 || this.values.length < this.maxSelections) && (this.values = [...this.values, e.value]), this._query = "", this._highlightedIndex = null, this._updateFormValue(), this.updateComplete.then(() => {
+            var s;
+            (s = this.renderRoot.querySelector(".sp-ac-input")) == null || s.focus();
+          }), this.dispatchEvent(new CustomEvent("sp-change", { detail: { values: this.values }, bubbles: !0, composed: !0 }));
+          return;
+        }
+        this.value = e.value, this._query = "", this._open = !1, this._highlightedIndex = null, this._updateFormValue(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+      }
+    }, this._handleCreate = () => {
+      const e = this._query.trim();
+      e && (this._query = "", this._open = !1, this._highlightedIndex = null, this.dispatchEvent(new CustomEvent("sp-create", { detail: { label: e }, bubbles: !0, composed: !0 })));
+    }, this._handleRemoveValue = (e, t) => {
+      t.stopPropagation(), this.values = this.values.filter((s) => s !== e), this._updateFormValue(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { values: this.values }, bubbles: !0, composed: !0 }));
+    }, this._handleClear = (e) => {
+      e.stopPropagation(), this.multiple ? this.values = [] : this.value = "", this._query = "", this._open = !1, this._highlightedIndex = null, this._updateFormValue(), this.dispatchEvent(new CustomEvent("sp-clear", { bubbles: !0, composed: !0 }));
+    }, this._handleKeydown = (e) => {
+      if (e.key === "Backspace" && this.multiple && this._query === "" && this.values.length > 0) {
+        this.values = this.values.slice(0, -1), this._updateFormValue(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { values: this.values }, bubbles: !0, composed: !0 }));
+        return;
+      }
+      if (!this._open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault(), this._open = !0;
+          return;
+        }
+        return;
+      }
+      const t = this._flatOptions, s = t.length + (this._showCreate ? 1 : 0), r = this._highlightedIndex ?? -1;
+      if (e.key === "ArrowDown")
+        e.preventDefault(), this._highlightedIndex = r < s - 1 ? r + 1 : 0, this.updateComplete.then(() => this._scrollHighlightedIntoView());
+      else if (e.key === "ArrowUp")
+        e.preventDefault(), this._highlightedIndex = r > 0 ? r - 1 : s - 1, this.updateComplete.then(() => this._scrollHighlightedIntoView());
+      else if (e.key === "Enter" && r >= 0)
+        if (e.preventDefault(), this._showCreate && r === t.length)
+          this._handleCreate();
+        else {
+          const o = t[r];
+          o && !o.disabled && this._handleSelect(o);
+        }
+      else e.key === "Escape" ? (e.preventDefault(), this._close()) : e.key === "Home" ? (e.preventDefault(), this._highlightedIndex = 0, this.updateComplete.then(() => this._scrollHighlightedIntoView())) : e.key === "End" && (e.preventDefault(), this._highlightedIndex = s - 1, this.updateComplete.then(() => this._scrollHighlightedIntoView()));
+    }, f(this, n, this.attachInternals());
+  }
+  // ---- Computed ----
+  get _filteredOptions() {
+    if (this.filterMode === "none") return this.options;
+    const e = this._query.toLowerCase();
+    return e ? this.options.filter((t) => {
+      const s = t.label.toLowerCase();
+      return this.filterMode === "startsWith" ? s.startsWith(e) : s.includes(e);
+    }) : this.options;
+  }
+  /** Flat navigable options (used for keyboard index) */
+  get _flatOptions() {
+    return this._filteredOptions;
+  }
+  /** Options grouped for rendering */
+  get _renderGroups() {
+    const e = this._filteredOptions;
+    if (!e.some((r) => r.group))
+      return [{ label: null, options: e.map((r, o) => ({ option: r, flatIndex: o })) }];
+    const s = /* @__PURE__ */ new Map();
+    return e.forEach((r, o) => {
+      const u = r.group ?? "";
+      s.has(u) || s.set(u, []), s.get(u).push({ option: r, flatIndex: o });
+    }), Array.from(s.entries()).map(([r, o]) => ({
+      label: r || null,
+      options: o
+    }));
+  }
+  get _selectedLabel() {
+    var e;
+    return ((e = this.options.find((t) => t.value === this.value)) == null ? void 0 : e.label) ?? this.value;
+  }
+  /** True if the "create" option should be shown */
+  get _showCreate() {
+    return !this.creatable || !this._query.trim() ? !1 : !this._filteredOptions.some((e) => e.label.toLowerCase() === this._query.toLowerCase());
+  }
+  get _createLabel() {
+    return this.createText.replace("{query}", this._query);
+  }
+  // ---- Form internals ----
+  _updateFormValue() {
+    if (this.multiple) {
+      const e = new FormData();
+      this.values.forEach((t) => e.append(this.name || "values", t)), h(this, n).setFormValue(e), this.required && this.values.length === 0 ? h(this, n).setValidity({ valueMissing: !0 }, "Please select at least one option") : h(this, n).setValidity({});
+    } else
+      h(this, n).setFormValue(this.value), this.required && !this.value ? h(this, n).setValidity({ valueMissing: !0 }, "Please select an option") : h(this, n).setValidity({});
+  }
+  formResetCallback() {
+    this.value = "", this.values = [], this._query = "", this._updateFormValue();
+  }
+  updated(e) {
+    super.updated(e), ["value", "values", "required", "multiple"].some((t) => e.has(t)) && this._updateFormValue();
+  }
+  _close() {
+    this._open = !1, this._highlightedIndex = null, this.multiple || (this._query = "");
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("mousedown", this._handleOutsideClick), h(this, p) && clearTimeout(h(this, p));
+  }
+  _scrollHighlightedIntoView() {
+    if (this._highlightedIndex === null) return;
+    const e = this.renderRoot.querySelector(`#sp-ac-opt-${this._highlightedIndex}`);
+    e == null || e.scrollIntoView({ block: "nearest" });
+  }
+  render() {
+    return C.call(this);
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+p = /* @__PURE__ */ new WeakMap();
+i.styles = m(w);
+i.formAssociated = !0;
+l([
+  a({ type: String })
+], i.prototype, "value", 2);
+l([
+  a({ type: Array })
+], i.prototype, "values", 2);
+l([
+  a({ type: Array })
+], i.prototype, "options", 2);
+l([
+  a({ type: String })
+], i.prototype, "placeholder", 2);
+l([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+l([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "required", 2);
+l([
+  a({ type: String })
+], i.prototype, "name", 2);
+l([
+  a({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+l([
+  a({ type: Boolean })
+], i.prototype, "clearable", 2);
+l([
+  a({ type: Boolean })
+], i.prototype, "multiple", 2);
+l([
+  a({ type: Number, attribute: "max-selections" })
+], i.prototype, "maxSelections", 2);
+l([
+  a({ type: String, attribute: "filter-mode" })
+], i.prototype, "filterMode", 2);
+l([
+  a({ type: Boolean })
+], i.prototype, "loading", 2);
+l([
+  a({ type: Boolean })
+], i.prototype, "creatable", 2);
+l([
+  a({ type: String, attribute: "create-text" })
+], i.prototype, "createText", 2);
+l([
+  a({ type: Number })
+], i.prototype, "debounce", 2);
+l([
+  a({ type: String })
+], i.prototype, "error", 2);
+l([
+  a({ type: String })
+], i.prototype, "hint", 2);
+l([
+  a({ type: String })
+], i.prototype, "label", 2);
+l([
+  a({ type: String, attribute: "no-results-text" })
+], i.prototype, "noResultsText", 2);
+l([
+  c()
+], i.prototype, "_query", 2);
+l([
+  c()
+], i.prototype, "_open", 2);
+l([
+  c()
+], i.prototype, "_highlightedIndex", 2);
+i = l([
+  b("sp-autocomplete")
+], i);
+export {
+  i as SpAutocompleteComponent
+};

package/dist/components/autocomplete/sp-autocomplete.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpAutocompleteComponent } from './sp-autocomplete.js';
+export declare function autocompleteTemplate(this: SpAutocompleteComponent): TemplateResult;
+//# sourceMappingURL=sp-autocomplete.template.d.ts.map

package/dist/components/autocomplete/sp-autocomplete.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-autocomplete.template.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/sp-autocomplete.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,uBAAuB,GAAG,cAAc,CAsKlF"}