@esri/solutions-components 0.6.6 → 0.6.7

package/dist/esm/calcite-pick-list-group.entry.js

@@ -3,55 +3,55 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-b5d9d795.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-27a0fce0.js';
-import { g as getSlotted } from './dom-843e3afd.js';
-import { H as Heading, c as constrainHeadingLevel } from './Heading-cb79e5b2.js';
-import { S as SLOTS, C as CSS } from './resources-40d8e06f.js';
-import './observers-9d66685a.js';
-import './guid-2bbb8cd1.js';
-import './resources-94c47e64.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-d298aca9.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-91396dd5.js';
+import { g as getSlotted } from './dom-8a9e4ee8.js';
+import { H as Heading, c as constrainHeadingLevel } from './Heading-1763134e.js';
+import { S as SLOTS, C as CSS } from './resources-b5267429.js';
+import './observers-67bdf9e5.js';
+import './guid-1608fd71.js';
+import './resources-f97db74e.js';
 
 const pickListGroupCss = ":host{margin-block-end:0.25rem;box-sizing:border-box;display:block;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host *{box-sizing:border-box}:host(:last-child){margin-block-end:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.heading{margin-block:0.5rem;margin-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-3)}.container--indented{margin-inline-start:1.5rem}:host([hidden]){display:none}[hidden]{display:none}";
 
-const PickListGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.groupTitle = undefined;
-    this.headingLevel = undefined;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    disconnectConditionalSlotComponent(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    var _a;
-    const { el, groupTitle, headingLevel } = this;
-    const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
-    const sectionClasses = {
-      [CSS.container]: true,
-      [CSS.indented]: hasParentItem,
-    };
-    const title = groupTitle;
-    const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;
-    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
-    const level = headingLevel || relativeLevel;
-    return (h(Fragment, null, title ? (h(Heading, { class: CSS.heading, level: level }, title)) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
+const PickListGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.groupTitle = undefined;
+    this.headingLevel = undefined;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    var _a;
+    const { el, groupTitle, headingLevel } = this;
+    const hasParentItem = getSlotted(el, SLOTS.parentItem) !== null;
+    const sectionClasses = {
+      [CSS.container]: true,
+      [CSS.indented]: hasParentItem,
+    };
+    const title = groupTitle;
+    const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;
+    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
+    const level = headingLevel || relativeLevel;
+    return (h(Fragment, null, title ? (h(Heading, { class: CSS.heading, level: level }, title)) : null, h("slot", { name: SLOTS.parentItem }), h("section", { class: sectionClasses }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
 PickListGroup.style = pickListGroupCss;
 
 export { PickListGroup as calcite_pick_list_group };

package/dist/esm/calcite-pick-list-item.entry.js

@@ -3,190 +3,190 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-b5d9d795.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-27a0fce0.js';
-import { g as getSlotted, t as toAriaBoolean } from './dom-843e3afd.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-eaf4be29.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-6bca96ad.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-d8561d54.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-76168237.js';
-import { I as ICON_TYPES } from './resources-c253772f.js';
-import { I as ICONS, C as CSS, S as SLOTS } from './resources-dca3d475.js';
-import './observers-9d66685a.js';
-import './guid-2bbb8cd1.js';
-import './resources-94c47e64.js';
-import './key-7a525416.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-d298aca9.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-91396dd5.js';
+import { g as getSlotted, t as toAriaBoolean } from './dom-8a9e4ee8.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-0733ee76.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-08376d90.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-73d0926a.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-745553e0.js';
+import { I as ICON_TYPES } from './resources-34b761fa.js';
+import { I as ICONS, C as CSS, S as SLOTS } from './resources-5490ccf4.js';
+import './observers-67bdf9e5.js';
+import './guid-1608fd71.js';
+import './resources-f97db74e.js';
+import './key-97b504af.js';
 
 const pickListItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{margin:0px;margin-block-end:1px;box-sizing:border-box;display:flex;align-items:stretch;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition:background-color var(--calcite-animation-timing);animation:calcite-fade-in var(--calcite-animation-timing)}:host *{box-sizing:border-box}.label{display:flex;flex:1 1 auto;cursor:pointer;align-items:center;background-color:transparent;outline-color:transparent}.label:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.label:hover{background-color:var(--calcite-ui-foreground-2)}:host([non-interactive]:hover){background-color:var(--calcite-ui-foreground-1)}:host([non-interactive]) .label,:host([non-interactive]) .icon{pointer-events:none}.icon{margin-block:0px;display:flex;cursor:pointer;align-items:center;padding:0.25rem;color:var(--calcite-ui-brand);flex:0 0 auto;line-height:0}.icon:hover{background-color:var(--calcite-ui-foreground-2)}.icon-dot{display:flex;inline-size:1.5rem;align-items:center;padding:0.5rem}.icon-dot:before{opacity:0;content:\"•\"}.icon calcite-icon{opacity:0}:host([selected]) .icon-dot:before,:host([selected]) .icon calcite-icon{transition:opacity var(--calcite-animation-timing);opacity:1}.text-container{pointer-events:none;display:flex;flex-direction:column;flex-wrap:nowrap;overflow:hidden;padding-block:0.5rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word}.title{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.actions{margin:0px;display:flex;flex:0 1 auto;align-items:stretch;justify-content:flex-end}.actions--start~.label{padding-inline-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
-const PickListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteListItemChange = createEvent(this, "calciteListItemChange", 6);
-    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
-    this.calciteInternalListItemPropsChange = createEvent(this, "calciteInternalListItemPropsChange", 6);
-    this.calciteInternalListItemValueChange = createEvent(this, "calciteInternalListItemValueChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.pickListClickHandler = (event) => {
-      if (this.disabled || (this.deselectDisabled && this.selected) || this.nonInteractive) {
-        return;
-      }
-      this.shiftPressed = event.shiftKey;
-      this.selected = !this.selected;
-    };
-    this.pickListKeyDownHandler = (event) => {
-      if (event.key === " ") {
-        event.preventDefault();
-        if ((this.deselectDisabled && this.selected) || this.nonInteractive) {
-          return;
-        }
-        this.selected = !this.selected;
-      }
-    };
-    this.removeClickHandler = () => {
-      this.calciteListItemRemove.emit();
-    };
-    this.description = undefined;
-    this.disabled = false;
-    this.deselectDisabled = false;
-    this.nonInteractive = false;
-    this.icon = null;
-    this.iconFlipRtl = false;
-    this.label = undefined;
-    this.messageOverrides = undefined;
-    this.messages = undefined;
-    this.metadata = undefined;
-    this.removable = false;
-    this.selected = false;
-    this.value = undefined;
-    this.defaultMessages = undefined;
-    this.effectiveLocale = "";
-  }
-  descriptionWatchHandler() {
-    this.calciteInternalListItemPropsChange.emit();
-  }
-  labelWatchHandler() {
-    this.calciteInternalListItemPropsChange.emit();
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  metadataWatchHandler() {
-    this.calciteInternalListItemPropsChange.emit();
-  }
-  selectedWatchHandler() {
-    this.calciteListItemChange.emit({
-      item: this.el,
-      value: this.value,
-      selected: this.selected,
-      shiftPressed: this.shiftPressed,
-    });
-    this.shiftPressed = false;
-  }
-  valueWatchHandler(newValue, oldValue) {
-    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    connectInteractive(this);
-    connectLocalized(this);
-    connectMessages(this);
-    connectConditionalSlotComponent(this);
-  }
-  async componentWillLoad() {
-    await setUpMessages(this);
-    setUpLoadableComponent(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  disconnectedCallback() {
-    disconnectInteractive(this);
-    disconnectLocalized(this);
-    disconnectMessages(this);
-    disconnectConditionalSlotComponent(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this, this.el.closest("calcite-pick-list") ? "managed" : false);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Toggles the selection state. By default this won't trigger an event.
-   * The first argument allows the value to be coerced, rather than swapping values.
-   *
-   * @param coerce
-   */
-  async toggleSelected(coerce) {
-    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
-  }
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    await componentFocusable(this);
-    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderIcon() {
-    const { icon, iconFlipRtl } = this;
-    if (!icon) {
-      return null;
-    }
-    return (h("span", { class: {
-        [CSS.icon]: true,
-        [CSS.iconDot]: icon === ICON_TYPES.circle,
-      }, onClick: this.pickListClickHandler }, icon === ICON_TYPES.square ? (h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.checked, scale: "s" })) : null));
-  }
-  renderRemoveAction() {
-    return this.removable ? (h("calcite-action", { class: CSS.remove, icon: ICONS.remove, onClick: this.removeClickHandler, slot: SLOTS.actionsEnd, text: this.messages.remove })) : null;
-  }
-  renderActionsStart() {
-    const { el } = this;
-    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);
-    return hasActionsStart ? (h("div", { class: { [CSS.actions]: true, [CSS.actionsStart]: true } }, h("slot", { name: SLOTS.actionsStart }))) : null;
-  }
-  renderActionsEnd() {
-    const { el, removable } = this;
-    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
-    return hasActionsEnd || removable ? (h("div", { class: { [CSS.actions]: true, [CSS.actionsEnd]: true } }, h("slot", { name: SLOTS.actionsEnd }), this.renderRemoveAction())) : null;
-  }
-  render() {
-    const { description, label } = this;
-    return (h(Fragment, null, this.renderIcon(), this.renderActionsStart(), h("label", { "aria-label": label, class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (focusEl) => (this.focusEl = focusEl) }, h("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS.textContainer, role: "menuitemcheckbox" }, h("span", { class: CSS.title }, label), description ? h("span", { class: CSS.description }, description) : null)), this.renderActionsEnd()));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "description": ["descriptionWatchHandler"],
-    "label": ["labelWatchHandler"],
-    "defaultMessages": ["onMessagesChange"],
-    "messageOverrides": ["onMessagesChange"],
-    "metadata": ["metadataWatchHandler"],
-    "selected": ["selectedWatchHandler"],
-    "value": ["valueWatchHandler"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const PickListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListItemChange = createEvent(this, "calciteListItemChange", 6);
+    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
+    this.calciteInternalListItemPropsChange = createEvent(this, "calciteInternalListItemPropsChange", 6);
+    this.calciteInternalListItemValueChange = createEvent(this, "calciteInternalListItemValueChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.pickListClickHandler = (event) => {
+      if (this.disabled || (this.deselectDisabled && this.selected) || this.nonInteractive) {
+        return;
+      }
+      this.shiftPressed = event.shiftKey;
+      this.selected = !this.selected;
+    };
+    this.pickListKeyDownHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        if ((this.deselectDisabled && this.selected) || this.nonInteractive) {
+          return;
+        }
+        this.selected = !this.selected;
+      }
+    };
+    this.removeClickHandler = () => {
+      this.calciteListItemRemove.emit();
+    };
+    this.description = undefined;
+    this.disabled = false;
+    this.deselectDisabled = false;
+    this.nonInteractive = false;
+    this.icon = null;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.metadata = undefined;
+    this.removable = false;
+    this.selected = false;
+    this.value = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  descriptionWatchHandler() {
+    this.calciteInternalListItemPropsChange.emit();
+  }
+  labelWatchHandler() {
+    this.calciteInternalListItemPropsChange.emit();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  metadataWatchHandler() {
+    this.calciteInternalListItemPropsChange.emit();
+  }
+  selectedWatchHandler() {
+    this.calciteListItemChange.emit({
+      item: this.el,
+      value: this.value,
+      selected: this.selected,
+      shiftPressed: this.shiftPressed,
+    });
+    this.shiftPressed = false;
+  }
+  valueWatchHandler(newValue, oldValue) {
+    this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+    connectLocalized(this);
+    connectMessages(this);
+    connectConditionalSlotComponent(this);
+  }
+  async componentWillLoad() {
+    await setUpMessages(this);
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    disconnectConditionalSlotComponent(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this, this.el.closest("calcite-pick-list") ? "managed" : false);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Toggles the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
+   */
+  async toggleSelected(coerce) {
+    this.selected = typeof coerce === "boolean" ? coerce : !this.selected;
+  }
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    await componentFocusable(this);
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderIcon() {
+    const { icon, iconFlipRtl } = this;
+    if (!icon) {
+      return null;
+    }
+    return (h("span", { class: {
+        [CSS.icon]: true,
+        [CSS.iconDot]: icon === ICON_TYPES.circle,
+      }, onClick: this.pickListClickHandler }, icon === ICON_TYPES.square ? (h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.checked, scale: "s" })) : null));
+  }
+  renderRemoveAction() {
+    return this.removable ? (h("calcite-action", { class: CSS.remove, icon: ICONS.remove, onClick: this.removeClickHandler, slot: SLOTS.actionsEnd, text: this.messages.remove })) : null;
+  }
+  renderActionsStart() {
+    const { el } = this;
+    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);
+    return hasActionsStart ? (h("div", { class: { [CSS.actions]: true, [CSS.actionsStart]: true } }, h("slot", { name: SLOTS.actionsStart }))) : null;
+  }
+  renderActionsEnd() {
+    const { el, removable } = this;
+    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
+    return hasActionsEnd || removable ? (h("div", { class: { [CSS.actions]: true, [CSS.actionsEnd]: true } }, h("slot", { name: SLOTS.actionsEnd }), this.renderRemoveAction())) : null;
+  }
+  render() {
+    const { description, label } = this;
+    return (h(Fragment, null, this.renderIcon(), this.renderActionsStart(), h("label", { "aria-label": label, class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (focusEl) => (this.focusEl = focusEl) }, h("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS.textContainer, role: "menuitemcheckbox" }, h("span", { class: CSS.title }, label), description ? h("span", { class: CSS.description }, description) : null)), this.renderActionsEnd()));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "description": ["descriptionWatchHandler"],
+    "label": ["labelWatchHandler"],
+    "defaultMessages": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "metadata": ["metadataWatchHandler"],
+    "selected": ["selectedWatchHandler"],
+    "value": ["valueWatchHandler"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 PickListItem.style = pickListItemCss;
 
 export { PickListItem as calcite_pick_list_item };