@esri/solutions-components 0.3.5 → 0.3.7

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

@@ -3,19 +3,31 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-/** @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.
- */
-function n(n){return Object.keys(n).reduce(((t,e)=>[...t,...n[e].download?n[e].selectedIds:[]]),[])}function t(t){return[...new Set(n(t))].length}export{n as a,t as g}
+/** @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.
+ */
+function getSelectionIds(selectionSets) {
+  return Object.keys(selectionSets).reduce((prev, cur) => {
+    return [
+      ...prev,
+      ...selectionSets[cur].download ? selectionSets[cur].selectedIds : []
+    ];
+  }, []);
+}
+function getTotal(selectionSets) {
+  return [...new Set(getSelectionIds(selectionSets))].length;
+}
+
+export { getSelectionIds as a, getTotal as g };

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

@@ -0,0 +1,181 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './p-c023e6a1.js';
+import { b as getElementDir, t as toAriaBoolean } from './p-83166522.js';
+import { c as createObserver } from './p-9a9955db.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 = {
+  icon: "icon",
+  flipRtl: "flip-rtl"
+};
+
+/*!
+ * 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
+ */
+/**
+ * Icon data cache.
+ * Exported for testing purposes.
+ *
+ * @private
+ */
+const iconCache = {};
+/**
+ * Icon request cache.
+ * Exported for testing purposes.
+ *
+ * @private
+ */
+const requestCache = {};
+const scaleToPx = {
+  s: 16,
+  m: 24,
+  l: 32
+};
+async function fetchIcon({ icon, scale }) {
+  const size = scaleToPx[scale];
+  const name = normalizeIconName(icon);
+  const filled = name.charAt(name.length - 1) === "F";
+  const iconName = filled ? name.substring(0, name.length - 1) : name;
+  const id = `${iconName}${size}${filled ? "F" : ""}`;
+  if (iconCache[id]) {
+    return iconCache[id];
+  }
+  if (!requestCache[id]) {
+    requestCache[id] = fetch(getAssetPath(`./assets/icon/${id}.json`))
+      .then((resp) => resp.json())
+      .catch(() => {
+      console.error(`"${id}" is not a valid calcite-ui-icon name`);
+      return "";
+    });
+  }
+  const path = await requestCache[id];
+  iconCache[id] = path;
+  return path;
+}
+/**
+ * Normalize the icon name to match the path data module exports.
+ * Exported for testing purposes.
+ *
+ * @param name
+ * @private
+ */
+function normalizeIconName(name) {
+  const numberLeadingName = !isNaN(Number(name.charAt(0)));
+  const parts = name.split("-");
+  if (parts.length === 1) {
+    return numberLeadingName ? `i${name}` : name;
+  }
+  return parts
+    .map((part, index) => {
+    if (index === 0) {
+      return numberLeadingName ? `i${part.toUpperCase()}` : part;
+    }
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  })
+    .join("");
+}
+
+const iconCss = "@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:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){block-size:1rem;inline-size:1rem;min-inline-size:1rem;min-block-size:1rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem;min-inline-size:1.5rem;min-block-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem;min-inline-size:2rem;min-block-size:2rem}.flip-rtl{transform:scaleX(-1)}.svg{display:block}";
+
+const Icon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+     */
+    this.icon = null;
+    /**
+     * When true, the icon will be flipped when the element direction is 'rtl'.
+     */
+    this.flipRtl = false;
+    /**
+     * Icon scale.
+     */
+    this.scale = "m";
+    this.visible = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.waitUntilVisible(() => {
+      this.visible = true;
+      this.loadIconPathData();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver = null;
+  }
+  async componentWillLoad() {
+    this.loadIconPathData();
+  }
+  render() {
+    const { el, flipRtl, pathData, scale, textLabel } = this;
+    const dir = getElementDir(el);
+    const size = scaleToPx[scale];
+    const semantic = !!textLabel;
+    const paths = [].concat(pathData || "");
+    return (h(Host, { "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, h("svg", { class: {
+        [CSS.flipRtl]: dir === "rtl" && flipRtl,
+        svg: true
+      }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (h("path", { d: path })) : (h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  async loadIconPathData() {
+    const { icon, scale, visible } = this;
+    if (!icon || !visible) {
+      return;
+    }
+    this.pathData = await fetchIcon({ icon, scale });
+  }
+  waitUntilVisible(callback) {
+    this.intersectionObserver = createObserver("intersection", (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.intersectionObserver.disconnect();
+          this.intersectionObserver = null;
+          callback();
+        }
+      });
+    }, { rootMargin: "50px" });
+    if (!this.intersectionObserver) {
+      callback();
+      return;
+    }
+    this.intersectionObserver.observe(this.el);
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "icon": ["loadIconPathData"],
+    "scale": ["loadIconPathData"]
+  }; }
+};
+Icon.style = iconCss;
+
+export { Icon as calcite_icon };

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

@@ -0,0 +1,138 @@
+/*!
+ * 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 { g as guid } from './p-a80b3880.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './p-316f56db.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './p-bd67334c.js';
+import { u as updateHostInteraction } from './p-7daea1df.js';
+import { t as toAriaBoolean } from './p-83166522.js';
+import { i as isActivationKey } from './p-73e23995.js';
+import './p-729708a3.js';
+
+const checkboxCss = "@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([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.toggle{outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::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}";
+
+const Checkbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 6);
+    this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 6);
+    this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** When `true`, the component is checked. */
+    this.checked = false;
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    this.disabled = false;
+    /**
+     * The hovered state of the checkbox.
+     *
+     * @internal
+     */
+    this.hovered = false;
+    /**
+     * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
+     *
+     * The state is visual only, and can look different across browsers.
+     *
+     * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
+     */
+    this.indeterminate = 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";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    //--------------------------------------------------------------------------
+    this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+    this.indeterminatePath = "M13 8v1H3V8z";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.getPath = () => this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
+    this.toggle = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.setFocus();
+        this.indeterminate = false;
+        this.calciteCheckboxChange.emit();
+      }
+    };
+    this.keyDownHandler = (event) => {
+      if (isActivationKey(event.key)) {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.onToggleBlur = () => {
+      this.calciteInternalCheckboxBlur.emit(false);
+    };
+    this.onToggleFocus = () => {
+      this.calciteInternalCheckboxFocus.emit(true);
+    };
+    this.onLabelClick = () => {
+      this.toggle();
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.guid = this.el.id || `calcite-checkbox-${guid()}`;
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, h("svg", { "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this })));
+  }
+  get el() { return getElement(this); }
+};
+Checkbox.style = checkboxCss;
+
+export { Checkbox as calcite_checkbox };