@jupytergis/base 0.5.0 → 0.6.0

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,74 @@
+.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-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;
+}

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' })));
-}

package/lib/toolbar/usertoolbaritem.d.ts

@@ -1,19 +0,0 @@
-import { IUserData, JupyterGISModel } from '@jupytergis/schema';
-import * as React from 'react';
-interface IProps {
-    model: JupyterGISModel;
-}
-interface IState {
-    usersList: IUserData[];
-    selectedUser?: IUserData;
-}
-export declare class UsersItem extends React.Component<IProps, IState> {
-    constructor(props: IProps);
-    componentDidMount(): void;
-    selectUser: (user: IUserData) => void;
-    private createUserIcon;
-    private filterDuplicated;
-    render(): React.ReactNode;
-    private _model;
-}
-export {};

package/lib/toolbar/usertoolbaritem.js

@@ -1,59 +0,0 @@
-import * as React from 'react';
-export class UsersItem extends React.Component {
-    constructor(props) {
-        super(props);
-        this.selectUser = (user) => {
-            var _a;
-            let selected = undefined;
-            if (user.userId !== ((_a = this.state.selectedUser) === null || _a === void 0 ? void 0 : _a.userId)) {
-                selected = user;
-            }
-            this.setState(old => (Object.assign(Object.assign({}, old), { selectedUser: selected })), () => {
-                this._model.setUserToFollow(selected === null || selected === void 0 ? void 0 : selected.userId);
-            });
-        };
-        this._model = props.model;
-        this.state = { usersList: [] };
-    }
-    componentDidMount() {
-        this.setState(old => (Object.assign(Object.assign({}, old), { usersList: this._model.users })));
-        this._model.userChanged.connect((_, usersList) => {
-            this.setState(old => (Object.assign(Object.assign({}, old), { usersList: usersList })));
-        });
-    }
-    createUserIcon(options) {
-        var _a;
-        let el;
-        const { userId, userData } = options;
-        const selected = `${userId === ((_a = this.state.selectedUser) === null || _a === void 0 ? void 0 : _a.userId) ? 'selected' : ''}`;
-        if (userData.avatar_url) {
-            el = (React.createElement("div", { key: userId, title: userData.display_name, className: `lm-MenuBar-itemIcon jp-MenuBar-imageIcon ${selected}`, onClick: () => this.selectUser(options) },
-                React.createElement("img", { src: userData.avatar_url, alt: "" })));
-        }
-        else {
-            el = (React.createElement("div", { key: userId, title: userData.display_name, className: `lm-MenuBar-itemIcon jp-MenuBar-anonymousIcon ${selected}`, style: { backgroundColor: userData.color }, onClick: () => this.selectUser(options) },
-                React.createElement("span", null, userData.initials)));
-        }
-        return el;
-    }
-    filterDuplicated(usersList) {
-        var _a;
-        const newList = [];
-        const selected = new Set();
-        for (const element of usersList) {
-            if (((_a = element === null || element === void 0 ? void 0 : element.userData) === null || _a === void 0 ? void 0 : _a.username) &&
-                !selected.has(element.userData.username)) {
-                selected.add(element.userData.username);
-                newList.push(element);
-            }
-        }
-        return newList;
-    }
-    render() {
-        return (React.createElement("div", { className: "jGIS-toolbar-usertoolbar" }, this.filterDuplicated(this.state.usersList).map(item => {
-            if (item.userId !== this._model.currentUserId) {
-                return this.createUserIcon(item);
-            }
-        })));
-    }
-}