@arcgis/core 4.33.0-next.20250202 → 4.33.0-next.20250204

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

@@ -1,474 +1,178 @@
 @use "sass:color";
 
 @mixin directions() {
-  $border_size: 2px;
-  $directions-height--max: 420px !default;
-
   .esri-directions {
-    overflow-x: hidden;
-    color: $font-color;
-  }
-
-  .esri-directions__panel-content {
-    display: flex;
-    flex-flow: column;
-    padding: $cap-spacing 0;
-  }
-
-  .esri-directions__sign-in-panel {
-    display: flex;
-    justify-content: center;
-    color: $interactive-font-color;
-  }
-
-  .esri-directions__section {
-    margin-top: $cap-spacing;
-    margin-bottom: $cap-spacing;
-  }
-
-  .esri-directions__section-splitter {
-    margin: $cap-spacing--plus-half 0;
-    border-top: 1px solid $border-color;
-    width: 100%;
-  }
-
-  .esri-directions__travel-modes,
-  .esri-directions__departure-time {
-    display: flex;
-    align-items: center;
-    padding-inline: $side-spacing;
-  }
-
-  .esri-directions__travel-modes .esri-select,
-  .esri-directions__departure-time .esri-select {
-    flex: 1 0 auto;
-    width: auto;
-  }
-
-  .esri-directions__panel-content--sign-in,
-  .esri-directions__panel-content--loading,
-  .esri-directions__panel-content--error {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 $cap-spacing;
-    min-height: $directions-height--max;
-    color: $interactive-font-color;
-  }
-
-  .esri-directions__loader {
-    background: url("../base/images/loading-throb.gif") no-repeat center;
-    width: 32px;
-    height: 40px;
-  }
-
-  .esri-directions__warning-card {
-    @include defaultBoxShadow();
-
-    margin: 20px auto;
-    border-top: solid 2px $border-color--error;
-    padding: 12px;
-    width: 90%;
-    color: $interactive-font-color;
-  }
-
-  .esri-directions__warning-header {
-    display: flex;
-    margin-bottom: 6px;
-    color: $font-color--error;
-  }
-
-  .esri-directions__warning-heading {
-    margin: 0 4px;
-    color: inherit;
-  }
-
-  .esri-directions__warning-message {
-    color: inherit;
-    font-weight: $font-weight;
-  }
-
-  .esri-directions__departure-time-controls {
-    --calcite-font-size--1: var(--calcite-font-size--2);
-
-    display: flex;
-    flex-direction: column;
-  }
-
-  .esri-directions__departure-date-time-pickers {
-    display: flex;
-  }
-
-  .esri-directions__directions-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .esri-directions__sign-in-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-self: flex-start;
-    width: 100%;
-  }
-
-  .esri-directions__sign-in-button {
-    width: auto;
-  }
-
-  .esri-directions__content-title {
-    align-self: flex-start;
-    margin-top: 0;
-    padding: 0 $cap-spacing;
-  }
-
-  .esri-directions__summary {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .esri-directions__summary-controls {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .esri-directions__stops {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    list-style: none;
-  }
-
-  .esri-directions__stop-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-top: dashed $border_size transparent;
-    background-color: $background-color;
-    padding: 10px 0;
-  }
-
-  .esri-directions__stop-row-ghost {
-    opacity: 0.25;
-  }
-
-  .esri-directions__stop-handle {
-    flex: 0 0 auto;
-    padding-inline-start: $side-spacing--half;
-  }
-
-  .esri-search__sources-button {
-    @include icomoonIconSelector() {
-      position: relative;
-      left: 1px;
+    calcite-flow-item {
+      --calcite-color-background: var(--calcite-color-foreground-1);
     }
-  }
-
-  .esri-directions__stop-input {
-    flex-grow: 0.8;
-    margin: 0 4px;
-  }
-
-  .esri-directions__stop-input .esri-search .esri-search__input {
-    margin-bottom: $border_size;
-    outline-offset: 4px;
-    border: 1px solid $border-color--input;
-    height: auto;
-    min-height: $button-height;
-  }
-
-  .esri-directions__remove-stop-icon,
-  .esri-directions__stop-row:hover .esri-directions__remove-stop-icon[hidden] {
-    visibility: hidden;
-  }
-
-  .esri-directions__remove-stop:focus .esri-directions__remove-stop-icon,
-  .esri-directions__stop-row:hover .esri-directions__remove-stop-icon {
-    visibility: visible;
-  }
-
-  .esri-directions__reverse-stops[hidden] {
-    display: inherit;
-    visibility: hidden;
-  }
 
-  .esri-directions__stop-options {
-    display: flex;
-    flex-grow: 0.1;
-    justify-content: space-between;
-    padding-right: $side-spacing--half;
-  }
-
-  .esri-directions__stop-row:first-child {
-    margin-top: 0;
-  }
-
-  .esri-directions__stop-row:last-child {
-    margin-bottom: 0;
-  }
-
-  .esri-directions__stop-icon[hidden] {
-    display: inline-block;
-    visibility: hidden;
-  }
-
-  .esri-directions__stop-icon--interactive {
-    cursor: pointer;
-  }
-
-  .esri-directions__stop-icon-container {
-    display: inline-block;
-    position: relative;
-  }
-
-  .esri-directions__stop-icon-container--last::after {
-    border: none;
-  }
-
-  .esri-directions__costs {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    cursor: pointer;
-    padding: $cap-spacing $side-spacing 0;
-    width: 100%;
-  }
-
-  .esri-directions__costs-details {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    white-space: nowrap;
-  }
-
-  .esri-directions__arrival-time-container {
-    margin-top: $cap-spacing--half;
-  }
-
-  .esri-directions__arrival-time {
-    font-weight: $font-weight--bold;
-  }
-
-  .esri-directions__costs-units {
-    display: flex;
-    justify-content: space-around;
-  }
-
-  .esri-directions__costs-value,
-  .esri-directions__other-costs-total,
-  .esri-directions__vertical-splitter {
-    line-height: 1.5;
-    color: $interactive-font-color;
-    font-size: 1.5em;
-  }
-
-  .esri-directions__vertical-splitter {
-    margin-inline: $side-spacing--three-quarters;
-    border: 1px solid color.adjust($font-color, $alpha: -0.8);
-  }
-
-  .esri-directions__horizontal-splitter {
-    flex-grow: 0.95;
-    border-top: 1px solid $border-color;
-  }
-
-  .esri-directions__maneuvers {
-    display: flex;
-    flex-direction: column;
-    margin: $cap-spacing--plus-half 0 0 0;
-    border-top: 1px solid $border-color;
-    padding: 0;
-    width: 100%;
-  }
-
-  .esri-directions__maneuver-list {
-    margin: 0;
-    padding: 0;
-  }
-
-  .esri-directions__maneuver {
-    display: flex;
-    border: none;
-    border-inline-start: $border-size--active solid transparent;
-    cursor: pointer;
-    padding: $cap-spacing $side-spacing--half;
-  }
-
-  .esri-directions__maneuver:hover,
-  .esri-directions__maneuver:focus {
-    background-color: $background-color--hover;
-  }
-
-  .esri-directions__maneuver--active,
-  .esri-directions__maneuver--active:hover,
-  .esri-directions__maneuver--active:focus {
-    border-color: $border-color--active;
-    background-color: $background-color--active;
-  }
-
-  .esri-directions__maneuver-section--collapsible {
-    border-bottom: 1px solid $border-color;
-
-    &:last-child {
-      border-bottom: none;
+    &__accordion {
+      --calcite-accordion-border-color: transparent;
     }
 
-    .esri-directions__maneuver-list {
-      background-color: $background-color--offset;
-      padding-top: $cap-spacing;
-      padding-bottom: $cap-spacing;
+    &__action-container {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: stretch;
+      justify-content: flex-start;
+      margin-top: var(--calcite-spacing-sm);
+      background-color: var(--calcite-color-background);
+      padding-inline: var(--calcite-spacing-md);
+      height: var(--calcite-size-md);
     }
-  }
 
-  .esri-directions__maneuver-section-header {
-    display: flex;
-    padding: 0 $side-spacing--half;
-  }
+    &__departure-time-options {
+      display: flex;
+      margin-bottom: var(--calcite-spacing-sm);
 
-  .esri-directions__maneuver-section-header-toggle-button {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: $cap-spacing $side-spacing--half;
-    width: 100%;
+      calcite-input-date-picker,
+      calcite-input-time-picker {
+        flex: 1;
+      }
+    }
 
-    .esri-directions__maneuver-section-title {
-      padding: 0;
+    &__directions-header {
+      display: flex;
+      flex-direction: column;
+      padding: var(--calcite-spacing-md);
     }
-  }
 
-  .esri-directions__maneuver-section-title {
-    margin: 0;
-    padding: $cap-spacing $side-spacing--half;
-  }
+    &__directions-header-stop-names {
+      display: flex;
+      flex-direction: column;
+      margin-left: var(--calcite-spacing-sm);
+      font-weight: var(--calcite-font-weight-medium);
+    }
 
-  .esri-directions__maneuver-section-toggle {
-    cursor: pointer;
-  }
+    &__edit-footer {
+      border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
+      padding: var(--calcite-spacing-md);
+    }
 
-  .esri-directions__maneuver-icon {
-    margin-inline-end: $side-spacing--half;
-    color: $font-color;
-  }
+    &__edit-toolbar-container {
+      display: flex;
+      flex-flow: row nowrap;
+      margin: var(--calcite-spacing-md);
+    }
 
-  .esri-directions__maneuver-costs {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: $cap-spacing--half;
-    white-space: nowrap;
-  }
+    &__edit-toolbar {
+      display: flex;
+      flex-flow: row nowrap;
+      border-width: var(--calcite-border-width-sm);
+      border-style: solid;
+      border-radius: var(--calcite-corner-radius-round);
+      border-color: var(--calcite-color-foreground-3);
+      overflow: hidden;
+    }
 
-  .esri-directions__cost--intermediate {
-    font-size: $font-size--small;
-  }
+    &__flex-column {
+      display: flex;
+      flex-direction: column;
+    }
 
-  .esri-directions__maneuver-costs-container {
-    width: 100%;
-  }
+    &__flex-row {
+      display: flex;
+      flex-direction: row;
+    }
 
-  .esri-directions__maneuver-place-name {
-    font-weight: var(--calcite-font-weight-medium);
-  }
+    &__label-emphasize {
+      font-weight: var(--calcite-font-weight-medium);
+    }
 
-  .esri-directions__scroller {
-    overflow-y: auto;
-  }
+    &__label-no-bottom-margin {
+      --calcite-label-margin-bottom: 0;
+    }
 
-  .esri-directions__stop-row--valid {
-    .esri-directions__stop-handle:hover {
-      cursor: move;
+    &__margin-inline-medium {
+      margin-inline: var(--calcite-spacing-md);
     }
-  }
 
-  // search overrides
-  .esri-directions .esri-search {
-    box-shadow: none;
-    width: auto;
+    &__padding-medium {
+      padding: var(--calcite-spacing-md);
+    }
 
-    .esri-search__submit-button {
-      display: none;
+    &__panel-top-border {
+      border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
     }
-  }
 
-  .esri-directions .esri-search .esri-search__container::before {
-    display: none;
-  }
+    &__panel-header-action {
+      display: flex;
+      width: 220px;
+    }
 
-  .esri-directions .esri-search .esri-search__container::after {
-    top: auto;
-    bottom: -2px;
-  }
+    &__panel-header-action-columns {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 2;
+    }
 
-  .esri-ui-bottom-left,
-  .esri-ui-bottom-right {
-    .esri-directions {
-      .esri-search {
-        .esri-search__sources-button--up {
-          display: none;
-        }
+    &__primary-flow-item {
+      display: flex;
+      flex: 1 1 auto;
+      flex-flow: column nowrap;
+      align-items: stretch;
+      justify-content: flex-start;
+      overflow: visible;
+    }
 
-        .esri-search__sources-button--down {
-          display: flex;
-        }
-      }
+    &__primary-footer {
+      border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
+      padding: var(--calcite-spacing-md);
+    }
 
-      .esri-menu {
-        top: 100%;
-        bottom: auto;
-        margin: $cap-spacing--eighth 0 0 0;
-      }
+    &__primary-footer-centered {
+      display: flex;
+      flex-flow: column wrap;
+      align-items: center;
+      border-top: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
+      padding: var(--calcite-spacing-md);
     }
-  }
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .esri-directions {
-    &__save-section,
-    &__toolbar-section {
+    &__save-error {
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-top: 12px;
-      padding-inline: 15px;
     }
 
-    &__save-buttons,
-    &__toolbar-buttons {
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 6px;
-      width: 100%;
+    &__save-error-icon {
+      margin-top: calc(var(--calcite-spacing-lg) * 3);
+      margin-bottom: var(--calcite-spacing-xxs);
+      color: var(--calcite-color-status-danger);
     }
 
-    &__save-button,
-    &__save-as-button,
-    &__add-stop-button {
-      margin-inline-end: 5px;
+    &__save-error-label {
+      margin-inline: var(--calcite-spacing-sm);
     }
 
-    &__save-as-button-with-popover {
-      width: 100%;
+    &__save-process-loader {
+      padding-top: calc(var(--calcite-spacing-lg) * 3);
+      padding-bottom: calc(var(--calcite-spacing-lg) * 2);
     }
 
-    &__save-popover {
-      z-index: var(--calcite-z-index-overlay);
+    &__selected-feature-container {
+      margin-inline: var(--calcite-spacing-md);
+      height: 100px;
+    }
+
+    &__separator {
+      margin: var(--calcite-spacing-md) 0;
+      background-color: var(--calcite-color-border-3);
+      height: var(--calcite-border-width-sm);
+    }
+
+    &__stop-item {
+      .esri-search {
+        width: auto;
+      }
     }
-  }
 
-  .esri-directions__message_heading {
-    margin: 0;
-    padding: 12px 7px;
-    text-align: center;
+    &__stops-container {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: stretch;
+      justify-content: flex-start;
+      margin-top: var(--calcite-spacing-sm);
+    }
   }
 }
 

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

@@ -226,6 +226,37 @@
       overflow: hidden;
     }
 
+    // ---------------------------------------------------------------------------------------------
+    // Pending Feature List
+    // ---------------------------------------------------------------------------------------------
+
+    &__pending-feature-list-icon {
+      display: flex;
+
+      &[icon="exclamation-mark-triangle"] {
+        color: var(--calcite-color-status-warning, #edd317);
+      }
+    }
+
+    // ---------------------------------------------------------------------------------------------
+    // Sketch
+    // ---------------------------------------------------------------------------------------------
+
+    &__sketch-container {
+      position: relative;
+      margin: var(--calcite-spacing-sm, 8px);
+      border-width: var(--calcite-border-width-sm, 1px);
+      border-style: solid;
+      border-radius: var(--calcite-corner-radius-round, 4px);
+      border-color: var(--calcite-color-border-3, #dfdfdf);
+      min-height: min-content;
+      overflow: hidden;
+    }
+
+    &__sketch-container + &__panel-content {
+      padding-block-start: 0;
+    }
+
     // ---------------------------------------------------------------------------------------------
     // Upload details
     // ---------------------------------------------------------------------------------------------