npm - q2-tecton-elements - Versions diffs - 1.59.1 → 1.60.1 - Mend

q2-tecton-elements 1.59.1 → 1.60.1

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

Files changed (396) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2FilePickerCss","Q2FilePicker","constructor","hostRef","this","queuedFiles","areFilesUploading","displayedFiles","isDropZoneHighlighted","refreshCounter","buttonSize","fileTypes","maxFiles","Infinity","maxFileSize","status","value","invalidFiles","validFiles","variant","dimDropZone","e","disableEvent","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","grabSelectedFiles","selectedFiles","target","browseButtonInput","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","Fragment","type","onTctClick","launchFileBrowser","href","disabled","intent","loading","onClick","size","actualButtonSize","undefined","onChange","multiple","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","message","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","overSizeFile","forceRerender","fileName","animationName","filter","fileToDelete","find","toBeRemoved","displayedFile","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n 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(--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.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 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 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 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 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 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 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 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={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 multiple\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 class=\"file-item-loading\"></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 onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2FilePickerCss","Q2FilePicker","constructor","hostRef","this","queuedFiles","areFilesUploading","displayedFiles","isDropZoneHighlighted","refreshCounter","buttonSize","fileTypes","maxFiles","Infinity","maxFileSize","status","value","invalidFiles","validFiles","variant","dimDropZone","e","disableEvent","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","grabSelectedFiles","selectedFiles","target","browseButtonInput","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","Fragment","type","onTctClick","launchFileBrowser","href","disabled","intent","loading","onClick","size","actualButtonSize","undefined","onChange","multiple","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","message","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","overSizeFile","forceRerender","fileName","animationName","filter","fileToDelete","find","toBeRemoved","displayedFile","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n 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.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 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 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 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 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 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 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 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={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 multiple\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 class=\"file-item-loading\"></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 onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-form.entry.esm.js","sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n }\n\n --tct-input-margin: var(--comp-spacing);\n --tct-select-margin: var(--comp-spacing);\n --tct-calendar-margin: var(--comp-spacing);\n --tct-file-picker-margin: var(--comp-spacing);\n --tct-textarea-margin: var(--comp-spacing);\n --tct-checkbox-group-margin: var(--comp-spacing);\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class ~~Q2Checkbox~~ implements ComponentInterface {\n // #region Public Property API\n\n /** Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,onDAAonD;;MCGznD,~~UAAU~~,GAAA,MAAA;~~AADvB~~,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;"}
1	+ {"version":3,"file":"q2-form.entry.esm.js","sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n }\n\n --tct-input-margin: var(--comp-spacing);\n --tct-select-margin: var(--comp-spacing);\n --tct-calendar-margin: var(--comp-spacing);\n --tct-file-picker-margin: var(--comp-spacing);\n --tct-textarea-margin: var(--comp-spacing);\n --tct-checkbox-group-margin: var(--comp-spacing);\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n // #region Public Property API\n\n /** Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,onDAAonD;;MCGznD,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMI,QAAA,IAAO,CAAA,OAAA,GAAkD,QAAQ;AAcpE;;;IATG,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;"}

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

@@ -1,21 +1,21 @@
-import { r as o, h as a } from "./index-COzomxjJ.js";
+import { r as a, h as o } from "./index-CGkHOjh1.js";
 const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{--tct-input-margin:var(--comp-spacing);--tct-select-margin:var(--comp-spacing);--tct-calendar-margin:var(--comp-spacing);--tct-file-picker-margin:var(--comp-spacing);--tct-textarea-margin:var(--comp-spacing);--tct-checkbox-group-margin:var(--comp-spacing);--tct-radio-group-margin:var(--comp-spacing)}:host([spacing=none]) .container{--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none) 0)}:host([spacing=compact]) .container{--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0)}:host(:not([spacing]),[spacing=normal]) .container{--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0)}:host([spacing=comfortable]) .container{--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0)}";
 const c = class {
-  constructor(a) {
-    o(this, a);
+  constructor(o) {
+    a(this, o);
     // #region Public Property API
     /** Changes the vertical spacing of the form-fields contained within the component's slot */    this.spacing = "normal";
   }
   // #endregion
   // #region Render Methods
   render() {
-    return a("div", {
-      key: "2cb63c515c7df055a3549d04135d235dd2055738",
+    return o("div", {
+      key: "c9e096d4a60c377de87e30cd23777261f1d92298",
       class: "container"
-    }, a("slot", {
-      key: "a50bf633942f06fbce47d945ec7a05eeefa7bb8c"
+    }, o("slot", {
+      key: "0cd587b0053185276a5e0b577e1d4a5f65a3d9ab"
     }));
   }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2FormCss","~~Q2Checkbox~~","constructor","hostRef","this","spacing","render","h","key","class"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n }\n\n --tct-input-margin: var(--comp-spacing);\n --tct-select-margin: var(--comp-spacing);\n --tct-calendar-margin: var(--comp-spacing);\n --tct-file-picker-margin: var(--comp-spacing);\n --tct-textarea-margin: var(--comp-spacing);\n --tct-checkbox-group-margin: var(--comp-spacing);\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class ~~Q2Checkbox~~ implements ComponentInterface {\n // #region Public Property API\n\n /** Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAY;;MCGLC,~~IAAU~~;~~EADvB~~,WAAAC,CAAAC;;;oGAMIC,KAAOC,UAAkD;AAc5D;;;EATG,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAQ;MAAAC,KAAA","ignoreList":[]}
1	+ {"version":3,"names":["q2FormCss","Q2Form","constructor","hostRef","this","spacing","render","h","key","class"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n :host([spacing='none']) & {\n --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n }\n :host([spacing='compact']) & {\n --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n }\n :host(:not([spacing]), [spacing='normal']) & {\n --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n }\n\n :host([spacing='comfortable']) & {\n --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n }\n\n --tct-input-margin: var(--comp-spacing);\n --tct-select-margin: var(--comp-spacing);\n --tct-calendar-margin: var(--comp-spacing);\n --tct-file-picker-margin: var(--comp-spacing);\n --tct-textarea-margin: var(--comp-spacing);\n --tct-checkbox-group-margin: var(--comp-spacing);\n --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Form implements ComponentInterface {\n // #region Public Property API\n\n /** Changes the vertical spacing of the form-fields contained within the component's slot */\n @Prop({ reflect: true })\n spacing: 'none' \| 'compact' \| 'normal' \| 'comfortable' = 'normal';\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <slot />\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAY;;MCGLC,IAAM;EADnB,WAAAC,CAAAC;;;oGAMIC,KAAOC,UAAkD;AAc5D;;;EATG,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAQ;MAAAC,KAAA","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import { r as t, h as e } from "./index-COzomxjJ.js";
+import { r as t, h as e } from "./index-CGkHOjh1.js";
 const i = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.formatted-text{color:var(--tct-formatted-text-color, inherit);font-size:var(--tct-formatted-text-font-size, inherit);font-weight:var(--tct-formatted-text-font-weight, inherit)}.formatted-text-small{color:var(--tct-formatted-text-small-color, inherit);font-size:var(--tct-formatted-text-small-font-size, 24px);font-weight:var(--tct-formatted-text-small-font-weight, 600)}.formatted-text-medium{color:var(--tct-formatted-text-medium-color, inherit);font-size:var(--tct-formatted-text-medium-font-size, 42px);font-weight:var(--tct-formatted-text-medium-font-weight, 600)}.formatted-text-large{color:var(--tct-formatted-text-large-color, inherit);font-size:var(--tct-formatted-text-large-font-size, 70px);font-weight:var(--tct-formatted-text-large-font-weight, 700)}";

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

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as t } from "./index-COzomxjJ.js";
+import { r as s, h as i, H as t } from "./index-CGkHOjh1.js";
 const r = ':host{--grid-column-start:"";--grid-column-end:"";--grid-row-start:"";--grid-row-end:"";--justify-self:"";--align-self:"";--z-index:"";--xs-grid-column-start:"";--xs-grid-column-end:"";--xs-grid-row-start:"";--xs-grid-row-end:"";--xs-justify-self:"";--xs-align-self:"";--xs-z-index:"";--sm-grid-column-start:"";--sm-grid-column-end:"";--sm-grid-row-start:"";--sm-grid-row-end:"";--sm-justify-self:"";--sm-align-self:"";--sm-z-index:"";--md-grid-column-start:"";--md-grid-column-end:"";--md-grid-row-start:"";--md-grid-row-end:"";--md-justify-self:"";--md-align-self:"";--md-z-index:"";--lg-grid-column-start:"";--lg-grid-column-end:"";--lg-grid-row-start:"";--lg-grid-row-end:"";--lg-justify-self:"";--lg-align-self:"";--lg-z-index:"";--xl-grid-column-start:"";--xl-grid-column-end:"";--xl-grid-row-start:"";--xl-grid-row-end:"";--xl-justify-self:"";--xl-align-self:"";--xl-z-index:""}:host{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end);grid-row-start:var(--grid-row-start);grid-row-end:var(--grid-row-end);justify-self:var(--justify-self);align-self:var(--align-self);z-index:var(--z-index)}@media screen and (min-width: 480px){:host{grid-column-start:var(--xs-grid-column-start);grid-column-end:var(--xs-grid-column-end);grid-row-start:var(--xs-grid-row-start);grid-row-end:var(--xs-grid-row-end);justify-self:var(--xs-justify-self);align-self:var(--xs-align-self);z-index:var(--xs-z-index)}}@media screen and (min-width: 768px){:host{grid-column-start:var(--sm-grid-column-start);grid-column-end:var(--sm-grid-column-end);grid-row-start:var(--sm-grid-row-start);grid-row-end:var(--sm-grid-row-end);justify-self:var(--sm-justify-self);align-self:var(--sm-align-self);z-index:var(--sm-z-index)}}@media screen and (min-width: 992px){:host{grid-column-start:var(--md-grid-column-start);grid-column-end:var(--md-grid-column-end);grid-row-start:var(--md-grid-row-start);grid-row-end:var(--md-grid-row-end);justify-self:var(--md-justify-self);align-self:var(--md-align-self);z-index:var(--md-z-index)}}@media screen and (min-width: 1200px){:host{grid-column-start:var(--lg-grid-column-start);grid-column-end:var(--lg-grid-column-end);grid-row-start:var(--lg-grid-row-start);grid-row-end:var(--lg-grid-row-end);justify-self:var(--lg-justify-self);align-self:var(--lg-align-self);z-index:var(--lg-z-index)}}@media screen and (min-width: 1400px){:host{grid-column-start:var(--xl-grid-column-start);grid-column-end:var(--xl-grid-column-end);grid-row-start:var(--xl-grid-row-start);grid-row-end:var(--xl-grid-row-end);justify-self:var(--xl-justify-self);align-self:var(--xl-align-self);z-index:var(--xl-z-index)}}';

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

@@ -1,4 +1,4 @@
-import { r as t, h as i, F as s } from "./index-COzomxjJ.js";
+import { r as t, h as i, F as s } from "./index-CGkHOjh1.js";
 const e = '.q2-grid{--comp-grid-gap-none:var(--tct-grid-gap-none, var(--app-scale-0x, 0px));--comp-grid-gap-compact:var(--tct-grid-gap-compact, var(--app-scale-1x, 5px));--comp-grid-gap-normal:var(--tct-grid-gap-normal, var(--app-scale-3x, 15px));--comp-grid-gap-comfortable:var(--tct-grid-gap-comfortable, var(--app-scale-5x, 25px));--grid-template-columns:"";--grid-template-rows:"";--grid-gap:"";--justify-items:"";--align-items:"";--xs-grid-template-columns:"";--xs-grid-template-rows:"";--xs-grid-gap:"";--xs-justify-items:"";--xs-align-items:"";--sm-grid-template-columns:"";--sm-grid-template-rows:"";--sm-grid-gap:"";--sm-justify-items:"";--sm-align-items:"";--md-grid-template-columns:"";--md-grid-template-rows:"";--md-grid-gap:"";--md-justify-items:"";--md-align-items:"";--lg-grid-template-columns:"";--lg-grid-template-rows:"";--lg-grid-gap:"";--lg-justify-items:"";--lg-align-items:"";--xl-grid-template-columns:"";--xl-grid-template-rows:"";--xl-grid-gap:"";--xl-justify-items:"";--xl-align-items:"";display:grid;width:100%;height:100%;grid-auto-rows:auto;grid-auto-columns:1fr;grid-auto-flow:row;justify-content:center;align-content:center}.q2-grid{grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);gap:var(--grid-gap);justify-items:var(--justify-items);align-items:var(--align-items)}@media screen and (min-width: 480px){.q2-grid{grid-template-columns:var(--xs-grid-template-columns);grid-template-rows:var(--xs-grid-template-rows);gap:var(--xs-grid-gap);justify-items:var(--xs-justify-items);align-items:var(--xs-align-items)}}@media screen and (min-width: 768px){.q2-grid{grid-template-columns:var(--sm-grid-template-columns);grid-template-rows:var(--sm-grid-template-rows);gap:var(--sm-grid-gap);justify-items:var(--sm-justify-items);align-items:var(--sm-align-items)}}@media screen and (min-width: 992px){.q2-grid{grid-template-columns:var(--md-grid-template-columns);grid-template-rows:var(--md-grid-template-rows);gap:var(--md-grid-gap);justify-items:var(--md-justify-items);align-items:var(--md-align-items)}}@media screen and (min-width: 1200px){.q2-grid{grid-template-columns:var(--lg-grid-template-columns);grid-template-rows:var(--lg-grid-template-rows);gap:var(--lg-grid-gap);justify-items:var(--lg-justify-items);align-items:var(--lg-align-items)}}@media screen and (min-width: 1400px){.q2-grid{grid-template-columns:var(--xl-grid-template-columns);grid-template-rows:var(--xl-grid-template-rows);gap:var(--xl-grid-gap);justify-items:var(--xl-justify-items);align-items:var(--xl-align-items)}}';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-item.entry.esm.js","sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n display: block;\n\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n }\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n.action {\n --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n align-items: var(--tct-item-action-align-items, center);\n display: flex;\n grid-row: 1;\n justify-content: center;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n text-align: center;\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, 0);\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/*\n @slot bullet - An optional slot to display custom content in the bullet area.\n * Use this to provide a visual indicator or icon for your item.\n \n @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n \n @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n \n @slot action - An optional slot to display custom content in the action area.\n * Use this to provide buttons or interactive elements related to the item.\n \n @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n /\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n itemElement: HTMLDivElement;\n mutationObserver: MutationObserver;\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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (this.clickable) {\n this.itemElement?.focus();\n } else {\n event.preventDefault();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasBulletSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get bulletClasses() {\n const classes = ['bullet'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`footer-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasBulletSlotContent() {\n return hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`item-no-bullet`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`main-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { clickable } = this;\n return (\n <div\n test-id=\"itemContainer\"\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n >\n {this.hasBulletSlotContent && (\n <div class={this.bulletClasses}>\n <slot name=\"bullet\" />\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-item.entry.esm.js","sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n display: block;\n\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n }\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n.action {\n --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n align-items: var(--tct-item-action-align-items, center);\n display: flex;\n grid-row: 1;\n justify-content: center;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n text-align: center;\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, 0);\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/*\n @slot bullet - An optional slot to display custom content in the bullet area.\n * Use this to provide a visual indicator or icon for your item.\n \n @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n \n @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n \n @slot action - An optional slot to display custom content in the action area.\n * Use this to provide buttons or interactive elements related to the item.\n \n @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n /\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n itemElement: HTMLDivElement;\n mutationObserver: MutationObserver;\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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (this.clickable) {\n this.itemElement?.focus();\n } else {\n event.preventDefault();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasBulletSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get bulletClasses() {\n const classes = ['bullet'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`footer-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasBulletSlotContent() {\n return hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`item-no-bullet`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasBulletSlotContent) {\n classes.push(`main-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { clickable } = this;\n return (\n <div\n test-id=\"itemContainer\"\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n >\n {this.hasBulletSlotContent && (\n <div class={this.bulletClasses}>\n <slot name=\"bullet\" />\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import { r as t, h as e, g as o } from "./index-COzomxjJ.js";
+import { r as t, h as e, g as o } from "./index-CGkHOjh1.js";
-import { o as i, h as a } from "./index-CkXFIBxL.js";
+import { o as a, h as i } from "./index-xCuy-dFb.js";
-const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(\n      --tct-btn-primary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  )}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const n = class {
   constructor(e) {
@@ -23,7 +23,7 @@ const n = class {
       });
       this.mutationObserver = t;
     }
-    i(this.hostElement);
+    a(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -63,19 +63,19 @@ const n = class {
     return t.join(" ");
   }
   get hasActionSlotContent() {
-    return a(this.hostElement, "action");
+    return i(this.hostElement, "action");
   }
   get hasBodySlotContent() {
-    return a(this.hostElement, "body");
+    return i(this.hostElement, "body");
   }
   get hasBulletSlotContent() {
-    return a(this.hostElement, "bullet");
+    return i(this.hostElement, "bullet");
   }
   get hasFooterSlotContent() {
-    return a(this.hostElement, "footer");
+    return i(this.hostElement, "footer");
   }
   get hasHeaderSlotContent() {
-    return a(this.hostElement, "header");
+    return i(this.hostElement, "header");
   }
   get itemClasses() {
     const t = [ "item" ];

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

@@ -1,4 +1,4 @@
-import { r as t, c as e, h as i } from "./index-COzomxjJ.js";
+import { r as t, c as e, h as i } from "./index-CGkHOjh1.js";
 const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, 24px);opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";

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

@@ -1,6 +1,6 @@
-import { r as t, c as i, h as e, g as n } from "./index-COzomxjJ.js";
+import { r as t, c as i, h as e, g as n } from "./index-CGkHOjh1.js";
-import { h as o } from "./index-CkXFIBxL.js";
+import { h as o } from "./index-xCuy-dFb.js";
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{border-radius:var(--tct-link-border-radius, 0);color:var(--tct-link-color-standalone, var(--t-primary));min-height:var(--tct-link-min-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";

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

@@ -1,6 +1,6 @@
-import { r as e } from "./index-COzomxjJ.js";
+import { r as e } from "./index-CGkHOjh1.js";
-import { a as t } from "./shapes-BrIjALih.js";
+import { a as t } from "./shapes-B6iI6sMH.js";
 const a = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)));opacity:var(--comp-loading-skeleton-opacity)}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";

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

@@ -1,6 +1,6 @@
-import { r as t, g as s } from "./index-COzomxjJ.js";
+import { r as t, g as s } from "./index-CGkHOjh1.js";
-import { l as i } from "./index-CkXFIBxL.js";
+import { l as i } from "./index-xCuy-dFb.js";
 const e = class {
   constructor(s) {

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

@@ -1,6 +1,6 @@
-import { r as t, h as e, g as s } from "./index-COzomxjJ.js";
+import { r as t, h as e, g as s } from "./index-CGkHOjh1.js";
-import { o as a, a as o, n as r, p as i, l as c } from "./index-CkXFIBxL.js";
+import { o as a, a as o, n as r, p as i, l as c } from "./index-xCuy-dFb.js";
 const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";

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

@@ -1,6 +1,6 @@
-import { r as t, c as i, h as o, g as a } from "./index-COzomxjJ.js";
+import { r as t, c as i, h as o, g as a } from "./index-CGkHOjh1.js";
-import { f as e, w as r, h as s } from "./index-CkXFIBxL.js";
+import { f as e, w as r, h as s } from "./index-xCuy-dFb.js";
 import { s as d } from "./sanitize-html-string-DL0kgllh.js";

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

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as n, g as o } from "./index-COzomxjJ.js";
+import { r as t, c as e, h as n, g as o } from "./index-CGkHOjh1.js";
-import { l as a, o as i } from "./index-CkXFIBxL.js";
+import { l as a, o as i } from "./index-xCuy-dFb.js";
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-optgroup.entry.esm.js","sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.q2-optgroup-header {\n --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n background: var-list(\n --tct-optgroup-header-background,\n var-prefixer(optgroup-header-bg),\n --tct-gray-13,\n --t-gray-13,\n --tct-gray-l2,\n --app-gray-l2,\n #e6e6e6\n );\n color: var-list(--tct-optgroup-header-color, inherit);\n padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n position: sticky;\n top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n // #region Own Properties\n\n guid: number = createGuid();\n mutationObserver: MutationObserver;\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 hidden: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** ~~Serves~~ as ~~the~~ ~~group~~ ~~header~~ ~~text~~. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* ~~Determines~~ ~~whether~~ ~~all~~ ~~nested~~ ~~options~~ ~~are disabled~~. */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.setHidden);\n observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n this.mutationObserver = observer;\n\n // set initially\n this.setHidden();\n this.disabledWatcher(this.disabled);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledWatcher(disabled: boolean) {\n this.options.forEach(opt => {\n opt.disabledGroup = !!disabled;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get headerId() {\n return `q2-optgroup-header-${this.guid}`;\n }\n\n get options() {\n return Array.from(this.hostElement.querySelectorAll('q2-option'));\n }\n\n setHidden = () => {\n this.hidden = this.options.every(opt => opt.hidden \|\| opt._multiSelectHidden);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class=\"q2-optgroup-container\"\n hidden={this.hidden}\n aria-labelledby={this.headerId}\n role=\"group\"\n >\n <div\n class=\"q2-optgroup-header\"\n id={this.headerId}\n >\n {(this.label && loc(this.label)) \|\| ''}\n </div>\n <div class=\"q2-optgroup-options\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,0+CAA0+C;;MCIn/C,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;;;AAa3B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;;;AAOvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA6CzB,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC;AACjF,SAAC;AA2BJ;;;IAjEG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxF,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;QAGhC,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;AAOvC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACvB,YAAA,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ;AAClC,SAAC,CAAC;;;;AAMN,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAsB,mBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAG5C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;IAUrE,MAAM,GAAA;QACF,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEZ,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-optgroup.entry.esm.js","sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.q2-optgroup-header {\n --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n background: var-list(\n --tct-optgroup-header-background,\n var-prefixer(optgroup-header-bg),\n --tct-gray-13,\n --t-gray-13,\n --tct-gray-l2,\n --app-gray-l2,\n #e6e6e6\n );\n color: var-list(--tct-optgroup-header-color, inherit);\n padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n position: sticky;\n top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n // #region Own Properties\n\n guid: number = createGuid();\n mutationObserver: MutationObserver;\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 hidden: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether all nested options are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Serves as the group header text. */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.setHidden);\n observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n this.mutationObserver = observer;\n\n // set initially\n this.setHidden();\n this.disabledWatcher(this.disabled);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledWatcher(disabled: boolean) {\n this.options.forEach(opt => {\n opt.disabledGroup = !!disabled;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get headerId() {\n return `q2-optgroup-header-${this.guid}`;\n }\n\n get options() {\n return Array.from(this.hostElement.querySelectorAll('q2-option'));\n }\n\n setHidden = () => {\n this.hidden = this.options.every(opt => opt.hidden \|\| opt._multiSelectHidden);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class=\"q2-optgroup-container\"\n hidden={this.hidden}\n aria-labelledby={this.headerId}\n role=\"group\"\n >\n <div\n class=\"q2-optgroup-header\"\n id={this.headerId}\n >\n {(this.label && loc(this.label)) \|\| ''}\n </div>\n <div class=\"q2-optgroup-options\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,0+CAA0+C;;MCIn/C,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;;;AAa3B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;;;AAOvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA6CzB,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC;AACjF,SAAC;AA2BJ;;;IAjEG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxF,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;QAGhC,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;AAOvC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACvB,YAAA,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ;AAClC,SAAC,CAAC;;;;AAMN,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAsB,mBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAG5C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;IAUrE,MAAM,GAAA;QACF,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEZ,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as t, h as e, g as r } from "./index-COzomxjJ.js";
+import { r as t, h as e, g as r } from "./index-CGkHOjh1.js";
-import { c as o, l as a } from "./index-CkXFIBxL.js";
+import { c as o, l as a } from "./index-xCuy-dFb.js";
 const i = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
@@ -14,7 +14,7 @@ const s = class {
         this.hidden = false;
     // #endregion
     // #region Public Property API
-    /** Serves as the group header text. */    this.disabled = false;
+    /** Determines whether all nested options are disabled. */    this.disabled = false;
     this.setHidden = () => {
       this.hidden = this.options.every((t => t.hidden || t._multiSelectHidden));
     };