carbon-custom-elements/es/components/button/button.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/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAOxE;;GAEG;AACH,oBAAY,WAAW;IACrB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,WAAW;IACrB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,KAAK,UAAU;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;GAGG;AACH,cACM,QAAS,SAAQ,aAAsB;IAC3C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,eAAe,CAAS;IAEhC;;;OAGG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU;IAO5C;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,GAAG,EAAG,MAAM,CAAC;IAEb;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd,gBAAgB;IAIhB,MAAM;IAoDN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,QAAQ,CAAC","file":"button.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 { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './button.scss';\n\nconst { prefix } = settings;\n\n/**\n * Button kinds.\n */\nexport enum BUTTON_KIND {\n  /**\n   * Primary button.\n   */\n  PRIMARY = 'primary',\n\n  /**\n   * Secondary button.\n   */\n  SECONDARY = 'secondary',\n\n  /**\n   * Danger button.\n   */\n  DANGER = 'danger',\n\n  /**\n   * Ghost button.\n   */\n  GHOST = 'ghost',\n}\n\n/**\n * Button size.\n */\nexport enum BUTTON_SIZE {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Size for form field.\n   */\n  FIELD = 'field',\n}\n\n/**\n * Button.\n * @element bx-btn\n */\n@customElement(`${prefix}-btn`)\nclass BXButton extends FocusMixin(LitElement) {\n  /**\n   * `true` if there is an icon.\n   */\n  private _hasIcon = false;\n\n  /**\n   * `true` if there is a non-icon content.\n   */\n  private _hasMainContent = false;\n\n  /**\n   * Handles `click` event on the `<a>.\n   * @param event The event.\n   */\n  protected _handleClickLink(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault(); // Stop following the link\n      event.stopPropagation(); // Stop firing `onClick`\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange({ target }: Event) {\n    const { name } = target as HTMLSlotElement;\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .some(node => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim());\n    this[name === 'icon' ? '_hasIcon' : '_hasMainContent'] = hasContent;\n    this.requestUpdate();\n  }\n\n  /**\n   * `true` if the button should have input focus when the page loads.\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The default file name, used if this button is rendered as `<a>`.\n   */\n  @property()\n  download!: string;\n\n  /**\n   * Link `href`. If present, this button is rendered as `<a>`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The language of what `href` points to, if this button is rendered as `<a>`.\n   */\n  @property()\n  hreflang!: string;\n\n  /**\n   * Button kind.\n   */\n  @property({ reflect: true })\n  kind = BUTTON_KIND.PRIMARY;\n\n  /**\n   * URLs to ping, if this button is rendered as `<a>`.\n   */\n  @property()\n  ping!: string;\n\n  /**\n   * The link type, if this button is rendered as `<a>`.\n   */\n  @property()\n  rel!: string;\n\n  /**\n   * Button size.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.REGULAR;\n\n  /**\n   * The link target, if this button is rendered as `<a>`.\n   */\n  @property()\n  target!: string;\n\n  /**\n   * The default behavior if the button is rendered as `<button>`. MIME type of the `target`if this button is rendered as `<a>`.\n   */\n  @property()\n  type!: string;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  render() {\n    const {\n      autofocus,\n      disabled,\n      download,\n      href,\n      hreflang,\n      kind,\n      ping,\n      rel,\n      size,\n      target,\n      type,\n      _hasIcon: hasIcon,\n      _hasMainContent: hasMainContent,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--${kind}`]: kind,\n      [`${prefix}--btn--disabled`]: disabled,\n      [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,\n      [`${prefix}--btn--${size}`]: size,\n      [`${prefix}-ce--btn--has-icon`]: hasIcon,\n    });\n    return href\n      ? html`\n          <a\n            id=\"button\"\n            role=\"button\"\n            class=\"${classes}\"\n            download=\"${ifNonNull(download)}\"\n            href=\"${ifNonNull(href)}\"\n            hreflang=\"${ifNonNull(hreflang)}\"\n            ping=\"${ifNonNull(ping)}\"\n            rel=\"${ifNonNull(rel)}\"\n            target=\"${ifNonNull(target)}\"\n            type=\"${ifNonNull(type)}\"\n            @click=\"${this._handleClickLink}\"\n          >\n            <slot @slotchange=\"${handleSlotChange}\"></slot>\n            <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n          </a>\n        `\n      : html`\n          <button id=\"button\" class=\"${classes}\" ?autofocus=\"${autofocus}\" ?disabled=\"${disabled}\" type=\"${ifNonNull(type)}\">\n            <slot @slotchange=\"${handleSlotChange}\"></slot>\n            <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n          </button>\n        `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXButton;\n"]}