@arcgis/core 4.27.0-next.20230515 → 4.27.0-next.20230516

package/assets/esri/themes/base/widgets/_BasemapGallery.scss

@@ -1,5 +1,9 @@
 @mixin basemapGallery() {
-  $basemap-thumbnail-size: $button-height--double !default;
+  $basemap-thumbnail-width: 120px;
+  $basemap-thumbnail-height: 80px;
+  $basemap-border-size: 1px;
+  $basemap-transition-duration: 250ms;
+  $basemap-animation-duration: 500ms;
 
   .esri-basemap-gallery {
     color: $font-color;
@@ -7,117 +11,153 @@
     overflow-y: auto;
     position: relative;
     width: auto;
-  }
 
-  .esri-basemap-gallery:focus-within {
-    @include outlineStyle();
-  }
+    &:focus-within {
+      @include outlineStyle();
+    }
 
-  .esri-basemap-gallery__item-container {
-    display: flex;
-    flex-flow: column nowrap;
-    position: relative;
-    transition: opacity 250ms ease-in-out;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
+    &__item-container {
+      display: flex;
+      flex-flow: column nowrap;
+      position: relative;
+      transition: opacity $basemap-transition-duration ease-in-out;
+      list-style: none;
+      margin: 0;
+      padding: $cap-spacing--quarter;
+      gap: $cap-spacing--quarter;
+    }
 
-  .esri-basemap-gallery--source-refreshing .esri-basemap-gallery__item-container,
-  .esri-basemap-gallery.esri-disabled .esri-basemap-gallery__item {
-    opacity: $opacity--disabled;
-    pointer-events: none;
-    animation: none;
-  }
+    &--source-refreshing &__item-container,
+    &.esri-disabled &__item {
+      opacity: $opacity--disabled;
+      pointer-events: none;
+      animation: none;
+    }
 
-  .esri-basemap-gallery__empty-message {
-    padding: $cap-spacing $side-spacing;
-    animation: esri-fade-in 500ms ease-in-out;
-  }
+    &__empty-message {
+      padding: $cap-spacing $side-spacing;
+      animation: esri-fade-in $basemap-animation-duration ease-in-out;
+    }
 
-  .esri-basemap-gallery__item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: $cap-spacing--half $side-spacing--half;
-    cursor: pointer;
-    border-left: 3px solid transparent;
-    border-right: 3px solid transparent;
-    animation: esri-fade-in 500ms ease-in-out;
-    transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
-  }
+    &__item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border: $basemap-border-size solid transparent;
+      box-sizing: border-box;
+      animation: esri-fade-in $basemap-animation-duration ease-in-out;
+      transition: background-color $basemap-transition-duration ease-in-out,
+        border-color $basemap-transition-duration ease-in-out;
+
+      &:first-child {
+        margin-top: 0;
+      }
 
-  .esri-basemap-gallery__item:first-child {
-    margin-top: $cap-spacing--half;
-  }
+      &--error {
+        cursor: auto;
+        opacity: $opacity--disabled;
+      }
 
-  .esri-basemap-gallery__loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    width: 100%;
-    animation: esri-fade-in 500ms ease-in-out;
-  }
+      &-thumbnail {
+        min-width: $basemap-thumbnail-width;
+        width: $basemap-thumbnail-width;
+        height: $basemap-thumbnail-height;
+        border-right: $basemap-border-size solid $border-color--subtle;
+        transition: border-color $basemap-transition-duration ease-in-out;
+      }
 
-  @include loopingProgressBar(".esri-basemap-gallery__loader");
+      @supports (object-fit: cover) {
+        &-thumbnail {
+          object-fit: cover;
+        }
+      }
 
-  .esri-basemap-gallery__item--error {
-    cursor: auto;
-    opacity: $opacity--disabled;
-  }
+      &-title {
+        font-size: $font-size--small;
+        color: $interactive-font-color;
+        transition: color $basemap-transition-duration ease-in-out, font-weight $basemap-transition-duration ease-in-out;
+
+        span {
+          text-align: left;
+
+          // Used for truncating after two lines
+          // https://css-tricks.com/line-clampin/#aa-the-standardized-way
+          // https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
 
-  .esri-basemap-gallery__item-thumbnail {
-    height: $basemap-thumbnail-size;
-    width: auto;
-    box-shadow: 0 0 0 1px $border-color;
-  }
+      &--selected,
+      &.esri-basemap-gallery__item--selected:hover,
+      &.esri-basemap-gallery__item--selected:focus {
+        cursor: auto;
+        border-color: $border-color--active;
+        background-color: $background-color--active;
 
-  @supports (object-fit: cover) {
-    .esri-basemap-gallery__item-thumbnail {
-      height: $basemap-thumbnail-size;
-      width: $basemap-thumbnail-size;
-      object-fit: cover;
-    }
-  }
+        .esri-basemap-gallery__item-title {
+          color: $font-color;
+          font-weight: $font-weight--medium;
+        }
 
-  .esri-basemap-gallery__item-title {
-    font-size: $font-size--small;
-    word-break: break-word;
-    color: $interactive-font-color;
-    padding: 0 $side-spacing--half;
-    transition: color 250ms ease-in-out;
-  }
+        .esri-basemap-gallery__item-thumbnail {
+          border-color: var(--calcite-ui-text-highlight);
+        }
+      }
 
-  .esri-basemap-gallery__item--selected,
-  .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover,
-  .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus {
-    cursor: auto;
-    border-inline-start-color: $border-color--active;
-    background-color: $background-color--active;
-    color: $font-color;
+      &:hover,
+      &:focus {
+        outline: none;
+        border-color: $interactive-font-color;
+        background-color: $background-color--hover;
 
-    .esri-basemap-gallery__item-title {
-      color: $font-color;
-    }
-  }
+        .esri-basemap-gallery__item-title {
+          color: $font-color;
+        }
+      }
+
+      &.esri-basemap-gallery__item--error:hover,
+      &.esri-basemap-gallery__item--error:focus {
+        background-color: $background-color;
+        border-color: transparent;
+      }
 
-  .esri-basemap-gallery__item:hover,
-  .esri-basemap-gallery__item:focus {
-    outline: none;
-    background-color: $background-color--hover;
-    border-inline-start-color: $interactive-font-color;
+      &-content {
+        display: flex;
+        flex-direction: column;
+        gap: $cap-spacing;
+        padding: 0 8px 0 12px;
+      }
 
-    .esri-basemap-gallery__item-title {
-      color: $interactive-font-color--hover;
+      &-tags-container {
+        display: flex;
+        flex-direction: row;
+        gap: $side-spacing--quarter;
+
+        calcite-chip {
+          --calcite-font-size--2: var(--calcite-font-size--3);
+          --calcite-chip-spacing-s-internal: 0.15rem;
+          cursor: inherit;
+          height: 16px;
+        }
+      }
     }
-  }
 
-  .esri-basemap-gallery__item.esri-basemap-gallery__item--error:hover,
-  .esri-basemap-gallery__item.esri-basemap-gallery__item--error:focus {
-    background-color: $background-color;
-    border-color: transparent;
+    &__loader {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      width: 100%;
+      animation: esri-fade-in $basemap-animation-duration ease-in-out;
+    }
+
+    @include loopingProgressBar(".esri-basemap-gallery__loader");
   }
 
   .esri-view .esri-basemap-gallery {
@@ -126,38 +166,71 @@
   }
 
   .esri-view-width-greater-than-large .esri-ui-corner {
-    .esri-basemap-gallery.esri-component {
-      width: $panel-width--plus-half;
-      max-width: initial;
-      .esri-basemap-gallery__item-container {
-        flex-flow: row wrap;
-        align-items: baseline;
-      }
-      .esri-basemap-gallery__item {
-        border: 1px solid rgba(0, 0, 0, 0);
-        flex-flow: column wrap;
-        width: 29.333%;
-        margin: $cap-spacing--quarter 2%;
-        padding: $cap-spacing 0;
-        text-align: center;
-      }
-      .esri-basemap-gallery__item:hover,
-      .esri-basemap-gallery__item:focus {
-        border-color: $interactive-font-color;
-      }
-      .esri-basemap-gallery__item-thumbnail {
-        max-width: 100%;
-        margin-bottom: $cap-spacing--half;
-      }
-      .esri-basemap-gallery__item-title {
-        margin-top: $cap-spacing--half;
+    $basemap-thumbnail-min-width: 100px;
+    $basemap-gallery-content-height: 40px;
+    $basemap-gallery-width: calc(
+      2 * $side-spacing + 2 * $cap-spacing + 3 * ($basemap-thumbnail-width + 2 * $basemap-border-size)
+    );
 
-        width: 100%; // ie11 needs this for title to wrap
-      }
-      .esri-basemap-gallery__item--selected,
-      .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover,
-      .esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus {
-        border-color: $border-color--active;
+    .esri-basemap-gallery.esri-component {
+      max-width: $panel-width--plus-half;
+      width: $basemap-gallery-width;
+
+      .esri-basemap-gallery {
+        &__item-container {
+          flex-flow: row wrap;
+          align-items: center;
+          padding: $side-spacing;
+          gap: $cap-spacing;
+          justify-content: space-between;
+        }
+
+        &__item {
+          border: $basemap-border-size solid $border-color--subtle;
+          flex-flow: column wrap;
+          flex: 1 1 $basemap-thumbnail-min-width;
+          max-width: calc($basemap-thumbnail-width + 2 * $basemap-border-size);
+          padding: 0;
+          text-align: center;
+
+          &:hover,
+          &:focus {
+            border-color: $interactive-font-color;
+          }
+
+          &-thumbnail {
+            max-width: 100%;
+            min-width: $basemap-thumbnail-min-width;
+            border: none;
+          }
+
+          &-content {
+            width: 100%;
+            height: $basemap-gallery-content-height;
+            position: relative;
+            padding: 0;
+          }
+
+          &-title {
+            height: 100%;
+            width: 100%;
+            padding: $cap-spacing--third $side-spacing--half;
+            display: flex;
+            align-items: center;
+          }
+
+          &-tags-container {
+            position: absolute;
+            bottom: calc($basemap-gallery-content-height + $side-spacing--third);
+            right: $side-spacing--third;
+          }
+
+          &--selected,
+          &.esri-basemap-gallery__item--selected:hover,
+          &.esri-basemap-gallery__item--selected:focus {
+            border-color: $border-color--active;
+          }
+        }
       }
     }
   }

package/assets/esri/themes/base/widgets/_Features.scss

@@ -0,0 +1,57 @@
+@mixin features() {
+  .esri-features {
+    display: flex;
+
+    calcite-pagination {
+      flex: 1;
+      align-self: center;
+    }
+
+    calcite-flow {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .esri-features__container {
+    padding: $cap-spacing;
+    background-color: var(--calcite-ui-background);
+  }
+
+  .esri-features .esri-feature,
+  .esri-features .esri-feature-relationship {
+    background-color: transparent;
+  }
+
+  .esri-features__action-bar {
+    background-color: var(--calcite-ui-foreground-1);
+    border-block-end: 1px solid var(--calcite-ui-border-3);
+  }
+
+  .esri-features__footer-actions {
+    display: flex;
+    background-color: var(--calcite-ui-foreground-1);
+    justify-content: flex-end;
+    margin: -0.5rem;
+    flex: 1;
+
+    calcite-action-group {
+      border-inline-start: 1px solid var(--calcite-ui-border-3);
+    }
+  }
+
+  .esri-features__feature-menu-observer {
+    position: relative;
+    z-index: 2;
+    bottom: 20px;
+    text-align: center;
+  }
+
+  .esri-features__action--exit {
+    transform: scaleX(-1);
+  }
+}
+
+@if $include_Features==true {
+  @include features();
+}

package/assets/esri/themes/base/widgets/_Popup.scss

@@ -212,6 +212,9 @@
     flex: 0 0 auto;
     justify-content: space-between;
   }
+  .esri-popup__footer calcite-icon {
+    margin-inline: $side-spacing--quarter;
+  }
   .esri-popup__footer .esri-popup__button {
     font-weight: $font-weight;
     font-size: $font-size--small;