@genesislcap/foundation-ui 15.42.0 → 15.43.0-FUI-2629.1

package/dist/esm/vertical-dropdown-menu/vertical-dropdown-menu.template.js

@@ -0,0 +1,64 @@
+import { html, ref, repeat, when } from '@microsoft/fast-element';
+import { getPrefix } from '../utils';
+export const verticalDropdownMenuTemplate = (prefix) => html `
+  <${prefix}-button
+    ${ref('menuOpener')}
+    class="menu-opener${(x) => (x.open ? ' opened' : '')}"
+    appearance="${(x) => x.buttonAppearance}"
+    part="menu-opener"
+    aria-label="More actions"
+    @click=${(x) => x.toggleVisibility()}
+  >
+    <${prefix}-icon name="${(x) => x.iconName}"></${prefix}-icon>
+  </${prefix}-button>
+  <${prefix}-menu
+    ${ref('dropdownMenu')}
+    popover="auto"
+    class="dropdown-menu ${(x) => x.classNames}"
+    part="dropdown-menu"
+    @toggle=${(x, c) => x.onPopoverToggle(c.event)}
+  >
+    ${repeat((x) => x.visibleItems, html `
+        ${when((x, context) => x.isDisabled && x.isDisabled(context.parent.rowData), html `
+            <${prefix}-menu-item
+              class="menu-item"
+              tabindex="${(x, context) => context.index}"
+              disabled
+            >
+              ${when((x) => x.icon, html `
+                  <${prefix}-icon
+                    name=${(x) => x.icon.name}
+                    size=${(x) => x.icon.size}
+                    variant=${(x) => x.icon.variant}
+                    slot="start"
+                  ></${prefix}-icon>
+                `)}
+              ${(x, ctx) => ctx.parent.getLabel(x.label)}
+            </${prefix}-menu-item>
+          `)}
+        ${when((x, context) => !x.isDisabled || !x.isDisabled(context.parent.rowData), html `
+            <${prefix}-menu-item
+              class="menu-item"
+              tabindex="${(x, context) => context.index}"
+              @click=${(x, context) => context.parent.onItemClick(x.callback)}
+              style="${(x) => (x.color ? `color: ${x.color};` : '')}"
+            >
+              ${when((x) => x.icon, html `
+                  <${prefix}-icon
+                    name=${(x) => x.icon.name}
+                    size=${(x) => x.icon.size}
+                    variant=${(x) => x.icon.variant}
+                    slot="start"
+                  ></${prefix}-icon>
+                `)}
+              ${(x, ctx) => ctx.parent.getLabel(x.label)}
+            </${prefix}-menu-item>
+          `)}
+      `, { positioning: true })}
+  </${prefix}-menu>
+`;
+export const foundationVerticalDropdownMenuTemplate = html `
+  <div class="vertical-dropdown-menu-container" part="vertical-dropdown-menu-container">
+    ${(x) => x.getTemplate(getPrefix(x))}
+  </div>
+`;