@kodaris/krubble-components 1.0.12 → 1.0.13

package/dist/krubble.umd.js

@@ -2236,7 +2236,6 @@
           this._canScrollHorizontal = false;
           this._columnPickerOpen = false;
           this._displayedColumns = [];
-          this._widthsLocked = false;
           this._resizing = null;
           this._resizeObserver = null;
           this._searchPositionLocked = false;
@@ -2300,8 +2299,6 @@
                   })
               };
               this._displayedColumns = this._def.displayedColumns || this._def.columns.map(c => c.id);
-              this._widthsLocked = false;
-              this.classList.remove('kr-table--widths-locked');
               this._fetch();
               this._initRefresh();
           }
@@ -2390,8 +2387,6 @@
               }
               this._dataState = 'success';
               this._updateSearchPosition();
-              if (!this._widthsLocked)
-                  this._lockColumnWidths();
           })
               .catch(err => {
               this._dataState = 'error';
@@ -2420,15 +2415,20 @@
           this._page = 1;
           this._fetch();
       }
-      _lockColumnWidths() {
-          this.getDisplayedColumns().forEach(col => {
-              if (!col.width) {
-                  col.width = '180px';
+      _getGridTemplateColumns() {
+          const cols = this.getDisplayedColumns();
+          return cols.map((col) => {
+              // If column has explicit width, use it
+              if (col.width) {
+                  return col.width;
               }
-          });
-          this._widthsLocked = true;
-          this.classList.add('kr-table--widths-locked');
-          this.requestUpdate();
+              // Actions columns: fit content without minimum
+              if (col.type === 'actions') {
+                  return 'max-content';
+              }
+              // No width specified - use content-based sizing with minimum
+              return 'minmax(80px, auto)';
+          }).join(' ');
       }
       /**
        * Updates search position to be centered with equal gaps from title and tools.
@@ -2759,16 +2759,6 @@
           }
           return A;
       }
-      _getGridTemplateColumns() {
-          const cols = this.getDisplayedColumns();
-          const lastNonStickyIndex = cols.map((c, i) => c.sticky ? -1 : i).filter(i => i >= 0).pop();
-          return cols.map((col, i) => {
-              if (i === lastNonStickyIndex && this._widthsLocked) {
-                  return `minmax(${col.width || 'auto'}, 1fr)`;
-              }
-              return col.width || 'auto';
-          }).join(' ');
-      }
       /** Renders the scrollable data grid with column headers and rows. */
       _renderTable() {
           return b `
@@ -3712,10 +3702,10 @@
    * Uses ElementInternals for form association, allowing the component
    * to participate in form submission, validation, and reset.
    *
-   * @element kr-select
-   * @slot - The kr-select-option elements
+   * @element kr-select-field
+   * @slot - The kr-select-field-option elements
    */
-  exports.KRSelect = class KRSelect extends i$2 {
+  exports.KRSelectField = class KRSelectField extends i$2 {
       constructor() {
           super();
           /**
@@ -3765,7 +3755,7 @@
           this._handleKeyDown = (e) => {
               if (!this._isOpen)
                   return;
-              const options = Array.from(this.querySelectorAll('kr-select-option'));
+              const options = Array.from(this.querySelectorAll('kr-select-field-option'));
               switch (e.key) {
                   case 'Escape':
                       this._close();
@@ -3857,7 +3847,7 @@
           }
           else {
               this._isOpen = true;
-              const options = Array.from(this.querySelectorAll('kr-select-option'));
+              const options = Array.from(this.querySelectorAll('kr-select-field-option'));
               this._highlightedIndex = options.findIndex(o => o.value === this.value);
           }
       }
@@ -3888,7 +3878,7 @@
           }
       }
       render() {
-          const options = Array.from(this.querySelectorAll('kr-select-option'));
+          const options = Array.from(this.querySelectorAll('kr-select-field-option'));
           const selectedLabel = options.find(o => o.value === this.value)?.label;
           return b `
       <div class="wrapper">
@@ -3986,7 +3976,7 @@
           this._triggerElement?.blur();
       }
   };
-  exports.KRSelect.styles = i$5 `
+  exports.KRSelectField.styles = i$5 `
     :host {
       display: block;
       font-family: inherit;
@@ -4108,32 +4098,32 @@
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       font-size: 14px;
-      color: var(--kr-select-option-color, #111827);
+      color: var(--kr-select-field-option-color, #111827);
       cursor: pointer;
       border-radius: 4px;
       transition: background-color 0.15s;
     }
 
     .select-option:hover:not(.select-option--disabled) {
-      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+      background-color: var(--kr-select-field-option-hover-bg, #f3f4f6);
     }
 
     .select-option--selected {
-      background-color: var(--kr-select-option-selected-bg, #eff6ff);
-      color: var(--kr-select-option-selected-color, #1d4ed8);
+      background-color: var(--kr-select-field-option-selected-bg, #eff6ff);
+      color: var(--kr-select-field-option-selected-color, #1d4ed8);
     }
 
     .select-option--selected:hover {
-      background-color: var(--kr-select-option-selected-hover-bg, #dbeafe);
+      background-color: var(--kr-select-field-option-selected-hover-bg, #dbeafe);
     }
 
     .select-option--disabled {
-      color: var(--kr-select-option-disabled-color, #9ca3af);
+      color: var(--kr-select-field-option-disabled-color, #9ca3af);
       cursor: not-allowed;
     }
 
     .select-option--highlighted {
-      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+      background-color: var(--kr-select-field-option-hover-bg, #f3f4f6);
     }
 
     .select-empty {
@@ -4174,46 +4164,46 @@
     }
   `;
   // Enable form association
-  exports.KRSelect.formAssociated = true;
+  exports.KRSelectField.formAssociated = true;
   __decorate$1([
       n$1({ type: String })
-  ], exports.KRSelect.prototype, "label", void 0);
+  ], exports.KRSelectField.prototype, "label", void 0);
   __decorate$1([
       n$1({ type: String })
-  ], exports.KRSelect.prototype, "name", void 0);
+  ], exports.KRSelectField.prototype, "name", void 0);
   __decorate$1([
       n$1({ type: String })
-  ], exports.KRSelect.prototype, "value", void 0);
+  ], exports.KRSelectField.prototype, "value", void 0);
   __decorate$1([
       n$1({ type: String })
-  ], exports.KRSelect.prototype, "placeholder", void 0);
+  ], exports.KRSelectField.prototype, "placeholder", void 0);
   __decorate$1([
       n$1({ type: Boolean })
-  ], exports.KRSelect.prototype, "disabled", void 0);
+  ], exports.KRSelectField.prototype, "disabled", void 0);
   __decorate$1([
       n$1({ type: Boolean })
-  ], exports.KRSelect.prototype, "required", void 0);
+  ], exports.KRSelectField.prototype, "required", void 0);
   __decorate$1([
       n$1({ type: Boolean })
-  ], exports.KRSelect.prototype, "readonly", void 0);
+  ], exports.KRSelectField.prototype, "readonly", void 0);
   __decorate$1([
       n$1({ type: String })
-  ], exports.KRSelect.prototype, "hint", void 0);
+  ], exports.KRSelectField.prototype, "hint", void 0);
   __decorate$1([
       r$1()
-  ], exports.KRSelect.prototype, "_isOpen", void 0);
+  ], exports.KRSelectField.prototype, "_isOpen", void 0);
   __decorate$1([
       r$1()
-  ], exports.KRSelect.prototype, "_highlightedIndex", void 0);
+  ], exports.KRSelectField.prototype, "_highlightedIndex", void 0);
   __decorate$1([
       r$1()
-  ], exports.KRSelect.prototype, "_touched", void 0);
+  ], exports.KRSelectField.prototype, "_touched", void 0);
   __decorate$1([
       e$3('.select-trigger')
-  ], exports.KRSelect.prototype, "_triggerElement", void 0);
-  exports.KRSelect = __decorate$1([
-      t$1('kr-select')
-  ], exports.KRSelect);
+  ], exports.KRSelectField.prototype, "_triggerElement", void 0);
+  exports.KRSelectField = __decorate$1([
+      t$1('kr-select-field')
+  ], exports.KRSelectField);
 
   var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4222,12 +4212,12 @@
       return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   /**
-   * An option for the kr-select component.
+   * An option for the kr-select-field component.
    *
-   * @element kr-select-option
+   * @element kr-select-field-option
    * @slot - The option label content
    */
-  exports.KRSelectOption = class KRSelectOption extends i$2 {
+  exports.KRSelectFieldOption = class KRSelectFieldOption extends i$2 {
       constructor() {
           super(...arguments);
           /**
@@ -4247,20 +4237,20 @@
           return b `<slot></slot>`;
       }
   };
-  exports.KRSelectOption.styles = i$5 `
+  exports.KRSelectFieldOption.styles = i$5 `
     :host {
       display: none;
     }
   `;
   __decorate([
       n$1({ type: String })
-  ], exports.KRSelectOption.prototype, "value", void 0);
+  ], exports.KRSelectFieldOption.prototype, "value", void 0);
   __decorate([
       n$1({ type: Boolean })
-  ], exports.KRSelectOption.prototype, "disabled", void 0);
-  exports.KRSelectOption = __decorate([
-      t$1('kr-select-option')
-  ], exports.KRSelectOption);
+  ], exports.KRSelectFieldOption.prototype, "disabled", void 0);
+  exports.KRSelectFieldOption = __decorate([
+      t$1('kr-select-field-option')
+  ], exports.KRSelectFieldOption);
 
   exports.DialogRef = DialogRef;
   exports.krBaseCSS = krBaseCSS;