@kubex/zinc 1.0.98 → 1.0.100

package/docs/pages/components/item.md

@@ -54,6 +54,24 @@ layout: component
 </zn-cols>
 ```
 
+### Help Tooltip
+
+Use the `help-tooltip` attribute to display an info icon with a tooltip next to the caption.
+
+```html:preview
+<zn-sp divide no-gap>
+  <zn-item caption="Account ID" help-tooltip="The unique identifier for this account">
+    ACC-12345
+  </zn-item>
+  <zn-item caption="MRR" help-tooltip="Monthly Recurring Revenue, calculated from active subscriptions">
+    $1,250.00
+  </zn-item>
+  <zn-item caption="Status">
+    Active
+  </zn-item>
+</zn-sp>
+```
+
 ### Multiple Actions
 
 Example of multiple actions in a description item.

package/package.json

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

package/src/components/data-select/providers/currency-data-provider.ts

@@ -254,7 +254,7 @@ const currencyCodeToSymbol: { [key: string]: string } = {
   'RSD': 'Дин.',
   'RUB': '₽',
   'RWF': 'R₣',
-  'SAR': '﷼',
+  'SAR': 'SAR',
   'SBD': '$',
   'SCR': '₨',
   'SDG': 'ج.س.',

package/src/components/item/item.component.ts

@@ -3,6 +3,7 @@ import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
+import ZnTooltip from "../tooltip";
 
 import styles from './item.scss';
 
@@ -13,6 +14,7 @@ import styles from './item.scss';
  * @since 1.0
  *
  * @dependency zn-icon
+ * @dependency zn-tooltip
  *
  * @slot - The default slot. Can either be slotted or use the value attribute
  * @slot actions - Used for adding actions to a zn-item.
@@ -23,7 +25,8 @@ import styles from './item.scss';
  */
 export default class ZnItem extends ZincElement {
   static dependencies = {
-    'zn-icon': ZnIcon
+    'zn-icon': ZnIcon,
+    'zn-tooltip': ZnTooltip
   };
 
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -38,6 +41,8 @@ export default class ZnItem extends ZincElement {
 
   @property({attribute: 'edit-on-hover', type: Boolean}) editOnHover: boolean;
 
+  @property({attribute: 'help-tooltip'}) helpTooltip: string;
+
   @property() icon: string;
 
   @property() value: string;
@@ -82,12 +87,19 @@ export default class ZnItem extends ZincElement {
   render() {
     const hasIcon = this.icon && this.icon.length > 0;
 
+    const hasHelpTooltip = this.helpTooltip?.length > 0;
+
     const headings = html`
       <div class="item__headings">
         <div class=${classMap({
           'item__caption': true,
-          'item__caption--required': this._hasRequiredSlot()
+          'item__caption--required': this._hasRequiredSlot(),
+          'item__caption--has-help': hasHelpTooltip
         })} part="caption">${this.caption}
+          ${hasHelpTooltip ? html`
+            <zn-tooltip class="item__help-tooltip" content="${this.helpTooltip}">
+              <zn-icon src="info"></zn-icon>
+            </zn-tooltip>` : ''}
         </div>
         ${this.description ? html`
           <div class="item__description">${this.description}</div>` : ''}

package/src/components/item/item.scss

@@ -97,6 +97,12 @@
     width: 100%;
     flex-shrink: 0;
 
+    &--has-help {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--zn-spacing-2x-small);
+    }
+
     &--required::after {
       content: var(--zn-input-required-content);
       margin-inline-start: var(--zn-input-required-content-offset);
@@ -104,6 +110,11 @@
     }
   }
 
+  &__help-tooltip {
+    color: var(--zn-color-neutral-700);
+    font-size: var(--zn-font-size-small);
+  }
+
   &__description {
     display: block;
     font-weight: 400;

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

@@ -294,7 +294,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * to place the form control outside a form and associate it with the form that has this `id`. The form must be in
    * the same document or shadow root for this to work.
    */
   @property({reflect: true}) form: string;
@@ -684,6 +684,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.emit('zn-clear');
         this.emit('zn-input');
         this.emit('zn-change');
+
+        if (this.triggerSubmit) {
+          this.formControlController.submit();
+        }
       });
     }
   }
@@ -1336,11 +1340,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       const data: unknown = await response.json();
 
       // Count raw results before maxResults limiting to determine exhaustiveness
-      const rawCount = Array.isArray(data)
-        ? data.reduce((n: number, item: unknown) => {
+      const rawCount: number = Array.isArray(data)
+        ? (data as unknown[]).reduce<number>((n, item) => {
           if (item && typeof item === 'object' && 'group' in (item as Record<string, unknown>)) {
             const group = item as Record<string, unknown>;
-            return n + (Array.isArray(group.options) ? group.options.length : 0);
+            return n + (Array.isArray(group.options) ? (group.options as unknown[]).length : 0);
           }
           return n + 1;
         }, 0)