@esri/solutions-components 0.3.6 → 0.3.7

package/dist/solutions-components/p-ed36c637.entry.js

@@ -0,0 +1,85 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './p-c023e6a1.js';
+import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './p-bd67334c.js';
+import './p-83166522.js';
+import './p-729708a3.js';
+import './p-a80b3880.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+const CSS = {
+  container: "container"
+};
+
+const labelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host(:not([disable-spacing])[scale=s]) .container{-webkit-margin-after:var(--calcite-label-margin-bottom, 0.5rem);margin-block-end:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host(:not([disable-spacing])[scale=m]) .container{-webkit-margin-after:var(--calcite-label-margin-bottom, 0.75rem);margin-block-end:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:not([disable-spacing])[scale=l]) .container{-webkit-margin-after:var(--calcite-label-margin-bottom, 1rem);margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;-webkit-margin-before:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-ui-text-1)}:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([disable-spacing]) .container{margin:0px;gap:0px}";
+
+const Label = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 2);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Specifies the text alignment of the component. */
+    this.alignment = "start";
+    /**
+     * Specifies the status of the component and any child input, or input messages.
+     *
+     * @deprecated Set directly on the component the label is bound to instead.
+     */
+    this.status = "idle";
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /** Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. */
+    this.layout = "default";
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @deprecated Use the `disabled` property on the component the label is bound to instead.
+     */
+    this.disabled = false;
+    /**
+     * When `true`, disables the component's spacing.
+     *
+     * @deprecated Set the `--calcite-label-margin-bottom` css variable to `0` instead.
+     */
+    this.disableSpacing = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.labelClickHandler = (event) => {
+      this.calciteInternalLabelClick.emit({
+        sourceEvent: event
+      });
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    document.dispatchEvent(new CustomEvent(labelConnectedEvent));
+  }
+  disconnectedCallback() {
+    document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
+  }
+  render() {
+    return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+Label.style = labelCss;
+
+export { Label as calcite_label };

package/dist/solutions-components/p-f0add71c.js

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { b as queryFeaturesByID } from './p-1f225056.js';
+
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Export a csv of the attributes from the features that match the provided ids
+ *
+ * @param layerView layer view to query
+ * @param ids number array of ids to export to csv
+ *
+ * @returns Promise when the function has completed
+ */
+async function exportCSV(layerView, ids, addColumnTitle) {
+  const featureSet = await queryFeaturesByID(ids, layerView.layer);
+  const attributes = featureSet.features.map(f => f.attributes);
+  const fieldNames = {};
+  const entry = attributes[0];
+  Object.keys(entry).forEach(k => {
+    if (entry.hasOwnProperty(k)) {
+      fieldNames[k] = k;
+    }
+  });
+  _downloadCSVFile(fieldNames, attributes, `notify-${Date.now().toString()}`, addColumnTitle);
+}
+/**
+ * Download the CSV file
+ *
+ * @param fieldNames the names for each of the features fields
+ * @param attributes the features attributes
+ *
+ * Based on:
+ * https://medium.com/@danny.pule/export-json-to-csv-file-using-javascript-a0b7bc5b00d2
+ *
+ * @returns void
+ */
+function _downloadCSVFile(fieldNames, attributes, fileTitle, addColumnTitle) {
+  if (addColumnTitle && fieldNames) {
+    attributes.unshift(fieldNames);
+  }
+  // format values to string so it doesn't get tripped up when a value has a comma
+  // another option could be to export with a different delimiter
+  const csv = attributes.reduce((prev, cur) => {
+    return prev + Object.values(cur).map(v => `"${v}"`).join(",") + "\r\n";
+  }, "");
+  const link = document.createElement("a");
+  if (link.download !== undefined) {
+    link.href = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8;" }));
+    link.download = `${fileTitle}.csv` || "export.csv";
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
+export { exportCSV as e };

package/dist/solutions-components/p-f42e014b.js

@@ -3,9 +3,178 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import{n}from"./p-9eba5c66.js";
+import { n as numberStringFormatter } from './p-9eba5c66.js';
+
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  * v1.0.0-beta.97
- */function t(n,t,e){const a=n.getTime(),r=!(t instanceof Date)||a>=t.getTime(),s=!(e instanceof Date)||a<=e.getTime();return r&&s}function e(n,t,e){if(!(n instanceof Date))return null;const a=n.getTime(),r=t instanceof Date&&a<t.getTime(),s=e instanceof Date&&a>e.getTime();return r?t:s?e:n}function a(n,t=!1){if(n instanceof Date)return n;if(!n||"string"!=typeof n)return null;const e=n.split(/[: T-]/).map(parseFloat),a=new Date(e[0],(e[1]||1)-1,e[2]||1);if(a.setFullYear(e[0]),isNaN(a.getTime()))throw new Error(`Invalid ISO 8601 date: "${n}"`);return t?D(a):a}function r(n){return"string"==typeof n?n:n instanceof Date?new Date(n.getTime()-6e4*n.getTimezoneOffset()).toISOString().split("T")[0]:""}function s(n,t){return n instanceof Date&&t instanceof Date&&n.getDate()===t.getDate()&&n.getMonth()===t.getMonth()&&n.getFullYear()===t.getFullYear()}function o(n){const t=n.getMonth(),e=new Date(n);return e.setMonth(t-1),t===e.getMonth()?new Date(n.getFullYear(),t,0):e}function i(n){const t=n.getMonth(),e=new Date(n);return e.setMonth(t+1),(t+2)%7==e.getMonth()%7?new Date(n.getFullYear(),t+2,0):e}function c(t,e){const{separator:a,unitOrder:r}=e,s=f(r),o=t.split(a).map((t=>n.delocalize(t)));return{day:parseInt(o[s.indexOf("d")]),month:parseInt(o[s.indexOf("m")])-1,year:parseInt(o[s.indexOf("y")])}}function f(n){const t=n.toLowerCase();return["d","m","y"].sort(((n,e)=>t.indexOf(n)-t.indexOf(e)))}function u(n,t){return(n.getTime()-t.getTime())/864e5}function D(n){return n.setHours(23,59,59,999),n}export{a,e as b,s as c,r as d,f as e,o as f,u as g,t as i,i as n,c as p,D as s}
+ */
+/**
+ * Check if date is within a min and max
+ *
+ * @param date
+ * @param min
+ * @param max
+ */
+function inRange(date, min, max) {
+  const time = date.getTime();
+  const afterMin = !(min instanceof Date) || time >= min.getTime();
+  const beforeMax = !(max instanceof Date) || time <= max.getTime();
+  return afterMin && beforeMax;
+}
+/**
+ * Ensures date is within range,
+ * returns min or max if out of bounds
+ *
+ * @param date
+ * @param min
+ * @param max
+ */
+function dateFromRange(date, min, max) {
+  if (!(date instanceof Date)) {
+    return null;
+  }
+  const time = date.getTime();
+  const beforeMin = min instanceof Date && time < min.getTime();
+  const afterMax = max instanceof Date && time > max.getTime();
+  if (beforeMin) {
+    return min;
+  }
+  if (afterMax) {
+    return max;
+  }
+  return date;
+}
+/**
+ * Parse an iso8601 string (YYYY-mm-dd) into a valid date.
+ * TODO: handle time when time of day UI is added
+ *
+ * @param iso8601
+ * @param isEndDate
+ */
+function dateFromISO(iso8601, isEndDate = false) {
+  if (iso8601 instanceof Date) {
+    return iso8601;
+  }
+  if (!iso8601 || typeof iso8601 !== "string") {
+    return null;
+  }
+  const d = iso8601.split(/[: T-]/).map(parseFloat);
+  const date = new Date(d[0], (d[1] || 1) - 1, d[2] || 1);
+  date.setFullYear(d[0]);
+  if (isNaN(date.getTime())) {
+    throw new Error(`Invalid ISO 8601 date: "${iso8601}"`);
+  }
+  if (isEndDate) {
+    return setEndOfDay(date);
+  }
+  return date;
+}
+/**
+ * Return first portion of ISO string (YYYY-mm-dd)
+ *
+ * @param date
+ */
+function dateToISO(date) {
+  if (typeof date === "string") {
+    return date;
+  }
+  if (date instanceof Date) {
+    return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split("T")[0];
+  }
+  return "";
+}
+/**
+ * Check if two dates are the same day, month, year
+ *
+ * @param d1
+ * @param d2
+ */
+function sameDate(d1, d2) {
+  return (d1 instanceof Date &&
+    d2 instanceof Date &&
+    d1.getDate() === d2.getDate() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getFullYear() === d2.getFullYear());
+}
+/**
+ * Get a date one month in the past
+ *
+ * @param date
+ */
+function prevMonth(date) {
+  const month = date.getMonth();
+  const nextDate = new Date(date);
+  nextDate.setMonth(month - 1);
+  // date doesn't exist in new month, use last day
+  if (month === nextDate.getMonth()) {
+    return new Date(date.getFullYear(), month, 0);
+  }
+  return nextDate;
+}
+/**
+ * Get a date one month in the future
+ *
+ * @param date
+ */
+function nextMonth(date) {
+  const month = date.getMonth();
+  const nextDate = new Date(date);
+  nextDate.setMonth(month + 1);
+  // date doesn't exist in new month, use last day
+  if ((month + 2) % 7 === nextDate.getMonth() % 7) {
+    return new Date(date.getFullYear(), month + 2, 0);
+  }
+  return nextDate;
+}
+/**
+ * Parse numeric units for day, month, and year from a localized string
+ * month starts at 0 (can pass to date constructor)
+ *
+ * @param str
+ * @param localeData
+ */
+function parseDateString(str, localeData) {
+  const { separator, unitOrder } = localeData;
+  const order = getOrder(unitOrder);
+  const values = str.split(separator).map((part) => numberStringFormatter.delocalize(part));
+  return {
+    day: parseInt(values[order.indexOf("d")]),
+    month: parseInt(values[order.indexOf("m")]) - 1,
+    year: parseInt(values[order.indexOf("y")])
+  };
+}
+/**
+ * Based on the unitOrder string, find order of month, day, and year for locale
+ *
+ * @param unitOrder
+ */
+function getOrder(unitOrder) {
+  const signifiers = ["d", "m", "y"];
+  const order = unitOrder.toLowerCase();
+  return signifiers.sort((a, b) => order.indexOf(a) - order.indexOf(b));
+}
+/**
+ * Get number of days between two dates
+ *
+ * @param date1
+ * @param date2
+ */
+function getDaysDiff(date1, date2) {
+  const ts1 = date1.getTime();
+  const ts2 = date2.getTime();
+  return (ts1 - ts2) / (1000 * 3600 * 24);
+}
+/**
+ * Set time of the day to the end.
+ *
+ * @param {Date} date Date.
+ * @returns {Date} Date with time set to end of day .
+ */
+function setEndOfDay(date) {
+  date.setHours(23, 59, 59, 999);
+  return date;
+}
+
+export { dateFromISO as a, dateFromRange as b, sameDate as c, dateToISO as d, getOrder as e, prevMonth as f, getDaysDiff as g, inRange as i, nextMonth as n, parseDateString as p, setEndOfDay as s };

package/dist/solutions-components/p-fc02e7de.entry.js

@@ -0,0 +1,308 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, g as getElement, F as Fragment } from './p-c023e6a1.js';
+import { c as createObserver } from './p-9a9955db.js';
+import { f as focusElement } from './p-83166522.js';
+import { c as connectLabel, d as disconnectLabel } from './p-bd67334c.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './p-316f56db.js';
+import { u as updateHostInteraction } from './p-7daea1df.js';
+import './p-729708a3.js';
+import './p-a80b3880.js';
+
+const optionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}";
+
+const Option = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalOptionChange = createEvent(this, "calciteInternalOptionChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    this.mutationObserver = createObserver("mutation", () => {
+      this.ensureTextContentDependentProps();
+      this.calciteInternalOptionChange.emit();
+    });
+  }
+  handlePropChange(_newValue, _oldValue, propName) {
+    if (propName === "label" || propName === "value") {
+      this.ensureTextContentDependentProps();
+    }
+    this.calciteInternalOptionChange.emit();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  ensureTextContentDependentProps() {
+    const { el: { textContent } } = this;
+    if (!this.label || this.label === this.internallySetLabel) {
+      this.label = textContent;
+      this.internallySetLabel = textContent;
+    }
+    if (!this.value || this.value === this.internallySetValue) {
+      this.value = textContent;
+      this.internallySetValue = textContent;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.ensureTextContentDependentProps();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
+      attributeFilter: ["label", "value"],
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return h("slot", null, this.label);
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["handlePropChange"],
+    "label": ["handlePropChange"],
+    "selected": ["handlePropChange"],
+    "value": ["handlePropChange"]
+  }; }
+};
+Option.style = optionCss;
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+const CSS = {
+  icon: "icon",
+  iconContainer: "icon-container",
+  select: "select"
+};
+
+const selectCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .icon-container{padding-inline:0.5rem}:host([scale=m]){block-size:2rem;--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .icon-container{padding-inline:0.75rem}:host([scale=l]){block-size:44px;--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .icon-container{padding-inline:1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0px;box-sizing:border-box;inline-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);font-family:inherit;color:var(--calcite-ui-text-2);outline-color:transparent;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.select:hover{background-color:var(--calcite-ui-foreground-2)}select:disabled{border-color:var(--calcite-ui-border-input);--tw-bg-opacity:1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:transparent;color:var(--calcite-ui-text-2);inset-inline-end:0px;border-inline-width:0px 1px}.select:focus~.icon-container{border-color:transparent}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+
+function isOption(optionOrGroup) {
+  return optionOrGroup.tagName === "CALCITE-OPTION";
+}
+function isOptionGroup(optionOrGroup) {
+  return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
+}
+const Select = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteSelectChange = createEvent(this, "calciteSelectChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    /**
+     * When `true`, the component must have a value in order for the form to submit.
+     *
+     * @internal
+     */
+    this.required = false;
+    /**
+     * Specifies the size of the component.
+     */
+    this.scale = "m";
+    /** The component's `selectedOption` value. */
+    this.value = null;
+    /**
+     * Specifies the width of the component.
+     */
+    this.width = "auto";
+    this.componentToNativeEl = new Map();
+    this.mutationObserver = createObserver("mutation", () => this.populateInternalSelect());
+    this.handleInternalSelectChange = () => {
+      const selected = this.selectEl.selectedOptions[0];
+      this.selectFromNativeOption(selected);
+      requestAnimationFrame(() => this.emitChangeEvent());
+    };
+    this.populateInternalSelect = () => {
+      const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
+      this.clearInternalSelect();
+      optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
+    };
+    this.storeSelectRef = (node) => {
+      this.selectEl = node;
+      this.populateInternalSelect();
+      const selected = this.selectEl.selectedOptions[0];
+      this.selectFromNativeOption(selected);
+    };
+    this.emitChangeEvent = () => {
+      this.calciteSelectChange.emit();
+    };
+  }
+  valueHandler(value) {
+    const items = this.el.querySelectorAll("calcite-option");
+    items.forEach((item) => (item.selected = item.value === value));
+  }
+  selectedOptionHandler(selectedOption) {
+    this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    const { el } = this;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
+      subtree: true,
+      childList: true
+    });
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.selectEl);
+  }
+  handleOptionOrGroupChange(event) {
+    event.stopPropagation();
+    const optionOrGroup = event.target;
+    const nativeEl = this.componentToNativeEl.get(optionOrGroup);
+    if (!nativeEl) {
+      return;
+    }
+    this.updateNativeElement(optionOrGroup, nativeEl);
+    if (isOption(optionOrGroup) && optionOrGroup.selected) {
+      this.deselectAllExcept(optionOrGroup);
+      this.selectedOption = optionOrGroup;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
+  updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
+    nativeOptionOrGroup.disabled = optionOrGroup.disabled;
+    nativeOptionOrGroup.label = optionOrGroup.label;
+    if (isOption(optionOrGroup)) {
+      const option = nativeOptionOrGroup;
+      option.selected = optionOrGroup.selected;
+      option.value = optionOrGroup.value;
+      // need to set innerText for mobile
+      // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701
+      option.innerText = optionOrGroup.label;
+    }
+  }
+  clearInternalSelect() {
+    this.componentToNativeEl.forEach((value) => value.remove());
+    this.componentToNativeEl.clear();
+  }
+  selectFromNativeOption(nativeOption) {
+    if (!nativeOption) {
+      return;
+    }
+    let futureSelected;
+    this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {
+      if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {
+        optionOrGroup.selected = true;
+        futureSelected = optionOrGroup;
+        this.deselectAllExcept(optionOrGroup);
+      }
+    });
+    if (futureSelected) {
+      this.selectedOption = futureSelected;
+    }
+  }
+  toNativeElement(optionOrGroup) {
+    if (isOption(optionOrGroup)) {
+      const option = document.createElement("option");
+      this.updateNativeElement(optionOrGroup, option);
+      this.componentToNativeEl.set(optionOrGroup, option);
+      return option;
+    }
+    if (isOptionGroup(optionOrGroup)) {
+      const group = document.createElement("optgroup");
+      this.updateNativeElement(optionOrGroup, group);
+      Array.from(optionOrGroup.children).forEach((option) => {
+        const nativeOption = this.toNativeElement(option);
+        group.append(nativeOption);
+        this.componentToNativeEl.set(optionOrGroup, nativeOption);
+      });
+      this.componentToNativeEl.set(optionOrGroup, group);
+      return group;
+    }
+    throw new Error("unsupported element child provided");
+  }
+  deselectAllExcept(except) {
+    this.el.querySelectorAll("calcite-option").forEach((option) => {
+      if (option === except) {
+        return;
+      }
+      option.selected = false;
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderChevron() {
+    return (h("div", { class: CSS.iconContainer }, h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: "s" })));
+  }
+  render() {
+    return (h(Fragment, null, h("select", { "aria-label": this.label, class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", null)), this.renderChevron(), h(HiddenFormInputSlot, { component: this })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueHandler"],
+    "selectedOption": ["selectedOptionHandler"]
+  }; }
+};
+Select.style = selectCss;
+
+export { Option as calcite_option, Select as calcite_select };