@carbon/web-components 2.0.0-beta.1 → 2.0.0-beta.2

package/es/components/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/slider/slider.ts"],"names":[],"mappings":"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","file":"slider.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport throttle from 'lodash-es/throttle';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport CDSSliderInput from './slider-input';\nimport styles from './slider.scss';\n\ninterface Cancelable {\n  cancel(): void;\n}\n\n/**\n * The direction to move the thumb, associated with key symbols.\n */\nconst THUMB_DIRECTION = {\n  Left: -1,\n  ArrowLeft: -1,\n  Up: -1,\n  ArrowUp: -1,\n  Right: 1,\n  ArrowRight: 1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Slider.\n *\n * @element cds-slider\n * @slot label-text - The label text.\n * @slot max-text - The text for maximum value.\n * @slot min-text - The text for minimum value.\n * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture.\n */\n@customElement(`${prefix}-slider`)\nclass CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {\n  /**\n   * The internal value of `max` property.\n   */\n  private _max = '100';\n\n  /**\n   * The internal value of `min` property.\n   */\n  private _min = '0';\n\n  /**\n   * The internal value of `step` property.\n   */\n  private _step = '1';\n\n  /**\n   * The internal value of `stepMultiplier` property.\n   */\n  private _stepMultiplier = '4';\n\n  /**\n   * The handle for the throttled listener of `pointermove` event.\n   */\n  private _throttledHandlePointermoveImpl:\n    | (((event: PointerEvent) => void) & Cancelable)\n    | null = null;\n\n  /**\n   * `true` if dragging of thumb is in progress.\n   */\n  private _dragging = false;\n\n  /**\n   * The rate of the thumb position in the track.\n   * When we try to set a new value, we adjust the value considering `step` property.\n   */\n  private get _rate() {\n    const { max, min, value } = this;\n    // Copes with out-of-range value coming programmatically or from `<cds-slider-input>`\n    return (\n      (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /\n      (Number(max) - Number(min))\n    );\n  }\n\n  private set _rate(rate: number) {\n    const { max, min, step } = this;\n    this.value =\n      Number(min) +\n      Math.round(\n        ((Number(max) - Number(min)) * Math.min(1, Math.max(0, rate))) /\n          Number(step)\n      ) *\n        Number(step);\n  }\n\n  /**\n   * The DOM element of the thumb.\n   */\n  @query('#thumb')\n  private _thumbNode!: HTMLDivElement;\n\n  /**\n   * The DOM element of the track.\n   */\n  @query('#track')\n  private _trackNode!: HTMLDivElement;\n\n  /**\n   * Handles `click` event on the `<label>` to focus on the thumb.\n   */\n  _handleClickLabel() {\n    this._thumbNode?.focus();\n  }\n\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, String(value));\n    }\n  }\n\n  /**\n   * Handles `keydown` event on the thumb to increase/decrease the value.\n   */\n  private _handleKeydown({ key, shiftKey }: KeyboardEvent) {\n    if (!this.disabled) {\n      if (key in THUMB_DIRECTION) {\n        const {\n          max: rawMax,\n          min: rawMin,\n          step: rawStep,\n          stepMultiplier: rawstepMultiplier,\n          value,\n        } = this;\n        const max = Number(rawMax);\n        const min = Number(rawMin);\n        const step = Number(rawStep);\n        const stepMultiplier = Number(rawstepMultiplier);\n        const diff =\n          (!shiftKey ? step : (max - min) / stepMultiplier) *\n          THUMB_DIRECTION[key];\n        const stepCount = (value + diff) / step;\n        // Snaps to next\n        this.value = Math.min(\n          max,\n          Math.max(\n            min,\n            (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step\n          )\n        );\n        this.dispatchEvent(\n          new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.value,\n              intermediate: false,\n            },\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * Handles `pointerdown` event on the thumb to start dragging.\n   */\n  private _startDrag() {\n    this._dragging = true;\n    this._thumbNode.style.touchAction = 'none';\n  }\n\n  /**\n   * Handles `pointerdown` event on the track to update the thumb position and the value as necessary.\n   */\n  private _handleClick(event: PointerEvent) {\n    if (!this.disabled) {\n      const { _trackNode: trackNode } = this;\n      const isRtl =\n        trackNode\n          .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n          .getPropertyValue('direction') === 'rtl';\n      const thumbPosition = event.clientX;\n      const { left: trackLeft, width: trackWidth } =\n        trackNode.getBoundingClientRect();\n      this._rate =\n        (isRtl\n          ? trackLeft + trackWidth - thumbPosition\n          : thumbPosition - trackLeft) / trackWidth;\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Handles `pointermove` to update the thumb position and the value as necessary.\n   *\n   * @param event The event.\n   */\n  @HostListener('document:pointermove')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handlePointermove = (event: PointerEvent) => {\n    const { disabled, _dragging: dragging } = this;\n    if (!disabled && dragging) {\n      this._throttledHandlePointermoveImpl!(event);\n    }\n  };\n\n  /**\n   * Updates thumb position and value upon user's `pointermove` gesture.\n   *\n   * @param event The event.\n   */\n  private _handlePointermoveImpl(event: PointerEvent) {\n    const { disabled, _dragging: dragging, _trackNode: trackNode } = this;\n    if (!disabled && dragging) {\n      const isRtl =\n        trackNode\n          .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n          .getPropertyValue('direction') === 'rtl';\n      const thumbPosition = event.clientX;\n      const { left: trackLeft, width: trackWidth } =\n        this._trackNode.getBoundingClientRect();\n      this._rate =\n        (isRtl\n          ? trackLeft + trackWidth - thumbPosition\n          : thumbPosition - trackLeft) / trackWidth;\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n            intermediate: true,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Handles `pointerup` and `pointerleave` event to finishing dragging.\n   */\n  private _endDrag = () => {\n    if (this._dragging) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n          },\n        })\n      );\n      this._dragging = false;\n      this._thumbNode.style.touchAction = '';\n    }\n  };\n\n  /**\n   * Handles `${prefix}-slider-input-changed` event to update the value.\n   */\n  @HostListener('eventChangeInput')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleChangeInput = ({ detail }: CustomEvent) => {\n    const { intermediate, value } = detail;\n    this.value = value;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n          intermediate,\n        },\n      })\n    );\n  };\n\n  /**\n   * `true` if the check box should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * \ttrue to specify if the control is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * \tWhether the slider should be read-only\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * The label associated with the maximum value.\n   */\n  @property({ attribute: 'max-label', reflect: true })\n  maxLabel = '';\n\n  /**\n   * The label associated with the minimum value.\n   */\n  @property({ attribute: 'min-label', reflect: true })\n  minLabel = '';\n\n  /**\n   * The formatter for the text for maximum value.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatMaxText = (max: string, maxLabel: string | undefined) =>\n    `${max}${maxLabel}`;\n\n  /**\n   * The formatter for the text for min/max value.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatMinText = (min: string, minLabel: string | undefined) =>\n    `${min}${minLabel}`;\n\n  /**\n   * The maximum value.\n   */\n  @property({ type: Number, reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const { max: oldMax } = this;\n    this._max = value;\n    this.requestUpdate('max', oldMax);\n  }\n\n  /**\n   * The minimum value.\n   */\n  @property({ type: Number, reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const { min: oldMin } = this;\n    this._min = value;\n    this.requestUpdate('min', oldMin);\n  }\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * true to specify if the control is invalid.\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * The snapping step of the value.\n   */\n  @property({ type: Number, reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const { step: oldStep } = this;\n    this._step = value;\n    this.requestUpdate('step', oldStep);\n  }\n\n  /**\n   * A value determining how much the value should increase/decrease by Shift+arrow keys,\n   * which will be `(max - min) / stepMultiplier`.\n   */\n  @property({ type: Number, reflect: true, attribute: 'step-multiplier' })\n  get stepMultiplier() {\n    return this._stepMultiplier.toString();\n  }\n\n  set stepMultiplier(value) {\n    const { stepMultiplier: oldstepMultiplier } = this;\n    this._stepMultiplier = value;\n    this.requestUpdate('stepMultiplier', oldstepMultiplier);\n  }\n\n  /**\n   * The value.\n   */\n  @property({ type: Number })\n  value;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this._throttledHandlePointermoveImpl) {\n      this._throttledHandlePointermoveImpl = throttle(\n        this._handlePointermoveImpl,\n        10\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._throttledHandlePointermoveImpl) {\n      this._throttledHandlePointermoveImpl.cancel();\n      this._throttledHandlePointermoveImpl = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    const input = this.querySelector(\n      (this.constructor as typeof CDSSlider).selectorInput\n    ) as CDSSliderInput;\n    if (changedProperties.has('disabled')) {\n      if (input) {\n        input.disabled = this.disabled;\n      }\n      if (this.disabled) {\n        this._dragging = false;\n      }\n    }\n    if (changedProperties.has('readonly')) {\n      if (input) {\n        input.readonly = this.readonly;\n      }\n      if (this.readonly) {\n        this._dragging = false;\n      }\n    }\n    if (input) {\n      ['max', 'min', 'step', 'value'].forEach((name) => {\n        if (changedProperties.has(name)) {\n          input[name] = this[name];\n        }\n      });\n\n      if (changedProperties.has('value') || changedProperties.has('invalid')) {\n        if (this.value < this.min || this.value > this.max || this.invalid) {\n          input.invalid = true;\n        } else {\n          input.invalid = false;\n        }\n      }\n    }\n    return true;\n  }\n\n  render() {\n    const {\n      disabled,\n      formatMaxText,\n      formatMinText,\n      labelText,\n      max,\n      min,\n      maxLabel,\n      minLabel,\n      value,\n      readonly,\n      _rate: rate,\n      _handleClickLabel: handleClickLabel,\n      _handleKeydown: handleKeydown,\n      _handleClick: handleClick,\n      _startDrag: startDrag,\n      _endDrag: endDrag,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const sliderClasses = classMap({\n      [`${prefix}--slider`]: true,\n      [`${prefix}--slider--disabled`]: disabled,\n      [`${prefix}--slider--readonly`]: readonly,\n    });\n    return html`\n      <label class=\"${labelClasses}\" @click=\"${handleClickLabel}\">\n        <slot name=\"label-text\">${labelText}</slot>\n      </label>\n      <div class=\"${prefix}--slider-container\">\n        <span class=\"${prefix}--slider__range-label\">\n          <slot name=\"min-text\">${formatMinText(min, minLabel)}</slot>\n        </span>\n        <div\n          @keydown=\"${handleKeydown}\"\n          @click=\"${handleClick}\"\n          @pointerup=\"${endDrag}\"\n          @pointerleave=\"${endDrag}\"\n          class=\"${sliderClasses}\"\n          tabindex=\"-1\"\n          role=\"presentation\">\n          <div\n            id=\"thumb\"\n            class=\"${prefix}--slider__thumb\"\n            role=\"slider\"\n            tabindex=\"${!readonly ? 0 : -1}\"\n            aria-valuemax=\"${max}\"\n            aria-valuemin=\"${min}\"\n            aria-valuenow=\"${value}\"\n            style=\"left: ${rate * 100}%\"\n            @pointerdown=\"${startDrag}\"></div>\n          <div id=\"track\" class=\"${prefix}--slider__track\"></div>\n          <div class=\"${prefix}-ce--slider__filled-track-container\">\n            <div\n              class=\"${prefix}--slider__filled-track\"\n              style=\"transform: translate(0%, -50%) scaleX(${rate})\"></div>\n          </div>\n        </div>\n        <span class=\"${prefix}--slider__range-label\">\n          <slot name=\"max-text\">${formatMaxText(max, maxLabel)}</slot>\n        </span>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the `<input>` box got entering the value directly.\n   */\n  static get selectorInput() {\n    return `${prefix}-slider-input`;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed by user gesture.\n   */\n  static get eventChange() {\n    return `${prefix}-slider-changed`;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed in `<cds-slider-input>` by user gesture.\n   */\n  static get eventChangeInput() {\n    return `${prefix}-slider-input-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSSlider;\n"]}
+{"version":3,"sources":["components/slider/slider.ts"],"names":[],"mappings":"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","file":"slider.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport throttle from 'lodash-es/throttle';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport CDSSliderInput from './slider-input';\nimport styles from './slider.scss';\n\ninterface Cancelable {\n  cancel(): void;\n}\n\n/**\n * The direction to move the thumb, associated with key symbols.\n */\nconst THUMB_DIRECTION = {\n  Left: -1,\n  ArrowLeft: -1,\n  Up: -1,\n  ArrowUp: -1,\n  Right: 1,\n  ArrowRight: 1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Slider.\n *\n * @element cds-slider\n * @slot label-text - The label text.\n * @slot max-text - The text for maximum value.\n * @slot min-text - The text for minimum value.\n * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture.\n */\n@customElement(`${prefix}-slider`)\nclass CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {\n  /**\n   * The internal value of `max` property.\n   */\n  private _max = '100';\n\n  /**\n   * The internal value of `min` property.\n   */\n  private _min = '0';\n\n  /**\n   * The internal value of `step` property.\n   */\n  private _step = '1';\n\n  /**\n   * The internal value of `stepMultiplier` property.\n   */\n  private _stepMultiplier = '4';\n\n  /**\n   * The handle for the throttled listener of `pointermove` event.\n   */\n  private _throttledHandlePointermoveImpl:\n    | (((event: PointerEvent) => void) & Cancelable)\n    | null = null;\n\n  /**\n   * `true` if dragging of thumb is in progress.\n   */\n  private _dragging = false;\n\n  /**\n   * The rate of the thumb position in the track.\n   * When we try to set a new value, we adjust the value considering `step` property.\n   */\n  private get _rate() {\n    const { max, min, value } = this;\n    // Copes with out-of-range value coming programmatically or from `<cds-slider-input>`\n    return (\n      (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /\n      (Number(max) - Number(min))\n    );\n  }\n\n  private set _rate(rate: number) {\n    const { max, min, step } = this;\n    this.value =\n      Number(min) +\n      Math.round(\n        ((Number(max) - Number(min)) * Math.min(1, Math.max(0, rate))) /\n          Number(step)\n      ) *\n        Number(step);\n  }\n\n  /**\n   * The DOM element of the thumb.\n   */\n  @query('#thumb')\n  private _thumbNode!: HTMLDivElement;\n\n  /**\n   * The DOM element of the track.\n   */\n  @query('#track')\n  private _trackNode!: HTMLDivElement;\n\n  /**\n   * Handles `click` event on the `<label>` to focus on the thumb.\n   */\n  _handleClickLabel() {\n    this._thumbNode?.focus();\n  }\n\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, String(value));\n    }\n  }\n\n  /**\n   * Handles `keydown` event on the thumb to increase/decrease the value.\n   */\n  private _handleKeydown({ key, shiftKey }: KeyboardEvent) {\n    if (!this.disabled) {\n      if (key in THUMB_DIRECTION) {\n        const {\n          max: rawMax,\n          min: rawMin,\n          step: rawStep,\n          stepMultiplier: rawstepMultiplier,\n          value,\n        } = this;\n        const max = Number(rawMax);\n        const min = Number(rawMin);\n        const step = Number(rawStep);\n        const stepMultiplier = Number(rawstepMultiplier);\n        const diff =\n          (!shiftKey ? step : (max - min) / stepMultiplier) *\n          THUMB_DIRECTION[key];\n        const stepCount = (value + diff) / step;\n        // Snaps to next\n        this.value = Math.min(\n          max,\n          Math.max(\n            min,\n            (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step\n          )\n        );\n        this.dispatchEvent(\n          new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.value,\n              intermediate: false,\n            },\n          })\n        );\n      }\n    }\n  }\n\n  /**\n   * Handles `pointerdown` event on the thumb to start dragging.\n   */\n  private _startDrag() {\n    this._dragging = true;\n    this._thumbNode.style.touchAction = 'none';\n  }\n\n  /**\n   * Handles `pointerdown` event on the track to update the thumb position and the value as necessary.\n   */\n  private _handleClick(event: PointerEvent) {\n    if (!this.disabled) {\n      const { _trackNode: trackNode } = this;\n      const isRtl =\n        trackNode\n          .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n          .getPropertyValue('direction') === 'rtl';\n      const thumbPosition = event.clientX;\n      const { left: trackLeft, width: trackWidth } =\n        trackNode.getBoundingClientRect();\n      this._rate =\n        (isRtl\n          ? trackLeft + trackWidth - thumbPosition\n          : thumbPosition - trackLeft) / trackWidth;\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Handles `pointermove` to update the thumb position and the value as necessary.\n   *\n   * @param event The event.\n   */\n  @HostListener('document:pointermove')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handlePointermove = (event: PointerEvent) => {\n    const { disabled, _dragging: dragging } = this;\n    if (!disabled && dragging) {\n      this._throttledHandlePointermoveImpl!(event);\n    }\n  };\n\n  /**\n   * Updates thumb position and value upon user's `pointermove` gesture.\n   *\n   * @param event The event.\n   */\n  private _handlePointermoveImpl(event: PointerEvent) {\n    const { disabled, _dragging: dragging, _trackNode: trackNode } = this;\n    if (!disabled && dragging) {\n      const isRtl =\n        trackNode\n          .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n          .getPropertyValue('direction') === 'rtl';\n      const thumbPosition = event.clientX;\n      const { left: trackLeft, width: trackWidth } =\n        this._trackNode.getBoundingClientRect();\n      this._rate =\n        (isRtl\n          ? trackLeft + trackWidth - thumbPosition\n          : thumbPosition - trackLeft) / trackWidth;\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n            intermediate: true,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Handles `pointerup` and `pointerleave` event to finishing dragging.\n   */\n  private _endDrag = () => {\n    if (this._dragging) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n          },\n        })\n      );\n      this._dragging = false;\n      this._thumbNode.style.touchAction = '';\n    }\n  };\n\n  /**\n   * Handles `${prefix}-slider-input-changed` event to update the value.\n   */\n  @HostListener('eventChangeInput')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleChangeInput = ({ detail }: CustomEvent) => {\n    const { intermediate, value } = detail;\n    this.value = value;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n          intermediate,\n        },\n      })\n    );\n  };\n\n  /**\n   * `true` if the check box should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * \ttrue to specify if the control is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * \tWhether the slider should be read-only\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * The label associated with the maximum value.\n   */\n  @property({ attribute: 'max-label', reflect: true })\n  maxLabel = '';\n\n  /**\n   * The label associated with the minimum value.\n   */\n  @property({ attribute: 'min-label', reflect: true })\n  minLabel = '';\n\n  /**\n   * The formatter for the text for maximum value.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatMaxText = (max: string, maxLabel: string | undefined) =>\n    `${max}${maxLabel}`;\n\n  /**\n   * The formatter for the text for min/max value.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatMinText = (min: string, minLabel: string | undefined) =>\n    `${min}${minLabel}`;\n\n  /**\n   * The maximum value.\n   */\n  @property({ type: Number, reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const { max: oldMax } = this;\n    this._max = value;\n    this.requestUpdate('max', oldMax);\n  }\n\n  /**\n   * The minimum value.\n   */\n  @property({ type: Number, reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const { min: oldMin } = this;\n    this._min = value;\n    this.requestUpdate('min', oldMin);\n  }\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * true to specify if the control is invalid.\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  /**\n   * The snapping step of the value.\n   */\n  @property({ type: Number, reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const { step: oldStep } = this;\n    this._step = value;\n    this.requestUpdate('step', oldStep);\n  }\n\n  /**\n   * A value determining how much the value should increase/decrease by Shift+arrow keys,\n   * which will be `(max - min) / stepMultiplier`.\n   */\n  @property({ type: Number, reflect: true, attribute: 'step-multiplier' })\n  get stepMultiplier() {\n    return this._stepMultiplier.toString();\n  }\n\n  set stepMultiplier(value) {\n    const { stepMultiplier: oldstepMultiplier } = this;\n    this._stepMultiplier = value;\n    this.requestUpdate('stepMultiplier', oldstepMultiplier);\n  }\n\n  /**\n   * The value.\n   */\n  @property({ type: Number })\n  value;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this._throttledHandlePointermoveImpl) {\n      this._throttledHandlePointermoveImpl = throttle(\n        this._handlePointermoveImpl,\n        10\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._throttledHandlePointermoveImpl) {\n      this._throttledHandlePointermoveImpl.cancel();\n      this._throttledHandlePointermoveImpl = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    const input = this.querySelector(\n      (this.constructor as typeof CDSSlider).selectorInput\n    ) as CDSSliderInput;\n    if (changedProperties.has('disabled')) {\n      if (input) {\n        input.disabled = this.disabled;\n      }\n      if (this.disabled) {\n        this._dragging = false;\n      }\n    }\n    if (changedProperties.has('readonly')) {\n      if (input) {\n        input.readonly = this.readonly;\n      }\n      if (this.readonly) {\n        this._dragging = false;\n      }\n    }\n    if (input) {\n      ['max', 'min', 'step', 'value'].forEach((name) => {\n        if (changedProperties.has(name)) {\n          input[name] = this[name];\n        }\n      });\n\n      if (changedProperties.has('value') || changedProperties.has('invalid')) {\n        if (this.value < this.min || this.value > this.max || this.invalid) {\n          input.invalid = true;\n        } else {\n          input.invalid = false;\n        }\n      }\n    }\n    return true;\n  }\n\n  render() {\n    const {\n      disabled,\n      formatMaxText,\n      formatMinText,\n      labelText,\n      max,\n      min,\n      maxLabel,\n      minLabel,\n      value,\n      readonly,\n      _rate: rate,\n      _handleClickLabel: handleClickLabel,\n      _handleKeydown: handleKeydown,\n      _handleClick: handleClick,\n      _startDrag: startDrag,\n      _endDrag: endDrag,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const sliderClasses = classMap({\n      [`${prefix}--slider`]: true,\n      [`${prefix}--slider--disabled`]: disabled,\n      [`${prefix}--slider--readonly`]: readonly,\n    });\n    return html`\n      <label class=\"${labelClasses}\" @click=\"${handleClickLabel}\">\n        <slot name=\"label-text\">${labelText}</slot>\n      </label>\n      <div class=\"${prefix}--slider-container\">\n        <span class=\"${prefix}--slider__range-label\">\n          <slot name=\"min-text\">${formatMinText(min, minLabel)}</slot>\n        </span>\n        <div\n          @keydown=\"${handleKeydown}\"\n          @click=\"${handleClick}\"\n          @pointerup=\"${endDrag}\"\n          @pointerleave=\"${endDrag}\"\n          class=\"${sliderClasses}\"\n          tabindex=\"-1\"\n          role=\"presentation\">\n          <div\n            id=\"thumb\"\n            class=\"${prefix}--slider__thumb\"\n            role=\"slider\"\n            tabindex=\"${!readonly ? 0 : -1}\"\n            aria-valuemax=\"${max}\"\n            aria-valuemin=\"${min}\"\n            aria-valuenow=\"${value}\"\n            style=\"left: ${rate * 100}%\"\n            @pointerdown=\"${startDrag}\"></div>\n          <div id=\"track\" class=\"${prefix}--slider__track\"></div>\n          <div class=\"${prefix}-ce--slider__filled-track-container\">\n            <div\n              class=\"${prefix}--slider__filled-track\"\n              style=\"transform: translate(0%, -50%) scaleX(${rate})\"></div>\n          </div>\n        </div>\n        <span class=\"${prefix}--slider__range-label\">\n          <slot name=\"max-text\">${formatMaxText(max, maxLabel)}</slot>\n        </span>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the `<input>` box got entering the value directly.\n   */\n  static get selectorInput() {\n    return `${prefix}-slider-input`;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed by user gesture.\n   */\n  static get eventChange() {\n    return `${prefix}-slider-changed`;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed in `<cds-slider-input>` by user gesture.\n   */\n  static get eventChangeInput() {\n    return `${prefix}-slider-input-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSSlider;\n"]}

package/es/components/structured-list/structured-list-row.d.ts

@@ -9,6 +9,9 @@
 import { LitElement } from 'lit';
 declare const BXStructuredListRow_base: {
     new (...args: any[]): {
+        /**
+         * Map of navigation direction by key.
+         */
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
         disconnectedCallback(): void;

package/es/components/structured-list/structured-list-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/structured-list/structured-list-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEvC;;;;GAIG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkC;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAkD;IAE9E;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IAGH,OAAO,CAAC,YAAY,CAQlB;IAEF;;OAEG;IAGH,OAAO,CAAC,cAAc,CAcpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,aAAa,SAAM;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,kBAAkB,SAAM;IAExB,iBAAiB;IAgBjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,KAAA;IAuBzB,MAAM;IA0BN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"structured-list-row.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n  NAVIGATION_DIRECTION,\n  ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport styles from './structured-list.scss';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for structured list row.\n */\nclass StructuredListRowRadioButtonDelegate\n  implements ManagedRadioButtonDelegate\n{\n  /**\n   * The structured list row to target.\n   */\n  private _row: BXStructuredListRow;\n\n  constructor(row: BXStructuredListRow) {\n    this._row = row;\n  }\n\n  get checked() {\n    return this._row.selected;\n  }\n\n  set checked(checked) {\n    this._row.selected = checked;\n    this._row.tabIndex = checked ? 0 : -1;\n  }\n\n  get tabIndex() {\n    return this._row.tabIndex;\n  }\n\n  set tabIndex(tabIndex) {\n    this._row.tabIndex = tabIndex;\n  }\n\n  get name() {\n    return this._row.selectionName;\n  }\n\n  compareDocumentPosition(other: StructuredListRowRadioButtonDelegate) {\n    return this._row.compareDocumentPosition(other._row);\n  }\n\n  focus() {\n    this._row.focus();\n  }\n}\n\n/**\n * Structured list row.\n *\n * @element cds-structured-list-row\n */\n@customElement(`${prefix}-structured-list-row`)\nclass BXStructuredListRow extends HostListenerMixin(LitElement) {\n  /**\n   * The radio group manager associated with the radio button.\n   */\n  private _manager: RadioGroupManager | null = null;\n\n  /**\n   * The interface for `RadioGroupManager` for structured list row.\n   */\n  private _radioButtonDelegate = new StructuredListRowRadioButtonDelegate(this);\n\n  /**\n   * The hidden radio button.\n   */\n  @query('#input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    const { _inputNode: inputNode } = this;\n    if (inputNode) {\n      this.selected = true;\n      if (this._manager) {\n        this._manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { _inputNode: inputNode } = this;\n    const manager = this._manager;\n    if (inputNode && manager) {\n      const navigationDirection = navigationDirectionForKey[event.key];\n      if (navigationDirection) {\n        manager.select(\n          manager.navigate(this._radioButtonDelegate, navigationDirection)\n        );\n      }\n      if (event.key === ' ' || event.key === 'Enter') {\n        manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * `true` if this structured list row should be selectable and selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list row will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * The `value` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-value' })\n  selectionValue = '';\n\n  /**\n   * The content to put into the `<title>` attribute of the selection icon.\n   */\n  @property({ attribute: 'selection-icon-title' })\n  selectionIconTitle = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'row');\n    }\n    super.connectedCallback();\n    if (!this._manager) {\n      this._manager = RadioGroupManager.get(\n        this.getRootNode({ composed: true }) as Document\n      );\n      const { selectionName } = this;\n      if (selectionName) {\n        this._manager?.add(this._radioButtonDelegate);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._manager) {\n      this._manager.delete(this._radioButtonDelegate);\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { _manager: manager, selectionName } = this;\n    if (changedProperties.has('selectionName')) {\n      if (manager) {\n        manager.delete(\n          this._radioButtonDelegate,\n          changedProperties.get('selectionName')\n        );\n        if (selectionName) {\n          manager.add(this._radioButtonDelegate);\n        }\n      }\n      this.setAttribute(\n        'tabindex',\n        !selectionName ||\n          !manager ||\n          !manager.shouldBeFocusable(this._radioButtonDelegate)\n          ? '-1'\n          : '0'\n      );\n    }\n  }\n\n  render() {\n    const { selected, selectionName, selectionValue, selectionIconTitle } =\n      this;\n    if (selectionName) {\n      // \"Selected\" style with `.${prefix}--structured-list-td` does not work somehow - Need investigation\n      return html`\n        <slot></slot>\n        <input\n          id=\"input\"\n          type=\"radio\"\n          class=\"${prefix}--structured-list-input ${prefix}--visually-hidden\"\n          .checked=${selected}\n          name=${selectionName}\n          value=${ifDefined(selectionValue)} />\n        <div\n          class=\"${prefix}--structured-list-td ${prefix}--structured-list-cell\">\n          ${CheckmarkFilled16({\n            class: `${prefix}--structured-list-svg`,\n            title: selectionIconTitle,\n          })}\n        </div>\n      `;\n    }\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXStructuredListRow;\n"]}
+{"version":3,"sources":["components/structured-list/structured-list-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;QAavC;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDH;;;;GAIG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAkC;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAkD;IAE9E;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IAGH,OAAO,CAAC,YAAY,CAQlB;IAEF;;OAEG;IAGH,OAAO,CAAC,cAAc,CAcpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,aAAa,SAAM;IAEnB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,kBAAkB,SAAM;IAExB,iBAAiB;IAgBjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,KAAA;IAuBzB,MAAM;IA0BN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"structured-list-row.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, {\n  NAVIGATION_DIRECTION,\n  ManagedRadioButtonDelegate,\n} from '../../globals/internal/radio-group-manager';\nimport styles from './structured-list.scss';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * The interface for `RadioGroupManager` for structured list row.\n */\nclass StructuredListRowRadioButtonDelegate\n  implements ManagedRadioButtonDelegate\n{\n  /**\n   * The structured list row to target.\n   */\n  private _row: BXStructuredListRow;\n\n  constructor(row: BXStructuredListRow) {\n    this._row = row;\n  }\n\n  get checked() {\n    return this._row.selected;\n  }\n\n  set checked(checked) {\n    this._row.selected = checked;\n    this._row.tabIndex = checked ? 0 : -1;\n  }\n\n  get tabIndex() {\n    return this._row.tabIndex;\n  }\n\n  set tabIndex(tabIndex) {\n    this._row.tabIndex = tabIndex;\n  }\n\n  get name() {\n    return this._row.selectionName;\n  }\n\n  compareDocumentPosition(other: StructuredListRowRadioButtonDelegate) {\n    return this._row.compareDocumentPosition(other._row);\n  }\n\n  focus() {\n    this._row.focus();\n  }\n}\n\n/**\n * Structured list row.\n *\n * @element cds-structured-list-row\n */\n@customElement(`${prefix}-structured-list-row`)\nclass BXStructuredListRow extends HostListenerMixin(LitElement) {\n  /**\n   * The radio group manager associated with the radio button.\n   */\n  private _manager: RadioGroupManager | null = null;\n\n  /**\n   * The interface for `RadioGroupManager` for structured list row.\n   */\n  private _radioButtonDelegate = new StructuredListRowRadioButtonDelegate(this);\n\n  /**\n   * The hidden radio button.\n   */\n  @query('#input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    const { _inputNode: inputNode } = this;\n    if (inputNode) {\n      this.selected = true;\n      if (this._manager) {\n        this._manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { _inputNode: inputNode } = this;\n    const manager = this._manager;\n    if (inputNode && manager) {\n      const navigationDirection = navigationDirectionForKey[event.key];\n      if (navigationDirection) {\n        manager.select(\n          manager.navigate(this._radioButtonDelegate, navigationDirection)\n        );\n      }\n      if (event.key === ' ' || event.key === 'Enter') {\n        manager.select(this._radioButtonDelegate);\n      }\n    }\n  };\n\n  /**\n   * `true` if this structured list row should be selectable and selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   * If present, this structured list row will be a selectable one.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  /**\n   * The `value` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-value' })\n  selectionValue = '';\n\n  /**\n   * The content to put into the `<title>` attribute of the selection icon.\n   */\n  @property({ attribute: 'selection-icon-title' })\n  selectionIconTitle = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'row');\n    }\n    super.connectedCallback();\n    if (!this._manager) {\n      this._manager = RadioGroupManager.get(\n        this.getRootNode({ composed: true }) as Document\n      );\n      const { selectionName } = this;\n      if (selectionName) {\n        this._manager?.add(this._radioButtonDelegate);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._manager) {\n      this._manager.delete(this._radioButtonDelegate);\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { _manager: manager, selectionName } = this;\n    if (changedProperties.has('selectionName')) {\n      if (manager) {\n        manager.delete(\n          this._radioButtonDelegate,\n          changedProperties.get('selectionName')\n        );\n        if (selectionName) {\n          manager.add(this._radioButtonDelegate);\n        }\n      }\n      this.setAttribute(\n        'tabindex',\n        !selectionName ||\n          !manager ||\n          !manager.shouldBeFocusable(this._radioButtonDelegate)\n          ? '-1'\n          : '0'\n      );\n    }\n  }\n\n  render() {\n    const { selected, selectionName, selectionValue, selectionIconTitle } =\n      this;\n    if (selectionName) {\n      // \"Selected\" style with `.${prefix}--structured-list-td` does not work somehow - Need investigation\n      return html`\n        <slot></slot>\n        <input\n          id=\"input\"\n          type=\"radio\"\n          class=\"${prefix}--structured-list-input ${prefix}--visually-hidden\"\n          .checked=${selected}\n          name=${selectionName}\n          value=${ifDefined(selectionValue)} />\n        <div\n          class=\"${prefix}--structured-list-td ${prefix}--structured-list-cell\">\n          ${CheckmarkFilled16({\n            class: `${prefix}--structured-list-svg`,\n            title: selectionIconTitle,\n          })}\n        </div>\n      `;\n    }\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXStructuredListRow;\n"]}

package/es/components/tile/expandable-tile.d.ts

@@ -319,7 +319,9 @@ declare const BXExpandableTile_base: {
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined;
+                options?: boolean | AddEventListenerOptions | undefined; /**
+                 * The color scheme.
+                 */
             };
         };
     };

package/es/components/tile/expandable-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/expandable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI3C;;;;;;;;GAQG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IACtE;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;;OAIG;IACH,OAAO,CAAC,oCAAoC;IAiB5C,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,YAAY,CAIlB;IAEF;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB,MAAM;IAqCN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"expandable-tile.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof BXExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXExpandableTile;\n"]}
+{"version":3,"sources":["components/tile/expandable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yEAwEzC;;mBAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtEL;;;;;;;;GAQG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IACtE;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;;OAIG;IACH,OAAO,CAAC,oCAAoC;IAiB5C,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,YAAY,CAIlB;IAEF;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB,MAAM;IAqCN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"expandable-tile.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof BXExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXExpandableTile;\n"]}

package/es/components/ui-shell/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvD;;;;GAIG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAazB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAY9C;;OAEG;IAGH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IAGH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IAkDzB,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"side-nav.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"]}
+{"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvD;;;;GAIG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAazB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAY9C;;OAEG;IAGH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IAGH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IAkDzB,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"side-nav.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"]}

package/es/components/ui-shell/side-nav.js

@@ -14,7 +14,7 @@ let _ = t => t,
 
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../globals/mixins/on';
 import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';

package/es/components/ui-shell/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","BXSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","_handleMouseover","_handleMouseout","reflect","attribute","RESPONSIVE","type","Boolean","REGULAR","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","collapseMode","usageMode","FIXED","RAIL","HEADER_NAV","console","warn","doc","getRootNode","selectorButtonToggle","render","_t","_","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","BXSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","_handleMouseover","_handleMouseout","reflect","attribute","RESPONSIVE","type","Boolean","REGULAR","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","collapseMode","usageMode","FIXED","RAIL","HEADER_NAV","console","warn","doc","getRootNode","selectorButtonToggle","render","_t","_","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"],"mappings":"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"}

package/es/components-react/file-uploader/demo-file-uploader.d.ts

@@ -12,28 +12,52 @@ export interface ComponentProps {
    * The file types the file input should accept, separated by space.
    */
   accept?: string;
+  /**
+   * `true` if the drop container should be disabled.
+   */
+  button?: boolean;
+  /**
+   * Button kind.
+   */
+  buttonKind?: string;
+  /**
+   * Button label.
+   */
+  buttonLabel?: string;
   /**
    * `true` if the drop container should be disabled.
    */
   disabled?: boolean;
   /**
-   * The helper text.
+   * Icon description.
    */
-  helperText?: string;
+  iconDescription?: string;
   /**
-   * The label text.
+   * The input name.
    */
-  labelText?: string;
+  inputName?: string;
+  /**
+   * The label description text.
+   */
+  labelDescription?: string;
+  /**
+   * The label title.
+   */
+  labelTitle?: string;
   /**
    * `true` if the drop container should accept more than one files at once.
    * Note that even with `false` set here, user _can_ select multiple files one by one.
    */
   multiple?: boolean;
   /**
-   * The size of the file uploader items.
+   * The size of the button item.
    */
   size?: string;
+  /**
+   * The state of this file uploader item.
+   */
+  inputState?: string;
   [prop: string]: unknown;
 }
-declare class BXCEDemoFileUploader extends Component<ComponentProps> {}
-export default BXCEDemoFileUploader;
+declare class CDSCEDemoFileUploader extends Component<ComponentProps> {}
+export default CDSCEDemoFileUploader;

package/es/components-react/file-uploader/demo-file-uploader.js

@@ -15,27 +15,51 @@ import settings from 'carbon-components/es/globals/js/settings.js';
 var prefix = settings.prefix;
 export var descriptor = {
   accept: {},
+  button: {
+    serialize: booleanSerializer,
+  },
+  buttonKind: {
+    attribute: 'button-kind',
+  },
+  buttonLabel: {
+    attribute: 'button-label',
+  },
   disabled: {
     serialize: booleanSerializer,
   },
-  helperText: {
-    attribute: 'helper-text',
+  iconDescription: {
+    attribute: 'icon-description',
   },
-  labelText: {
-    attribute: 'label-text',
+  inputName: {
+    attribute: 'input-name',
+  },
+  labelDescription: {
+    attribute: 'label-description',
+  },
+  labelTitle: {
+    attribute: 'label-title',
   },
   multiple: {
     serialize: booleanSerializer,
   },
   size: {},
+  inputState: {
+    attribute: 'input-state',
+  },
 };
 export var propTypes = {
   accept: PropTypes.string,
+  button: PropTypes.bool,
+  buttonKind: PropTypes.string,
+  buttonLabel: PropTypes.string,
   disabled: PropTypes.bool,
-  helperText: PropTypes.string,
-  labelText: PropTypes.string,
+  iconDescription: PropTypes.string,
+  inputName: PropTypes.string,
+  labelDescription: PropTypes.string,
+  labelTitle: PropTypes.string,
   multiple: PropTypes.bool,
   size: PropTypes.string,
+  inputState: PropTypes.string,
 };
 const Component = createReactCustomElementType(
   ''.concat(prefix, '-ce-demo-file-uploader'),

package/es/components-react/file-uploader/file-uploader-button.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+export interface ComponentProps {
+  /**
+   * The event handler for the custom event fired when there is a user gesture to select files to upload.
+   */
+  onChange?: (event: CustomEvent) => void;
+  [prop: string]: unknown;
+}
+/*[object Object]*/
+declare class CDSFileUploaderButton extends Component<ComponentProps> {}
+export default CDSFileUploaderButton;

package/es/components-react/file-uploader/file-uploader-button.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums.js';
+export { default as CustomElement } from '../../components/file-uploader/file-uploader-button.js';
+import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings.js';
+var prefix = settings.prefix;
+export var descriptor = {
+  onChange: {
+    event: ''.concat(prefix, '-file-uploader-button-changed'),
+  },
+};
+export var propTypes = {
+  onChange: PropTypes.func,
+};
+const Component = createReactCustomElementType(
+  ''.concat(prefix, '-file-uploader-button'),
+  descriptor
+);
+Component.propTypes = propTypes;
+export default Component;

package/es/components-react/file-uploader/file-uploader-drop-container.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+export interface ComponentProps {
+  /**
+   * The event handler for the custom event fired when there is a user gesture to select files to upload.
+   */
+  onChange?: (event: CustomEvent) => void;
+  [prop: string]: unknown;
+}
+/*[object Object]*/
+declare class CDSFileUploaderDropContainer extends Component<ComponentProps> {}
+export default CDSFileUploaderDropContainer;

package/es/components-react/file-uploader/file-uploader-drop-container.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums.js';
+export { default as CustomElement } from '../../components/file-uploader/file-uploader-drop-container.js';
+import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings.js';
+var prefix = settings.prefix;
+export var descriptor = {
+  onChange: {
+    event: ''.concat(prefix, '-file-uploader-drop-container-changed'),
+  },
+};
+export var propTypes = {
+  onChange: PropTypes.func,
+};
+const Component = createReactCustomElementType(
+  ''.concat(prefix, '-file-uploader-drop-container'),
+  descriptor
+);
+Component.propTypes = propTypes;
+export default Component;

package/es/components-react/file-uploader/file-uploader-item.d.ts

@@ -20,5 +20,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXFileUploaderItem extends Component<ComponentProps> {}
-export default BXFileUploaderItem;
+declare class CDSFileUploaderItem extends Component<ComponentProps> {}
+export default CDSFileUploaderItem;

package/es/components-react/file-uploader/file-uploader-skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+export interface ComponentProps {
+  [prop: string]: unknown;
+}
+/*[object Object]*/
+declare class CDSFileUploaderSkeleton extends Component<ComponentProps> {}
+export default CDSFileUploaderSkeleton;

package/es/components-react/file-uploader/file-uploader-skeleton.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as CustomElement } from '../../components/file-uploader/file-uploader-skeleton.js';
+import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings.js';
+var prefix = settings.prefix;
+export var descriptor = {};
+export var propTypes = {};
+const Component = createReactCustomElementType(
+  ''.concat(prefix, '-file-uploader-skeleton'),
+  descriptor
+);
+Component.propTypes = propTypes;
+export default Component;

package/es/components-react/file-uploader/file-uploader.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXFileUploader extends Component<ComponentProps> {}
-export default BXFileUploader;
+declare class CDSFileUploader extends Component<ComponentProps> {}
+export default CDSFileUploader;

package/es/components-react/progress-bar/defs.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from '../../components/progress-bar/defs.js';