@poirazis/supercomponents-shared 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +66 -0
- package/dist/index.js +30635 -0
- package/dist/index.umd.cjs +12 -0
- package/dist/style.css +1 -0
- package/package.json +117 -0
- package/src/index.js +29 -0
- package/src/index.ts +31 -0
- package/src/lib/Actions/autoresize_textarea.js +14 -0
- package/src/lib/Actions/click_outside.js +80 -0
- package/src/lib/Actions/index.js +4 -0
- package/src/lib/Actions/position_dropdown.js +129 -0
- package/src/lib/SuperButton/SuperButton.svelte +341 -0
- package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte +91 -0
- package/src/lib/SuperFieldsCommon.css +54 -0
- package/src/lib/SuperList/SuperList.svelte +308 -0
- package/src/lib/SuperList/drag-handle.svelte +31 -0
- package/src/lib/SuperPopover/SuperPopover.svelte +134 -0
- package/src/lib/SuperTable/SuperTable.css +410 -0
- package/src/lib/SuperTable/SuperTable.svelte +1332 -0
- package/src/lib/SuperTable/constants.js +85 -0
- package/src/lib/SuperTable/controls/ColumnsSection.svelte +34 -0
- package/src/lib/SuperTable/controls/ControlSection.svelte +3 -0
- package/src/lib/SuperTable/controls/RowButtonsColumn.svelte +169 -0
- package/src/lib/SuperTable/controls/SelectionColumn.svelte +174 -0
- package/src/lib/SuperTable/controls/SuperTableWelcome.svelte +58 -0
- package/src/lib/SuperTable/overlays/AddNewRowOverlay.svelte +52 -0
- package/src/lib/SuperTable/overlays/EmptyResultSetOverlay.svelte +13 -0
- package/src/lib/SuperTable/overlays/LoadingOverlay.svelte +3 -0
- package/src/lib/SuperTable/overlays/RowContextMenu copy.svelte +57 -0
- package/src/lib/SuperTable/overlays/RowContextMenu.svelte +58 -0
- package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte +184 -0
- package/src/lib/SuperTable/overlays/SelectedActionsOverlay.svelte +64 -0
- package/src/lib/SuperTable/state/API.js +0 -0
- package/src/lib/SuperTable/state/SuperTableStateMachine.js +0 -0
- package/src/lib/SuperTable/types.js +0 -0
- package/src/lib/SuperTableCells/CellAttachment.svelte +288 -0
- package/src/lib/SuperTableCells/CellBoolean.svelte +158 -0
- package/src/lib/SuperTableCells/CellColor.svelte +460 -0
- package/src/lib/SuperTableCells/CellCommon.css +319 -0
- package/src/lib/SuperTableCells/CellDatetime.svelte +180 -0
- package/src/lib/SuperTableCells/CellIcon.svelte +627 -0
- package/src/lib/SuperTableCells/CellJSON.svelte +297 -0
- package/src/lib/SuperTableCells/CellLink.svelte +274 -0
- package/src/lib/SuperTableCells/CellLinkAdvanced.svelte +298 -0
- package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte +355 -0
- package/src/lib/SuperTableCells/CellLinkPickerTable.svelte +91 -0
- package/src/lib/SuperTableCells/CellLinkPickerTree.svelte +226 -0
- package/src/lib/SuperTableCells/CellNumber.svelte +179 -0
- package/src/lib/SuperTableCells/CellNumberSimple.svelte +56 -0
- package/src/lib/SuperTableCells/CellOptions.svelte +631 -0
- package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte +684 -0
- package/src/lib/SuperTableCells/CellSkeleton.svelte +59 -0
- package/src/lib/SuperTableCells/CellString.svelte +178 -0
- package/src/lib/SuperTableCells/CellStringSimple.svelte +55 -0
- package/src/lib/SuperTableCells/index.js +21 -0
- package/src/lib/SuperTableCells/remixIcons.js +6772 -0
- package/src/lib/SuperTableColumn/SuperTableColumn.svelte +392 -0
- package/src/lib/SuperTableColumn/index.js +9 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte +57 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnFooter.svelte +14 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte +228 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte +142 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnRowNew.svelte +34 -0
- package/src/lib/SuperTree/SuperTree.svelte +117 -0
- package/src/types/svelte-portal.d.ts +1 -0
package/dist/style.css
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
.super-button.svelte-159r6oj{border:1px solid var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-75);color:var(--spectrum-global-color-gray-800);display:flex;align-items:center;font-weight:600;min-width:5rem;padding:0rem .75rem;gap:.5rem}.super-button.svelte-159r6oj.small{min-width:4rem;padding:0rem .5rem;gap:.5rem;font-size:smaller}.super-button.svelte-159r6oj>span{white-space:nowrap}.super-button.svelte-159r6oj.icon>i{display:block}.super-button.svelte-159r6oj.iconOnly{min-width:unset}.super-button.svelte-159r6oj.iconOnly>span{display:none}.super-button.svelte-159r6oj>i{display:none;opacity:.9}.full-width.svelte-159r6oj{width:100%}.menu-item.svelte-159r6oj{width:100%;justify-content:flex-start;border:unset!important;border-radius:0;background-color:transparent!important;font-weight:500}.menu-item.svelte-159r6oj:hover{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-900)}.menu-item-right.svelte-159r6oj{width:100%;justify-content:flex-end!important}i.svelte-159r6oj{color:var(--iconColor);transition:all .23s ease-in-out}.cta.svelte-159r6oj{background-color:var(--spectrum-global-color-blue-400);border:1px solid transparent;color:#fff}.cta.svelte-159r6oj.quiet{border-color:transparent!important;background-color:transparent;color:var(--spectrum-global-color-gray-800)}.cta.svelte-159r6oj.quiet:hover,.cta.svelte-159r6oj.quiet:focus{background-color:var(--spectrum-global-color-blue-400);color:#fff}.cta.svelte-159r6oj:hover,.cta.svelte-159r6oj:focus{background-color:var(--spectrum-global-color-blue-600);border-color:var(--spectrum-global-color-blue-600)}.cta.svelte-159r6oj:active{border:1px solid var(--spectrum-global-color-blue-700)}.ink.svelte-159r6oj{background-color:var(--spectrum-global-color-gray-700);border:1px solid var(--spectrum-global-color-gray-700);color:var(--spectrum-global-color-gray-50);font-weight:700;opacity:.9}.ink.svelte-159r6oj.quiet{border-color:transparent!important;background-color:transparent;color:var(--spectrum-global-color-gray-800)}.ink.svelte-159r6oj.quiet:hover,.ink.svelte-159r6oj.quiet:focus{color:var(--spectrum-global-color-gray-50);background-color:var(--spectrum-global-color-gray-600)}.ink.svelte-159r6oj:hover,.ink.svelte-159r6oj:focus{background-color:var(--spectrum-global-color-gray-800)}.ink.svelte-159r6oj:active{border:1px solid var(--spectrum-global-color-blue-700)}.primary.svelte-159r6oj:hover,.primary.svelte-159r6oj:focus{border:1px solid var(--spectrum-global-color-gray-500);color:var(--spectrum-global-color-gray-900)}.primary.svelte-159r6oj:active{background-color:var(--spectrum-global-color-gray-100);border:1px solid var(--spectrum-global-color-gray-600)}.primary.svelte-159r6oj.quiet{border-color:transparent;background-color:transparent}.primary.svelte-159r6oj.quiet:hover{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-900)}.secondary.svelte-159r6oj{background-color:var(--spectrum-global-color-gray-200);border-color:transparent;color:var(--spectrum-global-color-gray-700);font-weight:500}.secondary.svelte-159r6oj.quiet{border-color:transparent;background-color:transparent}.secondary.svelte-159r6oj.quiet:hover{background-color:var(--spectrum-global-color-gray-200);border-color:transparent}.secondary.svelte-159r6oj:hover,.secondary.svelte-159r6oj:focus{background-color:var(--spectrum-global-color-gray-300);color:var(--spectrum-global-color-gray-900)}.warning.svelte-159r6oj{color:var(--spectrum-global-color-red-400)}.warning.svelte-159r6oj.quiet{border-color:transparent!important;background-color:transparent;color:var(--spectrum-global-color-red-400)}.warning.svelte-159r6oj.quiet:hover{background-color:var(--spectrum-global-color-red-400)}.warning.svelte-159r6oj:hover,.warning.svelte-159r6oj:focus{background-color:var(--spectrum-global-color-red-400);color:var(--spectrum-global-color-gray-50)}.overBackground.svelte-159r6oj{background-color:transparent}.overBackground.svelte-159r6oj.quiet{border:unset}.menu.svelte-159r6oj{border:unset;background:transparent;padding-right:0rem;color:var(--spectrum-global-color-gray-700)}.disabled.svelte-159r6oj{background-color:var(--spectrum-global-color-gray-200)!important;color:var(--spectrum-global-color-gray-400)!important;cursor:not-allowed;border-color:var(--spectrum-global-color-gray-300)}.disabled.svelte-159r6oj.quiet{background-color:unset!important;border:unset!important}.superlabel.svelte-1gp0kew{flex:0 0 auto;width:var(--label-width);overflow:hidden;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:400;line-height:1.65rem;color:var(--spectrum-global-color-gray-700);padding-left:2px;gap:1rem;transition:.13s}.superlabel.svelte-1gp0kew.notForm{font-size:14px;padding-left:unset;padding-bottom:4px}.superlabel.svelte-1gp0kew.left{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1rem;gap:0px}.superlabel.svelte-1gp0kew.left>.label{width:var(--label-width);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.superlabel.svelte-1gp0kew>.label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.superlabel.svelte-1gp0kew>.error-message{color:var(--spectrum-global-color-red-400);font-size:11px}.list-wrap.svelte-vcy2bx.svelte-vcy2bx{list-style-type:none;margin:0;padding:0;width:100%;border-radius:4px}.list-wrap.svelte-vcy2bx>li.svelte-vcy2bx:not(.buttons){background-color:transparent;transition:background-color ease-in-out .13s;display:flex;align-items:center;border-bottom:1px solid var(--spectrum-global-color-gray-200)}.list-wrap.inEdit.svelte-vcy2bx>li.svelte-vcy2bx:hover{background-color:var( --spectrum-table-row-background-color-hover, var(--spectrum-alias-highlight-hover) );cursor:pointer}.list-wrap.svelte-vcy2bx>li.svelte-vcy2bx:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-wrap.svelte-vcy2bx>li.svelte-vcy2bx:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:0px}.right-content.svelte-vcy2bx.svelte-vcy2bx{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem}.right-content.svelte-vcy2bx.svelte-vcy2bx.showColors>i{display:block;color:var(--option-color);font-size:16px}.right-content.svelte-vcy2bx.svelte-vcy2bx>i{display:none}li.buttons.svelte-vcy2bx.svelte-vcy2bx{display:flex;padding:unset!important;color:var(--spectrum-global-color-gray-500)}li.buttons.svelte-vcy2bx.svelte-vcy2bx.inEdit{color:var(--spectrum-global-color-gray-700)}li.buttons.svelte-vcy2bx.svelte-vcy2bx:hover{background-color:transparent!important}i.svelte-vcy2bx.svelte-vcy2bx:hover{cursor:pointer}.add-button.svelte-vcy2bx.svelte-vcy2bx{flex:1;min-width:0;display:flex;justify-content:center;align-items:center}.add-button.svelte-vcy2bx.svelte-vcy2bx.disabled{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-500)}.add-button.svelte-vcy2bx.svelte-vcy2bx.placeholder{font-style:italic;color:var(--spectrum-global-color-gray-500)}.clear-button.svelte-vcy2bx.svelte-vcy2bx{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;border-left:1px solid var(--spectrum-global-color-gray-300)}.clear-button.svelte-vcy2bx.svelte-vcy2bx:hover{color:var(--spectrum-global-color-red-500);cursor:pointer}.list-wrap.svelte-vcy2bx li.svelte-vcy2bx{padding-left:var(--spacing-s);padding-right:var(--spacing-s);line-height:1.85rem}.list-wrap.svelte-vcy2bx li.svelte-vcy2bx:focus{outline:none}.handle.svelte-vcy2bx>svg.svelte-vcy2bx:hover{cursor:grab}.handle.svelte-vcy2bx.svelte-vcy2bx{display:flex;min-width:1.5rem;align-items:center;color:var(--spectrum-global-color-gray-500);fill:var(--spectrum-global-color-gray-700);font-size:14px}.hide-popover.svelte-af3l1o{display:contents}.spectrum-Popover.svelte-af3l1o{border-color:var(--spectrum-global-color-gray-300);background-color:var(--spectrum-global-color-gray-50);overflow:auto}.customZindex.svelte-af3l1o{z-index:var(--customZindex)!important}.stb-scrollbar.svelte-fhqbbj{position:absolute;right:8px;top:var(--offset);bottom:var(--bottomOffset);width:8px;border-radius:4px;opacity:.2;z-index:1;transition:.23s;overflow:hidden}.stb-scrollbar.horizontal.svelte-fhqbbj{top:unset;bottom:var(--horizontalBottomOffset);left:calc(var(--horizontalOffset) + 8px);width:calc(100% - 32px - var(--horizontalOffset));height:8px}.highlighted.svelte-fhqbbj{opacity:.55!important}.stb-scrollbar-indicator.svelte-fhqbbj{position:relative;width:100%;border-radius:4px;background-color:var(--spectrum-global-color-gray-500);min-height:2rem;z-index:2}.stb-scrollbar-indicator.svelte-fhqbbj:hover{cursor:pointer;background-color:var(--spectrum-global-color-gray-700)}.stb-scrollbar-indicator.dragging.svelte-fhqbbj,.stb-scrollbar-indicator.horizontal.dragging.svelte-fhqbbj{cursor:pointer;background-color:var(--spectrum-global-color-gray-700)!important}.stb-scrollbar-indicator.horizontal.svelte-fhqbbj{min-height:unset;min-width:2rem;height:100%}i.svelte-tfp4ht:hover{cursor:pointer}.isEntering.svelte-tfp4ht{gap:.5rem}.placeholder.svelte-tfp4ht{min-width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;color:var(--spectrum-global-color-gray-500)}.placeholder.svelte-tfp4ht:hover{color:var(--spectrum-global-color-gray-800);cursor:pointer}.sorted.svelte-tfp4ht{color:var(--spectrum-global-color-gray-800)}.filtered.svelte-tfp4ht{gap:.5rem;color:var(--spectrum-global-color-gray-800);font-weight:600;background-color:var(--spectrum-global-color-gray-100)}.sortable.svelte-tfp4ht{cursor:pointer}.sortable.svelte-tfp4ht:hover{filter:brightness(120%)}.selected.svelte-tfp4ht{color:var(--primaryColor);background-color:var(--spectrum-global-color-gray-75)}.searchControl.svelte-9gek43{display:flex;align-items:stretch;border-bottom:1px solid var(--spectrum-global-color-gray-300)}.options.svelte-9gek43{display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;color:var(--spectrum-global-color-gray-700)}.option.svelte-9gek43{min-height:1.75rem;display:flex;gap:.5rem;align-items:center;justify-content:space-between;cursor:pointer;padding:0 .5rem}.option.svelte-9gek43.selected{color:var(--spectrum-global-color-gray-800);font-weight:600}.option.svelte-9gek43.focused{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-800)}.option.svelte-9gek43>i{font-size:14px;color:var(--spectrum-global-color-green-400)}.option.svelte-9gek43>span{display:flex;align-items:center;gap:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option.svelte-9gek43>span>i{font-size:16px;color:var(--option-color)}.actionIcon.svelte-9gek43{height:100%;display:flex;justify-content:center;align-items:center;border-left:1px solid var(--spectrum-global-color-blue-500);min-width:2rem;font-size:16px}.actionIcon.svelte-9gek43:hover{cursor:pointer;background-color:var(--spectrum-global-color-gray-75);font-weight:800}.value.svelte-krsx9n{flex:auto;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.superCell{flex:auto;display:flex;align-items:center;position:relative;overflow:hidden;transition:all .13s}.superCell.multirow{align-items:stretch}.superCell:focus{outline:none}.superCell:hover .icon{color:var(--spectrum-global-color-blue-500)}.superCell:hover .value.controlIcon{color:var(--spectrum-global-color-gray-700)}.superCell.isDirty{border-left:2px solid var(--spectrum-global-color-orange-400)!important}.superCell .icon{position:absolute;left:.5rem;font-size:16px;color:var(--spectrum-global-color-gray-500)}.superCell .clearIcon{position:absolute;right:8px;color:var(--spectrum-global-color-red-500);cursor:pointer}.superCell .value{flex:auto;align-self:stretch;display:flex;align-items:center;min-width:0;overflow:hidden;padding:.25rem .5rem;gap:.5rem}.superCell .value:focus{outline:none}.superCell .value.placeholder{font-style:italic;font-weight:400;color:var(--spectrum-global-color-gray-500);justify-content:space-between;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.superCell .value.with-icon{padding-left:2rem!important}.superCell .value span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.superCell .value span.multiline{overflow:auto;white-space:normal;text-overflow:unset}.superCell .value .clearIcon,.superCell .value .endIcon{color:var(--spectrum-global-color-red-500);cursor:pointer;z-index:1}.superCell .value .controlIcon{color:var(--spectrum-global-color-gray-600);cursor:pointer}.superCell .value .items{flex:auto;display:flex;overflow:hidden;align-items:stretch;align-self:stretch;gap:.5rem}.superCell .value .items .item{display:flex;align-items:center;overflow:hidden}.superCell .value .items .item i{display:none}.superCell .value .items .item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.superCell .value .items.pills .item{background-color:var( --option-color, var(--spectrum-global-color-gray-300) );gap:.5rem;border-radius:4px;padding-left:.75rem;padding-right:.75rem}.superCell .value .items.pills .item i{display:none}.superCell .value .items.links .item{gap:.5rem;border-radius:4px;padding-left:.75rem;padding-right:.75rem;background-color:var( --option-color, var(--spectrum-global-color-gray-300) );transition:.13s}.superCell .value .items.links .item:hover{cursor:pointer;background-color:var( --option-color, var(--spectrum-global-color-blue-400) )}.superCell .value .items.links .item:hover i{display:none}.superCell .value .items.colorText .item{gap:.5rem;margin-top:4px;margin-bottom:4px}.superCell .value .items.colorText .item i{font-size:larger;color:var(--option-color);display:block}.superCell .value .items.isUser .item{background-color:var( --option-color, var(--spectrum-global-color-blue-100) );gap:.5rem;border-radius:4px;padding-left:.5rem;padding-right:.75rem}.superCell .value .items.isUser .item i{display:block}.superCell .value .item-count{border-radius:50%;background-color:var(--spectrum-global-color-gray-200);width:1.7rem;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.superCell.formInput{border-radius:2px;color:var(--spectrum-global-color-gray-800);border:1px solid var(--spectrum-global-color-gray-300);background:var(--spectrum-global-color-gray-50)}.superCell.formInput:focus-within{border:1px solid var(--spectrum-global-color-blue-400)!important}.superCell.formInput.inEdit{border:1px solid var(--spectrum-global-color-blue-400)!important}.superCell.formInput:hover:not(.disabled):not(.readonly){cursor:pointer;border:1px solid var(--spectrum-global-color-gray-400)}.superCell.formInput.disabled{background-color:var(--spectrum-global-color-gray-200)!important;color:var(--spectrum-global-color-gray-600)!important;cursor:not-allowed!important}.superCell.formInput.readonly:not(.disabled){background-color:var(--spectrum-global-color-gray-50);border:1px solid var(--spectrum-global-color-gray-50);color:var(--spectrum-global-color-gray-700);opacity:.9}.superCell.formInput.readonly:not(.disabled):focus-within{border:1px solid var(--spectrum-global-color-gray-200)!important;opacity:1}.superCell.formInput.error{border-color:var(--spectrum-global-color-red-400)!important}.superCell.tableCell{min-height:unset;border:1px solid transparent}.superCell.tableCell.inEdit{border-color:var(--spectrum-global-color-blue-500)}.superCell>.editor{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;white-space:nowrap;overflow:hidden;gap:.25rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;outline:none;border:none;color:inherit}.superCell>.editor:focus{outline:none;border:none}.superCell>.editor:hover{cursor:pointer}.superCell>.editor.placeholder{font-style:italic}.superCell>.editor.with-icon{padding-left:2rem}.superCell>.editor i{font-size:18px}.superCell.formInput.multirow{min-height:2rem;max-height:unset}.superCell.formInput.large{max-height:unset!important}.superCell.formInput.error.inEdit:focus-within{border:1px solid var(--spectrum-global-color-red-500)}.superCell.inline{position:relative;border:unset;border-radius:2px;min-height:1.8rem;min-width:unset}.superCell.inline.disabled{background-color:var(--spectrum-global-color-gray-100)!important;color:var(--spectrum-global-color-gray-600);cursor:not-allowed}.superCell.inline.readonly{background-color:var(--spectrum-global-color-gray-100);color:var(--spectrum-global-color-gray-600);cursor:not-allowed}.icon.svelte-vlp7xb{font-size:16px;color:var(--spectrum-global-color-green-400)}.time-picker.svelte-mzlxg7{font-size:1.1em;display:flex;align-items:center;width:fit-content;border:1px solid rgba(108,120,147,.3);border-radius:3px;margin:6px auto auto;font-variant-numeric:tabular-nums}span.svelte-mzlxg7{-webkit-user-select:all;user-select:all;outline:none;position:relative;z-index:1;padding:4px 0}span.svelte-mzlxg7:not(:focus)::selection{background-color:transparent}span.svelte-mzlxg7:first-child{padding-left:6px}span.svelte-mzlxg7:last-child{padding-right:6px}.date-time-picker.svelte-w239uu.svelte-w239uu{display:inline-block;color:var(--date-picker-foreground, #000000);background:var(--date-picker-background, #ffffff);user-select:none;-webkit-user-select:none;padding:.5rem;cursor:default;font-size:.75rem;border:1px solid rgba(103,113,137,.3);border-radius:3px;box-shadow:0 2px 6px #00000014,0 2px 6px #0000001c;outline:none;transition:all 80ms cubic-bezier(.4,0,.2,1)}.date-time-picker.svelte-w239uu.svelte-w239uu:focus{border-color:var(--date-picker-highlight-border, #0269f7);box-shadow:0 0 0 2px var(--date-picker-highlight-shadow, rgba(2, 105, 247, .4))}.tab-container.svelte-w239uu.svelte-w239uu{outline:none}.top.svelte-w239uu.svelte-w239uu{display:flex;justify-content:center;align-items:center;padding-bottom:.5rem}.dropdown.svelte-w239uu.svelte-w239uu{margin-left:.25rem;margin-right:.25rem;position:relative;display:flex}.dropdown.svelte-w239uu svg.svelte-w239uu{position:absolute;right:0;top:0;height:100%;width:8px;padding:0rem .5rem;pointer-events:none;box-sizing:content-box}.month.svelte-w239uu.svelte-w239uu,.year.svelte-w239uu.svelte-w239uu{flex-grow:1}svg.svelte-w239uu.svelte-w239uu{display:block;fill:var(--date-picker-foreground, #000000);opacity:.75;outline:none}.page-button.svelte-w239uu.svelte-w239uu{background-color:transparent;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:5px;box-sizing:border-box;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.page-button.svelte-w239uu.svelte-w239uu:hover{background-color:#80808014;border:1px solid rgba(128,128,128,.08)}.page-button.svelte-w239uu svg.svelte-w239uu{width:.68rem;height:.68rem}select.dummy-select.svelte-w239uu.svelte-w239uu{position:absolute;width:100%;pointer-events:none;outline:none;color:var(--date-picker-foreground, #000000);background-color:var(--date-picker-background, #ffffff);border-radius:3px}select.svelte-w239uu:focus+select.dummy-select.svelte-w239uu{border-color:var(--date-picker-highlight-border, #0269f7);box-shadow:0 0 0 2px var(--date-picker-highlight-shadow, rgba(2, 105, 247, .4))}select.svelte-w239uu.svelte-w239uu:not(.dummy-select){opacity:0}select.svelte-w239uu.svelte-w239uu{font-size:inherit;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;flex-grow:1;padding:0rem 1.3rem 0rem .35rem;height:1.5rem;margin:0;border:1px solid rgba(108,120,147,.3);outline:none;transition:all 80ms cubic-bezier(.4,0,.2,1);background-image:none}.header.svelte-w239uu.svelte-w239uu{display:flex;font-weight:600;padding-bottom:2px}.header-cell.svelte-w239uu.svelte-w239uu{width:1.875rem;text-align:center;flex-grow:1}.week.svelte-w239uu.svelte-w239uu{display:flex}.cell.svelte-w239uu.svelte-w239uu{display:flex;align-items:center;justify-content:center;width:2rem;height:1.94rem;flex-grow:1;border-radius:5px;box-sizing:border-box;border:2px solid transparent}.cell.svelte-w239uu.svelte-w239uu:hover{border:1px solid rgba(128,128,128,.08)}.cell.today.svelte-w239uu.svelte-w239uu{font-weight:600;border:2px solid var(--date-picker-today-border, rgba(128, 128, 128, .3))}.cell.svelte-w239uu.svelte-w239uu:hover{background-color:#80808014}.cell.disabled.svelte-w239uu.svelte-w239uu{visibility:hidden}.cell.disabled.svelte-w239uu.svelte-w239uu:hover{border:none;background-color:transparent}.cell.other-month.svelte-w239uu span.svelte-w239uu{opacity:.4}.cell.selected.svelte-w239uu.svelte-w239uu{color:var(--date-picker-selected-color, inherit);background:var(--date-picker-selected-background, rgba(2, 105, 247, .2));border:2px solid var(--date-picker-highlight-border, #0269f7)}.date-time-field.svelte-1vabmef{position:relative}input.svelte-1vabmef{color:var(--date-picker-foreground, #000000);background:var(--date-picker-background, #ffffff);min-width:0px;box-sizing:border-box;padding:4px 6px;margin:0;border:1px solid rgba(103,113,137,.3);border-radius:3px;width:var(--date-input-width, 150px);outline:none;transition:all 80ms cubic-bezier(.4,0,.2,1)}input.svelte-1vabmef:focus{border-color:var(--date-picker-highlight-border, #0269f7);box-shadow:0 0 0 2px var(--date-picker-highlight-shadow, rgba(2, 105, 247, .4))}input.svelte-1vabmef:disabled{opacity:.5}.invalid.svelte-1vabmef{border:1px solid rgba(249,47,114,.5);background-color:#f92f721a}.invalid.svelte-1vabmef:focus{border-color:#f92f72;box-shadow:0 0 0 2px #f92f7280}.picker.svelte-1vabmef{display:none;position:absolute;padding:1px;left:var(--picker-left-position);z-index:10}.picker.above.svelte-1vabmef{bottom:100%}.picker.visible.svelte-1vabmef{display:block}.control.svelte-lgt0u7.svelte-lgt0u7{flex:auto;flex-direction:column;display:flex;align-items:stretch;justify-content:space-around;gap:.25rem;padding:0rem .25rem .25rem;overflow-x:hidden}.control.svelte-lgt0u7.svelte-lgt0u7:focus{border:1px solid white}.searchControl.svelte-lgt0u7.svelte-lgt0u7{height:2rem;border-bottom:1px solid var(--spectrum-global-color-gray-300);display:flex;align-items:center;padding-left:.5rem;gap:.25rem}.searchControl.svelte-lgt0u7.svelte-lgt0u7>i{font-size:14px;transition:all .23s}.searchControl.svelte-lgt0u7.svelte-lgt0u7>input{height:100%;width:100%;outline:none;background:none;border:none;color:inherit;padding-left:.5rem;font-family:inherit;font-size:inherit}.searchControl.svelte-lgt0u7.svelte-lgt0u7>input.placeholder{font-style:italic;color:var(--spectrum-global-color-gray-600)}.listWrapper.svelte-lgt0u7.svelte-lgt0u7{flex:auto;display:flex;justify-content:stretch;align-content:stretch;gap:.25rem;overflow:hidden}.list.svelte-lgt0u7.svelte-lgt0u7{flex:1 1 50%;height:200px;overflow-y:auto;overflow-x:hidden;color:var(--spectrum-global-color-gray-800)}.listSelected.svelte-lgt0u7.svelte-lgt0u7{color:var(--spectrum-global-color-gray-800);border-left:1px solid var(--spectrum-global-color-gray-300);padding-left:.25rem}.options.svelte-lgt0u7.svelte-lgt0u7{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;overflow-y:auto;gap:0rem;min-width:0}.option.svelte-lgt0u7.svelte-lgt0u7{line-height:1.5rem;padding:.15rem .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;justify-content:space-between}.option.svelte-lgt0u7.svelte-lgt0u7>i{visibility:hidden}.option.svelte-lgt0u7.svelte-lgt0u7.wide:hover>i{visibility:visible;color:var(--spectrum-global-color-green-500)}.option.svelte-lgt0u7.svelte-lgt0u7.selected{background-color:var(--spectrum-global-color-gray-75);color:var(--spectrum-global-color-gray-900)}.option.svelte-lgt0u7.svelte-lgt0u7.selected>i{visibility:visible;color:var(--spectrum-global-color-green-500)}.option.svelte-lgt0u7.svelte-lgt0u7.highlighted{background-color:var(--spectrum-global-color-gray-200)}.options.svelte-lgt0u7>span.svelte-lgt0u7{color:var(--spectrum-global-color-gray-500);font-style:italic;flex:auto;display:flex;align-items:center;justify-content:center}.option.svelte-lgt0u7.svelte-lgt0u7:hover{background-color:var(--spectrum-global-color-gray-200);border-radius:4px;cursor:pointer}.spectrum-TreeView-item.svelte-1xxn7uq{transition:all .13s}.spectrum-TreeView-itemLink.svelte-1xxn7uq{display:flex;justify-content:space-between;align-items:center;gap:.25rem;max-height:1.75rem}i.svelte-1xxn7uq{transition:all .13s}.open.svelte-1xxn7uq{transform:rotate(90deg)}.control.svelte-dad66x{flex:auto;flex-direction:column;display:flex;align-items:stretch;justify-content:stretch;overflow-x:hidden;gap:.25rem;min-height:260px;max-height:260px}.search.svelte-dad66x{height:2rem;border-bottom:1px solid var(--spectrum-global-color-gray-300);display:flex;align-items:stretch}.superCell.svelte-riwj21 .value.multiline.svelte-riwj21{white-space:pre-wrap!important;text-overflow:unset!important;overflow:auto!important;font-family:monospace}.superCell.svelte-riwj21 .value.multiline span.svelte-riwj21{white-space:pre-wrap!important;text-overflow:unset!important;overflow:visible!important;height:8rem;width:100%}.superCell.svelte-riwj21 .editor.svelte-riwj21{width:100%;box-sizing:border-box}.wrapper.svelte-41zw5j.svelte-41zw5j{flex:auto;display:flex;align-items:center;gap:.5rem;white-space:nowrap}.pill.svelte-41zw5j.svelte-41zw5j{border:1px solid var(--spectrum-global-color-gray-500);padding:0rem .25rem;border-radius:3px;font-size:11px;display:flex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;justify-content:center}a.filename.svelte-41zw5j.svelte-41zw5j{width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:underline;color:var(--spectrum-global-color-blue-700)}.icon.svelte-41zw5j.svelte-41zw5j{aspect-ratio:1;color:var(--spectrum-global-color-gray-500)}.icon.svelte-41zw5j.svelte-41zw5j:hover{aspect-ratio:1;cursor:pointer}.option.svelte-41zw5j.svelte-41zw5j{display:flex;align-items:center;justify-content:stretch;gap:.5rem;padding:.25rem}.option.svelte-41zw5j.svelte-41zw5j:hover{background-color:var(--spectrum-global-color-gray-100)}.option.svelte-41zw5j:hover>.icon.svelte-41zw5j{color:var(--spectrum-global-color-red-500)}.option.svelte-41zw5j:hover>.pill.svelte-41zw5j{color:var(--spectrum-global-color-gray-800);background-color:var(--spectrum-global-color-gray-50);border:1px solid var(--spectrum-global-color-gray-800)}.options.svelte-41zw5j.svelte-41zw5j{display:flex;flex-direction:column;align-items:stretch;padding:.25rem;min-width:15rem}.attachment.svelte-41zw5j.svelte-41zw5j{display:flex;align-items:center;border:1px solid darkcyan;border-radius:4px;height:50%;padding:0 .5rem;min-width:15rem}.attachment.svelte-41zw5j.svelte-41zw5j:hover{border:1px solid lime}.new.svelte-41zw5j.svelte-41zw5j{text-align:center;padding:.5rem 1rem;color:var(--spectrum-global-color-blue-700);text-decoration:underline;border:1px dashed var(--spectrum-global-color-blue-400)}.skeleton.svelte-i7mw17{flex:auto;width:100%;align-self:stretch;opacity:0;display:flex;align-items:stretch;justify-content:stretch;background-color:var(--spectrum-global-color-gray-200)!important;overflow:hidden;position:relative;animation:svelte-i7mw17-fadeIn .13s ease 0s 1 normal forwards}.children.svelte-i7mw17{flex:auto;pointer-events:none;opacity:.65;background-image:linear-gradient(90deg,#fff0 0,#ffffff26 20%,#fff3 60%,#ffffff26 80%,#fff0);animation:svelte-i7mw17-shimmer 2s infinite}@keyframes svelte-i7mw17-fadeIn{0%{opacity:0}to{opacity:.75}}@keyframes svelte-i7mw17-shimmer{0%{transform:translate(-80%)}to{transform:translate(100%)}}.row-buttons.svelte-ndsk96{display:flex;flex-direction:row;align-items:center;padding-left:.5rem}.action-menu.svelte-ndsk96{min-width:160px;display:flex;flex-direction:column;align-items:stretch;padding:.25rem}.selection.svelte-gq5jrp{flex:auto;padding-left:.75rem;padding-right:.75rem;gap:1rem;font-size:14px;font-weight:500;align-items:center}.selection.svelte-gq5jrp.is-hovered>.delete{color:var(--spectrum-global-color-red-700)}.selection.svelte-gq5jrp.is-selected>.delete{color:var(--spectrum-global-color-red-700)}.selection.svelte-gq5jrp.is-hovered>i{color:var(--spectrum-global-color-gray-700)}i.svelte-gq5jrp{font-size:16px;color:var(--spectrum-global-color-gray-500)}i.svelte-gq5jrp:hover{cursor:pointer}.action-menu.svelte-6lzro5{min-width:160px;display:flex;flex-direction:column;align-items:stretch;padding:.25rem}.container.svelte-10y93gh.svelte-10y93gh{position:relative;padding:.5rem .75rem .75rem;display:flex;flex-direction:column;gap:16px;background-color:var(--spectrum-global-color-gray-50)}.preview-swatch.svelte-10y93gh.svelte-10y93gh{position:relative;transition:border-color .13s ease-in-out}.preview-swatch.svelte-10y93gh.svelte-10y93gh.circle{border-radius:50%}.preview-swatch.svelte-10y93gh.svelte-10y93gh:hover:not(.readonly){cursor:pointer}.preview-fill.svelte-10y93gh.svelte-10y93gh{width:100%;height:100%;border-radius:4px;position:absolute;top:0;left:0;display:grid;place-items:center;border:1px solid var(--spectrum-global-color-gray-300)}.preview-fill.svelte-10y93gh.svelte-10y93gh.circle{border-radius:50%}.preview-fill.placeholder.svelte-10y93gh.svelte-10y93gh{border:1px solid var(--spectrum-global-color-gray-300);--squareSize:8px;--squareColor:var(--spectrum-global-color-gray-200);background-color:var(--spectrum-global-color-gray-50);background-image:linear-gradient(45deg,var(--squareColor) 25%,transparent 25%),linear-gradient(135deg,var(--spectrum-global-color-gray-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--squareColor) 75%),linear-gradient(135deg,transparent 75%,var(--squareColor) 75%);background-size:calc(2 * var(--squareSize)) calc(2 * var(--squareSize));background-position:0 0,var(--squareSize) 0,var(--squareSize) calc(-1 * var(--squareSize)),0 calc(-1 * var(--squareSize))}.preview-fill.placeholder.svelte-10y93gh.svelte-10y93gh.circle{border-radius:50%}.size--S.svelte-10y93gh.svelte-10y93gh{width:20px;height:20px}.size--M.svelte-10y93gh.svelte-10y93gh{width:30px;height:30px}.size--L.svelte-10y93gh.svelte-10y93gh{width:48px;height:48px}.colors.svelte-10y93gh.svelte-10y93gh{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.color-swatch.svelte-10y93gh.svelte-10y93gh{height:16px;width:16px;border-radius:50%;position:relative}.color-swatch.svelte-10y93gh.svelte-10y93gh:hover{cursor:pointer;box-shadow:0 0 2px 2px var(--spectrum-global-color-gray-300)}.color-fill.svelte-10y93gh.svelte-10y93gh{width:100%;height:100%;border-radius:50%;display:grid;place-items:center}.ri-check-line.svelte-10y93gh.svelte-10y93gh{font-size:12px;font-weight:700}.ri-palette-line.svelte-10y93gh.svelte-10y93gh{font-size:12px;margin-right:4px}.heading-icon.svelte-10y93gh.svelte-10y93gh{vertical-align:middle}.heading.svelte-10y93gh.svelte-10y93gh{font-size:12px;font-weight:600;letter-spacing:.14px;text-transform:uppercase;grid-column:1 / 5;margin-bottom:8px;display:flex;align-items:center}.custom.svelte-10y93gh.svelte-10y93gh{flex:1;display:flex;align-items:center;gap:4px;justify-content:space-between}.category--custom.svelte-10y93gh .heading.svelte-10y93gh{margin-bottom:4px}.custom-input.svelte-10y93gh.svelte-10y93gh{flex:1;padding:2px 4px;border:none;border-bottom:1px solid var(--spectrum-global-color-gray-200);border-radius:2px;font-size:12px;height:20px;width:80px;background-color:inherit;color:var(--spectrum-global-color-gray-700);font-style:italic}.custom-input.svelte-10y93gh.svelte-10y93gh:focus{outline:none;border-color:var(--spectrum-global-color-blue-500)}.clear-value.svelte-10y93gh.svelte-10y93gh{background:none;border:none;color:var(--spectrum-global-color-gray-900);cursor:pointer;font-size:13px;padding:0;margin:0}svelte-virtual-list-viewport.svelte-1tqh76q{position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch;display:block}svelte-virtual-list-contents.svelte-1tqh76q,svelte-virtual-list-row.svelte-1tqh76q{display:block}svelte-virtual-list-row.svelte-1tqh76q{overflow:hidden}.preview-icon.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--spectrum-global-color-gray-300);border-radius:4px;background-color:var(--spectrum-global-color-gray-75);cursor:pointer;font-size:1rem;transition:all .2s ease-in-out;padding:2px}.preview-icon.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:hover:not(.readonly){border-color:var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-100)}.preview-icon.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:focus{outline:none}.preview-icon.circle.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{border-radius:50%}.preview-icon.readonly.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{cursor:default;opacity:.7}.empty-state.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{color:var(--spectrum-global-color-gray-500)}.icon-picker.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{max-height:400px;max-width:14rem;display:flex;flex-direction:column;background:var(--spectrum-global-color-gray-50);border-radius:4px;overflow:hidden;gap:.5rem}.icon-picker.with-categories.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{max-width:20rem}.header.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:flex;flex-direction:column;gap:.5rem}.search-container.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{position:relative}.search-icon.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--spectrum-global-color-gray-500);pointer-events:none}.search-input.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{width:100%;padding:12px 32px;background:transparent;border:none;border-bottom:1px solid var(--spectrum-global-color-gray-300);border-radius:0;font-size:14px;color:var(--spectrum-global-color-gray-700);outline:none;transition:border-color .2s ease}.search-input.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:focus{outline:none}.clear-search.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--spectrum-global-color-gray-500);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.category-tabs.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:flex;overflow-x:auto;gap:4px;scrollbar-width:none;padding:.5rem;padding-bottom:none}.category-tabs.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8::-webkit-scrollbar{display:none}.category-tabs.svelte-1x42gg8 button.svelte-1x42gg8.svelte-1x42gg8{padding:6px 12px;border:none;background:none;border-bottom:2px solid transparent;font-size:12px;font-weight:500;color:var(--spectrum-global-color-gray-700);cursor:pointer;white-space:nowrap;transition:all .2s ease;height:1.75rem}.category-tabs.svelte-1x42gg8 button.svelte-1x42gg8.svelte-1x42gg8:hover{background-color:var(--spectrum-global-color-gray-200)}.category-tabs.svelte-1x42gg8 button.selected.svelte-1x42gg8.svelte-1x42gg8{color:var(--spectrum-global-color-blue-600);border-bottom:2px solid var(--spectrum-global-color-blue-600);background:none}.icons-grid-container.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{position:relative;overflow:hidden;width:100%;padding-left:.5rem}.icons-row.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:grid;grid-template-columns:repeat(6,1fr);width:100%;box-sizing:border-box;height:32px;align-items:center}.with-categories.svelte-1x42gg8 .icons-row.svelte-1x42gg8.svelte-1x42gg8{grid-template-columns:repeat(9,1fr)}.icon-button.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;border-radius:4px;cursor:pointer;color:var(--spectrum-global-color-gray-700);width:32px;height:32px;box-sizing:border-box;font-size:20px;opacity:.9}.icon-button.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:hover{background-color:var(--spectrum-global-color-gray-100);color:var(--spectrum-global-color-gray-800);opacity:1}.icon-button.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:focus{outline:none}.icon-button.selected.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{color:var(--spectrum-global-color-gray-800);border:1px dotted var(--spectrum-global-color-blue-500);background-color:var(--spectrum-global-color-gray-200)}.no-results.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:var(--spectrum-global-color-gray-600);text-align:center}.no-results.svelte-1x42gg8 i.svelte-1x42gg8.svelte-1x42gg8{font-size:24px;margin-bottom:8px;color:var(--spectrum-global-color-gray-500)}.footer.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{padding:0 .5rem;border-top:1px solid var(--spectrum-global-color-gray-200);height:2rem;display:flex;justify-content:space-between;align-items:center;font-size:.75rem}.footer-left.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:flex;align-items:center;height:100%}.checkbox-container.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:flex;align-items:center;position:relative;padding-left:20px;margin:0;cursor:pointer;height:100%;color:var(--spectrum-global-color-gray-700);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.checkbox-container.svelte-1x42gg8 input.svelte-1x42gg8.svelte-1x42gg8{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{position:absolute;top:50%;left:0;transform:translateY(-50%);height:12px;width:12px;background-color:var(--spectrum-global-color-gray-100);border:1px solid var(--spectrum-global-color-gray-400);border-radius:2px;transition:all .2s ease}.checkbox-container.svelte-1x42gg8:hover input.svelte-1x42gg8~.checkmark.svelte-1x42gg8{border-color:var(--spectrum-global-color-gray-600)}.checkbox-container.svelte-1x42gg8 input.svelte-1x42gg8:checked~.checkmark.svelte-1x42gg8{background-color:var(--spectrum-global-color-blue-500);border-color:var(--spectrum-global-color-blue-500)}.checkmark.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:after{content:"";position:absolute;display:none}.checkbox-container.svelte-1x42gg8 input.svelte-1x42gg8:checked~.checkmark.svelte-1x42gg8:after{display:block}.checkbox-container.svelte-1x42gg8 .checkmark.svelte-1x42gg8.svelte-1x42gg8:after{left:3px;top:0;width:4px;height:7px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-label.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{margin-left:4px}.clear-button.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--spectrum-global-color-gray-700);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px}.clear-button.svelte-1x42gg8.svelte-1x42gg8.svelte-1x42gg8:hover,.rel-pills.svelte-1uxy76n,.rel-bb-reference.svelte-1uxy76n{background-color:var(--spectrum-global-color-gray-200)}.actionIcon.svelte-1uxy76n{height:100%;display:flex;justify-content:center;align-items:center;min-width:2rem;font-size:16px;transition:all .13s;margin-right:8px}.actionIcon.svelte-1uxy76n:hover{cursor:pointer;background-color:var(--spectrum-global-color-gray-75);color:var(--spectrum-global-color-red-500);font-weight:800}.loader.svelte-1uxy76n{width:120px;height:20px;background:linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%) #f2f2f2;background-size:300% 100%;animation:svelte-1uxy76n-l1 1s infinite linear}@keyframes svelte-1uxy76n-l1{0%{background-position:right}}.control.svelte-18xmfzg{flex:auto;flex-direction:column;display:flex;align-items:stretch;justify-content:stretch;overflow-x:hidden;padding:.25rem}.options.svelte-1rukzy3.svelte-1rukzy3{flex:auto;display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;color:var(--spectrum-global-color-gray-700)}.option.svelte-1rukzy3.svelte-1rukzy3{min-height:1.75rem;display:flex;gap:.5rem;align-items:center;justify-content:space-between;cursor:pointer;padding:0 .5rem}.option.svelte-1rukzy3.svelte-1rukzy3.selected{display:none;color:var(--spectrum-global-color-gray-800);background-color:var(--spectrum-global-color-gray-75)}.option.svelte-1rukzy3.svelte-1rukzy3.focused{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-800);border-radius:4px}.option.svelte-1rukzy3>span.svelte-1rukzy3{display:flex;align-items:center;gap:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option.svelte-1rukzy3>span.svelte-1rukzy3>i{color:var(--option-color);font-size:larger}.radios.svelte-1rukzy3.svelte-1rukzy3{flex:auto;display:flex;flex-wrap:wrap;justify-items:flex-start;color:var(--spectrum-global-color-gray-700);font-size:13px}.radios.svelte-1rukzy3.svelte-1rukzy3.formInput>.switch{padding:0 .5rem}.radios.svelte-1rukzy3.svelte-1rukzy3.inlineInput>.switch{padding:0rem .25rem}.radios.svelte-1rukzy3.svelte-1rukzy3.inlineInput>.switch.toggleAll{margin-bottom:.25rem;padding-bottom:.25rem;border-bottom:1px solid var(--spectrum-global-color-gray-300)}.radios.column.svelte-1rukzy3.svelte-1rukzy3{gap:0rem;flex-direction:column;min-width:0}.radio.svelte-1rukzy3.svelte-1rukzy3{height:1.75rem;display:flex;gap:.25rem;align-items:center;cursor:pointer}.radio.svelte-1rukzy3.svelte-1rukzy3.focused{background-color:var(--spectrum-global-color-gray-200)!important;color:var(--spectrum-global-color-gray-800)}.radio.svelte-1rukzy3.svelte-1rukzy3.selected{color:var(--spectrum-global-color-gray-800)}.switch.svelte-1rukzy3.svelte-1rukzy3{width:100%;display:flex;gap:.35rem;align-items:center;cursor:pointer;height:1.75rem}.switch.svelte-1rukzy3.svelte-1rukzy3>i{color:var(--spectrum-global-color-gray-600);min-width:13px;font-size:13px}.switch.svelte-1rukzy3.svelte-1rukzy3>i.no-icon{display:none}.switch.svelte-1rukzy3.svelte-1rukzy3>.text{flex:1 1 auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;opacity:.95}.switch.svelte-1rukzy3.svelte-1rukzy3>.text.title{font-size:14px;font-weight:600}.switch.svelte-1rukzy3.svelte-1rukzy3.toggleAll{border-bottom:1px solid var(--spectrum-global-color-gray-200);height:2rem}.switch.svelte-1rukzy3.svelte-1rukzy3.focused{background-color:var(--spectrum-global-color-gray-200)!important;color:var(--spectrum-global-color-gray-800);border-radius:4px}.switch.svelte-1rukzy3.svelte-1rukzy3.selected{color:var(--spectrum-global-color-gray-800)}.switch.svelte-1rukzy3.svelte-1rukzy3.selected>i{color:var(--option-color, var(--spectrum-global-color-gray-700))}.switch.svelte-1rukzy3.svelte-1rukzy3.selected>.text{opacity:1}.switch.svelte-1rukzy3>.spectrum-Switch.svelte-1rukzy3{margin-right:unset!important}.radio.svelte-1rukzy3>i.svelte-1rukzy3{font-size:16px}
|
package/package.json
ADDED
@@ -0,0 +1,117 @@
|
|
1
|
+
{
|
2
|
+
"name": "@poirazis/supercomponents-shared",
|
3
|
+
"version": "0.0.1",
|
4
|
+
"description": "Shared Svelte components library",
|
5
|
+
"type": "module",
|
6
|
+
"main": "dist/index.js",
|
7
|
+
"module": "dist/index.js",
|
8
|
+
"svelte": "src/index.js",
|
9
|
+
"exports": {
|
10
|
+
".": {
|
11
|
+
"types": "./dist/index.d.ts",
|
12
|
+
"svelte": "./src/index.ts",
|
13
|
+
"default": "./dist/index.js"
|
14
|
+
},
|
15
|
+
"./SuperTable/SuperTable.css": "./src/lib/SuperTable/SuperTable.css",
|
16
|
+
"./SuperButton": {
|
17
|
+
"types": "./dist/SuperButton/index.d.ts",
|
18
|
+
"svelte": "./src/lib/SuperButton/SuperButton.svelte",
|
19
|
+
"default": "./dist/SuperButton/index.js"
|
20
|
+
},
|
21
|
+
"./SuperFieldLabel": {
|
22
|
+
"types": "./dist/SuperFieldLabel/index.d.ts",
|
23
|
+
"svelte": "./src/lib/SuperFieldLabel/SuperFieldLabel.svelte",
|
24
|
+
"default": "./dist/SuperFieldLabel/index.js"
|
25
|
+
},
|
26
|
+
"./SuperList": {
|
27
|
+
"types": "./dist/SuperList/index.d.ts",
|
28
|
+
"svelte": "./src/lib/SuperList/SuperList.svelte",
|
29
|
+
"default": "./dist/SuperList/index.js"
|
30
|
+
},
|
31
|
+
"./SuperPopover": {
|
32
|
+
"types": "./dist/SuperPopover/index.d.ts",
|
33
|
+
"svelte": "./src/lib/SuperPopover/SuperPopover.svelte",
|
34
|
+
"default": "./dist/SuperPopover/index.js"
|
35
|
+
},
|
36
|
+
"./SuperTable": {
|
37
|
+
"types": "./dist/SuperTable/index.d.ts",
|
38
|
+
"svelte": "./src/lib/SuperTable/SuperTable.svelte",
|
39
|
+
"default": "./dist/SuperTable/index.js"
|
40
|
+
},
|
41
|
+
"./SuperTableCells": {
|
42
|
+
"types": "./dist/SuperTableCells/index.d.ts",
|
43
|
+
"svelte": "./src/lib/SuperTableCells/index.js",
|
44
|
+
"default": "./dist/SuperTableCells/index.js"
|
45
|
+
},
|
46
|
+
"./SuperTableColumn": {
|
47
|
+
"types": "./dist/SuperTableColumn/index.d.ts",
|
48
|
+
"svelte": "./src/lib/SuperTableColumn/index.js",
|
49
|
+
"default": "./dist/SuperTableColumn/index.js"
|
50
|
+
},
|
51
|
+
"./SuperTree": {
|
52
|
+
"types": "./dist/SuperTree/index.d.ts",
|
53
|
+
"svelte": "./src/lib/SuperTree/SuperTree.svelte",
|
54
|
+
"default": "./dist/SuperTree/index.js"
|
55
|
+
},
|
56
|
+
"./Actions": {
|
57
|
+
"types": "./dist/Actions/index.d.ts",
|
58
|
+
"default": "./dist/Actions/index.js"
|
59
|
+
},
|
60
|
+
"./constants": {
|
61
|
+
"types": "./dist/constants.d.ts",
|
62
|
+
"default": "./dist/constants.js"
|
63
|
+
}
|
64
|
+
},
|
65
|
+
"scripts": {
|
66
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
67
|
+
"build": "vite build",
|
68
|
+
"watch": "vite build --watch",
|
69
|
+
"dev": "vite",
|
70
|
+
"prepare": "npm run build"
|
71
|
+
},
|
72
|
+
"files": [
|
73
|
+
"dist",
|
74
|
+
"src"
|
75
|
+
],
|
76
|
+
"author": "Michael Poirazi",
|
77
|
+
"license": "MIT",
|
78
|
+
"repository": {
|
79
|
+
"type": "git",
|
80
|
+
"url": "https://github.com/poirazis/supercomponents-shared.git"
|
81
|
+
},
|
82
|
+
"keywords": [
|
83
|
+
"svelte",
|
84
|
+
"components",
|
85
|
+
"ui",
|
86
|
+
"supercomponents"
|
87
|
+
],
|
88
|
+
"publishConfig": {
|
89
|
+
"access": "public"
|
90
|
+
},
|
91
|
+
"peerDependencies": {
|
92
|
+
"svelte": "^4.2.0"
|
93
|
+
},
|
94
|
+
"dependencies": {
|
95
|
+
"@sveltejs/svelte-virtual-list": "^3.0.1",
|
96
|
+
"date-picker-svelte": "^2.16.0",
|
97
|
+
"svelte-dnd-action": "^0.9.61",
|
98
|
+
"svelte-fsm": "^1.2.0",
|
99
|
+
"svelte-portal": "^2.2.1",
|
100
|
+
"svelte-virtual-list": "^3.0.1",
|
101
|
+
"shortid": "^2.2.17"
|
102
|
+
},
|
103
|
+
"devDependencies": {
|
104
|
+
"@sveltejs/package": "^2.3.11",
|
105
|
+
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
106
|
+
"@tsconfig/svelte": "^5.0.4",
|
107
|
+
"sass": "^1.89.0",
|
108
|
+
"svelte": "^4.2.20",
|
109
|
+
"svelte-check": "^3.8.6",
|
110
|
+
"svelte-preprocess": "^5.1.4",
|
111
|
+
"typescript": "^5.8.3",
|
112
|
+
"vite": "^5.4.19"
|
113
|
+
},
|
114
|
+
"trustedDependencies": [
|
115
|
+
"svelte-preprocess"
|
116
|
+
]
|
117
|
+
}
|
package/src/index.js
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
// Export all components for easy importing
|
2
|
+
|
3
|
+
// Button components
|
4
|
+
export { default as SuperButton } from "./lib/SuperButton/SuperButton.svelte";
|
5
|
+
|
6
|
+
// Form components
|
7
|
+
export { default as SuperFieldLabel } from "./lib/SuperFieldLabel/SuperFieldLabel.svelte";
|
8
|
+
|
9
|
+
// List components
|
10
|
+
export { default as SuperList } from "./lib/SuperList/SuperList.svelte";
|
11
|
+
|
12
|
+
// Popover components
|
13
|
+
export { default as SuperPopover } from "./lib/SuperPopover/SuperPopover.svelte";
|
14
|
+
|
15
|
+
// Table components
|
16
|
+
export { default as SuperTable } from "./lib/SuperTable/SuperTable.svelte";
|
17
|
+
export { default as SuperTableColumn } from "./lib/SuperTableColumn/SuperTableColumn.svelte";
|
18
|
+
|
19
|
+
// Tree components
|
20
|
+
export { default as SuperTree } from "./lib/SuperTree/SuperTree.svelte";
|
21
|
+
|
22
|
+
// Export all SuperTableCells components
|
23
|
+
export * from "./lib/SuperTableCells/index.js";
|
24
|
+
|
25
|
+
// Re-export constants
|
26
|
+
export { defaultOperatorMap } from "./lib/SuperTable/constants";
|
27
|
+
|
28
|
+
// Export Actions (JavaScript functions)
|
29
|
+
export * from "./lib/Actions/index.js";
|
package/src/index.ts
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
// Export all components for easy importing
|
2
|
+
|
3
|
+
// Button components
|
4
|
+
export { default as SuperButton } from './lib/SuperButton/SuperButton.svelte';
|
5
|
+
|
6
|
+
// Form components
|
7
|
+
export { default as SuperFieldLabel } from './lib/SuperFieldLabel/SuperFieldLabel.svelte';
|
8
|
+
|
9
|
+
// List components
|
10
|
+
export { default as SuperList } from './lib/SuperList/SuperList.svelte';
|
11
|
+
|
12
|
+
// Popover components
|
13
|
+
export { default as SuperPopover } from './lib/SuperPopover/SuperPopover.svelte';
|
14
|
+
|
15
|
+
// Table components
|
16
|
+
export { default as SuperTable } from './lib/SuperTable/SuperTable.svelte';
|
17
|
+
|
18
|
+
// Tree components
|
19
|
+
export { default as SuperTree } from './lib/SuperTree/SuperTree.svelte';
|
20
|
+
|
21
|
+
// Export all SuperTableCells components
|
22
|
+
export * from './lib/SuperTableCells/index.js';
|
23
|
+
|
24
|
+
// Export all SuperTableColumn components
|
25
|
+
export * from './lib/SuperTableColumn/index.js';
|
26
|
+
|
27
|
+
// Re-export constants
|
28
|
+
export * from './lib/SuperTable/constants';
|
29
|
+
|
30
|
+
// Export Actions (JavaScript functions)
|
31
|
+
export * from './lib/Actions/index.js';
|
@@ -0,0 +1,14 @@
|
|
1
|
+
function resize({ target }) {
|
2
|
+
target.style.height = "1px"
|
3
|
+
target.style.height = +target.scrollHeight + "px"
|
4
|
+
}
|
5
|
+
|
6
|
+
export default function text_area_resize(el) {
|
7
|
+
resize({ target: el })
|
8
|
+
el.style.overflow = "hidden"
|
9
|
+
el.addEventListener("input", resize)
|
10
|
+
|
11
|
+
return {
|
12
|
+
destroy: () => el.removeEventListener("input", resize),
|
13
|
+
}
|
14
|
+
}
|
@@ -0,0 +1,80 @@
|
|
1
|
+
const ignoredClasses = [
|
2
|
+
".flatpickr-calendar",
|
3
|
+
".spectrum-Popover",
|
4
|
+
".download-js-link",
|
5
|
+
]
|
6
|
+
let clickHandlers = []
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Handle a body click event
|
10
|
+
*/
|
11
|
+
const handleClick = event => {
|
12
|
+
// Ignore click if this is an ignored class
|
13
|
+
if (event.target.closest('[data-ignore-click-outside="true"]')) {
|
14
|
+
return
|
15
|
+
}
|
16
|
+
for (let className of ignoredClasses) {
|
17
|
+
if (event.target.closest(className)) {
|
18
|
+
return
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
// Process handlers
|
23
|
+
clickHandlers.forEach(handler => {
|
24
|
+
if (handler.element.contains(event.target)) {
|
25
|
+
return
|
26
|
+
}
|
27
|
+
|
28
|
+
// Ignore clicks for modals, unless the handler is registered from a modal
|
29
|
+
const sourceInModal = handler.anchor.closest(".spectrum-Underlay") != null
|
30
|
+
const clickInModal = event.target.closest(".spectrum-Underlay") != null
|
31
|
+
if (clickInModal && !sourceInModal) {
|
32
|
+
return
|
33
|
+
}
|
34
|
+
|
35
|
+
handler.callback?.(event)
|
36
|
+
})
|
37
|
+
}
|
38
|
+
document.documentElement.addEventListener("click", handleClick, true)
|
39
|
+
document.documentElement.addEventListener("contextmenu", handleClick, true)
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Adds or updates a click handler
|
43
|
+
*/
|
44
|
+
const updateHandler = (id, element, anchor, callback) => {
|
45
|
+
let existingHandler = clickHandlers.find(x => x.id === id)
|
46
|
+
if (!existingHandler) {
|
47
|
+
clickHandlers.push({ id, element, anchor, callback })
|
48
|
+
} else {
|
49
|
+
existingHandler.callback = callback
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
/**
|
54
|
+
* Removes a click handler
|
55
|
+
*/
|
56
|
+
const removeHandler = id => {
|
57
|
+
clickHandlers = clickHandlers.filter(x => x.id !== id)
|
58
|
+
}
|
59
|
+
|
60
|
+
/**
|
61
|
+
* Svelte action to apply a click outside handler for a certain element
|
62
|
+
* opts.anchor is an optional param specifying the real root source of the
|
63
|
+
* component being observed. This is required for things like popovers, where
|
64
|
+
* the element using the clickoutside action is the popover, but the popover is
|
65
|
+
* rendered at the root of the DOM somewhere, whereas the popover anchor is the
|
66
|
+
* element we actually want to consider when determining the source component.
|
67
|
+
*/
|
68
|
+
export default (element, opts) => {
|
69
|
+
const id = Math.random()
|
70
|
+
const update = newOpts => {
|
71
|
+
const callback = newOpts?.callback || newOpts
|
72
|
+
const anchor = newOpts?.anchor || element
|
73
|
+
updateHandler(id, element, anchor, callback)
|
74
|
+
}
|
75
|
+
update(opts)
|
76
|
+
return {
|
77
|
+
update,
|
78
|
+
destroy: () => removeHandler(id),
|
79
|
+
}
|
80
|
+
}
|
@@ -0,0 +1,129 @@
|
|
1
|
+
export default function positionDropdown(element, opts) {
|
2
|
+
let resizeObserver;
|
3
|
+
let latestOpts = opts;
|
4
|
+
|
5
|
+
// We need a static reference to this function so that we can properly
|
6
|
+
// clean up the scroll listener.
|
7
|
+
const scrollUpdate = () => {
|
8
|
+
updatePosition(latestOpts);
|
9
|
+
};
|
10
|
+
|
11
|
+
// Updates the position of the dropdown
|
12
|
+
const updatePosition = (opts) => {
|
13
|
+
const {
|
14
|
+
anchor,
|
15
|
+
align,
|
16
|
+
maxHeight,
|
17
|
+
maxWidth,
|
18
|
+
minWidth = 0,
|
19
|
+
useAnchorWidth,
|
20
|
+
offset = 5,
|
21
|
+
customUpdate,
|
22
|
+
offsetBelow,
|
23
|
+
} = opts;
|
24
|
+
if (!anchor) {
|
25
|
+
return;
|
26
|
+
}
|
27
|
+
|
28
|
+
// Compute bounds
|
29
|
+
const anchorBounds = anchor.getBoundingClientRect();
|
30
|
+
const elementBounds = element.getBoundingClientRect();
|
31
|
+
let styles = {
|
32
|
+
maxHeight: null,
|
33
|
+
minWidth: null,
|
34
|
+
maxWidth,
|
35
|
+
left: null,
|
36
|
+
top: null,
|
37
|
+
};
|
38
|
+
|
39
|
+
if (typeof customUpdate === "function") {
|
40
|
+
styles = customUpdate(anchorBounds, elementBounds, styles);
|
41
|
+
} else {
|
42
|
+
// Determine vertical styles
|
43
|
+
if (align === "right-outside" || align === "left-outside") {
|
44
|
+
styles.top = anchorBounds.top;
|
45
|
+
} else if (window.innerHeight - anchorBounds.bottom < (maxHeight || 50)) {
|
46
|
+
styles.top = anchorBounds.top - elementBounds.height - offset;
|
47
|
+
styles.maxHeight = maxHeight || 240;
|
48
|
+
} else {
|
49
|
+
styles.top = anchorBounds.bottom + (offsetBelow || offset);
|
50
|
+
styles.maxHeight =
|
51
|
+
maxHeight || window.innerHeight - anchorBounds.bottom - 20;
|
52
|
+
}
|
53
|
+
|
54
|
+
// Determine horizontal styles
|
55
|
+
if (!maxWidth && useAnchorWidth) {
|
56
|
+
styles.maxWidth = anchorBounds.width;
|
57
|
+
}
|
58
|
+
if (useAnchorWidth) {
|
59
|
+
styles.minWidth = Math.max(minWidth, anchorBounds.width);
|
60
|
+
} else if (minWidth) {
|
61
|
+
styles.minWidth = minWidth;
|
62
|
+
}
|
63
|
+
|
64
|
+
if (align === "right") {
|
65
|
+
styles.left =
|
66
|
+
anchorBounds.left + anchorBounds.width - elementBounds.width;
|
67
|
+
} else if (align === "right-outside") {
|
68
|
+
styles.left = anchorBounds.right + offset;
|
69
|
+
} else if (align === "left-outside") {
|
70
|
+
styles.left = anchorBounds.left - elementBounds.width - offset;
|
71
|
+
} else {
|
72
|
+
styles.left = anchorBounds.left;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
// Apply styles
|
77
|
+
Object.entries(styles).forEach(([style, value]) => {
|
78
|
+
if (value != null) {
|
79
|
+
element.style[style] = `${value.toFixed(0)}px`;
|
80
|
+
} else {
|
81
|
+
element.style[style] = null;
|
82
|
+
}
|
83
|
+
});
|
84
|
+
};
|
85
|
+
|
86
|
+
// The actual svelte action callback which creates observers on the relevant
|
87
|
+
// DOM elements
|
88
|
+
const update = (newOpts) => {
|
89
|
+
latestOpts = newOpts;
|
90
|
+
|
91
|
+
// Cleanup old state
|
92
|
+
if (resizeObserver) {
|
93
|
+
resizeObserver.disconnect();
|
94
|
+
}
|
95
|
+
|
96
|
+
// Do nothing if no anchor
|
97
|
+
const { anchor } = newOpts;
|
98
|
+
if (!anchor) {
|
99
|
+
return;
|
100
|
+
}
|
101
|
+
|
102
|
+
// Observe both anchor and element and resize the popover as appropriate
|
103
|
+
resizeObserver = new ResizeObserver(() => updatePosition(newOpts));
|
104
|
+
resizeObserver.observe(anchor);
|
105
|
+
resizeObserver.observe(element);
|
106
|
+
resizeObserver.observe(document.body);
|
107
|
+
};
|
108
|
+
|
109
|
+
// Apply initial styles which don't need to change
|
110
|
+
element.style.position = "absolute";
|
111
|
+
element.style.zIndex = "9999";
|
112
|
+
|
113
|
+
// Set up a scroll listener
|
114
|
+
document.addEventListener("scroll", scrollUpdate, true);
|
115
|
+
|
116
|
+
// Perform initial update
|
117
|
+
update(opts);
|
118
|
+
|
119
|
+
return {
|
120
|
+
update,
|
121
|
+
destroy() {
|
122
|
+
// Cleanup
|
123
|
+
if (resizeObserver) {
|
124
|
+
resizeObserver.disconnect();
|
125
|
+
}
|
126
|
+
document.removeEventListener("scroll", scrollUpdate, true);
|
127
|
+
},
|
128
|
+
};
|
129
|
+
}
|