@carbon/web-components 2.0.2-rc.0 → 2.1.0-rc.0

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

@@ -1,4 +1,9 @@
 import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+let _ = t => t,
+  _t,
+  _t2;
 /**
  * @license
  *
@@ -8,6 +13,7 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
  * LICENSE file in the root directory of this source tree.
  */
 
+import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
@@ -16,6 +22,20 @@ import { TILE_COLOR_SCHEME } from './defs';
 import styles from "././tile.css.js";
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
+// To Do: Replace with an an icon from `@carbon/icons`
+// since the hollow slug in `ClickableTile` is not interactive
+const hollowSlugIcon = html(_t || (_t = _` <svg
+  class="${0}--tile--slug-icon"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="23" height="23" />
+  <path
+    d="M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z"
+    fill="#161616" />
+</svg>`), prefix);
 /**
  * Clickable tile.
  *
@@ -36,14 +56,17 @@ let CDSClickableTile = _decorate([customElement(`${prefix}-clickable-tile`)], fu
       value: function _classes() {
         const {
           colorScheme,
-          disabled
+          disabled,
+          hasRoundedCorners,
+          slug
         } = this;
         return classMap({
           [`${prefix}--link`]: true,
           [`${prefix}--link--disabled`]: disabled,
           [`${prefix}--tile`]: true,
           [`${prefix}--tile--clickable`]: true,
-          [`${prefix}--tile--${colorScheme}`]: colorScheme
+          [`${prefix}--tile--${colorScheme}`]: colorScheme,
+          [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
         });
       }
 
@@ -69,6 +92,53 @@ let CDSClickableTile = _decorate([customElement(`${prefix}-clickable-tile`)], fu
       value() {
         return 'button';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'has-rounded-corners'
+      })],
+      key: "hasRoundedCorners",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean
+      })],
+      key: "slug",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "method",
+      key: "_renderInner",
+      value:
+      /**
+       * The a11y role for `<a>`.
+       */
+      /**
+       * Specify if the `ClickableTile` component should be rendered with rounded corners.
+       * Only valid when `slug` prop is present
+       */
+      /**
+       * @returns The inner content.
+       */
+      function _renderInner() {
+        return html(_t2 || (_t2 = _` ${0} ${0} `), _get(_getPrototypeOf(CDSClickableTile.prototype), "_renderInner", this).call(this), this.slug ? hollowSlugIcon : '');
+      }
+
+      /**
+       * A selector that will return the slug item.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "slugItem",
+      value: function slugItem() {
+        return `${prefix}-slug`;
+      }
     }, {
       kind: "field",
       static: true,

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

@@ -1 +1 @@
-{"version":3,"file":"clickable-tile.js","names":["classMap","property","prefix","CDSLink","TILE_COLOR_SCHEME","styles","carbonElement","customElement","CDSClickableTile","_decorate","_initialize","_CDSLink","constructor","args","F","d","kind","key","value","_classes","colorScheme","disabled","decorators","attribute","reflect","REGULAR","static"],"sources":["components/tile/clickable-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 { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  protected get _classes() {\n    const { colorScheme, disabled } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\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   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,OAAO,MAAM,cAAc;AAClC,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;AAChC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;;AAExF;AACA;AACA;AACA;AACA;AAJA,IAMMC,gBAAgB,GAAAC,SAAA,EADrBF,aAAa,CAAE,GAAEL,MAAO,iBAAgB,CAAC,aAAAQ,WAAA,EAAAC,QAAA;EAA1C,MACMH,gBAAgB,SAAAG,QAAA,CAAiB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAyBvC;EAAC;IAAAI,CAAA,EAzBKN,gBAAgB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACpB,SAAAC,SAAA,EAAyB;QACvB,MAAM;UAAEC,WAAW;UAAEC;QAAS,CAAC,GAAG,IAAI;QACtC,OAAOrB,QAAQ,CAAC;UACd,CAAE,GAAEE,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,kBAAiB,GAAGmB,QAAQ;UACvC,CAAE,GAAEnB,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,mBAAkB,GAAG,IAAI;UACpC,CAAE,GAAEA,MAAO,WAAUkB,WAAY,EAAC,GAAGA;QACvC,CAAC,CAAC;MACJ;;MAEA;AACF;AACA;IAFE;MAAAJ,IAAA;MAAAM,UAAA,GAGCrB,QAAQ,CAAC;QAAEsB,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAP,GAAA;MAAAC,MAAA;QAAA,OACzCd,iBAAiB,CAACqB,OAAO;MAAA;IAAA;MAAAT,IAAA;MAAAM,UAAA,GAKtCrB,QAAQ,CAAC;QAAEsB,SAAS,EAAE;MAAY,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OAC1B,QAAQ;MAAA;IAAA;MAAAF,IAAA;MAAAU,MAAA;MAAAT,GAAA;MAAAC,MAAA;QAAA,OAEHb,MAAM;MAAA;IAAA;EAAA;AAAA,GAxBOF,OAAO;AA2BtC,eAAeK,gBAAgB"}
+{"version":3,"file":"clickable-tile.js","names":["html","classMap","property","prefix","CDSLink","TILE_COLOR_SCHEME","styles","carbonElement","customElement","hollowSlugIcon","_t","_","CDSClickableTile","_decorate","_initialize","_CDSLink","constructor","args","F","d","kind","key","value","_classes","colorScheme","disabled","hasRoundedCorners","slug","decorators","attribute","reflect","REGULAR","type","Boolean","_renderInner","_t2","_get","_getPrototypeOf","prototype","call","static","slugItem"],"sources":["components/tile/clickable-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 } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n// To Do: Replace with an an icon from `@carbon/icons`\n// since the hollow slug in `ClickableTile` is not interactive\nconst hollowSlugIcon = html` <svg\n  class=\"${prefix}--tile--slug-icon\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"0.5\" y=\"0.5\" width=\"23\" height=\"23\" />\n  <path\n    d=\"M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z\"\n    fill=\"#161616\" />\n</svg>`;\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  protected get _classes() {\n    const { colorScheme, disabled, hasRoundedCorners, slug } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,\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   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  /**\n   * Specify if the `ClickableTile` component should be rendered with rounded corners.\n   * Only valid when `slug` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  @property({ type: Boolean })\n  slug = false;\n\n  /**\n   * @returns The inner content.\n   */\n  protected _renderInner() {\n    return html` ${super._renderInner()} ${this.slug ? hollowSlugIcon : ''} `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":"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"}

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

@@ -683,6 +683,14 @@ declare class CDSExpandableTile extends CDSExpandableTile_base {
      * The computed height of the below-the-fold content.
      */
     private _belowTheContentHeight;
+    /**
+     * `true` if there is a slug.
+     */
+    protected _hasSlug: boolean;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange({ target }: Event): void;
     /**
      * Handles `slotchange` event on the below-the-fold content.
      *
@@ -699,11 +707,21 @@ declare class CDSExpandableTile extends CDSExpandableTile_base {
      * `true` to expand this expandable tile.
      */
     expanded: boolean;
+    /**
+     * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners: boolean;
     /**
      * `true` to expand this expandable tile.
      */
     withInteractive: boolean;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * A selector that will return the slug item.
+     */
+    static get slugItem(): string;
     /**
      * The name of the custom event fired before the expanded state is changed upon a user gesture.
      * Cancellation of this event stops changing the user-initiated change in expanded state.

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

@@ -48,20 +48,50 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       value() {
         return 0;
       }
+    }, {
+      kind: "field",
+      key: "_hasSlug",
+      value() {
+        return false;
+      }
     }, {
       kind: "method",
-      key: "_handleSlotChangeBelowTheFoldContent",
+      key: "_handleSlotChange",
       value:
       /**
        * The computed height of the below-the-fold content.
        */
 
+      /**
+       * `true` if there is a slug.
+       */
+
+      /**
+       * Handles `slotchange` event.
+       */
+      function _handleSlotChange({
+        target
+      }) {
+        const hasContent = target.assignedNodes().filter(elem => {
+          var _this$constructor;
+          return elem.matches !== undefined ? elem.matches((_this$constructor = this.constructor) === null || _this$constructor === void 0 ? void 0 : _this$constructor.slugItem) : false;
+        });
+        if (hasContent.length > 0) {
+          this._hasSlug = Boolean(hasContent);
+          hasContent[0].setAttribute('size', 'xs');
+        }
+        this.requestUpdate();
+      }
+
       /**
        * Handles `slotchange` event on the below-the-fold content.
        *
        * @param event The event.
        */
-      function _handleSlotChangeBelowTheFoldContent(event) {
+    }, {
+      kind: "method",
+      key: "_handleSlotChangeBelowTheFoldContent",
+      value: function _handleSlotChangeBelowTheFoldContent(event) {
         this._belowTheContentHeight = event.target.assignedNodes().reduce((acc, item) => {
           var _offsetHeight;
           return acc + ((_offsetHeight = item.offsetHeight) !== null && _offsetHeight !== void 0 ? _offsetHeight : 0);
@@ -126,6 +156,16 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'has-rounded-corners'
+      })],
+      key: "hasRoundedCorners",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -139,7 +179,7 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       }
     }, {
       kind: "method",
-      key: "render",
+      key: "updated",
       value:
       /**
        * The color scheme.
@@ -147,10 +187,24 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       /**
        * `true` to expand this expandable tile.
        */
+      /**
+       * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+       * Only valid when `slug` prop is present
+       */
       /**
        * `true` to expand this expandable tile.
        */
-      function render() {
+      function updated() {
+        if (this._hasSlug) {
+          this.setAttribute('slug', '');
+        } else {
+          this.removeAttribute('slug');
+        }
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
         const {
           expanded,
           withInteractive,
@@ -171,6 +225,7 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
         aria-expanded="${0}">
         ${0}
       </button>
+      <slot name="slug" @slotchange="${0}"></slot>
       <div id="content" class="${0}--tile-content">
         <div><slot name="above-the-fold-content"></slot></div>
         <div
@@ -181,7 +236,18 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       </div>
     `), classes, withInteractive ? this._handleExpand : '', String(Boolean(expanded)), ChevronDown16({
           id: 'icon'
-        }), prefix, prefix, ifDefined(!expanded ? undefined : `max-height: ${belowTheContentHeight}px`), handleSlotChangeBelowTheFoldContent);
+        }), this._handleSlotChange, prefix, prefix, ifDefined(!expanded ? undefined : `max-height: ${belowTheContentHeight}px`), handleSlotChangeBelowTheFoldContent);
+      }
+
+      /**
+       * A selector that will return the slug item.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "slugItem",
+      value: function slugItem() {
+        return `${prefix}-slug`;
       }
 
       /**

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

@@ -1 +1 @@
-{"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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"}
+{"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","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","_this$constructor","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","updated","removeAttribute","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","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   * `true` if there is a slug.\n   */\n  protected _hasSlug = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSExpandableTile)?.slugItem\n            )\n          : false\n      );\n\n    if (hasContent.length > 0) {\n      this._hasSlug = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\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   * Specify if the `ExpandableTile` component should be rendered with rounded corners.\n   * Only valid when `slug` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = 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  updated() {\n    if (this._hasSlug) {\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\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      <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\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   * A selector that will return the slug item.\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\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/selectable-tile.d.ts

@@ -339,9 +339,7 @@ declare const CDSSelectableTile_base: {
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined; /**
-                 * The color scheme.
-                 */
+                options?: boolean | AddEventListenerOptions | undefined;
             };
         };
     };
@@ -683,6 +681,14 @@ declare class CDSSelectableTile extends CDSSelectableTile_base {
      * The `type` attribute of the `<input>`.
      */
     protected _inputType: string;
+    /**
+     * `true` if there is a slug.
+     */
+    protected _hasSlug: boolean;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange({ target }: Event): void;
     /**
      * Handles `change` event on the `<input>` in the shadow DOM.
      */
@@ -705,6 +711,11 @@ declare class CDSSelectableTile extends CDSSelectableTile_base {
      * The color scheme.
      */
     colorScheme: TILE_COLOR_SCHEME;
+    /**
+     * Specify if the `SeletableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners: boolean;
     /**
      * The form name.
      */
@@ -717,7 +728,12 @@ declare class CDSSelectableTile extends CDSSelectableTile_base {
      * The form value.
      */
     value: string;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * A selector that will return the slug item.
+     */
+    static get slugItem(): string;
     /**
      * The name of the custom event fired after this selectable tile changes its selected state.
      */

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

@@ -54,18 +54,48 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
       value() {
         return 'checkbox';
       }
+    }, {
+      kind: "field",
+      key: "_hasSlug",
+      value() {
+        return false;
+      }
     }, {
       kind: "method",
-      key: "_handleChange",
+      key: "_handleSlotChange",
       value:
       /**
        * The `type` attribute of the `<input>`.
        */
 
+      /**
+       * `true` if there is a slug.
+       */
+
+      /**
+       * Handles `slotchange` event.
+       */
+      function _handleSlotChange({
+        target
+      }) {
+        const hasContent = target.assignedNodes().filter(elem => {
+          var _this$constructor;
+          return elem.matches !== undefined ? elem.matches((_this$constructor = this.constructor) === null || _this$constructor === void 0 ? void 0 : _this$constructor.slugItem) : false;
+        });
+        if (hasContent.length > 0) {
+          this._hasSlug = Boolean(hasContent);
+          hasContent[0].setAttribute('size', 'xs');
+        }
+        this.requestUpdate();
+      }
+
       /**
        * Handles `change` event on the `<input>` in the shadow DOM.
        */
-      function _handleChange() {
+    }, {
+      kind: "method",
+      key: "_handleChange",
+      value: function _handleChange() {
         this.selected = this._inputNode.checked;
         const selected = this.selected;
         const {
@@ -109,10 +139,11 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
       key: "_handleKeydown",
       value() {
         return event => {
+          var _event$target;
           const {
             key
           } = event;
-          if (key === ' ' || key === 'Enter') {
+          if (key === ' ' || key === 'Enter' && !((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.matches(this.constructor.slugItem))) {
             this.selected = !this.selected;
           }
         };
@@ -134,6 +165,16 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
       value() {
         return TILE_COLOR_SCHEME.REGULAR;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'has-rounded-corners'
+      })],
+      key: "hasRoundedCorners",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property()],
@@ -156,7 +197,7 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
       value: void 0
     }, {
       kind: "method",
-      key: "render",
+      key: "updated",
       value:
       /**
        * The a11y text for the checkmark icon of the selected state.
@@ -164,6 +205,10 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
       /**
        * The color scheme.
        */
+      /**
+       * Specify if the `SeletableTile` component should be rendered with rounded corners.
+       * Only valid when `slug` prop is present
+       */
       /**
        * The form name.
        */
@@ -173,20 +218,33 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
       /**
        * The form value.
        */
-      function render() {
+      function updated() {
+        if (this._hasSlug) {
+          this.setAttribute('slug', '');
+        } else {
+          this.removeAttribute('slug');
+        }
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
         const {
           colorScheme,
+          hasRoundedCorners: hasRoundedCorners,
           name,
           selected,
           value,
           _inputType: inputType,
-          _handleChange: handleChange
+          _handleChange: handleChange,
+          _hasSlug: hasSlug
         } = this;
         const classes = classMap({
           [`${prefix}--tile`]: true,
           [`${prefix}--tile--selectable`]: true,
           [`${prefix}--tile--is-selected`]: selected,
-          [`${prefix}--tile--${colorScheme}`]: colorScheme
+          [`${prefix}--tile--${colorScheme}`]: colorScheme,
+          [`${prefix}--tile--slug-rounded`]: hasSlug && hasRoundedCorners
         });
         return html(_t4 || (_t4 = _`
       <input
@@ -205,7 +263,19 @@ let CDSSelectableTile = _decorate([customElement(`${prefix}-selectable-tile`)],
         </div>
         <div class="${0}--tile-content"><slot></slot></div>
       </label>
-    `), inputType, prefix, ifDefined(name), ifDefined(value), selected, handleChange, classes, prefix, prefix, this._renderIcon(), prefix);
+      <slot name="slug" @slotchange="${0}"></slot>
+    `), inputType, prefix, ifDefined(name), ifDefined(value), selected, handleChange, classes, prefix, prefix, this._renderIcon(), prefix, this._handleSlotChange);
+      }
+
+      /**
+       * A selector that will return the slug item.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "slugItem",
+      value: function slugItem() {
+        return `${prefix}-slug`;
       }
 
       /**

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

@@ -1 +1 @@
-{"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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"}
+{"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","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","_this$constructor","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","_t2","_t3","event","_event$target","attribute","reflect","REGULAR","type","updated","removeAttribute","render","colorScheme","hasRoundedCorners","name","_inputType","inputType","handleChange","hasSlug","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   * `true` if there is a slug.\n   */\n  protected _hasSlug = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelectableTile)?.slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      this._hasSlug = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\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 (\n      key === ' ' ||\n      (key === 'Enter' &&\n        !(event.target as HTMLElement)?.matches(\n          (this.constructor as typeof CDSSelectableTile).slugItem\n        ))\n    ) {\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   * Specify if the `SeletableTile` component should be rendered with rounded corners.\n   * Only valid when `slug` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\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  updated() {\n    if (this._hasSlug) {\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\n\n  render() {\n    const {\n      colorScheme,\n      hasRoundedCorners: hasRoundedCorners,\n      name,\n      selected,\n      value,\n      _inputType: inputType,\n      _handleChange: handleChange,\n      _hasSlug: hasSlug,\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      [`${prefix}--tile--slug-rounded`]: hasSlug && hasRoundedCorners,\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      <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\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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"}