{"version":3,"sources":["components/tile/selectable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAA6C,UAAU,EAAE,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3C;;;GAGG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IAEnD,SAAS,CAAC,UAAU,EAAG,gBAAgB,CAAC;IAExC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAc;IAElC;;OAEG;IACH,SAAS,CAAC,aAAa;IAIvB;;OAEG;IAEH,cAAc,EAAG,MAAM,CAAC;IAExB;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAOhB,MAAM;IA4BN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"selectable-tile.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2021\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 { classMap } from 'lit-html/directives/class-map';\nimport { html, svg, property, query, customElement, LitElement } from 'lit-element';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\n\nconst { prefix } = settings;\n\n/**\n * Multi-selectable tile.\n * @element bx-selectable-tile\n */\n@customElement(`${prefix}-selectable-tile`)\nclass BXSelectableTile extends FocusMixin(LitElement) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n  }\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus: Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537,\n    });\n  }\n\n  render() {\n    const { checkmarkLabel, colorScheme, name, selected, value, _inputType: inputType, _handleChange: handleChange } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        type=\"${inputType}\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        tabindex=\"-1\"\n        name=\"${ifNonNull(name)}\"\n        value=\"${ifNonNull(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div class=\"${prefix}--tile__checkmark\">\n          ${CheckmarkFilled16({\n            children: !checkmarkLabel ? undefined : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXSelectableTile;\n"]}