@ni/nimble-components 1.0.0-beta.100 → 1.0.0-beta.101

package/dist/esm/tree-item/index.js

@@ -1,116 +1,116 @@
-import { treeItemTemplate as template, TreeItem as FoundationTreeItem, DesignSystem } from '@microsoft/fast-foundation';
-import { controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { groupSelectedAttribute, SelectionMode } from '../tree-view/types';
-import { styles } from './styles';
-/**
- * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
- *
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-tree-item\>
- *
- */
-export class TreeItem extends FoundationTreeItem {
-    constructor() {
-        super();
-        this.handleClickOverride = (event) => {
-            if (event.composedPath().includes(this.expandCollapseButton)) {
-                // just have base class handle click event for glyph
-                return;
-            }
-            const treeItem = this.getImmediateTreeItem(event.target);
-            if (treeItem?.disabled || treeItem !== this) {
-                // don't allow base TreeItem to emit a 'selected-change' event when a disabled item is clicked
-                event.stopImmediatePropagation();
-                return;
-            }
-            const leavesOnly = this.treeView?.selectionMode === SelectionMode.LeavesOnly;
-            const hasChildren = this.hasChildTreeItems();
-            if ((leavesOnly && !hasChildren) || !leavesOnly) {
-                // if either a leaf tree item, or in a mode that supports select on groups,
-                // process click as a select
-                this.setGroupSelectionOnRootParentTreeItem(treeItem);
-                if (this.selected) {
-                    // if already selected, prevent base-class from issuing selected-change event
-                    event.stopImmediatePropagation();
-                }
-            }
-            else {
-                // implicit hasChildren && leavesOnly, so only allow expand/collapse, not select
-                this.expanded = !this.expanded;
-                this.$emit('expanded-change', this);
-                // don't allow base class to process click event, as all we want to happen
-                // here is toggling 'expanded', and to issue the expanded-change event
-                event.stopImmediatePropagation();
-            }
-        };
-        // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
-        // which is what the FAST TreeItem allows
-        this.handleSelectedChange = (event) => {
-            // only process selection
-            if (event.target === this) {
-                this.selected = true;
-            }
-        };
-        this.addEventListener('click', this.handleClickOverride);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('selected-change', this.handleSelectedChange);
-        this.treeView = this.getParentTreeView();
-        if (this.treeView && this.selected) {
-            this.setGroupSelectionOnRootParentTreeItem(this);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.handleClickOverride);
-        this.removeEventListener('selected-change', this.handleSelectedChange);
-        this.treeView = null;
-    }
-    hasChildTreeItems() {
-        const treeItemChild = this.querySelector('[role="treeitem"]');
-        return treeItemChild !== null;
-    }
-    clearTreeGroupSelection() {
-        const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
-        currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
-    }
-    setGroupSelectionOnRootParentTreeItem(treeItem) {
-        this.clearTreeGroupSelection();
-        let currentItem = treeItem;
-        while (currentItem?.parentElement !== this.treeView) {
-            currentItem = currentItem?.parentElement;
-        }
-        if (currentItem) {
-            currentItem.setAttribute(groupSelectedAttribute, 'true');
-        }
-    }
-    getImmediateTreeItem(element) {
-        let foundElement = element;
-        while (foundElement
-            && !(foundElement?.getAttribute('role') === 'treeitem')) {
-            foundElement = foundElement?.parentElement;
-        }
-        return foundElement;
-    }
-    /**
-     * This was copied directly from the FAST TreeItem implementation
-     * @returns the root tree view
-     */
-    getParentTreeView() {
-        const parentNode = this.parentElement.closest("[role='tree']");
-        return parentNode;
-    }
-}
-const nimbleTreeItem = TreeItem.compose({
-    baseName: 'tree-item',
-    baseClass: FoundationTreeItem,
-    template,
-    styles,
-    expandCollapseGlyph: controlsArrowExpanderUp16X16.data
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
+import { treeItemTemplate as template, TreeItem as FoundationTreeItem, DesignSystem } from '@microsoft/fast-foundation';
+import { controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { groupSelectedAttribute, SelectionMode } from '../tree-view/types';
+import { styles } from './styles';
+/**
+ * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-item\>
+ *
+ */
+export class TreeItem extends FoundationTreeItem {
+    constructor() {
+        super();
+        this.handleClickOverride = (event) => {
+            if (event.composedPath().includes(this.expandCollapseButton)) {
+                // just have base class handle click event for glyph
+                return;
+            }
+            const treeItem = this.getImmediateTreeItem(event.target);
+            if (treeItem?.disabled || treeItem !== this) {
+                // don't allow base TreeItem to emit a 'selected-change' event when a disabled item is clicked
+                event.stopImmediatePropagation();
+                return;
+            }
+            const leavesOnly = this.treeView?.selectionMode === SelectionMode.LeavesOnly;
+            const hasChildren = this.hasChildTreeItems();
+            if ((leavesOnly && !hasChildren) || !leavesOnly) {
+                // if either a leaf tree item, or in a mode that supports select on groups,
+                // process click as a select
+                this.setGroupSelectionOnRootParentTreeItem(treeItem);
+                if (this.selected) {
+                    // if already selected, prevent base-class from issuing selected-change event
+                    event.stopImmediatePropagation();
+                }
+            }
+            else {
+                // implicit hasChildren && leavesOnly, so only allow expand/collapse, not select
+                this.expanded = !this.expanded;
+                this.$emit('expanded-change', this);
+                // don't allow base class to process click event, as all we want to happen
+                // here is toggling 'expanded', and to issue the expanded-change event
+                event.stopImmediatePropagation();
+            }
+        };
+        // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
+        // which is what the FAST TreeItem allows
+        this.handleSelectedChange = (event) => {
+            // only process selection
+            if (event.target === this) {
+                this.selected = true;
+            }
+        };
+        this.addEventListener('click', this.handleClickOverride);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('selected-change', this.handleSelectedChange);
+        this.treeView = this.getParentTreeView();
+        if (this.treeView && this.selected) {
+            this.setGroupSelectionOnRootParentTreeItem(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClickOverride);
+        this.removeEventListener('selected-change', this.handleSelectedChange);
+        this.treeView = null;
+    }
+    hasChildTreeItems() {
+        const treeItemChild = this.querySelector('[role="treeitem"]');
+        return treeItemChild !== null;
+    }
+    clearTreeGroupSelection() {
+        const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
+        currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
+    }
+    setGroupSelectionOnRootParentTreeItem(treeItem) {
+        this.clearTreeGroupSelection();
+        let currentItem = treeItem;
+        while (currentItem?.parentElement !== this.treeView) {
+            currentItem = currentItem?.parentElement;
+        }
+        if (currentItem) {
+            currentItem.setAttribute(groupSelectedAttribute, 'true');
+        }
+    }
+    getImmediateTreeItem(element) {
+        let foundElement = element;
+        while (foundElement
+            && !(foundElement?.getAttribute('role') === 'treeitem')) {
+            foundElement = foundElement?.parentElement;
+        }
+        return foundElement;
+    }
+    /**
+     * This was copied directly from the FAST TreeItem implementation
+     * @returns the root tree view
+     */
+    getParentTreeView() {
+        const parentNode = this.parentElement.closest("[role='tree']");
+        return parentNode;
+    }
+}
+const nimbleTreeItem = TreeItem.compose({
+    baseName: 'tree-item',
+    baseClass: FoundationTreeItem,
+    template,
+    styles,
+    expandCollapseGlyph: controlsArrowExpanderUp16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 //# sourceMappingURL=index.js.map

package/dist/esm/tree-item/styles.d.ts

@@ -1,3 +1,3 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { ElementDefinitionContext, TreeItemOptions } from '@microsoft/fast-foundation';
-export declare const styles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, TreeItemOptions } from '@microsoft/fast-foundation';
+export declare const styles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;

package/dist/esm/tree-item/styles.js

@@ -1,195 +1,195 @@
-import { DirectionalStyleSheetBehavior } from '@microsoft/fast-components';
-import { css } from '@microsoft/fast-element';
-import { display, TreeItem } from '@microsoft/fast-foundation';
-import { focusVisible } from '../utilities/style/focus';
-import { contentFontColor, fontFamily, borderColorHover, fillColorSelected, contentFontSize, fillColorHover, fillColorSelectedHover, borderWidth, iconSize } from '../theme-provider/design-tokens';
-import { groupSelectedAttribute } from '../tree-view/types';
-export const styles = (context) => css `
-        ${display('block')}
-
-        :host {
-            contain: content;
-            position: relative;
-            outline: none;
-            color: ${contentFontColor};
-            cursor: pointer;
-            font-family: ${fontFamily};
-            --tree-item-nested-width: 0;
-        }
-
-        ${ /* this controls the side border */''}
-        :host([${groupSelectedAttribute}])::after {
-            background: ${borderColorHover};
-            border-radius: 0px;
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0px;
-            width: calc(${borderWidth} * 2);
-            height: calc(${iconSize} * 2);
-        }
-
-        .positioning-region {
-            display: flex;
-            position: relative;
-            box-sizing: border-box;
-            height: calc(${iconSize} * 2);
-        }
-
-        .positioning-region:hover {
-            background: ${fillColorHover};
-        }
-
-        :host(${focusVisible}) .positioning-region {
-            box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
-            outline: ${borderWidth} solid ${borderColorHover};
-            outline-offset: -2px;
-        }
-
-        :host([selected]) .positioning-region {
-            background: ${fillColorSelected};
-        }
-
-        :host([selected]) .positioning-region:hover {
-            background: ${fillColorSelectedHover};
-        }
-
-        .positioning-region::before {
-            content: '';
-            display: block;
-            width: var(--tree-item-nested-width);
-            flex-shrink: 0;
-        }
-
-        .content-region {
-            display: inline-flex;
-            align-items: center;
-            white-space: nowrap;
-            width: 100%;
-            padding-left: 10px;
-            font-size: ${contentFontSize};
-            user-select: none;
-        }
-
-        :host(${focusVisible}) .content-region {
-            outline: none;
-        }
-
-        :host(.nested) .content-region {
-            position: relative;
-            margin-inline-start: ${iconSize};
-        }
-
-        :host([disabled]) .content-region {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .expand-collapse-button {
-            background: none;
-            border: none;
-            outline: none;
-            width: ${iconSize};
-            height: ${iconSize};
-            padding: 0px;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            margin-left: 10px;
-        }
-
-        :host(.nested) .expand-collapse-button {
-            position: absolute;
-        }
-
-        .expand-collapse-button svg {
-            width: ${iconSize};
-            height: ${iconSize};
-            transition: transform 0.2s ease-in;
-            pointer-events: none;
-            fill: currentcolor;
-        }
-
-        ${
-/* this rule keeps children without an icon text aligned with parents */ ''}
-        span[part="start"] {
-            width: ${iconSize};
-        }
-
-        ${
-/* the start class is applied when the corresponding slots is filled */ ''}
-        .start {
-            display: flex;
-            fill: currentcolor;
-            margin-inline-start: ${iconSize};
-            margin-inline-end: ${iconSize};
-        }
-
-        slot[name='start']::slotted(*) {
-            width: ${iconSize};
-            height: ${iconSize};
-        }
-
-        ::slotted(${context.tagFor(TreeItem)}) {
-            --tree-item-nested-width: 1em;
-            --expand-collapse-button-nested-width: calc(${iconSize} * -1);
-        }
-
-        ${
-/* the end class is applied when the corresponding slots is filled */ ''}
-        .end {
-            display: flex;
-            fill: currentcolor;
-            margin-inline-start: ${iconSize};
-        }
-
-        .items {
-            display: none;
-            ${
-/*
- * this controls the nested indentation (by affecting .positioning-region::before)
- * it must minimally contain arithmetic with an em and a px value
- * make it larger or shorter by changing the px value
- */ ''}
-            font-size: calc(1em + (${iconSize} * 2));
-        }
-
-        :host([expanded]) .items {
-            display: block;
-        }
-    `
-    // prettier-ignore
-    .withBehaviors(new DirectionalStyleSheetBehavior(css `
-                    ${ /* ltr styles */''}
-                    :host(.nested) .expand-collapse-button {
-                        left: var(
-                            --expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
-
-                    .expand-collapse-button svg {
-                        transform: rotate(90deg);
-                    }
-
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-                `, css `
-                    ${ /* rtl styles */''}
-                    :host(.nested) .expand-collapse-button {
-                        right: var(
-                            --expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
-
-                    .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(135deg);
-                    }
-                `));
+import { DirectionalStyleSheetBehavior } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { display, TreeItem } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { contentFontColor, fontFamily, borderColorHover, fillColorSelected, contentFontSize, fillColorHover, fillColorSelectedHover, borderWidth, iconSize } from '../theme-provider/design-tokens';
+import { groupSelectedAttribute } from '../tree-view/types';
+export const styles = (context) => css `
+        ${display('block')}
+
+        :host {
+            contain: content;
+            position: relative;
+            outline: none;
+            color: ${contentFontColor};
+            cursor: pointer;
+            font-family: ${fontFamily};
+            --tree-item-nested-width: 0;
+        }
+
+        ${ /* this controls the side border */''}
+        :host([${groupSelectedAttribute}])::after {
+            background: ${borderColorHover};
+            border-radius: 0px;
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0px;
+            width: calc(${borderWidth} * 2);
+            height: calc(${iconSize} * 2);
+        }
+
+        .positioning-region {
+            display: flex;
+            position: relative;
+            box-sizing: border-box;
+            height: calc(${iconSize} * 2);
+        }
+
+        .positioning-region:hover {
+            background: ${fillColorHover};
+        }
+
+        :host(${focusVisible}) .positioning-region {
+            box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+            outline: ${borderWidth} solid ${borderColorHover};
+            outline-offset: -2px;
+        }
+
+        :host([selected]) .positioning-region {
+            background: ${fillColorSelected};
+        }
+
+        :host([selected]) .positioning-region:hover {
+            background: ${fillColorSelectedHover};
+        }
+
+        .positioning-region::before {
+            content: '';
+            display: block;
+            width: var(--tree-item-nested-width);
+            flex-shrink: 0;
+        }
+
+        .content-region {
+            display: inline-flex;
+            align-items: center;
+            white-space: nowrap;
+            width: 100%;
+            padding-left: 10px;
+            font-size: ${contentFontSize};
+            user-select: none;
+        }
+
+        :host(${focusVisible}) .content-region {
+            outline: none;
+        }
+
+        :host(.nested) .content-region {
+            position: relative;
+            margin-inline-start: ${iconSize};
+        }
+
+        :host([disabled]) .content-region {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .expand-collapse-button {
+            background: none;
+            border: none;
+            outline: none;
+            width: ${iconSize};
+            height: ${iconSize};
+            padding: 0px;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 10px;
+        }
+
+        :host(.nested) .expand-collapse-button {
+            position: absolute;
+        }
+
+        .expand-collapse-button svg {
+            width: ${iconSize};
+            height: ${iconSize};
+            transition: transform 0.2s ease-in;
+            pointer-events: none;
+            fill: currentcolor;
+        }
+
+        ${
+/* this rule keeps children without an icon text aligned with parents */ ''}
+        span[part="start"] {
+            width: ${iconSize};
+        }
+
+        ${
+/* the start class is applied when the corresponding slots is filled */ ''}
+        .start {
+            display: flex;
+            fill: currentcolor;
+            margin-inline-start: ${iconSize};
+            margin-inline-end: ${iconSize};
+        }
+
+        slot[name='start']::slotted(*) {
+            width: ${iconSize};
+            height: ${iconSize};
+        }
+
+        ::slotted(${context.tagFor(TreeItem)}) {
+            --tree-item-nested-width: 1em;
+            --expand-collapse-button-nested-width: calc(${iconSize} * -1);
+        }
+
+        ${
+/* the end class is applied when the corresponding slots is filled */ ''}
+        .end {
+            display: flex;
+            fill: currentcolor;
+            margin-inline-start: ${iconSize};
+        }
+
+        .items {
+            display: none;
+            ${
+/*
+ * this controls the nested indentation (by affecting .positioning-region::before)
+ * it must minimally contain arithmetic with an em and a px value
+ * make it larger or shorter by changing the px value
+ */ ''}
+            font-size: calc(1em + (${iconSize} * 2));
+        }
+
+        :host([expanded]) .items {
+            display: block;
+        }
+    `
+    // prettier-ignore
+    .withBehaviors(new DirectionalStyleSheetBehavior(css `
+                    ${ /* ltr styles */''}
+                    :host(.nested) .expand-collapse-button {
+                        left: var(
+                            --expand-collapse-button-nested-width,
+                            calc(${iconSize} * -1)
+                        );
+                    }
+
+                    .expand-collapse-button svg {
+                        transform: rotate(90deg);
+                    }
+
+                    :host([expanded]) .expand-collapse-button svg {
+                        transform: rotate(180deg);
+                    }
+                `, css `
+                    ${ /* rtl styles */''}
+                    :host(.nested) .expand-collapse-button {
+                        right: var(
+                            --expand-collapse-button-nested-width,
+                            calc(${iconSize} * -1)
+                        );
+                    }
+
+                    .expand-collapse-button svg {
+                        transform: rotate(180deg);
+                    }
+
+                    :host([expanded]) .expand-collapse-button svg {
+                        transform: rotate(135deg);
+                    }
+                `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/tree-view/index.d.ts

@@ -1,16 +1,16 @@
-import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
-import { SelectionMode } from './types';
-/**
- * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
- *
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-tree-view\>
- *
- */
-export declare class TreeView extends FoundationTreeView {
-    selectionMode: SelectionMode;
-    connectedCallback(): void;
-}
+import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
+import { SelectionMode } from './types';
+/**
+ * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-view\>
+ *
+ */
+export declare class TreeView extends FoundationTreeView {
+    selectionMode: SelectionMode;
+    connectedCallback(): void;
+}