npm - q2-tecton-elements - Versions diffs - 1.66.2 → 1.67.1 - Mend

q2-tecton-elements 1.66.2 → 1.67.1

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 (694) hide show

package/dist/q2-tecton-elements/q2-file-picker.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-file-picker.entry.esm.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';\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';\nexport type ValidFileStatus = {\n name: string;\n status: ValidFileStatusType;\n message?: string;\n};\nexport type InvalidFileStatus = {\n file: File;\n status: InvalidFileStatusType;\n};\nexport type FilesObject = {\n invalidFiles: InvalidFileStatus[];\n validFiles: File[];\n};\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":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-file-picker.entry.esm.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":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-file-picker.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as r, g as o } from "./index-CGkHOjh1.js";
-import { l as a, h as s } from "./index-B4WYBDS9.js";
+import { l as a, h as s } from "./index-C4PILj1_.js";
 const n = "*{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}*{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}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{--tct-link-font-weight:var(--tct-file-picker-browse-link-font-weight, 700);color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{--tct-icon-stroke-primary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:var(--tct-file-picker-item-close-btn-border-radius, 4px);--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2FilePickerCss","Q2FilePicker","constructor","hostRef","this","_value","invalidFiles","validFiles","queuedFiles","areFilesUploading","displayedFiles","isDropZoneHighlighted","refreshCounter","buttonSize","fileTypes","maxFiles","Infinity","maxFileSize","status","variant","dimDropZone","e","disableEvent","grabDroppedFiles","disabled","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","grabSelectedFiles","selectedFiles","target","browseButtonInput","value","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","Fragment","type","onTctClick","launchFileBrowser","href","intent","loading","onClick","size","actualButtonSize","undefined","onChange","multiple","tabIndex","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","getFileItemStatusMessage","getFileItemButtonLabel","getClickHandlerToRemoveFileItem","_","console","error","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","message","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","overSizeFile","forceRerender","fileName","animationName","filter","fileToDelete","find","toBeRemoved","displayedFile","statusMessage","toFixed","dispatchEvent","MouseEvent"],"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';\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';\nexport type ValidFileStatus = {\n name: string;\n status: ValidFileStatusType;\n message?: string;\n};\nexport type InvalidFileStatus = {\n file: File;\n status: InvalidFileStatusType;\n};\nexport type FilesObject = {\n invalidFiles: InvalidFileStatus[];\n validFiles: File[];\n};\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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2FilePickerCss","Q2FilePicker","constructor","hostRef","this","_value","invalidFiles","validFiles","queuedFiles","areFilesUploading","displayedFiles","isDropZoneHighlighted","refreshCounter","buttonSize","fileTypes","maxFiles","Infinity","maxFileSize","status","variant","dimDropZone","e","disableEvent","grabDroppedFiles","disabled","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","grabSelectedFiles","selectedFiles","target","browseButtonInput","value","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","Fragment","type","onTctClick","launchFileBrowser","href","intent","loading","onClick","size","actualButtonSize","undefined","onChange","multiple","tabIndex","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","getFileItemStatusMessage","getFileItemButtonLabel","getClickHandlerToRemoveFileItem","_","console","error","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","message","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","overSizeFile","forceRerender","fileName","animationName","filter","fileToDelete","find","toBeRemoved","displayedFile","statusMessage","toFixed","dispatchEvent","MouseEvent"],"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"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-form.entry.js CHANGED Viewed

@@ -12,10 +12,10 @@ const c = class {
   // #region Render Methods
   render() {
     return o("div", {
-      key: "96d3b548652662f480c9ad0fccb8c403aa50c0b9",
+      key: "773e56276df2f42dd330167ffba2a9d08a90f2f7",
       class: "container"
     }, o("slot", {
-      key: "a55f0eed7d6fd14a3dbd13d4b57d83586ced9225"
+      key: "4d92e4844684a5418edb39c18674042cba90ba58"
     }));
   }
 };

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

@@ -61,11 +61,11 @@ const o = class {
   render() {
     const {formattedTextClasses: t} = this;
     return e("div", {
-      key: "1256ba757a96ce740f5a76c7fd036373b83a83b7",
+      key: "b9fc58891cbcec6ea19bc8c0b2514df003697f02",
       class: t,
       "aria-label": this.formattedValue
     }, e("span", {
-      key: "90ea1f7b56b095e077711fe759c29e120178bc1a"
+      key: "1b4e77284dc329065a281e7b2f2fce22e6cfc01a"
     }, this.formattedValue));
   }
   static get watchers() {

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

@@ -102,10 +102,10 @@ const h = class {
       "--xl-z-index": `${this.computedXlZIndex}`
     };
     return i(t, {
-      key: "7e2f7933ba52dd99f90350dfb3a2778d1c1a37d0",
+      key: "d26c984d2ad2022162a1e4bfcb17f3770c0a95d3",
       style: s
     }, i("slot", {
-      key: "39371e8a0fb1c1bd9c248ba5b8095f9bdd6022e7"
+      key: "7951a611fc9bdf5b0f4535f995317765323eca21"
     }));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-grid.entry.js CHANGED Viewed

@@ -85,13 +85,13 @@ const r = class {
       "--xl-align-items": this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align
     };
     return i(s, {
-      key: "3fb3de0d4c9b17b30e9b513669b7d12edc702914"
+      key: "ab38b4849ec0cdf8ab49d536bb440df6f21b93d7"
     }, i("div", {
-      key: "be68db8fe15dd325f553d5f838cc91f5709f251b",
+      key: "0fd537b2867d871be69269d983234f9f6e47edeb",
       style: t,
       class: "q2-grid"
     }, i("slot", {
-      key: "5b9819228a885661846862a619b9a30792bc8ac0"
+      key: "d9d7b5d7bbcde66f0bcef49c2c31906e12536e90"
     })));
   }
 };

package/dist/q2-tecton-elements/q2-icon.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/*\n @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n /\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true })\n label: string;\n\n /* The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/*\n @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n /\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true })\n label: string;\n\n /* The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n if (!spriteId) {\n const symbolId = `tct-${this.type}`;\n const symbolElement = document.getElementById(symbolId);\n if (symbolElement) {\n this.cloneSpriteNode();\n return true;\n }\n }\n\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,giGAAgiG;;MCWriG,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAKI,QAAA,IAAY,CAAA,YAAA,GAAW,gBAAgB;AA6N1C;;;IA5LG,oBAAoB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;IAGzB,iBAAiB,GAAA;QACb,IAAI,CAAC,UAAU,EAAE;;IAGrB,kBAAkB,GAAA;;QACd,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;AAC7C,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGnE,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,aAAa,CAAC,EAAE,CAAA,CAAE,CAAC;;;;IAOhE,UAAU,GAAA;;AACN,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,iBAAiB,EAAE;;AACrB,aAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,WAAW,EAAE;;aACf;AACH,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;;;;;AAOrD,IAAA,IAAI,gBAAgB,GAAA;;QAChB,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,SAAS,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,WAAW;;AAGjE,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;;AAGjC,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,QAAQ;YAAE;QACf,OAAO,QAAQ,CAAC,aAAa,CAAc,IAAI,QAAQ,CAAA,CAAE,CAAC;;AAG9D,IAAA,IAAI,eAAe,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,OAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAE;;AAGzC,IAAA,IAAI,cAAc,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG7B,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;AACrB,QAAA,OAAO,GAAG,IAAI,CAAC,YAAY,CAAG,EAAA,cAAc,EAAE;;IAGlD,cAAc,GAAA;;AACV,QAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;QAC1C,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,MAAM,QAAQ,GAAG,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,EAAE;YACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;YACvD,IAAI,aAAa,EAAE;gBACf,IAAI,CAAC,eAAe,EAAE;AACtB,gBAAA,OAAO,IAAI;;;AAInB,QAAA,MAAM,eAAe,GAAG,0BAA0B,EAAE;QACpD,IAAI,aAAa,GAAgB,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;;AAGlE,QAAA,IAAI,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,aAAa,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,KAAK,EAAE;YACrD,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,OAAO,IAAI;;;;AAKf,QAAA,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf,MAAK;YACD,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;AAGD,QAAA,IAAI,aAAa;AAAE,YAAA,OAAO,IAAI;;;AAI9B,QAAA,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,aAAa,CAAC,EAAE,GAAG,QAAQ;AAC3B,QAAA,eAAe,CAAC,WAAW,CAAC,aAAa,CAAC;AAC1C,QAAA,OAAO,KAAK;;IAGhB,eAAe,GAAA;AACX,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAO,IAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAC9D,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU,GAAI,UAAU,CAAC,SAAS,CAAC,IAAI,CAAsB,GAAG,SAAS;;AAG9F,IAAA,MAAM,WAAW,GAAA;QACb,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;AAE1D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;AAC1C,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,cAAc,CAAA,WAAA,CAAa,CAAC;AACtE,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACjD,QAAA,WAAW,CAAC,SAAS,GAAG,IAAI;QAC5B,MAAM,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAE5C,QAAA,GAAG,CAAC,EAAE,GAAG,QAAQ;AACjB,QAAA,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAEnC,QAAA,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI;QAC5B,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,KAAK;YAAE;AAEtC,QAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,UAAU,EAAE;AACjD,YAAA,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC;;aAC3B;YACH,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,aAAa,CAAC;;AAG7D,QAAA,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,QAAA,aAAa,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGpF,iBAAiB,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAEtD,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;AACpC,QAAA,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC;AAE5D,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;QACtB,IAAI,KAAK,EAAE;YACP,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,YAAA,MAAM,OAAO,GAAG,CAAA,MAAA,EAAS,UAAU,EAAE,EAAE;AACvC,YAAA,KAAK,CAAC,EAAE,GAAG,OAAO;AAClB,YAAA,KAAK,CAAC,WAAW,GAAG,KAAK;AACzB,YAAA,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,YAAA,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC;;aAC9C;AACH,YAAA,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;;;;;IAOpD,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;AAC5B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAChB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,KAER,CACiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,CAAC,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,EACzC,IAAI,EAAE,CAAC,CAAC,KAAK,GAAG,KAAK,GAAG,SAAS,EAChB,iBAAA,EAAA,CAAC,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,EAEzB,CAAC,CAAC,KAAK,IAAI,CAAA,CAAA,OAAA,EAAA,EAAO,EAAE,EAAC,OAAO,EAAE,EAAA,KAAK,CAAS,EAC5C,CAAC,CAAC,IAAI,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAI,CAAA,EACpD,CAAA,CAAA,GAAA,EAAA,EAAG,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAM,CAAA,CACzC,CACT;;;;;;;;;;;;"}