@ni/nimble-components 33.10.0 → 33.11.1

package/dist/esm/tabs-toolbar/index.d.ts

@@ -8,5 +8,7 @@ declare global {
  * A nimble-styled container for toolbar content next to tabs.
  */
 export declare class TabsToolbar extends FoundationElement {
+    /** @internal */
+    defaultSlottedElements: Element[];
 }
 export declare const tabsToolbarTag = "nimble-tabs-toolbar";

package/dist/esm/tabs-toolbar/index.js

@@ -1,11 +1,21 @@
-import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { __decorate } from "tslib";
+import { observable } from '@ni/fast-element';
+import { applyMixins, DesignSystem, FoundationElement, StartEnd } from '@ni/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
 /**
  * A nimble-styled container for toolbar content next to tabs.
  */
 export class TabsToolbar extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.defaultSlottedElements = [];
+    }
 }
+__decorate([
+    observable
+], TabsToolbar.prototype, "defaultSlottedElements", void 0);
 const nimbleTabsToolbar = TabsToolbar.compose({
     baseName: 'tabs-toolbar',
     template,
@@ -13,4 +23,5 @@ const nimbleTabsToolbar = TabsToolbar.compose({
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
 export const tabsToolbarTag = 'nimble-tabs-toolbar';
+applyMixins(TabsToolbar, StartEnd);
 //# sourceMappingURL=index.js.map

package/dist/esm/tabs-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;CAAG;AAErD,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-tabs-toolbar': TabsToolbar;\n    }\n}\n\n/**\n * A nimble-styled container for toolbar content next to tabs.\n */\nexport class TabsToolbar extends FoundationElement {}\n\nconst nimbleTabsToolbar = TabsToolbar.compose({\n    baseName: 'tabs-toolbar',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());\nexport const tabsToolbarTag = 'nimble-tabs-toolbar';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI,gBAAgB;QAET,2BAAsB,GAAc,EAAE,CAAC;IAClD,CAAC;CAAA;AADU;IADN,UAAU;2DACmC;AAGlD,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC;AAEpD,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-tabs-toolbar': TabsToolbar;\n    }\n}\n\n/**\n * A nimble-styled container for toolbar content next to tabs.\n */\nexport class TabsToolbar extends FoundationElement {\n    /** @internal */\n    @observable\n    public defaultSlottedElements: Element[] = [];\n}\n\nconst nimbleTabsToolbar = TabsToolbar.compose({\n    baseName: 'tabs-toolbar',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());\nexport const tabsToolbarTag = 'nimble-tabs-toolbar';\n\napplyMixins(TabsToolbar, StartEnd);\n"]}

package/dist/esm/tabs-toolbar/styles.js

@@ -18,5 +18,18 @@ export const styles = css `
             rgba(${borderRgbPartialColor}, 0.3);
         margin: ${smallPadding} ${mediumPadding};
     }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+
+    [part='end'].end {
+        margin-left: auto;
+        display: flex;
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/tabs-toolbar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;gBACf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n        height: ${controlHeight};\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .separator {\n        display: inline-block;\n        height: 24px;\n        border-left: calc(${borderWidth} * 2) solid\n            rgba(${borderRgbPartialColor}, 0.3);\n        margin: ${smallPadding} ${mediumPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;gBACf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;;;;;;;;;;;;;;CAe9C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n        height: ${controlHeight};\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .separator {\n        display: inline-block;\n        height: 24px;\n        border-left: calc(${borderWidth} * 2) solid\n            rgba(${borderRgbPartialColor}, 0.3);\n        margin: ${smallPadding} ${mediumPadding};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n\n    [part='end'].end {\n        margin-left: auto;\n        display: flex;\n    }\n`;\n"]}

package/dist/esm/tabs-toolbar/template.d.ts

@@ -1,2 +1,6 @@
+import { ViewTemplate } from '@ni/fast-element';
+import { type FoundationElementDefinition, type FoundationElementTemplate, type StartEndOptions } from '@ni/fast-foundation';
 import type { TabsToolbar } from '.';
-export declare const template: import("@ni/fast-element").ViewTemplate<TabsToolbar, any>;
+type TabsToolbarOptions = FoundationElementDefinition & StartEndOptions;
+export declare const template: FoundationElementTemplate<ViewTemplate<TabsToolbar>, TabsToolbarOptions>;
+export {};

package/dist/esm/tabs-toolbar/template.js

@@ -1,8 +1,21 @@
-import { html } from '@ni/fast-element';
-export const template = html `
+import { html, slotted, ViewTemplate, when } from '@ni/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = (context, definition) => html `
     <template slot="end">
-        <div class="separator"></div>
-        <slot></slot>
+        ${when(x => x.defaultSlottedElements.length > 0, html `
+            <div class="separator"></div>
+        `)}
+        ${startSlotTemplate(context, definition)}
+        <slot
+            ${slotted({
+    filter: (n) => n instanceof HTMLElement,
+    property: 'defaultSlottedElements',
+})}
+        >
+        </slot>
+        ${endSlotTemplate(context, definition)}
     </template>
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/tabs-toolbar/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;;;;;CAKxC,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { TabsToolbar } from '.';\n\nexport const template = html<TabsToolbar>`\n    <template slot=\"end\">\n        <div class=\"separator\"></div>\n        <slot></slot>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EACH,eAAe,EACf,iBAAiB,EAIpB,MAAM,qBAAqB,CAAC;AAK7B,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAa;;UAEpC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAA;;SAEpD,CAAC;UACA,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;cAElC,OAAO,CAAC;IACN,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW;IAC7C,QAAQ,EAAE,wBAAwB;CACrC,CAAC;;;UAGJ,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC","sourcesContent":["import { html, slotted, ViewTemplate, when } from '@ni/fast-element';\nimport {\n    endSlotTemplate,\n    startSlotTemplate,\n    type FoundationElementDefinition,\n    type FoundationElementTemplate,\n    type StartEndOptions\n} from '@ni/fast-foundation';\nimport type { TabsToolbar } from '.';\n\ntype TabsToolbarOptions = FoundationElementDefinition & StartEndOptions;\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<TabsToolbar>,\nTabsToolbarOptions\n> = (context, definition) => html<TabsToolbar>`\n    <template slot=\"end\">\n        ${when(x => x.defaultSlottedElements.length > 0, html`\n            <div class=\"separator\"></div>\n        `)}\n        ${startSlotTemplate(context, definition)}\n        <slot\n            ${slotted({\n                filter: (n: Node) => n instanceof HTMLElement,\n                property: 'defaultSlottedElements',\n            })}\n        >\n        </slot>\n        ${endSlotTemplate(context, definition)}\n    </template>\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "33.10.0",
+  "version": "33.11.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",