@design.estate/dees-catalog 3.66.0 → 3.67.1

package/dist_bundle/bundle.js

@@ -143197,7 +143197,7 @@ var demoFunc13 = /* @__PURE__ */ __name(() => b2`
 // ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
 init_dist_ts30();
 init_theme();
-var _validationFunction_dec, _validationText_dec, _validationState_dec, _showPasswordBool_dec, _isPasswordBool_dec, _value_dec4, _a21, _DeesInputText_decorators, _init19, _value4, _isPasswordBool, _showPasswordBool, _validationState, _validationText, _validationFunction;
+var _vintegrated_dec, _validationFunction_dec, _validationText_dec, _validationState_dec, _showPasswordBool_dec, _isPasswordBool_dec, _value_dec4, _a21, _DeesInputText_decorators, _init19, _value4, _isPasswordBool, _showPasswordBool, _validationState, _validationText, _validationFunction, _vintegrated;
 _DeesInputText_decorators = [customElement("dees-input-text")];
 var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_dec4 = [n5({
   type: String,
@@ -143213,7 +143213,10 @@ var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_
   reflect: true
 })], _validationText_dec = [n5({
   reflect: true
-})], _validationFunction_dec = [n5({})], _a21) {
+})], _validationFunction_dec = [n5({})], _vintegrated_dec = [n5({
+  type: Boolean,
+  reflect: true
+})], _a21) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _value4, __runInitializers(_init19, 8, this, "")), __runInitializers(_init19, 11, this);
@@ -143222,6 +143225,7 @@ var _DeesInputText = class _DeesInputText extends (_a21 = DeesInputBase, _value_
     __privateAdd(this, _validationState, __runInitializers(_init19, 20, this)), __runInitializers(_init19, 23, this);
     __privateAdd(this, _validationText, __runInitializers(_init19, 24, this, "")), __runInitializers(_init19, 27, this);
     __privateAdd(this, _validationFunction, __runInitializers(_init19, 28, this)), __runInitializers(_init19, 31, this);
+    __privateAdd(this, _vintegrated, __runInitializers(_init19, 32, this, false)), __runInitializers(_init19, 35, this);
   }
   render() {
     return b2`
@@ -143302,12 +143306,14 @@ _showPasswordBool = new WeakMap();
 _validationState = new WeakMap();
 _validationText = new WeakMap();
 _validationFunction = new WeakMap();
+_vintegrated = new WeakMap();
 __decorateElement(_init19, 4, "value", _value_dec4, _DeesInputText, _value4);
 __decorateElement(_init19, 4, "isPasswordBool", _isPasswordBool_dec, _DeesInputText, _isPasswordBool);
 __decorateElement(_init19, 4, "showPasswordBool", _showPasswordBool_dec, _DeesInputText, _showPasswordBool);
 __decorateElement(_init19, 4, "validationState", _validationState_dec, _DeesInputText, _validationState);
 __decorateElement(_init19, 4, "validationText", _validationText_dec, _DeesInputText, _validationText);
 __decorateElement(_init19, 4, "validationFunction", _validationFunction_dec, _DeesInputText, _validationFunction);
+__decorateElement(_init19, 4, "vintegrated", _vintegrated_dec, _DeesInputText, _vintegrated);
 _DeesInputText = __decorateElement(_init19, 0, "DeesInputText", _DeesInputText_decorators, _DeesInputText);
 __name(_DeesInputText, "DeesInputText");
 __publicField(_DeesInputText, "demo", demoFunc13);
@@ -143449,6 +143455,36 @@ __publicField(_DeesInputText, "styles", [
         border-color: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3%)", "hsl(142.1 70.6% 45.3%)")};
         box-shadow: 0 0 0 2px ${cssManager.bdTheme("hsl(142.1 76.2% 36.3% / 0.05)", "hsl(142.1 70.6% 45.3% / 0.05)")};
       }
+
+      /* Visually integrated mode: shed chrome to blend into a host component
+         (e.g. a dees-table cell in edit mode). */
+      :host([vintegrated]) dees-label,
+      :host([vintegrated]) .validationContainer {
+        display: none;
+      }
+      :host([vintegrated]) .maincontainer {
+        height: 40px;
+      }
+      :host([vintegrated]) input {
+        height: 40px;
+        line-height: 24px;
+        padding: 0 16px;
+        font-size: 13px;
+        border: none;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        transition: none;
+      }
+      :host([vintegrated]) input:hover:not(:disabled):not(:focus),
+      :host([vintegrated]) input:focus {
+        border: none;
+        box-shadow: none;
+        background: transparent;
+      }
+      :host([vintegrated]) .showPassword {
+        display: none;
+      }
     `
 ]);
 __runInitializers(_init19, 1, _DeesInputText);
@@ -145824,17 +145860,21 @@ var DeesInputDropdownPopup = _DeesInputDropdownPopup;
 // ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
 init_dist_ts30();
 init_theme();
-var _isOpened_dec2, _enableSearch_dec2, _selectedOption_dec2, _options_dec4, _a27, _DeesInputDropdown_decorators, _init25, _options4, _selectedOption2, _enableSearch2, _isOpened2;
+var _isOpened_dec2, _vintegrated_dec2, _enableSearch_dec2, _selectedOption_dec2, _options_dec4, _a27, _DeesInputDropdown_decorators, _init25, _options4, _selectedOption2, _enableSearch2, _vintegrated2, _isOpened2;
 _DeesInputDropdown_decorators = [customElement("dees-input-dropdown")];
 var _DeesInputDropdown = class _DeesInputDropdown extends (_a27 = DeesInputBase, _options_dec4 = [n5()], _selectedOption_dec2 = [n5()], _enableSearch_dec2 = [n5({
   type: Boolean
+})], _vintegrated_dec2 = [n5({
+  type: Boolean,
+  reflect: true
 })], _isOpened_dec2 = [r5()], _a27) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _options4, __runInitializers(_init25, 8, this, [])), __runInitializers(_init25, 11, this);
     __privateAdd(this, _selectedOption2, __runInitializers(_init25, 12, this, null)), __runInitializers(_init25, 15, this);
     __privateAdd(this, _enableSearch2, __runInitializers(_init25, 16, this, true)), __runInitializers(_init25, 19, this);
-    __privateAdd(this, _isOpened2, __runInitializers(_init25, 20, this, false)), __runInitializers(_init25, 23, this);
+    __privateAdd(this, _vintegrated2, __runInitializers(_init25, 20, this, false)), __runInitializers(_init25, 23, this);
+    __privateAdd(this, _isOpened2, __runInitializers(_init25, 24, this, false)), __runInitializers(_init25, 27, this);
     __publicField(this, "popupInstance", null);
     __publicField(this, "handleOptionSelected", /* @__PURE__ */ __name((event) => {
       const detail = event.detail;
@@ -145976,10 +146016,12 @@ _init25 = __decoratorStart(_a27);
 _options4 = new WeakMap();
 _selectedOption2 = new WeakMap();
 _enableSearch2 = new WeakMap();
+_vintegrated2 = new WeakMap();
 _isOpened2 = new WeakMap();
 __decorateElement(_init25, 4, "options", _options_dec4, _DeesInputDropdown, _options4);
 __decorateElement(_init25, 4, "selectedOption", _selectedOption_dec2, _DeesInputDropdown, _selectedOption2);
 __decorateElement(_init25, 4, "enableSearch", _enableSearch_dec2, _DeesInputDropdown, _enableSearch2);
+__decorateElement(_init25, 4, "vintegrated", _vintegrated_dec2, _DeesInputDropdown, _vintegrated2);
 __decorateElement(_init25, 4, "isOpened", _isOpened_dec2, _DeesInputDropdown, _isOpened2);
 _DeesInputDropdown = __decorateElement(_init25, 0, "DeesInputDropdown", _DeesInputDropdown_decorators, _DeesInputDropdown);
 __name(_DeesInputDropdown, "DeesInputDropdown");
@@ -146060,6 +146102,36 @@ __publicField(_DeesInputDropdown, "styles", [
       .selectedBox.open::after {
         transform: translateY(-50%) rotate(180deg);
       }
+
+      /* Visually integrated mode: shed chrome to blend into a host component
+         (e.g. a dees-table cell in edit mode). */
+      :host([vintegrated]) dees-label {
+        display: none;
+      }
+      :host([vintegrated]) .maincontainer {
+        height: 40px;
+      }
+      :host([vintegrated]) .selectedBox {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 32px 0 16px;
+        font-size: 13px;
+        border: none;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        transition: none;
+      }
+      :host([vintegrated]) .selectedBox:hover:not(.disabled),
+      :host([vintegrated]) .selectedBox:focus-visible {
+        border: none;
+        box-shadow: none;
+        background: transparent;
+      }
+      :host([vintegrated]) .selectedBox::after {
+        right: 12px;
+        opacity: 0.6;
+      }
     `
 ]);
 __runInitializers(_init25, 1, _DeesInputDropdown);
@@ -164217,6 +164289,11 @@ var tableStyles = [
       }
       td.editingCell {
         padding: 0;
+        outline: 2px solid ${cssManager.bdTheme(
+    "hsl(222.2 47.4% 51.2% / 0.6)",
+    "hsl(217.2 91.2% 59.8% / 0.6)"
+  )};
+        outline-offset: -2px;
       }
       td.editingCell .innerCellContainer {
         padding: 0;
@@ -165195,7 +165272,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
               </th>
             ` : b2``}
         ${effectiveColumns.filter((c11) => !c11.hidden).map((col) => {
-      const isSortable = !!col.sortable;
+      const isSortable = col.sortable !== false;
       const ariaSort = this.getAriaSort(col);
       return b2`
               <th
@@ -165423,10 +165500,16 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         headerHeight += realHeadRows[r11].getBoundingClientRect().height;
       }
     }
-    const shouldBeActive = tableRect.top < stick.top && tableRect.bottom > stick.top + Math.min(headerHeight, 1);
+    const distance = tableRect.bottom - stick.top;
+    const shouldBeActive = tableRect.top < stick.top && distance > 0;
     if (shouldBeActive !== this.__floatingActive) {
       this.__floatingActive = shouldBeActive;
       fh.classList.toggle("active", shouldBeActive);
+      if (!shouldBeActive) {
+        fh.style.height = "";
+        const ft = this.__floatingTableEl;
+        if (ft) ft.style.transform = "";
+      }
       if (shouldBeActive) {
         this.updateComplete.then(() => this.__syncFloatingHeader());
         return;
@@ -165455,8 +165538,12 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     fh.style.top = `${stick.top}px`;
     fh.style.left = `${clipLeft}px`;
     fh.style.width = `${clipWidth}px`;
+    const visibleHeight = Math.min(headerHeight, distance);
+    const exitOffset = headerHeight - visibleHeight;
+    fh.style.height = `${visibleHeight}px`;
     floatTable.style.width = `${tableRect.width}px`;
     floatTable.style.marginLeft = `${tableRect.left - clipLeft}px`;
+    floatTable.style.transform = exitOffset > 0 ? `translateY(-${exitOffset}px)` : "";
   }
   async disconnectedCallback() {
     super.disconnectedCallback();
@@ -165768,7 +165855,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     const key2 = String(col.key);
     const existing = this.getSortDescriptor(key2);
     const cascadeLen = this.sortBy.length;
-    const sortableColumnCount = effectiveColumns.filter((c11) => !!c11.sortable).length;
+    const sortableColumnCount = effectiveColumns.filter((c11) => c11.sortable !== false).length;
     const maxSlot = Math.min(
       Math.max(cascadeLen + (existing ? 0 : 1), 1),
       Math.max(sortableColumnCount, 1)
@@ -165862,6 +165949,16 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         }, "action")
       });
     }
+    items.push({ divider: true });
+    items.push({
+      name: this.showColumnFilters ? "Hide column filters" : "Show column filters",
+      iconName: this.showColumnFilters ? "lucide:filterX" : "lucide:filter",
+      action: /* @__PURE__ */ __name(async () => {
+        this.showColumnFilters = !this.showColumnFilters;
+        this.requestUpdate();
+        return null;
+      }, "action")
+    });
     return items;
   }
   // ─── sort: indicator + ARIA ──────────────────────────────────────────
@@ -166130,6 +166227,9 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         ".editingCell dees-input-text, .editingCell dees-input-checkbox, .editingCell dees-input-dropdown, .editingCell dees-input-datepicker, .editingCell dees-input-tags"
       );
       el?.focus?.();
+      if (el?.tagName === "DEES-INPUT-DROPDOWN") {
+        el.updateComplete?.then(() => el.toggleSelectionBox?.());
+      }
     });
   }
   /** Closes the editor without committing. */
@@ -166191,8 +166291,13 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         ></dees-input-checkbox>`;
       case "dropdown": {
         const options2 = col.editorOptions?.options ?? [];
-        const selected = options2.find((o13) => (o13?.option ?? o13?.key ?? o13) === value2) ?? null;
+        const selected = options2.find((o13) => {
+          if (o13 == null) return false;
+          if (typeof o13 === "string") return o13 === raw2;
+          return o13.key === raw2 || o13.option === raw2;
+        }) ?? null;
         return b2`<dees-input-dropdown
+          .vintegrated=${true}
           .options=${options2}
           .selectedOption=${selected}
           @selectedOption=${(e11) => {
@@ -166219,6 +166324,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       case "text":
       default:
         return b2`<dees-input-text
+          .vintegrated=${true}
           .value=${value2 == null ? "" : String(value2)}
           @focusout=${(e11) => onTextCommit(e11.target)}
           @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
@@ -200209,7 +200315,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.66.0",
+  version: "3.67.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -202182,4 +202288,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775577430289.js.map
+//# sourceMappingURL=bundle-1775597736098.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.66.0',
+    version: '3.67.1',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9