npm - q2-tecton-elements - Versions diffs - 1.63.2 → 1.64.0 - Mend

q2-tecton-elements 1.63.2 → 1.64.0

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

Files changed (390) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-file-picker.entry.cjs.js","sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n 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 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: 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 @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 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({ mutable: true })\n value: FilesObject = { invalidFiles: [], validFiles: [] };\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 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=\"bullet\">\n {file.status === 'invalid-type' \|\|\n file.status === 'over-size-limit' \|\|\n file.status === 'failed' \|\|\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading\n class=\"file-item-loading\"\n hide-from-screen-readers\n ></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div\n class=\"file-item-info\"\n slot=\"body\"\n >\n {this.getFileItemStatusMessage(file)}\n </div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n hide-label=\"true\"\n label={this.getFileItemButtonLabel(file)}\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n disabled={disabled}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"names":["h","loc","Fragment","hasSlotContent"],"mappings":"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"}
1	+ {"version":3,"file":"q2-file-picker.entry.cjs.js","sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\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 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 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: 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 @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 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=\"bullet\">\n {file.status === 'invalid-type' \|\|\n file.status === 'over-size-limit' \|\|\n file.status === 'failed' \|\|\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading\n class=\"file-item-loading\"\n hide-from-screen-readers\n ></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div\n class=\"file-item-info\"\n slot=\"body\"\n >\n {this.getFileItemStatusMessage(file)}\n </div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n hide-label=\"true\"\n label={this.getFileItemButtonLabel(file)}\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n disabled={disabled}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"names":["h","loc","Fragment","hasSlotContent"],"mappings":"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"}

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

@@ -9,6 +9,12 @@ const Q2FormattedText = class {
         index.registerInstance(this, hostRef);
         // #endregion
         // #region Public Property API
+        /**
+         * The format style for the number.
+         * - `decimal`: Standard number formatting, locale-aware (default).
+         * - `percent`: Percentage formatting, locale-aware.
+         */
+        this.format = 'decimal';
         /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */
         this.locale = document.documentElement.lang || 'en-US';
         /** The maximum number of fraction digits to use.  */
@@ -27,12 +33,6 @@ const Q2FormattedText = class {
          * - `never`: Never display the sign.
          */
         this.signDisplay = 'auto';
-        /**
-         * The format style for the number.
-         * - `decimal`: Standard number formatting, locale-aware (default).
-         * - `percent`: Percentage formatting, locale-aware.
-         */
-        this.format = 'decimal';
     }
     // #endregion
     // #region Component Lifecycle Events
@@ -72,7 +72,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (index.h("div", { key: '1274a8a0dd15b93bb1748ea17b12a3dbe148a0ca', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '6fe7e20ecf26a5b1e24966360646aeb6f6526f1e' }, this.formattedValue)));
+        return (index.h("div", { key: 'b63b5b968494e1a5eb11cb9c3dbfb7827bceef63', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '38c1bc1955c771046d71504a82a6a4e6ab532274' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

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

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

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

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

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

@@ -441,6 +441,7 @@ var iconMap = {
 	music: music,
 	"nest-egg": "standard",
 	newspaper: newspaper,
+	"open-in-dialog": "standard",
 	options: options,
 	"os-android": "browsersos",
 	"os-android-color": "browsersos",

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

	@@ -1 +1 @@
1	- {"file":"q2-icon.entry.cjs.js","mappings":"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","names":["getOrCreateSpriteContainer","getAssetPath","createGuid","h"],"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@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"],"version":3}
1	+ {"file":"q2-icon.entry.cjs.js","mappings":"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","names":["getOrCreateSpriteContainer","getAssetPath","createGuid","h"],"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@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"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-icon.entry.cjs.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@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":["getOrCreateSpriteContainer","getAssetPath","createGuid","h"],"mappings":"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"}
1	+ {"version":3,"file":"q2-icon.entry.cjs.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@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":["getOrCreateSpriteContainer","getAssetPath","createGuid","h"],"mappings":"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"}

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

@@ -3147,13 +3147,6 @@ const Q2Input = class {
     }
     // #endregion
     // #region Watchers
-    ariaLabelObserver() {
-        // Skip deprecated ariaLabel handling for combobox role
-        // (combobox sets aria-label directly for accessibility without hiding the visual label)
-        if (this._role === 'combobox')
-            return;
-        index$1.handleAriaLabel(this);
-    }
     updateComboboxAriaLabel() {
         // Set aria-label directly on host for combobox role
         // (can't use ariaLabel prop as it has deprecated handling that hides the label)
@@ -3161,6 +3154,13 @@ const Q2Input = class {
             this.hostElement.setAttribute('aria-label', index$1.loc(this.label));
         }
     }
+    ariaLabelObserver() {
+        // Skip deprecated ariaLabel handling for combobox role
+        // (combobox sets aria-label directly for accessibility without hiding the visual label)
+        if (this._role === 'combobox')
+            return;
+        index$1.handleAriaLabel(this);
+    }
     manageClearableResizeObserver(clearable) {
         var _a;
         if ('ResizeObserver' in window === false)
@@ -3550,9 +3550,9 @@ const Q2Input = class {
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "ariaLabel": ["ariaLabelObserver"],
         "_role": ["updateComboboxAriaLabel"],
         "label": ["updateComboboxAriaLabel"],
+        "ariaLabel": ["ariaLabelObserver"],
         "clearable": ["manageClearableResizeObserver"],
         "errors": ["errorsObserver"],
         "formatModifier": ["formatModifierObserver"],