@ni/nimble-components 18.13.6 → 19.0.1

package/dist/all-components-bundle.js

@@ -16366,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Thu, 11 May 2023 18:29:12 GMT
+     * Generated on Fri, 12 May 2023 23:29:26 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -19060,6 +19060,10 @@
         name: 'dot_solid_dot_stroke_measurement_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M5 3h1v3H5zM6 4h4v1H6zM10 3h1v3h-1zM7 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm5-2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2m0-1a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z"/></svg>`
     };
+    const downRightFromSquare16X16 = {
+        name: 'down_right_from_square_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m5.958 10.03 2.063-6.281.49 2.344 4.117-4.122 1.414 1.414L9.94 7.487l2.324.504-6.306 2.038Z"/><path class="cls-1" d="M8 10.42V12H4V8h1.572l.657-2H2v8h8V9.774l-2 .646z"/></svg>`
+    };
     const download16X16 = {
         name: 'download_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 9v5H2V9h1v4h10V9Zm-5.982 2L11 5.1 8.996 6.412 9 2H7v4.387L5 5.1Z"/></svg>`
@@ -19084,14 +19088,14 @@
         name: 'file_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M4 3v10h8V7H8V3Zm5 0v3h3Z"/></svg>`
     };
+    const fileArrowCurvedRight16X16 = {
+        name: 'file_arrow_curved_right_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m7 2 3 3H7V2ZM6 6V2H2v12h4.282l.03-.187A4.508 4.508 0 0 1 10 10.065V6H6Zm8 5.5L11 9v2c-1.817-.091-3.412 1.137-3.701 2.97.576-.672 2.077-2.065 3.701-1.82V14l3-2.5Z"/></svg>`
+    };
     const fileDrawer16X16 = {
         name: 'file_drawer_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 4v10h12V4Zm8 4H6V6h4Zm4-5H2V2h12Z"/></svg>`
     };
-    const fileExport = {
-        name: 'file_export',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.8 13.6H2V3h4.2v4.2h4.2V10c-2 0-3.6 1.6-3.6 3.6Zm3.7-7.4H7.3V3l3.2 3.2Z"/><path d="M11.6 9.2v1.6c-1.9-.2-3.6 1.1-3.9 3 .6-.7 2.2-2.2 3.9-1.8v1.5l2.4-2.1-2.4-2.2Z"/></svg>`
-    };
     const fileSearch16X16 = {
         name: 'file_search_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 6v6h-3.333a3.662 3.662 0 0 0 .249-1.302A3.701 3.701 0 0 0 7.22 7 3.654 3.654 0 0 0 6 7.223V2h4v4Zm-3-4v3h3Zm-1.126 8.698a2.697 2.697 0 0 1-4.73 1.772L2.521 14l-.48-.823 2.613-1.523a2.698 2.698 0 1 1 5.22-.956Zm-.952 0a1.745 1.745 0 1 0-1.745 1.745 1.747 1.747 0 0 0 1.745-1.745Z"/></svg>`
@@ -19268,10 +19272,6 @@
         name: 'share_nodes_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 10c-.601 0-1.134.27-1.5.69L5.954 8.419a2 2 0 0 0 0-.836l4.544-2.273c.367.42.9.691 1.501.691a2 2 0 1 0-1.955-1.582L5.501 6.691C5.134 6.27 4.6 6 4 6a2 2 0 1 0 0 4c.601 0 1.134-.27 1.5-.69l4.545 2.272A2 2 0 1 0 12 10Z"/></svg>`
     };
-    const shareSquare16X16 = {
-        name: 'share_square_16_x_16',
-        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m13.984 2.012-2.069 6.153-.565-2.722-3.544 3.544-.822-.822 3.544-3.544-2.723-.566ZM2 4v10h10v-4h-2v2H4V6h2V4Z"/></svg>`
-    };
     const shieldCheck16X16 = {
         name: 'shield_check_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 2v5.11C2 10.39 8 14 8 14s6-3.281 6-6.89V2Zm4.788 8.2L4 7.388 5.225 6.2l1.553 1.61 4.06-4.01L12 5.013Z"/></svg>`
@@ -19384,6 +19384,10 @@
         name: 'unlock_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M6.062 8V5.986a2.407 2.407 0 0 1 .566-1.516A1.834 1.834 0 0 1 8 4a1.883 1.883 0 0 1 2 2h2a3.888 3.888 0 0 0-4-4 3.822 3.822 0 0 0-2.81 1.078A4.349 4.349 0 0 0 4.062 6v2H3v6h10V8Z"/></svg>`
     };
+    const upRightFromSquare16X16 = {
+        name: 'up_right_from_square_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 10.828V12H4V8h1.172l2-2H2v8h8V8.828l-2 2Z"/><path class="cls-1" d="m14.042 1.97-2.063 6.281-.49-2.344-4.117 4.122-1.414-1.414 4.102-4.102-2.324-.504 6.306-2.038z"/></svg>`
+    };
     const upload16X16 = {
         name: 'upload_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 9v5H2V9h1v4h10V9ZM7.982 2 5 7.9l2.004-1.312L7 11h2V6.613L11 7.9Z"/></svg>`
@@ -22080,6 +22084,18 @@
     registerIcon('icon-dot-solid-dot-stroke-measurement', IconDotSolidDotStrokeMeasurement);
     DesignSystem.tagFor(IconDotSolidDotStrokeMeasurement);
 
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'downRightFromSquare' icon
+     */
+    class IconDownRightFromSquare extends Icon {
+        constructor() {
+            super(downRightFromSquare16X16);
+        }
+    }
+    registerIcon('icon-down-right-from-square', IconDownRightFromSquare);
+    DesignSystem.tagFor(IconDownRightFromSquare);
+
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'download' icon
@@ -22142,27 +22158,27 @@
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
-     * The icon component for the 'fileDrawer' icon
+     * The icon component for the 'fileArrowCurvedRight' icon
      */
-    class IconFileDrawer extends Icon {
+    class IconFileArrowCurvedRight extends Icon {
         constructor() {
-            super(fileDrawer16X16);
+            super(fileArrowCurvedRight16X16);
         }
     }
-    registerIcon('icon-file-drawer', IconFileDrawer);
-    DesignSystem.tagFor(IconFileDrawer);
+    registerIcon('icon-file-arrow-curved-right', IconFileArrowCurvedRight);
+    DesignSystem.tagFor(IconFileArrowCurvedRight);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
-     * The icon component for the 'fileExport' icon
+     * The icon component for the 'fileDrawer' icon
      */
-    class IconFileExport extends Icon {
+    class IconFileDrawer extends Icon {
         constructor() {
-            super(fileExport);
+            super(fileDrawer16X16);
         }
     }
-    registerIcon('icon-file-export', IconFileExport);
-    DesignSystem.tagFor(IconFileExport);
+    registerIcon('icon-file-drawer', IconFileDrawer);
+    DesignSystem.tagFor(IconFileDrawer);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22680,18 +22696,6 @@
     registerIcon('icon-share-nodes', IconShareNodes);
     DesignSystem.tagFor(IconShareNodes);
 
-    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-    /**
-     * The icon component for the 'shareSquare' icon
-     */
-    class IconShareSquare extends Icon {
-        constructor() {
-            super(shareSquare16X16);
-        }
-    }
-    registerIcon('icon-share-square', IconShareSquare);
-    DesignSystem.tagFor(IconShareSquare);
-
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'shieldCheck' icon
@@ -23016,6 +23020,18 @@
     registerIcon('icon-unlock', IconUnlock);
     DesignSystem.tagFor(IconUnlock);
 
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'upRightFromSquare' icon
+     */
+    class IconUpRightFromSquare extends Icon {
+        constructor() {
+            super(upRightFromSquare16X16);
+        }
+    }
+    registerIcon('icon-up-right-from-square', IconUpRightFromSquare);
+    DesignSystem.tagFor(IconUpRightFromSquare);
+
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'upload' icon
@@ -31290,15 +31306,41 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
     const tableColumnAnchorCellViewTag = DesignSystem.tagFor(TableColumnAnchorCellView);
 
+    /**
+     * The group header view base class for displaying fields of any type as text.
+     */
+    class TableColumnTextGroupHeaderViewBase extends TableGroupHeaderView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.hasOverflow = false;
+        }
+        get content() {
+            return this.shouldUsePlaceholder ? this.placeholder : this.text;
+        }
+        /** @internal */
+        updateTitleOverflow() {
+            this.hasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
+        }
+        /** @internal */
+        clearTitleOverflow() {
+            this.hasOverflow = false;
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnTextGroupHeaderViewBase.prototype, "hasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnTextGroupHeaderViewBase.prototype, "content", null);
+
     const template$6 = html `
     <span
         ${ref('textSpan')}
-        class="${x => (typeof x.groupHeaderValue === 'string' ? '' : 'placeholder')}"
+        class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
         @mouseover="${x => x.updateTitleOverflow()}"
         @mouseout="${x => x.clearTitleOverflow()}"
-        title="${x => (x.isValidContentAndHasOverflow && x.content
-    ? x.content
-    : undefined)}"
+        title="${x => (x.hasOverflow && x.content ? x.content : undefined)}"
     >
         ${x => x.content}
     </span>
@@ -31319,33 +31361,19 @@
 `;
 
     /**
-     * The custom element used to render a group row header for a group representing rows
-     * grouped by a TableColumnText column.
+     * The group header view for displaying string fields as text.
      */
-    class TableColumnTextGroupHeaderView extends TableGroupHeaderView {
-        constructor() {
-            super(...arguments);
-            /** @internal */
-            this.isValidContentAndHasOverflow = false;
-        }
-        get content() {
-            return typeof this.groupHeaderValue === 'string'
-                ? this.groupHeaderValue
-                : this.columnConfig?.placeholder ?? '';
+    class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+        get text() {
+            return this.groupHeaderValue;
         }
-        updateTitleOverflow() {
-            this.isValidContentAndHasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
+        get placeholder() {
+            return this.columnConfig?.placeholder ?? '';
         }
-        clearTitleOverflow() {
-            this.isValidContentAndHasOverflow = false;
+        get shouldUsePlaceholder() {
+            return typeof this.groupHeaderValue !== 'string';
         }
     }
-    __decorate$1([
-        observable
-    ], TableColumnTextGroupHeaderView.prototype, "isValidContentAndHasOverflow", void 0);
-    __decorate$1([
-        volatile
-    ], TableColumnTextGroupHeaderView.prototype, "content", null);
     const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
         baseName: 'table-column-text-group-header',
         template: template$6,
@@ -31474,24 +31502,31 @@
         .register(nimbleTableColumnAnchor());
     DesignSystem.tagFor(TableColumnAnchor);
 
-    const styles$9 = css `
-    span {
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .placeholder {
-        color: ${controlLabelFontColor};
+    /**
+     * The base class for table columns that display fields of any type as text.
+     */
+    class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+        fieldNameChanged() {
+            this.columnInternals.dataRecordFieldNames = [this.fieldName];
+            this.columnInternals.operandDataRecordFieldName = this.fieldName;
+        }
+        placeholderChanged() {
+            this.columnInternals.columnConfig = {
+                placeholder: this.placeholder ?? ''
+            };
+        }
     }
-`;
+    __decorate$1([
+        attr({ attribute: 'field-name' })
+    ], TableColumnTextBase.prototype, "fieldName", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnTextBase.prototype, "placeholder", void 0);
 
     const template$5 = html `
     <span
         ${ref('textSpan')}
-        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+        class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
         @mouseover="${x => {
     x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
 }}"
@@ -31504,27 +31539,54 @@
     </span>
 `;
 
+    const styles$9 = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
     /**
-     * A cell view for displaying strings
+     * The cell view base class for displaying fields of any type as text.
      */
-    class TableColumnTextCellView extends TableCellView {
+    class TableColumnTextCellViewBase extends TableCellView {
         constructor() {
             super(...arguments);
             /** @internal */
             this.isValidContentAndHasOverflow = false;
         }
         get content() {
-            return typeof this.cellRecord.value === 'string'
-                ? this.cellRecord.value
-                : this.columnConfig.placeholder;
+            return this.shouldUsePlaceholder ? this.placeholder : this.text;
         }
     }
     __decorate$1([
         observable
-    ], TableColumnTextCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumnTextCellViewBase.prototype, "isValidContentAndHasOverflow", void 0);
     __decorate$1([
         volatile
-    ], TableColumnTextCellView.prototype, "content", null);
+    ], TableColumnTextCellViewBase.prototype, "content", null);
+
+    /**
+     * A cell view for displaying string fields as text
+     */
+    class TableColumnTextCellView extends TableColumnTextCellViewBase {
+        get text() {
+            return this.cellRecord.value;
+        }
+        get placeholder() {
+            return this.columnConfig.placeholder;
+        }
+        get shouldUsePlaceholder() {
+            return typeof this.cellRecord.value !== 'string';
+        }
+    }
     const textCellView = TableColumnTextCellView.compose({
         baseName: 'table-column-text-cell-view',
         template: template$5,
@@ -31534,9 +31596,9 @@
     const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
 
     /**
-     * The table column for displaying strings.
+     * The table column for displaying string fields as text.
      */
-    class TableColumnText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+    class TableColumnText extends TableColumnTextBase {
         constructor() {
             super({
                 cellRecordFieldNames: ['value'],
@@ -31546,22 +31608,7 @@
             });
             this.columnInternals.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
-        fieldNameChanged() {
-            this.columnInternals.dataRecordFieldNames = [this.fieldName];
-            this.columnInternals.operandDataRecordFieldName = this.fieldName;
-        }
-        placeholderChanged() {
-            this.columnInternals.columnConfig = {
-                placeholder: this.placeholder ?? ''
-            };
-        }
     }
-    __decorate$1([
-        attr({ attribute: 'field-name' })
-    ], TableColumnText.prototype, "fieldName", void 0);
-    __decorate$1([
-        attr
-    ], TableColumnText.prototype, "placeholder", void 0);
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
         template: template$8,