carbon-custom-elements/es/components/tile/radio-tile.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/tile/radio-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,cAAc,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAc/C;;;GAGG;AACH,cACM,WAAY,SAAQ,gBAAiC;IACzD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAqB;IAErC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAW;IAE/B;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAOtB;;OAEG;IAGH,OAAO,CAAC,cAAc,CAapB;IAEF;;OAEG;IACH,SAAS,CAAC,aAAa;IAOvB,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAO9B,OAAO,CAAC,iBAAiB,KAAA;CAK1B;AAED,eAAe,WAAW,CAAC","file":"radio-tile.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\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 settings from 'carbon-components/es/globals/js/settings';\nimport { customElement } from 'lit-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport RadioGroupManager, { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport SelectableTile from './selectable-tile';\n\nconst { prefix } = settings;\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 * Single-selectable tile.\n * @element bx-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass BXRadioTile extends HostListenerMixin(SelectableTile) {\n  /**\n   * The radio group manager associated with the radio button.\n   */\n  private _manager!: RadioGroupManager;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Attaches the radio button to the radio group manager.\n   */\n  private _attachManager() {\n    if (!this._manager) {\n      this._manager = RadioGroupManager.get(this.getRootNode({ composed: true }) as Document);\n    }\n    const { name, _inputNode: inputNode, _manager: manager } = this;\n    if (inputNode && name) {\n      manager!.add(inputNode);\n    }\n  }\n\n  /**\n   * Detaches the radio button to the radio group manager.\n   */\n  private _detachManager() {\n    const { _inputNode: inputNode, _manager: manager } = this;\n    if (inputNode && manager) {\n      manager.delete(inputNode);\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(manager.navigate(inputNode, navigationDirection));\n        event.preventDefault(); // Prevent default (scrolling) behavior\n      }\n      if (event.key === ' ' || event.key === 'Enter') {\n        manager.select(inputNode);\n      }\n    }\n  };\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    super._handleChange();\n    if (this._manager) {\n      this._manager.select(this._inputNode);\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._attachManager();\n  }\n\n  disconnectedCallback() {\n    this._detachManager();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('name')) {\n      this._detachManager();\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('name')) {\n      this._attachManager();\n    }\n  }\n}\n\nexport default BXRadioTile;\n"]}