npm - q2-tecton-elements - Versions diffs - 1.55.0 → 1.55.2 - Mend

q2-tecton-elements 1.55.0 → 1.55.2

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

package/dist/bundle-report.json +10 -10
package/dist/cjs/q2-badge_7.cjs.entry.js +13 -5
package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
package/dist/cjs/q2-data-table.cjs.entry.js +1 -1
package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
package/dist/cjs/q2-file-picker.cjs.entry.js +1 -1
package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
package/dist/collection/components/q2-btn/q2-btn.css +56 -51
package/dist/collection/components/q2-btn/q2-btn.js +12 -4
package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
package/dist/collection/components/q2-data-table/q2-data-table.css +2 -1
package/dist/collection/components/q2-file-picker/q2-file-picker.css +1 -1
package/dist/components/q2-btn2.js +13 -5
package/dist/components/q2-btn2.js.map +1 -1
package/dist/components/q2-data-table.js +1 -1
package/dist/components/q2-data-table.js.map +1 -1
package/dist/components/q2-file-picker.js +1 -1
package/dist/components/q2-file-picker.js.map +1 -1
package/dist/esm/q2-badge_7.entry.js +13 -5
package/dist/esm/q2-badge_7.entry.js.map +1 -1
package/dist/esm/q2-data-table.entry.js +1 -1
package/dist/esm/q2-data-table.entry.js.map +1 -1
package/dist/esm/q2-file-picker.entry.js +1 -1
package/dist/esm/q2-file-picker.entry.js.map +1 -1
package/dist/q2-tecton-elements/q2-badge_7.entry.js +8 -7
package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
package/dist/q2-tecton-elements/q2-data-table.entry.js +1 -1
package/dist/q2-tecton-elements/q2-data-table.entry.js.map +1 -1
package/dist/q2-tecton-elements/q2-file-picker.entry.js +1 -1
package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
package/package.json +3 -3

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

@@ -2,7 +2,7 @@ import { r as t, c as e, h as a, F as o, g as r } from "./index-7a5365e2.js";
 import { m as l, l as n } from "./index-f2a66217.js";
-const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
+const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{--tct-checkbox-padding:0;--tct-checkbox-margin:0}";
 const d = c;

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2DataTableCss","Q2DataTableStyle0","Q2DataTable","this","checkSlots","hasExpandableRows","_b","_a","hostElement","querySelector","hasDropdowns","_d","_c","checkSlotCount","onClickRow","event","row","stopPropagation","click","emit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectMode","serializedRows","selectedRows","currentlySelectedRows","checked","detail","selectedRow","Object","assign","selected","filter","id","allRowsSelected","length","isIndeterminate","selectEvent","select","rows","allSelected","defaultPrevented","map","someRowsSelected","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","shouldAutoSort","sortable","serializedHeaders","serializedHeader","undefined","sortRows","expanded","toggleEvent","toggle","disconnectedCallback","mutationObserver","disconnect","resizeObserver","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","ResizeObserver","resizeIframe","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","disabled","clickRow","rowId","btn","shadowRoot","getCellContent","columnKey","slotContent","textContent","text","sortColumn","toggleRowExpansion","toggleRowSelect","chk","toggleSelectAllRows","selectable","title","toLowerCase","replace","mappedHeaders","defaultRow","cells","isAllSelected","serializedCells","entries","reduce","accum","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","value","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","find","hasRowData","selectableHandler","selectAllRows","numberOfColumns","sortedRows","a","b","aValue","bValue","render","caption","h","class","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","renderCellContent","cell","includes","valueAsInt","parseFloat","theme","status","size","valueAsString","label","loc","emptyIcon","emptyMessage","loading","colSpan","name","width","backgroundColor","style","hideClickable","onChange","indeterminate","headerClasses","push","join","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","Fragment","e","tabIndex","cellAlign","cellVerticalAlign","cellClasses","cellStyles","intent","ariaExpanded","ariaControls","hidden"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n --comp-select-column-width: #{var-list(\n --tct-data-table-select-column-width,\n --tct-table-select-column-width,\n --tct-checkbox-size,\n 20px\n )};\n --comp-dropdown-column-width: #{var-list(\n --tct-data-table-dropdown-column-width,\n --tct-table-dropdown-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n --comp-expandable-row-control-column-width: #{var-list(\n --tct-data-table-expandable-row-control-column-width,\n --tct-table-expandable-row-control-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n\n overflow: auto;\n @include tiny-scrollbar();\n\n :host([shadowed]:not([shadowed='false'])) & {\n box-shadow: var-list(\n --tct-data-table-shadow,\n --tct-table-shadow,\n --app-shadow-1,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n );\n }\n\n :host([density='compact']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-compact,\n --tct-table-cell-padding-compact,\n --app-scale-1x,\n 5px\n )};\n }\n\n :host([density='comfortable']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-comfortable,\n --tct-table-cell-padding-comfortable,\n --app-scale-5x,\n 25px\n )};\n }\n}\n\ntable {\n table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n border-collapse: collapse;\n border-spacing: 0;\n width: var-list(--tct-data-table-width, --tct-table-width);\n min-width: 100%;\n background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n}\n\ncol {\n &.select-column {\n width: var(--comp-select-column-width);\n }\n\n &.expandable-row-control-column {\n width: var(--comp-expandable-row-control-column-width);\n }\n\n &.dropdown-column {\n width: var(--comp-dropdown-column-width);\n }\n\n :host(:is([bordered='vertical'], [bordered='grid'])) & {\n border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n border-style: var-list(--tct-data-table-column-border-style, solid);\n border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n &:last-child {\n border: none;\n }\n }\n}\n\ntd,\nth {\n padding: var(--comp-cell-padding);\n text-align: start;\n vertical-align: middle;\n\n &.align-end {\n text-align: end;\n }\n &.align-center {\n text-align: center;\n }\n &.vertical-align-top {\n vertical-align: top;\n }\n &.vertical-align-bottom {\n vertical-align: bottom;\n }\n}\n\nth {\n .header-content {\n font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n }\n\n &.sorted {\n .header-content {\n font-weight: var-list(\n --tct-data-table-header-sorted-font-weight,\n --tct-table-header-sorted-font-weight,\n 600\n );\n }\n }\n\n .sorted-indicator {\n --comp-header-sortable-icon-size: #{var-list(\n --tct-data-table-header-sortable-icon-size,\n --tct-table-header-sortable-icon-size,\n --app-scale-3x,\n 15px\n )};\n --tct-icon-stroke-width: 2;\n\n width: var(--comp-header-sortable-icon-size);\n height: var(--comp-header-sortable-icon-size);\n\n &.direction-ASC {\n transform: rotate(180deg);\n }\n }\n\n q2-btn {\n .header-content {\n display: flex;\n align-items: center;\n gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n }\n }\n}\n\ntr {\n &.expandable,\n &.clickable {\n cursor: pointer;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n\n &.striped {\n &:nth-child(even) {\n background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n }\n &:nth-child(odd) {\n background: var-list(--tct-data-table-row-odd-background, transparent);\n }\n }\n\n &.expandable {\n &:hover {\n background: var-list(\n --tct-data-table-expandable-row-hover-background,\n --tct-table-expandable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n\n &.clickable {\n &:hover {\n background: var-list(\n --tct-data-table-clickable-row-hover-background,\n --tct-table-clickable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n\n &.selected {\n background: var-list(\n --tct-data-table-selected-row-background,\n --tct-table-selected-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n\n .toggle-expandable-row {\n transform: rotate(180deg);\n }\n }\n\n :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n tbody\n & {\n border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n }\n\n &.loading-row {\n background: var-list(\n --tct-data-table-loading-row-background,\n --tct-table-loading-row-background,\n --t-base,\n #ffffff\n );\n td {\n text-align: center;\n }\n\n q2-loading {\n font-size: 4em;\n }\n }\n\n &.empty-state {\n background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n td {\n text-align: center;\n }\n .empty-state-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: var(--app-scale-10x, 50px);\n padding-bottom: var(--app-scale-10x, 50px);\n gap: var(--app-scale-4x, 20px);\n --tct-icon-size: var(--app-scale-6x, 30px);\n }\n }\n\n &.expandable-row {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n}\n\ntd {\n &.clamped {\n div {\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: var(--comp-line-clamp-count, 1);\n -webkit-box-orient: vertical;\n }\n }\n\n &.expandable-row-control-column {\n --tct-btn-icon-hover-bg: transparent;\n padding: var-list(\n --tct-data-table-expandable-row-control-column-padding,\n --tct-table-expandable-row-control-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.dropdown-column {\n padding: var-list(\n --tct-data-table-dropdown-column-padding,\n --tct-table-dropdown-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.click-column:not(.sr) {\n padding: var-list(\n --tct-data-table-clickable-column-padding,\n --tct-table-clickable-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n}\n\ncaption {\n padding: var-list(--tct-data-table-caption-padding, --tct-table-caption-padding, --app-scale-2x, 10px);\n font-size: var-list(--tct-data-table-caption-font-size, --tct-table-caption-font-size, inherit);\n font-weight: var-list(--tct-data-table-caption-font-weight, --tct-table-caption-font-weight, 600);\n text-align: var-list(--tct-data-table-caption-text-align, --tct-table-caption-text-align, center);\n color: var-list(--tct-data-table-caption-color, --tct-table-caption-color, inherit);\n}\n\nq2-checkbox {\n padding: 0;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Event,\n Element,\n EventEmitter,\n Fragment,\n Listen,\n Method,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\n\nexport type Q2DataTableCellAlignOptions = 'start' \| 'center' \| 'end';\n\nexport type Q2DataTableCellType =\n \| {\n // defines the type of cell\n type?: 'text' \| 'number' \| 'icon' \| 'boolean' \| 'code';\n }\n \| {\n // when type='badge'\n type?: 'badge';\n badgeStatus?: HTMLQ2BadgeElement['status'];\n badgeTheme?: HTMLQ2BadgeElement['theme'];\n };\n\nexport type Q2DataTableHeader = {\n title: string;\n align?: Q2DataTableCellAlignOptions;\n // Will be autogenerated from the title if not provided\n // The key is used to grab the data from the row data\n key?: string;\n // Enables sorting for this column when true\n // Manual will prevent automatic sorting and updating of the sorting indicators in the header\n sortable?: boolean \| 'auto' \| 'manual';\n width?: string;\n // defines background for the column\n backgroundColor?: string;\n sorted?: 'ASC' \| 'DESC';\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Partial<Q2DataTableCellType>;\n\nexport type Q2DataTableCell = {\n value: string \| number \| boolean;\n align?: Q2DataTableCellAlignOptions;\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Q2DataTableCellType;\n\nexport type Q2DataTableBaseRow = {\n id: string \| number;\n selected?: boolean;\n expanded?: boolean;\n disabled?: boolean;\n};\n\nexport type Q2DataTableCells = Record<string, string \| number \| Q2DataTableCell>;\nexport type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;\n\nexport type Q2DataTableRow = Q2DataTableBaseRow & {\n cells: Q2DataTableCells;\n};\nexport type Q2DataTableSerializedRow = Q2DataTableBaseRow & {\n cells: Q2DataTableSerializedCells;\n};\n\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n allRowsSelected: boolean = false;\n\n @State()\n checkSlotCount: number = 0;\n\n @State()\n hasDropdowns: boolean = false;\n\n @State()\n hasExpandableRows: boolean = false;\n\n @State()\n hasRowData: boolean = false;\n\n @State()\n serializedHeaders: Q2DataTableHeader[] = [];\n\n @State()\n serializedRows: Q2DataTableSerializedRow[] = [];\n\n @State()\n someRowsSelected: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Adds borders between rows and/or columns in the table. /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean \| 'horizontal' \| 'vertical' \| 'grid';\n\n /* Provides a caption for the data table. /\n @Prop({ mutable: true })\n caption: string;\n\n /* Adds the ability to click a row and have the table emit an event with the selected row's data. /\n @Prop({ mutable: true, reflect: true })\n clickable: boolean;\n\n /* Determines the amount of padding for each of the cells in the table. /\n @Prop({ mutable: true, reflect: true })\n density: 'compact' \| 'normal' \| 'comfortable';\n\n /* Determines the `q2-icon` that will display when `rows` has no value. /\n @Prop({ reflect: true })\n emptyIcon: string = 'inbox';\n\n /* Determines the message that will display when `rows` has no value.\n * @localizable\n /\n @Prop({ reflect: true })\n emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n /\n Defines the headers of the table.\n \n Example:\n * @snippet\n * element.headers = [\n * {\n * title: 'Day of the Week',\n * key: 'day',\n * },\n * {\n * title: 'Sales',\n * key: 'sales',\n * align: 'end',\n * }\n * ]\n \n /\n @Prop({ mutable: true })\n headers: Q2DataTableHeader[];\n\n /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. /\n @Prop({ mutable: true, reflect: true })\n hideCaption: boolean;\n\n /\n Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n \n @info\n * Use of this property requires `clickable` to be set to `true`.\n /\n @Prop({ mutable: true })\n hideClickable: boolean;\n\n /* Displays a loading state on the table to indicate background activity. /\n @Prop({ mutable: true, reflect: true })\n loading: boolean;\n\n /\n Defines the rows of the table.\n \n Example:\n * @snippet\n * element.rows = [\n * {\n * id: 1,\n * cells: {\n * day: 'Monday',\n * sales: 93\n * }\n * },\n * {\n * id: 2,\n * cells: {\n * day: 'Tuesday',\n * sales: 127\n * }\n * },\n * {\n * id: 3,\n * cells: {\n * day: 'Wednesday',\n * sales: 121\n * }\n * ]\n /\n @Prop({ mutable: true })\n rows: Q2DataTableRow[];\n\n /* Adds a checkbox to each row of the table making it selectable. /\n @Prop({ mutable: true, reflect: true })\n selectable: boolean;\n\n /\n Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n * See the documentation on the `select` event for how to handle selections.\n \n @warning\n * Use of this property requires `selectable` to be set to `true`.\n /\n @Prop({ mutable: true })\n selectMode: 'multiple' \| 'single' = 'multiple';\n\n /* Adds a shadow to the table /\n @Prop({ mutable: true, reflect: true })\n shadowed: boolean;\n\n /* Enables alternating background colors for the table rows /\n @Prop({ reflect: true })\n striped: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a row is clicked.\n \n Requires the `clickable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default click behavior.\n /\n @Event()\n click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n /\n Emitted when a row is selected.\n \n Requires the `selectable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default selection behavior.\n /\n @Event()\n select: EventEmitter<{\n row: Q2DataTableSerializedRow;\n rows: Q2DataTableSerializedRow[];\n allSelected: boolean;\n }>;\n\n /\n Emitted when the select-all checkbox is toggled.\n \n Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n \n Call `event.preventDefault()` to prevent the default behavior.\n /\n @Event()\n selectAllRows: EventEmitter<{ checked: boolean }>;\n\n /\n Emitted when a column is sorted.\n \n Requires the `sortable` prop to be set to `true` on the column.\n \n Call `event.preventDefault()` to prevent the default sorting behavior.\n /\n @Event()\n sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' \| 'DESC' }>;\n\n /\n Emitted when an expandable row is toggled.\n \n Requires content in the `row-{id}-expandable-content` slot.\n \n Call `event.preventDefault()` to prevent the default toggling behavior.\n /\n @Event()\n toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = null;\n }\n }\n\n componentWillLoad() {\n this.headersHandler(this.headers);\n this.rowsHandler(this.rows);\n }\n\n componentDidLoad(): void {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => this.checkSlots());\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => resizeIframe());\n this.resizeObserver.observe(this.hostElement);\n }\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onClickListener(event: MouseEvent) {\n if (event instanceof PointerEvent) event.stopImmediatePropagation();\n }\n\n @Listen('selectAllRows')\n onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n event.stopPropagation();\n const { checked } = event.detail;\n const selectedRows = checked\n ? this.serializedRows.map(row => {\n if (row.disabled) {\n return row;\n } else {\n return {\n ...row,\n selected: checked,\n };\n }\n })\n : [];\n const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.disabled) return row;\n row.selected = checked;\n return row;\n });\n this.allRowsSelected = checked;\n this.someRowsSelected = false;\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to click a row that accepts a row ID that is will be clicked.\n \n @testOnly\n /\n @Method()\n async clickRow(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"clickable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method that returns the plain text value of a particular cell (including slot content).\n \n @testOnly\n /\n @Method()\n async getCellContent(rowId: number \| string, columnKey: string) {\n const slotContent = this.hostElement.querySelector(`[slot=row-${rowId}-cell-${columnKey}`)?.textContent;\n const text = this.hostElement.shadowRoot.querySelector(\n `slot[name=row-${rowId}-cell-${columnKey}]`\n )?.textContent;\n return slotContent \|\| text \|\| '';\n }\n\n /\n A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.\n \n @testOnly\n /\n @Method()\n async sortColumn(header: Q2DataTableHeader) {\n const btn = this.hostElement.shadowRoot.querySelector(`#header-${header.key} q2-btn[test-id=\"sort-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content\n \n @testOnly\n /\n @Method()\n async toggleRowExpansion(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"expandable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.\n \n @testOnly\n /\n @Method()\n async toggleRowSelect(rowId: number \| string) {\n const chk = this.hostElement.shadowRoot.querySelector(\n `#row-${rowId} q2-checkbox[test-id=\"select-row-control\"]`\n );\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n /\n A method to toggle select all button (checkbox) on left top corner.\n \n @testOnly\n */\n @Method()\n async toggleSelectAllRows() {\n if (!this.selectable) return;\n const chk = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id=\"select-all-rows-control\"]`);\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('headers')\n headersHandler(headers: Q2DataTableHeader[] = []) {\n this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n const { title } = header;\n let { key } = header;\n\n // If no key is provided, generate one from the title\n if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n return {\n key,\n ...header,\n };\n });\n }\n\n @Watch('rows')\n rowsHandler(rows: Q2DataTableRow[] = []) {\n const { serializedHeaders, mappedHeaders } = this;\n const defaultRow = {\n id: null,\n cells: {},\n selected: false,\n expanded: false,\n disabled: false,\n };\n\n // tracks if the select-all checkbox should be visually updated as the `rows` are built\n let isAllSelected = true;\n let isIndeterminate = false;\n\n const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {\n const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n (accum, [cellKey, cellData]) => {\n const header = mappedHeaders[cellKey] \|\| ({} as Q2DataTableHeader);\n const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n const isBadge = 'type' in header && header.type === 'badge';\n const defaultCell: Q2DataTableCell = {\n value: '',\n ariaLabel: undefined,\n type,\n align,\n lineClamp,\n verticalAlign,\n badgeStatus: isBadge ? header.badgeStatus : undefined,\n badgeTheme: isBadge ? header.badgeTheme : undefined,\n };\n\n const result: Q2DataTableCell =\n typeof cellData === 'object'\n ? { ...defaultCell, ...cellData }\n : { ...defaultCell, value: cellData };\n\n accum[cellKey] = result;\n return accum;\n },\n {}\n );\n\n if (isAllSelected && !selected) isAllSelected = false;\n if (!isAllSelected && selected) isIndeterminate = true;\n return {\n ...defaultRow,\n id,\n selected: !!selected,\n expanded: !!expanded,\n disabled: !!disabled,\n cells: serializedCells,\n };\n });\n\n const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';\n\n this.hasRowData = !!rows.length;\n this.allRowsSelected = this.hasRowData && isAllSelected;\n this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n this.checkSlots();\n }\n\n @Watch('selectable')\n selectableHandler() {\n if (this.selectable === false) {\n this.selectAllRows.emit({ checked: false });\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get mappedHeaders() {\n return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n accum[header.key] = header;\n return accum;\n }, {});\n }\n\n get numberOfColumns() {\n return (\n (this.serializedHeaders?.length ?? 0) +\n (this.selectable ? 1 : 0) +\n (this.clickable ? 1 : 0) +\n (this.hasExpandableRows ? 1 : 0) +\n (this.hasDropdowns ? 1 : 0)\n );\n }\n\n get selectedRow() {\n return this.selectedRows.find(({ selected }) => !!selected);\n }\n\n get selectedRows() {\n return this.serializedRows.filter(({ selected }) => selected);\n }\n\n checkSlots = () => {\n this.hasExpandableRows = !!(this.hostElement?.querySelector(`[slot$=\"-expandable-content\"]`) ?? false);\n this.hasDropdowns = !!(this.hostElement?.querySelector(`[slot$=\"-dropdown\"]`) ?? false);\n\n // The booleans above may not change, even if the slot has content\n // So we increment this property to force a re-render and ensure proper rendering\n this.checkSlotCount += 1;\n };\n\n onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n this.click.emit({ row });\n };\n\n onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n if (this.clickable) {\n this.onClickRow(event, row);\n } else if (this.hasExpandableRows) {\n this.onToggleRow(event, row);\n }\n };\n\n onControlContainerClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;\n const { checked } = event.detail;\n\n const selectedRow = { ...row, selected: checked };\n let selectedRows;\n if (selectMode === 'single') {\n selectedRows = checked ? [selectedRow] : [];\n } else {\n selectedRows = checked\n ? [...currentlySelectedRows, selectedRow]\n : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n }\n\n const allRowsSelected = selectedRows.length === serializedRows.length;\n const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n this.allRowsSelected = allRowsSelected;\n this.someRowsSelected = isIndeterminate;\n };\n\n onSort = (header: Q2DataTableHeader) => {\n const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n const sortKey = header.key;\n const sortEvent = this.sort.emit({ header, direction });\n if (sortEvent.defaultPrevented) return;\n\n const shouldAutoSort = header.sortable !== 'manual';\n if (!shouldAutoSort) return;\n\n this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n const sorted = sortKey === serializedHeader.key ? direction : undefined;\n return { ...serializedHeader, sorted };\n });\n\n this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n };\n\n onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const selectedRow = { ...row, expanded: !row.expanded };\n const toggleEvent = this.toggle.emit({ row: selectedRow });\n if (toggleEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.id === selectedRow.id) return selectedRow;\n else return { ...row };\n });\n };\n\n sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n const { key, sorted } = header;\n const direction = sorted \|\| 'ASC';\n\n const sortedRows = [...rows].sort((a, b) => {\n const aValue = a.cells[key].value;\n const bValue = b.cells[key].value;\n\n if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n return 0;\n });\n\n return sortedRows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { caption } = this;\n return (\n <div class=\"container\">\n <table>\n {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n {this.renderTableColGroup()}\n {this.renderTableHeader()}\n {this.renderEmptyState()}\n {this.renderTableRows()}\n </table>\n </div>\n );\n }\n\n renderCellContent(cell: Q2DataTableCell) {\n if (!cell) return;\n\n const { type, ariaLabel, value } = cell;\n\n if ([undefined, null].includes(value)) return;\n\n switch (type) {\n case 'badge':\n let valueAsInt;\n switch (typeof value) {\n case 'string':\n valueAsInt = parseFloat(value);\n break;\n\n case 'boolean':\n valueAsInt = value ? 1 : 0;\n break;\n\n default:\n valueAsInt = value;\n break;\n }\n\n return (\n <q2-badge\n aria-label={ariaLabel}\n value={valueAsInt}\n theme={cell.badgeTheme}\n status={cell.badgeStatus}\n size=\"large\"\n ></q2-badge>\n );\n\n case 'icon':\n const valueAsString = typeof value === 'string' ? value : `${value}`;\n return (\n <q2-icon\n label={ariaLabel}\n type={valueAsString}\n ></q2-icon>\n );\n\n case 'boolean':\n return !!value ? (\n <q2-icon\n label={loc('tecton.element.dataTable.booleanTrue')}\n type=\"checkmark\"\n ></q2-icon>\n ) : (\n <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n );\n\n case 'code':\n return <code aria-label={ariaLabel}>{value}</code>;\n\n default:\n return <div aria-label={ariaLabel}>{value}</div>;\n }\n }\n\n renderEmptyState() {\n const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n if (hasRowData \|\| loading) return null;\n\n return (\n <tbody>\n <tr class=\"empty-state\">\n <td colSpan={numberOfColumns}>\n <slot name=\"empty-table\">\n <div class=\"empty-state-content\">\n <q2-icon type={emptyIcon}></q2-icon>\n <p>{loc(emptyMessage)}</p>\n </div>\n </slot>\n </td>\n </tr>\n </tbody>\n );\n }\n\n renderTableColGroup() {\n const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;\n\n if (!headers.length) return null;\n\n return (\n <colgroup>\n {selectable && <col class=\"select-column\" />}\n {headers.map(({ width, backgroundColor }) => (\n <col style={{ width, backgroundColor }} />\n ))}\n {clickable && <col class=\"click-column\" />}\n {hasExpandableRows && <col class=\"expandable-row-control-column\" />}\n {hasDropdowns && <col class=\"dropdown-column\" />}\n </colgroup>\n );\n }\n\n renderTableHeader() {\n const {\n serializedHeaders: headers,\n selectable,\n clickable,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n allRowsSelected,\n someRowsSelected,\n hasRowData,\n loading,\n } = this;\n\n if (!headers.length) return null;\n\n return (\n <thead>\n <tr>\n {selectable && (\n <th>\n {selectMode === 'multiple' && (\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectAllRows')}\n hide-label\n onChange={() => this.selectAllRows.emit({ checked: !allRowsSelected })}\n checked={hasRowData && allRowsSelected && !someRowsSelected}\n indeterminate={hasRowData && someRowsSelected && !allRowsSelected}\n disabled={loading \|\| !hasRowData}\n test-id=\"select-all-rows-control\"\n ></q2-checkbox>\n )}\n </th>\n )}\n {headers.map(header => {\n const { align, sorted, verticalAlign } = header;\n const headerClasses = [];\n if (align) headerClasses.push(`align-${align}`);\n if (verticalAlign) headerClasses.push(`vertical-align-${verticalAlign}`);\n if (!!sorted) headerClasses.push('sorted');\n return (\n <th\n class={headerClasses.join(' ')}\n id={`header-${header.key}`}\n >\n {header.sortable ? (\n <q2-btn\n onClick={() => this.onSort(header)}\n test-id=\"sort-control\"\n disabled={this.loading}\n >\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n\n {!!sorted ? (\n <q2-icon\n class={`sorted-indicator direction-${sorted}`}\n type=\"arrow-down\"\n label={\n sorted === 'ASC'\n ? loc('tecton.element.dataTable.sortedAscending')\n : loc('tecton.element.dataTable.sortedDescending')\n }\n test-id=\"sorted-indicator\"\n ></q2-icon>\n ) : (\n <q2-icon\n class={`sorted-indicator`}\n type=\"sort\"\n label={loc('tecton.element.dataTable.clickToSort')}\n test-id=\"sorted-indicator\"\n ></q2-icon>\n )}\n </div>\n </q2-btn>\n ) : (\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n </div>\n )}\n </th>\n );\n })}\n {clickable && (\n <th\n id=\"click\"\n class={hideClickable ? 'sr' : undefined}\n >\n <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n </th>\n )}\n {hasExpandableRows && (\n <th id=\"toggle\">\n <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n </th>\n )}\n {hasDropdowns && (\n <th>\n <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n </th>\n )}\n </tr>\n </thead>\n );\n }\n\n renderTableRows() {\n const {\n serializedHeaders: headers,\n serializedRows: rows,\n selectable,\n clickable,\n striped,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n numberOfColumns,\n loading,\n } = this;\n\n if (loading) {\n return (\n <tbody>\n <tr class=\"loading-row\">\n <td colSpan={numberOfColumns}>\n <q2-loading inline></q2-loading>\n </td>\n </tr>\n </tbody>\n );\n }\n\n let isSelectDisabled = false;\n let selectedRow;\n if (selectMode === 'single') {\n selectedRow = this.selectedRow;\n isSelectDisabled = !!selectedRow;\n }\n const clickableClasses = [];\n if (clickable) clickableClasses.push('click-column');\n if (hideClickable) clickableClasses.push('sr');\n const clickableClassString = clickableClasses.join(' ');\n\n return (\n <tbody>\n {rows.map(row => {\n const cellSlotPrefix = `row-${row.id}-cell`;\n const expandableRowName = `row-${row.id}-expandable-content`;\n const dropdownCellName = `row-${row.id}-dropdown`;\n const rowHasExpandableSlot =\n hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n const rowHasDropdownSlot =\n hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n const rowClasses = [];\n if (rowHasExpandableSlot) rowClasses.push('expandable');\n if (clickable) rowClasses.push('clickable');\n if (striped) rowClasses.push('striped');\n if (row.expanded) rowClasses.push('expanded');\n if (row.selected) rowClasses.push('selected');\n const rowIsClickable = clickable \|\| rowHasExpandableSlot;\n\n return (\n <Fragment>\n <tr\n id={`row-${row.id}`}\n class={rowClasses.join(' ')}\n onClick={rowIsClickable && (e => this.onClickTableRow(e, row))}\n tabIndex={rowIsClickable ? -1 : undefined}\n >\n {selectable && (\n <td\n class=\"select-column\"\n onClick={this.onControlContainerClick}\n >\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectRow')}\n hide-label\n checked={row.selected}\n disabled={(isSelectDisabled && row !== selectedRow) \|\| row.disabled}\n onChange={e => this.onSelectRow(e, row)}\n test-id=\"select-row-control\"\n ></q2-checkbox>\n </td>\n )}\n {headers.map(({ key }) => {\n const cell = row.cells[key];\n const lineClamp = cell?.lineClamp;\n const cellAlign = cell?.align;\n const cellVerticalAlign = cell?.verticalAlign;\n const cellClasses = [];\n if (cellAlign) cellClasses.push(`align-${cellAlign}`);\n if (cellVerticalAlign) cellClasses.push(`vertical-align-${cellVerticalAlign}`);\n if (lineClamp) cellClasses.push('clamped');\n const cellStyles = lineClamp\n ? { '--comp-line-clamp-count': `${lineClamp}` }\n : undefined;\n\n return (\n <td\n class={cellClasses.join(' ')}\n style={cellStyles}\n >\n <slot name={`${cellSlotPrefix}-${key}`}>\n {this.renderCellContent(cell)}\n </slot>\n </td>\n );\n })}\n {clickable && (\n <td class={clickableClassString}>\n <q2-btn\n intent=\"neutral\"\n size=\"small\"\n onClick={e => this.onClickRow(e, row)}\n test-id=\"clickable-row-control\"\n >\n {loc('tecton.element.dataTable.clickRow')}\n </q2-btn>\n </td>\n )}\n {hasExpandableRows && (\n <td\n class=\"expandable-row-control-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasExpandableSlot && (\n <q2-btn\n onClick={e => this.onToggleRow(e, row)}\n ariaExpanded={`${row.expanded}`}\n ariaControls={expandableRowName}\n ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n test-id=\"expandable-row-control\"\n >\n <q2-icon\n type=\"chevron-down\"\n class=\"toggle-expandable-row\"\n ></q2-icon>\n </q2-btn>\n )}\n </td>\n )}\n {hasDropdowns && (\n <td\n class=\"dropdown-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n </td>\n )}\n </tr>\n {rowHasExpandableSlot && (\n <tr\n id={expandableRowName}\n class=\"expandable-row\"\n hidden={!row.expanded}\n aria-hidden={!row.expanded}\n >\n <td\n colSpan={numberOfColumns}\n headers=\"toggle\"\n >\n <div class=\"expandable-content\">\n <slot name={expandableRowName}></slot>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n );\n })}\n </tbody>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["q2DataTableCss","Q2DataTableStyle0","Q2DataTable","this","checkSlots","hasExpandableRows","_b","_a","hostElement","querySelector","hasDropdowns","_d","_c","checkSlotCount","onClickRow","event","row","stopPropagation","click","emit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectMode","serializedRows","selectedRows","currentlySelectedRows","checked","detail","selectedRow","Object","assign","selected","filter","id","allRowsSelected","length","isIndeterminate","selectEvent","select","rows","allSelected","defaultPrevented","map","someRowsSelected","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","shouldAutoSort","sortable","serializedHeaders","serializedHeader","undefined","sortRows","expanded","toggleEvent","toggle","disconnectedCallback","mutationObserver","disconnect","resizeObserver","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","ResizeObserver","resizeIframe","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","disabled","clickRow","rowId","btn","shadowRoot","getCellContent","columnKey","slotContent","textContent","text","sortColumn","toggleRowExpansion","toggleRowSelect","chk","toggleSelectAllRows","selectable","title","toLowerCase","replace","mappedHeaders","defaultRow","cells","isAllSelected","serializedCells","entries","reduce","accum","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","value","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","find","hasRowData","selectableHandler","selectAllRows","numberOfColumns","sortedRows","a","b","aValue","bValue","render","caption","h","class","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","renderCellContent","cell","includes","valueAsInt","parseFloat","theme","status","size","valueAsString","label","loc","emptyIcon","emptyMessage","loading","colSpan","name","width","backgroundColor","style","hideClickable","onChange","indeterminate","headerClasses","push","join","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","Fragment","e","tabIndex","cellAlign","cellVerticalAlign","cellClasses","cellStyles","intent","ariaExpanded","ariaControls","hidden"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n --comp-select-column-width: #{var-list(\n --tct-data-table-select-column-width,\n --tct-table-select-column-width,\n --tct-checkbox-size,\n 20px\n )};\n --comp-dropdown-column-width: #{var-list(\n --tct-data-table-dropdown-column-width,\n --tct-table-dropdown-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n --comp-expandable-row-control-column-width: #{var-list(\n --tct-data-table-expandable-row-control-column-width,\n --tct-table-expandable-row-control-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n\n overflow: auto;\n @include tiny-scrollbar();\n\n :host([shadowed]:not([shadowed='false'])) & {\n box-shadow: var-list(\n --tct-data-table-shadow,\n --tct-table-shadow,\n --app-shadow-1,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n );\n }\n\n :host([density='compact']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-compact,\n --tct-table-cell-padding-compact,\n --app-scale-1x,\n 5px\n )};\n }\n\n :host([density='comfortable']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-comfortable,\n --tct-table-cell-padding-comfortable,\n --app-scale-5x,\n 25px\n )};\n }\n}\n\ntable {\n table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n border-collapse: collapse;\n border-spacing: 0;\n width: var-list(--tct-data-table-width, --tct-table-width);\n min-width: 100%;\n background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n}\n\ncol {\n &.select-column {\n width: var(--comp-select-column-width);\n }\n\n &.expandable-row-control-column {\n width: var(--comp-expandable-row-control-column-width);\n }\n\n &.dropdown-column {\n width: var(--comp-dropdown-column-width);\n }\n\n :host(:is([bordered='vertical'], [bordered='grid'])) & {\n border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n border-style: var-list(--tct-data-table-column-border-style, solid);\n border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n &:last-child {\n border: none;\n }\n }\n}\n\ntd,\nth {\n padding: var(--comp-cell-padding);\n text-align: start;\n vertical-align: middle;\n\n &.align-end {\n text-align: end;\n }\n &.align-center {\n text-align: center;\n }\n &.vertical-align-top {\n vertical-align: top;\n }\n &.vertical-align-bottom {\n vertical-align: bottom;\n }\n}\n\nth {\n .header-content {\n font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n }\n\n &.sorted {\n .header-content {\n font-weight: var-list(\n --tct-data-table-header-sorted-font-weight,\n --tct-table-header-sorted-font-weight,\n 600\n );\n }\n }\n\n .sorted-indicator {\n --comp-header-sortable-icon-size: #{var-list(\n --tct-data-table-header-sortable-icon-size,\n --tct-table-header-sortable-icon-size,\n --app-scale-3x,\n 15px\n )};\n --tct-icon-stroke-width: 2;\n\n width: var(--comp-header-sortable-icon-size);\n height: var(--comp-header-sortable-icon-size);\n\n &.direction-ASC {\n transform: rotate(180deg);\n }\n }\n\n q2-btn {\n .header-content {\n display: flex;\n align-items: center;\n gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n }\n }\n}\n\ntr {\n &.expandable,\n &.clickable {\n cursor: pointer;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n\n &.striped {\n &:nth-child(even) {\n background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n }\n &:nth-child(odd) {\n background: var-list(--tct-data-table-row-odd-background, transparent);\n }\n }\n\n &.expandable {\n &:hover {\n background: var-list(\n --tct-data-table-expandable-row-hover-background,\n --tct-table-expandable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n\n &.clickable {\n &:hover {\n background: var-list(\n --tct-data-table-clickable-row-hover-background,\n --tct-table-clickable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n\n &.selected {\n background: var-list(\n --tct-data-table-selected-row-background,\n --tct-table-selected-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n\n .toggle-expandable-row {\n transform: rotate(180deg);\n }\n }\n\n :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n tbody\n & {\n border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n }\n\n &.loading-row {\n background: var-list(\n --tct-data-table-loading-row-background,\n --tct-table-loading-row-background,\n --t-base,\n #ffffff\n );\n td {\n text-align: center;\n }\n\n q2-loading {\n font-size: 4em;\n }\n }\n\n &.empty-state {\n background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n td {\n text-align: center;\n }\n .empty-state-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: var(--app-scale-10x, 50px);\n padding-bottom: var(--app-scale-10x, 50px);\n gap: var(--app-scale-4x, 20px);\n --tct-icon-size: var(--app-scale-6x, 30px);\n }\n }\n\n &.expandable-row {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n}\n\ntd {\n &.clamped {\n div {\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: var(--comp-line-clamp-count, 1);\n -webkit-box-orient: vertical;\n }\n }\n\n &.expandable-row-control-column {\n --tct-btn-icon-hover-bg: transparent;\n padding: var-list(\n --tct-data-table-expandable-row-control-column-padding,\n --tct-table-expandable-row-control-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.dropdown-column {\n padding: var-list(\n --tct-data-table-dropdown-column-padding,\n --tct-table-dropdown-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.click-column:not(.sr) {\n padding: var-list(\n --tct-data-table-clickable-column-padding,\n --tct-table-clickable-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n}\n\ncaption {\n padding: var-list(--tct-data-table-caption-padding, --tct-table-caption-padding, --app-scale-2x, 10px);\n font-size: var-list(--tct-data-table-caption-font-size, --tct-table-caption-font-size, inherit);\n font-weight: var-list(--tct-data-table-caption-font-weight, --tct-table-caption-font-weight, 600);\n text-align: var-list(--tct-data-table-caption-text-align, --tct-table-caption-text-align, center);\n color: var-list(--tct-data-table-caption-color, --tct-table-caption-color, inherit);\n}\n\nq2-checkbox {\n --tct-checkbox-padding: 0;\n --tct-checkbox-margin: 0;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Event,\n Element,\n EventEmitter,\n Fragment,\n Listen,\n Method,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\n\nexport type Q2DataTableCellAlignOptions = 'start' \| 'center' \| 'end';\n\nexport type Q2DataTableCellType =\n \| {\n // defines the type of cell\n type?: 'text' \| 'number' \| 'icon' \| 'boolean' \| 'code';\n }\n \| {\n // when type='badge'\n type?: 'badge';\n badgeStatus?: HTMLQ2BadgeElement['status'];\n badgeTheme?: HTMLQ2BadgeElement['theme'];\n };\n\nexport type Q2DataTableHeader = {\n title: string;\n align?: Q2DataTableCellAlignOptions;\n // Will be autogenerated from the title if not provided\n // The key is used to grab the data from the row data\n key?: string;\n // Enables sorting for this column when true\n // Manual will prevent automatic sorting and updating of the sorting indicators in the header\n sortable?: boolean \| 'auto' \| 'manual';\n width?: string;\n // defines background for the column\n backgroundColor?: string;\n sorted?: 'ASC' \| 'DESC';\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Partial<Q2DataTableCellType>;\n\nexport type Q2DataTableCell = {\n value: string \| number \| boolean;\n align?: Q2DataTableCellAlignOptions;\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Q2DataTableCellType;\n\nexport type Q2DataTableBaseRow = {\n id: string \| number;\n selected?: boolean;\n expanded?: boolean;\n disabled?: boolean;\n};\n\nexport type Q2DataTableCells = Record<string, string \| number \| Q2DataTableCell>;\nexport type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;\n\nexport type Q2DataTableRow = Q2DataTableBaseRow & {\n cells: Q2DataTableCells;\n};\nexport type Q2DataTableSerializedRow = Q2DataTableBaseRow & {\n cells: Q2DataTableSerializedCells;\n};\n\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n allRowsSelected: boolean = false;\n\n @State()\n checkSlotCount: number = 0;\n\n @State()\n hasDropdowns: boolean = false;\n\n @State()\n hasExpandableRows: boolean = false;\n\n @State()\n hasRowData: boolean = false;\n\n @State()\n serializedHeaders: Q2DataTableHeader[] = [];\n\n @State()\n serializedRows: Q2DataTableSerializedRow[] = [];\n\n @State()\n someRowsSelected: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Adds borders between rows and/or columns in the table. /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean \| 'horizontal' \| 'vertical' \| 'grid';\n\n /* Provides a caption for the data table. /\n @Prop({ mutable: true })\n caption: string;\n\n /* Adds the ability to click a row and have the table emit an event with the selected row's data. /\n @Prop({ mutable: true, reflect: true })\n clickable: boolean;\n\n /* Determines the amount of padding for each of the cells in the table. /\n @Prop({ mutable: true, reflect: true })\n density: 'compact' \| 'normal' \| 'comfortable';\n\n /* Determines the `q2-icon` that will display when `rows` has no value. /\n @Prop({ reflect: true })\n emptyIcon: string = 'inbox';\n\n /* Determines the message that will display when `rows` has no value.\n * @localizable\n /\n @Prop({ reflect: true })\n emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n /\n Defines the headers of the table.\n \n Example:\n * @snippet\n * element.headers = [\n * {\n * title: 'Day of the Week',\n * key: 'day',\n * },\n * {\n * title: 'Sales',\n * key: 'sales',\n * align: 'end',\n * }\n * ]\n \n /\n @Prop({ mutable: true })\n headers: Q2DataTableHeader[];\n\n /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. /\n @Prop({ mutable: true, reflect: true })\n hideCaption: boolean;\n\n /\n Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n \n @info\n * Use of this property requires `clickable` to be set to `true`.\n /\n @Prop({ mutable: true })\n hideClickable: boolean;\n\n /* Displays a loading state on the table to indicate background activity. /\n @Prop({ mutable: true, reflect: true })\n loading: boolean;\n\n /\n Defines the rows of the table.\n \n Example:\n * @snippet\n * element.rows = [\n * {\n * id: 1,\n * cells: {\n * day: 'Monday',\n * sales: 93\n * }\n * },\n * {\n * id: 2,\n * cells: {\n * day: 'Tuesday',\n * sales: 127\n * }\n * },\n * {\n * id: 3,\n * cells: {\n * day: 'Wednesday',\n * sales: 121\n * }\n * ]\n /\n @Prop({ mutable: true })\n rows: Q2DataTableRow[];\n\n /* Adds a checkbox to each row of the table making it selectable. /\n @Prop({ mutable: true, reflect: true })\n selectable: boolean;\n\n /\n Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n * See the documentation on the `select` event for how to handle selections.\n \n @warning\n * Use of this property requires `selectable` to be set to `true`.\n /\n @Prop({ mutable: true })\n selectMode: 'multiple' \| 'single' = 'multiple';\n\n /* Adds a shadow to the table /\n @Prop({ mutable: true, reflect: true })\n shadowed: boolean;\n\n /* Enables alternating background colors for the table rows /\n @Prop({ reflect: true })\n striped: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a row is clicked.\n \n Requires the `clickable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default click behavior.\n /\n @Event()\n click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n /\n Emitted when a row is selected.\n \n Requires the `selectable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default selection behavior.\n /\n @Event()\n select: EventEmitter<{\n row: Q2DataTableSerializedRow;\n rows: Q2DataTableSerializedRow[];\n allSelected: boolean;\n }>;\n\n /\n Emitted when the select-all checkbox is toggled.\n \n Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n \n Call `event.preventDefault()` to prevent the default behavior.\n /\n @Event()\n selectAllRows: EventEmitter<{ checked: boolean }>;\n\n /\n Emitted when a column is sorted.\n \n Requires the `sortable` prop to be set to `true` on the column.\n \n Call `event.preventDefault()` to prevent the default sorting behavior.\n /\n @Event()\n sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' \| 'DESC' }>;\n\n /\n Emitted when an expandable row is toggled.\n \n Requires content in the `row-{id}-expandable-content` slot.\n \n Call `event.preventDefault()` to prevent the default toggling behavior.\n /\n @Event()\n toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = null;\n }\n }\n\n componentWillLoad() {\n this.headersHandler(this.headers);\n this.rowsHandler(this.rows);\n }\n\n componentDidLoad(): void {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => this.checkSlots());\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => resizeIframe());\n this.resizeObserver.observe(this.hostElement);\n }\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onClickListener(event: MouseEvent) {\n if (event instanceof PointerEvent) event.stopImmediatePropagation();\n }\n\n @Listen('selectAllRows')\n onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n event.stopPropagation();\n const { checked } = event.detail;\n const selectedRows = checked\n ? this.serializedRows.map(row => {\n if (row.disabled) {\n return row;\n } else {\n return {\n ...row,\n selected: checked,\n };\n }\n })\n : [];\n const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.disabled) return row;\n row.selected = checked;\n return row;\n });\n this.allRowsSelected = checked;\n this.someRowsSelected = false;\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to click a row that accepts a row ID that is will be clicked.\n \n @testOnly\n /\n @Method()\n async clickRow(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"clickable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method that returns the plain text value of a particular cell (including slot content).\n \n @testOnly\n /\n @Method()\n async getCellContent(rowId: number \| string, columnKey: string) {\n const slotContent = this.hostElement.querySelector(`[slot=row-${rowId}-cell-${columnKey}`)?.textContent;\n const text = this.hostElement.shadowRoot.querySelector(\n `slot[name=row-${rowId}-cell-${columnKey}]`\n )?.textContent;\n return slotContent \|\| text \|\| '';\n }\n\n /\n A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.\n \n @testOnly\n /\n @Method()\n async sortColumn(header: Q2DataTableHeader) {\n const btn = this.hostElement.shadowRoot.querySelector(`#header-${header.key} q2-btn[test-id=\"sort-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content\n \n @testOnly\n /\n @Method()\n async toggleRowExpansion(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"expandable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.\n \n @testOnly\n /\n @Method()\n async toggleRowSelect(rowId: number \| string) {\n const chk = this.hostElement.shadowRoot.querySelector(\n `#row-${rowId} q2-checkbox[test-id=\"select-row-control\"]`\n );\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n /\n A method to toggle select all button (checkbox) on left top corner.\n \n @testOnly\n */\n @Method()\n async toggleSelectAllRows() {\n if (!this.selectable) return;\n const chk = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id=\"select-all-rows-control\"]`);\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('headers')\n headersHandler(headers: Q2DataTableHeader[] = []) {\n this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n const { title } = header;\n let { key } = header;\n\n // If no key is provided, generate one from the title\n if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n return {\n key,\n ...header,\n };\n });\n }\n\n @Watch('rows')\n rowsHandler(rows: Q2DataTableRow[] = []) {\n const { serializedHeaders, mappedHeaders } = this;\n const defaultRow = {\n id: null,\n cells: {},\n selected: false,\n expanded: false,\n disabled: false,\n };\n\n // tracks if the select-all checkbox should be visually updated as the `rows` are built\n let isAllSelected = true;\n let isIndeterminate = false;\n\n const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {\n const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n (accum, [cellKey, cellData]) => {\n const header = mappedHeaders[cellKey] \|\| ({} as Q2DataTableHeader);\n const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n const isBadge = 'type' in header && header.type === 'badge';\n const defaultCell: Q2DataTableCell = {\n value: '',\n ariaLabel: undefined,\n type,\n align,\n lineClamp,\n verticalAlign,\n badgeStatus: isBadge ? header.badgeStatus : undefined,\n badgeTheme: isBadge ? header.badgeTheme : undefined,\n };\n\n const result: Q2DataTableCell =\n typeof cellData === 'object'\n ? { ...defaultCell, ...cellData }\n : { ...defaultCell, value: cellData };\n\n accum[cellKey] = result;\n return accum;\n },\n {}\n );\n\n if (isAllSelected && !selected) isAllSelected = false;\n if (!isAllSelected && selected) isIndeterminate = true;\n return {\n ...defaultRow,\n id,\n selected: !!selected,\n expanded: !!expanded,\n disabled: !!disabled,\n cells: serializedCells,\n };\n });\n\n const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';\n\n this.hasRowData = !!rows.length;\n this.allRowsSelected = this.hasRowData && isAllSelected;\n this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n this.checkSlots();\n }\n\n @Watch('selectable')\n selectableHandler() {\n if (this.selectable === false) {\n this.selectAllRows.emit({ checked: false });\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get mappedHeaders() {\n return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n accum[header.key] = header;\n return accum;\n }, {});\n }\n\n get numberOfColumns() {\n return (\n (this.serializedHeaders?.length ?? 0) +\n (this.selectable ? 1 : 0) +\n (this.clickable ? 1 : 0) +\n (this.hasExpandableRows ? 1 : 0) +\n (this.hasDropdowns ? 1 : 0)\n );\n }\n\n get selectedRow() {\n return this.selectedRows.find(({ selected }) => !!selected);\n }\n\n get selectedRows() {\n return this.serializedRows.filter(({ selected }) => selected);\n }\n\n checkSlots = () => {\n this.hasExpandableRows = !!(this.hostElement?.querySelector(`[slot$=\"-expandable-content\"]`) ?? false);\n this.hasDropdowns = !!(this.hostElement?.querySelector(`[slot$=\"-dropdown\"]`) ?? false);\n\n // The booleans above may not change, even if the slot has content\n // So we increment this property to force a re-render and ensure proper rendering\n this.checkSlotCount += 1;\n };\n\n onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n this.click.emit({ row });\n };\n\n onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n if (this.clickable) {\n this.onClickRow(event, row);\n } else if (this.hasExpandableRows) {\n this.onToggleRow(event, row);\n }\n };\n\n onControlContainerClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;\n const { checked } = event.detail;\n\n const selectedRow = { ...row, selected: checked };\n let selectedRows;\n if (selectMode === 'single') {\n selectedRows = checked ? [selectedRow] : [];\n } else {\n selectedRows = checked\n ? [...currentlySelectedRows, selectedRow]\n : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n }\n\n const allRowsSelected = selectedRows.length === serializedRows.length;\n const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n this.allRowsSelected = allRowsSelected;\n this.someRowsSelected = isIndeterminate;\n };\n\n onSort = (header: Q2DataTableHeader) => {\n const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n const sortKey = header.key;\n const sortEvent = this.sort.emit({ header, direction });\n if (sortEvent.defaultPrevented) return;\n\n const shouldAutoSort = header.sortable !== 'manual';\n if (!shouldAutoSort) return;\n\n this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n const sorted = sortKey === serializedHeader.key ? direction : undefined;\n return { ...serializedHeader, sorted };\n });\n\n this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n };\n\n onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const selectedRow = { ...row, expanded: !row.expanded };\n const toggleEvent = this.toggle.emit({ row: selectedRow });\n if (toggleEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.id === selectedRow.id) return selectedRow;\n else return { ...row };\n });\n };\n\n sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n const { key, sorted } = header;\n const direction = sorted \|\| 'ASC';\n\n const sortedRows = [...rows].sort((a, b) => {\n const aValue = a.cells[key].value;\n const bValue = b.cells[key].value;\n\n if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n return 0;\n });\n\n return sortedRows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { caption } = this;\n return (\n <div class=\"container\">\n <table>\n {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n {this.renderTableColGroup()}\n {this.renderTableHeader()}\n {this.renderEmptyState()}\n {this.renderTableRows()}\n </table>\n </div>\n );\n }\n\n renderCellContent(cell: Q2DataTableCell) {\n if (!cell) return;\n\n const { type, ariaLabel, value } = cell;\n\n if ([undefined, null].includes(value)) return;\n\n switch (type) {\n case 'badge':\n let valueAsInt;\n switch (typeof value) {\n case 'string':\n valueAsInt = parseFloat(value);\n break;\n\n case 'boolean':\n valueAsInt = value ? 1 : 0;\n break;\n\n default:\n valueAsInt = value;\n break;\n }\n\n return (\n <q2-badge\n aria-label={ariaLabel}\n value={valueAsInt}\n theme={cell.badgeTheme}\n status={cell.badgeStatus}\n size=\"large\"\n ></q2-badge>\n );\n\n case 'icon':\n const valueAsString = typeof value === 'string' ? value : `${value}`;\n return (\n <q2-icon\n label={ariaLabel}\n type={valueAsString}\n ></q2-icon>\n );\n\n case 'boolean':\n return !!value ? (\n <q2-icon\n label={loc('tecton.element.dataTable.booleanTrue')}\n type=\"checkmark\"\n ></q2-icon>\n ) : (\n <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n );\n\n case 'code':\n return <code aria-label={ariaLabel}>{value}</code>;\n\n default:\n return <div aria-label={ariaLabel}>{value}</div>;\n }\n }\n\n renderEmptyState() {\n const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n if (hasRowData \|\| loading) return null;\n\n return (\n <tbody>\n <tr class=\"empty-state\">\n <td colSpan={numberOfColumns}>\n <slot name=\"empty-table\">\n <div class=\"empty-state-content\">\n <q2-icon type={emptyIcon}></q2-icon>\n <p>{loc(emptyMessage)}</p>\n </div>\n </slot>\n </td>\n </tr>\n </tbody>\n );\n }\n\n renderTableColGroup() {\n const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;\n\n if (!headers.length) return null;\n\n return (\n <colgroup>\n {selectable && <col class=\"select-column\" />}\n {headers.map(({ width, backgroundColor }) => (\n <col style={{ width, backgroundColor }} />\n ))}\n {clickable && <col class=\"click-column\" />}\n {hasExpandableRows && <col class=\"expandable-row-control-column\" />}\n {hasDropdowns && <col class=\"dropdown-column\" />}\n </colgroup>\n );\n }\n\n renderTableHeader() {\n const {\n serializedHeaders: headers,\n selectable,\n clickable,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n allRowsSelected,\n someRowsSelected,\n hasRowData,\n loading,\n } = this;\n\n if (!headers.length) return null;\n\n return (\n <thead>\n <tr>\n {selectable && (\n <th>\n {selectMode === 'multiple' && (\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectAllRows')}\n hide-label\n onChange={() => this.selectAllRows.emit({ checked: !allRowsSelected })}\n checked={hasRowData && allRowsSelected && !someRowsSelected}\n indeterminate={hasRowData && someRowsSelected && !allRowsSelected}\n disabled={loading \|\| !hasRowData}\n test-id=\"select-all-rows-control\"\n ></q2-checkbox>\n )}\n </th>\n )}\n {headers.map(header => {\n const { align, sorted, verticalAlign } = header;\n const headerClasses = [];\n if (align) headerClasses.push(`align-${align}`);\n if (verticalAlign) headerClasses.push(`vertical-align-${verticalAlign}`);\n if (!!sorted) headerClasses.push('sorted');\n return (\n <th\n class={headerClasses.join(' ')}\n id={`header-${header.key}`}\n >\n {header.sortable ? (\n <q2-btn\n onClick={() => this.onSort(header)}\n test-id=\"sort-control\"\n disabled={this.loading}\n >\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n\n {!!sorted ? (\n <q2-icon\n class={`sorted-indicator direction-${sorted}`}\n type=\"arrow-down\"\n label={\n sorted === 'ASC'\n ? loc('tecton.element.dataTable.sortedAscending')\n : loc('tecton.element.dataTable.sortedDescending')\n }\n test-id=\"sorted-indicator\"\n ></q2-icon>\n ) : (\n <q2-icon\n class={`sorted-indicator`}\n type=\"sort\"\n label={loc('tecton.element.dataTable.clickToSort')}\n test-id=\"sorted-indicator\"\n ></q2-icon>\n )}\n </div>\n </q2-btn>\n ) : (\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n </div>\n )}\n </th>\n );\n })}\n {clickable && (\n <th\n id=\"click\"\n class={hideClickable ? 'sr' : undefined}\n >\n <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n </th>\n )}\n {hasExpandableRows && (\n <th id=\"toggle\">\n <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n </th>\n )}\n {hasDropdowns && (\n <th>\n <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n </th>\n )}\n </tr>\n </thead>\n );\n }\n\n renderTableRows() {\n const {\n serializedHeaders: headers,\n serializedRows: rows,\n selectable,\n clickable,\n striped,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n numberOfColumns,\n loading,\n } = this;\n\n if (loading) {\n return (\n <tbody>\n <tr class=\"loading-row\">\n <td colSpan={numberOfColumns}>\n <q2-loading inline></q2-loading>\n </td>\n </tr>\n </tbody>\n );\n }\n\n let isSelectDisabled = false;\n let selectedRow;\n if (selectMode === 'single') {\n selectedRow = this.selectedRow;\n isSelectDisabled = !!selectedRow;\n }\n const clickableClasses = [];\n if (clickable) clickableClasses.push('click-column');\n if (hideClickable) clickableClasses.push('sr');\n const clickableClassString = clickableClasses.join(' ');\n\n return (\n <tbody>\n {rows.map(row => {\n const cellSlotPrefix = `row-${row.id}-cell`;\n const expandableRowName = `row-${row.id}-expandable-content`;\n const dropdownCellName = `row-${row.id}-dropdown`;\n const rowHasExpandableSlot =\n hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n const rowHasDropdownSlot =\n hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n const rowClasses = [];\n if (rowHasExpandableSlot) rowClasses.push('expandable');\n if (clickable) rowClasses.push('clickable');\n if (striped) rowClasses.push('striped');\n if (row.expanded) rowClasses.push('expanded');\n if (row.selected) rowClasses.push('selected');\n const rowIsClickable = clickable \|\| rowHasExpandableSlot;\n\n return (\n <Fragment>\n <tr\n id={`row-${row.id}`}\n class={rowClasses.join(' ')}\n onClick={rowIsClickable && (e => this.onClickTableRow(e, row))}\n tabIndex={rowIsClickable ? -1 : undefined}\n >\n {selectable && (\n <td\n class=\"select-column\"\n onClick={this.onControlContainerClick}\n >\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectRow')}\n hide-label\n checked={row.selected}\n disabled={(isSelectDisabled && row !== selectedRow) \|\| row.disabled}\n onChange={e => this.onSelectRow(e, row)}\n test-id=\"select-row-control\"\n ></q2-checkbox>\n </td>\n )}\n {headers.map(({ key }) => {\n const cell = row.cells[key];\n const lineClamp = cell?.lineClamp;\n const cellAlign = cell?.align;\n const cellVerticalAlign = cell?.verticalAlign;\n const cellClasses = [];\n if (cellAlign) cellClasses.push(`align-${cellAlign}`);\n if (cellVerticalAlign) cellClasses.push(`vertical-align-${cellVerticalAlign}`);\n if (lineClamp) cellClasses.push('clamped');\n const cellStyles = lineClamp\n ? { '--comp-line-clamp-count': `${lineClamp}` }\n : undefined;\n\n return (\n <td\n class={cellClasses.join(' ')}\n style={cellStyles}\n >\n <slot name={`${cellSlotPrefix}-${key}`}>\n {this.renderCellContent(cell)}\n </slot>\n </td>\n );\n })}\n {clickable && (\n <td class={clickableClassString}>\n <q2-btn\n intent=\"neutral\"\n size=\"small\"\n onClick={e => this.onClickRow(e, row)}\n test-id=\"clickable-row-control\"\n >\n {loc('tecton.element.dataTable.clickRow')}\n </q2-btn>\n </td>\n )}\n {hasExpandableRows && (\n <td\n class=\"expandable-row-control-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasExpandableSlot && (\n <q2-btn\n onClick={e => this.onToggleRow(e, row)}\n ariaExpanded={`${row.expanded}`}\n ariaControls={expandableRowName}\n ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n test-id=\"expandable-row-control\"\n >\n <q2-icon\n type=\"chevron-down\"\n class=\"toggle-expandable-row\"\n ></q2-icon>\n </q2-btn>\n )}\n </td>\n )}\n {hasDropdowns && (\n <td\n class=\"dropdown-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n </td>\n )}\n </tr>\n {rowHasExpandableSlot && (\n <tr\n id={expandableRowName}\n class=\"expandable-row\"\n hidden={!row.expanded}\n aria-hidden={!row.expanded}\n >\n <td\n colSpan={numberOfColumns}\n headers=\"toggle\"\n >\n <div class=\"expandable-content\">\n <slot name={expandableRowName}></slot>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n );\n })}\n </tbody>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i, F as r, g as o } from "./index-7a5365e2.js";
 import { l as s, e as a } from "./index-f2a66217.js";
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-only-intent-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 const l = n;

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n margin-bottom: 0;\n margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-description-font-weight, 400);\n text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n align-items: center;\n background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n border-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-only-intent-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 // cursor: pointer;\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"],"mappings":";;;;AAAA,MAAMA,IAAkB;;AACxB,MAAAC,IAAeD;;MC2BFE,IAAY;;;;IAMrBC,KAAAC,cAAsB;IAsKtBD,KAAAE,cAAeC;MACXH,KAAKI,aAAaD;MAClBH,KAAKK,wBAAwB;AAAK;IAkItCL,KAAAM,mBAAoBH;MAChBH,KAAKI,aAAaD;MAClBH,KAAKK,wBAAwB;MAC7B,MAAME,IAAeC,MAAMC,KAAKN,EAAEO,aAAaC;MAC/C,MAAMC,IAAcZ,KAAKa,iBAAiBN;MAE1CP,KAAKc,WAAWF;MAChBZ,KAAKe,QAAQH;AAAW;IAG5BZ,KAAAgB,oBAAqBb;MACjB,MAAMc,IAAgBT,MAAMC,KAAMN,EAAEe,OAA4BP;MAChE,MAAMC,IAAcZ,KAAKa,iBAAiBI;MAE1CjB,KAAKc,WAAWF;MAChBZ,KAAKe,QAAQH;AAAW;IAG5BZ,KAAAmB,oBAAqBhB;MACjBH,KAAKI,aAAaD;MAClBH,KAAKK,wBAAwB;AAAI;;;QAUrCL,KAAAoB,SAAS,MAEDC,EAAA;MAAKC,OAAM;QACLtB,KAAKuB,YAAYvB,KAAKwB,mBACpBH,EAAA;MAAKC,OAAM;OACNtB,KAAKuB,YACFF,EAAA;MACIC,OAAM;MACNG,SAAQ;MAAY,WACZ;SAELzB,KAAK0B,QAAQC,EAAI3B,KAAK0B,SAAS1B,KAAK4B,sBAAsBP,EAAA;MAAMQ,MAAK;SAAa,KAG5F7B,KAAKwB,kBACFH,EAAA;MACIC,OAAM;MACNQ,IAAG;MAAa,WACR;SAEL9B,KAAK+B,cACJJ,EAAI3B,KAAK+B,eACT/B,KAAKgC,4BACLX,EAAA;MAAMQ,MAAK;SAAgB,MAS7C7B,KAAKiC,YAAY,iBACfZ,EAAA;MACIC,OAAOtB,KAAKkC;MACZC,aAAanC,KAAKI;MAClBgC,aAAapC,KAAKE;MAClBmC,YAAYrC,KAAKmB;MACjBmB,QAAQtC,KAAKM;MACbiC,KAAKC,KAAOxC,KAAKyC,WAAWD,MAAE,QAAFA,WAAE,IAAFA,IAAMxC,KAAKyC;MAAS,WACxC;OAENzC,KAAK0C,qBACHrB,EAACsB,GAAQ,MACLtB,EAAA;MAAYC,OAAM;QAClBD,EAAA;MAAGC,OAAM;OAAkBK,EAAI,oDAGnCN,EAACsB,GAAQ,MACLtB,EAAA;MAASuB,MAAK;QACdvB,EAAA;MAAGC,OAAM;OACLD,EAAA;MACIK,OAAOC,EAAI;MACXkB,YAAY,MAAM7C,KAAK8C;MACvBb,SAAQ;MAAQ,WACR;MACRc,MAAK;QAERpB,EAAI,6CAA6C,EAAC3B,KAAKgD,kBAMxE3B,EAAA;MACIC,OAAM;MAAQ,WACN;OAERD,EAAA;MACI4B,UAAUjD,KAAK0C;MACfQ,QAAO;MACPC,SAASnD,KAAK0C;MACdU,SAAS,MAAMpD,KAAK8C;MACpBO,MAAK;MAAQ,WACL;OAERhC,EAAA;MAASuB,MAAK;QACdvB,EAAA,cAAOM,EAAI,yCAAyC,EAAC3B,KAAKgD,gBAItE3B,EAAA;MAAA,sBACyBrB,KAAK+B,eAAe,iBAAkBuB;MAC3DhC,OAAM;MACNQ,IAAG;MACHyB,UAAUvD,KAAKgB;MACfuB,KAAKC,KAAOxC,KAAKwD,oBAAoBhB,MAAE,QAAFA,WAAE,IAAFA,IAAMxC,KAAKwD;MAChDZ,MAAK;MAAM,WACH;MACRa,UAAQ;QAEZpC,EAAA;MAAKC,OAAM;OACPD,EAAA;MAASC,OAAM;OACVtB,KAAK0D,eAAeC,KAAIC,KACrBvC,EAAA;MACIC,OAAOtB,KAAK6D,mBAAmBD,EAAKA,KAAK/B;MACzCiC,KAAKF,EAAKA,KAAK/B;MACfkC,gBAAgB/D,KAAKgE,uCAAuCJ,EAAKA,KAAK/B;OAEtER,EAAA;MAAK4C,MAAK;OACLL,EAAKM,WAAW,kBACjBN,EAAKM,WAAW,qBAChBN,EAAKM,WAAW,YAChBN,EAAKM,WAAW,yBACZ7C,EAAA;MACIC,OAAM;MACNsB,MAAK;SAETgB,EAAKM,WAAW,gBAChB7C,EAAA;MAAYC,OAAM;SAElBD,EAAA;MACIC,OAAM;MACNsB,MAAK;SAIjBvB,EAAA;MAAK4C,MAAK;OAAUL,EAAKA,KAAK/B,OAC9BR,EAAA;MAAK4C,MAAK;OAAQjE,KAAKmE,yBAAyBP,EAAKM,QAAQN,EAAKA,KAAKP,QACvEhC,EAAA;MAAK4C,MAAK;OACN5C,EAAA;MACIC,OAAM;MACN4B,QAAO;MACPE,SAASpD,KAAKoE,gCAAgCR,EAAKA,KAAK/B;OAExDR,EAAA;MAASuB,MAAK;;6BAzbrB;0BAOvB;iCAG2B;0BAGhB;;qBAmBc;;oBAcZyB;uBAMGA;kBASsD;iBAQvD;MAAEC,cAAc;MAAIC,YAAY;;mBAOjB;;;;EAYpC,cAAAC,CAAeC;IACXA,EAASC,SAAQC;MACb,MAAMC,IAA0B5E,KAAKC,YAAY4E,WAAUjB,KAAQA,EAAK/B,SAAS8C,EAAW9C;MAC5F,IAAI+C,KAA2B,GAAG;QAC9B,MAAME,IAAe9E,KAAKC,YAAY8E,OAAOH,GAAyB,GAAG;QACzE5E,KAAK0D,iBAAiB,EAAC;UAAEE,MAAMkB;UAAcZ,QAAQS,EAAWT;cAAalE,KAAK0D;aAC/E;QACH,MAAMsB,IAA6BhF,KAAK0D,eAAemB,WACnDjB,KAAQA,EAAKA,KAAK/B,SAAS8C,EAAW9C;QAE1C,IAAImD,KAA8B,GAAG;UACjChF,KAAK0D,eAAesB,GAA4Bd,SAASS,EAAWT;UACpElE,KAAKiF;;;;;;;EASrB,mBAAI/C;IACA,MAAMgD,IAAU,EAAC;IACjB,IAAIlF,KAAKK,uBAAuB;MAC5B6E,EAAQC,KAAK;;IAGjB,OAAOD,EAAQE,KAAK;;EAGxB,kBAAIC;IACA,OAAO7E,MAAM8E,QAAQtF,KAAKuF,aAAavF,KAAKuF,YAAYvF,KAAKuF,UAAUC,MAAM,KAAK7B,KAAIf,KAAQA,EAAK6C;;EAGvG,kBAAIjE;IACA,SAASxB,KAAK+B,eAAe/B,KAAKgC;;EAGtC,6BAAIA;IACA,OAAO0D,EAAe1F,KAAKwC,IAAI;;EAGnC,YAAIjB;IACA,SAASvB,KAAK0B,SAAS1B,KAAK4B;;EAGhC,uBAAIA;IACA,OAAO8D,EAAe1F,KAAKwC,IAAI;;EAGnC,gBAAA3B,CAAiB8E;IACb,MAAMrB,IAAe;IACrBA,EAAaa,QAAQnF,KAAK4F,2BAA2BD;IACrDrB,EAAaa,QAAQnF,KAAK6F,0BAA0BF;IACpDrB,EAAaa,QAAQnF,KAAK8F,8BAA8BH;IACxD3F,KAAK0D,iBAAiB,KAAIY;IAE1B,IAAIqB,EAAcI,WAAW,GAAG;MAC5B/F,KAAK0C,oBAAoB;WACtB;MACH1C,KAAKC,cAAc0F;;IAGvB,OAAO;MAAErB;MAAcC,YAAYoB;;;EAQvC,YAAAvF,CAAa4F;IACTA,EAAMC;IACND,EAAME;;EAGV,+BAAAjB;IACI,IAAIjF,KAAKC,YAAY8F,WAAW,MAAM/F,KAAK0D,eAAeyC,MAAKvC,KAAQA,EAAKM,WAAW,iBAAgB;MACnGlE,KAAK0C,oBAAoB;;;EAIjC,UAAA5B,CAAWF;IACPZ,KAAK0C,oBAAoB9B,EAAY2D,WAAWwB,SAAS;IACzD/F,KAAKoG,UAAUC,KAAKzF;;EAGxB,0BAAAgF,CAA2BjF;IACvB,MAAM2D,IAAe;IAErB,IAAItE,KAAKqF,eAAeU,WAAW,GAAG,OAAOzB;IAE7C3D,EAAM+D,SAAQd;MACV,MAAM0C,IAAgB1C,EAAK/B,KAAK2D,MAAM,KAAKe,MAAMC;MACjD,KAAKxG,KAAKqF,eAAeoB,SAASH,IAAgB;QAC9ChC,EAAaa,KAAK;UAAEvB;UAAMM,QAAQ;;;;;QAK1CI,EAAaI,SAAQgC;MACjB,MAAMC,IAAQhG,EAAMiG,QAAQF,EAAY9C;MACxC,IAAI+C,KAAS,GAAG;QACZhG,EAAMoE,OAAO4B,GAAO;;;IAI5B,OAAOrC;;EAGX,6BAAAwB,CAA8BnF;IAC1B,MAAMkG,IAAyB;IAE/B,IAAI7G,KAAKgD,aAAaqB,UAAU,OAAOwC;IAEvC,IAAIlG,EAAMoF,SAAS/F,KAAKgD,UAAU;MAC9B,MAAM8D,IAAcnG,EAAMoE,OAAO/E,KAAKgD;MACtC8D,EAAYpC,SAAQd;QAChBiD,EAAuB1B,KAAK;UAAEvB;UAAMM,QAAQ;;AAAyB;;IAI7E,OAAO2C;;EAGX,yBAAAhB,CAA0BlF;IACtB,MAAMoG,IAAqB;IAE3B,IAAI/G,KAAKgH,gBAAgB3C,UAAU,OAAO0C;IAE1CpG,EAAM+D,SAAQd;MACV,IAAIA,EAAKP,OAAOrD,KAAKgH,aAAa;QAC9BD,EAAmB5B,KAAK;UAAEvB;UAAMM,QAAQ;;;;;QAKhD6C,EAAmBrC,SAAQuC;MACvB,MAAMN,IAAQhG,EAAMiG,QAAQK,EAAarD;MACzC,IAAI+C,KAAS,GAAG;QACZhG,EAAMoE,OAAO4B,GAAO;;;IAI5B,OAAOI;;EAGX,aAAAG;IACIlH,KAAKmH,kBAAkB;;;EAG3B,sCAAAnD,CAAuCoD;IACnC,OAAQjH;MACJ,IAAIA,EAAEkH,kBAAkB,yBAAyB;QAC7CrH,KAAK0D,iBAAiB1D,KAAK0D,eAAe4D,QAAO1D,KAAQA,EAAKA,KAAK/B,SAASuF;;;;EAKxF,+BAAAhD,CAAgCgD;IAC5B,OAAO;MACH,MAAMG,IAAevH,KAAK0D,eAAe8D,MAAK5D,KAAQA,EAAKA,KAAK/B,SAASuF;MACzE,IAAIG,GAAc;QACdA,EAAaE,cAAc;QAC3BzH,KAAKkH;;;;EAKjB,kBAAArD,CAAmBuD;IACf,MAAMlC,IAAU,EAAC;IACjB,MAAMJ,IAAe9E,KAAK0D,eAAe8D,MAAK5D,KAAQA,EAAKA,KAAK/B,SAASuF;IACzE,IAAItC,MAAY,QAAZA,WAAY,aAAZA,EAAc2C,aAAa;MAC3BvC,EAAQC,KAAK;WACV;MACHD,EAAQC,KAAK;;IAEjB,OAAOD,EAAQE,KAAK;;EAGxB,wBAAAjB,CAAyBD,GAAoBb;IACzC,QAAQa;KACJ,KAAK;MACD,OAAOvC,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;KACL;MACI,OAAOA,EAAI,sCAAsC,GAAE0B,KAAQ,MAAO,MAAOqE,QAAQ;;;EA2B7F,iBAAA5E;IACI9C,KAAKwD,kBAAkBmE,cAAc,IAAIC,WAAW"}
1	+ {"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n margin-bottom: 0;\n margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-description-font-weight, 400);\n text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n align-items: center;\n background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n border-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"],"mappings":"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"}