@kubex/zinc 1.0.110 → 1.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.110",
+  "version": "1.0.112",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button/button.scss

@@ -139,6 +139,7 @@
 
   &:hover:not([disabled]), &:active:not([disabled]) {
     background-color: rgb(var(--btn-color));
+    color: white;
   }
 
   &.button--secondary {
@@ -146,6 +147,7 @@
 
     &:hover:not([disabled]), &:active:not([disabled]) {
       background-color: var(--zn-color-neutral-100);
+      color: rgb(var(--btn-color));
     }
   }
 }

package/src/components/inline-edit/inline-edit.component.ts

@@ -1,4 +1,5 @@
 import { classMap } from "lit/directives/class-map.js";
+import { ConditionalController } from "../../internal/conditional";
 import { type CSSResultGroup, html, type HTMLTemplateResult, type PropertyValues, unsafeCSS } from 'lit';
 import { defaultValue } from "../../internal/default-value";
 import { FormControlController } from "../../internal/form";
@@ -47,6 +48,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     },
   });
   private readonly hasSlotController = new HasSlotController(this, 'help-text', '[default]');
+  private readonly conditionalController = new ConditionalController(this);
 
   @property() value: string | string[] = '';
 
@@ -56,6 +58,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property({ attribute: 'edit-text' }) editText: string;
 
+  @property() conditional = '';
+
   @property({ type: Boolean }) disabled: boolean
 
   @property({ type: Boolean }) inline: boolean
@@ -171,6 +175,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   async firstUpdated() {
     await this.updateComplete;
     this.input.addEventListener('onclick', this.handleEditClick);
+    this.conditionalController.setup();
   }
 
   protected willUpdate(changedProperties: PropertyValues) {
@@ -195,6 +200,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     if (this.input instanceof ZnSelect && !this.isEditing) {
       await this.input.hide();
     }
+    this.conditionalController.check();
   }
 
   mouseEventHandler = (e: MouseEvent) => {
@@ -468,16 +474,18 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   protected _getDataSelectInput(): HTMLTemplateResult {
     return html`
       <zn-data-select class="ai__input"
-                      name="${this.name}"
-                      value="${this.value}"
+                      clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
+                      dir="${this.dir}"
                       icon-position="${ifDefined(this.iconPosition)}"
-                      size="${this.size}"
+                      multiple=${ifDefined(this.multiple)}
+                      name="${this.name}"
                       provider="${this.selectProvider}"
-                      clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
                       required=${ifDefined(this.required)}
-                      dir="${this.dir}"
+                      size="${this.size}"
+                      value="${this.value}"
+                      @zn-blur="${this.handleBlur}"
                       @zn-input="${this.handleInput}"
-                      @zn-blur="${this.handleBlur}">
+      >
       </zn-data-select>`;
   }
 }

package/src/components/select/select.component.ts

@@ -1,6 +1,6 @@
 import {animateTo, stopAnimations} from '../../internal/animate.js';
 import {classMap} from "lit/directives/class-map.js";
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {ConditionalController} from "../../internal/conditional";
 import {FormControlController} from "../../internal/form";
 import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
 import {HasSlotController} from "../../internal/slot";
@@ -89,6 +89,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   protected readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-blur', 'zn-input']
   });
+  private readonly conditionalController = new ConditionalController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly localize = new LocalizeController(this);
   private typeToSelectString = '';
@@ -1131,33 +1132,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     }
 
-    if (this.conditional !== "") {
-      const ids = this.conditional.split(',').map(id => id.trim());
-      const conditionals: ZnSelect[] = [];
-
-      ids.forEach(id => {
-        const elements = deepQuerySelectorAll(`#${id}`, document.documentElement, '') as ZnSelect[];
-        conditionals.push(...elements);
-      });
-
-      const initiallyDisabled = this.disabled;
-      const checkConditionals = () => {
-        const shouldDisable = conditionals.some(select => {
-          let linkedValues = Array.isArray(select.value) ? select.value : [select.value];
-          linkedValues = linkedValues.filter(v => v !== '');
-          return linkedValues.length > 0;
-        });
-        this.disabled = initiallyDisabled || shouldDisable;
-      };
-
-      conditionals.forEach(select => {
-        select.addEventListener('zn-change', checkConditionals);
-        select.addEventListener('zn-input', checkConditionals);
-      });
-
-      // trigger the check once to initialize
-      checkConditionals();
-    }
+    this.conditionalController.setup();
 
     if (this.dataUri && !this.searchOnly) {
       this.fetchOptions().then();

package/src/internal/conditional.ts

@@ -0,0 +1,88 @@
+import {deepQuerySelectorAll} from '../utilities/query';
+import type {ReactiveController, ReactiveControllerHost} from 'lit';
+
+export interface ConditionalHost {
+  conditional: string;
+  disabled: boolean;
+}
+
+/** A reactive controller that disables the host when linked selects have a value. */
+export class ConditionalController implements ReactiveController {
+  host: ReactiveControllerHost & Element & ConditionalHost;
+  private conditionals: (Element & { value: string | string[] })[] = [];
+  private initiallyDisabled = false;
+  private readonly handleChange = () => this.checkConditionals();
+
+  constructor(host: ReactiveControllerHost & Element & ConditionalHost) {
+    (this.host = host).addController(this);
+  }
+
+  /** Call from the host's `firstUpdated()` to parse IDs, find elements, attach listeners, and run the initial check. */
+  setup() {
+    if (this.host.conditional === '') {
+      return;
+    }
+
+    const ids = this.host.conditional.split(',').map(id => id.trim());
+
+    ids.forEach(id => {
+      const byId = deepQuerySelectorAll(`#${id}`, document.documentElement, '') as (Element & {
+        value: string | string[];
+      })[];
+      const byName = deepQuerySelectorAll(`[name="${id}"]`, document.documentElement, '') as (Element & {
+        value: string | string[];
+      })[];
+
+      // de-duplicate in case the same element matches both id and name
+      const seen = new Set<Element>();
+      [...byId, ...byName].forEach(el => {
+        if (!seen.has(el)) {
+          seen.add(el);
+          this.conditionals.push(el);
+        }
+      });
+    });
+
+    this.initiallyDisabled = this.host.disabled;
+
+    if (ids.length === 0) {
+      return;
+    }
+
+    this.conditionals.forEach(select => {
+      select.addEventListener('zn-change', this.handleChange);
+      select.addEventListener('zn-input', this.handleChange);
+    });
+
+    // trigger the check once to initialize
+    this.checkConditionals();
+  }
+
+  hostConnected() {
+    // No-op; setup is deferred to setup() which the host calls from firstUpdated()
+  }
+
+  hostDisconnected() {
+    this.conditionals.forEach(select => {
+      select.removeEventListener('zn-change', this.handleChange);
+      // select.removeEventListener('zn-input', this.handleChange);
+    });
+
+    this.conditionals = [];
+  }
+
+  /** Re-evaluate the conditional state. Call from the host when needed. */
+  check() {
+    this.checkConditionals();
+  }
+
+  private checkConditionals() {
+    const shouldDisable = this.conditionals.some(select => {
+      let linkedValues = Array.isArray(select.value) ? select.value : [select.value];
+      linkedValues = linkedValues.filter(v => (v !== '' && v !== "0"));
+      return linkedValues.length > 0;
+    });
+
+    this.host.disabled = this.initiallyDisabled || shouldDisable;
+  }
+}