q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-file-picker/q2-file-picker.js

@@ -24,6 +24,12 @@ export class Q2FilePicker {
          * The size of the browse button.
          */
         this.buttonSize = 'medium';
+        /**
+         * When `false`, the file name renders as-is and may wrap. Otherwise, long
+         * file names are middle-ellipsized so the beginning and end of the name
+         * remain visible.
+         */
+        this.ellipsizeFileName = true;
         /**
          * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or
          * 'jpg, png, pdf'). When using the attribute, provide a comma-separated
@@ -39,6 +45,10 @@ export class Q2FilePicker {
          * The maximum size (in bytes) of any file that can be selected.
          */
         this.maxFileSize = Infinity;
+        /**
+         * Shows a gradient at the bottom of the file list when more files are available below the visible area.
+         */
+        this.showGradient = true;
         /**
          * An array of `ValidFileStatus` objects representing the upload status of
          * files. Each `ValidFileStatus` object contains the following properties:
@@ -85,14 +95,21 @@ export class Q2FilePicker {
             this.disableEvent(e);
             this.isDropZoneHighlighted = true;
         };
+        this.updateFileListGradient = () => {
+            if (!this.fileListContainer)
+                return;
+            const { clientHeight, scrollHeight, scrollTop } = this.fileListContainer;
+            const hasMoreFiles = this.showGradient && scrollHeight > clientHeight && Math.ceil(scrollTop) + clientHeight < scrollHeight;
+            this.fileListContainer.classList.toggle('more-files', hasMoreFiles);
+        };
         // #endregion
         // #region Render Methods
         this.render = () => {
             const { disabled } = this;
-            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { class: "browse-link", label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link", disabled: disabled, href: "javascript:void(0)" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { disabled: disabled || this.areFilesUploading, intent: "workflow-primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: this.actualButtonSize, "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", disabled: disabled, multiple: true, tabIndex: -1 }), h("div", { class: "file-list-container" }, h("q2-list", { class: "file-list" }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "decorator" }, file.status === 'invalid-type' ||
+            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { class: "browse-link", label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link", disabled: disabled, href: "javascript:void(0)" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { block: this.isMobileViewport, disabled: disabled || this.areFilesUploading, intent: "primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: this.actualButtonSize, "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", disabled: disabled, multiple: true, tabIndex: -1 }), h("div", { class: "file-list-container", onScroll: this.updateFileListGradient, ref: el => (this.fileListContainer = el !== null && el !== void 0 ? el : this.fileListContainer) }, h("q2-list", { class: "file-list", ref: el => (this.fileList = el !== null && el !== void 0 ? el : this.fileList) }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "decorator" }, file.status === 'invalid-type' ||
                 file.status === 'over-size-limit' ||
                 file.status === 'failed' ||
-                file.status === 'over-max-files-limit' ? (h("q2-icon", { class: "icon-error", type: "error" })) : file.status === 'in-progress' ? (h("q2-loading", { class: "file-item-loading", "hide-from-screen-readers": true })) : (h("q2-icon", { class: "icon-success", type: "success" }))), h("div", { slot: "header" }, file.file.name), h("div", { class: "file-item-info", slot: "body" }, this.getFileItemStatusMessage(file)), h("div", { slot: "action" }, h("q2-btn", { class: "dismiss-button", intent: "neutral-text", "hide-label": "true", label: this.getFileItemButtonLabel(file), onClick: this.getClickHandlerToRemoveFileItem(file.file.name), disabled: disabled }, h("q2-icon", { type: "close" }))))))))));
+                file.status === 'over-max-files-limit' ? (h("q2-icon", { class: "icon-error", type: "error" })) : file.status === 'in-progress' ? (h("q2-loading", { class: "file-item-loading", "hide-from-screen-readers": true })) : (h("q2-icon", { class: "icon-success", type: "success" }))), this.ellipsizeFileName === false ? (h("div", { slot: "header" }, file.file.name)) : (h("div", { class: "file-name-header", slot: "header" }, h("span", { class: "file-name-leading" }, file.file.name.slice(0, Math.ceil(file.file.name.length / 2))), h("span", { class: "file-name-trailing" }, h("bdo", { dir: "ltr" }, file.file.name.slice(Math.ceil(file.file.name.length / 2)))))), h("div", { class: "file-item-info", slot: "body" }, this.getFileItemStatusMessage(file)), h("div", { slot: "action" }, h("q2-btn", { class: "dismiss-button", intent: "neutral-text", "hide-label": "true", label: this.getFileItemButtonLabel(file), onClick: this.getClickHandlerToRemoveFileItem(file.file.name), disabled: disabled }, h("q2-icon", { type: "close" }))))))))));
         };
     }
     /**
@@ -116,7 +133,29 @@ export class Q2FilePicker {
         console.error('Setting the value of this component directly is not allowed.');
     }
     // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.fileListResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentDidLoad() {
+        if (typeof ResizeObserver !== 'function')
+            return;
+        this.fileListResizeObserver = new ResizeObserver(this.updateFileListGradient);
+        this.observeFileListContent();
+    }
+    componentDidRender() {
+        this.observeFileListContent();
+        this.updateFileListGradient();
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(this.updateFileListGradient);
+        }
+    }
+    // #endregion
     // #region Watchers
+    updateGradientVisibility() {
+        this.updateFileListGradient();
+    }
     updateFileList(newValue) {
         newValue.forEach(statusItem => {
             const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);
@@ -166,6 +205,11 @@ export class Q2FilePicker {
     get hasLabelSlotContent() {
         return hasSlotContent(this.el, 'label');
     }
+    get isMobileViewport() {
+        return typeof window !== 'undefined' && window.matchMedia
+            ? window.matchMedia('(max-width: 479px)').matches
+            : false;
+    }
     buildFilesObject(filesToUpload) {
         const invalidFiles = [];
         invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));
@@ -300,6 +344,15 @@ export class Q2FilePicker {
     launchFileBrowser() {
         this.browseButtonInput.dispatchEvent(new MouseEvent('click'));
     }
+    observeFileListContent() {
+        if (!this.fileListResizeObserver || !this.fileList)
+            return;
+        this.fileListResizeObserver.disconnect();
+        this.fileListResizeObserver.observe(this.fileList);
+        this.fileList.querySelectorAll('q2-item').forEach(fileItem => {
+            this.fileListResizeObserver.observe(fileItem);
+        });
+    }
     static get is() { return "q2-file-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -375,6 +428,26 @@ export class Q2FilePicker {
                 "reflect": true,
                 "attribute": "disabled"
             },
+            "ellipsizeFileName": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `false`, the file name renders as-is and may wrap. Otherwise, long\nfile names are middle-ellipsized so the beginning and end of the name\nremain visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "ellipsize-file-name",
+                "defaultValue": "true"
+            },
             "fileTypes": {
                 "type": "string",
                 "mutable": false,
@@ -457,6 +530,26 @@ export class Q2FilePicker {
                 "attribute": "max-file-size",
                 "defaultValue": "Infinity"
             },
+            "showGradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a gradient at the bottom of the file list when more files are available below the visible area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-gradient",
+                "defaultValue": "true"
+            },
             "status": {
                 "type": "unknown",
                 "mutable": false,
@@ -571,6 +664,9 @@ export class Q2FilePicker {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "showGradient",
+                "methodName": "updateGradientVisibility"
+            }, {
                 "propName": "status",
                 "methodName": "updateFileList"
             }];

package/dist/collection/components/q2-file-picker/test/q2-file-picker-test.vr.js

@@ -102,3 +102,25 @@ test.describe(`q2-file-picker — scaled font size × themes`, () => {
         }
     }
 });
+test('q2-file-picker--scrollable-file-list--resting — default-2026', async ({ page }) => {
+    await setupPage(page, '<q2-file-picker file-types="pdf" max-files="1"></q2-file-picker>', {
+        theme: 'default-2026',
+        setupLoc: true,
+    });
+    await page.evaluate(() => {
+        const filePicker = document.querySelector('q2-file-picker');
+        const input = filePicker.shadowRoot.querySelector('[test-id="file-input"]');
+        const files = new DataTransfer();
+        for (let index = 0; index < 6; index += 1) {
+            files.items.add(new File(['content'], `file-${index}.txt`, { type: 'text/plain' }));
+        }
+        input.files = files.files;
+        input.dispatchEvent(new Event('change'));
+    });
+    await expect(page.locator('.file-list-container.more-files')).toHaveCount(1);
+    await expect(page).toHaveScreenshot('q2-file-picker--scrollable-file-list--resting--default-2026.png');
+    await page.locator('q2-file-picker').evaluate((filePicker) => {
+        filePicker.showGradient = false;
+    });
+    await expect(page.locator('.file-list-container.more-files')).toHaveCount(0);
+});

package/dist/collection/components/q2-form/q2-form.js

@@ -13,7 +13,7 @@ export class Q2Form {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b01b965b3fc436b4155245fa747e4c8922304114', class: "container" }, h("slot", { key: '039fd27f2a80825f14a6247eb330eac983638389' })));
+        return (h("div", { key: 'e4a4cee5eb8e69c9fe81423d3942a6299b4d1462', class: "container" }, h("slot", { key: '1d729b1c93148f0a12954688cd33266b24f40f67' })));
     }
     static get is() { return "q2-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js

@@ -71,7 +71,7 @@ export class Q2FormattedText {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '9345b2829e7ac6dd1e5e308e1b840dcb298dbc0d', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '4687a60218658aeced2507ffd9f5eef6c5c9b40e' }, this.formattedValue)));
+        return (h("div", { key: 'bb6f08a7fd5801e7527624b766061019ce931ac5', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '44808806b71f4b3783fa38806789bbc91956bdcd' }, this.formattedValue)));
     }
     static get is() { return "q2-formatted-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-input/q2-input.css

@@ -167,6 +167,7 @@ button {
  * @prop --tct-input-count-width: (<length-percentage>) Controls the width of the character-count indicator.
  * @prop --tct-input-icon-stroke-primary: (<color>) Controls the primary stroke color of icons rendered inside the input.
  * @prop --tct-input-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons rendered inside the input.
+ * @prop --tct-input-icon-size: (<length>) Controls the size of icons rendered inside the input.
  * @prop --tct-input-icon-container-font-size?: (<length-percentage>) Controls the optional font size of content inside the input icon containers.
  * @prop --tct-input-icon-container-icon-min-width: (<length>) Controls the minimum width of icon slots inside the input icon containers.
  * @prop --tct-input-icon-container-empty-display: (<custom-ident>) Controls the display value of icon containers when empty.
@@ -194,6 +195,7 @@ button {
   display: block;
   margin: var(--tct-input-margin, var(--comp-default-input-margin));
   font-size: var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));
+  letter-spacing: inherit;
 }
 
 :host([hidden]) {
@@ -210,7 +212,7 @@ button {
 }
 .field-container.is-small .btn-clear {
   --tct-btn-icon-width: 20px;
-  --tct-icon-size: 17px;
+  --tct-icon-size: var(--tct-input-icon-size, var(--const-px-18, 18px));
 }
 
 .input-label {
@@ -344,6 +346,58 @@ button {
   -webkit-text-fill-color: var(--tct-input-autofill-font-color, var(--t-text, inherit));
 }
 
+.standard-input-container {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+.visible-last-count-value {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: var(--tct-input-padding, 0);
+  color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  font-weight: var(--tct-input-font-weight, var(--t-input-font-weight, 400));
+  font-family: var(--tct-input-visible-last-count-font-family, monospace);
+  letter-spacing: var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));
+  pointer-events: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.visible-last-count-content {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  transform: translateX(calc(var(--tct-input-visible-last-count-scroll-left, 0px) * -1));
+}
+
+.visible-last-count-character {
+  display: inline-grid;
+  flex: 0 0 auto;
+}
+.visible-last-count-character::before {
+  content: attr(data-character);
+  grid-area: 1/1;
+  visibility: hidden;
+}
+
+.visible-last-count-visible-value {
+  flex: 0 0 auto;
+}
+
+.visible-last-count-mask {
+  grid-area: 1/1;
+  justify-self: center;
+  transform: translateY(var(--tct-input-visible-last-count-mask-translate-y, 0));
+}
+
 .input-field {
   flex: 1;
   border: 0;
@@ -365,6 +419,14 @@ button {
   /* To remove up/down arrow in number field for webkit based browser */
   /* For Firefox */
 }
+.input-field.has-visible-last-count {
+  position: relative;
+  z-index: 1;
+  color: transparent;
+  caret-color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, auto)));
+  -webkit-text-fill-color: transparent;
+  font-family: var(--tct-input-visible-last-count-font-family, monospace);
+}
 .input-field:focus {
   outline: none;
   box-shadow: none;
@@ -441,6 +503,7 @@ button {
 
 .input-icons-container-left,
 .input-icons-container-right {
+  --tct-icon-size: var(--tct-input-icon-size, var(--const-px-18, 18px));
   --tct-btn-icon-hover-background: var(--tct-input-btn-hover-background);
   --tct-btn-hover-background: var(--tct-input-btn-hover-background);
   display: flex;
@@ -553,6 +616,9 @@ q2-icon {
   color: var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));
   border-radius: var(--tct-message-border-radius, var(--app-border-radius-1, inherit));
 }
+.messages-container li:only-child {
+  list-style: none;
+}
 
 .has-error label {
   color: var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))));