@esri/solutions-components 0.10.9 → 0.10.11

package/dist/esm/form-ba965042.js

@@ -0,0 +1,372 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h } from './index-b793d9aa.js';
+import { r as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom-b5c50286.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+ * v2.12.0
+ */
+/**
+ * Any form <Component> with a `calcite<Component>Input` event needs to be included in this array.
+ */
+const componentsWithInputEvent = [
+    "calcite-input",
+    "calcite-input-number",
+    "calcite-input-text",
+    "calcite-text-area",
+];
+/**
+ * Get the event name to listen for that, when emitted, will clear the
+ * validation message that displays after form submission. Only validation
+ * messages that are set by the browser will be cleared. If a user sets
+ * validationMessage to a custom value, they are responsible for clearing it.
+ *
+ * Exported for testing purposes.
+ *
+ * @param componentTag the tag of the component, e.g. "calcite-input"
+ * @returns the event name
+ */
+function getClearValidationEventName(componentTag) {
+    const componentTagCamelCase = componentTag
+        .split("-")
+        .map((part, index) => index === 0 ? part : `${part[0].toUpperCase()}${part.slice(1)}`)
+        .join("");
+    const clearValidationEvent = `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
+    return clearValidationEvent;
+}
+/**
+ * Exported for testing purposes.
+ */
+const hiddenFormInputSlotName = "hidden-form-input";
+function isCheckable(component) {
+    return "checked" in component;
+}
+const onFormResetMap = new WeakMap();
+const formComponentSet = new WeakSet();
+/**
+ * This helps determine if our form component is part of a composite form-associated component.
+ *
+ * @param form
+ * @param formComponentEl
+ */
+function hasRegisteredFormComponentParent(form, formComponentEl) {
+    // if we have a parent component using the form ID attribute, we assume it is form-associated
+    const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(formComponentEl.parentElement, "[form]");
+    if (hasParentComponentWithFormIdSet) {
+        return true;
+    }
+    // we use events as a way to test for nested form-associated components across shadow bounds
+    const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
+    let hasRegisteredFormComponentParent = false;
+    form.addEventListener(formComponentRegisterEventName, (event) => {
+        hasRegisteredFormComponentParent = event
+            .composedPath()
+            .some((element) => formComponentSet.has(element));
+        event.stopPropagation();
+    }, { once: true });
+    formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
+        bubbles: true,
+        composed: true,
+    }));
+    return hasRegisteredFormComponentParent;
+}
+function displayValidationMessage(component, { status, message, icon }) {
+    if ("status" in component) {
+        component.status = status;
+    }
+    if ("validationIcon" in component && typeof component.validationIcon !== "string") {
+        component.validationIcon = icon;
+    }
+    if ("validationMessage" in component && !component.validationMessage) {
+        component.validationMessage = message;
+    }
+}
+function getValidationComponent(el) {
+    // radio-button is formAssociated, but the validation props are on the parent group
+    if (el.nodeName === "CALCITE-RADIO-BUTTON") {
+        return closestElementCrossShadowBoundary(el, "calcite-radio-button-group");
+    }
+    return el;
+}
+const invalidEvent = new CustomEvent("calciteInvalid", { bubbles: true, composed: true });
+function invalidHandler(event) {
+    // target is the hidden input, which is slotted in the actual form component
+    const hiddenInput = event?.target;
+    const hiddenInputMessage = hiddenInput?.validationMessage;
+    // not necessarily a calcite-input, but we don't have an HTMLCalciteFormAssociatedElement type
+    const formComponent = getValidationComponent(hiddenInput?.parentElement);
+    if (!formComponent) {
+        return;
+    }
+    const componentTag = formComponent?.nodeName?.toLowerCase();
+    const componentTagParts = componentTag?.split("-");
+    if (componentTagParts.length < 2 || componentTagParts[0] !== "calcite") {
+        return;
+    }
+    // prevent the browser from showing the native validation popover
+    event?.preventDefault();
+    if ("validity" in formComponent) {
+        formComponent.validity = hiddenInput?.validity;
+    }
+    // dispatch a "calciteInvalid" so users can set custom validation messages
+    formComponent.dispatchEvent(invalidEvent);
+    displayValidationMessage(formComponent, {
+        message: hiddenInputMessage,
+        icon: true,
+        status: "invalid",
+    });
+    const clearValidationEvent = getClearValidationEventName(componentTag);
+    formComponent.addEventListener(clearValidationEvent, () => {
+        if ("status" in formComponent) {
+            formComponent.status = "idle";
+        }
+        if ("validationIcon" in formComponent && !formComponent.validationIcon) {
+            formComponent.validationIcon = false;
+        }
+        if ("validationMessage" in formComponent &&
+            formComponent.validationMessage === hiddenInputMessage) {
+            formComponent.validationMessage = "";
+        }
+        if ("validity" in formComponent) {
+            formComponent.validity = hiddenInput?.validity;
+        }
+    }, { once: true });
+}
+/**
+ * Helper to submit a form.
+ *
+ * @param component
+ * @returns true if its associated form was submitted, false otherwise.
+ */
+function submitForm(component) {
+    const { formEl } = component;
+    if (!formEl) {
+        return false;
+    }
+    formEl.addEventListener("invalid", invalidHandler, true);
+    formEl.requestSubmit();
+    formEl.removeEventListener("invalid", invalidHandler, true);
+    requestAnimationFrame(() => {
+        const invalidEls = formEl.querySelectorAll("[status=invalid]");
+        // focus the first invalid element that has a validation message
+        for (const el of invalidEls) {
+            if (el?.validationMessage) {
+                el?.setFocus();
+                break;
+            }
+        }
+    });
+    return true;
+}
+/**
+ * Helper to reset a form.
+ *
+ * @param component
+ */
+function resetForm(component) {
+    component.formEl?.reset();
+}
+/**
+ * Helper to set up form interactions on connectedCallback.
+ *
+ * @param component
+ */
+function connectForm(component) {
+    const { el, value } = component;
+    const associatedForm = findAssociatedForm(component);
+    if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {
+        return;
+    }
+    component.formEl = associatedForm;
+    component.defaultValue = value;
+    if (isCheckable(component)) {
+        component.defaultChecked = component.checked;
+    }
+    const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);
+    associatedForm.addEventListener("reset", boundOnFormReset);
+    onFormResetMap.set(component.el, boundOnFormReset);
+    formComponentSet.add(el);
+}
+/**
+ * Utility method to find a form-component's associated form element.
+ *
+ * @param component
+ */
+function findAssociatedForm(component) {
+    const { el, form } = component;
+    return form
+        ? queryElementRoots(el, { id: form })
+        : closestElementCrossShadowBoundary(el, "form");
+}
+function onFormReset() {
+    if ("status" in this) {
+        this.status = "idle";
+    }
+    if ("validationIcon" in this) {
+        this.validationIcon = false;
+    }
+    if ("validationMessage" in this) {
+        this.validationMessage = "";
+    }
+    if (isCheckable(this)) {
+        this.checked = this.defaultChecked;
+        return;
+    }
+    this.value = this.defaultValue;
+}
+/**
+ * Helper to tear down form interactions on disconnectedCallback.
+ *
+ * @param component
+ */
+function disconnectForm(component) {
+    const { el, formEl } = component;
+    if (!formEl) {
+        return;
+    }
+    const boundOnFormReset = onFormResetMap.get(el);
+    formEl.removeEventListener("reset", boundOnFormReset);
+    onFormResetMap.delete(el);
+    component.formEl = null;
+    formComponentSet.delete(el);
+}
+/**
+ * Helper for setting the default value on initialization after connectedCallback.
+ *
+ * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ *
+ * @param component
+ * @param value
+ */
+function afterConnectDefaultValueSet(component, value) {
+    component.defaultValue = value;
+}
+const internalHiddenInputInputEvent = "calciteInternalHiddenInputInput";
+const hiddenInputInputHandler = (event) => {
+    event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));
+};
+const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("input", hiddenInputInputHandler);
+/**
+ * Helper for maintaining a form-associated's hidden input in sync with the component.
+ *
+ * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198
+ *
+ * @param component
+ */
+function syncHiddenFormInput(component) {
+    const { el, formEl, name, value } = component;
+    const { ownerDocument } = el;
+    const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
+    if (!formEl || !name) {
+        inputs.forEach((input) => {
+            removeHiddenInputChangeEventListener(input);
+            input.remove();
+        });
+        return;
+    }
+    const values = Array.isArray(value) ? value : [value];
+    const extra = [];
+    const seen = new Set();
+    inputs.forEach((input) => {
+        const valueMatch = values.find((val) => 
+        /* intentional non-strict equality check */
+        val == input.value);
+        if (valueMatch != null) {
+            seen.add(valueMatch);
+            defaultSyncHiddenFormInput(component, input, valueMatch);
+        }
+        else {
+            extra.push(input);
+        }
+    });
+    let docFrag;
+    values.forEach((value) => {
+        if (seen.has(value)) {
+            return;
+        }
+        let input = extra.pop();
+        if (!input) {
+            input = ownerDocument.createElement("input");
+            input.slot = hiddenFormInputSlotName;
+        }
+        if (!docFrag) {
+            docFrag = ownerDocument.createDocumentFragment();
+        }
+        docFrag.append(input);
+        // emits when hidden input is autofilled
+        input.addEventListener("input", hiddenInputInputHandler);
+        defaultSyncHiddenFormInput(component, input, value);
+    });
+    if (docFrag) {
+        el.append(docFrag);
+    }
+    extra.forEach((input) => {
+        removeHiddenInputChangeEventListener(input);
+        input.remove();
+    });
+}
+function defaultSyncHiddenFormInput(component, input, value) {
+    const { defaultValue, disabled, form, name, required } = component;
+    // keep in sync to prevent losing reset value
+    input.defaultValue = defaultValue;
+    input.disabled = disabled;
+    input.name = name;
+    input.required = required;
+    input.tabIndex = -1;
+    // we set the attr as the prop is read-only
+    if (form) {
+        input.setAttribute("form", form);
+    }
+    else {
+        input.removeAttribute("form");
+    }
+    if (isCheckable(component)) {
+        input.checked = component.checked;
+        // keep in sync to prevent losing reset value
+        input.defaultChecked = component.defaultChecked;
+        // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+        input.value = component.checked ? value || "on" : "";
+    }
+    else {
+        input.value = value || "";
+    }
+    component.syncHiddenFormInput?.(input);
+    const validationComponent = getValidationComponent(component.el);
+    if (validationComponent && "validity" in validationComponent) {
+        // mutate the component's validity object to prevent a rerender
+        // https://stenciljs.com/docs/properties#mutable-arrays-and-objects
+        for (const key in { ...input?.validity }) {
+            validationComponent.validity[key] = input.validity[key];
+        }
+    }
+}
+/**
+ * Helper to render the slot for form-associated component's hidden input.
+ *
+ * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.
+ *
+ * render(): VNode {
+ *   <Host>
+ *     <div class={CSS.container}>
+ *     // ...
+ *     <HiddenFormInputSlot component={this} />
+ *     </div>
+ *   </Host>
+ * }
+ *
+ * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ *
+ * @param root0
+ * @param root0.component
+ */
+const HiddenFormInputSlot = ({ component, }) => {
+    syncHiddenFormInput(component);
+    return h("slot", { name: hiddenFormInputSlotName });
+};
+
+export { HiddenFormInputSlot as H, afterConnectDefaultValueSet as a, connectForm as c, disconnectForm as d, findAssociatedForm as f, internalHiddenInputInputEvent as i, resetForm as r, submitForm as s };

package/dist/esm/fr-94ff7253.js

@@ -0,0 +1,68 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker-60dbdc25.js';
+import './index-b793d9aa.js';
+import './form-ba965042.js';
+import './dom-b5c50286.js';
+import './guid-4c746a7f.js';
+import './resources-defbb49f.js';
+import './interactive-742ba555.js';
+import './browser-552eb2d0.js';
+import './key-58898f0a.js';
+import './label-0b82858a.js';
+import './component-c2c32481.js';
+import './loadable-73f289b6.js';
+import './locale-21e40b0c.js';
+import './observers-e2484555.js';
+import './focusTrapComponent-6ec0f681.js';
+import './config-2fa7bb77.js';
+import './time-a215e415.js';
+import './math-8c04292e.js';
+import './t9n-2fb3af62.js';
+import './Validation-63949b7d.js';
+import './input-d11f5ac8.js';
+
+// French [fr]
+var locale = {
+  name: 'fr',
+  weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+  weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+  weekdaysMin: 'di_lu_ma_me_je_ve_sa'.split('_'),
+  months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+  monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+  weekStart: 1,
+  yearStart: 4,
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD/MM/YYYY',
+    LL: 'D MMMM YYYY',
+    LLL: 'D MMMM YYYY HH:mm',
+    LLLL: 'dddd D MMMM YYYY HH:mm'
+  },
+  relativeTime: {
+    future: 'dans %s',
+    past: 'il y a %s',
+    s: 'quelques secondes',
+    m: 'une minute',
+    mm: '%d minutes',
+    h: 'une heure',
+    hh: '%d heures',
+    d: 'un jour',
+    dd: '%d jours',
+    M: 'un mois',
+    MM: '%d mois',
+    y: 'un an',
+    yy: '%d ans'
+  },
+  ordinal: function ordinal(n) {
+    var o = n === 1 ? 'er' : '';
+    return "" + n + o;
+  }
+};
+dayjs.locale(locale, null, true);
+
+export { locale as default };

package/dist/esm/fr-ch-00b7e60e.js

@@ -0,0 +1,66 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker-60dbdc25.js';
+import './index-b793d9aa.js';
+import './form-ba965042.js';
+import './dom-b5c50286.js';
+import './guid-4c746a7f.js';
+import './resources-defbb49f.js';
+import './interactive-742ba555.js';
+import './browser-552eb2d0.js';
+import './key-58898f0a.js';
+import './label-0b82858a.js';
+import './component-c2c32481.js';
+import './loadable-73f289b6.js';
+import './locale-21e40b0c.js';
+import './observers-e2484555.js';
+import './focusTrapComponent-6ec0f681.js';
+import './config-2fa7bb77.js';
+import './time-a215e415.js';
+import './math-8c04292e.js';
+import './t9n-2fb3af62.js';
+import './Validation-63949b7d.js';
+import './input-d11f5ac8.js';
+
+// French (Switzerland) [fr-ch]
+var locale = {
+  name: 'fr-ch',
+  weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+  months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+  weekStart: 1,
+  weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+  monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+  weekdaysMin: 'di_lu_ma_me_je_ve_sa'.split('_'),
+  ordinal: function ordinal(n) {
+    return n;
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD.MM.YYYY',
+    LL: 'D MMMM YYYY',
+    LLL: 'D MMMM YYYY HH:mm',
+    LLLL: 'dddd D MMMM YYYY HH:mm'
+  },
+  relativeTime: {
+    future: 'dans %s',
+    past: 'il y a %s',
+    s: 'quelques secondes',
+    m: 'une minute',
+    mm: '%d minutes',
+    h: 'une heure',
+    hh: '%d heures',
+    d: 'un jour',
+    dd: '%d jours',
+    M: 'un mois',
+    MM: '%d mois',
+    y: 'un an',
+    yy: '%d ans'
+  }
+};
+dayjs.locale(locale, null, true);
+
+export { locale as default };

package/dist/esm/guid-4c746a7f.js

@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+ * v2.12.0
+ */
+function gen(counts) {
+    return counts
+        .map((count) => {
+        let out = "";
+        for (let i = 0; i < count; i++) {
+            out += (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        }
+        return out;
+    })
+        .join("-");
+}
+const guid = () => gen([2, 1, 1, 1, 3]);
+
+export { guid as g };

package/dist/esm/he-faefbd69.js

@@ -0,0 +1,105 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker-60dbdc25.js';
+import './index-b793d9aa.js';
+import './form-ba965042.js';
+import './dom-b5c50286.js';
+import './guid-4c746a7f.js';
+import './resources-defbb49f.js';
+import './interactive-742ba555.js';
+import './browser-552eb2d0.js';
+import './key-58898f0a.js';
+import './label-0b82858a.js';
+import './component-c2c32481.js';
+import './loadable-73f289b6.js';
+import './locale-21e40b0c.js';
+import './observers-e2484555.js';
+import './focusTrapComponent-6ec0f681.js';
+import './config-2fa7bb77.js';
+import './time-a215e415.js';
+import './math-8c04292e.js';
+import './t9n-2fb3af62.js';
+import './Validation-63949b7d.js';
+import './input-d11f5ac8.js';
+
+// Hebrew [he]
+var texts = {
+  s: 'מספר שניות',
+  ss: '%d שניות',
+  m: 'דקה',
+  mm: '%d דקות',
+  h: 'שעה',
+  hh: '%d שעות',
+  hh2: 'שעתיים',
+  d: 'יום',
+  dd: '%d ימים',
+  dd2: 'יומיים',
+  M: 'חודש',
+  MM: '%d חודשים',
+  MM2: 'חודשיים',
+  y: 'שנה',
+  yy: '%d שנים',
+  yy2: 'שנתיים'
+};
+
+function relativeTimeFormatter(number, withoutSuffix, key) {
+  var text = texts[key + (number === 2 ? '2' : '')] || texts[key];
+  return text.replace('%d', number);
+}
+
+var locale = {
+  name: 'he',
+  weekdays: 'ראשון_שני_שלישי_רביעי_חמישי_שישי_שבת'.split('_'),
+  weekdaysShort: 'א׳_ב׳_ג׳_ד׳_ה׳_ו׳_ש׳'.split('_'),
+  weekdaysMin: 'א׳_ב׳_ג׳_ד׳_ה׳_ו_ש׳'.split('_'),
+  months: 'ינואר_פברואר_מרץ_אפריל_מאי_יוני_יולי_אוגוסט_ספטמבר_אוקטובר_נובמבר_דצמבר'.split('_'),
+  monthsShort: 'ינו_פבר_מרץ_אפר_מאי_יונ_יול_אוג_ספט_אוק_נוב_דצמ'.split('_'),
+  relativeTime: {
+    future: 'בעוד %s',
+    past: 'לפני %s',
+    s: relativeTimeFormatter,
+    m: relativeTimeFormatter,
+    mm: relativeTimeFormatter,
+    h: relativeTimeFormatter,
+    hh: relativeTimeFormatter,
+    d: relativeTimeFormatter,
+    dd: relativeTimeFormatter,
+    M: relativeTimeFormatter,
+    MM: relativeTimeFormatter,
+    y: relativeTimeFormatter,
+    yy: relativeTimeFormatter
+  },
+  ordinal: function ordinal(n) {
+    return n;
+  },
+  format: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD/MM/YYYY',
+    LL: 'D [ב]MMMM YYYY',
+    LLL: 'D [ב]MMMM YYYY HH:mm',
+    LLLL: 'dddd, D [ב]MMMM YYYY HH:mm',
+    l: 'D/M/YYYY',
+    ll: 'D MMM YYYY',
+    lll: 'D MMM YYYY HH:mm',
+    llll: 'ddd, D MMM YYYY HH:mm'
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD/MM/YYYY',
+    LL: 'D [ב]MMMM YYYY',
+    LLL: 'D [ב]MMMM YYYY HH:mm',
+    LLLL: 'dddd, D [ב]MMMM YYYY HH:mm',
+    l: 'D/M/YYYY',
+    ll: 'D MMM YYYY',
+    lll: 'D MMM YYYY HH:mm',
+    llll: 'ddd, D MMM YYYY HH:mm'
+  }
+};
+dayjs.locale(locale, null, true);
+
+export { locale as default };