@ni/ok-components 1.13.0 → 1.14.0

package/dist/esm/fv/toolbar/template.js

@@ -0,0 +1,40 @@
+import { children, elements, html, ref, slotted } from '@ni/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
+import { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';
+import { menuTag } from '@ni/nimble-components/dist/esm/menu';
+import { iconThreeDotsLineTag } from '@ni/nimble-components/dist/esm/icons/three-dots-line';
+export const template = (context, definition) => html `
+    <template
+        role="toolbar"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-orientation="horizontal"
+        @mousedown="${(x, c) => x.mouseDownHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        ${children({ property: 'childItems', attributeFilter: ['disabled', 'hidden'], filter: elements(), subtree: true })}
+    >
+        <div class="positioning-region" part="positioning-region">
+            ${startSlotTemplate(context, definition)}
+            <slot ${slotted({ property: 'slottedItems', filter: elements() })}></slot>
+            ${endSlotTemplate(context, definition)}
+            <${menuButtonTag}
+                ${ref('overflowButton')}
+                hidden
+                appearance="ghost"
+                content-hidden
+                @keydown="${(x, c) => {
+    if (x.overflowButton.open) {
+        c.event.stopPropagation();
+    }
+    return true;
+}}"
+            >
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
+                ${x => x.overflowLabel}
+                <${menuTag} slot="menu" ${ref('overflowMenu')}></${menuTag}>
+            </${menuButtonTag}>
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/toolbar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/toolbar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAqB,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAuD,MAAM,qBAAqB,CAAC;AAC9H,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAG5F,MAAM,CAAC,MAAM,QAAQ,GAAuE,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAW;;;sBAG9G,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;;sBAE1B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;UAC9D,QAAQ,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;;cAG5G,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;oBAChC,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC/D,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;eACnC,aAAa;kBACV,GAAG,CAAC,gBAAgB,CAAC;;;;4BAIX,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACjB,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;IAC9B,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;;mBAEE,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;mBACnB,OAAO,gBAAgB,GAAG,CAAC,cAAc,CAAC,MAAM,OAAO;gBAC1D,aAAa;;;CAG5B,CAAC","sourcesContent":["import { children, elements, html, ref, slotted, type ViewTemplate } from '@ni/fast-element';\nimport { endSlotTemplate, startSlotTemplate, type FoundationElementTemplate, type ToolbarOptions } from '@ni/fast-foundation';\nimport { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';\nimport { menuTag } from '@ni/nimble-components/dist/esm/menu';\nimport { iconThreeDotsLineTag } from '@ni/nimble-components/dist/esm/icons/three-dots-line';\nimport type { FvToolbar } from '.';\n\nexport const template: FoundationElementTemplate<ViewTemplate<FvToolbar>, ToolbarOptions> = (context, definition) => html<FvToolbar>`\n    <template\n        role=\"toolbar\"\n        aria-label=\"${x => x.ariaLabel}\"\n        aria-labelledby=\"${x => x.ariaLabelledby}\"\n        aria-orientation=\"horizontal\"\n        @mousedown=\"${(x, c) => x.mouseDownHandler(c.event as MouseEvent)}\"\n        @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        ${children({ property: 'childItems', attributeFilter: ['disabled', 'hidden'], filter: elements(), subtree: true })}\n    >\n        <div class=\"positioning-region\" part=\"positioning-region\">\n            ${startSlotTemplate(context, definition)}\n            <slot ${slotted({ property: 'slottedItems', filter: elements() })}></slot>\n            ${endSlotTemplate(context, definition)}\n            <${menuButtonTag}\n                ${ref('overflowButton')}\n                hidden\n                appearance=\"ghost\"\n                content-hidden\n                @keydown=\"${(x, c) => {\n                    if (x.overflowButton.open) {\n                        c.event.stopPropagation();\n                    }\n                    return true;\n                }}\"\n            >\n                <${iconThreeDotsLineTag} slot=\"start\"></${iconThreeDotsLineTag}>\n                ${x => x.overflowLabel}\n                <${menuTag} slot=\"menu\" ${ref('overflowMenu')}></${menuTag}>\n            </${menuButtonTag}>\n        </div>\n    </template>\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",