@esri/calcite-components 2.1.0-next.9 → 2.2.0-next.0

package/dist/components/calcite-text-area.js.map

@@ -1 +1 @@
-{"file":"calcite-text-area.js","mappings":"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","names":[],"sources":["src/components/text-area/resources.ts","src/components/text-area/text-area.scss?tag=calcite-text-area&encapsulation=shadow","src/components/text-area/text-area.tsx"],"sourcesContent":["export const CSS = {\n  assistiveText: \"assistive-text\",\n  characterLimit: \"character-limit\",\n  content: \"content\",\n  container: \"container\",\n  footer: \"footer\",\n  resizeDisabled: \"resize--disabled\",\n  resizeDisabledX: \"resize--disabled-x\",\n  resizeDisabledY: \"resize--disabled-y\",\n  characterOverLimit: \"character--over-limit\",\n  readOnly: \"readonly\",\n  textAreaInvalid: \"text-area--invalid\",\n  footerSlotted: \"footer--slotted\",\n  borderColor: \"border--color\",\n  hide: \"hide\",\n  blockSizeFull: \"block-size--full\",\n  footerEndSlotOnly: \"footer--end-only\",\n};\n\nexport const SLOTS = {\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n};\n\nexport const RESIZE_TIMEOUT = 100;\n",":host {\n  @apply inline-block\n  relative\n  w-full\n  h-full;\n}\n\ntextarea {\n  @apply text-color-1\n  relative\n  block\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  font-sans\n  w-full\n  m-0;\n  min-inline-size: theme(\"spacing.48\");\n  border-block-end: 1px solid var(--calcite-color-border-3);\n  @media screen and (max-width: 480px) {\n    @apply resize-none;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &.text-area--invalid {\n    @apply border-color-danger\n    border\n    border-solid\n    border-b;\n    &:focus {\n      @apply focus-inset-danger;\n    }\n  }\n  &.footer--slotted {\n    min-inline-size: theme(\"spacing.72\");\n  }\n}\n\n.footer {\n  @apply flex\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  border-solid\n  border-t-0\n  items-center;\n}\n\n.character-limit {\n  @apply flex\n  justify-end\n  text-color-2\n  items-center\n  font-normal\n  whitespace-nowrap;\n}\n\n.character--over-limit {\n  @apply font-bold\n  text-danger;\n}\n\n:host([resize=\"none\"]) textarea {\n  @apply resize-none;\n}\n\n:host([resize=\"horizontal\"]) textarea {\n  @apply resize-x;\n}\n\n:host([resize=\"vertical\"]) textarea {\n  @apply resize-y;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2;\n  .footer {\n    @apply py-1\n    px-2;\n    min-block-size: 1.75rem;\n  }\n  textarea {\n    @apply py-1\n    px-2;\n  }\n}\n\n:host([scale=\"s\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n2\n    pl-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea {\n    @apply py-2\n    px-3;\n  }\n  .footer {\n    @apply py-2\n    px-3;\n    min-block-size: 2.25rem;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n1\n    pl-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0;\n  textarea {\n    @apply py-3\n    px-4;\n  }\n  .footer {\n    @apply py-3\n    px-4;\n    min-block-size: 2.75rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-0\n    pl-4;\n  }\n}\n\n:host([status=\"invalid\"]) {\n  textarea {\n    @apply border-color-danger;\n  }\n  textarea:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.readonly {\n  @apply bg-background font-medium;\n}\n\n:host([disabled]) {\n  textarea,\n  footer {\n    @apply opacity-50;\n  }\n}\n\n.border--color {\n  @apply border-b border-color-input;\n  &:focus {\n    @apply border-b-2;\n  }\n}\n\ntextarea.block-size--full {\n  @apply h-full;\n}\n\n.content,\n.hide {\n  @apply hidden;\n}\n\n.container {\n  @apply flex\n  justify-between\n  w-full;\n}\n\n.footer--end-only {\n  @apply justify-end;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include hidden-form-input();\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  VNode,\n  Watch,\n  Method,\n  Host,\n  State,\n} from \"@stencil/core\";\nimport { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from \"../../utils/form\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { CSS, SLOTS, RESIZE_TIMEOUT } from \"./resources\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  componentLoaded,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { TextAreaMessages } from \"./assets/text-area/t9n\";\nimport { throttle } from \"lodash-es\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CharacterLengthObj } from \"./interfaces\";\nimport { guid } from \"../../utils/guid\";\nimport { Status } from \"../interfaces\";\n\n/**\n * @slot - A slot for adding text.\n * @slot footer-start - A slot for adding content to the start of the component's footer.\n * @slot footer-end - A slot for adding content to the end of the component's footer.\n */\n\n@Component({\n  tag: \"calcite-text-area\",\n  styleUrl: \"text-area.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TextArea\n  implements\n    FormComponent,\n    LabelableComponent,\n    LocalizedComponent,\n    LoadableComponent,\n    T9nComponent,\n    InteractiveComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.\n   *\n   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n   */\n  @Prop({ reflect: true }) autofocus = false;\n\n  /**\n   * Specifies the component's number of columns.\n   *\n   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)\n   */\n  @Prop({ reflect: true }) columns: number;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   *\n   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The ID of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Specifies the maximum number of characters allowed.\n   *\n   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)\n   */\n  @Prop({ reflect: true }) maxLength: number;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TextAreaMessages;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /**\n   * Specifies the placeholder text for the component.\n   *\n   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * When `true`, the component's `value` can be read, but cannot be modified.\n   *\n   * @readonly\n   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies if the component is resizable. */\n  @Prop({ reflect: true }) resize: \"both\" | \"horizontal\" | \"vertical\" | \"none\" = \"both\";\n\n  /**\n   * Specifies the component's number of rows.\n   *\n   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)\n   */\n  @Prop({ reflect: true }) rows: number;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: \"l\" | \"m\" | \"s\" = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop({ mutable: true }) value: string;\n\n  /**\n   * Specifies the wrapping mechanism for the text.\n   *\n   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)\n   */\n  @Prop({ reflect: true }) wrap: \"soft\" | \"hard\" = \"soft\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TextAreaMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Emitters\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * Fires each time a new `value` is typed.\n   */\n  @Event() calciteTextAreaInput: EventEmitter<void>;\n\n  /**\n   * Fires each time a new `value` is typed and committed.\n   */\n  @Event() calciteTextAreaChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n    this.setTextAreaHeight();\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;\n    return (\n      <Host>\n        <textarea\n          aria-describedby={this.guid}\n          aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}\n          aria-label={getLabelText(this)}\n          autofocus={this.autofocus}\n          class={{\n            [CSS.readOnly]: this.readOnly,\n            [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),\n            [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,\n            [CSS.blockSizeFull]: !hasFooter,\n            [CSS.borderColor]: !hasFooter,\n          }}\n          cols={this.columns}\n          disabled={this.disabled}\n          name={this.name}\n          onChange={this.handleChange}\n          onInput={this.handleInput}\n          placeholder={this.placeholder}\n          readonly={this.readOnly}\n          required={this.required}\n          rows={this.rows}\n          value={this.value}\n          wrap={this.wrap}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.setTextAreaEl}\n        />\n        <span class={{ [CSS.content]: true }}>\n          <slot onSlotchange={this.contentSlotChangeHandler} />\n        </span>\n        <footer\n          class={{\n            [CSS.footer]: true,\n            [CSS.readOnly]: this.readOnly,\n            [CSS.hide]: !hasFooter,\n          }}\n          ref={(el) => (this.footerEl = el as HTMLElement)}\n        >\n          <div\n            class={{\n              [CSS.container]: true,\n              [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,\n            }}\n          >\n            <slot\n              name={SLOTS.footerStart}\n              onSlotchange={(event) =>\n                (this.startSlotHasElements = slotChangeHasAssignedElement(event))\n              }\n            />\n            <slot\n              name={SLOTS.footerEnd}\n              onSlotchange={(event) =>\n                (this.endSlotHasElements = slotChangeHasAssignedElement(event))\n              }\n            />\n          </div>\n          {this.renderCharacterLimit()}\n        </footer>\n        <HiddenFormInputSlot component={this} />\n        {this.isCharacterLimitExceeded() && (\n          <span aria-hidden={true} aria-live=\"polite\" class={CSS.assistiveText} id={this.guid}>\n            {this.replacePlaceHoldersInMessages()}\n          </span>\n        )}\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.textAreaEl.focus();\n  }\n\n  /** Selects the text of the component's `value`. */\n  @Method()\n  async selectText(): Promise<void> {\n    await componentLoaded(this);\n    this.textAreaEl.select();\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTextAreaElement;\n\n  defaultValue: TextArea[\"value\"];\n\n  footerEl: HTMLElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  textAreaEl: HTMLTextAreaElement;\n\n  @State() defaultMessages: TextAreaMessages;\n\n  @State() endSlotHasElements: boolean;\n\n  @State() startSlotHasElements: boolean;\n\n  @State() effectiveLocale = \"\";\n\n  @State() localizedCharacterLengthObj: CharacterLengthObj;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  private guid = guid();\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onFormReset(): void {\n    this.value = this.defaultValue;\n  }\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  handleInput = (event: InputEvent): void => {\n    this.value = event.target[\"value\"];\n    this.calciteTextAreaInput.emit();\n  };\n\n  handleChange = (): void => {\n    this.calciteTextAreaChange.emit();\n  };\n\n  contentSlotChangeHandler = (): void => {\n    if (!this.value) {\n      const nodes = this.el.childNodes;\n      nodes.forEach((el) => {\n        if (el.nodeName === \"#text\") {\n          this.value = el.nodeValue.trim();\n        }\n      });\n    }\n  };\n\n  renderCharacterLimit = (): VNode | null => {\n    if (this.maxLength) {\n      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();\n      return (\n        <span class={CSS.characterLimit}>\n          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>\n            {this.localizedCharacterLengthObj.currentLength}\n          </span>\n          {\"/\"}\n          {this.localizedCharacterLengthObj.maxLength}\n        </span>\n      );\n    }\n    return null;\n  };\n\n  getLocalizedCharacterLength(): CharacterLengthObj {\n    const currentLength = this.value ? this.value.length.toString() : \"0\";\n    const maxLength = this.maxLength.toString();\n    if (this.numberingSystem === \"latn\") {\n      return { currentLength, maxLength };\n    }\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"never\",\n      useGrouping: this.groupSeparator,\n    };\n    return {\n      currentLength: numberStringFormatter.localize(currentLength),\n      maxLength: numberStringFormatter.localize(maxLength),\n    };\n  }\n\n  resizeObserver = createObserver(\"resize\", async () => {\n    await componentLoaded(this);\n    const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =\n      this.getHeightAndWidthOfElements();\n    if (footerWidth > 0 && footerWidth !== textAreaWidth) {\n      this.footerEl.style.width = `${textAreaWidth}px`;\n    }\n    if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {\n      this.setHeightAndWidthToAuto();\n    }\n  });\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.setCustomValidity(\"\");\n    if (this.isCharacterLimitExceeded()) {\n      input.setCustomValidity(this.replacePlaceHoldersInMessages());\n    }\n  }\n\n  setTextAreaEl = (el: HTMLTextAreaElement): void => {\n    this.textAreaEl = el;\n    this.resizeObserver.observe(el);\n  };\n\n  setTextAreaHeight(): void {\n    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();\n    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {\n      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;\n    }\n  }\n\n  getHeightAndWidthOfElements(): {\n    textAreaHeight: number;\n    textAreaWidth: number;\n    elHeight: number;\n    elWidth: number;\n    footerHeight: number;\n    footerWidth: number;\n  } {\n    const { height: textAreaHeight, width: textAreaWidth } =\n      this.textAreaEl.getBoundingClientRect();\n    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();\n    const { height: footerHeight, width: footerWidth } = this.footerEl?.getBoundingClientRect();\n\n    return {\n      textAreaHeight,\n      textAreaWidth,\n      elHeight,\n      elWidth,\n      footerHeight,\n      footerWidth,\n    };\n  }\n\n  private replacePlaceHoldersInMessages(): string {\n    return this.messages.tooLong\n      .replace(\"{maxLength}\", this.localizedCharacterLengthObj.maxLength)\n      .replace(\"{currentLength}\", this.localizedCharacterLengthObj.currentLength);\n  }\n\n  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.\n  // throttle is used to avoid flashing of textarea when user resizes.\n  private setHeightAndWidthToAuto = throttle(\n    (): void => {\n      if (this.resize === \"vertical\" || this.resize === \"both\") {\n        this.el.style.height = \"auto\";\n      }\n      if (this.resize === \"horizontal\" || this.resize === \"both\") {\n        this.el.style.width = \"auto\";\n      }\n    },\n    RESIZE_TIMEOUT,\n    { leading: false }\n  );\n\n  private isCharacterLimitExceeded(): boolean {\n    return this.value?.length > this.maxLength;\n  }\n}\n"],"version":3}
+{"file":"calcite-text-area.js","mappings":"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","names":[],"sources":["src/components/text-area/resources.ts","src/components/text-area/text-area.scss?tag=calcite-text-area&encapsulation=shadow","src/components/text-area/text-area.tsx"],"sourcesContent":["export const CSS = {\n  assistiveText: \"assistive-text\",\n  characterLimit: \"character-limit\",\n  content: \"content\",\n  container: \"container\",\n  footer: \"footer\",\n  resizeDisabled: \"resize--disabled\",\n  resizeDisabledX: \"resize--disabled-x\",\n  resizeDisabledY: \"resize--disabled-y\",\n  characterOverLimit: \"character--over-limit\",\n  readOnly: \"readonly\",\n  textAreaInvalid: \"text-area--invalid\",\n  footerSlotted: \"footer--slotted\",\n  borderColor: \"border--color\",\n  hide: \"hide\",\n  blockSizeFull: \"block-size--full\",\n  footerEndSlotOnly: \"footer--end-only\",\n};\n\nexport const SLOTS = {\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n};\n\nexport const RESIZE_TIMEOUT = 100;\n",":host {\n  @apply inline-block\n  relative\n  w-full\n  h-full;\n}\n\ntextarea {\n  @apply text-color-1\n  relative\n  block\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  font-sans\n  w-full\n  m-0;\n  min-inline-size: theme(\"spacing.48\");\n  border-block-end: 1px solid var(--calcite-color-border-3);\n  @media screen and (max-width: 480px) {\n    @apply resize-none;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &.text-area--invalid {\n    @apply border-color-danger\n    border\n    border-solid\n    border-b;\n    &:focus {\n      @apply focus-inset-danger;\n    }\n  }\n  &.footer--slotted {\n    min-inline-size: theme(\"spacing.72\");\n  }\n}\n\n.footer {\n  @apply flex\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  border-solid\n  border-t-0\n  items-center;\n}\n\n.character-limit {\n  @apply flex\n  justify-end\n  text-color-2\n  items-center\n  font-normal\n  whitespace-nowrap;\n}\n\n.character--over-limit {\n  @apply font-bold\n  text-danger;\n}\n\n:host([resize=\"none\"]) textarea {\n  @apply resize-none;\n}\n\n:host([resize=\"horizontal\"]) textarea {\n  @apply resize-x;\n}\n\n:host([resize=\"vertical\"]) textarea {\n  @apply resize-y;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2;\n  .footer {\n    @apply py-1\n    px-2;\n    min-block-size: 1.75rem;\n  }\n  textarea {\n    @apply py-1\n    px-2;\n  }\n}\n\n:host([scale=\"s\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n2\n    pl-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea {\n    @apply py-2\n    px-3;\n  }\n  .footer {\n    @apply py-2\n    px-3;\n    min-block-size: 2.25rem;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n1\n    pl-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0;\n  textarea {\n    @apply py-3\n    px-4;\n  }\n  .footer {\n    @apply py-3\n    px-4;\n    min-block-size: 2.75rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-0\n    pl-4;\n  }\n}\n\n:host([status=\"invalid\"]) {\n  textarea {\n    @apply border-color-danger;\n  }\n  textarea:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.readonly {\n  @apply bg-background font-medium;\n}\n\n:host([disabled]) {\n  textarea,\n  footer {\n    @apply opacity-50;\n  }\n}\n\n.border--color {\n  @apply border-b border-color-input;\n  &:focus {\n    @apply border-b-2;\n  }\n}\n\ntextarea.block-size--full {\n  @apply h-full;\n}\n\n.content,\n.hide {\n  @apply hidden;\n}\n\n.container {\n  @apply flex\n  justify-between\n  w-full;\n}\n\n.footer--end-only {\n  @apply justify-end;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include form-validation-message();\n@include hidden-form-input();\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  VNode,\n  Watch,\n  Method,\n  Host,\n  State,\n} from \"@stencil/core\";\nimport { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from \"../../utils/form\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { CSS, SLOTS, RESIZE_TIMEOUT } from \"./resources\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  componentLoaded,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { TextAreaMessages } from \"./assets/text-area/t9n\";\nimport { throttle } from \"lodash-es\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CharacterLengthObj } from \"./interfaces\";\nimport { guid } from \"../../utils/guid\";\nimport { Status } from \"../interfaces\";\nimport { Validation } from \"../functional/Validation\";\n\n/**\n * @slot - A slot for adding text.\n * @slot footer-start - A slot for adding content to the start of the component's footer.\n * @slot footer-end - A slot for adding content to the end of the component's footer.\n */\n\n@Component({\n  tag: \"calcite-text-area\",\n  styleUrl: \"text-area.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TextArea\n  implements\n    FormComponent,\n    LabelableComponent,\n    LocalizedComponent,\n    LoadableComponent,\n    T9nComponent,\n    InteractiveComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.\n   *\n   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n   */\n  @Prop({ reflect: true }) autofocus = false;\n\n  /**\n   * Specifies the component's number of columns.\n   *\n   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)\n   */\n  @Prop({ reflect: true }) columns: number;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   *\n   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The ID of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Specifies the maximum number of characters allowed.\n   *\n   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)\n   */\n  @Prop({ reflect: true }) maxLength: number;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TextAreaMessages;\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop() validationIcon: string | boolean;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /**\n   * Specifies the placeholder text for the component.\n   *\n   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * When `true`, the component's `value` can be read, but cannot be modified.\n   *\n   * @readonly\n   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies if the component is resizable. */\n  @Prop({ reflect: true }) resize: \"both\" | \"horizontal\" | \"vertical\" | \"none\" = \"both\";\n\n  /**\n   * Specifies the component's number of rows.\n   *\n   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)\n   */\n  @Prop({ reflect: true }) rows: number;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: \"l\" | \"m\" | \"s\" = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop({ mutable: true }) value: string;\n\n  /**\n   * Specifies the wrapping mechanism for the text.\n   *\n   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)\n   */\n  @Prop({ reflect: true }) wrap: \"soft\" | \"hard\" = \"soft\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TextAreaMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Emitters\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * Fires each time a new `value` is typed.\n   */\n  @Event() calciteTextAreaInput: EventEmitter<void>;\n\n  /**\n   * Fires each time a new `value` is typed and committed.\n   */\n  @Event() calciteTextAreaChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n    this.setTextAreaHeight();\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;\n    return (\n      <Host>\n        <textarea\n          aria-describedby={this.guid}\n          aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}\n          aria-label={getLabelText(this)}\n          autofocus={this.autofocus}\n          class={{\n            [CSS.readOnly]: this.readOnly,\n            [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),\n            [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,\n            [CSS.blockSizeFull]: !hasFooter,\n            [CSS.borderColor]: !hasFooter,\n          }}\n          cols={this.columns}\n          disabled={this.disabled}\n          name={this.name}\n          onChange={this.handleChange}\n          onInput={this.handleInput}\n          placeholder={this.placeholder}\n          readonly={this.readOnly}\n          required={this.required}\n          rows={this.rows}\n          value={this.value}\n          wrap={this.wrap}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.setTextAreaEl}\n        />\n        <span class={{ [CSS.content]: true }}>\n          <slot onSlotchange={this.contentSlotChangeHandler} />\n        </span>\n        <footer\n          class={{\n            [CSS.footer]: true,\n            [CSS.readOnly]: this.readOnly,\n            [CSS.hide]: !hasFooter,\n          }}\n          ref={(el) => (this.footerEl = el as HTMLElement)}\n        >\n          <div\n            class={{\n              [CSS.container]: true,\n              [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,\n            }}\n          >\n            <slot\n              name={SLOTS.footerStart}\n              onSlotchange={(event) =>\n                (this.startSlotHasElements = slotChangeHasAssignedElement(event))\n              }\n            />\n            <slot\n              name={SLOTS.footerEnd}\n              onSlotchange={(event) =>\n                (this.endSlotHasElements = slotChangeHasAssignedElement(event))\n              }\n            />\n          </div>\n          {this.renderCharacterLimit()}\n        </footer>\n        <HiddenFormInputSlot component={this} />\n        {this.isCharacterLimitExceeded() && (\n          <span aria-hidden={true} aria-live=\"polite\" class={CSS.assistiveText} id={this.guid}>\n            {this.replacePlaceHoldersInMessages()}\n          </span>\n        )}\n        {this.validationMessage ? (\n          <Validation\n            icon={this.validationIcon}\n            message={this.validationMessage}\n            scale={this.scale}\n            status={this.status}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.textAreaEl.focus();\n  }\n\n  /** Selects the text of the component's `value`. */\n  @Method()\n  async selectText(): Promise<void> {\n    await componentLoaded(this);\n    this.textAreaEl.select();\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTextAreaElement;\n\n  defaultValue: TextArea[\"value\"];\n\n  footerEl: HTMLElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  textAreaEl: HTMLTextAreaElement;\n\n  @State() defaultMessages: TextAreaMessages;\n\n  @State() endSlotHasElements: boolean;\n\n  @State() startSlotHasElements: boolean;\n\n  @State() effectiveLocale = \"\";\n\n  @State() localizedCharacterLengthObj: CharacterLengthObj;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  private guid = guid();\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onFormReset(): void {\n    this.value = this.defaultValue;\n  }\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  handleInput = (event: InputEvent): void => {\n    this.value = event.target[\"value\"];\n    this.calciteTextAreaInput.emit();\n  };\n\n  handleChange = (): void => {\n    this.calciteTextAreaChange.emit();\n  };\n\n  contentSlotChangeHandler = (): void => {\n    if (!this.value) {\n      const nodes = this.el.childNodes;\n      nodes.forEach((el) => {\n        if (el.nodeName === \"#text\") {\n          this.value = el.nodeValue.trim();\n        }\n      });\n    }\n  };\n\n  renderCharacterLimit = (): VNode | null => {\n    if (this.maxLength) {\n      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();\n      return (\n        <span class={CSS.characterLimit}>\n          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>\n            {this.localizedCharacterLengthObj.currentLength}\n          </span>\n          {\"/\"}\n          {this.localizedCharacterLengthObj.maxLength}\n        </span>\n      );\n    }\n    return null;\n  };\n\n  getLocalizedCharacterLength(): CharacterLengthObj {\n    const currentLength = this.value ? this.value.length.toString() : \"0\";\n    const maxLength = this.maxLength.toString();\n    if (this.numberingSystem === \"latn\") {\n      return { currentLength, maxLength };\n    }\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"never\",\n      useGrouping: this.groupSeparator,\n    };\n    return {\n      currentLength: numberStringFormatter.localize(currentLength),\n      maxLength: numberStringFormatter.localize(maxLength),\n    };\n  }\n\n  resizeObserver = createObserver(\"resize\", async () => {\n    await componentLoaded(this);\n    const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =\n      this.getHeightAndWidthOfElements();\n    if (footerWidth > 0 && footerWidth !== textAreaWidth) {\n      this.footerEl.style.width = `${textAreaWidth}px`;\n    }\n    if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {\n      this.setHeightAndWidthToAuto();\n    }\n  });\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.setCustomValidity(\"\");\n    if (this.isCharacterLimitExceeded()) {\n      input.setCustomValidity(this.replacePlaceHoldersInMessages());\n    }\n  }\n\n  setTextAreaEl = (el: HTMLTextAreaElement): void => {\n    this.textAreaEl = el;\n    this.resizeObserver.observe(el);\n  };\n\n  setTextAreaHeight(): void {\n    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();\n    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {\n      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;\n    }\n  }\n\n  getHeightAndWidthOfElements(): {\n    textAreaHeight: number;\n    textAreaWidth: number;\n    elHeight: number;\n    elWidth: number;\n    footerHeight: number;\n    footerWidth: number;\n  } {\n    const { height: textAreaHeight, width: textAreaWidth } =\n      this.textAreaEl.getBoundingClientRect();\n    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();\n    const { height: footerHeight, width: footerWidth } = this.footerEl?.getBoundingClientRect();\n\n    return {\n      textAreaHeight,\n      textAreaWidth,\n      elHeight,\n      elWidth,\n      footerHeight,\n      footerWidth,\n    };\n  }\n\n  private replacePlaceHoldersInMessages(): string {\n    return this.messages.tooLong\n      .replace(\"{maxLength}\", this.localizedCharacterLengthObj.maxLength)\n      .replace(\"{currentLength}\", this.localizedCharacterLengthObj.currentLength);\n  }\n\n  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.\n  // throttle is used to avoid flashing of textarea when user resizes.\n  private setHeightAndWidthToAuto = throttle(\n    (): void => {\n      if (this.resize === \"vertical\" || this.resize === \"both\") {\n        this.el.style.height = \"auto\";\n      }\n      if (this.resize === \"horizontal\" || this.resize === \"both\") {\n        this.el.style.width = \"auto\";\n      }\n    },\n    RESIZE_TIMEOUT,\n    { leading: false }\n  );\n\n  private isCharacterLimitExceeded(): boolean {\n    return this.value?.length > this.maxLength;\n  }\n}\n"],"version":3}

package/dist/components/calcite-tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';

package/dist/components/calcite-tile-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/calcite-tile.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tip-manager.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-tooltip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { q as queryElementRoots, i as isPrimaryPointerButton, D as getShadowRootNode, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tree-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, d as slotChangeHasAssignedElement, a as getElementDir, t as toAriaBoolean, x as filterDirectChildren } from './dom.js';

package/dist/components/calcite-tree.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as focusElement, w as nodeListToArray } from './dom.js';

package/dist/components/calcite-value-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-value-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
@@ -12,9 +12,10 @@ import { u as updateMessages, c as connectMessages, s as setUpMessages, d as dis
 import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render.js';
 import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
 import { e as focusElement } from './dom.js';
-import { d as defineCustomElement$7 } from './filter2.js';
-import { d as defineCustomElement$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './input.js';
+import { d as defineCustomElement$8 } from './filter2.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './input.js';
+import { d as defineCustomElement$5 } from './input-message.js';
 import { d as defineCustomElement$4 } from './loader.js';
 import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
@@ -334,7 +335,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-value-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
+    const components = ["calcite-value-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-loader", "calcite-progress", "calcite-scrim"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-value-list":
             if (!customElements.get(tagName)) {
@@ -343,15 +344,20 @@ function defineCustomElement$1() {
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "calcite-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-input-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/calcite-value-list.js.map

@@ -1 +1 @@
-{"file":"calcite-value-list.js","mappings":"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","names":[],"sources":["src/components/value-list/resources.ts","src/components/value-list/utils.ts","src/components/value-list/value-list.scss?tag=calcite-value-list&encapsulation=shadow","src/components/value-list/value-list.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  handle: \"handle\",\n};\nexport enum ICON_TYPES {\n  grip = \"grip\",\n}\nexport const TEXT = {\n  filterResults: \"Filter results\",\n};\n","import { getItemIndex } from \"../pick-list/shared-list-logic\";\nimport { DragStatus } from \"./interfaces\";\nimport { ValueList } from \"./value-list\";\n\nexport function getScreenReaderText(\n  item: HTMLCalciteValueListItemElement,\n  status: DragStatus,\n  valueList: ValueList<HTMLCalciteValueListItemElement>\n): string {\n  const { items, messages } = valueList;\n\n  const total = items.length;\n  const position = getItemIndex(valueList, item) + 1;\n  const template =\n    status === \"idle\"\n      ? messages.dragHandleIdle\n      : status === \"active\"\n      ? messages.dragHandleActive\n      : status === \"change\"\n      ? messages.dragHandleChange\n      : messages.dragHandleCommit;\n\n  return replacePlaceholders(template, item.label, position, total);\n}\n\nexport function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {\n  handle: HTMLCalciteHandleElement;\n  item: HTMLCalciteValueListItemElement;\n} {\n  const handle = event\n    .composedPath()\n    .find((item: HTMLElement) => item.dataset?.jsHandle !== undefined) as HTMLCalciteHandleElement;\n\n  const item = event\n    .composedPath()\n    .find(\n      (item: HTMLElement) => item.tagName?.toLowerCase() === \"calcite-value-list-item\"\n    ) as HTMLCalciteValueListItemElement;\n\n  return { handle, item };\n}\n\nexport function replacePlaceholders(text: string, label: string, position: number, total: number): string {\n  const replacePosition = text.replace(\"{position}\", position.toString());\n  const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n  return replaceLabel.replace(\"{total}\", total.toString());\n}\n",":host {\n  @apply text-color-2\n    text-n1\n    relative\n    box-border\n    flex\n    flex-shrink-0\n    flex-grow-0\n    flex-col\n    items-stretch\n    bg-transparent;\n  * {\n    @apply box-border;\n  }\n}\n\n@include disabled();\n\ncalcite-value-list-item:last-of-type {\n  @apply shadow-none;\n}\n\n:host([filter-enabled]) header {\n  @apply bg-foreground-1\n    mb-1\n    flex\n    items-center\n    justify-end;\n  &.sticky-pos {\n    @apply sticky top-0 z-sticky;\n  }\n  @apply shadow-border-bottom;\n}\n\ncalcite-filter {\n  @apply mb-px;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  calciteInternalListItemValueChangeHandler,\n  calciteListFocusOutHandler,\n  calciteListItemChangeHandler,\n  cleanUpObserver,\n  deselectRemovedItems,\n  deselectSiblingItems,\n  getItemData,\n  handleFilter,\n  handleFilterEvent,\n  handleInitialFilter,\n  initialize,\n  initializeObserver,\n  ItemData,\n  keyDownHandler,\n  ListFocusId,\n  moveItemIndex,\n  mutationObserverCallback,\n  removeItem,\n  selectSiblings,\n  setFocus,\n  setUpItems,\n} from \"../pick-list/shared-list-logic\";\nimport List from \"../pick-list/shared-list-render\";\nimport { ListItemAndHandle } from \"../value-list-item/interfaces\";\nimport { ValueListMessages } from \"./assets/value-list/t9n\";\nimport { CSS, ICON_TYPES } from \"./resources\";\nimport { getHandleAndItemElement, getScreenReaderText } from \"./utils\";\nimport {\n  DragDetail,\n  connectSortableComponent,\n  disconnectSortableComponent,\n  SortableComponent,\n  dragActive,\n} from \"../../utils/sortableComponent\";\nimport { focusElement } from \"../../utils/dom\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.\n * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.\n */\n@Component({\n  tag: \"calcite-value-list\",\n  styleUrl: \"value-list.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ValueList<\n  ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement\n> implements\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent,\n    SortableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When provided, the method will be called to determine whether the element can  move from the list.\n   */\n  @Prop() canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * When provided, the method will be called to determine whether the element can be added from another list.\n   */\n  @Prop() canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * When `true`, `calcite-value-list-item`s are sortable via a draggable button.\n   */\n  @Prop({ reflect: true }) dragEnabled = false;\n\n  /**\n   * The currently filtered items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];\n\n  /**\n   * The currently filtered data.\n   *\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ mutable: true }) filteredData: ItemData = [];\n\n  /**\n   * When `true`, an input appears at the top of the component that can be used by end users to filter list items.\n   */\n  @Prop({ reflect: true }) filterEnabled = false;\n\n  /**\n   * Placeholder text for the filter's input field.\n   */\n  @Prop({ reflect: true }) filterPlaceholder: string;\n\n  /**\n   * Text for the filter input field.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ reflect: true, mutable: true }) filterText: string;\n\n  /**\n   * The component's group identifier.\n   *\n   * To drag elements from one list into another, both lists must have the same group value.\n   */\n  @Prop({ reflect: true }) group?: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Similar to standard radio buttons and checkboxes.\n   * When `true`, a user can select multiple `calcite-value-list-item`s at a time.\n   * When `false`, only a single `calcite-value-list-item` can be selected at a time,\n   * and a new selection will deselect previous selections.\n   */\n  @Prop({ reflect: true }) multiple = false;\n\n  /**\n   * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.\n   */\n  @Prop({ reflect: true }) selectionFollowsFocus = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ValueListMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ValueListMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListElement;\n\n  @State() dataForFilter: ItemData = [];\n\n  @State() defaultMessages: ValueListMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() selectedValues: Map<string, ItemElement> = new Map();\n\n  items: ItemElement[];\n\n  lastSelectedItem: ItemElement = null;\n\n  mutationObserver = createObserver(\"mutation\", mutationObserverCallback.bind(this));\n\n  sortable: Sortable;\n\n  emitCalciteListChange: () => void;\n\n  emitCalciteListFilter: () => void;\n\n  filterEl: HTMLCalciteFilterElement;\n\n  assistiveTextEl: HTMLSpanElement;\n\n  handleSelector = `.${CSS.handle}`;\n\n  dragSelector = \"calcite-value-list-item\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    initialize.call(this);\n    initializeObserver.call(this);\n    this.setUpSorting();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    handleInitialFilter.call(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    disconnectInteractive(this);\n    disconnectSortableComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    cleanUpObserver.call(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when any of the list item selections have changed.\n   */\n  @Event({ cancelable: false }) calciteListChange: EventEmitter<\n    Map<string, HTMLCalciteValueListItemElement>\n  >;\n\n  /**\n   * Emits when the order of the list has changed.\n   */\n  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<any[]>;\n\n  /**\n   * Emits when a filter has changed.\n   */\n  @Event({ cancelable: false }) calciteListFilter: EventEmitter<void>;\n\n  @Listen(\"focusout\")\n  calciteListFocusOutHandler(event: FocusEvent): void {\n    calciteListFocusOutHandler.call(this, event);\n  }\n\n  @Listen(\"calciteListItemRemove\")\n  calciteListItemRemoveHandler(event: CustomEvent<void>): void {\n    removeItem.call(this, event);\n  }\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    calciteListItemChangeHandler.call(this, event);\n  }\n\n  @Listen(\"calciteInternalListItemPropsChange\")\n  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void {\n    event.stopPropagation();\n    this.setUpFilter();\n  }\n\n  @Listen(\"calciteInternalListItemValueChange\")\n  calciteInternalListItemValueChangeHandler(event: CustomEvent): void {\n    calciteInternalListItemValueChangeHandler.call(this, event);\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onGlobalDragStart(): void {\n    cleanUpObserver.call(this);\n  }\n\n  onGlobalDragEnd(): void {\n    initializeObserver.call(this);\n  }\n\n  onDragEnd(): void {}\n\n  onDragStart(): void {}\n\n  onDragSort(): void {\n    this.items = Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n    const values = this.items.map((item) => item.value);\n    this.calciteListOrderChange.emit(values);\n  }\n\n  getItems(): ItemElement[] {\n    return Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n  }\n\n  setUpItems(): void {\n    setUpItems.call(this, \"calcite-value-list-item\");\n    this.setUpSorting();\n  }\n\n  setUpFilter(): void {\n    if (this.filterEnabled) {\n      this.dataForFilter = this.getItemData();\n    }\n  }\n\n  setFilterEl = (el: HTMLCalciteFilterElement): void => {\n    this.filterEl = el;\n  };\n\n  setFilteredItems = (filteredItems: HTMLCalciteValueListItemElement[]): void => {\n    this.filteredItems = filteredItems;\n  };\n\n  setUpSorting(): void {\n    const { dragEnabled } = this;\n\n    if (!dragEnabled) {\n      return;\n    }\n\n    connectSortableComponent(this);\n  }\n\n  deselectRemovedItems = deselectRemovedItems.bind(this);\n\n  deselectSiblingItems = deselectSiblingItems.bind(this);\n\n  selectSiblings = selectSiblings.bind(this);\n\n  handleFilter = handleFilter.bind(this);\n\n  handleFilterEvent = handleFilterEvent.bind(this);\n\n  getItemData = getItemData.bind(this);\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const { handle, item } = getHandleAndItemElement(event);\n    if (handle && !item.handleActivated && event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"commit\", this));\n    }\n\n    if (!handle || !item.handleActivated) {\n      keyDownHandler.call(this, event);\n      return;\n    }\n\n    event.preventDefault();\n\n    const { items } = this;\n\n    if (event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"active\", this));\n    }\n\n    if ((event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") || items.length <= 1) {\n      return;\n    }\n\n    const { el } = this;\n    const nextIndex = moveItemIndex(this, item, event.key === \"ArrowUp\" ? \"up\" : \"down\");\n    if (nextIndex === items.length - 1) {\n      el.appendChild(item);\n    } else {\n      const itemAtNextIndex = el.children[nextIndex];\n      const insertionReferenceItem =\n        itemAtNextIndex === item.nextElementSibling\n          ? itemAtNextIndex.nextElementSibling\n          : itemAtNextIndex;\n      el.insertBefore(item, insertionReferenceItem);\n    }\n\n    this.items = this.getItems();\n    this.calciteListOrderChange.emit(this.items.map(({ value }) => value));\n\n    requestAnimationFrame(() => focusElement(handle));\n    item.handleActivated = true;\n\n    this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"change\", this));\n  };\n\n  handleBlur(): void {\n    if (this.dragEnabled) {\n      this.updateScreenReaderText(\"\");\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Returns the currently selected items */\n  @Method()\n  async getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   *\n   * @param focusId\n   */\n  @Method()\n  async setFocus(focusId?: ListFocusId): Promise<void> {\n    await componentFocusable(this);\n\n    return setFocus.call(this, focusId);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getIconType(): ICON_TYPES | null {\n    let type = null;\n    if (this.dragEnabled) {\n      type = ICON_TYPES.grip;\n    }\n    return type;\n  }\n\n  updateScreenReaderText(text: string): void {\n    this.assistiveTextEl.textContent = text;\n  }\n\n  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void {\n    handleElement.ariaLabel = text;\n  }\n\n  storeAssistiveEl = (el: HTMLSpanElement): void => {\n    this.assistiveTextEl = el;\n  };\n\n  handleFocusIn = (event: FocusEvent): void => {\n    const { handle, item } = getHandleAndItemElement(event);\n    if (!item?.handleActivated && item && handle) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n  };\n\n  @Listen(\"calciteValueListItemDragHandleBlur\")\n  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {\n    const { item, handle } = event.detail;\n    if (!item?.handleActivated && item) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n    event.stopPropagation();\n  }\n\n  render(): VNode {\n    return (\n      <List\n        onBlur={this.handleBlur}\n        onFocusin={this.handleFocusIn}\n        onKeyDown={this.keyDownHandler}\n        props={this}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-value-list.js","mappings":"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","names":[],"sources":["src/components/value-list/resources.ts","src/components/value-list/utils.ts","src/components/value-list/value-list.scss?tag=calcite-value-list&encapsulation=shadow","src/components/value-list/value-list.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  handle: \"handle\",\n};\nexport enum ICON_TYPES {\n  grip = \"grip\",\n}\nexport const TEXT = {\n  filterResults: \"Filter results\",\n};\n","import { getItemIndex } from \"../pick-list/shared-list-logic\";\nimport { DragStatus } from \"./interfaces\";\nimport { ValueList } from \"./value-list\";\n\nexport function getScreenReaderText(\n  item: HTMLCalciteValueListItemElement,\n  status: DragStatus,\n  valueList: ValueList<HTMLCalciteValueListItemElement>\n): string {\n  const { items, messages } = valueList;\n\n  const total = items.length;\n  const position = getItemIndex(valueList, item) + 1;\n  const template =\n    status === \"idle\"\n      ? messages.dragHandleIdle\n      : status === \"active\"\n      ? messages.dragHandleActive\n      : status === \"change\"\n      ? messages.dragHandleChange\n      : messages.dragHandleCommit;\n\n  return replacePlaceholders(template, item.label, position, total);\n}\n\nexport function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {\n  handle: HTMLCalciteHandleElement;\n  item: HTMLCalciteValueListItemElement;\n} {\n  const handle = event\n    .composedPath()\n    .find((item: HTMLElement) => item.dataset?.jsHandle !== undefined) as HTMLCalciteHandleElement;\n\n  const item = event\n    .composedPath()\n    .find(\n      (item: HTMLElement) => item.tagName?.toLowerCase() === \"calcite-value-list-item\"\n    ) as HTMLCalciteValueListItemElement;\n\n  return { handle, item };\n}\n\nexport function replacePlaceholders(text: string, label: string, position: number, total: number): string {\n  const replacePosition = text.replace(\"{position}\", position.toString());\n  const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n  return replaceLabel.replace(\"{total}\", total.toString());\n}\n",":host {\n  @apply text-color-2\n    text-n1\n    relative\n    box-border\n    flex\n    flex-shrink-0\n    flex-grow-0\n    flex-col\n    items-stretch\n    bg-transparent;\n  * {\n    @apply box-border;\n  }\n}\n\n@include disabled();\n\ncalcite-value-list-item:last-of-type {\n  @apply shadow-none;\n}\n\n:host([filter-enabled]) header {\n  @apply bg-foreground-1\n    mb-1\n    flex\n    items-center\n    justify-end;\n  &.sticky-pos {\n    @apply sticky top-0 z-sticky;\n  }\n  @apply shadow-border-bottom;\n}\n\ncalcite-filter {\n  @apply mb-px;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  calciteInternalListItemValueChangeHandler,\n  calciteListFocusOutHandler,\n  calciteListItemChangeHandler,\n  cleanUpObserver,\n  deselectRemovedItems,\n  deselectSiblingItems,\n  getItemData,\n  handleFilter,\n  handleFilterEvent,\n  handleInitialFilter,\n  initialize,\n  initializeObserver,\n  ItemData,\n  keyDownHandler,\n  ListFocusId,\n  moveItemIndex,\n  mutationObserverCallback,\n  removeItem,\n  selectSiblings,\n  setFocus,\n  setUpItems,\n} from \"../pick-list/shared-list-logic\";\nimport List from \"../pick-list/shared-list-render\";\nimport { ListItemAndHandle } from \"../value-list-item/interfaces\";\nimport { ValueListMessages } from \"./assets/value-list/t9n\";\nimport { CSS, ICON_TYPES } from \"./resources\";\nimport { getHandleAndItemElement, getScreenReaderText } from \"./utils\";\nimport {\n  DragDetail,\n  connectSortableComponent,\n  disconnectSortableComponent,\n  SortableComponent,\n  dragActive,\n} from \"../../utils/sortableComponent\";\nimport { focusElement } from \"../../utils/dom\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.\n * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.\n */\n@Component({\n  tag: \"calcite-value-list\",\n  styleUrl: \"value-list.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ValueList<\n  ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement\n> implements\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent,\n    SortableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When provided, the method will be called to determine whether the element can  move from the list.\n   */\n  @Prop() canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * When provided, the method will be called to determine whether the element can be added from another list.\n   */\n  @Prop() canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * When `true`, `calcite-value-list-item`s are sortable via a draggable button.\n   */\n  @Prop({ reflect: true }) dragEnabled = false;\n\n  /**\n   * The currently filtered items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];\n\n  /**\n   * The currently filtered data.\n   *\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ mutable: true }) filteredData: ItemData = [];\n\n  /**\n   * When `true`, an input appears at the top of the component that can be used by end users to filter list items.\n   */\n  @Prop({ reflect: true }) filterEnabled = false;\n\n  /**\n   * Placeholder text for the filter's input field.\n   */\n  @Prop({ reflect: true }) filterPlaceholder: string;\n\n  /**\n   * Text for the filter input field.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ reflect: true, mutable: true }) filterText: string;\n\n  /**\n   * The component's group identifier.\n   *\n   * To drag elements from one list into another, both lists must have the same group value.\n   */\n  @Prop({ reflect: true }) group?: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Similar to standard radio buttons and checkboxes.\n   * When `true`, a user can select multiple `calcite-value-list-item`s at a time.\n   * When `false`, only a single `calcite-value-list-item` can be selected at a time,\n   * and a new selection will deselect previous selections.\n   */\n  @Prop({ reflect: true }) multiple = false;\n\n  /**\n   * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.\n   */\n  @Prop({ reflect: true }) selectionFollowsFocus = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ValueListMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ValueListMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListElement;\n\n  @State() dataForFilter: ItemData = [];\n\n  @State() defaultMessages: ValueListMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() selectedValues: Map<string, ItemElement> = new Map();\n\n  items: ItemElement[];\n\n  lastSelectedItem: ItemElement = null;\n\n  mutationObserver = createObserver(\"mutation\", mutationObserverCallback.bind(this));\n\n  sortable: Sortable;\n\n  emitCalciteListChange: () => void;\n\n  emitCalciteListFilter: () => void;\n\n  filterEl: HTMLCalciteFilterElement;\n\n  assistiveTextEl: HTMLSpanElement;\n\n  handleSelector = `.${CSS.handle}`;\n\n  dragSelector = \"calcite-value-list-item\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    initialize.call(this);\n    initializeObserver.call(this);\n    this.setUpSorting();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    handleInitialFilter.call(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    disconnectInteractive(this);\n    disconnectSortableComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    cleanUpObserver.call(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when any of the list item selections have changed.\n   */\n  @Event({ cancelable: false }) calciteListChange: EventEmitter<\n    Map<string, HTMLCalciteValueListItemElement>\n  >;\n\n  /**\n   * Emits when the order of the list has changed.\n   */\n  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<any[]>;\n\n  /**\n   * Emits when a filter has changed.\n   */\n  @Event({ cancelable: false }) calciteListFilter: EventEmitter<void>;\n\n  @Listen(\"focusout\")\n  calciteListFocusOutHandler(event: FocusEvent): void {\n    calciteListFocusOutHandler.call(this, event);\n  }\n\n  @Listen(\"calciteListItemRemove\")\n  calciteListItemRemoveHandler(event: CustomEvent<void>): void {\n    removeItem.call(this, event);\n  }\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    calciteListItemChangeHandler.call(this, event);\n  }\n\n  @Listen(\"calciteInternalListItemPropsChange\")\n  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void {\n    event.stopPropagation();\n    this.setUpFilter();\n  }\n\n  @Listen(\"calciteInternalListItemValueChange\")\n  calciteInternalListItemValueChangeHandler(event: CustomEvent): void {\n    calciteInternalListItemValueChangeHandler.call(this, event);\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onGlobalDragStart(): void {\n    cleanUpObserver.call(this);\n  }\n\n  onGlobalDragEnd(): void {\n    initializeObserver.call(this);\n  }\n\n  onDragEnd(): void {}\n\n  onDragStart(): void {}\n\n  onDragSort(): void {\n    this.items = Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n    const values = this.items.map((item) => item.value);\n    this.calciteListOrderChange.emit(values);\n  }\n\n  getItems(): ItemElement[] {\n    return Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n  }\n\n  setUpItems(): void {\n    setUpItems.call(this, \"calcite-value-list-item\");\n    this.setUpSorting();\n  }\n\n  setUpFilter(): void {\n    if (this.filterEnabled) {\n      this.dataForFilter = this.getItemData();\n    }\n  }\n\n  setFilterEl = (el: HTMLCalciteFilterElement): void => {\n    this.filterEl = el;\n  };\n\n  setFilteredItems = (filteredItems: HTMLCalciteValueListItemElement[]): void => {\n    this.filteredItems = filteredItems;\n  };\n\n  setUpSorting(): void {\n    const { dragEnabled } = this;\n\n    if (!dragEnabled) {\n      return;\n    }\n\n    connectSortableComponent(this);\n  }\n\n  deselectRemovedItems = deselectRemovedItems.bind(this);\n\n  deselectSiblingItems = deselectSiblingItems.bind(this);\n\n  selectSiblings = selectSiblings.bind(this);\n\n  handleFilter = handleFilter.bind(this);\n\n  handleFilterEvent = handleFilterEvent.bind(this);\n\n  getItemData = getItemData.bind(this);\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const { handle, item } = getHandleAndItemElement(event);\n    if (handle && !item.handleActivated && event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"commit\", this));\n    }\n\n    if (!handle || !item.handleActivated) {\n      keyDownHandler.call(this, event);\n      return;\n    }\n\n    event.preventDefault();\n\n    const { items } = this;\n\n    if (event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"active\", this));\n    }\n\n    if ((event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") || items.length <= 1) {\n      return;\n    }\n\n    const { el } = this;\n    const nextIndex = moveItemIndex(this, item, event.key === \"ArrowUp\" ? \"up\" : \"down\");\n    if (nextIndex === items.length - 1) {\n      el.appendChild(item);\n    } else {\n      const itemAtNextIndex = el.children[nextIndex];\n      const insertionReferenceItem =\n        itemAtNextIndex === item.nextElementSibling\n          ? itemAtNextIndex.nextElementSibling\n          : itemAtNextIndex;\n      el.insertBefore(item, insertionReferenceItem);\n    }\n\n    this.items = this.getItems();\n    this.calciteListOrderChange.emit(this.items.map(({ value }) => value));\n\n    requestAnimationFrame(() => focusElement(handle));\n    item.handleActivated = true;\n\n    this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"change\", this));\n  };\n\n  handleBlur(): void {\n    if (this.dragEnabled) {\n      this.updateScreenReaderText(\"\");\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Returns the currently selected items */\n  @Method()\n  async getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   *\n   * @param focusId\n   */\n  @Method()\n  async setFocus(focusId?: ListFocusId): Promise<void> {\n    await componentFocusable(this);\n\n    return setFocus.call(this, focusId);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getIconType(): ICON_TYPES | null {\n    let type = null;\n    if (this.dragEnabled) {\n      type = ICON_TYPES.grip;\n    }\n    return type;\n  }\n\n  updateScreenReaderText(text: string): void {\n    this.assistiveTextEl.textContent = text;\n  }\n\n  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void {\n    handleElement.ariaLabel = text;\n  }\n\n  storeAssistiveEl = (el: HTMLSpanElement): void => {\n    this.assistiveTextEl = el;\n  };\n\n  handleFocusIn = (event: FocusEvent): void => {\n    const { handle, item } = getHandleAndItemElement(event);\n    if (!item?.handleActivated && item && handle) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n  };\n\n  @Listen(\"calciteValueListItemDragHandleBlur\")\n  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {\n    const { item, handle } = event.detail;\n    if (!item?.handleActivated && item) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n    event.stopPropagation();\n  }\n\n  render(): VNode {\n    return (\n      <List\n        onBlur={this.handleBlur}\n        onFocusin={this.handleFocusIn}\n        onKeyDown={this.keyDownHandler}\n        props={this}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';

package/dist/components/color-picker-hex-input.js

@@ -1,14 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.2.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, k as hexChar, c as alphaToOpacity } from './utils.js';
 import { c as color } from './index2.js';
 import { e as focusElement } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
-import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './input-message.js';
 import { d as defineCustomElement$3 } from './input-number.js';
 import { d as defineCustomElement$2 } from './input-text.js';
 import { d as defineCustomElement$1 } from './progress.js';
@@ -371,7 +372,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-color-picker-hex-input", "calcite-icon", "calcite-input-number", "calcite-input-text", "calcite-progress"];
+    const components = ["calcite-color-picker-hex-input", "calcite-icon", "calcite-input-message", "calcite-input-number", "calcite-input-text", "calcite-progress"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-color-picker-hex-input":
             if (!customElements.get(tagName)) {
@@ -379,6 +380,11 @@ function defineCustomElement() {
             }
             break;
         case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-input-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }