@kubex/zinc 1.1.90 → 1.1.91

package/package.json

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

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

@@ -120,6 +120,9 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   /** The heading shown above the slash menu's items. */
   @property({ attribute: 'slash-heading' }) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({ attribute: 'slash-hide-keys', type: Boolean }) slashHideKeys = false;
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({ attribute: false }) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -463,6 +466,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         slash-trigger="${this.slashTrigger}"
         slash-heading="${this.slashHeading}"
         slash-preset="${this.slashPreset}"
+        ?slash-hide-keys="${this.slashHideKeys}"
         .slashItems="${this.slashItems}"
         .slashItemsProvider="${this.slashItemsProvider}"
         @zn-input="${this.handleInput}"
@@ -485,6 +489,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 slash-trigger="${this.slashTrigger}"
                 slash-heading="${this.slashHeading}"
                 slash-preset="${this.slashPreset}"
+                ?slash-hide-keys="${this.slashHideKeys}"
                 .slashItems="${this.slashItems}"
                 .slashItemsProvider="${this.slashItemsProvider}"
                 @zn-input="${this.handleInput}"

package/src/components/input/input.component.ts

@@ -279,6 +279,9 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** The heading shown above the slash menu's items. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -1097,7 +1100,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading}></zn-slash-menu>`
+              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

package/src/components/slash-menu/slash-menu.component.ts

@@ -65,6 +65,9 @@ export default class ZnSlashMenu extends ZincElement {
   /** The most items to render at once. Remaining matches are reported in the footer. */
   @property({attribute: 'max-items', type: Number}) maxItems = 25;
 
+  /** Hides the insertion key (the item's value) normally shown against each item. */
+  @property({attribute: 'hide-keys', type: Boolean}) hideKeys = false;
+
   /** The element or caret rect the panel is positioned against. */
   @property({attribute: false}) anchor: Element | VirtualElement | null = null;
 
@@ -269,7 +272,7 @@ export default class ZnSlashMenu extends ZincElement {
 
   private renderItem(item: SlashMenuItem, index: number, showIcons: boolean) {
     const isActive = index === this.activeIndex;
-    const token = item.value && item.value !== item.label && !item.value.includes('\n') ? item.value : '';
+    const token = !this.hideKeys && item.value && item.value !== item.label && !item.value.includes('\n') ? item.value : '';
 
     return html`
       <button

package/src/components/textarea/textarea.component.ts

@@ -203,6 +203,9 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   /** The heading shown above the slash menu's items. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -584,7 +587,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading}></zn-slash-menu>`
+              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

package/src/components/translations/translations.component.ts

@@ -72,6 +72,9 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   /** The heading shown above the slash menu's items. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({attribute: false}) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -444,6 +447,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
               slash-trigger="${this.slashTrigger}"
               slash-heading="${this.slashHeading}"
               slash-preset="${this.slashPreset}"
+              ?slash-hide-keys="${this.slashHideKeys}"
               .slashItems="${this.slashItems}"
               .slashItemsProvider="${this.slashItemsProvider}"
               @zn-change="${this.handleValueUpdate}"