@kubex/zinc 1.0.6 → 1.0.8

package/src/components/button/button.scss

@@ -23,6 +23,7 @@
   border-color: transparent;
   height: 100%;
   display: inline-flex;
+  position: relative;
 
   &.button--info {
     --btn-color: var(--zn-color-info);
@@ -39,6 +40,10 @@
   &.button--success {
     --btn-color: var(--zn-color-success);
   }
+
+  &__label--hidden {
+    visibility: hidden;
+  }
 }
 
 .button.button--muted-notification {
@@ -306,6 +311,116 @@
   }
 }
 
+.button--loading-bg {
+  background-color: #e0e0e0;
+
+  &-transparent {
+    background-color: transparent;
+  }
+}
+
+.button--loading {
+  &-fill {
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    background-color: rgba(var(--btn-color), .85);
+    border-radius: inherit;
+    transition: width 0s;
+    animation: loading-fill-grow var(--loading-duration, 2s) linear forwards;
+    inset: -1px;
+
+    &-transparent {
+      background-color: rgba(var(--zn-primary), 0.1);
+    }
+  }
+
+  &-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &-text-bottom, &-text-top {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    font-weight: inherit;
+    user-select: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+
+    .loading-countdown {
+      margin-left: 3px;
+    }
+
+    &-left {
+      justify-content: flex-start;
+      padding-inline-start: 7px;
+    }
+
+    &-right {
+      justify-content: flex-end;
+      padding-inline-end: 7px;
+    }
+  }
+
+  &-text-bottom {
+    z-index: 2;
+    color: rgba(var(--btn-color), .85);
+
+    &-transparent {
+      color: inherit;
+    }
+  }
+
+  &-text-top {
+    z-index: 3;
+    color: inherit;
+    /* Animate the reveal from left to right using a mask */
+    mask-image: linear-gradient(90deg, #000 0%, #000 100%);
+    mask-size: 0 100%;
+    mask-repeat: no-repeat;
+    animation: loading-text-reveal var(--loading-duration, 2s) linear forwards;
+  }
+}
+
+.button--relative-wrapper {
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+  width: 100%;
+}
+
+@keyframes loading-fill-grow {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes loading-text-reveal {
+  from {
+    mask-size: 0 100%;
+  }
+  to {
+    mask-size: 100% 100%;
+  }
+}
+
 :host([vertical-align="center"]) {
   align-self: center;
 }

package/src/components/content-block/content-block.component.ts

@@ -1,10 +1,12 @@
 import {classMap} from "lit/directives/class-map.js";
+import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
-import {html, unsafeCSS} from 'lit';
+import type {PropertyValues} from 'lit';
+import {html, nothing, unsafeCSS} from 'lit';
 import {property, queryAssignedNodes, queryAsync} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
-import type {PropertyValues} from 'lit';
+import type ZnTile from "../tile";
 
 import styles from './content-block.scss';
 
@@ -27,7 +29,11 @@ export default class ContentBlock extends ZincElement {
   @property() avatar = '';
 
   @property({type: Boolean, reflect: true}) outbound = false;
+
+  @property({type: Boolean, attribute: "no-collapse"}) noCollapse = false;
+
   @property({type: Boolean, reflect: true}) short = false;
+
   @property({attribute: 'default-display', reflect: true}) defaultDisplay: 'text' | 'html' = 'text';
 
   @queryAssignedNodes({slot: 'html', flatten: true}) htmlNodes!: Node[];
@@ -38,83 +44,53 @@ export default class ContentBlock extends ZincElement {
 
   private _textRows: TextRow[] = [];
 
-  private _themeChangeObserver?: MutationObserver;
+  private _footerObserver?: MutationObserver;
+  private _replaceDebounce: number = 0;
 
   connectedCallback() {
     super.connectedCallback();
     this.iframe.then((iframe) => {
-      const rebuild = () => {
+      if (iframe.contentDocument) {
         const div = this.htmlNodes[0] as HTMLDivElement;
-        if (!div) return;
-
-        let convertedHtml = div?.innerHTML ?? '';
-        convertedHtml = convertedHtml.replace(/ /g, ' ');
-        convertedHtml = convertedHtml.replace(/&lt;/g, '<');
-        convertedHtml = convertedHtml.replace(/&gt;/g, '>');
-        convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
-
-        const themeAttr = document.documentElement.getAttribute('t') || document.body.getAttribute('t') || '';
-
-        // Pull stylesheet links from host to inherit Zinc styles
-        const linkTags = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'))
-          .map((element: Element) => {
-            const href = (element as HTMLLinkElement).getAttribute('href') || (element as HTMLLinkElement).href || '';
-            return href ? `<link rel="stylesheet" href="${href}">` : '';
-          })
-          .join('');
-
-        const baseStyles = `<style>
-          html, body {
-            background-color: var(--zn-panel-background-color);
-            container-type: size;
-            margin: 0;
-          }
-
-          hr {
-            height: 0;
-            border: none;
-            border-top: 1px solid rgb(var(--zn-border-color));
-          }
-
-          code, kbd, samp, pre, .mono {
-            font-family: var(--zn-font-family-mono),sans-serif;
-            font-size: 1em;
-          }
-
-          small {
-            font-size: 80%;
-          }
-        </style>`;
-
-        const head = `${linkTags}${baseStyles}`;
-        const htmlAttrs = `${themeAttr ? ` t="${themeAttr}"` : ''}`;
-        const baseHref = document.baseURI || window.location.href;
-
-        iframe.srcdoc = `<!doctype html><html${htmlAttrs}><head><base href="${baseHref}" target="_blank">${head}</head><body>${convertedHtml}</body></html>`;
-      };
-
-      rebuild();
-
-      // Observe theme changes on both attribute and theme classes on html and body
-      this._themeChangeObserver = new MutationObserver(() => rebuild());
-      this._themeChangeObserver.observe(document.documentElement, {attributes: true, attributeFilter: ['t', 'class']});
-      this._themeChangeObserver.observe(document.body, {attributes: true, attributeFilter: ['t', 'class']});
-
-      const doc = iframe.contentDocument;
-      if (!doc) return;
+        if (div) {
+          let convertedHtml = div?.innerHTML ?? '';
+          convertedHtml = convertedHtml.replace(/&nbsp;/g, ' ');
+          convertedHtml = convertedHtml.replace(/&lt;/g, '<');
+          convertedHtml = convertedHtml.replace(/&gt;/g, '>');
+          convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+
+          const baseStyles = "<style>body,html{background-color: #ffffff}img{max-width:100%; max-height: 500px;}</style>";
+          iframe.srcdoc = baseStyles + convertedHtml;
+        }
+      }
 
-      iframe.style.height = (75 + doc.body.scrollHeight) + 'px';
-      iframe.style.width = '100%';
-      iframe.style.border = '0';
+      iframe.addEventListener("load", () => {
+        setTimeout(() => this._resizeIframe(iframe), 50);
+      });
     });
   }
 
   disconnectedCallback() {
-    super.disconnectedCallback();
-    this._themeChangeObserver?.disconnect();
+    try {
+      if (this._footerObserver) {
+        this._footerObserver.disconnect();
+        this._footerObserver = undefined;
+      }
+      if (this._replaceDebounce) {
+        clearTimeout(this._replaceDebounce);
+        this._replaceDebounce = 0;
+      }
+    } finally {
+      // Ensure base class cleanup
+      // @ts-ignore - base may or may not implement disconnectedCallback
+      super.disconnectedCallback?.();
+    }
   }
 
   private _collapseContent(e: Event) {
+    if (this.noCollapse) {
+      return;
+    }
     const target = e.target as HTMLElement;
     const headerClick = target.classList.contains('content-block-header') ||
       target.parentElement?.classList.contains('content-block-header');
@@ -122,6 +98,15 @@ export default class ContentBlock extends ZincElement {
     if (headerClick && target.slot !== 'nav') {
       this.short = !this.short;
       this.requestUpdate();
+      this.updateComplete.then(() => {
+        if (!this.short) {
+          this.iframe.then((iframe) => {
+            if (iframe && !iframe.classList.contains('hidden')) {
+              this._resizeIframe(iframe);
+            }
+          });
+        }
+      });
     }
   }
 
@@ -141,10 +126,46 @@ export default class ContentBlock extends ZincElement {
       if (textContent) {
         iframe.classList.remove('hidden');
         textContent.classList.add('hidden');
+        setTimeout(() => this._resizeIframe(iframe), 0);
       }
     });
   }
 
+  private _resizeIframe(iframe?: HTMLIFrameElement) {
+    const resize = (frame: HTMLIFrameElement) => {
+      const doc = frame.contentDocument;
+      if (!doc) return;
+
+      // Allow the iframe to shrink as well as grow
+      frame.style.height = 'auto';
+
+      const body = doc.body;
+      const element = doc.documentElement;
+
+      const heights = [
+        body?.scrollHeight ?? 0,
+        element?.scrollHeight ?? 0,
+        body?.offsetHeight ?? 0,
+        element?.offsetHeight ?? 0
+      ];
+      const height = Math.max(...heights);
+
+      if (height > 0) {
+        frame.style.height = `${height}px`;
+      }
+    };
+
+    if (iframe) {
+      resize(iframe);
+    } else {
+      this.iframe.then((frame) => {
+        if (frame?.contentDocument) {
+          requestAnimationFrame(() => resize(frame));
+        }
+      });
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 
@@ -167,22 +188,29 @@ export default class ContentBlock extends ZincElement {
     const initialShowHtml = hasHtmlSlot && (!hasTextSlot || this.defaultDisplay === 'html');
 
     return html`
-      <zn-panel flush tabbed class="${classMap({
-        'content-block--outbound': this.outbound,
-        'content-block--short': this.short
-      })}">
+      <zn-panel flush
+                tabbed
+                flush-footer="${hasFooter || nothing}"
+                class="${classMap({
+                  'content-block--outbound': this.outbound,
+                  'content-block--short': this.short,
+                  'content-block--collapsible': !this.noCollapse
+                })}">
 
         <zn-header class="content-block-header"
-                   caption="${this.sender}"
                    description="${this.truncateText()}"
                    @click="${this._collapseContent}">
 
-          <zn-icon src="${this.avatar}"
-                   library="avatar"
-                   round></zn-icon>
+          <slot name="icon">
+            <zn-icon src="${this.avatar}"
+                     library="avatar"
+                     round></zn-icon>
+          </slot>
+
+          <slot name="caption" slot="caption">${this.sender}</slot>
 
           <div slot="actions">
-            <small>${this.time}</small>
+            <slot name="actions"><small>${this.time}</small></slot>
             ${showActions ? html`
               <zn-dropdown>
                 <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent"
@@ -222,7 +250,7 @@ export default class ContentBlock extends ZincElement {
         </zn-sp>
 
         ${hasFooter ? html`
-          <slot slot="footer" name="footer"></slot>` : ''}
+          <slot slot="footer" name="footer" @slotchange="${this._handleSlotChange}"></slot>` : ''}
       </zn-panel>
     `;
   }
@@ -234,6 +262,88 @@ export default class ContentBlock extends ZincElement {
     return trimmed.length > 32 ? trimmed.substring(0, 32) + '...' : trimmed;
   }
 
+  private _handleSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const assignedEls: Element[] = slot.assignedElements({flatten: true});
+    if (!assignedEls || assignedEls.length === 0) return;
+
+    // Reset and attach a new observer to watch for dynamic content inside the footer subtree
+    if (this._footerObserver) {
+      this._footerObserver.disconnect();
+      this._footerObserver = undefined;
+    }
+
+    const obs = new MutationObserver(() => {
+      this._debouncedReplace();
+    });
+    this._footerObserver = obs;
+
+    assignedEls.forEach(el => {
+      obs.observe(el, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['href', 'download', 'caption']
+      });
+    });
+
+    // Run now and again shortly after to catch async rendering
+    this._replaceImagePlaceholders();
+    setTimeout(() => this._replaceImagePlaceholders(), 50);
+  }
+
+  private _debouncedReplace() {
+    if (this._replaceDebounce) {
+      clearTimeout(this._replaceDebounce);
+    }
+    this._replaceDebounce = window.setTimeout(() => this._replaceImagePlaceholders(), 50);
+  }
+
+  private _replaceImagePlaceholders() {
+    const textContainer = this.shadowRoot?.querySelector('.text-content') as HTMLDivElement | null;
+    if (!textContainer) {
+      // If the shadow content hasn't been rendered yet, try after the next update
+      this.updateComplete.then(() => this._replaceImagePlaceholders());
+      return;
+    }
+
+    const footer = this.querySelector(':scope > [slot="footer"]') as HTMLElement | null;
+    if (!footer) return;
+
+    const anchors = deepQuerySelectorAll('a[href]', footer, '') as HTMLAnchorElement[];
+    if (anchors.length === 0) return;
+
+    let textContent = textContainer.innerHTML;
+    const extensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg', 'heic', 'tiff', 'tif', 'avif']);
+    anchors.forEach((a) => {
+      const candidates = new Set<string>();
+      const tile = a.querySelector('zn-tile') as ZnTile | null;
+
+      const caption = (tile?.caption ?? tile?.getAttribute?.('caption') ?? '').trim();
+      if (caption) candidates.add(caption);
+
+      const downloadAttr = (a.getAttribute('download') || '').trim();
+      if (downloadAttr) candidates.add(downloadAttr);
+
+      const url = a.getAttribute('href') || '';
+      candidates.forEach((rawName) => {
+        const name = (rawName || '').trim();
+        if (!name) return;
+
+        const base = name.includes('/') ? name.split('/').pop()! : name;
+        const lowerBase = base.toLowerCase();
+        const ext = lowerBase.includes('.') ? lowerBase.split('.').pop()! : '';
+        if (ext && !extensions.has(ext)) return;
+
+        const alt = base.replace(/"/g, '&quot;');
+        textContent = textContent.replace(`[image: ${base}]`, () => `<img src="${url}" alt="${alt}" style="max-height: 500px; max-width: 100%">`);
+      });
+    });
+
+    // Update the generated content directly without triggering a re-render
+    textContainer.innerHTML = textContent;
+  }
+
   protected getTextSections(): TextRow[] {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     const textRows: TextRow[] = [];
@@ -255,7 +365,6 @@ export default class ContentBlock extends ZincElement {
         if (row.startsWith('Sent from')) type = 'reply';
         if (row.trim() === '' && previousType === 'reply') type = 'reply';
         if (type === 'reply' && row.startsWith('>')) row = row.substring(1).trim();
-        row = this.transformLineForImages(row);
 
         if (previousType === type) {
           if (textRows.length === 0) {
@@ -275,36 +384,6 @@ export default class ContentBlock extends ZincElement {
     return this._textRows;
   }
 
-  private transformLineForImages(line: string): string {
-    let out = line;
-
-    // Replace Markdown image syntax ![alt](url) for http(s)
-    const mdHttpImg = /!\[([^\]]*)\]\((https?:\/\/[^\s)]+?\.(?:png|jpe?g|gif|webp|bmp|svg))\)/gi;
-    out = out.replace(mdHttpImg, (_match, alt, url) => {
-      return `<img src="${url}" alt="${alt || 'image'}" loading="lazy" style="max-width:100%;max-height:500px;">`;
-    });
-
-    // Replace Markdown image syntax with data URI (base64)
-    const mdDataImg = /!\[([^\]]*)\]\((data:image\/[a-zA-Z0-9.+-]+;base64,[A-Za-z0-9+/=]+)\)/gi;
-    out = out.replace(mdDataImg, (_match, alt, url) => {
-      return `<img src="${url}" alt="${alt || 'image'}" loading="lazy" style="max-width:100%;max-height:500px;">`;
-    });
-
-    // Replace bare http(s) image URLs with <img>
-    const httpImg = /(https?:\/\/[^\s]+?\.(?:png|jpe?g|gif|webp|bmp|svg))(?!\S)/gi;
-    out = out.replace(httpImg, (_m, url) => {
-      return `<img src="${url}" alt="image" loading="lazy" style="max-width:100%;max-height:500px;">`;
-    });
-
-    // Replace bare data URI images with <img>
-    const dataImg = /(data:image\/[a-zA-Z0-9.+-]+;base64,[A-Za-z0-9+/=]+)(?!\S)/gi;
-    out = out.replace(dataImg, (_m, url) => {
-      return `<img src="${url}" alt="image" loading="lazy" style="max-width:100%;max-height:500px;">`;
-    });
-
-    return out;
-  }
-
   showReply(e: MouseEvent) {
     const target = e.target as HTMLElement;
     const nextElement = target.nextElementSibling;

package/src/components/content-block/content-block.scss

@@ -19,8 +19,10 @@ zn-header div[slot='actions'] {
   gap: 10px;
 }
 
-zn-header::part(base) {
-  cursor: pointer;
+.content-block--collapsible {
+  zn-header::part(base) {
+    cursor: pointer;
+  }
 }
 
 zn-header::part(header-left) {

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

@@ -7,13 +7,12 @@ import {
   emptyDataProvider,
   type LocalDataProvider,
 } from "./providers/provider";
+import {type CSSResultGroup, html, nothing, unsafeCSS, PropertyValues} from 'lit';
 import {FormControlController} from "../../internal/form";
-import {html, nothing, unsafeCSS} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import ZincElement from '../../internal/zinc-element';
-import type {CSSResultGroup} from 'lit';
 import type {ZincFormControl} from '../../internal/zinc-element';
+import ZincElement from '../../internal/zinc-element';
 import type ZnSelect from "../select";
 
 import styles from './data-select.scss';
@@ -37,15 +36,22 @@ import styles from './data-select.scss';
  */
 export default class ZnDataSelect extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+
   @query('#select') select: ZnSelect;
   @query('#select__prefix') selectPrefix: HTMLElement;
+
   /** The name of the select. Used for form submission. */
   @property() name: string;
+
   /** The value of the select. Used for form submission. */
   @property() value: string;
+
   /** The provider of the select. */
   @property() provider: 'color' | 'currency' | 'country' | 'phone';
+
+  /** The position of the icon. */
   @property({attribute: 'icon-position'}) iconPosition: 'start' | 'end' | 'none' = 'none';
+
   /** An array of keys to use for filtering the options in the selected provider. */
   @property({
     attribute: 'filter',
@@ -54,27 +60,39 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
       toAttribute: (value: string[]) => value.join(',')
     }
   }) filter: string[];
+
   /** The selects size. */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
   /** Should we show the clear button */
   @property({type: Boolean}) clearable: boolean;
+
   /** Include an "All" option at the top. */
   @property({type: Boolean, attribute: 'allow-all'}) allowAll = false;
+
   /** The selects label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
+
   /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
   @property({attribute: 'label-tooltip'}) labelTooltip = '';
+
   /** Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead. */
   @property({attribute: 'context-note'}) contextNote = '';
+
   /**
    * The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
    * inside the viewport.
    */
   @property({reflect: true}) placement: 'top' | 'bottom' = 'bottom';
+
   /** The selects help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({attribute: 'help-text'}) helpText = '';
+
   /** The selects required attribute. */
   @property({type: Boolean, reflect: true}) required = false;
+
+  @property({attribute: "icon-only", type: Boolean, reflect: true}) iconOnly = false;
+
   protected readonly formControlController = new FormControlController(this);
 
   get validationMessage() {
@@ -85,6 +103,13 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     return this.select.validity;
   }
 
+  constructor() {
+    super();
+    if (this.iconOnly && this.iconPosition === 'none') {
+      this.iconPosition = 'start';
+    }
+  }
+
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener('keydown', this.closeOnTab);
@@ -95,6 +120,11 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     window.removeEventListener('keydown', this.closeOnTab);
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this._updatePrefix();
+  }
+
   checkValidity(): boolean {
     return this.select.checkValidity();
   }
@@ -185,15 +215,15 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  @zn-clear="${this.handleClear}"
                  @blur=${this.blur}
                  value="${this.value}"
-                 placeholder="Choose a ${localProvider.getName}"
+                 placeholder="${this.getPlaceholder(localProvider)}"
                  exportparts="combobox,expand-icon,form-control-help-text,form-control-input,display-input">
-        ${this.iconPosition !== 'none' ? html`
+        ${(this.iconPosition !== 'none' || this.iconOnly) ? html`
           <div id="select__prefix" slot="prefix" class="select__prefix"></div>` : ''}
         ${data.map((item: DataProviderOption) => html`
           <zn-option class="select__option" value="${item.key}">
-            ${this.iconPosition !== 'none' ? html`<span
+            ${(this.iconPosition !== 'none' || this.iconOnly) ? html`<span
               slot="${this.iconPosition === 'end' ? 'suffix' : 'prefix'}">${item.prefix}</span>` : ''}
-            ${item.value}
+            ${this.iconOnly ? undefined : item.value}
           </zn-option>`)}
       </zn-select>`;
   }
@@ -201,19 +231,29 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   private _updatePrefix() {
     // Set the prefix of the select to the selected values prefix
     const selectedOption = this.select.selectedOptions[0];
-    if (selectedOption && (this.iconPosition !== 'none')) {
+    if (selectedOption && (this.iconPosition !== 'none' || this.iconOnly) && this.selectPrefix) {
+      if (this.iconPosition === 'none' && this.iconOnly) {
+        this.iconPosition = 'start';
+      }
       const slot = this.iconPosition === 'start'
         ? selectedOption.querySelector('[slot="prefix"]')
         : selectedOption.querySelector('[slot="suffix"]');
-
       if (slot) {
         this.selectPrefix.innerHTML = '';
         this.selectPrefix.appendChild(slot.cloneNode(true));
       } else {
         this.selectPrefix.innerHTML = '';
       }
-    } else {
+    } else if (this.selectPrefix) {
       this.selectPrefix.innerHTML = '';
     }
   }
+
+  private getPlaceholder(localProvider: LocalDataProvider<any>) {
+    if (this.value) {
+      return '';
+    }
+
+    return `Choose a ${localProvider.getName}`
+  }
 }