@kodaris/krubble-components 1.0.53 → 1.0.54

package/dist/form/combo-box/combo-box.js

@@ -0,0 +1,714 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * @element kr-combo-box
+ *
+ * A searchable select field. Looks like a select dropdown but when opened
+ * shows a search input at the top of the panel for filtering options via
+ * a fetch function. Works with any object shape — use optionValue and
+ * optionLabel to tell the component how to extract the value and display text.
+ *
+ * @property {string} label - Label text
+ * @property {string} name - Name for form submission
+ * @property {string} value - Currently selected value
+ * @property {string} placeholder - Placeholder text when nothing is selected
+ * @property {boolean} disabled - Whether the field is disabled
+ * @property {boolean} readonly - Whether the field is readonly
+ * @property {boolean} required - Whether the field is required
+ * @property {string} hint - Helper text displayed below the field
+ * @property {string|Function} optionValue - Field name or function to extract the value from an option
+ * @property {string|Function} optionLabel - Field name or function to extract the label from an option
+ * @property {any[]} options - Array of options
+ * @property {Function} fetch - Function that returns a promise of options
+ * @property {Function} fetchSelection - Function that resolves a single option by its value
+ *
+ * @fires change - Fired when the selected value changes
+ * @fires select - Fired when an option is selected
+ */
+let KRComboBox = class KRComboBox extends LitElement {
+    constructor() {
+        super();
+        this._requestId = 0;
+        this._selectedOption = null;
+        this._handleDocumentClick = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this._close();
+            }
+        };
+        this.label = '';
+        this.name = '';
+        this.value = '';
+        this.placeholder = 'Select an option';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.hint = '';
+        this.optionValue = 'value';
+        this.optionLabel = 'label';
+        this.options = [];
+        this.fetch = null;
+        this.fetchSelection = null;
+        this._isOpen = false;
+        this._highlightedIndex = -1;
+        this._touched = false;
+        this._searchQuery = '';
+        this._handleInvalid = (e) => {
+            e.preventDefault();
+            this._touched = true;
+        };
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleDocumentClick);
+        this.addEventListener('invalid', this._handleInvalid);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleDocumentClick);
+        this.removeEventListener('invalid', this._handleInvalid);
+    }
+    firstUpdated() {
+        this._updateValidity();
+        if (this.value && this.fetchSelection) {
+            this._resolveSelection();
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('required') || changedProperties.has('value')) {
+            this._updateValidity();
+        }
+        if (changedProperties.has('value')) {
+            if (this.value) {
+                // Only resolve if the selected option doesn't match the current value
+                if (!this._selectedOption || this._getOptionValue(this._selectedOption) !== this.value) {
+                    this._resolveSelection();
+                }
+            }
+            else {
+                this._selectedOption = null;
+            }
+        }
+        if (changedProperties.has('options') && this._isOpen) {
+            this._positionDropdown();
+        }
+    }
+    get form() {
+        return this._internals.form;
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    formResetCallback() {
+        this.value = '';
+        this._selectedOption = null;
+        this._touched = false;
+        this._isOpen = false;
+        this._highlightedIndex = -1;
+        this._searchQuery = '';
+        this._internals.setFormValue('');
+        this._internals.setValidity({});
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    focus() {
+        this._triggerElement?.focus();
+    }
+    blur() {
+        this._triggerElement?.blur();
+    }
+    _updateValidity() {
+        if (this.required && !this.value) {
+            this._internals.setValidity({ valueMissing: true }, 'Please select an option', this._triggerElement);
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+    _handleTriggerClick() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this._isOpen) {
+            this._close();
+        }
+        else {
+            this._open();
+        }
+    }
+    _open() {
+        this._isOpen = true;
+        this._searchQuery = '';
+        this._highlightedIndex = -1;
+        this._fetch();
+        this.updateComplete.then(() => {
+            this._positionDropdown();
+            if (this._searchInput) {
+                this._searchInput.focus();
+            }
+        });
+    }
+    _close() {
+        this._isOpen = false;
+        this._highlightedIndex = -1;
+        this._searchQuery = '';
+    }
+    _positionDropdown() {
+        requestAnimationFrame(() => {
+            const dropdown = this.shadowRoot?.querySelector('.dropdown');
+            if (!dropdown) {
+                return;
+            }
+            const triggerRect = this._triggerElement.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - triggerRect.bottom - 4 - 8;
+            const spaceAbove = triggerRect.top - 4 - 8;
+            dropdown.style.left = triggerRect.left + 'px';
+            dropdown.style.width = triggerRect.width + 'px';
+            // Prefer opening below; only flip above when space below is tight
+            if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+                dropdown.style.top = '';
+                dropdown.style.bottom = (window.innerHeight - triggerRect.top + 4) + 'px';
+                dropdown.style.maxHeight = spaceAbove + 'px';
+            }
+            else {
+                dropdown.style.bottom = '';
+                dropdown.style.top = triggerRect.bottom + 4 + 'px';
+                dropdown.style.maxHeight = spaceBelow + 'px';
+            }
+        });
+    }
+    _fetch() {
+        if (!this.fetch) {
+            return;
+        }
+        this._requestId++;
+        const requestId = this._requestId;
+        this.fetch(this._searchQuery).then((options) => {
+            if (requestId === this._requestId) {
+                this.options = options;
+            }
+        }).catch((error) => {
+            console.error('kr-combo-box: fetch failed', error);
+        });
+    }
+    _handleSearchInput(e) {
+        this._searchQuery = e.target.value;
+        this._highlightedIndex = -1;
+        this._fetch();
+    }
+    _handleSearchKeyDown(e) {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this._highlightedIndex = Math.min(this._highlightedIndex + 1, this.options.length - 1);
+                this._scrollToHighlighted();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (this._highlightedIndex === -1) {
+                    this._highlightedIndex = this.options.length - 1;
+                }
+                else {
+                    this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0);
+                }
+                this._scrollToHighlighted();
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this._highlightedIndex >= 0 && this.options[this._highlightedIndex]) {
+                    this._selectOption(this.options[this._highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this._close();
+                this._triggerElement?.focus();
+                break;
+            case 'Tab':
+                this._close();
+                break;
+        }
+    }
+    _handleTriggerKeyDown(e) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!this._isOpen) {
+                this._open();
+            }
+        }
+    }
+    _handleTriggerBlur() {
+        this._touched = true;
+        this._updateValidity();
+    }
+    _scrollToHighlighted() {
+        this.updateComplete.then(() => {
+            const container = this.shadowRoot?.querySelector('.options');
+            const highlighted = this.shadowRoot?.querySelector('.option--highlighted');
+            if (container && highlighted) {
+                const containerRect = container.getBoundingClientRect();
+                const highlightedRect = highlighted.getBoundingClientRect();
+                if (highlightedRect.bottom > containerRect.bottom) {
+                    highlighted.scrollIntoView({ block: 'nearest' });
+                }
+                else if (highlightedRect.top < containerRect.top) {
+                    highlighted.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        });
+    }
+    _getOptionValue(option) {
+        if (typeof this.optionValue === 'function') {
+            return this.optionValue(option);
+        }
+        return option[this.optionValue];
+    }
+    _getOptionLabel(option) {
+        let label;
+        if (typeof this.optionLabel === 'function') {
+            label = this.optionLabel(option);
+        }
+        else {
+            label = option[this.optionLabel];
+        }
+        if (!label) {
+            return this._getOptionValue(option);
+        }
+        return label;
+    }
+    _resolveSelection() {
+        if (!this.fetchSelection) {
+            return;
+        }
+        const fetchedValue = this.value;
+        this.fetchSelection(this.value).then((option) => {
+            if (this.value !== fetchedValue) {
+                return;
+            }
+            if (!option) {
+                return;
+            }
+            this._selectedOption = option;
+            this.requestUpdate();
+        }).catch((error) => {
+            console.error('kr-combo-box: fetchSelection failed', error);
+        });
+    }
+    _selectOption(option) {
+        if (option.disabled) {
+            return;
+        }
+        this.value = this._getOptionValue(option);
+        this._selectedOption = option;
+        this._close();
+        this._internals.setFormValue(this.value);
+        this._updateValidity();
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: { option: option },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        this._triggerElement?.focus();
+    }
+    _handleOptionMouseEnter(e, index) {
+        this._highlightedIndex = index;
+    }
+    _renderOption(option, index) {
+        const optionValue = this._getOptionValue(option);
+        return html `
+      <button
+        class=${classMap({
+            option: true,
+            'option--highlighted': index === this._highlightedIndex,
+            'option--selected': optionValue === this.value,
+        })}
+        type="button"
+        role="option"
+        aria-selected=${optionValue === this.value}
+        ?disabled=${option.disabled}
+        @click=${(e) => this._selectOption(option)}
+        @mouseenter=${(e) => this._handleOptionMouseEnter(e, index)}
+      >
+        ${this._getOptionLabel(option)}
+      </button>
+    `;
+    }
+    render() {
+        let footer = nothing;
+        if (this._touched && this.required && !this.value) {
+            footer = html `<div class="validation-message">Please select an option</div>`;
+        }
+        else if (this.hint) {
+            footer = html `<div class="hint">${this.hint}</div>`;
+        }
+        return html `
+      <div class="wrapper">
+        ${this.label
+            ? html `
+              <label>
+                ${this.label}
+                ${this.required ? html `<span class="required">*</span>` : nothing}
+              </label>
+            `
+            : nothing}
+
+        <button
+          class=${classMap({
+            trigger: true,
+            'trigger--open': this._isOpen,
+            'trigger--invalid': this._touched && this.required && !this.value,
+        })}
+          type="button"
+          ?disabled=${this.disabled}
+          aria-haspopup="listbox"
+          aria-expanded=${this._isOpen}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+          @blur=${this._handleTriggerBlur}
+        >
+          <span class=${classMap({
+            trigger__value: true,
+            trigger__placeholder: !this._selectedOption,
+        })}>
+            ${this._selectedOption ? this._getOptionLabel(this._selectedOption) : this.placeholder}
+          </span>
+          <svg
+            class=${classMap({
+            trigger__icon: true,
+            'trigger__icon--open': this._isOpen,
+        })}
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+          </svg>
+        </button>
+
+        <div
+          role="listbox"
+          class=${classMap({
+            dropdown: true,
+            'dropdown--open': this._isOpen,
+        })}
+        >
+          <div class="search">
+            <div class="search__field">
+              <input
+                class="search__input"
+                type="text"
+                placeholder="Search..."
+                .value=${this._searchQuery}
+                @input=${this._handleSearchInput}
+                @keydown=${this._handleSearchKeyDown}
+              />
+              <svg class="search__icon" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+              </svg>
+            </div>
+          </div>
+
+          <div class="options">
+            ${this.options.length === 0
+            ? html `<div class="empty">No options found</div>`
+            : this.options.map((option, index) => this._renderOption(option, index))}
+          </div>
+        </div>
+
+        ${footer}
+      </div>
+    `;
+    }
+};
+KRComboBox.styles = css `
+    :host {
+      display: block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 500;
+      color: black;
+    }
+
+    .required {
+      color: var(--kr-text-field-required-color, #ef4444);
+      margin-left: 0.125rem;
+    }
+
+    /* Trigger button */
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 10px 12px;
+      font-family: inherit;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--kr-text-field-color, #111827);
+      background-color: var(--kr-text-field-bg, #fff);
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      text-align: left;
+    }
+
+    .trigger:hover:not(:disabled) {
+      border-color: #9ca3af;
+    }
+
+    .trigger:focus {
+      outline: none;
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
+    }
+
+    .trigger:disabled {
+      background-color: var(--kr-text-field-disabled-bg, #f3f4f6);
+      color: var(--kr-text-field-disabled-color, #9ca3af);
+      cursor: not-allowed;
+    }
+
+    .trigger--open {
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
+    }
+
+    .trigger--invalid {
+      border-color: var(--kr-text-field-error-border-color, #ef4444);
+    }
+
+    .trigger--invalid:focus {
+      box-shadow: 0 0 0 3px var(--kr-text-field-error-ring-color, rgba(239, 68, 68, 0.1));
+    }
+
+    .trigger__value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .trigger__placeholder {
+      color: var(--kr-text-field-placeholder-color, #9ca3af);
+    }
+
+    .trigger__icon {
+      flex-shrink: 0;
+      margin-left: 0.5rem;
+      width: 20px;
+      height: 20px;
+      color: var(--kr-text-muted, #6b7280);
+      transition: transform 0.2s;
+    }
+
+    .trigger__icon--open {
+      transform: rotate(180deg);
+    }
+
+    /* Dropdown */
+    .dropdown {
+      position: fixed;
+      z-index: 10000;
+      background: white;
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      box-sizing: border-box;
+      display: none;
+      overflow: hidden;
+    }
+
+    .dropdown--open {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Search input inside dropdown */
+    .search {
+      padding: 12px 12px 2px 12px;
+      flex-shrink: 0;
+    }
+
+    .search__field {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
+      background-color: var(--kr-text-field-bg, #fff);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .search__field:focus-within {
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
+    }
+
+    .search__icon {
+      width: 20px;
+      height: 20px;
+      color: var(--kr-text-muted, #6b7280);
+      flex-shrink: 0;
+      margin-left: 8px;
+    }
+
+    .search__input {
+      flex: 1;
+      border: none;
+      outline: none;
+      font-size: 14px;
+      font-family: inherit;
+      color: var(--kr-text-field-color, #111827);
+      background: transparent;
+      padding: 0;
+    }
+
+    .search__input::placeholder {
+      color: var(--kr-text-field-placeholder-color, #9ca3af);
+    }
+
+    /* Options list */
+    .options {
+      overflow-y: auto;
+      padding: 4px 0;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 12px 18px;
+      background: none;
+      border: none;
+      font-size: 14px;
+      font-family: inherit;
+      color: var(--kr-text, #000000);
+      text-align: left;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    .option:hover:not(:disabled) {
+      background: var(--kr-select-option-hover-bg, #f3f4f6);
+    }
+
+    .option--highlighted {
+      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+    }
+
+    .option--selected {
+      color: var(--kr-text-field-focus-border-color, #163052);
+    }
+
+    .option:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .empty {
+      padding: 12px 18px;
+      text-align: left;
+      color: var(--kr-text-muted, #6b7280);
+      font-size: 14px;
+    }
+
+    .hint {
+      font-size: 0.75rem;
+      color: var(--kr-text-field-helper-color, #6b7280);
+    }
+
+    .validation-message {
+      font-size: 0.75rem;
+      color: var(--kr-text-field-error-color, #ef4444);
+    }
+  `;
+KRComboBox.formAssociated = true;
+__decorate([
+    property({ type: String })
+], KRComboBox.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], KRComboBox.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], KRComboBox.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], KRComboBox.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRComboBox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRComboBox.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRComboBox.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], KRComboBox.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'option-value' })
+], KRComboBox.prototype, "optionValue", void 0);
+__decorate([
+    property({ attribute: 'option-label' })
+], KRComboBox.prototype, "optionLabel", void 0);
+__decorate([
+    property({ type: Array })
+], KRComboBox.prototype, "options", void 0);
+__decorate([
+    property({ attribute: false })
+], KRComboBox.prototype, "fetch", void 0);
+__decorate([
+    property({ attribute: false })
+], KRComboBox.prototype, "fetchSelection", void 0);
+__decorate([
+    state()
+], KRComboBox.prototype, "_isOpen", void 0);
+__decorate([
+    state()
+], KRComboBox.prototype, "_highlightedIndex", void 0);
+__decorate([
+    state()
+], KRComboBox.prototype, "_touched", void 0);
+__decorate([
+    state()
+], KRComboBox.prototype, "_searchQuery", void 0);
+__decorate([
+    query('.trigger')
+], KRComboBox.prototype, "_triggerElement", void 0);
+__decorate([
+    query('.search__input')
+], KRComboBox.prototype, "_searchInput", void 0);
+KRComboBox = __decorate([
+    customElement('kr-combo-box')
+], KRComboBox);
+export { KRComboBox };
+//# sourceMappingURL=combo-box.js.map