npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/cjs/q2-file-picker.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-file-picker.entry.cjs.js","sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n --tct-link-font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n\n color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n margin-bottom: 0;\n margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-description-font-weight, 400);\n text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n --tct-icon-stroke-secondary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n\n align-items: center;\n background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n color: var(--tct-file-picker-drop-zone-color, #747474);\n display: flex;\n flex-direction: column;\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n height: var(--tct-file-picker-drop-zone-height, 150px);\n justify-content: center;\n max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n min-width: var(--tct-file-picker-drop-zone-min-width, 320px);\n padding: var(--tct-file-picker-drop-zone-padding, 20px);\n text-align: center;\n width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.drop-zone-disabled {\n opacity: var-list(--tct-file-picker-drop-zone-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n}\n\n.fade-in {\n animation-fill-mode: both;\n animation-play-state: running;\n animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n animation: shrinkToCenterFadeOut 0.1s ease-out;\n animation-play-state: running;\n animation-fill-mode: both;\n}\n\n.file-item {\n --tct-btn-icon-border-radius: var(--tct-file-picker-item-close-btn-border-radius, 4px);\n --tct-btn-neutral-text-active-font-color: #{var-list(\n --tct-file-picker-item-close-btn-active-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-hover-focus-ring-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-icon-padding: 0;\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n --tct-file-picker-item-border-color,\n --t-gray-8,\n #808080\n )};\n --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n text-align: left;\n}\n\n.file-item-info {\n @include line-clamp(1);\n}\n\n.file-item-loading {\n font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n max-height: var(--tct-file-picker-list-max-height, 190px);\n max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n --tct-icon-stroke-width: 2px;\n}\n\n.label {\n color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n display: inline-block;\n font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-label-font-weight, 600);\n text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n margin: 0;\n}\n\n.loading-message {\n color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n height: 30px;\n width: 30px;\n &:hover {\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n }\n}\n\n[slot='action'] {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\nimport type { ValidFileStatus, FilesObject } from 'q2-tecton-common/lib/types/elements';\n\ntype DisplayedFile = {\n file: File;\n message?: string;\n status: ValidFileStatusType \| InvalidFileStatusType;\n toBeRemoved?: boolean;\n};\ntype ValidFileStatusType = 'in-progress' \| 'failed' \| 'uploaded';\ntype InvalidFileStatusType = 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit';\n\n/*\n @name File Picker\n * @category Forms\n * @summary Use for uploading files via browse dialog or drag-and-drop.\n * @slot label - An optional slot to display a custom label.\n * @slot description - An optional slot to display a custom description.\n /\n@Component({\n tag: 'q2-file-picker',\n styleUrl: 'q2-file-picker.scss',\n shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n // #region Own Properties\n\n private _value: FilesObject = { invalidFiles: [], validFiles: [] };\n browseButtonInput: HTMLElement;\n dropZone: HTMLElement;\n fileItemsToBeDeleted;\n queuedFiles: File[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n areFilesUploading: boolean = false;\n\n @State()\n displayedFiles: DisplayedFile[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\n\n /\n The size of the browse button.\n /\n @Prop({ reflect: true })\n buttonSize: 'none' \| 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n A description of the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Disables the file picker, preventing user interaction.\n /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n * via JavaScript.\n /\n @Prop({ reflect: true })\n fileTypes: string[] \| string = [];\n\n /\n The label for the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of files that can be selected.\n /\n @Prop({ reflect: true })\n // maxFiles: number \| string = Infinity;\n maxFiles: number = Infinity;\n\n /\n The maximum size (in bytes) of any file that can be selected.\n /\n @Prop({ reflect: true })\n maxFileSize: number = Infinity;\n\n /\n An array of `ValidFileStatus` objects representing the upload status of\n * files. Each `ValidFileStatus` object contains the following properties:\n * - `name`: The file name.\n * - `status`: The upload status, either `\"failed\"` or `\"uploaded\"`.\n * - `message`: (Optional) A custom status message, used only when `status`\n * is `\"failed\"`. This allows developers to provide more detail about\n * upload failures while ensuring all other file status messages remain\n * consistent with approved design/UX standards. Custom failure messages\n * are limited to a single line.\n * @localizable\n /\n @Prop({ reflect: true })\n status: ValidFileStatus[] = [];\n\n /\n Returns an object representing the selected files with two properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n * @readonly\n /\n @Prop()\n get value() {\n return this._value;\n }\n\n set value(_) {\n console.error('Setting the value of this component directly is not allowed.');\n }\n\n /\n Determines if the file picker is a browse button or a drop zone with a\n * browse link.\n /\n @Prop({ reflect: true })\n variant: 'browse' \| 'browse-drop' = 'browse';\n\n // #endregion\n // #region Events\n\n /\n Custom event dispatched when the user selects files. The event detail\n * contains an object representing the selected files with two\n * properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n /\n @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: ValidFileStatus[]) {\n newValue.forEach(statusItem => {\n const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n if (matchingQueuedFileIndex > -1) {\n const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n } else {\n const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n file => file.file.name === statusItem.name\n );\n if (matchingDisplayedFileIndex > -1) {\n this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n if (statusItem.status === 'failed' && statusItem.message) {\n this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n }\n this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get actualButtonSize() {\n return this.buttonSize === 'none' ? undefined : this.buttonSize;\n }\n\n get dropZoneClasses() {\n const classes = ['drop-zone'];\n if (this.isDropZoneHighlighted) {\n classes.push('drop-zone-highlighted');\n }\n\n if (this.disabled) {\n classes.push('drop-zone-disabled');\n }\n\n return classes.join(' ');\n }\n\n get fileTypesArray() {\n return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n }\n\n get hasDescription() {\n return !!this.description \|\| this.hasDescriptionSlotContent;\n }\n\n get hasDescriptionSlotContent() {\n return hasSlotContent(this.el, 'description');\n }\n\n get hasLabel() {\n return !!this.label \|\| this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.el, 'label');\n }\n\n buildFilesObject(filesToUpload: File[]): FilesObject {\n const invalidFiles = [];\n invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n this.displayedFiles = [...invalidFiles];\n\n if (filesToUpload.length === 0) {\n this.areFilesUploading = false;\n } else {\n this.queuedFiles = filesToUpload;\n }\n\n return { invalidFiles, validFiles: filesToUpload };\n }\n\n dimDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n };\n\n disableEvent(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n disableLoaderIfAllFilesUploaded() {\n if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n this.areFilesUploading = false;\n }\n }\n\n emitChange(filesObject: FilesObject) {\n this.areFilesUploading = filesObject.validFiles.length > 0;\n this.tctChange.emit(filesObject);\n }\n\n extractFilesOfInvalidTypes(files: File[]) {\n const invalidFiles = [];\n\n if (this.fileTypesArray.length === 0) return invalidFiles;\n\n files.forEach(file => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n if (!this.fileTypesArray.includes(fileExtension)) {\n invalidFiles.push({ file, status: 'invalid-type' });\n }\n });\n\n // Remove invalid files from the files array\n invalidFiles.forEach(invalidFile => {\n const index = files.indexOf(invalidFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return invalidFiles;\n }\n\n extractFilesOverMaxFilesLimit(files: File[]) {\n const filesOverMaxFilesLimit = [];\n\n if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n if (files.length > this.maxFiles) {\n const excessFiles = files.splice(this.maxFiles);\n excessFiles.forEach(file => {\n filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n });\n }\n\n return filesOverMaxFilesLimit;\n }\n\n extractFilesOverSizeLimit(files: File[]) {\n const filesOverSizeLimit = [];\n\n if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n files.forEach(file => {\n if (file.size > this.maxFileSize) {\n filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n }\n });\n\n // Remove files over size limit from the files array\n filesOverSizeLimit.forEach(overSizeFile => {\n const index = files.indexOf(overSizeFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return filesOverSizeLimit;\n }\n\n forceRerender() {\n this.refreshCounter += 1; // Triggers re-render\n }\n\n getAnimationendHandlerToRemoveFileItem(fileName: string) {\n return (e: AnimationEvent) => {\n if (e.animationName === 'shrinkToCenterFadeOut') {\n this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n }\n };\n }\n\n getClickHandlerToRemoveFileItem(fileName: string) {\n return () => {\n const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n if (fileToDelete) {\n fileToDelete.toBeRemoved = true;\n this.forceRerender();\n }\n };\n }\n\n getFileItemButtonLabel(displayedFile: DisplayedFile) {\n const statusMessage = `Status, ${displayedFile.status === 'uploaded' ? 'uploaded. ' : ''}${this.getFileItemStatusMessage(displayedFile)}`;\n return `Dismiss file item for ${displayedFile.file.name}. ${statusMessage}.`;\n }\n\n getFileItemClasses(fileName: string) {\n const classes = ['file-item'];\n const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n if (matchingFile?.toBeRemoved) {\n classes.push('fade-out');\n } else {\n classes.push('fade-in');\n }\n return classes.join(' ');\n }\n\n getFileItemStatusMessage(displayedFile: DisplayedFile) {\n switch (displayedFile.status) {\n case 'invalid-type':\n return loc('tecton.element.filePicker.unsupportedFileType');\n case 'over-size-limit':\n return loc('tecton.element.filePicker.sizeExceedsLimit');\n case 'over-max-files-limit':\n return loc('tecton.element.filePicker.overMaxFilesLimit');\n case 'in-progress':\n return loc('tecton.element.filePicker.uploadingEllipsis');\n case 'failed':\n if (displayedFile.message) return loc(displayedFile.message);\n return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [\n (displayedFile.file.size / (1000 1000)).toFixed(2),\n ]);\n }\n }\n\n grabDroppedFiles = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n const droppedFiles = Array.from(e.dataTransfer.files);\n const filesObject = this.buildFilesObject(droppedFiles);\n\n this.emitChange(filesObject);\n this._value = filesObject;\n };\n\n grabSelectedFiles = (e: Event) => {\n const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n const filesObject = this.buildFilesObject(selectedFiles);\n // Reset the input value to allow re-selection of the same file\n (this.browseButtonInput as HTMLInputElement).value = '';\n\n this.emitChange(filesObject);\n this._value = filesObject;\n };\n\n highlightDropZone = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = true;\n };\n\n launchFileBrowser() {\n this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n }\n\n // #endregion\n // #region Render Methods\n\n render = () => {\n const { disabled } = this;\n return (\n <div class=\"file-picker\">\n {(this.hasLabel \|\| this.hasDescription) && (\n <div class=\"heading\">\n {this.hasLabel && (\n <label\n class=\"label\"\n htmlFor=\"file-field\"\n test-id=\"label\"\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </label>\n )}\n {this.hasDescription && (\n <div\n class=\"description\"\n id=\"description\"\n test-id=\"description\"\n >\n {!!this.description ? (\n loc(this.description)\n ) : this.hasDescriptionSlotContent ? (\n <slot name=\"description\" />\n ) : (\n ''\n )}\n </div>\n )}\n </div>\n )}\n\n {(this.variant === 'browse-drop' && (\n <div\n class={this.dropZoneClasses}\n onDragEnter={this.disableEvent}\n onDragLeave={this.dimDropZone}\n onDragOver={this.highlightDropZone}\n onDrop={this.grabDroppedFiles}\n ref={el => (this.dropZone = el ?? this.dropZone)}\n test-id=\"drop-zone\"\n >\n {(this.areFilesUploading && (\n <Fragment>\n <q2-loading class=\"loading\"></q2-loading>\n <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n </Fragment>\n )) \|\| (\n <Fragment>\n <q2-icon type=\"upload\"></q2-icon>\n <p class=\"drop-zone-text\">\n <q2-link\n class=\"browse-link\"\n label={loc('tecton.element.filePicker.browse')}\n onTctClick={() => this.launchFileBrowser()}\n variant=\"inline\"\n test-id=\"browse-link\"\n disabled={disabled}\n href=\"javascript:void(0)\"\n />\n {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n </p>\n </Fragment>\n )}\n </div>\n )) \|\| (\n <div\n class=\"browse\"\n test-id=\"browse\"\n >\n <q2-btn\n disabled={disabled \|\| this.areFilesUploading}\n intent=\"workflow-primary\"\n loading={this.areFilesUploading}\n onClick={() => this.launchFileBrowser()}\n size={this.actualButtonSize}\n test-id=\"browse-button\"\n >\n <q2-icon type=\"paperclip\"></q2-icon>\n <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n </q2-btn>\n </div>\n )}\n <input\n aria-describedby={(!!this.description && 'description') \|\| undefined}\n class=\"sr\"\n id=\"file-field\"\n onChange={this.grabSelectedFiles}\n ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n type=\"file\"\n test-id=\"file-input\"\n disabled={disabled}\n multiple\n tabIndex={-1}\n />\n <div class=\"file-list-container\">\n <q2-list class=\"file-list\">\n {this.displayedFiles.map(file => (\n <q2-item\n class={this.getFileItemClasses(file.file.name)}\n key={file.file.name}\n onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n >\n <div slot=\"decorator\">\n {file.status === 'invalid-type' \|\|\n file.status === 'over-size-limit' \|\|\n file.status === 'failed' \|\|\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading\n class=\"file-item-loading\"\n hide-from-screen-readers\n ></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div\n class=\"file-item-info\"\n slot=\"body\"\n >\n {this.getFileItemStatusMessage(file)}\n </div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n hide-label=\"true\"\n label={this.getFileItemButtonLabel(file)}\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n disabled={disabled}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"names":["h","loc","Fragment","hasSlotContent"],"mappings":"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"}
1	+ {"version":3,"file":"q2-file-picker.entry.cjs.js","sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n@import './variables';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n --tct-link-font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n\n color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n margin-bottom: 0;\n margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-description-font-weight, 400);\n text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n --tct-icon-stroke-secondary: #{var-list(--tct-file-picker-drop-zone-icon-color, --t-text, #4d4d4d)};\n\n align-items: center;\n background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n color: var(--tct-file-picker-drop-zone-color, #747474);\n display: flex;\n flex-direction: column;\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n height: var(--tct-file-picker-drop-zone-height, 150px);\n justify-content: center;\n max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n min-width: var(--tct-file-picker-drop-zone-min-width, 320px);\n padding: var(--tct-file-picker-drop-zone-padding, 20px);\n text-align: center;\n width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.drop-zone-disabled {\n opacity: var-list(--tct-file-picker-drop-zone-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n}\n\n.fade-in {\n animation-fill-mode: both;\n animation-play-state: running;\n animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n animation: shrinkToCenterFadeOut 0.1s ease-out;\n animation-play-state: running;\n animation-fill-mode: both;\n}\n\n.file-item {\n --tct-btn-icon-border-radius: var(--tct-file-picker-item-close-btn-border-radius, 4px);\n --tct-btn-neutral-text-active-font-color: #{var-list(\n --tct-file-picker-item-close-btn-active-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-hover-focus-ring-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-icon-padding: 0;\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n --tct-file-picker-item-border-color,\n --t-gray-8,\n #808080\n )};\n --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n text-align: left;\n}\n\n.file-item-info {\n @include line-clamp(1);\n}\n\n.file-item-loading {\n font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n max-height: var(--tct-file-picker-list-max-height, 190px);\n max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n --tct-icon-stroke-width: 2px;\n}\n\n.label {\n color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n display: inline-block;\n font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-label-font-weight, 600);\n text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n margin: 0;\n}\n\n.loading-message {\n color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n height: 30px;\n width: 30px;\n &:hover {\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n }\n}\n\n[slot='action'] {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\nimport type { ValidFileStatus, FilesObject } from 'q2-tecton-common/lib/types/elements';\n\ntype DisplayedFile = {\n file: File;\n message?: string;\n status: ValidFileStatusType \| InvalidFileStatusType;\n toBeRemoved?: boolean;\n};\ntype ValidFileStatusType = 'in-progress' \| 'failed' \| 'uploaded';\ntype InvalidFileStatusType = 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit';\n\n/*\n @name File Picker\n * @category Forms\n * @summary Use for uploading files via browse dialog or drag-and-drop.\n * @slot label - An optional slot to display a custom label.\n * @slot description - An optional slot to display a custom description.\n /\n@Component({\n tag: 'q2-file-picker',\n styleUrl: 'q2-file-picker.scss',\n shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n // #region Own Properties\n\n private _value: FilesObject = { invalidFiles: [], validFiles: [] };\n browseButtonInput: HTMLElement;\n dropZone: HTMLElement;\n fileItemsToBeDeleted;\n queuedFiles: File[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n areFilesUploading: boolean = false;\n\n @State()\n displayedFiles: DisplayedFile[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\n\n /\n The size of the browse button.\n /\n @Prop({ reflect: true })\n buttonSize: 'none' \| 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n A description of the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Disables the file picker, preventing user interaction.\n /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n * via JavaScript.\n /\n @Prop({ reflect: true })\n fileTypes: string[] \| string = [];\n\n /\n The label for the field. This is announced by screen readers when the field is focused.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of files that can be selected.\n /\n @Prop({ reflect: true })\n // maxFiles: number \| string = Infinity;\n maxFiles: number = Infinity;\n\n /\n The maximum size (in bytes) of any file that can be selected.\n /\n @Prop({ reflect: true })\n maxFileSize: number = Infinity;\n\n /\n An array of `ValidFileStatus` objects representing the upload status of\n * files. Each `ValidFileStatus` object contains the following properties:\n * - `name`: The file name.\n * - `status`: The upload status, either `\"failed\"` or `\"uploaded\"`.\n * - `message`: (Optional) A custom status message, used only when `status`\n * is `\"failed\"`. This allows developers to provide more detail about\n * upload failures while ensuring all other file status messages remain\n * consistent with approved design/UX standards. Custom failure messages\n * are limited to a single line.\n * @localizable\n /\n @Prop({ reflect: true })\n status: ValidFileStatus[] = [];\n\n /\n Returns an object representing the selected files with two properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n * @readonly\n /\n @Prop()\n get value() {\n return this._value;\n }\n\n set value(_) {\n console.error('Setting the value of this component directly is not allowed.');\n }\n\n /\n Determines if the file picker is a browse button or a drop zone with a\n * browse link.\n /\n @Prop({ reflect: true })\n variant: 'browse' \| 'browse-drop' = 'browse';\n\n // #endregion\n // #region Events\n\n /\n Custom event dispatched when the user selects files. The event detail\n * contains an object representing the selected files with two\n * properties:\n * - `invalidFiles`: An array of `InvalidFileStatus` objects representing\n * files that failed validation.\n * - `validFiles`: An array of `File` objects representing files that passed\n * validation.\n \n Each `InvalidFileStatus` object includes the following properties:\n * - `file`: The `File` object.\n * - `status`: The validation status, which can be `\"invalid-type\"` (invalid file\n * type), `\"over-size-limit\"` (file exceeds the size limit), or\n * `\"over-max-files-limit\"` (total exceeds the max files limit).\n /\n @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: ValidFileStatus[]) {\n newValue.forEach(statusItem => {\n const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n if (matchingQueuedFileIndex > -1) {\n const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n } else {\n const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n file => file.file.name === statusItem.name\n );\n if (matchingDisplayedFileIndex > -1) {\n this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n if (statusItem.status === 'failed' && statusItem.message) {\n this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n }\n this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get actualButtonSize() {\n return this.buttonSize === 'none' ? undefined : this.buttonSize;\n }\n\n get dropZoneClasses() {\n const classes = ['drop-zone'];\n if (this.isDropZoneHighlighted) {\n classes.push('drop-zone-highlighted');\n }\n\n if (this.disabled) {\n classes.push('drop-zone-disabled');\n }\n\n return classes.join(' ');\n }\n\n get fileTypesArray() {\n return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n }\n\n get hasDescription() {\n return !!this.description \|\| this.hasDescriptionSlotContent;\n }\n\n get hasDescriptionSlotContent() {\n return hasSlotContent(this.el, 'description');\n }\n\n get hasLabel() {\n return !!this.label \|\| this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.el, 'label');\n }\n\n buildFilesObject(filesToUpload: File[]): FilesObject {\n const invalidFiles = [];\n invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n this.displayedFiles = [...invalidFiles];\n\n if (filesToUpload.length === 0) {\n this.areFilesUploading = false;\n } else {\n this.queuedFiles = filesToUpload;\n }\n\n return { invalidFiles, validFiles: filesToUpload };\n }\n\n dimDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n };\n\n disableEvent(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n disableLoaderIfAllFilesUploaded() {\n if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n this.areFilesUploading = false;\n }\n }\n\n emitChange(filesObject: FilesObject) {\n this.areFilesUploading = filesObject.validFiles.length > 0;\n this.tctChange.emit(filesObject);\n }\n\n extractFilesOfInvalidTypes(files: File[]) {\n const invalidFiles = [];\n\n if (this.fileTypesArray.length === 0) return invalidFiles;\n\n files.forEach(file => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n if (!this.fileTypesArray.includes(fileExtension)) {\n invalidFiles.push({ file, status: 'invalid-type' });\n }\n });\n\n // Remove invalid files from the files array\n invalidFiles.forEach(invalidFile => {\n const index = files.indexOf(invalidFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return invalidFiles;\n }\n\n extractFilesOverMaxFilesLimit(files: File[]) {\n const filesOverMaxFilesLimit = [];\n\n if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n if (files.length > this.maxFiles) {\n const excessFiles = files.splice(this.maxFiles);\n excessFiles.forEach(file => {\n filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n });\n }\n\n return filesOverMaxFilesLimit;\n }\n\n extractFilesOverSizeLimit(files: File[]) {\n const filesOverSizeLimit = [];\n\n if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n files.forEach(file => {\n if (file.size > this.maxFileSize) {\n filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n }\n });\n\n // Remove files over size limit from the files array\n filesOverSizeLimit.forEach(overSizeFile => {\n const index = files.indexOf(overSizeFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return filesOverSizeLimit;\n }\n\n forceRerender() {\n this.refreshCounter += 1; // Triggers re-render\n }\n\n getAnimationendHandlerToRemoveFileItem(fileName: string) {\n return (e: AnimationEvent) => {\n if (e.animationName === 'shrinkToCenterFadeOut') {\n this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n }\n };\n }\n\n getClickHandlerToRemoveFileItem(fileName: string) {\n return () => {\n const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n if (fileToDelete) {\n fileToDelete.toBeRemoved = true;\n this.forceRerender();\n }\n };\n }\n\n getFileItemButtonLabel(displayedFile: DisplayedFile) {\n const statusMessage = `Status, ${displayedFile.status === 'uploaded' ? 'uploaded. ' : ''}${this.getFileItemStatusMessage(displayedFile)}`;\n return `Dismiss file item for ${displayedFile.file.name}. ${statusMessage}.`;\n }\n\n getFileItemClasses(fileName: string) {\n const classes = ['file-item'];\n const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n if (matchingFile?.toBeRemoved) {\n classes.push('fade-out');\n } else {\n classes.push('fade-in');\n }\n return classes.join(' ');\n }\n\n getFileItemStatusMessage(displayedFile: DisplayedFile) {\n switch (displayedFile.status) {\n case 'invalid-type':\n return loc('tecton.element.filePicker.unsupportedFileType');\n case 'over-size-limit':\n return loc('tecton.element.filePicker.sizeExceedsLimit');\n case 'over-max-files-limit':\n return loc('tecton.element.filePicker.overMaxFilesLimit');\n case 'in-progress':\n return loc('tecton.element.filePicker.uploadingEllipsis');\n case 'failed':\n if (displayedFile.message) return loc(displayedFile.message);\n return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [\n (displayedFile.file.size / (1000 1000)).toFixed(2),\n ]);\n }\n }\n\n grabDroppedFiles = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n const droppedFiles = Array.from(e.dataTransfer.files);\n const filesObject = this.buildFilesObject(droppedFiles);\n\n this.emitChange(filesObject);\n this._value = filesObject;\n };\n\n grabSelectedFiles = (e: Event) => {\n const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n const filesObject = this.buildFilesObject(selectedFiles);\n // Reset the input value to allow re-selection of the same file\n (this.browseButtonInput as HTMLInputElement).value = '';\n\n this.emitChange(filesObject);\n this._value = filesObject;\n };\n\n highlightDropZone = (e: DragEvent) => {\n if (this.disabled) return;\n this.disableEvent(e);\n this.isDropZoneHighlighted = true;\n };\n\n launchFileBrowser() {\n this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n }\n\n // #endregion\n // #region Render Methods\n\n render = () => {\n const { disabled } = this;\n return (\n <div class=\"file-picker\">\n {(this.hasLabel \|\| this.hasDescription) && (\n <div class=\"heading\">\n {this.hasLabel && (\n <label\n class=\"label\"\n htmlFor=\"file-field\"\n test-id=\"label\"\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </label>\n )}\n {this.hasDescription && (\n <div\n class=\"description\"\n id=\"description\"\n test-id=\"description\"\n >\n {!!this.description ? (\n loc(this.description)\n ) : this.hasDescriptionSlotContent ? (\n <slot name=\"description\" />\n ) : (\n ''\n )}\n </div>\n )}\n </div>\n )}\n\n {(this.variant === 'browse-drop' && (\n <div\n class={this.dropZoneClasses}\n onDragEnter={this.disableEvent}\n onDragLeave={this.dimDropZone}\n onDragOver={this.highlightDropZone}\n onDrop={this.grabDroppedFiles}\n ref={el => (this.dropZone = el ?? this.dropZone)}\n test-id=\"drop-zone\"\n >\n {(this.areFilesUploading && (\n <Fragment>\n <q2-loading class=\"loading\"></q2-loading>\n <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n </Fragment>\n )) \|\| (\n <Fragment>\n <q2-icon type=\"upload\"></q2-icon>\n <p class=\"drop-zone-text\">\n <q2-link\n class=\"browse-link\"\n label={loc('tecton.element.filePicker.browse')}\n onTctClick={() => this.launchFileBrowser()}\n variant=\"inline\"\n test-id=\"browse-link\"\n disabled={disabled}\n href=\"javascript:void(0)\"\n />\n {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n </p>\n </Fragment>\n )}\n </div>\n )) \|\| (\n <div\n class=\"browse\"\n test-id=\"browse\"\n >\n <q2-btn\n disabled={disabled \|\| this.areFilesUploading}\n intent=\"workflow-primary\"\n loading={this.areFilesUploading}\n onClick={() => this.launchFileBrowser()}\n size={this.actualButtonSize}\n test-id=\"browse-button\"\n >\n <q2-icon type=\"paperclip\"></q2-icon>\n <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n </q2-btn>\n </div>\n )}\n <input\n aria-describedby={(!!this.description && 'description') \|\| undefined}\n class=\"sr\"\n id=\"file-field\"\n onChange={this.grabSelectedFiles}\n ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n type=\"file\"\n test-id=\"file-input\"\n disabled={disabled}\n multiple\n tabIndex={-1}\n />\n <div class=\"file-list-container\">\n <q2-list class=\"file-list\">\n {this.displayedFiles.map(file => (\n <q2-item\n class={this.getFileItemClasses(file.file.name)}\n key={file.file.name}\n onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n >\n <div slot=\"decorator\">\n {file.status === 'invalid-type' \|\|\n file.status === 'over-size-limit' \|\|\n file.status === 'failed' \|\|\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading\n class=\"file-item-loading\"\n hide-from-screen-readers\n ></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div\n class=\"file-item-info\"\n slot=\"body\"\n >\n {this.getFileItemStatusMessage(file)}\n </div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n hide-label=\"true\"\n label={this.getFileItemButtonLabel(file)}\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n disabled={disabled}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"names":["h","loc","Fragment","hasSlotContent"],"mappings":"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"}

package/dist/cjs/q2-form.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-BYXz4owL.js');
-const q2FormCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{--tct-input-margin:var(--comp-spacing);--tct-select-margin:var(--comp-spacing);--tct-calendar-margin:var(--comp-spacing);--tct-file-picker-margin:var(--comp-spacing);--tct-textarea-margin:var(--comp-spacing);--tct-checkbox-group-margin:var(--comp-spacing);--tct-radio-group-margin:var(--comp-spacing)}:host([spacing=none]) .container{--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none) 0)}:host([spacing=compact]) .container{--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0)}:host(:not([spacing]),[spacing=normal]) .container{--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0)}:host([spacing=comfortable]) .container{--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0)}";
+const q2FormCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([spacing=none]){--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none))}:host([spacing=compact]){--comp-spacing-compact:var(--app-scale-1x, 5px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact))}:host(:not([spacing])),:host([spacing=normal]){--comp-spacing-normal:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal))}:host([spacing=comfortable]){--comp-spacing-comfortable:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable))}.container{--tct-input-margin:0;--tct-select-margin:0;--tct-calendar-margin:0;--tct-file-picker-margin:0;--tct-textarea-margin:0;--tct-checkbox-group-margin:0;--tct-radio-group-margin:0;display:flex;flex-direction:column;gap:var(--comp-spacing)}";
 const Q2Form = class {
     constructor(hostRef) {
@@ -14,7 +14,7 @@ const Q2Form = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '6720d1cf81a23420db41de84fce56398ff932018', class: "container" }, index.h("slot", { key: '48165fa24f2eb15d66fdfa63b6c122c0dc320714' })));
+        return (index.h("div", { key: 'b01b965b3fc436b4155245fa747e4c8922304114', class: "container" }, index.h("slot", { key: '039fd27f2a80825f14a6247eb330eac983638389' })));
     }
 };
 Q2Form.style = q2FormCss;

package/dist/cjs/q2-form.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-form.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,~~onDAAonD~~;;~~MCQznD~~,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;","names":["h"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.~~container~~ {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, ~~unquote('var(~~--comp-spacing-none) ~~0'))~~};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, ~~15px~~)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, ~~unquote('var(~~--comp-spacing-compact) ~~0'))~~};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, ~~25px~~)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, ~~unquote('var(~~--comp-spacing-normal) ~~0'))~~};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, ~~35px~~)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, ~~unquote('var(~~--comp-spacing-comfortable) ~~0'))~~};\n }\n\n --tct-input-margin: ~~var(--comp-spacing)~~;\n --tct-select-margin: ~~var(--comp-spacing)~~;\n --tct-calendar-margin: ~~var(--comp-spacing)~~;\n --tct-file-picker-margin: ~~var(--comp-spacing)~~;\n --tct-textarea-margin: ~~var(--comp-spacing)~~;\n --tct-checkbox-group-margin: ~~var(--comp-spacing)~~;\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n/*\n @name Form\n * @category Forms\n * @summary Use for wrapping form fields with consistent spacing.\n /\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n // #region Public Property API\n\n /* Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-form.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,mgDAAmgD;;MCQxgD,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;","names":["h"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n// Spacing tokens are set on :host so that slotted descendants (e.g. q2-grid)\n// can inherit --comp-spacing and use it as a default for their own gap.\n:host([spacing='none']) {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, --comp-spacing-none)};\n}\n:host([spacing='compact']) {\n --comp-spacing-compact: #{var-list(--app-scale-1x, 5px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, --comp-spacing-compact)};\n}\n:host(:not([spacing])),\n:host([spacing='normal']) {\n --comp-spacing-normal: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, --comp-spacing-normal)};\n}\n:host([spacing='comfortable']) {\n --comp-spacing-comfortable: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, --comp-spacing-comfortable)};\n}\n\n.container {\n // Zero the form-field default margins so spacing is driven entirely by\n // `gap` below — keeps form-alone and form+grid layouts visually identical.\n --tct-input-margin: 0;\n --tct-select-margin: 0;\n --tct-calendar-margin: 0;\n --tct-file-picker-margin: 0;\n --tct-textarea-margin: 0;\n --tct-checkbox-group-margin: 0;\n --tct-radio-group-margin: 0;\n\n display: flex;\n flex-direction: column;\n gap: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n/*\n @name Form\n * @category Forms\n * @summary Use for wrapping form fields with consistent spacing.\n /\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n // #region Public Property API\n\n /* Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-form.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-form.entry.cjs.js","sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.~~container~~ {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, ~~unquote('var(~~--comp-spacing-none) ~~0'))~~};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, ~~15px~~)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, ~~unquote('var(~~--comp-spacing-compact) ~~0'))~~};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, ~~25px~~)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, ~~unquote('var(~~--comp-spacing-normal) ~~0'))~~};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, ~~35px~~)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, ~~unquote('var(~~--comp-spacing-comfortable) ~~0'))~~};\n }\n\n --tct-input-margin: ~~var(--comp-spacing)~~;\n --tct-select-margin: ~~var(--comp-spacing)~~;\n --tct-calendar-margin: ~~var(--comp-spacing)~~;\n --tct-file-picker-margin: ~~var(--comp-spacing)~~;\n --tct-textarea-margin: ~~var(--comp-spacing)~~;\n --tct-checkbox-group-margin: ~~var(--comp-spacing)~~;\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n/*\n @name Form\n * @category Forms\n * @summary Use for wrapping form fields with consistent spacing.\n /\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n // #region Public Property API\n\n /* Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,~~onDAAonD~~;;~~MCQznD~~,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;"}
1	+ {"version":3,"file":"q2-form.entry.cjs.js","sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n// Spacing tokens are set on :host so that slotted descendants (e.g. q2-grid)\n// can inherit --comp-spacing and use it as a default for their own gap.\n:host([spacing='none']) {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, --comp-spacing-none)};\n}\n:host([spacing='compact']) {\n --comp-spacing-compact: #{var-list(--app-scale-1x, 5px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, --comp-spacing-compact)};\n}\n:host(:not([spacing])),\n:host([spacing='normal']) {\n --comp-spacing-normal: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, --comp-spacing-normal)};\n}\n:host([spacing='comfortable']) {\n --comp-spacing-comfortable: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, --comp-spacing-comfortable)};\n}\n\n.container {\n // Zero the form-field default margins so spacing is driven entirely by\n // `gap` below — keeps form-alone and form+grid layouts visually identical.\n --tct-input-margin: 0;\n --tct-select-margin: 0;\n --tct-calendar-margin: 0;\n --tct-file-picker-margin: 0;\n --tct-textarea-margin: 0;\n --tct-checkbox-group-margin: 0;\n --tct-radio-group-margin: 0;\n\n display: flex;\n flex-direction: column;\n gap: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n/*\n @name Form\n * @category Forms\n * @summary Use for wrapping form fields with consistent spacing.\n /\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n // #region Public Property API\n\n /* Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,mgDAAmgD;;MCQxgD,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;"}

package/dist/cjs/q2-formatted-text.cjs.entry.js CHANGED Viewed

@@ -72,7 +72,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (index.h("div", { key: '0e3cb56f89a3ab403b45b411a4cd38ec267ed58b', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: 'a9bb42690d67bce14debcb99db50c63582c6ba63' }, this.formattedValue)));
+        return (index.h("div", { key: '9345b2829e7ac6dd1e5e308e1b840dcb298dbc0d', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '4687a60218658aeced2507ffd9f5eef6c5c9b40e' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/cjs/q2-formatted-text.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-formatted-text.entry.cjs.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCOr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;;;AAIG;AAEH,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;;QAIzC,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AA2EnE;;;IA1DG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAYtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;;QAGlG,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;QAC/E,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE;;;;IAMlG,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACIA,kEACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;;","names":["h"],"sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n/*\n @name Formatted Text\n * @category Text\n * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.\n /\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /* @private The formatted text to display /\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /\n The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n /\n @Prop({ reflect: true })\n format: 'decimal' \| 'percent' = 'decimal';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /* The maximum number of fraction digits to use. /\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /* The minimum number of fraction digits to use. /\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /* The minimum number of integer digits to use. /\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'never' \| 'auto' \| 'always' \| 'exceptZero' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' \| undefined;\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /* The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-formatted-text.entry.cjs.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCOr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;;;AAIG;AAEH,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;;QAIzC,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AA2EnE;;;IA1DG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAYtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;;QAGlG,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;QAC/E,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE;;;;IAMlG,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACIA,kEACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;;","names":["h"],"sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n/*\n @name Formatted Text\n * @category Text\n * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.\n /\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /* @private The formatted text to display /\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /\n The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n /\n @Prop({ reflect: true })\n format: 'decimal' \| 'percent' = 'decimal';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /* The maximum number of fraction digits to use. /\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /* The minimum number of fraction digits to use. /\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /* The minimum number of integer digits to use. /\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'never' \| 'auto' \| 'always' \| 'exceptZero' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' \| undefined;\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /* The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-formatted-text.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-formatted-text.entry.cjs.js","sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n/*\n @name Formatted Text\n * @category Text\n * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.\n /\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /* @private The formatted text to display /\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /\n The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n /\n @Prop({ reflect: true })\n format: 'decimal' \| 'percent' = 'decimal';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /* The maximum number of fraction digits to use. /\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /* The minimum number of fraction digits to use. /\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /* The minimum number of integer digits to use. /\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'never' \| 'auto' \| 'always' \| 'exceptZero' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' \| undefined;\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /* The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCOr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;;;AAIG;AAEH,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;;QAIzC,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AA2EnE;;;IA1DG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAYtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;;QAGlG,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;QAC/E,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE;;;;IAMlG,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACIA,kEACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-formatted-text.entry.cjs.js","sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n}\n\n.formatted-text {\n color: var-list(--tct-formatted-text-color, inherit);\n font-size: var-list(--tct-formatted-text-font-size, inherit);\n font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n color: var-list(--tct-formatted-text-small-color, inherit);\n font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n color: var-list(--tct-formatted-text-medium-color, inherit);\n font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n color: var-list(--tct-formatted-text-large-color, inherit);\n font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n/*\n @name Formatted Text\n * @category Text\n * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.\n /\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n // #region Own Properties\n\n /* @private The formatted text to display /\n formattedValue: string;\n\n // #endregion\n // #region Public Property API\n\n /\n The format style for the number.\n * - `decimal`: Standard number formatting, locale-aware (default).\n * - `percent`: Percentage formatting, locale-aware.\n /\n @Prop({ reflect: true })\n format: 'decimal' \| 'percent' = 'decimal';\n\n /* Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. /\n @Prop({ reflect: true })\n locale: string \| string[] = document.documentElement.lang \|\| 'en-US';\n\n /* The maximum number of fraction digits to use. /\n @Prop({ reflect: false })\n maximumFractionDigits: number = 2;\n\n /* The minimum number of fraction digits to use. /\n @Prop({ reflect: false })\n minimumFractionDigits: number = 2;\n\n /* The minimum number of integer digits to use. /\n @Prop({ reflect: false })\n minimumIntegerDigits: number = 1;\n\n /\n Determine how the positive or negative sign should display.\n \n Behavior:\n * - `always`: Always display the sign.\n * - `auto`: Sign displays for negative numbers only, including negative zero.\n * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n * - `never`: Never display the sign.\n /\n @Prop({ reflect: true })\n signDisplay: 'never' \| 'auto' \| 'always' \| 'exceptZero' = 'auto';\n\n /* Applies styling based on the size provided. If no size is provided, it will display as inline text. /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large' \| undefined;\n\n /* @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts. /\n @Prop({ reflect: true })\n slotSize: string;\n\n /* The value you want formatted. */\n @Prop({ reflect: true })\n value: number;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void \| Promise<void> {\n this.formatValue();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('value')\n @Watch('locale')\n @Watch('size')\n @Watch('slotSize')\n @Watch('signDisplay')\n @Watch('format')\n propsUpdated() {\n this.formatValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get formattedTextClasses(): string {\n const classes = ['formatted-text'];\n const sizeClass = this.size ? this.size : this.slotSize;\n if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n return classes.join(' ');\n }\n\n formatValue() {\n const options: Record<string, any> = {\n style: this.format,\n signDisplay: this.signDisplay,\n };\n if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { formattedTextClasses } = this;\n\n return (\n <div\n class={formattedTextClasses}\n aria-label={this.formattedValue}\n >\n <span>{this.formattedValue}</span>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCOr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;;;AAIG;AAEH,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;;QAIzC,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AA2EnE;;;IA1DG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAYtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;;QAGlG,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;QAC/E,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE;;;;IAMlG,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACIA,kEACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;;"}

package/dist/cjs/q2-grid-area.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var component = require('./component-DRAntnCA.js');
+var component = require('./component-iASoq6gx.js');
 const q2GridAreaCss = ":host{--grid-column-start:\"\";--grid-column-end:\"\";--grid-row-start:\"\";--grid-row-end:\"\";--justify-self:\"\";--align-self:\"\";--z-index:\"\";--xs-grid-column-start:\"\";--xs-grid-column-end:\"\";--xs-grid-row-start:\"\";--xs-grid-row-end:\"\";--xs-justify-self:\"\";--xs-align-self:\"\";--xs-z-index:\"\";--sm-grid-column-start:\"\";--sm-grid-column-end:\"\";--sm-grid-row-start:\"\";--sm-grid-row-end:\"\";--sm-justify-self:\"\";--sm-align-self:\"\";--sm-z-index:\"\";--md-grid-column-start:\"\";--md-grid-column-end:\"\";--md-grid-row-start:\"\";--md-grid-row-end:\"\";--md-justify-self:\"\";--md-align-self:\"\";--md-z-index:\"\";--lg-grid-column-start:\"\";--lg-grid-column-end:\"\";--lg-grid-row-start:\"\";--lg-grid-row-end:\"\";--lg-justify-self:\"\";--lg-align-self:\"\";--lg-z-index:\"\";--xl-grid-column-start:\"\";--xl-grid-column-end:\"\";--xl-grid-row-start:\"\";--xl-grid-row-end:\"\";--xl-justify-self:\"\";--xl-align-self:\"\";--xl-z-index:\"\"}:host{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end);grid-row-start:var(--grid-row-start);grid-row-end:var(--grid-row-end);justify-self:var(--justify-self);align-self:var(--align-self);z-index:var(--z-index)}@media screen and (min-width: 480px){:host{grid-column-start:var(--xs-grid-column-start);grid-column-end:var(--xs-grid-column-end);grid-row-start:var(--xs-grid-row-start);grid-row-end:var(--xs-grid-row-end);justify-self:var(--xs-justify-self);align-self:var(--xs-align-self);z-index:var(--xs-z-index)}}@media screen and (min-width: 768px){:host{grid-column-start:var(--sm-grid-column-start);grid-column-end:var(--sm-grid-column-end);grid-row-start:var(--sm-grid-row-start);grid-row-end:var(--sm-grid-row-end);justify-self:var(--sm-justify-self);align-self:var(--sm-align-self);z-index:var(--sm-z-index)}}@media screen and (min-width: 992px){:host{grid-column-start:var(--md-grid-column-start);grid-column-end:var(--md-grid-column-end);grid-row-start:var(--md-grid-row-start);grid-row-end:var(--md-grid-row-end);justify-self:var(--md-justify-self);align-self:var(--md-align-self);z-index:var(--md-z-index)}}@media screen and (min-width: 1200px){:host{grid-column-start:var(--lg-grid-column-start);grid-column-end:var(--lg-grid-column-end);grid-row-start:var(--lg-grid-row-start);grid-row-end:var(--lg-grid-row-end);justify-self:var(--lg-justify-self);align-self:var(--lg-align-self);z-index:var(--lg-z-index)}}@media screen and (min-width: 1400px){:host{grid-column-start:var(--xl-grid-column-start);grid-column-end:var(--xl-grid-column-end);grid-row-start:var(--xl-grid-row-start);grid-row-end:var(--xl-grid-row-end);justify-self:var(--xl-justify-self);align-self:var(--xl-align-self);z-index:var(--xl-z-index)}}";

package/dist/cjs/q2-grid.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,20 @@
 var index = require('./index-BYXz4owL.js');
-const q2GridCss = ".q2-grid{--comp-grid-gap-none:var(--tct-grid-gap-none, var(--app-scale-0x, 0px));--comp-grid-gap-compact:var(--tct-grid-gap-compact, var(--app-scale-1x, 5px));--comp-grid-gap-normal:var(--tct-grid-gap-normal, var(--app-scale-3x, 15px));--comp-grid-gap-comfortable:var(--tct-grid-gap-comfortable, var(--app-scale-5x, 25px));--grid-template-columns:\"\";--grid-template-rows:\"\";--grid-gap:\"\";--justify-items:\"\";--align-items:\"\";--xs-grid-template-columns:\"\";--xs-grid-template-rows:\"\";--xs-grid-gap:\"\";--xs-justify-items:\"\";--xs-align-items:\"\";--sm-grid-template-columns:\"\";--sm-grid-template-rows:\"\";--sm-grid-gap:\"\";--sm-justify-items:\"\";--sm-align-items:\"\";--md-grid-template-columns:\"\";--md-grid-template-rows:\"\";--md-grid-gap:\"\";--md-justify-items:\"\";--md-align-items:\"\";--lg-grid-template-columns:\"\";--lg-grid-template-rows:\"\";--lg-grid-gap:\"\";--lg-justify-items:\"\";--lg-align-items:\"\";--xl-grid-template-columns:\"\";--xl-grid-template-rows:\"\";--xl-grid-gap:\"\";--xl-justify-items:\"\";--xl-align-items:\"\";display:grid;width:100%;height:100%;grid-auto-rows:auto;grid-auto-columns:1fr;grid-auto-flow:row;justify-content:center;align-content:center}.q2-grid{grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);gap:var(--grid-gap);justify-items:var(--justify-items);align-items:var(--align-items)}@media screen and (min-width: 480px){.q2-grid{grid-template-columns:var(--xs-grid-template-columns);grid-template-rows:var(--xs-grid-template-rows);gap:var(--xs-grid-gap);justify-items:var(--xs-justify-items);align-items:var(--xs-align-items)}}@media screen and (min-width: 768px){.q2-grid{grid-template-columns:var(--sm-grid-template-columns);grid-template-rows:var(--sm-grid-template-rows);gap:var(--sm-grid-gap);justify-items:var(--sm-justify-items);align-items:var(--sm-align-items)}}@media screen and (min-width: 992px){.q2-grid{grid-template-columns:var(--md-grid-template-columns);grid-template-rows:var(--md-grid-template-rows);gap:var(--md-grid-gap);justify-items:var(--md-justify-items);align-items:var(--md-align-items)}}@media screen and (min-width: 1200px){.q2-grid{grid-template-columns:var(--lg-grid-template-columns);grid-template-rows:var(--lg-grid-template-rows);gap:var(--lg-grid-gap);justify-items:var(--lg-justify-items);align-items:var(--lg-align-items)}}@media screen and (min-width: 1400px){.q2-grid{grid-template-columns:var(--xl-grid-template-columns);grid-template-rows:var(--xl-grid-template-rows);gap:var(--xl-grid-gap);justify-items:var(--xl-justify-items);align-items:var(--xl-align-items)}}";
+const q2GridCss = ".q2-grid{--comp-grid-gap-none:var(--tct-grid-gap-none, var(--app-scale-0x, 0px));--comp-grid-gap-compact:var(--tct-grid-gap-compact, var(--app-scale-1x, 5px));--comp-grid-gap-normal:var(--tct-grid-gap-normal, var(--app-scale-3x, 15px));--comp-grid-gap-comfortable:var(--tct-grid-gap-comfortable, var(--app-scale-5x, 25px));--tct-input-margin:0;--tct-select-margin:0;--tct-calendar-margin:0;--tct-file-picker-margin:0;--tct-textarea-margin:0;--tct-checkbox-group-margin:0;--tct-radio-group-margin:0;--grid-template-columns:\"\";--grid-template-rows:\"\";--grid-gap:\"\";--justify-items:\"\";--align-items:\"\";--xs-grid-template-columns:\"\";--xs-grid-template-rows:\"\";--xs-grid-gap:\"\";--xs-justify-items:\"\";--xs-align-items:\"\";--sm-grid-template-columns:\"\";--sm-grid-template-rows:\"\";--sm-grid-gap:\"\";--sm-justify-items:\"\";--sm-align-items:\"\";--md-grid-template-columns:\"\";--md-grid-template-rows:\"\";--md-grid-gap:\"\";--md-justify-items:\"\";--md-align-items:\"\";--lg-grid-template-columns:\"\";--lg-grid-template-rows:\"\";--lg-grid-gap:\"\";--lg-justify-items:\"\";--lg-align-items:\"\";--xl-grid-template-columns:\"\";--xl-grid-template-rows:\"\";--xl-grid-gap:\"\";--xl-justify-items:\"\";--xl-align-items:\"\";display:grid;width:100%;height:100%;grid-auto-rows:auto;grid-auto-columns:1fr;grid-auto-flow:row;justify-content:center;align-content:center}.q2-grid{grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);gap:var(--grid-gap);justify-items:var(--justify-items);align-items:var(--align-items)}@media screen and (min-width: 480px){.q2-grid{grid-template-columns:var(--xs-grid-template-columns);grid-template-rows:var(--xs-grid-template-rows);gap:var(--xs-grid-gap);justify-items:var(--xs-justify-items);align-items:var(--xs-align-items)}}@media screen and (min-width: 768px){.q2-grid{grid-template-columns:var(--sm-grid-template-columns);grid-template-rows:var(--sm-grid-template-rows);gap:var(--sm-grid-gap);justify-items:var(--sm-justify-items);align-items:var(--sm-align-items)}}@media screen and (min-width: 992px){.q2-grid{grid-template-columns:var(--md-grid-template-columns);grid-template-rows:var(--md-grid-template-rows);gap:var(--md-grid-gap);justify-items:var(--md-justify-items);align-items:var(--md-align-items)}}@media screen and (min-width: 1200px){.q2-grid{grid-template-columns:var(--lg-grid-template-columns);grid-template-rows:var(--lg-grid-template-rows);gap:var(--lg-grid-gap);justify-items:var(--lg-justify-items);align-items:var(--lg-align-items)}}@media screen and (min-width: 1400px){.q2-grid{grid-template-columns:var(--xl-grid-template-columns);grid-template-rows:var(--xl-grid-template-rows);gap:var(--xl-grid-gap);justify-items:var(--xl-justify-items);align-items:var(--xl-align-items)}}";
 const Q2Grid = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        // #region Own Properties
+        /**
+         * Tracks whether the `gap` attribute was explicitly set on this element at mount.
+         * When false (and the grid is inside a q2-form), the grid's gap defers to the
+         * form's --comp-spacing so form+grid matches form-only spacing without the
+         * consumer having to mirror tokens.
+         */
+        this.hasExplicitGap = false;
+        // #endregion
         // #region Public Property API
         /**
          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at
@@ -34,6 +43,11 @@ const Q2Grid = class {
         this.rows = 'auto';
     }
     // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.hasExplicitGap = this.element.hasAttribute('gap');
+    }
+    // #endregion
     // #region Local Methods
     get computedLgRows() {
         return this.lgRows || this.computedMdRows;
@@ -50,6 +64,15 @@ const Q2Grid = class {
     get computedXsRows() {
         return this.xsRows || this.rows;
     }
+    gapValue(...keys) {
+        const resolved = keys.find(k => !!k);
+        if (resolved === this.gap && !this.hasExplicitGap) {
+            // No explicit gap at this breakpoint — inherit q2-form's spacing if present,
+            // otherwise fall back to the normal gap token.
+            return `var(--comp-spacing, var(--comp-grid-gap-${this.gap}))`;
+        }
+        return `var(--comp-grid-gap-${resolved})`;
+    }
     // #endregion
     // #region Render Methods
     render() {
@@ -57,42 +80,43 @@ const Q2Grid = class {
             // base:
             '--grid-template-columns': `repeat(${this.columns}, 1fr)`,
             '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,
-            '--grid-gap': `var(--comp-grid-gap-${this.gap})`,
+            '--grid-gap': this.gapValue(this.gap),
             '--justify-items': this.justify,
             '--align-items': this.align,
             // xs:
             '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,
             '--xs-grid-template-rows': this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,
-            '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,
+            '--xs-grid-gap': this.gapValue(this.xsGap, this.gap),
             '--xs-justify-items': this.xsJustify || this.justify,
             '--xs-align-items': this.xsAlign || this.align,
             // sm:
             '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--sm-grid-template-rows': this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,
-            '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,
+            '--sm-grid-gap': this.gapValue(this.smGap, this.xsGap, this.gap),
             '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,
             '--sm-align-items': this.smAlign || this.xsAlign || this.align,
             // md:
             '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--md-grid-template-rows': this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,
-            '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--md-grid-gap': this.gapValue(this.mdGap, this.smGap, this.xsGap, this.gap),
             '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,
             // lg:
             '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--lg-grid-template-rows': this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,
-            '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--lg-grid-gap': this.gapValue(this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),
             '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
             // xl:
             '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
             '--xl-grid-template-rows': this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,
-            '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--xl-grid-gap': this.gapValue(this.xlGap, this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),
             '--xl-justify-items': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
             '--xl-align-items': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
         };
-        return (index.h(index.Fragment, { key: 'ab38b4849ec0cdf8ab49d536bb440df6f21b93d7' }, index.h("div", { key: '0fd537b2867d871be69269d983234f9f6e47edeb', style: q2GridStyles, class: "q2-grid" }, index.h("slot", { key: 'd9d7b5d7bbcde66f0bcef49c2c31906e12536e90' }))));
+        return (index.h(index.Fragment, { key: '03e2c1cd82120cba9c38c2a1f5a34fe1dabf52bd' }, index.h("div", { key: 'b9bb38073a2edb5cd0fedf667d8c552328b4f4c6', style: q2GridStyles, class: "q2-grid" }, index.h("slot", { key: '1a3668ba1ed13df94aa9355a8a24bfef39e5087b' }))));
     }
+    get element() { return index.getElement(this); }
 };
 Q2Grid.style = q2GridCss;