@jupytergis/base 0.5.0 → 0.6.1

package/style/shared/dropdownMenu.css

@@ -0,0 +1,240 @@
+@keyframes animate-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes animate-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.jgis-dropdown-menu-sub-trigger {
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.jgis-dropdown-menu-sub-trigger:focus {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color0),
+    transparent 90%
+  );
+}
+
+.jgis-dropdown-menu-sub-trigger[data-state='open'] {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color0),
+    transparent 90%
+  );
+}
+
+.jgis-dropdown-menu-sub-content {
+  display: flex;
+  flex-direction: column;
+  cursor: default;
+  user-select: none;
+  align-items: flex-start;
+  justify-self: center;
+  border-radius: 0.25rem;
+  padding-right: 0.5rem;
+  font-size: 0.875rem;
+  outline: none;
+  border: 1px solid var(--jp-border-color0);
+}
+
+.jgis-dropdown-menu-sub-content:focus {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-layout-color0),
+    transparent 90%
+  );
+}
+
+.jgis-dropdown-menu-sub-content[data-state='open'] {
+  background-color: var(--jp-layout-color2);
+}
+
+.jgis-dropdown-menu-content {
+  z-index: 50;
+  min-width: 8rem;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color2);
+  padding: 0.25rem;
+  color: var(--jp-ui-font-color0);
+  box-shadow: 0 4px 6px
+    color-mix(in srgb, var(--jp-layout-color0), transparent 50%);
+}
+
+.jgis-dropdown-menu-content[data-state='open'] {
+  animation: animate-in 0.3s ease-in;
+}
+
+.jgis-dropdown-menu-content[data-state='closed'] {
+  animation: animate-out 0.3s ease-out;
+}
+
+.jgis-dropdown-menu-item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+  transition-property: background-color, color;
+  transition-duration: 0.3s;
+}
+
+.jgis-dropdown-menu-item:focus {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color0),
+    transparent 95%
+  );
+}
+
+.jgis-dropdown-menu-item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jgis-dropdown-menu-checkbox-item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding-left: 1.75rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+  gap: 1rem;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+}
+
+.jgis-dropdown-menu-checkbox-item:focus {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-accent-color0);
+}
+
+.jgis-dropdown-menu-checkbox-item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jgis-dropdown-menu-checkbox-item-span {
+  position: absolute;
+  left: 0.5rem;
+  display: flex;
+  height: 0.875rem;
+  width: 0.875rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.jgis-dropdown-menu-radio-item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+}
+
+.jgis-dropdown-menu-radio-item:focus {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-accent-color0);
+}
+
+.jgis-dropdown-menu-radio-item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jgis-dropdown-menu-radio-item-span {
+  position: absolute;
+  left: 0.5rem;
+  display: flex;
+  height: 0.875rem;
+  width: 0.875rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.jgis-dropdown-menu-label {
+  color: var(--jp-ui-font-color0);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.5rem;
+}
+
+.jgis-dropdown-menu-separator {
+  width: 100%;
+  height: 1px;
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color0),
+    transparent 90%
+  );
+}
+
+.jgis-dropdown-menu-shortcut {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  opacity: 0.6;
+}
+
+.jgis-dropdown-menu-icon {
+  margin-left: auto;
+  height: 1rem;
+  width: 1rem;
+}

package/style/shared/pagination.css

@@ -0,0 +1,167 @@
+.jgis-pagination {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.jgis-pagination-content {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  width: 100%;
+  justify-content: space-evenly;
+  list-style-type: none;
+  gap: 0.25rem;
+  padding-left: unset;
+  align-items: center;
+}
+
+.jgis-pagination-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition-property: color, background-color, border-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+  outline: none;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  border: 0.0375rem solid
+    color-mix(in srgb, var(--jp-border-color0), transparent 80%);
+  transition: background-color 0.2s ease;
+  padding: 0.25rem;
+}
+
+.jgis-pagination-link:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-layout-color0),
+    transparent 90%
+  );
+}
+
+.jgis-pagination-link:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-layout-color2), transparent 50%);
+}
+
+.jgis-pagination-link:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jgis-pagination-link:disabled:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.jgis-pagination-link[data-variant='destructive'] {
+  background-color: var(--jp-error-color0);
+  color: var(--jp-ui-font-color0);
+  transition: background-color 0.2s ease;
+}
+
+.jgis-pagination-link[data-variant='destructive']:hover {
+  background-color: color-mix(in srgb, var(--jp-error-color0), transparent 90%);
+}
+
+.jgis-pagination-link[data-variant='outline'] {
+  border: 1px solid var(--jp-accent-color0);
+  background-color: var(--jp-layout-color2);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.jgis-pagination-link[data-variant='ghost']:hover,
+.jgis-pagination-link[data-variant='outline']:hover {
+  background-color: var(--jp-accent-color0);
+  color: var(--jp-ui-inverse-font-color0);
+}
+
+.jgis-pagination-link[data-variant='secondary'] {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+  transition: background-color 0.2s ease;
+}
+
+.jgis-pagination-link[data-variant='secondary']:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-layout-color0),
+    transparent 80%
+  );
+}
+
+.jgis-pagination-link[data-variant='ghost'] {
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+}
+
+.jgis-pagination-link[data-variant='link'] {
+  color: var(--jp-ui-font-color0);
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+  transition: text-decoration 0.2s ease;
+  border: none;
+  padding: 0;
+}
+
+.jgis-pagination-link[data-variant='link']:hover {
+  color: color-mix(in srgb, var(--jp-ui-font-color0), transparent 80%);
+  text-decoration-color: var(--jp-ui-font-color0);
+}
+
+.jgis-pagination-link[data-size='sm'] {
+  height: 2.25rem;
+  border-radius: 0.375rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.jgis-pagination-link[data-size='lg'] {
+  height: 2.75rem;
+  border-radius: 0.375rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.jgis-pagination-link[data-size='icon'] {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.jgis-pagination-previous {
+  gap: 0.25rem;
+  padding-left: 0.625rem;
+  display: flex;
+  cursor: pointer;
+  margin-right: 0.5rem;
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-layout-color1);
+}
+
+.jgis-pagination-next {
+  gap: 0.25rem;
+  padding-right: 0.625rem;
+  display: flex;
+  cursor: pointer;
+  margin-left: 0.5rem;
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-layout-color1);
+}
+
+.jgis-pagination-ellipsis {
+  display: flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  align-items: center;
+  justify-content: center;
+}

package/style/shared/popover.css

@@ -0,0 +1,53 @@
+@keyframes enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.jgis-popover-content {
+  position: relative;
+  width: 18rem;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  box-shadow: 0 4px 6px
+    color-mix(in srgb, var(--jp-ui-font-color0), transparent 90%);
+  z-index: 50;
+}
+
+.jgis-popover-content[data-state='open'] {
+  animation: enter 300ms;
+}
+
+.jgis-popover-content[data-state='closed'] {
+  animation: exit 300ms;
+}
+
+.jgis-popover-content[data-side='top'] {
+  animation: enter 300ms;
+}
+
+.jgis-popover-content[data-side='right'] {
+  animation: enter 300ms;
+}
+
+.jgis-popover-content[data-side='left'] {
+  animation: enter 300ms;
+}
+
+.jgis-popover-content[data-side='bottom'] {
+  animation: enter 300ms;
+}

package/style/shared/tabs.css

@@ -0,0 +1,57 @@
+.jgis-tabs-list {
+  display: inline-flex;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: space-evenly;
+  border-radius: 0.375rem;
+  background-color: var(--jp-layout-color2);
+  padding: 0.25rem;
+  color: var(--jp-ui-font-color0);
+  gap: 1rem;
+  width: 100%;
+}
+
+.jgis-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: var(--jp-ui-font-size2);
+  font-weight: 500;
+  outline: none;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+  background-color: transparent;
+}
+
+.jgis-tabs-trigger:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--jp-accent-color0),
+    0 0 0 4px var(--jp-accent-color0);
+}
+
+.jgis-tabs-trigger:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jgis-tabs-trigger[data-state='active'] {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color0);
+  box-shadow: 0 1px 2px
+    color-mix(in srgb, var(--jp-layout-color0), transparent 90%);
+}
+
+.jgis-tabs-content {
+  outline: none;
+  width: 100%;
+}
+
+.jgis-tabs-content:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--jp-accent-color0),
+    0 0 0 4px var(--jp-accent-color0);
+}

package/style/shared/toggle.css

@@ -0,0 +1,85 @@
+.jgis-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  transition:
+    color 0.3s,
+    background-color 0.3s;
+  outline: none;
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-layout-color0);
+  border: 1px solid transparent;
+}
+
+.jgis-toggle:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color0),
+    transparent 90%
+  );
+  color: var(--jp-ui-inverse-font-color0);
+}
+
+.jgis-toggle:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--jp-accent-color0),
+    0 0 0 4px var(--jp-accent-color0);
+}
+
+.jgis-toggle:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jgis-toggle[data-state='on'] {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  color: var(--jp-accent-color0);
+}
+
+.jgis-toggle-default {
+  background-color: transparent;
+}
+
+.jgis-toggle-outline {
+  border: 1px solid var(--jp-accent-color0);
+  background-color: transparent;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+  color: inherit;
+}
+
+.jgis-toggle-outline:hover {
+  background-color: var(--jp-accent-color0);
+  color: var(--jp-ui-inverse-font-color0);
+}
+
+.jgis-toggle-default-size {
+  height: 2.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.jgis-toggle-small-size {
+  height: 2.25rem;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.jgis-toggle-large-size {
+  height: 2.25rem;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.jgis-toggle-group-context {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.25rem;
+}

package/style/stacBrowser.css

@@ -0,0 +1,91 @@
+.jgis-stac-browser-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.jgis-stac-browser-collection {
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+
+.jgis-stac-browser-section-item {
+  border-radius: 1rem !important;
+  cursor: pointer;
+}
+
+.jgis-stac-browser-results-item {
+  border-radius: 1rem !important;
+  cursor: pointer;
+  white-space: normal !important;
+  height: auto !important;
+}
+
+.jgis-stac-browser-results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  word-break: break-word;
+  padding: 0.25rem;
+  margin-right: 0.5rem;
+}
+
+.jgis-stac-browser-date-picker {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.jgis-stac-browser-filters-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  padding: 0 0.5rem;
+}
+
+.jgis-stac-filter-trigger {
+  max-width: fit-content;
+  border: 1px solid var(--jp-border-color0);
+  padding: 0.5rem;
+  cursor: pointer;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.jgis-stac-filter-trigger:disabled {
+  cursor: not-allowed;
+}
+
+.jgis-stac-filter-section-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.jgis-stac-filter-section-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.jgis-stac-datepicker-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jgis-stac-badge {
+  gap: 0.25rem;
+  padding-right: 0.3rem !important;
+}
+
+.jgis-stac-badge-icon:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-error-color0),
+    transparent 20%
+  ) !important;
+}

package/style/symbologyDialog.css

@@ -128,13 +128,6 @@ select option {
   margin: auto;
 }
 
-.jp-gis-loading-spinner {
-  animation: spin 4s linear infinite;
-  font-size: 1.5rem;
-  padding: 1rem 0;
-  margin: auto;
-}
-
 .jp-gis-band-info-loading-container > span {
   font-size: 1rem;
 }

package/lib/mainview/spinner.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    loading: boolean;
-}
-export declare function Spinner(props: IProps): React.JSX.Element;
-export {};

package/lib/mainview/spinner.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-export function Spinner(props) {
-    return (React.createElement("div", { className: 'jGIS-Spinner', style: { display: props.loading ? 'flex' : 'none' } },
-        React.createElement("div", { className: 'jGIS-SpinnerContent' })));
-}