npm - q2-tecton-elements - Versions diffs - 1.55.4 → 1.56.1 - Mend

q2-tecton-elements 1.55.4 → 1.56.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 (397) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-file-picker.entry.cjs.js","mappings":"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","names":["h","loc","Fragment","hasSlotContent"],"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-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\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 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-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 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 FileStatus = 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit' \| 'in-progress' \| 'failed' \| 'uploaded';\nexport type FilesObject = {\n invalidFiles: {\n file: File;\n status: 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit' \| 'in-progress' \| 'failed' \| 'uploaded';\n }[];\n validFiles: File[];\n};\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: {\n file: File;\n status: FileStatus;\n toBeRemoved?: boolean;\n }[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\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 objects representing the status of the files being uploaded.\n * Each object should have a `name` property (the file name) and a `status`\n * property (the status of the file) that equals either 'in-progress',\n * 'failed' or 'uploaded'.\n /\n @Prop({ reflect: true })\n status: { name: string; status: 'in-progress' \| 'failed' \| 'uploaded' }[] = [];\n\n /\n Returns an array of File objects representing the files selected by the\n * user. If no files are selected, the value is an empty array.\n * @readonly\n /\n @Prop({ mutable: true })\n value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\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 @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: { name: string; status: FileStatus }[]) {\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 this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\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(status: FileStatus, size: number) {\n switch (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 return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [(size / (1000 1000)).toFixed(2)]);\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\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=\"medium\"\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 slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</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"],"version":3}
1	+ {"file":"q2-file-picker.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,4rPAA4rP,CAAC;AACrtP,2BAAe,eAAe;;MCsCjB,YAAY;;;;QAMrB,gBAAW,GAAW,EAAE,CAAC;QAsLzB,gBAAW,GAAG,CAAC,CAAY;YACvB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;SACtC,CAAC;QAoIF,qBAAgB,GAAG,CAAC,CAAY;YAC5B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;YACnC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACtD,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;YAExD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;SAC5B,CAAC;QAEF,sBAAiB,GAAG,CAAC,CAAQ;YACzB,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YACvE,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;;YAExD,IAAI,CAAC,iBAAsC,CAAC,KAAK,GAAG,EAAE,CAAC;YAExD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;SAC5B,CAAC;QAEF,sBAAiB,GAAG,CAAC,CAAY;YAC7B,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;SACrC,CAAC;;;QASF,WAAM,GAAG;YACL,QACIA,iBAAK,KAAK,EAAC,aAAa,IACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,MAClCA,iBAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,QAAQ,KACVA,mBACI,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,YAAY,aACZ,OAAO,IAEd,CAAC,CAAC,IAAI,CAAC,KAAK,GAAGC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,mBAAmB,GAAGD,kBAAM,IAAI,EAAC,OAAO,GAAG,GAAG,EAAE,CACnF,CACX,EACA,IAAI,CAAC,cAAc,KAChBA,iBACI,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,aAAa,aACR,aAAa,IAEpB,CAAC,CAAC,IAAI,CAAC,WAAW,IACfC,WAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IACrB,IAAI,CAAC,yBAAyB,IAC9BD,kBAAM,IAAI,EAAC,aAAa,GAAG,KAE3B,EAAE,CACL,CACC,CACT,CACC,CACT,EAEA,CAAC,IAAI,CAAC,OAAO,KAAK,aAAa,KAC5BA,iBACI,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAClC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,aACxC,WAAW,IAElB,CAAC,IAAI,CAAC,iBAAiB,KACpBA,QAACE,cAAQ,QACLF,wBAAY,KAAK,EAAC,SAAS,GAAc,EACzCA,eAAG,KAAK,EAAC,gBAAgB,IAAEC,WAAG,CAAC,6CAA6C,CAAC,CAAK,CAC3E,CACd,MACGD,QAACE,cAAQ,QACLF,qBAAS,IAAI,EAAC,QAAQ,GAAW,EACjCA,eAAG,KAAK,EAAC,gBAAgB,IACrBA,qBACI,KAAK,EAAEC,WAAG,CAAC,kCAAkC,CAAC,EAC9C,UAAU,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAC1C,OAAO,EAAC,QAAQ,aACR,aAAa,EACrB,IAAI,EAAC,oBAAoB,GAC3B,EACDA,WAAG,CAAC,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAClE,CACG,CACd,CACC,CACT,MACGD,iBACI,KAAK,EAAC,QAAQ,aACN,QAAQ,IAEhBA,oBACI,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,MAAM,EAAC,kBAAkB,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EACvC,IAAI,EAAE,IAAI,CAAC,gBAAgB,aACnB,eAAe,IAEvBA,qBAAS,IAAI,EAAC,WAAW,GAAW,EACpCA,sBAAOC,WAAG,CAAC,uCAAuC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAQ,CACvE,CACP,CACT,EACDD,uCACsB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,aAAa,KAAK,SAAS,EACpE,KAAK,EAAC,IAAI,EACV,EAAE,EAAC,YAAY,EACf,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,iBAAiB,CAAC,EAClE,IAAI,EAAC,MAAM,aACH,YAAY,EACpB,QAAQ,SACV,EACFA,iBAAK,KAAK,EAAC,qBAAqB,IAC5BA,qBAAS,KAAK,EAAC,WAAW,IACrB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,KACzBA,qBACI,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9C,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACnB,cAAc,EAAE,IAAI,CAAC,sCAAsC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAE3EA,iBAAK,IAAI,EAAC,QAAQ,IACb,IAAI,CAAC,MAAM,KAAK,cAAc;gBAC/B,IAAI,CAAC,MAAM,KAAK,iBAAiB;gBACjC,IAAI,CAAC,MAAM,KAAK,QAAQ;gBACxB,IAAI,CAAC,MAAM,KAAK,sBAAsB,IAClCA,qBACI,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,GACL,IACX,IAAI,CAAC,MAAM,KAAK,aAAa,IAC7BA,wBAAY,KAAK,EAAC,mBAAmB,GAAc,KAEnDA,qBACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,GACP,CACd,CACC,EACNA,iBAAK,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAO,EACzCA,iBACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,IAEV,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAClC,EACNA,iBAAK,IAAI,EAAC,QAAQ,IACdA,oBACI,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAC,cAAc,EACrB,OAAO,EAAE,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7DA,qBAAS,IAAI,EAAC,OAAO,GAAW,CAC3B,CACP,CACA,CACb,CAAC,CACI,CACR,CACJ,EACR;SACL,CAAC;iCA5d2B,KAAK;8BAGA,EAAE;qCAGH,KAAK;8BAGrB,CAAC;0BASkC,QAAQ;;yBAgB7B,EAAE;;wBAcd,QAAQ;2BAML,QAAQ;sBAgBP,EAAE;qBAQJ,EAAE,YAAY,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;uBAOrB,QAAQ;;;;IAY5C,cAAc,CAAC,QAAsB;QACjC,QAAQ,CAAC,OAAO,CAAC,UAAU;YACvB,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC;YAClG,IAAI,uBAAuB,GAAG,CAAC,CAAC,EAAE;gBAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC5E,IAAI,CAAC,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;aACrG;iBAAM;gBACH,MAAM,0BAA0B,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAC5D,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAC7C,CAAC;gBACF,IAAI,0BAA0B,GAAG,CAAC,CAAC,EAAE;oBACjC,IAAI,CAAC,cAAc,CAAC,0BAA0B,CAAC,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;oBAC3E,IAAI,UAAU,CAAC,MAAM,KAAK,QAAQ,IAAI,UAAU,CAAC,OAAO,EAAE;wBACtD,IAAI,CAAC,cAAc,CAAC,0BAA0B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;qBAChF;oBACD,IAAI,CAAC,+BAA+B,EAAE,CAAC;iBAC1C;aACJ;SACJ,CAAC,CAAC;KACN;;;IAKD,IAAI,gBAAgB;QAChB,OAAO,IAAI,CAAC,UAAU,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;KACnE;IAED,IAAI,eAAe;QACf,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;SACzC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,cAAc;QACd,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC9G;IAED,IAAI,cAAc;QACd,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,yBAAyB,CAAC;KAC/D;IAED,IAAI,yBAAyB;QACzB,OAAOG,sBAAc,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;KACjD;IAED,IAAI,QAAQ;QACR,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB,CAAC;KACnD;IAED,IAAI,mBAAmB;QACnB,OAAOA,sBAAc,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;KAC3C;IAED,gBAAgB,CAAC,aAAqB;QAClC,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,0BAA0B,CAAC,aAAa,CAAC,CAAC,CAAC;QACrE,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC;QACpE,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;QAExC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAClC;aAAM;YACH,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;SACpC;QAED,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;KACtD;IAOD,YAAY,CAAC,KAAY;QACrB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;IAED,+BAA+B;QAC3B,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,aAAa,CAAC,EAAE;YACnG,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAClC;KACJ;IAED,UAAU,CAAC,WAAwB;QAC/B,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACpC;IAED,0BAA0B,CAAC,KAAa;QACpC,MAAM,YAAY,GAAG,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,YAAY,CAAC;QAE1D,KAAK,CAAC,OAAO,CAAC,IAAI;YACd,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC;YAC/D,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC9C,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC,CAAC;aACvD;SACJ,CAAC,CAAC;;QAGH,YAAY,CAAC,OAAO,CAAC,WAAW;YAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAC9C,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;gBACZ,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aAC1B;SACJ,CAAC,CAAC;QAEH,OAAO,YAAY,CAAC;KACvB;IAED,6BAA6B,CAAC,KAAa;QACvC,MAAM,sBAAsB,GAAG,EAAE,CAAC;QAElC,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ;YAAE,OAAO,sBAAsB,CAAC;QAE9D,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC9B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChD,WAAW,CAAC,OAAO,CAAC,IAAI;gBACpB,sBAAsB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,sBAAsB,EAAE,CAAC,CAAC;aACzE,CAAC,CAAC;SACN;QAED,OAAO,sBAAsB,CAAC;KACjC;IAED,yBAAyB,CAAC,KAAa;QACnC,MAAM,kBAAkB,GAAG,EAAE,CAAC;QAE9B,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ;YAAE,OAAO,kBAAkB,CAAC;QAE7D,KAAK,CAAC,OAAO,CAAC,IAAI;YACd,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;gBAC9B,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;aAChE;SACJ,CAAC,CAAC;;QAGH,kBAAkB,CAAC,OAAO,CAAC,YAAY;YACnC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAC/C,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;gBACZ,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aAC1B;SACJ,CAAC,CAAC;QAEH,OAAO,kBAAkB,CAAC;KAC7B;IAED,aAAa;QACT,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;KAC5B;IAED,sCAAsC,CAAC,QAAgB;QACnD,OAAO,CAAC,CAAiB;YACrB,IAAI,CAAC,CAAC,aAAa,KAAK,uBAAuB,EAAE;gBAC7C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;aACzF;SACJ,CAAC;KACL;IAED,+BAA+B,CAAC,QAAgB;QAC5C,OAAO;YACH,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;YACnF,IAAI,YAAY,EAAE;gBACd,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,aAAa,EAAE,CAAC;aACxB;SACJ,CAAC;KACL;IAED,kBAAkB,CAAC,QAAgB;QAC/B,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC,CAAC;QAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;QACnF,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,EAAE;YAC3B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5B;aAAM;YACH,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC3B;QACD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,wBAAwB,CAAC,aAA4B;QACjD,QAAQ,aAAa,CAAC,MAAM;YACxB,KAAK,cAAc;gBACf,OAAOF,WAAG,CAAC,+CAA+C,CAAC,CAAC;YAChE,KAAK,iBAAiB;gBAClB,OAAOA,WAAG,CAAC,4CAA4C,CAAC,CAAC;YAC7D,KAAK,sBAAsB;gBACvB,OAAOA,WAAG,CAAC,6CAA6C,CAAC,CAAC;YAC9D,KAAK,aAAa;gBACd,OAAOA,WAAG,CAAC,6CAA6C,CAAC,CAAC;YAC9D,KAAK,QAAQ;gBACT,IAAI,aAAa,CAAC,OAAO;oBAAE,OAAOA,WAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBAC7D,OAAOA,WAAG,CAAC,wCAAwC,CAAC,CAAC;YACzD,KAAK,UAAU,CAAC;YAChB;gBACI,OAAOA,WAAG,CAAC,oCAAoC,EAAE;oBAC7C,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;iBACvD,CAAC,CAAC;SACV;KACJ;IA2BD,iBAAiB;QACb,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;KACjE;;;;;;;;;;","names":["h","loc","Fragment","hasSlotContent"],"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: FileStatus;\n toBeRemoved?: boolean;\n};\ntype UploadFileStatus = 'in-progress' \| 'failed' \| 'uploaded';\ntype FileStatus = UploadFileStatus \| 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit';\nexport type StatusFile = {\n name: string;\n status: UploadFileStatus;\n message?: string;\n};\nexport type FilesObject = {\n invalidFiles: {\n file: File;\n status: 'invalid-type' \| 'over-size-limit' \| 'over-max-files-limit' \| 'in-progress' \| 'failed' \| 'uploaded';\n }[];\n validFiles: File[];\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. Can be 'none', 'small', 'medium', or 'large'.\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 objects representing the status of the files being uploaded.\n * Each object should have a `name` property (the file name), a `status`\n * property (the status of the file) that equals either 'in-progress',\n * 'failed', or 'uploaded', and an optional `message` property.\n \n Custom messages provided in the `message` property will only be used for\n * failed uploads (`status: 'failed'`). This allows for more specific error\n * messages in failure scenarios, while ensuring that all other file status\n * messages remain consistent and aligned with approved design/UX standards.\n * Custom messages for failed uploads are limited to a single line.\n * @localizable\n /\n @Prop({ reflect: true })\n status: StatusFile[] = [];\n\n /\n Returns an array of File objects representing the files selected by the\n * user. If no files are selected, the value is an empty array.\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 @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: StatusFile[]) {\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"],"version":3}

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

@@ -13,7 +13,7 @@ const Q2Checkbox = class {
         this.spacing = 'normal';
     }
     render() {
-        return (index.h("div", { key: '377fbc8245a6d6734536a37f3d733384801fd00b', class: "container" }, index.h("slot", { key: '73d1054f5ca1af44c78a4f85b1009143989a5530' })));
+        return (index.h("div", { key: '04799c303aece51e5a4db5b73b250b23042ac929', class: "container" }, index.h("slot", { key: '8461f1f0db3fe541583548fe574a12a6dfb8bd26' })));
     }
 };
 Q2Checkbox.style = Q2FormStyle0;

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

@@ -55,7 +55,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (index.h("div", { key: '29aac8ea5e737d01243d42d0a9790d18a11f768c', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '613fe3f2d365edd4a2ffefd37ac2ec4f05220978' }, this.formattedValue)));
+        return (index.h("div", { key: '59f16336df671d957674678a7c129652ba98672d', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '9bdf70755092e11ad43b2f7d6d487d0bb0b838a1' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

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

@@ -0,0 +1,133 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-e7e68b1e.js');
+const q2GridAreaCss = ":host{--grid-column-start:\"\";--grid-column-end:\"\";--grid-row-start:\"\";--grid-row-end:\"\";--justify-self:\"\";--align-self:\"\";--z-index:\"\";--xs-grid-column-start:\"\";--xs-grid-column-end:\"\";--xs-grid-row-start:\"\";--xs-grid-row-end:\"\";--xs-justify-self:\"\";--xs-align-self:\"\";--xs-z-index:\"\";--sm-grid-column-start:\"\";--sm-grid-column-end:\"\";--sm-grid-row-start:\"\";--sm-grid-row-end:\"\";--sm-justify-self:\"\";--sm-align-self:\"\";--sm-z-index:\"\";--md-grid-column-start:\"\";--md-grid-column-end:\"\";--md-grid-row-start:\"\";--md-grid-row-end:\"\";--md-justify-self:\"\";--md-align-self:\"\";--md-z-index:\"\";--lg-grid-column-start:\"\";--lg-grid-column-end:\"\";--lg-grid-row-start:\"\";--lg-grid-row-end:\"\";--lg-justify-self:\"\";--lg-align-self:\"\";--lg-z-index:\"\";--xl-grid-column-start:\"\";--xl-grid-column-end:\"\";--xl-grid-row-start:\"\";--xl-grid-row-end:\"\";--xl-justify-self:\"\";--xl-align-self:\"\";--xl-z-index:\"\"}:host{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end);grid-row-start:var(--grid-row-start);grid-row-end:var(--grid-row-end);justify-self:var(--justify-self);align-self:var(--align-self);z-index:var(--z-index)}@media screen and (min-width: 480px){:host{grid-column-start:var(--xs-grid-column-start);grid-column-end:var(--xs-grid-column-end);grid-row-start:var(--xs-grid-row-start);grid-row-end:var(--xs-grid-row-end);justify-self:var(--xs-justify-self);align-self:var(--xs-align-self);z-index:var(--xs-z-index)}}@media screen and (min-width: 768px){:host{grid-column-start:var(--sm-grid-column-start);grid-column-end:var(--sm-grid-column-end);grid-row-start:var(--sm-grid-row-start);grid-row-end:var(--sm-grid-row-end);justify-self:var(--sm-justify-self);align-self:var(--sm-align-self);z-index:var(--sm-z-index)}}@media screen and (min-width: 992px){:host{grid-column-start:var(--md-grid-column-start);grid-column-end:var(--md-grid-column-end);grid-row-start:var(--md-grid-row-start);grid-row-end:var(--md-grid-row-end);justify-self:var(--md-justify-self);align-self:var(--md-align-self);z-index:var(--md-z-index)}}@media screen and (min-width: 1200px){:host{grid-column-start:var(--lg-grid-column-start);grid-column-end:var(--lg-grid-column-end);grid-row-start:var(--lg-grid-row-start);grid-row-end:var(--lg-grid-row-end);justify-self:var(--lg-justify-self);align-self:var(--lg-align-self);z-index:var(--lg-z-index)}}@media screen and (min-width: 1400px){:host{grid-column-start:var(--xl-grid-column-start);grid-column-end:var(--xl-grid-column-end);grid-row-start:var(--xl-grid-row-start);grid-row-end:var(--xl-grid-row-end);justify-self:var(--xl-justify-self);align-self:var(--xl-align-self);z-index:var(--xl-z-index)}}";
+const Q2GridAreaStyle0 = q2GridAreaCss;
+const Q2GridArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.align = 'auto';
+        this.columnSpan = 1;
+        this.columnStart = 'auto';
+        this.justify = 'auto';
+        this.lgAlign = undefined;
+        this.lgColumnSpan = undefined;
+        this.lgColumnStart = undefined;
+        this.lgJustify = undefined;
+        this.lgRowSpan = undefined;
+        this.lgRowStart = undefined;
+        this.lgZIndex = undefined;
+        this.mdAlign = undefined;
+        this.mdColumnSpan = undefined;
+        this.mdColumnStart = undefined;
+        this.mdJustify = undefined;
+        this.mdRowSpan = undefined;
+        this.mdRowStart = undefined;
+        this.mdZIndex = undefined;
+        this.rowSpan = 1;
+        this.rowStart = 'auto';
+        this.smAlign = undefined;
+        this.smColumnSpan = undefined;
+        this.smColumnStart = undefined;
+        this.smJustify = undefined;
+        this.smRowSpan = undefined;
+        this.smRowStart = undefined;
+        this.smZIndex = undefined;
+        this.xlAlign = undefined;
+        this.xlColumnSpan = undefined;
+        this.xlColumnStart = undefined;
+        this.xlJustify = undefined;
+        this.xlRowSpan = undefined;
+        this.xlRowStart = undefined;
+        this.xlZIndex = undefined;
+        this.xsAlign = undefined;
+        this.xsColumnSpan = undefined;
+        this.xsColumnStart = undefined;
+        this.xsJustify = undefined;
+        this.xsRowSpan = undefined;
+        this.xsRowStart = undefined;
+        this.xsZIndex = undefined;
+        this.zIndex = 0;
+    }
+    // #endregion
+    // #region Local Methods
+    get computedLgZIndex() {
+        return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;
+    }
+    get computedMdZIndex() {
+        return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;
+    }
+    get computedSmZIndex() {
+        return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;
+    }
+    get computedXlZIndex() {
+        return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;
+    }
+    get computedXsZIndex() {
+        return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const q2GridAreaStyles = {
+            // base:
+            '--grid-column-start': `${this.columnStart}`,
+            '--grid-column-end': `span ${this.columnSpan}`,
+            '--grid-row-start': `${this.rowStart}`,
+            '--grid-row-end': `span ${this.rowSpan}`,
+            '--justify-self': this.justify,
+            '--align-self': this.align,
+            '--z-index': `${this.zIndex}`,
+            // xs:
+            '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,
+            '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,
+            '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,
+            '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,
+            '--xs-justify-self': this.xsJustify || this.justify,
+            '--xs-align-self': this.xsAlign || this.align,
+            '--xs-z-index': `${this.computedXsZIndex}`,
+            // sm:
+            '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+            '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+            '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,
+            '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+            '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,
+            '--sm-align-self': this.smAlign || this.xsAlign || this.align,
+            '--sm-z-index': `${this.computedSmZIndex}`,
+            // md:
+            '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+            '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+            '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,
+            '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+            '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            '--md-z-index': `${this.computedMdZIndex}`,
+            // lg:
+            '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+            '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+            '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,
+            '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+            '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            '--lg-z-index': `${this.computedLgZIndex}`,
+            // xl:
+            '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+            '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+            '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,
+            '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+            '--xl-justify-self': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--xl-align-self': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            '--xl-z-index': `${this.computedXlZIndex}`,
+        };
+        return (index.h(index.Host, { key: 'f8e261f2b0ef797a8b66f6da08579be08c1c47b0', style: q2GridAreaStyles }, index.h("slot", { key: '41d23b118b2030a76a31a151cee55e080d2b804e' })));
+    }
+};
+Q2GridArea.style = Q2GridAreaStyle0;
+exports.q2_grid_area = Q2GridArea;
+//# sourceMappingURL=q2-grid-area.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"q2-grid-area.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/q2-grid-area/q2-grid-area.scss?tag=q2-grid-area&encapsulation=shadow","src/components/q2-grid-area/q2-grid-area.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n:host {\n // base:\n --grid-column-start: '';\n --grid-column-end: '';\n --grid-row-start: '';\n --grid-row-end: '';\n --justify-self: '';\n --align-self: '';\n --z-index: '';\n // xs:\n --xs-grid-column-start: '';\n --xs-grid-column-end: '';\n --xs-grid-row-start: '';\n --xs-grid-row-end: '';\n --xs-justify-self: '';\n --xs-align-self: '';\n --xs-z-index: '';\n // sm:\n --sm-grid-column-start: '';\n --sm-grid-column-end: '';\n --sm-grid-row-start: '';\n --sm-grid-row-end: '';\n --sm-justify-self: '';\n --sm-align-self: '';\n --sm-z-index: '';\n // md:\n --md-grid-column-start: '';\n --md-grid-column-end: '';\n --md-grid-row-start: '';\n --md-grid-row-end: '';\n --md-justify-self: '';\n --md-align-self: '';\n --md-z-index: '';\n // lg:\n --lg-grid-column-start: '';\n --lg-grid-column-end: '';\n --lg-grid-row-start: '';\n --lg-grid-row-end: '';\n --lg-justify-self: '';\n --lg-align-self: '';\n --lg-z-index: '';\n // xl:\n --xl-grid-column-start: '';\n --xl-grid-column-end: '';\n --xl-grid-row-start: '';\n --xl-grid-row-end: '';\n --xl-justify-self: '';\n --xl-align-self: '';\n --xl-z-index: '';\n}\n// base:\n@include generate-q2-grid-area-styles(\n var(--grid-column-start),\n var(--grid-column-end),\n var(--grid-row-start),\n var(--grid-row-end),\n var(--justify-self),\n var(--align-self),\n var(--z-index)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n @include breakpoint($breakpoint) {\n @include generate-q2-grid-area-styles(\n var(--#{$breakpoint}-grid-column-start),\n var(--#{$breakpoint}-grid-column-end),\n var(--#{$breakpoint}-grid-row-start),\n var(--#{$breakpoint}-grid-row-end),\n var(--#{$breakpoint}-justify-self),\n var(--#{$breakpoint}-align-self),\n var(--#{$breakpoint}-z-index)\n );\n }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TQ2GridAreaColumnStartOptions = 'auto' | number;\nexport type TQ2GridAreaColumnSpanOptions = number;\nexport type TQ2GridAreaRowStartOptions = 'auto' | number;\nexport type TQ2GridAreaRowSpanOptions = number;\nexport type TQ2GridAreaJustifyOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaAlignOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaZIndexOptions = number;\n\n@Component({ tag: 'q2-grid-area', shadow: true, styleUrl: 'q2-grid-area.scss' })\nexport class Q2GridArea {\n // #region Public Property API\n\n /**\n * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n align: TQ2GridAreaAlignOptions = 'auto';\n\n /** Sets the column span amount of the grid area at the baseline viewport size.*/\n @Prop({ reflect: true })\n columnSpan: TQ2GridAreaColumnSpanOptions = 1;\n\n /** Sets the starting column of the grid area at the baseline viewport size.*/\n @Prop({ reflect: true })\n columnStart: TQ2GridAreaColumnStartOptions = 'auto';\n\n /**\n * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n justify: TQ2GridAreaJustifyOptions = 'auto';\n\n /**\n * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n lgAlign: TQ2GridAreaAlignOptions;\n\n /** Sets the column span amount of the grid area at the LG viewport size.*/\n @Prop({ reflect: true })\n lgColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n /**\n * Sets the starting column of the grid area at the LG viewport size.\n * When set to `auto`, the grid area will automatically start at the first available column.\n */\n @Prop({ reflect: true })\n lgColumnStart: TQ2GridAreaColumnStartOptions;\n\n /**\n * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n lgJustify: TQ2GridAreaJustifyOptions;\n\n /** Sets the row span amount of the grid area at the LG viewport size.*/\n @Prop({ reflect: true })\n lgRowSpan: TQ2GridAreaRowSpanOptions;\n\n /**\n * Sets the starting row of the grid area at the LG viewport size.\n * When set to `auto`, the grid area will automatically start at the first available row.\n */\n @Prop({ reflect: true })\n lgRowStart: TQ2GridAreaRowStartOptions;\n\n /** Sets the z-index of the grid area at the LG viewport size.*/\n @Prop({ reflect: true })\n lgZIndex: TQ2GridAreaZIndexOptions;\n\n /**\n * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n mdAlign: TQ2GridAreaAlignOptions;\n\n /** Sets the column span amount of the grid area at the MD viewport size.*/\n @Prop({ reflect: true })\n mdColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n /**\n * Sets the starting column of the grid area at the MD viewport size.\n * When set to `auto`, the grid area will automatically start at the first available column.\n */\n @Prop({ reflect: true })\n mdColumnStart: TQ2GridAreaColumnStartOptions;\n\n /**\n * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n mdJustify: TQ2GridAreaJustifyOptions;\n\n /** Sets the row span amount of the grid area at the MD viewport size.*/\n @Prop({ reflect: true })\n mdRowSpan: TQ2GridAreaRowSpanOptions;\n\n /**\n * Sets the starting row of the grid area at the MD viewport size.\n * When set to `auto`, the grid area will automatically start at the first available row.\n */\n @Prop({ reflect: true })\n mdRowStart: TQ2GridAreaRowStartOptions;\n\n /** Sets the z-index of the grid area at the MD viewport size.*/\n @Prop({ reflect: true })\n mdZIndex: TQ2GridAreaZIndexOptions;\n\n /** Sets the row span amount of the grid area at the baseline viewport size.*/\n @Prop({ reflect: true })\n rowSpan: TQ2GridAreaRowSpanOptions = 1;\n\n /**\n * Sets the starting row of the grid area at the baseline viewport size.\n * When set to `auto`, the grid area will automatically start at the first available row.\n */\n @Prop({ reflect: true })\n rowStart: TQ2GridAreaRowStartOptions = 'auto';\n\n /**\n * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n smAlign: TQ2GridAreaAlignOptions;\n\n /** Sets the column span amount of the grid area at the SM viewport size.*/\n @Prop({ reflect: true })\n smColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n /**\n * Sets the starting column of the grid area at the SM viewport size.\n * When set to `auto`, the grid area will automatically start at the first available column.\n */\n @Prop({ reflect: true })\n smColumnStart: TQ2GridAreaColumnStartOptions;\n\n /**\n * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n smJustify: TQ2GridAreaJustifyOptions;\n\n /** Sets the row span amount of the grid area at the SM viewport size.*/\n @Prop({ reflect: true })\n smRowSpan: TQ2GridAreaRowSpanOptions;\n\n /**\n * Sets the starting row of the grid area at the SM viewport size.\n * When set to `auto`, the grid area will automatically start at the first available row.\n */\n @Prop({ reflect: true })\n smRowStart: TQ2GridAreaRowStartOptions;\n\n /** Sets the z-index of the grid area at the SM viewport size.*/\n @Prop({ reflect: true })\n smZIndex: TQ2GridAreaZIndexOptions;\n\n /**\n * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n xlAlign: TQ2GridAreaAlignOptions;\n\n /** Sets the column span amount of the grid area at the XL viewport size.*/\n @Prop({ reflect: true })\n xlColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n /**\n * Sets the starting column of the grid area at the XL viewport size.\n * When set to `auto`, the grid area will automatically start at the first available column.\n */\n @Prop({ reflect: true })\n xlColumnStart: TQ2GridAreaColumnStartOptions;\n\n /**\n * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n xlJustify: TQ2GridAreaJustifyOptions;\n\n /** Sets the row span amount of the grid area at the XL viewport size.*/\n @Prop({ reflect: true })\n xlRowSpan: TQ2GridAreaRowSpanOptions;\n\n /**\n * Sets the starting row of the grid area at the XL viewport size.\n * When set to `auto`, the grid area will automatically start at the first available row.\n */\n @Prop({ reflect: true })\n xlRowStart: TQ2GridAreaRowStartOptions;\n\n /** Sets the z-index of the grid area at the XL viewport size.*/\n @Prop({ reflect: true })\n xlZIndex: TQ2GridAreaZIndexOptions;\n\n /**\n * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n xsAlign: TQ2GridAreaAlignOptions;\n\n /** Sets the column span amount of the grid area at the XS viewport size.*/\n @Prop({ reflect: true })\n xsColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n /**\n * Sets the starting column of the grid area at the XS viewport size.\n * When set to `auto`, the grid area will automatically start at the first available column.\n */\n @Prop({ reflect: true })\n xsColumnStart: TQ2GridAreaColumnStartOptions;\n\n /**\n * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n */\n @Prop({ reflect: true })\n xsJustify: TQ2GridAreaJustifyOptions;\n\n /** Sets the row span amount of the grid area at the XS viewport size.*/\n @Prop({ reflect: true })\n xsRowSpan: TQ2GridAreaRowSpanOptions;\n\n /**\n * Sets the starting row of the grid area at the XS viewport size.\n * When set to `auto`, the grid area will automatically start at the first available row.\n */\n @Prop({ reflect: true })\n xsRowStart: TQ2GridAreaRowStartOptions;\n\n /** Sets the z-index of the grid area at the XS viewport size.*/\n @Prop({ reflect: true })\n xsZIndex: TQ2GridAreaZIndexOptions;\n\n /** Sets the z-index of the grid area at the baseline viewport size.*/\n @Prop({ reflect: true })\n zIndex: TQ2GridAreaZIndexOptions = 0;\n\n // #endregion\n // #region Local Methods\n\n get computedLgZIndex() {\n return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;\n }\n\n get computedMdZIndex() {\n return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;\n }\n\n get computedSmZIndex() {\n return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;\n }\n\n get computedXlZIndex() {\n return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;\n }\n\n get computedXsZIndex() {\n return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const q2GridAreaStyles: { [key: string]: string } = {\n // base:\n '--grid-column-start': `${this.columnStart}`,\n '--grid-column-end': `span ${this.columnSpan}`,\n '--grid-row-start': `${this.rowStart}`,\n '--grid-row-end': `span ${this.rowSpan}`,\n '--justify-self': this.justify,\n '--align-self': this.align,\n '--z-index': `${this.zIndex}`,\n // xs:\n '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,\n '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,\n '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,\n '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,\n '--xs-justify-self': this.xsJustify || this.justify,\n '--xs-align-self': this.xsAlign || this.align,\n '--xs-z-index': `${this.computedXsZIndex}`,\n // sm:\n '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,\n '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,\n '--sm-align-self': this.smAlign || this.xsAlign || this.align,\n '--sm-z-index': `${this.computedSmZIndex}`,\n // md:\n '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n '--md-z-index': `${this.computedMdZIndex}`,\n // lg:\n '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n '--lg-z-index': `${this.computedLgZIndex}`,\n // xl:\n '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n '--xl-justify-self':\n this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n '--xl-align-self':\n this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n '--xl-z-index': `${this.computedXlZIndex}`,\n };\n\n return (\n <Host style={q2GridAreaStyles}>\n <slot />\n </Host>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -0,0 +1,109 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-e7e68b1e.js');
+const q2GridCss = ".q2-grid{--comp-grid-gap-none:var(--tct-grid-gap-none, var(--app-scale-0x, 0px));--comp-grid-gap-compact:var(--tct-grid-gap-compact, var(--app-scale-1x, 5px));--comp-grid-gap-normal:var(--tct-grid-gap-normal, var(--app-scale-3x, 15px));--comp-grid-gap-comfortable:var(--tct-grid-gap-comfortable, var(--app-scale-5x, 25px));--grid-template-columns:\"\";--grid-template-rows:\"\";--grid-gap:\"\";--justify-items:\"\";--align-items:\"\";--xs-grid-template-columns:\"\";--xs-grid-template-rows:\"\";--xs-grid-gap:\"\";--xs-justify-items:\"\";--xs-align-items:\"\";--sm-grid-template-columns:\"\";--sm-grid-template-rows:\"\";--sm-grid-gap:\"\";--sm-justify-items:\"\";--sm-align-items:\"\";--md-grid-template-columns:\"\";--md-grid-template-rows:\"\";--md-grid-gap:\"\";--md-justify-items:\"\";--md-align-items:\"\";--lg-grid-template-columns:\"\";--lg-grid-template-rows:\"\";--lg-grid-gap:\"\";--lg-justify-items:\"\";--lg-align-items:\"\";--xl-grid-template-columns:\"\";--xl-grid-template-rows:\"\";--xl-grid-gap:\"\";--xl-justify-items:\"\";--xl-align-items:\"\";display:grid;width:100%;height:100%;grid-auto-rows:auto;grid-auto-columns:1fr;grid-auto-flow:row;justify-content:center;align-content:center}.q2-grid{grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);gap:var(--grid-gap);justify-items:var(--justify-items);align-items:var(--align-items)}@media screen and (min-width: 480px){.q2-grid{grid-template-columns:var(--xs-grid-template-columns);grid-template-rows:var(--xs-grid-template-rows);gap:var(--xs-grid-gap);justify-items:var(--xs-justify-items);align-items:var(--xs-align-items)}}@media screen and (min-width: 768px){.q2-grid{grid-template-columns:var(--sm-grid-template-columns);grid-template-rows:var(--sm-grid-template-rows);gap:var(--sm-grid-gap);justify-items:var(--sm-justify-items);align-items:var(--sm-align-items)}}@media screen and (min-width: 992px){.q2-grid{grid-template-columns:var(--md-grid-template-columns);grid-template-rows:var(--md-grid-template-rows);gap:var(--md-grid-gap);justify-items:var(--md-justify-items);align-items:var(--md-align-items)}}@media screen and (min-width: 1200px){.q2-grid{grid-template-columns:var(--lg-grid-template-columns);grid-template-rows:var(--lg-grid-template-rows);gap:var(--lg-grid-gap);justify-items:var(--lg-justify-items);align-items:var(--lg-align-items)}}@media screen and (min-width: 1400px){.q2-grid{grid-template-columns:var(--xl-grid-template-columns);grid-template-rows:var(--xl-grid-template-rows);gap:var(--xl-grid-gap);justify-items:var(--xl-justify-items);align-items:var(--xl-align-items)}}";
+const Q2GridStyle0 = q2GridCss;
+const Q2Grid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.align = 'stretch';
+        this.columns = 12;
+        this.gap = 'normal';
+        this.justify = 'stretch';
+        this.lgAlign = undefined;
+        this.lgColumns = undefined;
+        this.lgGap = undefined;
+        this.lgJustify = undefined;
+        this.lgRows = undefined;
+        this.mdAlign = undefined;
+        this.mdColumns = undefined;
+        this.mdGap = undefined;
+        this.mdJustify = undefined;
+        this.mdRows = undefined;
+        this.rows = 'auto';
+        this.smAlign = undefined;
+        this.smColumns = undefined;
+        this.smGap = undefined;
+        this.smJustify = undefined;
+        this.smRows = undefined;
+        this.xlAlign = undefined;
+        this.xlColumns = undefined;
+        this.xlGap = undefined;
+        this.xlJustify = undefined;
+        this.xlRows = undefined;
+        this.xsAlign = undefined;
+        this.xsColumns = undefined;
+        this.xsGap = undefined;
+        this.xsJustify = undefined;
+        this.xsRows = undefined;
+    }
+    // #endregion
+    // #region Local Methods
+    get computedLgRows() {
+        return this.lgRows || this.computedMdRows;
+    }
+    get computedMdRows() {
+        return this.mdRows || this.computedSmRows;
+    }
+    get computedSmRows() {
+        return this.smRows || this.computedXsRows;
+    }
+    get computedXlRows() {
+        return this.xlRows || this.computedLgRows;
+    }
+    get computedXsRows() {
+        return this.xsRows || this.rows;
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const q2GridStyles = {
+            // base:
+            '--grid-template-columns': `repeat(${this.columns}, 1fr)`,
+            '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,
+            '--grid-gap': `var(--comp-grid-gap-${this.gap})`,
+            '--justify-items': this.justify,
+            '--align-items': this.align,
+            // xs:
+            '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,
+            '--xs-grid-template-rows': this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,
+            '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,
+            '--xs-justify-items': this.xsJustify || this.justify,
+            '--xs-align-items': this.xsAlign || this.align,
+            // sm:
+            '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--sm-grid-template-rows': this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,
+            '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,
+            '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,
+            '--sm-align-items': this.smAlign || this.xsAlign || this.align,
+            // md:
+            '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--md-grid-template-rows': this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,
+            '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            // lg:
+            '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--lg-grid-template-rows': this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,
+            '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            // xl:
+            '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--xl-grid-template-rows': this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,
+            '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--xl-justify-items': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--xl-align-items': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+        };
+        return (index.h(index.Fragment, { key: '8a0e08bfee936e317030c9624b5d170c8ea73a6c' }, index.h("div", { key: 'a9c5026ede0844709d97e4d94f51958572de10f4', style: q2GridStyles, class: "q2-grid" }, index.h("slot", { key: 'fe047e24638a63e6d1b542a6b7b0e93026337aec' }))));
+    }
+};
+Q2Grid.style = Q2GridStyle0;
+exports.q2_grid = Q2Grid;
+//# sourceMappingURL=q2-grid.cjs.entry.js.map

package/dist/cjs/q2-grid.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"q2-grid.entry.cjs.js","mappings":"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","names":["h","Fragment"],"sources":["src/components/q2-grid/q2-grid.scss?tag=q2-grid&encapsulation=shadow","src/components/q2-grid/q2-grid.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n.q2-grid {\n // computed:\n --comp-grid-gap-none: #{var-list(--tct-grid-gap-none, --app-scale-0x, 0px)};\n --comp-grid-gap-compact: #{var-list(--tct-grid-gap-compact, --app-scale-1x, 5px)};\n --comp-grid-gap-normal: #{var-list(--tct-grid-gap-normal, --app-scale-3x, 15px)};\n --comp-grid-gap-comfortable: #{var-list(--tct-grid-gap-comfortable, --app-scale-5x, 25px)};\n // base:\n --grid-template-columns: '';\n --grid-template-rows: '';\n --grid-gap: '';\n --justify-items: '';\n --align-items: '';\n // xs:\n --xs-grid-template-columns: '';\n --xs-grid-template-rows: '';\n --xs-grid-gap: '';\n --xs-justify-items: '';\n --xs-align-items: '';\n // sm:\n --sm-grid-template-columns: '';\n --sm-grid-template-rows: '';\n --sm-grid-gap: '';\n --sm-justify-items: '';\n --sm-align-items: '';\n // md:\n --md-grid-template-columns: '';\n --md-grid-template-rows: '';\n --md-grid-gap: '';\n --md-justify-items: '';\n --md-align-items: '';\n // lg:\n --lg-grid-template-columns: '';\n --lg-grid-template-rows: '';\n --lg-grid-gap: '';\n --lg-justify-items: '';\n --lg-align-items: '';\n // xl:\n --xl-grid-template-columns: '';\n --xl-grid-template-rows: '';\n --xl-grid-gap: '';\n --xl-justify-items: '';\n --xl-align-items: '';\n // q2-grid styles w/o prop configs:\n display: grid;\n width: 100%;\n height: 100%;\n grid-auto-rows: auto;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n justify-content: center;\n align-content: center;\n}\n// base:\n@include generate-q2-grid-styles(\n var(--grid-template-columns),\n var(--grid-template-rows),\n var(--grid-gap),\n var(--justify-items),\n var(--align-items)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n @include breakpoint($breakpoint) {\n @include generate-q2-grid-styles(\n var(--#{$breakpoint}-grid-template-columns),\n var(--#{$breakpoint}-grid-template-rows),\n var(--#{$breakpoint}-grid-gap),\n var(--#{$breakpoint}-justify-items),\n var(--#{$breakpoint}-align-items)\n );\n }\n}\n","import { Component, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' | number;\nexport type TQ2GridGapOptions = 'none' | 'compact' | 'normal' | 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAlignOptions = 'stretch' | 'start' | 'center' | 'end';\n\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n // #region Public Property API\n\n /**\n * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the baseline viewport size.\n */\n @Prop({ reflect: true })\n align: TQ2GridAlignOptions = 'stretch';\n\n /** Sets the amount of columns to render within the grid at the baseline viewport size.*/\n @Prop({ reflect: true })\n columns: TQ2GridColumnsOptions = 12;\n\n /**\n * Sets the gap size between rows and columns within the grid at the baseline viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n */\n @Prop({ reflect: true })\n gap: TQ2GridGapOptions = 'normal';\n\n /**\n * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the baseline viewport size.\n */\n @Prop({ reflect: true })\n justify: TQ2GridJustifyOptions = 'stretch';\n\n /**\n * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'LG' viewport size.\n */\n @Prop({ reflect: true })\n lgAlign: TQ2GridAlignOptions;\n\n /** Sets the amount of columns to render within the grid at the 'LG' viewport size.*/\n @Prop({ reflect: true })\n lgColumns: TQ2GridColumnsOptions;\n\n /**\n * Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n */\n @Prop({ reflect: true })\n lgGap: TQ2GridGapOptions;\n\n /**\n * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'LG' viewport size.\n */\n @Prop({ reflect: true })\n lgJustify: TQ2GridJustifyOptions;\n\n /**\n * Sets the amount of rows to render within the grid at the 'LG' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n lgRows: TQ2GridRowsOptions;\n\n /**\n * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n */\n @Prop({ reflect: true })\n mdAlign: TQ2GridAlignOptions;\n\n /** Sets the amount of columns to render within the grid at the 'MD' viewport size.*/\n @Prop({ reflect: true })\n mdColumns: TQ2GridColumnsOptions;\n\n /**\n * Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n */\n @Prop({ reflect: true })\n mdGap: TQ2GridGapOptions;\n\n /**\n * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n */\n @Prop({ reflect: true })\n mdJustify: TQ2GridJustifyOptions;\n\n /**\n * Sets the amount of rows to render within the grid at the 'MD' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n mdRows: TQ2GridRowsOptions;\n\n /**\n * Sets the amount of rows to render within the grid at the baseline viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n rows: TQ2GridRowsOptions = 'auto';\n\n /**\n * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n */\n @Prop({ reflect: true })\n smAlign: TQ2GridAlignOptions;\n\n /** Sets the amount of columns to render within the grid at the 'SM' viewport size.*/\n @Prop({ reflect: true })\n smColumns: TQ2GridColumnsOptions;\n\n /**\n * Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n */\n @Prop({ reflect: true })\n smGap: TQ2GridGapOptions;\n\n /**\n * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n */\n @Prop({ reflect: true })\n smJustify: TQ2GridJustifyOptions;\n\n /**\n * Sets the amount of rows to render within the grid at the 'SM' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n smRows: TQ2GridRowsOptions;\n\n /**\n * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'XL' viewport size.\n */\n @Prop({ reflect: true })\n xlAlign: TQ2GridAlignOptions;\n\n /** Sets the amount of columns to render within the grid at the 'XL' viewport size.*/\n @Prop({ reflect: true })\n xlColumns: TQ2GridColumnsOptions;\n\n /**\n * Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n */\n @Prop({ reflect: true })\n xlGap: TQ2GridGapOptions;\n\n /**\n * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'XL' viewport size.\n */\n @Prop({ reflect: true })\n xlJustify: TQ2GridJustifyOptions;\n\n /**\n * Sets the amount of rows to render within the grid at the 'XL' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n xlRows: TQ2GridRowsOptions;\n\n /**\n * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'XS' viewport size.\n */\n @Prop({ reflect: true })\n xsAlign: TQ2GridAlignOptions;\n\n /** Sets the amount of columns to render within the grid at the 'XS' viewport size.*/\n @Prop({ reflect: true })\n xsColumns: TQ2GridColumnsOptions;\n\n /**\n * Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n */\n @Prop({ reflect: true })\n xsGap: TQ2GridGapOptions;\n\n /**\n * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the 'XS' viewport size.\n */\n @Prop({ reflect: true })\n xsJustify: TQ2GridJustifyOptions;\n\n /**\n * Sets the amount of rows to render within the grid at the 'XS' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n xsRows: TQ2GridRowsOptions;\n\n // #endregion\n // #region Local Methods\n\n get computedLgRows() {\n return this.lgRows || this.computedMdRows;\n }\n\n get computedMdRows() {\n return this.mdRows || this.computedSmRows;\n }\n\n get computedSmRows() {\n return this.smRows || this.computedXsRows;\n }\n\n get computedXlRows() {\n return this.xlRows || this.computedLgRows;\n }\n\n get computedXsRows() {\n return this.xsRows || this.rows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const q2GridStyles: { [key: string]: string } = {\n // base:\n '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n '--grid-gap': `var(--comp-grid-gap-${this.gap})`,\n '--justify-items': this.justify,\n '--align-items': this.align,\n // xs:\n '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,\n '--xs-grid-template-rows':\n this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,\n '--xs-justify-items': this.xsJustify || this.justify,\n '--xs-align-items': this.xsAlign || this.align,\n // sm:\n '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n '--sm-grid-template-rows':\n this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,\n '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,\n '--sm-align-items': this.smAlign || this.xsAlign || this.align,\n // md:\n '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n '--md-grid-template-rows':\n this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,\n '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n // lg:\n '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n '--lg-grid-template-rows':\n this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,\n '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n // xl:\n '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n '--xl-grid-template-rows':\n this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,\n '--xl-justify-items':\n this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n '--xl-align-items':\n this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n };\n return (\n <Fragment>\n <div\n style={q2GridStyles}\n class=\"q2-grid\"\n >\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}