@arcgis/map-components 5.2.0-next.85 → 5.2.0-next.87

package/dist/components/arcgis-presentation-captions/customElement.js

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
-import { css as g, html as c } from "lit";
+import { c as g } from "../../chunks/runtime.js";
+import { css as l, html as c } from "lit";
 import { LitElement as s, createEvent as b } from "@arcgis/lumina";
 import "@arcgis/core/core/accessorSupport/decorators.js";
 import { watch as p } from "@arcgis/core/core/reactiveUtils.js";
-const d = g`.captions-container{width:100%;height:100%;padding-inline-start:var(--arcgis-internal-presentation-padding-start);padding-inline-end:var(--arcgis-internal-presentation-padding-end)}.captions{height:auto;position:relative;box-sizing:border-box;transition:padding .05s ease-in 0s;min-height:48px;max-width:max(400px,40%);padding:12px 16px;&:before{content:"";position:absolute;inset-block:-16px -144px;inset-inline:calc(-64px - var(--arcgis-internal-presentation-padding-start)) calc(0px - max(360px,32vw));background:var(--caption-gradient);mask:var(--caption-gradient-mask-before);opacity:var(--calcite-opacity-half);z-index:-1}&:after{content:"";position:absolute;inset:-32px;z-index:-2;background-color:#fff0;mask:var(--caption-gradient-mask-after);mask-mode:luminance;mask-composite:intersect;background-size:cover;backdrop-filter:blur(2px);opacity:var(--calcite-opacity-dark)}}:dir(rtl) .captions{&:before{mask:var(--caption-gradient-mask-before-RTL)}}.title{text-wrap:pretty;text-align:start;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-shadow:var(--title-text-shadow);font-size:var(--caption-title-font-size);font-family:Avenir Next World,sans-serif;font-style:normal;font-weight:var(--calcite-font-weight-bold);line-height:var(--calcite-font-line-height-relative-snug);margin-bottom:2px;color:var(--calcite-color-text-1)}.captions-description{text-wrap:pretty;text-align:start;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;text-shadow:var(--description-text-shadow);font-size:var(--caption-description-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);color:var(--calcite-color-text-1)}.cover-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding-block-start:calc(var(--arcgis-internal-presentation-cover-padding-top) + var(--calcite-space-lg));padding-block-end:calc(var(--arcgis-internal-presentation-cover-padding-bottom) + var(--calcite-space-lg))}.cover{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-inline:8px;min-height:88px;min-width:200px;position:relative;padding-inline-start:calc(var(--arcgis-internal-presentation-cover-padding-start) + 16px);padding-inline-end:calc(var(--arcgis-internal-presentation-cover-padding-end) + 16px);opacity:1;transition:opacity .25s,color .25s;&:before{content:"";position:absolute;inset:calc(0vw - max(320px,12vw,18vh)) calc(0vw - max(320px,24vw));border-radius:120px;background:var(--cover-gradient-before);mask:var(--cover-mask-before);opacity:var(--calcite-opacity-half);z-index:-1}&:after{content:"";position:absolute;inset:-32px;z-index:-2;background-color:#fff0;mask:var(--cover-mask-after);mask-mode:luminance;mask-composite:intersect;background-size:cover;backdrop-filter:blur(2px);opacity:var(--calcite-opacity-dark)}}.cover-description{text-wrap:pretty;text-align:center;text-shadow:var(--description-text-shadow);font-size:var(--cover-description-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);display:-webkit-box;max-width:75ch;overflow-wrap:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;color:var(--calcite-color-text-1)}:host{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:flex-start;box-sizing:border-box;--caption-gradient: linear-gradient( 180deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 98.3%) 8.1%, rgb(255 255 255 / 95%) 15.5%, rgb(255 255 255 / 90%) 22.5%, rgb(255 255 255 / 83.3%) 29%, rgb(255 255 255 / 73.3%) 35%, rgb(255 255 255 / 65%) 41%, rgb(255 255 255 / 55%) 47%, rgb(255 255 255 / 45%) 53%, rgb(255 255 255 / 35%) 59%, rgb(255 255 255 / 26.7%) 65%, rgb(255 255 255 / 18.3%) 71%, rgb(255 255 255 / 10%) 77%, rgb(255 255 255 / 4%) 84.5%, rgb(255 255 255 / 1%) 91%, rgb(255 255 255 / 0%) 100% );--title-text-shadow: 0 1px 1px #fff3, 0 0 3px #fff2, 0 0 6px #fff2;--caption-gradient-mask-before: linear-gradient( 90deg, rgb(255 255 255 / 100%) 30%, rgb(255 255 255 / 98.3%) 35.6%, rgb(255 255 255 / 95%) 41%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 83.3%) 50.3%, rgb(255 255 255 / 73.3%) 54.5%, rgb(255 255 255 / 65%) 58.7%, rgb(255 255 255 / 55%) 62.9%, rgb(255 255 255 / 45%) 67%, rgb(255 255 255 / 35%) 71%, rgb(255 255 255 / 26.7%) 75.5%, rgb(255 255 255 / 18.3%) 80%, rgb(255 255 255 / 10%) 84%, rgb(255 255 255 / 4%) 89%, rgb(255 255 255 / 1%) 94%, rgb(255 255 255 / 0%) 100% );--caption-gradient-mask-before-RTL: linear-gradient( 270deg, rgb(255 255 255 / 100%) 30%, rgb(255 255 255 / 98.3%) 35.6%, rgb(255 255 255 / 95%) 41%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 83.3%) 50.3%, rgb(255 255 255 / 73.3%) 54.5%, rgb(255 255 255 / 65%) 58.7%, rgb(255 255 255 / 55%) 62.9%, rgb(255 255 255 / 45%) 67%, rgb(255 255 255 / 35%) 71%, rgb(255 255 255 / 26.7%) 75.5%, rgb(255 255 255 / 18.3%) 80%, rgb(255 255 255 / 10%) 84%, rgb(255 255 255 / 4%) 89%, rgb(255 255 255 / 1%) 94%, rgb(255 255 255 / 0%) 100% );--caption-gradient-mask-after: linear-gradient( 90deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 180deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 270deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 0deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% );--description-text-shadow: 0 .5px .5px #fff2, 0 1px 1px #fff2, 0 0 8px #fff2;--caption-title-font-size: max(var(--calcite-font-size-xxl), calc(18px + .64vw) );--caption-description-font-size: max(var(--calcite-font-size), calc(10px + .4vw) );--cover-description-font-size: max(var(--calcite-font-size-md), calc(10px + .5vw) );--cover-gradient-before: linear-gradient( 0deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 1%) 4%, rgb(255 255 255 / 4%) 7.7%, rgb(255 255 255 / 10%) 11.2%, rgb(255 255 255 / 18.3%) 14.5%, rgb(255 255 255 / 26.7%) 17.5%, rgb(255 255 255 / 35%) 20.5%, rgb(255 255 255 / 45%) 23.5%, rgb(255 255 255 / 55%) 26.5%, rgb(255 255 255 / 65%) 29.5%, rgb(255 255 255 / 73.3%) 32.5%, rgb(255 255 255 / 83.3%) 35.5%, rgb(255 255 255 / 90%) 38.5%, rgb(255 255 255 / 95%) 42.2%, rgb(255 255 255 / 98.3%) 46%, rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 98.3%) 54%, rgb(255 255 255 / 95%) 57.8%, rgb(255 255 255 / 90%) 61.5%, rgb(255 255 255 / 83.3%) 64.5%, rgb(255 255 255 / 73.3%) 67.5%, rgb(255 255 255 / 65%) 70.5%, rgb(255 255 255 / 55%) 73.5%, rgb(255 255 255 / 45%) 76.5%, rgb(255 255 255 / 35%) 79.5%, rgb(255 255 255 / 26.7%) 82.5%, rgb(255 255 255 / 18.3%) 85.5%, rgb(255 255 255 / 10%) 88.8%, rgb(255 255 255 / 4%) 92.3%, rgb(255 255 255 / 1%) 96%, rgb(255 255 255 / 0%) 100% );--cover-mask-before: linear-gradient( 90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 1%) 3.2%, rgb(255 255 255 / 4%) 6.2%, rgb(255 255 255 / 10%) 9%, rgb(255 255 255 / 18.3%) 11.6%, rgb(255 255 255 / 26.7%) 14%, rgb(255 255 255 / 35%) 16.4%, rgb(255 255 255 / 45%) 18.8%, rgb(255 255 255 / 55%) 21.2%, rgb(255 255 255 / 65%) 23.6%, rgb(255 255 255 / 73.3%) 26%, rgb(255 255 255 / 83.3%) 28.4%, rgb(255 255 255 / 90%) 30.8%, rgb(255 255 255 / 95%) 33.8%, rgb(255 255 255 / 98.3%) 36.8%, rgb(255 255 255 / 100%) 40%, rgb(255 255 255 / 100%) 60%, rgb(255 255 255 / 98.3%) 63.2%, rgb(255 255 255 / 95%) 66.2%, rgb(255 255 255 / 90%) 69.2%, rgb(255 255 255 / 83.3%) 71.6%, rgb(255 255 255 / 73.3%) 74%, rgb(255 255 255 / 65%) 76.4%, rgb(255 255 255 / 55%) 78.8%, rgb(255 255 255 / 45%) 81.2%, rgb(255 255 255 / 35%) 83.6%, rgb(255 255 255 / 26.7%) 86%, rgb(255 255 255 / 18.3%) 88.4%, rgb(255 255 255 / 10%) 91%, rgb(255 255 255 / 4%) 93.9%, rgb(255 255 255 / 1%) 96.8%, rgb(255 255 255 / 0%) 100% );--cover-mask-after: linear-gradient( 90deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 180deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 270deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 0deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% );--cover-gradient-phone: linear-gradient( 0deg, rgb(255 255 255 / 0%) .59%, rgb(255 255 255 / 4%) 4.94%, rgb(255 255 255 / 50%) 25.87%, rgb(255 255 255 / 70%) 37.02%, rgb(255 255 255 / 80%) 48.43%, rgb(255 255 255 / 70%) 60.34%, rgb(255 255 255 / 30%) 80.55%, rgb(255 255 255 / 4%) 93.22%, rgb(255 255 255 / 0%) 99.74% );.fadeOut{opacity:1!important}}`, n = 50, o = 256;
+const d = l`:host{--arcgis-internal-presentation-background-opacity: .6}.captions-container{width:100%;height:100%;padding-inline-start:var(--arcgis-internal-presentation-padding-start);padding-inline-end:var(--arcgis-internal-presentation-padding-end)}.captions{height:auto;position:relative;box-sizing:border-box;transition:padding .05s ease-in 0s;min-height:48px;max-width:max(400px,40%);padding:12px 16px;&:before{content:"";position:absolute;inset-block:-16px -144px;inset-inline:calc(-64px - var(--arcgis-internal-presentation-padding-start)) calc(0px - max(360px,32vw));background:var(--caption-gradient);mask:var(--caption-gradient-mask-before);opacity:var(--arcgis-internal-presentation-background-opacity);z-index:-1}&:after{content:"";position:absolute;inset:-32px;z-index:-2;background-color:#fff0;mask:var(--caption-gradient-mask-after);mask-mode:luminance;mask-composite:intersect;background-size:cover;backdrop-filter:blur(2px);opacity:var(--calcite-opacity-dark)}}:dir(rtl) .captions{&:before{mask:var(--caption-gradient-mask-before-RTL)}}.title{text-wrap:pretty;text-align:start;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;text-shadow:var(--title-text-shadow);font-size:var(--caption-title-font-size);font-family:Avenir Next World,sans-serif;font-style:normal;font-weight:var(--calcite-font-weight-bold);line-height:var(--calcite-font-line-height-relative-snug);margin-bottom:2px;color:var(--calcite-color-text-1)}.captions-description{text-wrap:pretty;text-align:start;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;text-shadow:var(--description-text-shadow);font-size:var(--caption-description-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);color:var(--calcite-color-text-1)}.cover-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding-block-start:calc(var(--arcgis-internal-presentation-cover-padding-top) + var(--calcite-space-lg));padding-block-end:calc(var(--arcgis-internal-presentation-cover-padding-bottom) + var(--calcite-space-lg))}.cover{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-inline:8px;min-height:88px;min-width:200px;position:relative;padding-inline-start:16px;padding-inline-end:16px;opacity:1;transition:opacity .25s,color .25s;&:before{content:"";position:absolute;inset:calc(0vw - max(320px,12vw,18vh)) calc(0vw - max(320px,24vw));border-radius:120px;background:var(--cover-gradient-before);mask:var(--cover-mask-before);opacity:var(--arcgis-internal-presentation-background-opacity);z-index:-1}&:after{content:"";position:absolute;inset:-32px;z-index:-2;background-color:#fff0;mask:var(--cover-mask-after);mask-mode:luminance;mask-composite:intersect;background-size:cover;backdrop-filter:blur(2px);opacity:var(--calcite-opacity-dark)}}.cover-description{text-wrap:pretty;text-align:center;text-shadow:var(--description-text-shadow);font-size:var(--cover-description-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);display:-webkit-box;max-width:75ch;overflow-wrap:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;color:var(--calcite-color-text-1)}:host{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:flex-start;box-sizing:border-box;--caption-gradient: linear-gradient( 180deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 98.3%) 8.1%, rgb(255 255 255 / 95%) 15.5%, rgb(255 255 255 / 90%) 22.5%, rgb(255 255 255 / 83.3%) 29%, rgb(255 255 255 / 73.3%) 35%, rgb(255 255 255 / 65%) 41%, rgb(255 255 255 / 55%) 47%, rgb(255 255 255 / 45%) 53%, rgb(255 255 255 / 35%) 59%, rgb(255 255 255 / 26.7%) 65%, rgb(255 255 255 / 18.3%) 71%, rgb(255 255 255 / 10%) 77%, rgb(255 255 255 / 4%) 84.5%, rgb(255 255 255 / 1%) 91%, rgb(255 255 255 / 0%) 100% );--title-text-shadow: 0 1px 1px #fff3, 0 0 3px #fff2, 0 0 6px #fff2;--caption-gradient-mask-before: linear-gradient( 90deg, rgb(255 255 255 / 100%) 30%, rgb(255 255 255 / 98.3%) 35.6%, rgb(255 255 255 / 95%) 41%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 83.3%) 50.3%, rgb(255 255 255 / 73.3%) 54.5%, rgb(255 255 255 / 65%) 58.7%, rgb(255 255 255 / 55%) 62.9%, rgb(255 255 255 / 45%) 67%, rgb(255 255 255 / 35%) 71%, rgb(255 255 255 / 26.7%) 75.5%, rgb(255 255 255 / 18.3%) 80%, rgb(255 255 255 / 10%) 84%, rgb(255 255 255 / 4%) 89%, rgb(255 255 255 / 1%) 94%, rgb(255 255 255 / 0%) 100% );--caption-gradient-mask-before-RTL: linear-gradient( 270deg, rgb(255 255 255 / 100%) 30%, rgb(255 255 255 / 98.3%) 35.6%, rgb(255 255 255 / 95%) 41%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 83.3%) 50.3%, rgb(255 255 255 / 73.3%) 54.5%, rgb(255 255 255 / 65%) 58.7%, rgb(255 255 255 / 55%) 62.9%, rgb(255 255 255 / 45%) 67%, rgb(255 255 255 / 35%) 71%, rgb(255 255 255 / 26.7%) 75.5%, rgb(255 255 255 / 18.3%) 80%, rgb(255 255 255 / 10%) 84%, rgb(255 255 255 / 4%) 89%, rgb(255 255 255 / 1%) 94%, rgb(255 255 255 / 0%) 100% );--caption-gradient-mask-after: linear-gradient( 90deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 180deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 270deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 0deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% );--description-text-shadow: 0 .5px .5px #fff2, 0 1px 1px #fff2, 0 0 8px #fff2;--caption-title-font-size: max(var(--calcite-font-size-2xl), calc(18px + .64vw) );--caption-description-font-size: max(var(--calcite-font-size), calc(10px + .4vw) );--cover-description-font-size: max(var(--calcite-font-size-md), calc(10px + .5vw) );--cover-gradient-before: linear-gradient( 0deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 1%) 4%, rgb(255 255 255 / 4%) 7.7%, rgb(255 255 255 / 10%) 11.2%, rgb(255 255 255 / 18.3%) 14.5%, rgb(255 255 255 / 26.7%) 17.5%, rgb(255 255 255 / 35%) 20.5%, rgb(255 255 255 / 45%) 23.5%, rgb(255 255 255 / 55%) 26.5%, rgb(255 255 255 / 65%) 29.5%, rgb(255 255 255 / 73.3%) 32.5%, rgb(255 255 255 / 83.3%) 35.5%, rgb(255 255 255 / 90%) 38.5%, rgb(255 255 255 / 95%) 42.2%, rgb(255 255 255 / 98.3%) 46%, rgb(255 255 255 / 100%) 50%, rgb(255 255 255 / 98.3%) 54%, rgb(255 255 255 / 95%) 57.8%, rgb(255 255 255 / 90%) 61.5%, rgb(255 255 255 / 83.3%) 64.5%, rgb(255 255 255 / 73.3%) 67.5%, rgb(255 255 255 / 65%) 70.5%, rgb(255 255 255 / 55%) 73.5%, rgb(255 255 255 / 45%) 76.5%, rgb(255 255 255 / 35%) 79.5%, rgb(255 255 255 / 26.7%) 82.5%, rgb(255 255 255 / 18.3%) 85.5%, rgb(255 255 255 / 10%) 88.8%, rgb(255 255 255 / 4%) 92.3%, rgb(255 255 255 / 1%) 96%, rgb(255 255 255 / 0%) 100% );--cover-mask-before: linear-gradient( 90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 1%) 3.2%, rgb(255 255 255 / 4%) 6.2%, rgb(255 255 255 / 10%) 9%, rgb(255 255 255 / 18.3%) 11.6%, rgb(255 255 255 / 26.7%) 14%, rgb(255 255 255 / 35%) 16.4%, rgb(255 255 255 / 45%) 18.8%, rgb(255 255 255 / 55%) 21.2%, rgb(255 255 255 / 65%) 23.6%, rgb(255 255 255 / 73.3%) 26%, rgb(255 255 255 / 83.3%) 28.4%, rgb(255 255 255 / 90%) 30.8%, rgb(255 255 255 / 95%) 33.8%, rgb(255 255 255 / 98.3%) 36.8%, rgb(255 255 255 / 100%) 40%, rgb(255 255 255 / 100%) 60%, rgb(255 255 255 / 98.3%) 63.2%, rgb(255 255 255 / 95%) 66.2%, rgb(255 255 255 / 90%) 69.2%, rgb(255 255 255 / 83.3%) 71.6%, rgb(255 255 255 / 73.3%) 74%, rgb(255 255 255 / 65%) 76.4%, rgb(255 255 255 / 55%) 78.8%, rgb(255 255 255 / 45%) 81.2%, rgb(255 255 255 / 35%) 83.6%, rgb(255 255 255 / 26.7%) 86%, rgb(255 255 255 / 18.3%) 88.4%, rgb(255 255 255 / 10%) 91%, rgb(255 255 255 / 4%) 93.9%, rgb(255 255 255 / 1%) 96.8%, rgb(255 255 255 / 0%) 100% );--cover-mask-after: linear-gradient( 90deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 180deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 270deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% ), linear-gradient( 0deg, white calc(100% - 40px) , rgb(255 255 255 / 90%) calc(100% - 35px) , rgb(255 255 255 / 70%) calc(100% - 30px) , rgb(255 255 255 / 50%) calc(100% - 25px) , rgb(255 255 255 / 30%) calc(100% - 20px) , rgb(255 255 255 / 10%) calc(100% - 15px) , black 100% );--cover-gradient-phone: linear-gradient( 0deg, rgb(255 255 255 / 0%) .59%, rgb(255 255 255 / 4%) 4.94%, rgb(255 255 255 / 50%) 25.87%, rgb(255 255 255 / 70%) 37.02%, rgb(255 255 255 / 80%) 48.43%, rgb(255 255 255 / 70%) 60.34%, rgb(255 255 255 / 30%) 80.55%, rgb(255 255 255 / 4%) 93.22%, rgb(255 255 255 / 0%) 99.74% );.fadeOut{opacity:1!important}}`, n = 50, o = 256;
 class x extends s {
   constructor() {
     super(...arguments), this.transitionActive = !1, this.autoDestroyDisabled = !1, this.arcgisReady = b();
@@ -37,7 +37,7 @@ class x extends s {
     return c`<div class="captions-container"><div class="captions"><div class="title">${e}</div><div class="captions-description">${r}</div></div></div>`;
   }
 }
-l("arcgis-presentation-captions", x);
+g("arcgis-presentation-captions", x);
 export {
   x as ArcgisPresentationCaptions
 };

package/dist/components/arcgis-presentation-slide-list/customElement.js

@@ -0,0 +1,49 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { css as n, html as s } from "lit";
+import { LitElement as r, createEvent as c, nothing as a, safeClassMap as d } from "@arcgis/lumina";
+import "@arcgis/core/core/accessorSupport/decorators.js";
+import { classes as m } from "@arcgis/toolkit/dom";
+import { p } from "../../chunks/constants2.js";
+const h = n`:host{--calcite-list-background-color: var(--calcite-color-transparent);position:absolute;inset-block-end:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.presentation-slide-list-container{overflow-x:hidden;overflow-y:auto;pointer-events:auto;background-color:var(--calcite-color-surface-2);box-shadow:var(--arcgis-internal-box-shadow)}.presentation-slide-list{position:relative;display:block;width:300px;box-sizing:border-box}.slide-list-item-content{position:relative;display:flex;height:100%;justify-content:flex-start;box-sizing:border-box}.slide-list-item-selected{border:1px solid var(--calcite-color-surface-2);background:var(--calcite-color-surface-highlight)}.card-slide-title{margin-inline-start:var(--calcite-space-md);padding-inline-end:var(--calcite-space-xs);min-inline-size:0;align-content:center;font-size:var(--calcite-font-size--1)}.card-slide-title-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}@supports (line-clamp: 2){.card-slide-title-text{line-clamp:2}}.card-image{width:114px;height:62px}`;
+class u extends r {
+  constructor() {
+    super(...arguments), this.visualScale = "m", this.arcgisSlideListItemSelected = c(), this.arcgisSlideListOutsideClick = c();
+  }
+  static {
+    this.properties = { slides: 0, slideId: 1, label: 1, visualScale: 1 };
+  }
+  static {
+    this.styles = h;
+  }
+  loaded() {
+    this.manager.onLifecycle(() => {
+      this.listenOn(window, "mouseup", this.#t), this.#i();
+    });
+  }
+  #e(e) {
+    requestAnimationFrame(() => {
+      this.arcgisSlideListItemSelected.emit({ selectedSlide: e });
+    });
+  }
+  #t(e) {
+    const t = e.composedPath();
+    t.includes(this.el) || t.some((i) => i instanceof HTMLElement && i.id === p) || this.arcgisSlideListOutsideClick.emit();
+  }
+  #i() {
+    const e = this.renderRoot.querySelector("calcite-list-item[selected]");
+    e && e.setFocus();
+  }
+  render() {
+    return !this.slides || this.slides?.length === 0 ? s`<div></div>` : s`<div class="presentation-slide-list-container"><calcite-list .label=${this.label ?? ""} class="presentation-slide-list" .scale=${this.visualScale}>${this.slides.toArray().map((e) => {
+      const t = e.id === this.slideId, { thumbnail: l, title: i } = e;
+      return s`<calcite-list-item .selected=${t} class=${d(m({
+        "slide-list-item-selected": t
+      }))} @calciteListItemSelect=${() => this.#e(e)}><div slot=content class="slide-list-item-content"><img class="card-image" src=${l.url ?? a} alt=${i?.text ?? a}><div class="card-slide-title"><span class="card-slide-title-text">${i?.text}</span></div></div></calcite-list-item>`;
+    })}</calcite-list></div>`;
+  }
+}
+o("arcgis-presentation-slide-list", u);
+export {
+  u as ArcgisPresentationSlideList
+};

package/dist/components/arcgis-presentation-slide-list/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-list-item";
+export * from "./customElement.js";

package/dist/components/arcgis-scene/customElement.d.ts

@@ -182,13 +182,15 @@ export abstract class ArcgisScene extends LitElement {
    */
   get attributionItems(): SceneView["attributionItems"];
   /**
-   * The light or dark mode used to display the attribution.
-   * By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
-   * You can override the value to style the attribution alongside the map or scene content.
+   * The display mode used for the attribution. Defaults to null.
+   *
+   * Set this property to "auto" to automatically synchronize the attribution with the nearest [Calcite mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes). If no Calcite mode is detected, the attribution defaults to light mode. **The "auto" mode was added in version 5.2.**
+   *
+   * Set this property to "light" or "dark" to explicitly use that mode without synchronization.
    *
    * @since 5.0
    */
-  accessor attributionMode: "dark" | "light" | null | undefined;
+  accessor attributionMode: AttributionMode;
   /**
    * If true, the component will not be destroyed automatically when it is
    * disconnected from the document. This is useful when you want to move the
@@ -1268,4 +1270,6 @@ export abstract class ArcgisScene extends LitElement {
     arcgisViewReadyError: ArcgisScene["arcgisViewReadyError"]["detail"];
     arcgisViewVerticalTwoFingerDrag: ArcgisScene["arcgisViewVerticalTwoFingerDrag"]["detail"];
   };
-}
+}
+
+export type AttributionMode = SceneView["attributionMode"] | "auto";

package/dist/components/arcgis-scene/customElement.js

@@ -6,18 +6,18 @@ import { watch as s } from "@arcgis/core/core/reactiveUtils.js";
 import v from "@arcgis/core/geometry/Point.js";
 import u from "@arcgis/core/views/SceneView.js";
 import g from "@arcgis/core/WebScene.js";
-import { LitElement as d, createEvent as r, safeClassMap as n } from "@arcgis/lumina";
+import { LitElement as d, createEvent as r, safeClassMap as o } from "@arcgis/lumina";
 import { makeAccessorController as w, reEmitEvent as t, reCreateAccessor as y } from "@arcgis/lumina/controllers/accessor";
-import { createRef as o, ref as h } from "lit/directives/ref.js";
-import { U as f, u as b, a as V } from "../../chunks/useArcgisViewReadyError.js";
-import { s as C } from "../../chunks/esri-main.js";
+import { createRef as n, ref as h } from "lit/directives/ref.js";
+import { U as f, u as b, a as V, b as C } from "../../chunks/useArcgisViewReadyError.js";
+import { s as _ } from "../../chunks/esri-main.js";
 import { s as E } from "../../chunks/slots.js";
 import { C as c } from "../../chunks/resources.js";
-import { b as _, c as P, p as A, i as R } from "../../chunks/component-utils.js";
+import { b as P, c as A, p as M, i as R } from "../../chunks/component-utils.js";
 const D = w(g, {}), I = w(u, {});
-class M extends d {
+class k extends d {
   constructor() {
-    super(), this._containerRef = o(), this._mapRef = o(), this._uiController = new f(this), this._cameraProperties = {}, this.arcgisLoadError = b(this), this.arcgisViewReadyError = V(this), this._map = D(this), this.view = I(this), this.allLayerViews = this.view.allLayerViews, this.alphaCompositingEnabled = this.view.alphaCompositingEnabled, this.analyses = this.view.analyses, this.animationsDisabled = this.view.animationsEnabled, this.attributionMode = this.view.attributionMode, this.autoDestroyDisabled = !1, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.canZoomIn = this.view.canZoomIn, this.canZoomOut = this.view.canZoomOut, this.clippingArea = this.view.clippingArea, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.environment = this.view.environment, this.fatalError = this.view.fatalError, this.floors = this.view.floors, this.graphics = this.view.graphics, this.ground = this._map.ground, this.groundView = this.view.groundView, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.popupComponentEnabled = !1, this.qualityProfile = this.view.qualityProfile, this.ready = this.view.ready, this.selectionManager = this.view.selectionManager, this.slotGroupRefs = this._uiController.slotGroupRefs, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.updating = this.view.updating, this.viewingMode = this.view.viewingMode, this.visibleArea = this.view.visibleArea, this.arcgisViewAnalysisViewCreate = t(() => this.view, "analysis-view-create"), this.arcgisViewAnalysisViewCreateError = t(() => this.view, "analysis-view-create-error"), this.arcgisViewAnalysisViewDestroy = t(() => this.view, "analysis-view-destroy"), this.arcgisViewChange = r(), this.arcgisViewClick = t(() => this.view, "click"), this.arcgisViewDoubleClick = t(() => this.view, "double-click"), this.arcgisViewDoubleTapDrag = t(() => this.view, "double-tap-drag"), this.arcgisViewDrag = t(() => this.view, "drag"), this.arcgisViewHold = t(() => this.view, "hold"), this.arcgisViewImmediateClick = t(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = t(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = t(() => this.view, "key-down"), this.arcgisViewKeyUp = t(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = t(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = t(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = t(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = t(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = t(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = t(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = t(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = t(() => this.view, "pointer-move"), this.arcgisViewPointerUp = t(() => this.view, "pointer-up"), this.arcgisViewReadyChange = r(), this.arcgisViewVerticalTwoFingerDrag = t(() => this.view, "vertical-two-finger-drag"), this.view.ui = {
+    super(), this._attributionMode = null, this._containerRef = n(), this._mapRef = n(), this._uiController = new f(this), this._cameraProperties = {}, this.arcgisLoadError = b(this), this.arcgisViewReadyError = V(this), this._map = D(this), this.view = I(this), this.allLayerViews = this.view.allLayerViews, this.alphaCompositingEnabled = this.view.alphaCompositingEnabled, this.analyses = this.view.analyses, this.animationsDisabled = this.view.animationsEnabled, this.autoDestroyDisabled = !1, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.canZoomIn = this.view.canZoomIn, this.canZoomOut = this.view.canZoomOut, this.clippingArea = this.view.clippingArea, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.environment = this.view.environment, this.fatalError = this.view.fatalError, this.floors = this.view.floors, this.graphics = this.view.graphics, this.ground = this._map.ground, this.groundView = this.view.groundView, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.popupComponentEnabled = !1, this.qualityProfile = this.view.qualityProfile, this.ready = this.view.ready, this.selectionManager = this.view.selectionManager, this.slotGroupRefs = this._uiController.slotGroupRefs, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.updating = this.view.updating, this.viewingMode = this.view.viewingMode, this.visibleArea = this.view.visibleArea, this.arcgisViewAnalysisViewCreate = t(() => this.view, "analysis-view-create"), this.arcgisViewAnalysisViewCreateError = t(() => this.view, "analysis-view-create-error"), this.arcgisViewAnalysisViewDestroy = t(() => this.view, "analysis-view-destroy"), this.arcgisViewChange = r(), this.arcgisViewClick = t(() => this.view, "click"), this.arcgisViewDoubleClick = t(() => this.view, "double-click"), this.arcgisViewDoubleTapDrag = t(() => this.view, "double-tap-drag"), this.arcgisViewDrag = t(() => this.view, "drag"), this.arcgisViewHold = t(() => this.view, "hold"), this.arcgisViewImmediateClick = t(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = t(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = t(() => this.view, "key-down"), this.arcgisViewKeyUp = t(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = t(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = t(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = t(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = t(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = t(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = t(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = t(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = t(() => this.view, "pointer-move"), this.arcgisViewPointerUp = t(() => this.view, "pointer-up"), this.arcgisViewReadyChange = r(), this.arcgisViewVerticalTwoFingerDrag = t(() => this.view, "vertical-two-finger-drag"), C(this), this.view.ui = {
       components: []
     };
   }
@@ -25,7 +25,7 @@ class M extends d {
     this.properties = { _map: 16, aria: 0, view: 32, allLayerViews: 32, alphaCompositingEnabled: 5, analyses: 0, animationsDisabled: 5, attributionItems: 32, attributionMode: 1, autoDestroyDisabled: 5, basemap: 1, basemapView: 0, camera: 0, cameraFov: 9, cameraHeading: 9, cameraPosition: 1, cameraTilt: 9, canZoomIn: 36, canZoomOut: 36, center: 1, clippingArea: 0, constraints: 0, displayFilterDisabled: 5, environment: 0, extent: 0, fatalError: 0, floors: 0, focusAreas: 0, gamepad: 32, graphics: 0, ground: 1, groundView: 32, hideAttribution: 5, highlights: 0, interacting: 32, itemId: 3, layerViews: 32, magnifier: 32, map: 0, navigating: 32, navigation: 0, padding: 0, performanceInfo: 32, popup: 0, popupElement: 32, popupDisabled: 5, popupComponentEnabled: 5, qualityProfile: 1, ready: 36, resolution: 32, selectionManager: 32, scale: 9, slotGroupRefs: 32, spatialReference: 0, stationary: 32, suspended: 39, theme: 0, timeExtent: 0, updating: 36, viewingMode: 1, viewpoint: 0, visibleArea: 32, zoom: 9, loadErrorSources: 0 };
   }
   static {
-    this.styles = [C, E];
+    this.styles = [_, E];
   }
   get aria() {
     return this.view?.aria ?? null;
@@ -36,11 +36,17 @@ class M extends d {
   get attributionItems() {
     return this.view?.attributionItems ?? [];
   }
+  get attributionMode() {
+    return this._attributionMode;
+  }
+  set attributionMode(i) {
+    this._attributionMode = i, i !== "auto" && (this.view.attributionMode = i);
+  }
   get camera() {
     return this.view.camera;
   }
   set camera(i) {
-    _(this.camera, i) || (this.view.camera = i);
+    P(this.camera, i) || (this.view.camera = i);
   }
   get cameraFov() {
     const { view: i } = this;
@@ -68,7 +74,7 @@ class M extends d {
     return e ? new v(e) : void 0;
   }
   set cameraPosition(i) {
-    const e = P(this.view.camera?.position, i);
+    const e = A(this.view.camera?.position, i);
     e && this._mutateCamera((m) => {
       m.position = e;
     });
@@ -86,7 +92,7 @@ class M extends d {
     return this.view.center;
   }
   set center(i) {
-    const e = A(i, this.view);
+    const e = M(i, this.view);
     e && (this.view.center = e);
   }
   get extent() {
@@ -224,13 +230,13 @@ class M extends d {
     i(e), this.camera = e;
   }
   renderMain() {
-    return a`<div class=${n(c.base)} ${h(this._mapRef)}></div>`;
+    return a`<div class=${o(c.base)} ${h(this._mapRef)}></div>`;
   }
   render() {
-    return a`${this.renderMain()}<section class=${n(c.containerUI)} ${h(this._containerRef)}>${this._uiController.render()}</section>`;
+    return a`${this.renderMain()}<section class=${o(c.containerUI)} ${h(this._containerRef)}>${this._uiController.render()}</section>`;
   }
 }
-p("arcgis-scene", M);
+p("arcgis-scene", k);
 export {
-  M as ArcgisScene
+  k as ArcgisScene
 };

package/dist/components/arcgis-template-image/customElement.js

@@ -7,7 +7,6 @@ import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
 import { LitElement as _, safeStyleMap as y } from "@arcgis/lumina";
 import * as l from "@arcgis/toolkit/log";
 import { isSharedTemplateMetadata as c, isStandardFeatureTemplate as v } from "@arcgis/core/applications/Components/templateUtils.js";
-import "@arcgis/core/editing/sharedTemplates/SharedTemplateMetadata.js";
 import { renderPreviewHTML as w } from "@arcgis/core/symbols/support/symbolUtils.js";
 import { isTable as I } from "@arcgis/core/applications/Components/layerUtils.js";
 const D = g`.esri-thumbnail-preview{width:22px;height:22px;background-position:50% 50%;background-repeat:no-repeat}.template-image-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center}`;

package/dist/components/arcgis-time-bar/customElement.js

@@ -1,8 +1,8 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as W } from "../../chunks/runtime.js";
-import x from "@arcgis/core/time/TimeExtent.js";
 import { css as V, html as v } from "lit";
 import z from "@arcgis/core/core/Accessor.js";
+import x from "@arcgis/core/time/TimeExtent.js";
 import q from "@arcgis/core/webdoc/widgets/TimeSlider.js";
 import H from "@arcgis/core/webdoc/Widgets.js";
 import { b as G, d as L, a as U } from "../../chunks/async-utils.js";

package/dist/components/arcgis-utility-network-picker/customElement.d.ts

@@ -0,0 +1,56 @@
+/// <reference path="../../index.d.ts" />
+import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * This is a sub-component used by the **ArcgisUtilityNetworkTraceAnalysis** component.
+ * It allows users to select utility networks from the map.
+ *
+ * @since 5.2
+ * @internal
+ */
+export abstract class ArcgisUtilityNetworkPicker extends LitElement {
+  /** @internal */
+  protected _messages: {
+      componentLabel: string;
+      errors: {
+          mapLoadFailed: string;
+          noUtilityNetwork: string;
+          noView: string;
+          utilityNetworkLoadFailed: string;
+      };
+      labels: { utilityNetwork: string; };
+  } & T9nMeta<{
+      componentLabel: string;
+      errors: {
+          mapLoadFailed: string;
+          noUtilityNetwork: string;
+          noView: string;
+          utilityNetworkLoadFailed: string;
+      };
+      labels: { utilityNetwork: string; };
+  }>;
+  accessor error: string | undefined;
+  accessor heading: string | undefined;
+  /** @default false */
+  accessor hideErrors: boolean;
+  /** @default false */
+  accessor hideLoader: boolean;
+  accessor selectedUtilityNetwork: UtilityNetwork | undefined;
+  /** @default "loading" */
+  accessor state: "error" | "loading" | "ready";
+  /**
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-utility-network-picker component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapView | undefined;
+  /** Fires when an error occurs while loading the utility networks from the map. */
+  readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "selectedUtilityNetwork" | "state"; }>;
+  readonly "@eventTypes": {
+    arcgisError: ArcgisUtilityNetworkPicker["arcgisError"]["detail"];
+    arcgisPropertyChange: ArcgisUtilityNetworkPicker["arcgisPropertyChange"]["detail"];
+  };
+}

package/dist/components/arcgis-utility-network-picker/customElement.js

@@ -0,0 +1,91 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import h from "@arcgis/core/core/Collection.js";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as n, createEvent as m } from "@arcgis/lumina";
+import { usePropertyChange as w } from "@arcgis/lumina/controllers";
+import { log as o } from "@arcgis/toolkit/log";
+import { css as y, html as s } from "lit";
+import { l } from "../../chunks/async-utils.js";
+import { u as g } from "../../chunks/useT9n.js";
+const k = y`:host{height:100%;flex-grow:1}calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}calcite-block calcite-combobox,calcite-label{margin:0 var(--calcite-space-md)}calcite-block calcite-notice{margin:var(--calcite-space-md) var(--calcite-space-md) 0}calcite-notice{margin:var(--calcite-space-md)}`;
+class u extends n {
+  constructor() {
+    super(...arguments), this._messages = g({ blocking: !0 }), this.hideErrors = !1, this.hideLoader = !1, this.state = "loading", this.arcgisPropertyChange = w()("selectedUtilityNetwork", "state"), this.arcgisError = m();
+  }
+  static {
+    this.properties = { _utilityNetworks: 16, view: 0, hideErrors: 5, hideLoader: 5, state: 1, error: 1, selectedUtilityNetwork: 0, heading: 1 };
+  }
+  static {
+    this.styles = k;
+  }
+  load() {
+    this.#e(), this.manager.onLifecycle(() => [
+      d(() => this.view?.map, () => this.#e())
+    ]);
+  }
+  willUpdate(t) {
+    t.has("_utilityNetworks") && this.#r(), t.has("selectedUtilityNetwork") && this.#s();
+  }
+  #t(t) {
+    this.error = t, this.state = "error", this.arcgisError.emit();
+  }
+  #e() {
+    if (this.error = void 0, this.state = "loading", !this.view?.map) {
+      o("error", this, this._messages.errors.noView), this._utilityNetworks = void 0, this.#t(this._messages.errors.noView);
+      return;
+    }
+    const t = this.view.map;
+    this.#i(t);
+  }
+  async #i(t) {
+    try {
+      t.loaded || await t.load();
+    } catch (e) {
+      this.#t(this._messages.errors.mapLoadFailed), l(e, this, this._messages.errors.mapLoadFailed);
+    } finally {
+      this._utilityNetworks = t.utilityNetworks || new h();
+    }
+  }
+  #r() {
+    const { selectedUtilityNetwork: t, _utilityNetworks: e } = this;
+    e?.length ? (!t || !e.includes(t)) && (this.selectedUtilityNetwork = e.at(0)) : (this.#t(this._messages.errors.noUtilityNetwork), o("error", this, this._messages.errors.noUtilityNetwork), this.selectedUtilityNetwork = void 0);
+  }
+  async #s() {
+    const { selectedUtilityNetwork: t } = this;
+    try {
+      t && !t.loaded && await t.load(), this.state = "ready";
+    } catch (e) {
+      l(e, this, this._messages.errors.utilityNetworkLoadFailed), this.#t(this._messages.errors.utilityNetworkLoadFailed);
+    }
+  }
+  #o() {
+    return this.hideLoader ? null : s`<calcite-loader label=loading></calcite-loader>`;
+  }
+  #l(t, e = !1, i) {
+    return this.hideErrors ? null : s`<calcite-notice .closable=${e} kind=danger open scale=s width=auto .icon=${i}><div slot=message>${t}</div></calcite-notice>`;
+  }
+  #a() {
+    const t = this._messages.labels.utilityNetwork, e = this._utilityNetworks?.map((i) => s`<calcite-combobox-item .value=${i.id} .heading=${i.title || i.id} .selected=${i.id === this.selectedUtilityNetwork?.id}></calcite-combobox-item>`);
+    return s`<calcite-combobox .label=${t} selection-mode=single-persist @calciteComboboxChange=${({ currentTarget: i }) => {
+      const r = i.selectedItems[0]?.value;
+      this.selectedUtilityNetwork?.id !== r && (this.selectedUtilityNetwork = this._utilityNetworks?.find((a) => a.id === r));
+    }}>${e}</calcite-combobox>`;
+  }
+  #c() {
+    const { selectedUtilityNetwork: t } = this;
+    return s`<calcite-label>${t?.title}</calcite-label>`;
+  }
+  #h(t) {
+    const e = this._messages.labels.utilityNetwork, i = this.heading || e, r = this._utilityNetworks?.length ? this._utilityNetworks?.length === 1 ? this.#c() : this.#a() : void 0;
+    return s`<calcite-block .heading=${i} .label=${e} expanded>${r}${t}</calcite-block>`;
+  }
+  render() {
+    const { error: t, state: e, selectedUtilityNetwork: i } = this, r = e === "error" && t ? this.#l(t, !1, "exclamation-mark-triangle") : void 0;
+    return !r && !i?.loaded && !i?.loadError ? this.#o() : e === "error" && r && !this._utilityNetworks?.length ? r : this.#h(r);
+  }
+}
+c("arcgis-utility-network-picker", u);
+export {
+  u as ArcgisUtilityNetworkPicker
+};

package/dist/components/arcgis-utility-network-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-utility-network-picker/index.js

@@ -0,0 +1,7 @@
+import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-combobox-item";
+import "@esri/calcite-components/components/calcite-combobox";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-block";
+export * from "./customElement.js";

package/dist/components/arcgis-utility-network-trace-analysis/customElement.js

@@ -4,7 +4,6 @@ import { css as y, html as a } from "lit";
 import { ref as g } from "lit/directives/ref.js";
 import { keyed as u } from "lit/directives/keyed.js";
 import d from "@arcgis/core/Color.js";
-import "@arcgis/core/core/Error.js";
 import { when as f } from "@arcgis/core/core/reactiveUtils.js";
 import b from "@arcgis/core/networks/UtilityNetworkTraceAnalysis.js";
 import { LitElement as w, createEvent as o } from "@arcgis/lumina";

package/dist/components/arcgis-utility-network-trace-analysis-next/customElement.js

@@ -4,7 +4,6 @@ import { css as m, html as a } from "lit";
 import { ref as g } from "lit/directives/ref.js";
 import { keyed as u } from "lit/directives/keyed.js";
 import y from "@arcgis/core/Color.js";
-import "@arcgis/core/core/Error.js";
 import { when as f } from "@arcgis/core/core/reactiveUtils.js";
 import b from "@arcgis/core/networks/UtilityNetworkTraceAnalysis.js";
 import { LitElement as w, createEvent as o } from "@arcgis/lumina";