@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/notice.js

@@ -0,0 +1,192 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { S as StatusIcons } from './interfaces.js';
+import { s as setRequestedIcon, b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
+import { d as defineCustomElement$1 } from './icon.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 TEXT = {
+  close: "Close"
+};
+const SLOTS = {
+  title: "title",
+  message: "message",
+  link: "link",
+  actionsEnd: "actions-end"
+};
+const CSS = {
+  actionsEnd: "actions-end",
+  close: "notice-close",
+  container: "container",
+  content: "notice-content",
+  icon: "notice-icon"
+};
+
+const noticeCss = "@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([scale=s]){--calcite-notice-spacing-token-small:0.5rem;--calcite-notice-spacing-token-large:0.75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:0.5rem}:host([scale=m]){--calcite-notice-spacing-token-small:0.75rem;--calcite-notice-spacing-token-large:1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small:1rem;--calcite-notice-spacing-token-large:1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width:auto}:host([width=half]){--calcite-notice-width:50%}:host([width=full]){--calcite-notice-width:100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:none;inline-size:100%;background-color:var(--calcite-ui-foreground-1);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;max-block-size:0;text-align:start;-webkit-border-start:0px solid;border-inline-start:0px solid;box-shadow:0 0 0 0 transparent}.notice-close{outline-color:transparent}.notice-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host{display:flex}:host([open]) .container{pointer-events:auto;display:flex;max-block-size:100%;align-items:center;border-width:2px;opacity:1;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0px;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:var(--calcite-notice-spacing-token-small);margin-inline-end:var(--calcite-notice-spacing-token-small)}.notice-content{box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-notice-spacing-token-large);padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto}.notice-close{display:flex;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;-webkit-appearance:none}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.notice-close:active{background-color:var(--calcite-ui-foreground-3)}.actions-end{display:flex;align-self:stretch}:host([color=blue]) .container{border-color:var(--calcite-ui-brand)}:host([color=blue]) .container .notice-icon{color:var(--calcite-ui-brand)}:host([color=red]) .container{border-color:var(--calcite-ui-danger)}:host([color=red]) .container .notice-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .notice-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-color:var(--calcite-ui-success)}:host([color=green]) .container .notice-icon{color:var(--calcite-ui-success)}";
+
+const Notice = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 6);
+    this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //---------------------------------------------------------------------------
+    /**
+     * When `true`, the component is active.
+     *
+     * @deprecated Use `open` instead.
+     */
+    this.active = false;
+    /** When `true`, the component is visible. */
+    this.open = false;
+    /** The color for the component's top border and icon. */
+    this.color = "blue";
+    /**
+     * When `true`, a close button is added to the component.
+     *
+     * @deprecated use `closable` instead.
+     */
+    this.dismissible = false;
+    /** When `true`, a close button is added to the component. */
+    this.closable = false;
+    /**
+     * Accessible name for the close button.
+     *
+     * @default "Close"
+     */
+    this.intlClose = TEXT.close;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /** Specifies the width of the component. */
+    this.width = "auto";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.close = () => {
+      this.open = false;
+      this.calciteNoticeClose.emit();
+    };
+  }
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
+  }
+  handleDismissible(value) {
+    this.closable = value;
+  }
+  handleClosable(value) {
+    this.dismissible = value;
+  }
+  updateRequestedIcon() {
+    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+    const isOpen = this.active || this.open;
+    if (isOpen) {
+      this.activeHandler(isOpen);
+      this.openHandler(isOpen);
+    }
+    if (this.dismissible) {
+      this.handleDismissible(this.dismissible);
+    }
+    if (this.closable) {
+      this.handleClosable(this.closable);
+    }
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  componentWillLoad() {
+    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+  }
+  render() {
+    const { el } = this;
+    const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
+    return (h("div", { class: CSS.container }, this.requestedIcon ? (h("div", { class: CSS.icon }, h("calcite-icon", { icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: CSS.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd }))) : null, this.closable ? closeButton : null));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    const noticeLinkEl = this.el.querySelector("calcite-link");
+    if (!this.closeButton && !noticeLinkEl) {
+      return;
+    }
+    if (noticeLinkEl) {
+      noticeLinkEl.setFocus();
+    }
+    else if (this.closeButton) {
+      this.closeButton.focus();
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "open": ["openHandler"],
+    "dismissible": ["handleDismissible"],
+    "closable": ["handleClosable"],
+    "icon": ["updateRequestedIcon"],
+    "color": ["updateRequestedIcon"]
+  }; }
+  static get style() { return noticeCss; }
+}, [1, "calcite-notice", {
+    "active": [1540],
+    "open": [1540],
+    "color": [513],
+    "dismissible": [516],
+    "closable": [516],
+    "icon": [520],
+    "intlClose": [1, "intl-close"],
+    "scale": [513],
+    "width": [513],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-notice", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-notice":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Notice);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Notice as N, defineCustomElement as d };

package/dist/components/observers.js

@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { Build } from '@stencil/core/internal/client';
+
+/*!
+ * 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
+ */
+/**
+ * This utility ensures observers are created only for browser contexts.
+ *
+ * @param type - the type of observer to create
+ * @param callback - the observer callback
+ * @param options - the observer options
+ */
+function createObserver(type, callback, options) {
+  if (!Build.isBrowser) {
+    return undefined;
+  }
+  const Observer = getObserver(type);
+  return new Observer(callback, options);
+}
+function getObserver(type) {
+  // based on https://github.com/whatwg/dom/issues/126#issuecomment-1049814948
+  class ExtendedMutationObserver extends window.MutationObserver {
+    constructor(callback) {
+      super(callback);
+      this.observedEntry = [];
+      this.callback = callback;
+    }
+    observe(target, options) {
+      this.observedEntry.push({ target, options });
+      return super.observe(target, options);
+    }
+    unobserve(target) {
+      const newObservedEntries = this.observedEntry.filter((observed) => observed.target !== target);
+      this.observedEntry = [];
+      this.callback(super.takeRecords(), this);
+      this.disconnect();
+      newObservedEntries.forEach((observed) => this.observe(observed.target, observed.options));
+    }
+  }
+  return (function () {
+    return (type === "intersection"
+      ? window.IntersectionObserver
+      : type === "mutation"
+        ? ExtendedMutationObserver
+        : window.ResizeObserver);
+  })();
+}
+
+export { createObserver as c };

package/dist/components/openCloseComponent.js

@@ -0,0 +1,56 @@
+/*!
+ * 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-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+const componentToTransitionListeners = new WeakMap();
+function transitionStart(event) {
+  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
+    this.open ? this.onBeforeOpen() : this.onBeforeClose();
+  }
+}
+function transitionEnd(event) {
+  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
+    this.open ? this.onOpen() : this.onClose();
+  }
+}
+/**
+ * Helper to keep track of transition listeners on setTransitionEl and connectedCallback on OpenCloseComponent components.
+ *
+ * @param component
+ */
+function connectOpenCloseComponent(component) {
+  disconnectOpenCloseComponent(component);
+  if (component.transitionEl) {
+    const boundOnTransitionStart = transitionStart.bind(component);
+    const boundOnTransitionEnd = transitionEnd.bind(component);
+    componentToTransitionListeners.set(component, [
+      component.transitionEl,
+      boundOnTransitionStart,
+      boundOnTransitionEnd
+    ]);
+    component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart);
+    component.transitionEl.addEventListener("transitionend", boundOnTransitionEnd);
+  }
+}
+/**
+ * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
+ *
+ * @param component
+ */
+function disconnectOpenCloseComponent(component) {
+  if (!componentToTransitionListeners.has(component)) {
+    return;
+  }
+  const [transitionEl, start, end] = componentToTransitionListeners.get(component);
+  transitionEl.removeEventListener("transitionstart", start);
+  transitionEl.removeEventListener("transitionend", end);
+  componentToTransitionListeners.delete(component);
+}
+
+export { connectOpenCloseComponent as c, disconnectOpenCloseComponent as d };

package/dist/components/option.js

@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createObserver } from './observers.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "disabled": ["handlePropChange"],
+    "label": ["handlePropChange"],
+    "selected": ["handlePropChange"],
+    "value": ["handlePropChange"]
+  }; }
+  static get style() { return optionCss; }
+}, [1, "calcite-option", {
+    "disabled": [516],
+    "label": [1025],
+    "selected": [516],
+    "value": [1032]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Option);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Option as O, defineCustomElement as d };