@nasa-terra/components 0.0.198 → 0.0.199

package/dist/chunks/chunk.QQV7OIO7.js

@@ -0,0 +1,55 @@
+import{a as c}from"./chunk.T2FIFNZX.js";import{a as m}from"./chunk.URTV3MIW.js";import{a as p}from"./chunk.X5OPH5X7.js";import{b as u}from"./chunk.UTJA3S5Z.js";import{a as s}from"./chunk.6PEAAW4E.js";import{a as n}from"./chunk.J5Q4TWEG.js";import{a as h,c as d}from"./chunk.AWA2ZGEV.js";import{e}from"./chunk.INFVQQSJ.js";import{property as l,query as y,state as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{html as i}from"lit";import{ifDefined as o}from"lit/directives/if-defined.js";import{live as C}from"lit/directives/live.js";var t=class extends d{constructor(){super(...arguments);this.formControlController=new u(this,{value:r=>r.value,defaultValue:r=>r.defaultValue,setValue:(r,a)=>r.value=a});this.hasSlotController=new s(this,"help-text");this.hasFocus=!1;this.name="";this.value="";this.placeholder="";this.disabled=!1;this.readonly=!1;this.required=!1;this.label="";this.hideLabel=!1;this.helpText="";this.resize="vertical";this.defaultValue="";this.form=""}get validity(){return this.textarea.validity}get validationMessage(){return this.textarea.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleInput(){this.value=this.textarea.value,this.formControlController.updateValidity(),this.emit("terra-input")}handleChange(){this.value=this.textarea.value,this.formControlController.updateValidity(),this.emit("terra-change")}handleInvalid(r){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(r)}handleFocus(){this.hasFocus=!0,this.emit("terra-focus")}handleBlur(){this.hasFocus=!1,this.formControlController.updateValidity(),this.emit("terra-blur")}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}checkValidity(){return this.textarea.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.textarea.reportValidity()}setCustomValidity(r){this.textarea.setCustomValidity(r),this.formControlController.updateValidity()}focus(r){this.textarea.focus(r)}blur(){this.textarea.blur()}select(){this.textarea.select()}setSelectionRange(r,a,b="none"){this.textarea.setSelectionRange(r,a,b)}render(){let r=this.hasSlotController.test("help-text"),a=this.helpText?!0:!!r;return i`
+            <div
+                class=${f({"form-control":!0,"form-control--has-help-text":a})}
+            >
+                ${this.label?i`
+                          <label
+                              for="textarea"
+                              part="form-control-label"
+                              class=${this.hideLabel?"textarea__label textarea__label--hidden":"textarea__label"}
+                          >
+                              ${this.label}
+                              ${this.required?i`<span class="textarea__required-indicator"
+                                        >*</span
+                                    >`:""}
+                          </label>
+                      `:""}
+
+                <div
+                    part="base"
+                    class=${f({textarea:!0,"textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--resize-none":this.resize==="none","textarea--resize-both":this.resize==="both","textarea--resize-horizontal":this.resize==="horizontal","textarea--resize-vertical":this.resize==="vertical"})}
+                >
+                    <textarea
+                        part="textarea"
+                        id="textarea"
+                        class="textarea__control"
+                        name=${o(this.name||void 0)}
+                        ?disabled=${this.disabled}
+                        ?readonly=${this.readonly}
+                        ?required=${this.required}
+                        placeholder=${o(this.placeholder||void 0)}
+                        minlength=${o(this.minlength)}
+                        maxlength=${o(this.maxlength)}
+                        rows=${o(this.rows)}
+                        cols=${o(this.cols)}
+                        .value=${C(this.value)}
+                        autocomplete=${o(this.autocomplete)}
+                        aria-describedby="help-text"
+                        @input=${this.handleInput}
+                        @change=${this.handleChange}
+                        @invalid=${this.handleInvalid}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                    ></textarea>
+                </div>
+
+                <div
+                    aria-hidden=${a?"false":"true"}
+                    class="form-control__help-text"
+                    id="help-text"
+                    part="form-control-help-text"
+                >
+                    <slot name="help-text">${this.helpText}</slot>
+                </div>
+            </div>
+        `}};t.styles=[h,p,c],e([y(".textarea__control")],t.prototype,"textarea",2),e([v()],t.prototype,"hasFocus",2),e([l()],t.prototype,"name",2),e([l()],t.prototype,"value",2),e([l()],t.prototype,"placeholder",2),e([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([l({type:Boolean,reflect:!0})],t.prototype,"readonly",2),e([l({type:Boolean,reflect:!0})],t.prototype,"required",2),e([l()],t.prototype,"autocomplete",2),e([l({type:Number})],t.prototype,"minlength",2),e([l({type:Number})],t.prototype,"maxlength",2),e([l({type:Number})],t.prototype,"rows",2),e([l({type:Number})],t.prototype,"cols",2),e([l()],t.prototype,"label",2),e([l({attribute:"hide-label",type:Boolean})],t.prototype,"hideLabel",2),e([l({attribute:"help-text"})],t.prototype,"helpText",2),e([l({reflect:!0})],t.prototype,"resize",2),e([m("value")],t.prototype,"defaultValue",2),e([l({reflect:!0})],t.prototype,"form",2),e([n("disabled",{waitUntilFirstUpdate:!0})],t.prototype,"handleDisabledChange",1);export{t as a};

package/dist/chunks/chunk.QS2CNV3Q.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.3AF4SJ26.js";var c=e;e.define("terra-date-picker");export{c as a};

package/dist/chunks/chunk.QUULVCZU.js

@@ -0,0 +1 @@
+import{a as o}from"./chunk.AV5MTWD4.js";import{a as r}from"./chunk.INFVQQSJ.js";import s from"ol/format/MVT.js";import i from"ol/layer/VectorTile.js";import{stylefunction as p}from"ol-mapbox-style";import m from"ol/source/VectorTile.js";var a="esri",t=class extends i{constructor(e={}){super({source:new m(r({format:new s,url:"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf",attributions:["Esri","HERE","Garmin"]},e.noWorldWrap?{wrapX:!1}:{}))}),p(this,o,a)}};export{t as a};

package/dist/chunks/chunk.R4JAF7DS.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.RNGOVZGF.js";var g=e;e.define("terra-badge");export{g as a};

package/dist/chunks/chunk.RFRYQSE5.js

@@ -0,0 +1,41 @@
+import{a as w}from"./chunk.ATX7REBU.js";import{a as g}from"./chunk.SPNO75Q4.js";import{a as b}from"./chunk.QDFHF7LY.js";import{b as f,c as v}from"./chunk.Z5QBF4NS.js";import{a as S}from"./chunk.BF5VMLO3.js";import{a as c}from"./chunk.J5Q4TWEG.js";import{a as p,c as y}from"./chunk.AWA2ZGEV.js";import{e as t,f as l,g as d,h as m}from"./chunk.INFVQQSJ.js";import{html as h,nothing as u}from"lit";import{property as n,query as C,state as B}from"lit/decorators.js";import{cache as x}from"lit/directives/cache.js";import{map as P}from"lit/directives/map.js";var s,o=class extends b(y){constructor(){super(...arguments);this.minZoom=0;this.maxZoom=23;this.zoom=1;this.hasNavigation=!1;this.showMouseCoordinates=!1;this.hasShapeSelector=!1;this.showGraticule=!1;this.showBoundingBoxSelection=!1;this.showPointSelection=!1;this.showPolygonSelection=!1;this.showCircleSelection=!1;this.staticMode=!1;this.fill=!1;this.noWorldWrap=!1;this.spatialConstraints="-180, -90, 180, 90";this.fitToValue=!1;this.cursorCoordinates=[0,0];this.shapeLoading=!1;d(this,s,void 0);this.shapesQuery=new S(this,()=>f())}zoomChanged(){var e;(e=l(this,s))==null||e.setZoom(this.zoom)}set hasCoordTracker(e){console.warn('The "has-coord-tracker" property is deprecated. Please use "show-mouse-coordinates" instead.'),this.showMouseCoordinates=e}get hasCoordTracker(){return this.showMouseCoordinates}showGraticuleChanged(){var e;(e=l(this,s))==null||e.toggleLayerVisibility("graticule",this.showGraticule)}set hideBoundingBoxSelection(e){console.warn('The "hide-bounding-box-selection" property is deprecated. Please use "show-bounding-box-selection" instead.'),this.showBoundingBoxSelection=!e}get hideBoundingBoxSelection(){return!this.showBoundingBoxSelection}set hidePointSelection(e){console.warn('The "hide-point-selection" property is deprecated. Please use "show-point-selection" instead.'),this.showPointSelection=!e}get hidePointSelection(){return!this.showPointSelection}drawButtonSelectionChanged(){var e;(e=l(this,s))==null||e.updateDrawToolbarVisibility({showBoundingBoxSelection:this.showBoundingBoxSelection,showPointSelection:this.showPointSelection,showPolygonSelection:this.showPolygonSelection,showCircleSelection:this.showCircleSelection})}valueChanged(e,i){var a;(a=l(this,s))==null||a.setValue(i)}async firstUpdated(){m(this,s,new w(this.mapElement,{zoom:this.zoom,minZoom:this.minZoom,maxZoom:this.maxZoom,showGraticule:this.showGraticule,showBoundingBoxSelection:this.showBoundingBoxSelection,showPointSelection:this.showPointSelection,showPolygonSelection:this.showPolygonSelection,showCircleSelection:this.showCircleSelection,noWorldWrap:this.noWorldWrap,value:this.value,fitToValue:this.fitToValue,getGeoJson:e=>this.queryClient.fetchQuery(v(e)),onMouseMove:(e,i)=>{this.cursorCoordinates=e,this.emit("terra-map-pointer-move",{detail:{coordinate:e,pixel:i}})},onDraw:e=>{this.emit("terra-map-change",{detail:e})},onShapeLoading:e=>{this.shapeLoading=e}}))}addLayer(e,i){var a;(a=l(this,s))==null||a.addLayer(e,i)}removeLayer(e){var i;(i=l(this,s))==null||i.removeLayer(e)}getLayer(e){var i;return(i=l(this,s))==null?void 0:i.getLayer(e)}fitToExtent(e,i){var a;(a=l(this,s))==null||a.fitToExtent(e,i)}addInteraction(e){var i;(i=l(this,s))==null||i.addInteraction(e)}removeInteraction(e){var i;(i=l(this,s))==null||i.removeInteraction(e)}getCanvasElements(){var e;return(e=l(this,s))==null?void 0:e.getCanvasElements()}getSize(){var e;return(e=l(this,s))==null?void 0:e.getSize()}getPixelFromCoordinate(e){var i;return(i=l(this,s))==null?void 0:i.getPixelFromCoordinate(e)}renderComplete(){var e;return(e=l(this,s))==null?void 0:e.renderComplete()}selectTemplate(){var i;let e=(i=this.shapesQuery.result)==null?void 0:i.data;return h`
+            <select
+                class="map__select form-control"
+                @change=${a=>{var r;return(r=l(this,s))==null?void 0:r.handleShapeSelect(a)}}
+            >
+                <option value="">Select a Shape...</option>
+
+                ${x(P(e!=null?e:void 0,a=>h`<optgroup label="${a.title}">
+                            ${a.shapes.map(r=>h`
+                                    <option
+                                        value="${r.shapefileID}/${r.shapeID}"
+                                    >
+                                        ${r.name}
+                                    </option>
+                                `)}
+                        </optgroup> `))}
+            </select>
+        `}render(){return h`
+            ${this.hasShapeSelector?this.selectTemplate():u}
+            <div
+                part="map"
+                class=${`map ${this.staticMode?"static":""} ${this.fill?"fill":""}`}
+            >
+                ${this.showMouseCoordinates?h`
+                          <div id="mouse-info">
+                              <div>
+                                  <strong
+                                      >lat: ${this.cursorCoordinates[1].toFixed(2)},
+                                      lng:
+                                      ${this.cursorCoordinates[0].toFixed(2)}</strong
+                                  >
+                              </div>
+                          </div>
+                      `:u}
+                ${this.shapeLoading?h`
+                          <div class="map__loading-overlay">
+                              <div class="map__spinner"></div>
+                          </div>
+                      `:u}
+            </div>
+        `}};s=new WeakMap,o.styles=[p,g],t([n({attribute:"min-zoom",type:Number})],o.prototype,"minZoom",2),t([n({attribute:"max-zoom",type:Number})],o.prototype,"maxZoom",2),t([n({type:Number})],o.prototype,"zoom",2),t([c("zoom")],o.prototype,"zoomChanged",1),t([n({attribute:"has-navigation",type:Boolean})],o.prototype,"hasNavigation",2),t([n({attribute:"show-mouse-coordinates",type:Boolean})],o.prototype,"showMouseCoordinates",2),t([n({attribute:"has-coord-tracker",type:Boolean})],o.prototype,"hasCoordTracker",1),t([n({attribute:"has-shape-selector",type:Boolean})],o.prototype,"hasShapeSelector",2),t([n({attribute:"show-graticule",type:Boolean})],o.prototype,"showGraticule",2),t([c("showGraticule")],o.prototype,"showGraticuleChanged",1),t([n({attribute:"show-bounding-box-selection",type:Boolean})],o.prototype,"showBoundingBoxSelection",2),t([n({attribute:"hide-bounding-box-selection",type:Boolean})],o.prototype,"hideBoundingBoxSelection",1),t([n({attribute:"show-point-selection",type:Boolean})],o.prototype,"showPointSelection",2),t([n({attribute:"hide-point-selection",type:Boolean})],o.prototype,"hidePointSelection",1),t([n({attribute:"show-polygon-selection",type:Boolean})],o.prototype,"showPolygonSelection",2),t([n({attribute:"show-circle-selection",type:Boolean})],o.prototype,"showCircleSelection",2),t([n({type:Boolean})],o.prototype,"staticMode",2),t([n({type:Boolean,reflect:!0})],o.prototype,"fill",2),t([n({attribute:"no-world-wrap",type:Boolean})],o.prototype,"noWorldWrap",2),t([n({attribute:"spatial-constraints"})],o.prototype,"spatialConstraints",2),t([n({type:String})],o.prototype,"value",2),t([n({type:Boolean,attribute:"fit-to-feature"})],o.prototype,"fitToValue",2),t([C('[part="map"]')],o.prototype,"mapElement",2),t([B()],o.prototype,"cursorCoordinates",2),t([B()],o.prototype,"shapeLoading",2),t([c(["showBoundingBoxSelection","showPointSelection","showPolygonSelection","showCircleSelection"])],o.prototype,"drawButtonSelectionChanged",1),t([c("value")],o.prototype,"valueChanged",1);export{o as a};

package/dist/chunks/chunk.RIDJTVHV.js

@@ -0,0 +1 @@
+import{b as a}from"./chunk.IHH2EMZT.js";var s=a;a.define("terra-data-access");export{s as a};

package/dist/chunks/chunk.RNGOVZGF.js

@@ -0,0 +1,9 @@
+import{a as i}from"./chunk.PHR3ARS7.js";import{a,c as s}from"./chunk.AWA2ZGEV.js";import{e as r}from"./chunk.INFVQQSJ.js";import{classMap as n}from"lit/directives/class-map.js";import{html as o}from"lit";import{property as e}from"lit/decorators.js";var t=class extends s{constructor(){super(...arguments);this.variant="information";this.pill=!1;this.pulse=!1}render(){return o`
+            <span
+                part="base"
+                class=${n({badge:!0,"badge--primary":this.variant==="primary","badge--information":this.variant==="information","badge--success":this.variant==="success","badge--neutral":this.variant==="neutral","badge--warning":this.variant==="warning","badge--danger":this.variant==="danger","badge--pill":this.pill,"badge--pulse":this.pulse})}
+                role="status"
+            >
+                <slot></slot>
+            </span>
+        `}};t.styles=[a,i],r([e({reflect:!0})],t.prototype,"variant",2),r([e({type:Boolean,reflect:!0})],t.prototype,"pill",2),r([e({type:Boolean,reflect:!0})],t.prototype,"pulse",2);export{t as a};

package/dist/chunks/chunk.RRTP2FHP.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.RNGOVZGF.js";import*as a from"react";import{createComponent as r}from"@lit/react";var t="terra-badge";e.define("terra-badge");var o=r({tagName:t,elementClass:e,react:a,events:{},displayName:"TerraBadge"}),d=o;export{d as a};

package/dist/chunks/chunk.RW66TULD.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.5DDZRQCR.js";import*as r from"react";import{createComponent as o}from"@lit/react";import"@lit/react";var t="terra-accordion";e.define("terra-accordion");var n=o({tagName:t,elementClass:e,react:r,events:{onTerraAccordionToggle:"terra-accordion-toggle"},displayName:"TerraAccordion"}),d=n;export{d as a};

package/dist/chunks/chunk.RXSKPOBF.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.UZHA3QCH.js";import*as t from"react";import{createComponent as r}from"@lit/react";import"@lit/react";var o="terra-data-subsetter";e.define("terra-data-subsetter");var a=r({tagName:o,elementClass:e,react:t,events:{onTerraSubsetJobComplete:"terra-subset-job-complete"},displayName:"TerraDataSubsetter"}),l=a;export{l as a};

package/dist/chunks/chunk.RYL27WYB.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.2HEXM6MX.js";import*as r from"react";import{createComponent as t}from"@lit/react";import"@lit/react";var n="terra-input";e.define("terra-input");var a=t({tagName:n,elementClass:e,react:r,events:{onTerraInput:"terra-input",onTerraChange:"terra-change",onTerraFocus:"terra-focus",onTerraBlur:"terra-blur",onTerraInvalid:"terra-invalid",onTerraClear:"terra-clear"},displayName:"TerraInput"}),T=a;export{T as a};

package/dist/chunks/chunk.SAHUIO3P.js

@@ -0,0 +1 @@
+import{a as r}from"./chunk.CD5ZQXGV.js";import{a as e,c as o}from"./chunk.AWA2ZGEV.js";import{html as m}from"lit";var t=class extends o{render(){return m`<slot></slot>`}};t.styles=[e,r];export{t as a};

package/dist/chunks/chunk.SPNO75Q4.js

@@ -0,0 +1,514 @@
+import{css as o}from"lit";var a=o`
+    :host {
+        display: block;
+        padding: 16px;
+        background: var(--terra-map-background-color);
+        border: 1px solid var(--terra-map-border-color);
+        border-radius: var(--terra-border-radius-medium);
+    }
+
+    :host([fill]) {
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    :root,
+    :host {
+        --ol-background-color: white;
+        --ol-accent-background-color: #f5f5f5;
+        --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
+        --ol-partial-background-color: rgba(255, 255, 255, 0.75);
+        --ol-foreground-color: #333333;
+        --ol-subtle-foreground-color: #666666;
+        --ol-brand-color: #00aaff;
+    }
+
+    [part='map'] {
+        position: relative;
+    }
+
+    #mouse-info {
+        font: 16px var(--terra-font-family--public-sans);
+        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 0.75rem;
+        line-height: 1.5;
+        position: absolute;
+        bottom: 20px;
+        left: 10px;
+        border-radius: 4px;
+        padding: 5px;
+        background-color: var(--terra-input-background-default, #ffffff);
+        color: var(--terra-input-text-default, #333333);
+        box-shadow: none;
+        border: 2px solid rgba(0, 0, 0, 0.2);
+        background-clip: padding-box;
+        z-index: 2;
+    }
+
+    .ol-tooltip {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.75);
+        color: white;
+        padding: 6px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        pointer-events: none;
+        white-space: nowrap;
+    }
+
+    .draw-toolbar {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 4em;
+        left: 0.5em;
+    }
+
+    .draw-toolbar button {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: white;
+        cursor: pointer;
+    }
+
+    .draw-toolbar button:hover {
+        background: #f0f0f0;
+    }
+
+    .ol-box {
+        box-sizing: border-box;
+        border-radius: 2px;
+        border: 1.5px solid var(--ol-background-color);
+        background-color: var(--ol-partial-background-color);
+    }
+
+    .ol-mouse-position {
+        top: 8px;
+        right: 8px;
+        position: absolute;
+    }
+
+    .ol-scale-line {
+        background: var(--ol-partial-background-color);
+        border-radius: 4px;
+        bottom: 8px;
+        left: 8px;
+        padding: 2px;
+        position: absolute;
+    }
+
+    .ol-scale-line-inner {
+        border: 1px solid var(--ol-subtle-foreground-color);
+        border-top: none;
+        color: var(--ol-foreground-color);
+        font-size: 10px;
+        text-align: center;
+        margin: 1px;
+        will-change: contents, width;
+        transition: all 0.25s;
+    }
+
+    .ol-scale-bar {
+        position: absolute;
+        bottom: 8px;
+        left: 8px;
+    }
+
+    .ol-scale-bar-inner {
+        display: flex;
+    }
+
+    .ol-scale-step-marker {
+        width: 1px;
+        height: 15px;
+        background-color: var(--ol-foreground-color);
+        float: right;
+        z-index: 10;
+    }
+
+    .ol-scale-step-text {
+        position: absolute;
+        bottom: -5px;
+        font-size: 10px;
+        z-index: 11;
+        color: var(--ol-foreground-color);
+        text-shadow:
+            -1.5px 0 var(--ol-partial-background-color),
+            0 1.5px var(--ol-partial-background-color),
+            1.5px 0 var(--ol-partial-background-color),
+            0 -1.5px var(--ol-partial-background-color);
+    }
+
+    .ol-scale-text {
+        position: absolute;
+        font-size: 12px;
+        text-align: center;
+        bottom: 25px;
+        color: var(--ol-foreground-color);
+        text-shadow:
+            -1.5px 0 var(--ol-partial-background-color),
+            0 1.5px var(--ol-partial-background-color),
+            1.5px 0 var(--ol-partial-background-color),
+            0 -1.5px var(--ol-partial-background-color);
+    }
+
+    .ol-scale-singlebar {
+        position: relative;
+        height: 10px;
+        z-index: 9;
+        box-sizing: border-box;
+        border: 1px solid var(--ol-foreground-color);
+    }
+
+    .ol-scale-singlebar-even {
+        background-color: var(--ol-subtle-foreground-color);
+    }
+
+    .ol-scale-singlebar-odd {
+        background-color: var(--ol-background-color);
+    }
+
+    .ol-unsupported {
+        display: none;
+    }
+
+    .ol-viewport,
+    .ol-unselectable {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .ol-viewport canvas {
+        all: unset;
+        overflow: hidden;
+    }
+
+    .ol-viewport {
+        touch-action: pan-x pan-y;
+    }
+
+    .ol-selectable {
+        -webkit-touch-callout: default;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        user-select: text;
+    }
+
+    .ol-grabbing {
+        cursor: -webkit-grabbing;
+        cursor: -moz-grabbing;
+        cursor: grabbing;
+    }
+
+    .ol-grab {
+        cursor: move;
+        cursor: -webkit-grab;
+        cursor: -moz-grab;
+        cursor: grab;
+    }
+
+    .ol-control {
+        position: absolute;
+        background-color: var(--ol-subtle-background-color);
+        border-radius: 4px;
+    }
+
+    .ol-zoom {
+        top: 0.5em;
+        left: 0.5em;
+    }
+
+    .ol-rotate {
+        top: 0.5em;
+        right: 0.5em;
+        transition:
+            opacity 0.25s linear,
+            visibility 0s linear;
+    }
+
+    .ol-rotate.ol-hidden {
+        opacity: 0;
+        visibility: hidden;
+        transition:
+            opacity 0.25s linear,
+            visibility 0s linear 0.25s;
+    }
+
+    .ol-zoom-extent {
+        top: 4.643em;
+        left: 0.5em;
+    }
+
+    .ol-full-screen {
+        right: 0.5em;
+        top: 0.5em;
+    }
+
+    .ol-control button {
+        display: block;
+        margin: 1px;
+        padding: 0;
+        color: var(--ol-subtle-foreground-color);
+        font-weight: bold;
+        text-decoration: none;
+        font-size: inherit;
+        text-align: center;
+        height: 1.375em;
+        width: 1.375em;
+        line-height: 0.4em;
+        background-color: var(--ol-background-color);
+        border: none;
+        border-radius: 2px;
+        position: relative;
+    }
+
+    .ol-control button::-moz-focus-inner {
+        border: none;
+        padding: 0;
+    }
+
+    .ol-zoom-extent button {
+        line-height: 1.4em;
+    }
+
+    .ol-compass {
+        display: block;
+        font-weight: normal;
+        will-change: transform;
+    }
+
+    .ol-touch .ol-control button {
+        font-size: 1.5em;
+    }
+
+    .ol-touch .ol-zoom-extent {
+        top: 5.5em;
+    }
+
+    .ol-control button:hover,
+    .ol-control button:focus {
+        text-decoration: none;
+        outline: 1px solid var(--ol-subtle-foreground-color);
+        color: var(--ol-foreground-color);
+    }
+
+    .ol-zoom .ol-zoom-in {
+        border-radius: 2px 2px 0 0;
+    }
+
+    .ol-zoom .ol-zoom-out {
+        border-radius: 0 0 2px 2px;
+    }
+
+    .ol-attribution {
+        display: none !important;
+    }
+
+    .ol-zoomslider {
+        top: 4.5em;
+        left: 0.5em;
+        height: 200px;
+    }
+
+    .ol-zoomslider button {
+        position: relative;
+        height: 10px;
+    }
+
+    .ol-touch .ol-zoomslider {
+        top: 5.5em;
+    }
+
+    .ol-overviewmap {
+        left: 0.5em;
+        bottom: 0.5em;
+    }
+
+    .ol-overviewmap.ol-uncollapsible {
+        bottom: 0;
+        left: 0;
+        border-radius: 0 4px 0 0;
+    }
+
+    .ol-overviewmap .ol-overviewmap-map,
+    .ol-overviewmap button {
+        display: block;
+    }
+
+    .ol-overviewmap .ol-overviewmap-map {
+        border: 1px solid var(--ol-subtle-foreground-color);
+        height: 150px;
+        width: 150px;
+    }
+
+    .ol-overviewmap:not(.ol-collapsed) button {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+    }
+
+    .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+    .ol-overviewmap.ol-uncollapsible button {
+        display: none;
+    }
+
+    .ol-overviewmap:not(.ol-collapsed) {
+        background: var(--ol-subtle-background-color);
+    }
+
+    .ol-overviewmap-box {
+        border: 1.5px dotted var(--ol-subtle-foreground-color);
+    }
+
+    .ol-overviewmap .ol-overviewmap-box:hover {
+        cursor: move;
+    }
+
+    .ol-overviewmap .ol-viewport:hover {
+        cursor: pointer;
+    }
+
+    /* Responsive design for smaller screens */
+    @media (max-width: 768px) {
+        :host {
+            gap: 1rem 0.5rem;
+        }
+
+        .map-container {
+            min-height: 300px;
+        }
+
+        #map {
+            min-height: 300px;
+        }
+
+        #settings {
+            bottom: 100px;
+            left: 5px;
+            padding: 6px 8px;
+            font-size: 11px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .map-container {
+            min-height: 250px;
+        }
+
+        #map {
+            min-height: 250px;
+        }
+
+        #settings {
+            bottom: 80px;
+            left: 5px;
+            padding: 4px 6px;
+            font-size: 10px;
+        }
+    }
+
+    .map {
+        aspect-ratio: 4 / 3;
+        border: solid 1px var(--terra-map-border-color);
+    }
+
+    .map.fill {
+        aspect-ratio: unset;
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+
+    .map.static .ol-control {
+        display: none;
+    }
+
+    .control-button {
+        /* TODO: use a local spritesheet instead */
+        background-image:
+            linear-gradient(transparent, transparent),
+            url('https://unpkg.com/leaflet-draw@1.0.4/dist/images/spritesheet.svg');
+        background-repeat: no-repeat;
+        background-size: 300px 22px;
+        background-clip: padding-box;
+        position: absolute;
+        top: 30%;
+        left: 30%;
+        width: 40%;
+        height: 40%;
+    }
+
+    .control-bbox {
+        background-position: -90px;
+    }
+
+    .control-polygon {
+        background-position: -68px;
+    }
+
+    .control-point {
+        background-position: -134px;
+    }
+
+    .control-circle {
+        background-position: -112px;
+    }
+
+    .form-control {
+        display: block;
+        width: 100%;
+        height: 36px;
+        padding: 6px 12px;
+        background-color: var(--terra-input-background-default);
+        border: 1px solid var(--terra-input-border-default);
+        border-radius: var(--terra-border-radius-small);
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+        transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+    }
+
+    .map__select {
+        width: 100%;
+        box-shadow: none;
+        margin-bottom: 1rem;
+    }
+
+    .map__loading-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.55);
+        backdrop-filter: blur(2px);
+        z-index: 1000;
+        pointer-events: none;
+    }
+
+    .map__spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid rgba(0, 0, 0, 0.12);
+        border-top-color: #3388ff;
+        border-radius: 50%;
+        animation: map-spin 0.75s linear infinite;
+    }
+
+    @keyframes map-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+`;export{a};