@carbon/web-components 2.0.0-rc.1 → 2.0.0-rc.3

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,iBAAkB,SAAQ,sBAAyC;IACvE;;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,iBAAiB,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.js';\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 CDSExpandableTile 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 CDSExpandableTile;\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 CDSExpandableTile;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3C;;;;;;;;GAQG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;IACvE;;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,iBAAiB,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 } 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.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\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 CDSExpandableTile 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 CDSExpandableTile;\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 CDSExpandableTile;\n"]}

package/es/components/tile/expandable-tile.js

@@ -12,7 +12,7 @@ let _ = t => t,
  */
 
 import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import ChevronDown16 from "../../icons/chevron--down/16";
 import { prefix } from '../../globals/settings';
@@ -22,6 +22,7 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from "././tile.css.js";
 import { classMap } from 'lit/directives/class-map.js';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Expandable tile.

package/es/components/tile/expandable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-tile.js","names":["LitElement","html","property","customElement","ifDefined","ChevronDown16","prefix","HostListener","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","classMap","CDSExpandableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","target","assignedNodes","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","requestUpdate","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","Boolean","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","undefined","static"],"sources":["components/tile/expandable-tile.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.js';\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 CDSExpandableTile 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 CDSExpandableTile;\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 CDSExpandableTile;\n"],"mappings":"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"}
+{"version":3,"file":"expandable-tile.js","names":["LitElement","html","property","ifDefined","ChevronDown16","prefix","HostListener","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","classMap","carbonElement","customElement","CDSExpandableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","target","assignedNodes","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","requestUpdate","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","Boolean","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","undefined","static"],"sources":["components/tile/expandable-tile.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 } 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.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\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 CDSExpandableTile 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 CDSExpandableTile;\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 CDSExpandableTile;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/radio-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C;;;;GAIG;AACH,cACM,YAAa,SAAQ,cAAc;IACvC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAW;IAE/B;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB,MAAM;IAuCN;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;CACF;AAED,eAAe,YAAY,CAAC","file":"radio-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 { html, svg } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(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\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"]}
+{"version":3,"sources":["components/tile/radio-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAI/C;;;;GAIG;AACH,cACM,YAAa,SAAQ,cAAc;IACvC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAW;IAE/B;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB,MAAM;IAuCN;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;CACF;AAED,eAAe,YAAY,CAAC","file":"radio-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 { html, svg } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(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\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"]}

package/es/components/tile/radio-tile.js

@@ -14,20 +14,16 @@ let _ = t => t,
 import { html, svg } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import SelectableTile from './selectable-tile';
 import CheckmarkFilled16 from "../../icons/checkmark--filled/16";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Single-selectable tile.
  *
  * @element cds-radio-tile
- */ /**
-     * Single-selectable tile.
-     *
-     * @element cds-radio-tile
-     */
+ */
 let CDSRadioTile = _decorate([customElement(`${prefix}-radio-tile`)], function (_initialize, _SelectableTile) {
   class CDSRadioTile extends _SelectableTile {
     constructor(...args) {

package/es/components/tile/radio-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-tile.js","names":["html","svg","classMap","ifDefined","customElement","prefix","SelectableTile","CheckmarkFilled16","CDSRadioTile","_decorate","_initialize","_SelectableTile","constructor","args","F","d","kind","key","value","_handleChange","selected","name","eventRadioChange","dispatchEvent","CustomEvent","bubbles","composed","detail","render","colorScheme","checkmarkLabel","_inputType","inputType","handleChange","classes","_t","_","children","undefined","_t2","static"],"sources":["components/tile/radio-tile.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 { html, svg } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(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\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"],"mappings":"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"}
+{"version":3,"file":"radio-tile.js","names":["html","svg","classMap","ifDefined","prefix","SelectableTile","CheckmarkFilled16","carbonElement","customElement","CDSRadioTile","_decorate","_initialize","_SelectableTile","constructor","args","F","d","kind","key","value","_handleChange","selected","name","eventRadioChange","dispatchEvent","CustomEvent","bubbles","composed","detail","render","colorScheme","checkmarkLabel","_inputType","inputType","handleChange","classes","_t","_","children","undefined","_t2","static"],"sources":["components/tile/radio-tile.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 { html, svg } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Single-selectable tile.\n *\n * @element cds-radio-tile\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'radio';\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(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\n              ? undefined\n              : svg`<title>${checkmarkLabel}</title>`,\n          })}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/selectable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAQ5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI3C;;;;;GAKG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;IAEvE,SAAS,CAAC,UAAU,EAAG,gBAAgB,CAAC;IAExC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAc;IAElC;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAgBrB;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAMpB;IAEF;;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,MAAM;IAmCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"selectable-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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html, svg } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\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 HostListener from '../../globals/decorators/host-listener';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(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    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\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 { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\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  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"]}
+{"version":3,"sources":["components/tile/selectable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAQ5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yEAgFzC;;mBAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7EL;;;;;GAKG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;IAEvE,SAAS,CAAC,UAAU,EAAG,gBAAgB,CAAC;IAExC;;OAEG;IACH,SAAS,CAAC,UAAU,SAAc;IAElC;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAgBrB;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAMpB;IAEF;;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,MAAM;IAmCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"selectable-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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html, svg } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\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 HostListener from '../../globals/decorators/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(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    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\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 { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\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  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"]}

package/es/components/tile/selectable-tile.js

@@ -16,7 +16,7 @@ let _ = t => t,
 
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html, svg } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import Checkbox16 from "../../icons/checkbox/16";
 import CheckboxCheckedFilled16 from "../../icons/checkbox--checked--filled/16";
@@ -26,6 +26,7 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from "././tile.css.js";
 import HostListener from '../../globals/decorators/host-listener';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Multi-selectable tile.

package/es/components/tile/selectable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable-tile.js","names":["classMap","LitElement","html","svg","property","customElement","query","ifDefined","Checkbox16","CheckboxCheckedFilled16","prefix","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","HostListener","CDSSelectableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","undefined","_t2","_t3","event","attribute","reflect","REGULAR","type","Boolean","render","colorScheme","name","_inputType","inputType","handleChange","classes","_t4","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/tile/selectable-tile.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html, svg } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\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 HostListener from '../../globals/decorators/host-listener';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(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    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\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 { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\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  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":"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"}
+{"version":3,"file":"selectable-tile.js","names":["classMap","LitElement","html","svg","property","query","ifDefined","Checkbox16","CheckboxCheckedFilled16","prefix","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","HostListener","carbonElement","customElement","CDSSelectableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","undefined","_t2","_t3","event","attribute","reflect","REGULAR","type","Boolean","render","colorScheme","name","_inputType","inputType","handleChange","classes","_t4","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/tile/selectable-tile.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html, svg } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\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 HostListener from '../../globals/decorators/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(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    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return html` ${selected\n      ? CheckboxCheckedFilled16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })\n      : Checkbox16({\n          children: !checkmarkLabel\n            ? undefined\n            : svg`<title>${checkmarkLabel}</title>`,\n        })}`;\n  }\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\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 { key } = event;\n\n    if (key === ' ' || key === 'Enter') {\n      this.selected = !this.selected;\n    }\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  render() {\n    const {\n      colorScheme,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\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=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${handleChange} />\n      <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n        <div\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </div>\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":"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"}

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

@@ -365,7 +365,7 @@ declare class CDSTileGroup extends CDSTileGroup_base {
     /**
      * Provide an optional className to be applied to the component
      */
-    className: any;
+    fieldsetClassName: any;
     /**
      * Specify whether the group is disabled
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/tile-group.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBvC;;;;GAIG;AACH,cACM,YAAa,SAAQ,iBAA6B;IACtD,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,sBAAsB;IA0B9B;;;;OAIG;IAGH,OAAO,CAAC,iBAAiB;IAQzB;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAwB3B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IA2BhC;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAwBpB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,YAAY,CAgBlB;IAEF;;OAEG;IAEH,SAAS,MAAC;IAEV;;OAEG;IAEH,QAAQ,MAAC;IAGT,qBAAqB,MAAC;IAGtB,iBAAiB,MAAa;IAG9B,UAAU,MAAC;IAGX,eAAe,MAAC;IAEhB,YAAY;IAuBZ,MAAM;IAUN;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED;;OAEG;IACH,MAAM,KAAK,8BAA8B,WAExC;IAED;;OAEG;IACH,MAAM,KAAK,oCAAoC,WAE9C;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"tile-group.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 { customElement, property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.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 * Tile group.\n *\n * @element cds-tile-group\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n  private _handleRadioClick(event) {\n    const { target } = event;\n    const { currentRadioSelection } = this;\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentRadioSelection) {\n      this.currentRadioSelection = target;\n    } else if (currentRadioSelection !== target) {\n      currentRadioSelection.toggleAttribute('selected');\n      this.currentRadioSelection = target;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          target,\n        },\n      })\n    );\n  }\n\n  private _handleSelectableClick(event) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentSelections.includes(target)) {\n      currentSelections.push(target);\n    } else {\n      currentSelections.splice(currentSelections.indexOf(target), 1);\n    }\n    (target as HTMLElement).toggleAttribute('selected');\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentSelectableTilesSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          currentSelections,\n        },\n      })\n    );\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * Click listener to ensure selectability.\n   *\n   * @param event click\n   */\n  @HostListener('click')\n  // @ts-ignore\n  private _handleTileSelect(event: Event) {\n    if (this.radioTiles.length) {\n      this._handleRadioClick(event);\n    } else {\n      this._handleSelectableClick(event);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation for radio tiles\n   *\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownRadio(nextSibling) {\n    const { currentRadioSelection } = this;\n\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (currentRadioSelection) {\n      currentRadioSelection.toggleAttribute('selected');\n    }\n    nextSibling.focus();\n    nextSibling.toggleAttribute('selected');\n    this.currentRadioSelection = nextSibling;\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          nextSibling,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard navigation for selectable tiles\n   *\n   * @param event to get target\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownSelectable(event, nextSibling?) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (nextSibling) {\n      nextSibling.focus();\n    } else {\n      if (!currentSelections.includes(target)) {\n        currentSelections.push(target);\n      } else {\n        currentSelections.splice(currentSelections.indexOf(target), 1);\n      }\n\n      this.dispatchEvent(\n        new CustomEvent(eventCurrentSelectableTilesSelection, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            currentSelections,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Keyboard listener to ensure keyboard navigation.\n   *\n   * @param event to get key pressed\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 { target, key } = event;\n    const { radioTiles, selectableTiles } = this;\n    const navigationDirection = navigationDirectionForKey[key];\n\n    let tiles = radioTiles.length ? radioTiles : selectableTiles;\n    const currentIndex = [...tiles].findIndex((e) => e == target);\n    const nextIndex = currentIndex + navigationDirection;\n    const nextSibling =\n      nextIndex !== -1\n        ? tiles[nextIndex % tiles.length]\n        : tiles[tiles.length - 1];\n\n    if (navigationDirection) {\n      event.preventDefault(); // Prevent default (scrolling) behavior\n\n      if (this.radioTiles.length) {\n        this._handleKeydownRadio(nextSibling);\n      } else {\n        this._handleKeydownSelectable(event, nextSibling);\n      }\n    } else if (key === ' ' || key === 'Enter') {\n      this._handleKeydownSelectable(event);\n    }\n  };\n\n  /**\n   * Focus listener to focus on selected element upon focusing\n   *\n   * @param event to get focused\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = (event: KeyboardEvent) => {\n    const { relatedTarget, target } = event as any;\n\n    if (this.radioTiles.length) {\n      if (!this.currentRadioSelection) {\n        target.toggleAttribute('selected');\n        this.currentRadioSelection = target;\n      } else if (\n        !relatedTarget?.matches(\n          (this.constructor as typeof CDSTileGroup).selectorRadioTile\n        ) &&\n        target !== this.currentRadioSelection\n      ) {\n        this.currentRadioSelection.focus();\n      }\n    }\n  };\n\n  /**\n   * Provide an optional className to be applied to the component\n   */\n  @property({ reflect: true, attribute: 'class-name' })\n  className;\n\n  /**\n   * Specify whether the group is disabled\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled;\n\n  @property()\n  currentRadioSelection;\n\n  @property()\n  currentSelections = [] as any;\n\n  @property()\n  radioTiles;\n\n  @property()\n  selectableTiles;\n\n  firstUpdated() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n\n    if (!this.radioTiles) {\n      this.radioTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorRadioTile\n      );\n    }\n\n    if (!this.selectableTiles) {\n      this.selectableTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n      );\n    }\n\n    if (this.disabled) {\n      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n    }\n  }\n\n  render() {\n    const { className, disabled } = this;\n    return html`\n      <fieldset class=\"${className}\" ?disabled=${disabled}>\n        <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n        <slot></slot>\n      </fieldset>\n    `;\n  }\n\n  /**\n   * A selector that selects a radio tile component.\n   */\n  static get selectorRadioTile() {\n    return `${prefix}-radio-tile`;\n  }\n\n  /**\n   * A selector that selects a selectable tile component.\n   */\n  static get selectorSelectableTile() {\n    return `${prefix}-selectable-tile`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentRadioTileSelection() {\n    return `${prefix}-current-radio-tile-selection`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentSelectableTilesSelection() {\n    return `${prefix}-current-selectable-tile-selections`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTileGroup;\n"]}
+{"version":3,"sources":["components/tile/tile-group.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBvC;;;;GAIG;AACH,cACM,YAAa,SAAQ,iBAA6B;IACtD,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,sBAAsB;IA0B9B;;;;OAIG;IAGH,OAAO,CAAC,iBAAiB;IAQzB;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAwB3B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IA2BhC;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAwBpB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,YAAY,CAgBlB;IAEF;;OAEG;IAEH,iBAAiB,MAAC;IAElB;;OAEG;IAEH,QAAQ,MAAC;IAGT,qBAAqB,MAAC;IAGtB,iBAAiB,MAAa;IAG9B,UAAU,MAAC;IAGX,eAAe,MAAC;IAEhB,YAAY;IAuBZ,MAAM;IAUN;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED;;OAEG;IACH,MAAM,KAAK,8BAA8B,WAExC;IAED;;OAEG;IACH,MAAM,KAAK,oCAAoC,WAE9C;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"tile-group.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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\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 * Tile group.\n *\n * @element cds-tile-group\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n  private _handleRadioClick(event) {\n    const { target } = event;\n    const { currentRadioSelection } = this;\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentRadioSelection) {\n      this.currentRadioSelection = target;\n    } else if (currentRadioSelection !== target) {\n      currentRadioSelection.toggleAttribute('selected');\n      this.currentRadioSelection = target;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          target,\n        },\n      })\n    );\n  }\n\n  private _handleSelectableClick(event) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentSelections.includes(target)) {\n      currentSelections.push(target);\n    } else {\n      currentSelections.splice(currentSelections.indexOf(target), 1);\n    }\n    (target as HTMLElement).toggleAttribute('selected');\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentSelectableTilesSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          currentSelections,\n        },\n      })\n    );\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * Click listener to ensure selectability.\n   *\n   * @param event click\n   */\n  @HostListener('click')\n  // @ts-ignore\n  private _handleTileSelect(event: Event) {\n    if (this.radioTiles.length) {\n      this._handleRadioClick(event);\n    } else {\n      this._handleSelectableClick(event);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation for radio tiles\n   *\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownRadio(nextSibling) {\n    const { currentRadioSelection } = this;\n\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (currentRadioSelection) {\n      currentRadioSelection.toggleAttribute('selected');\n    }\n    nextSibling.focus();\n    nextSibling.toggleAttribute('selected');\n    this.currentRadioSelection = nextSibling;\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          nextSibling,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard navigation for selectable tiles\n   *\n   * @param event to get target\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownSelectable(event, nextSibling?) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (nextSibling) {\n      nextSibling.focus();\n    } else {\n      if (!currentSelections.includes(target)) {\n        currentSelections.push(target);\n      } else {\n        currentSelections.splice(currentSelections.indexOf(target), 1);\n      }\n\n      this.dispatchEvent(\n        new CustomEvent(eventCurrentSelectableTilesSelection, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            currentSelections,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Keyboard listener to ensure keyboard navigation.\n   *\n   * @param event to get key pressed\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 { target, key } = event;\n    const { radioTiles, selectableTiles } = this;\n    const navigationDirection = navigationDirectionForKey[key];\n\n    let tiles = radioTiles.length ? radioTiles : selectableTiles;\n    const currentIndex = [...tiles].findIndex((e) => e == target);\n    const nextIndex = currentIndex + navigationDirection;\n    const nextSibling =\n      nextIndex !== -1\n        ? tiles[nextIndex % tiles.length]\n        : tiles[tiles.length - 1];\n\n    if (navigationDirection) {\n      event.preventDefault(); // Prevent default (scrolling) behavior\n\n      if (this.radioTiles.length) {\n        this._handleKeydownRadio(nextSibling);\n      } else {\n        this._handleKeydownSelectable(event, nextSibling);\n      }\n    } else if (key === ' ' || key === 'Enter') {\n      this._handleKeydownSelectable(event);\n    }\n  };\n\n  /**\n   * Focus listener to focus on selected element upon focusing\n   *\n   * @param event to get focused\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = (event: KeyboardEvent) => {\n    const { relatedTarget, target } = event as any;\n\n    if (this.radioTiles.length) {\n      if (!this.currentRadioSelection) {\n        target.toggleAttribute('selected');\n        this.currentRadioSelection = target;\n      } else if (\n        !relatedTarget?.matches(\n          (this.constructor as typeof CDSTileGroup).selectorRadioTile\n        ) &&\n        target !== this.currentRadioSelection\n      ) {\n        this.currentRadioSelection.focus();\n      }\n    }\n  };\n\n  /**\n   * Provide an optional className to be applied to the component\n   */\n  @property({ reflect: true, attribute: 'fieldset-class-name' })\n  fieldsetClassName;\n\n  /**\n   * Specify whether the group is disabled\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled;\n\n  @property()\n  currentRadioSelection;\n\n  @property()\n  currentSelections = [] as any;\n\n  @property()\n  radioTiles;\n\n  @property()\n  selectableTiles;\n\n  firstUpdated() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n\n    if (!this.radioTiles) {\n      this.radioTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorRadioTile\n      );\n    }\n\n    if (!this.selectableTiles) {\n      this.selectableTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n      );\n    }\n\n    if (this.disabled) {\n      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n    }\n  }\n\n  render() {\n    const { fieldsetClassName, disabled } = this;\n    return html`\n      <fieldset class=\"${fieldsetClassName}\" ?disabled=${disabled}>\n        <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n        <slot></slot>\n      </fieldset>\n    `;\n  }\n\n  /**\n   * A selector that selects a radio tile component.\n   */\n  static get selectorRadioTile() {\n    return `${prefix}-radio-tile`;\n  }\n\n  /**\n   * A selector that selects a selectable tile component.\n   */\n  static get selectorSelectableTile() {\n    return `${prefix}-selectable-tile`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentRadioTileSelection() {\n    return `${prefix}-current-radio-tile-selection`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentSelectableTilesSelection() {\n    return `${prefix}-current-selectable-tile-selections`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTileGroup;\n"]}

package/es/components/tile/tile-group.js

@@ -11,18 +11,17 @@ let _ = t => t,
  */
 
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import styles from "././tile.css.js";
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Map of navigation direction by key.
- */ /**
-     * Map of navigation direction by key.
-     */
+ */
 const navigationDirectionForKey = {
   ArrowUp: NAVIGATION_DIRECTION.BACKWARD,
   Up: NAVIGATION_DIRECTION.BACKWARD,
@@ -247,9 +246,9 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
       kind: "field",
       decorators: [property({
         reflect: true,
-        attribute: 'class-name'
+        attribute: 'fieldset-class-name'
       })],
-      key: "className",
+      key: "fieldsetClassName",
       value: void 0
     }, {
       kind: "field",
@@ -316,7 +315,7 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
       key: "render",
       value: function render() {
         const {
-          className,
+          fieldsetClassName,
           disabled
         } = this;
         return html(_t || (_t = _`
@@ -324,7 +323,7 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
         <slot name="legend" class="${0}--label"></slot>
         <slot></slot>
       </fieldset>
-    `), className, disabled, prefix);
+    `), fieldsetClassName, disabled, prefix);
       }
 
       /**

package/es/components/tile/tile-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-group.js","names":["LitElement","html","customElement","property","prefix","NAVIGATION_DIRECTION","HostListener","HostListenerMixin","styles","navigationDirectionForKey","ArrowUp","BACKWARD","Up","ArrowDown","FORWARD","Down","CDSTileGroup","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleRadioClick","event","target","currentRadioSelection","eventCurrentRadioTileSelection","toggleAttribute","dispatchEvent","CustomEvent","bubbles","composed","detail","_handleSelectableClick","currentSelections","eventCurrentSelectableTilesSelection","includes","push","splice","indexOf","stopPropagation","preventDefault","decorators","_handleTileSelect","radioTiles","length","_handleKeydownRadio","nextSibling","focus","_handleKeydownSelectable","selectableTiles","navigationDirection","tiles","currentIndex","findIndex","e","nextIndex","relatedTarget","matches","selectorRadioTile","reflect","attribute","type","Boolean","firstUpdated","hasAttribute","setAttribute","querySelectorAll","selectorSelectableTile","disabled","forEach","render","className","_t","_","static"],"sources":["components/tile/tile-group.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 { customElement, property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.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 * Tile group.\n *\n * @element cds-tile-group\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n  private _handleRadioClick(event) {\n    const { target } = event;\n    const { currentRadioSelection } = this;\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentRadioSelection) {\n      this.currentRadioSelection = target;\n    } else if (currentRadioSelection !== target) {\n      currentRadioSelection.toggleAttribute('selected');\n      this.currentRadioSelection = target;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          target,\n        },\n      })\n    );\n  }\n\n  private _handleSelectableClick(event) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentSelections.includes(target)) {\n      currentSelections.push(target);\n    } else {\n      currentSelections.splice(currentSelections.indexOf(target), 1);\n    }\n    (target as HTMLElement).toggleAttribute('selected');\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentSelectableTilesSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          currentSelections,\n        },\n      })\n    );\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * Click listener to ensure selectability.\n   *\n   * @param event click\n   */\n  @HostListener('click')\n  // @ts-ignore\n  private _handleTileSelect(event: Event) {\n    if (this.radioTiles.length) {\n      this._handleRadioClick(event);\n    } else {\n      this._handleSelectableClick(event);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation for radio tiles\n   *\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownRadio(nextSibling) {\n    const { currentRadioSelection } = this;\n\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (currentRadioSelection) {\n      currentRadioSelection.toggleAttribute('selected');\n    }\n    nextSibling.focus();\n    nextSibling.toggleAttribute('selected');\n    this.currentRadioSelection = nextSibling;\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          nextSibling,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard navigation for selectable tiles\n   *\n   * @param event to get target\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownSelectable(event, nextSibling?) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (nextSibling) {\n      nextSibling.focus();\n    } else {\n      if (!currentSelections.includes(target)) {\n        currentSelections.push(target);\n      } else {\n        currentSelections.splice(currentSelections.indexOf(target), 1);\n      }\n\n      this.dispatchEvent(\n        new CustomEvent(eventCurrentSelectableTilesSelection, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            currentSelections,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Keyboard listener to ensure keyboard navigation.\n   *\n   * @param event to get key pressed\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 { target, key } = event;\n    const { radioTiles, selectableTiles } = this;\n    const navigationDirection = navigationDirectionForKey[key];\n\n    let tiles = radioTiles.length ? radioTiles : selectableTiles;\n    const currentIndex = [...tiles].findIndex((e) => e == target);\n    const nextIndex = currentIndex + navigationDirection;\n    const nextSibling =\n      nextIndex !== -1\n        ? tiles[nextIndex % tiles.length]\n        : tiles[tiles.length - 1];\n\n    if (navigationDirection) {\n      event.preventDefault(); // Prevent default (scrolling) behavior\n\n      if (this.radioTiles.length) {\n        this._handleKeydownRadio(nextSibling);\n      } else {\n        this._handleKeydownSelectable(event, nextSibling);\n      }\n    } else if (key === ' ' || key === 'Enter') {\n      this._handleKeydownSelectable(event);\n    }\n  };\n\n  /**\n   * Focus listener to focus on selected element upon focusing\n   *\n   * @param event to get focused\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = (event: KeyboardEvent) => {\n    const { relatedTarget, target } = event as any;\n\n    if (this.radioTiles.length) {\n      if (!this.currentRadioSelection) {\n        target.toggleAttribute('selected');\n        this.currentRadioSelection = target;\n      } else if (\n        !relatedTarget?.matches(\n          (this.constructor as typeof CDSTileGroup).selectorRadioTile\n        ) &&\n        target !== this.currentRadioSelection\n      ) {\n        this.currentRadioSelection.focus();\n      }\n    }\n  };\n\n  /**\n   * Provide an optional className to be applied to the component\n   */\n  @property({ reflect: true, attribute: 'class-name' })\n  className;\n\n  /**\n   * Specify whether the group is disabled\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled;\n\n  @property()\n  currentRadioSelection;\n\n  @property()\n  currentSelections = [] as any;\n\n  @property()\n  radioTiles;\n\n  @property()\n  selectableTiles;\n\n  firstUpdated() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n\n    if (!this.radioTiles) {\n      this.radioTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorRadioTile\n      );\n    }\n\n    if (!this.selectableTiles) {\n      this.selectableTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n      );\n    }\n\n    if (this.disabled) {\n      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n    }\n  }\n\n  render() {\n    const { className, disabled } = this;\n    return html`\n      <fieldset class=\"${className}\" ?disabled=${disabled}>\n        <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n        <slot></slot>\n      </fieldset>\n    `;\n  }\n\n  /**\n   * A selector that selects a radio tile component.\n   */\n  static get selectorRadioTile() {\n    return `${prefix}-radio-tile`;\n  }\n\n  /**\n   * A selector that selects a selectable tile component.\n   */\n  static get selectorSelectableTile() {\n    return `${prefix}-selectable-tile`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentRadioTileSelection() {\n    return `${prefix}-current-radio-tile-selection`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentSelectableTilesSelection() {\n    return `${prefix}-current-selectable-tile-selections`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTileGroup;\n"],"mappings":"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"}
+{"version":3,"file":"tile-group.js","names":["LitElement","html","property","prefix","NAVIGATION_DIRECTION","HostListener","HostListenerMixin","styles","carbonElement","customElement","navigationDirectionForKey","ArrowUp","BACKWARD","Up","ArrowDown","FORWARD","Down","CDSTileGroup","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleRadioClick","event","target","currentRadioSelection","eventCurrentRadioTileSelection","toggleAttribute","dispatchEvent","CustomEvent","bubbles","composed","detail","_handleSelectableClick","currentSelections","eventCurrentSelectableTilesSelection","includes","push","splice","indexOf","stopPropagation","preventDefault","decorators","_handleTileSelect","radioTiles","length","_handleKeydownRadio","nextSibling","focus","_handleKeydownSelectable","selectableTiles","navigationDirection","tiles","currentIndex","findIndex","e","nextIndex","relatedTarget","matches","selectorRadioTile","reflect","attribute","type","Boolean","firstUpdated","hasAttribute","setAttribute","querySelectorAll","selectorSelectableTile","disabled","forEach","render","fieldsetClassName","_t","_","static"],"sources":["components/tile/tile-group.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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\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 * Tile group.\n *\n * @element cds-tile-group\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n  private _handleRadioClick(event) {\n    const { target } = event;\n    const { currentRadioSelection } = this;\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentRadioSelection) {\n      this.currentRadioSelection = target;\n    } else if (currentRadioSelection !== target) {\n      currentRadioSelection.toggleAttribute('selected');\n      this.currentRadioSelection = target;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          target,\n        },\n      })\n    );\n  }\n\n  private _handleSelectableClick(event) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (!currentSelections.includes(target)) {\n      currentSelections.push(target);\n    } else {\n      currentSelections.splice(currentSelections.indexOf(target), 1);\n    }\n    (target as HTMLElement).toggleAttribute('selected');\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentSelectableTilesSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          currentSelections,\n        },\n      })\n    );\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /**\n   * Click listener to ensure selectability.\n   *\n   * @param event click\n   */\n  @HostListener('click')\n  // @ts-ignore\n  private _handleTileSelect(event: Event) {\n    if (this.radioTiles.length) {\n      this._handleRadioClick(event);\n    } else {\n      this._handleSelectableClick(event);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation for radio tiles\n   *\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownRadio(nextSibling) {\n    const { currentRadioSelection } = this;\n\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (currentRadioSelection) {\n      currentRadioSelection.toggleAttribute('selected');\n    }\n    nextSibling.focus();\n    nextSibling.toggleAttribute('selected');\n    this.currentRadioSelection = nextSibling;\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          nextSibling,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard navigation for selectable tiles\n   *\n   * @param event to get target\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownSelectable(event, nextSibling?) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (nextSibling) {\n      nextSibling.focus();\n    } else {\n      if (!currentSelections.includes(target)) {\n        currentSelections.push(target);\n      } else {\n        currentSelections.splice(currentSelections.indexOf(target), 1);\n      }\n\n      this.dispatchEvent(\n        new CustomEvent(eventCurrentSelectableTilesSelection, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            currentSelections,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Keyboard listener to ensure keyboard navigation.\n   *\n   * @param event to get key pressed\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 { target, key } = event;\n    const { radioTiles, selectableTiles } = this;\n    const navigationDirection = navigationDirectionForKey[key];\n\n    let tiles = radioTiles.length ? radioTiles : selectableTiles;\n    const currentIndex = [...tiles].findIndex((e) => e == target);\n    const nextIndex = currentIndex + navigationDirection;\n    const nextSibling =\n      nextIndex !== -1\n        ? tiles[nextIndex % tiles.length]\n        : tiles[tiles.length - 1];\n\n    if (navigationDirection) {\n      event.preventDefault(); // Prevent default (scrolling) behavior\n\n      if (this.radioTiles.length) {\n        this._handleKeydownRadio(nextSibling);\n      } else {\n        this._handleKeydownSelectable(event, nextSibling);\n      }\n    } else if (key === ' ' || key === 'Enter') {\n      this._handleKeydownSelectable(event);\n    }\n  };\n\n  /**\n   * Focus listener to focus on selected element upon focusing\n   *\n   * @param event to get focused\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = (event: KeyboardEvent) => {\n    const { relatedTarget, target } = event as any;\n\n    if (this.radioTiles.length) {\n      if (!this.currentRadioSelection) {\n        target.toggleAttribute('selected');\n        this.currentRadioSelection = target;\n      } else if (\n        !relatedTarget?.matches(\n          (this.constructor as typeof CDSTileGroup).selectorRadioTile\n        ) &&\n        target !== this.currentRadioSelection\n      ) {\n        this.currentRadioSelection.focus();\n      }\n    }\n  };\n\n  /**\n   * Provide an optional className to be applied to the component\n   */\n  @property({ reflect: true, attribute: 'fieldset-class-name' })\n  fieldsetClassName;\n\n  /**\n   * Specify whether the group is disabled\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled;\n\n  @property()\n  currentRadioSelection;\n\n  @property()\n  currentSelections = [] as any;\n\n  @property()\n  radioTiles;\n\n  @property()\n  selectableTiles;\n\n  firstUpdated() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n\n    if (!this.radioTiles) {\n      this.radioTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorRadioTile\n      );\n    }\n\n    if (!this.selectableTiles) {\n      this.selectableTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n      );\n    }\n\n    if (this.disabled) {\n      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n    }\n  }\n\n  render() {\n    const { fieldsetClassName, disabled } = this;\n    return html`\n      <fieldset class=\"${fieldsetClassName}\" ?disabled=${disabled}>\n        <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n        <slot></slot>\n      </fieldset>\n    `;\n  }\n\n  /**\n   * A selector that selects a radio tile component.\n   */\n  static get selectorRadioTile() {\n    return `${prefix}-radio-tile`;\n  }\n\n  /**\n   * A selector that selects a selectable tile component.\n   */\n  static get selectorSelectableTile() {\n    return `${prefix}-selectable-tile`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentRadioTileSelection() {\n    return `${prefix}-current-radio-tile-selection`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentSelectableTilesSelection() {\n    return `${prefix}-current-selectable-tile-selections`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTileGroup;\n"],"mappings":"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"}