@carbon/ibmdotcom-web-components 2.15.1 → 2.16.0-rc.0

package/es/components/tile/tile.js

@@ -0,0 +1,225 @@
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+let _ = t => t,
+  _t,
+  _t2;
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import CTAMixin from "../../component-mixins/cta/cta.js";
+import VideoCTAMixin from "../../component-mixins/cta/video.js";
+import { CTA_TYPE } from "../cta/defs.js";
+import styles from "././tile.css.js";
+const {
+  stablePrefix: c4dPrefix
+} = settings;
+
+/**
+ * The Tile component.
+ *
+ * @element c4d-tile
+ */
+let C4DTile = _decorate([customElement(`${c4dPrefix}-tile`)], function (_initialize, _VideoCTAMixin) {
+  class C4DTile extends _VideoCTAMixin {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: C4DTile,
+    d: [{
+      kind: "field",
+      decorators: [property({
+        attribute: 'label'
+      })],
+      key: "label",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'cta-type',
+        reflect: true
+      })],
+      key: "ctaType",
+      value() {
+        return CTA_TYPE['LOCAL'];
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'href'
+      })],
+      key: "href",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "slottedImages",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "slottedPictogram",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "slotName",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "slotContent",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'align-with-content'
+      })],
+      key: "alignWithContent",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'double-tile'
+      })],
+      key: "doubleTile",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'target',
+        reflect: true
+      })],
+      key: "target",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [query(`.${c4dPrefix}-tile__action`)],
+      key: "_linkNode",
+      value: void 0
+    }, {
+      kind: "method",
+      key: "_handleSlotChange",
+      value:
+      /**
+       * The label text.
+       */
+
+      function _handleSlotChange(event) {
+        const {
+          target
+        } = event;
+        this.slotName = target.name;
+        this.slotContent = target.assignedElements();
+        if (this.slotName === 'image' && this.slotContent.length === 1) {
+          this.slottedImages = true;
+        } else if (this.slotName === 'image' && this.slotContent.length === 0) {
+          this.slottedImages = false;
+        }
+        if (this.slotName === 'pictogram' && this.slotContent.length === 1) {
+          this.slottedPictogram = true;
+        } else if (this.slotName === 'pictogram' && this.slotContent.length === 0) {
+          this.slottedPictogram = false;
+        }
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        const {
+          label,
+          href,
+          _handleSlotChange: handleSlotChange,
+          _handleClick: handleClick,
+          slottedPictogram,
+          slottedImages,
+          alignWithContent,
+          doubleTile
+        } = this;
+        const ctaClasses = classMap({
+          [`${c4dPrefix}-tile__footer-placement`]: alignWithContent,
+          [`${c4dPrefix}-tile__action`]: true
+        });
+        const imgClasses = classMap({
+          [`${c4dPrefix}-tile__image-double`]: doubleTile,
+          [`${c4dPrefix}-tile__image`]: true
+        });
+        return html(_t || (_t = _`
+      <div class="${0}-tile__outer" part="outer">
+        <div class="${0}-tile__wrapper" part="wrapper">
+          <div class="${0}" part="image" ?hidden=${0}>
+            <slot name="image" @slotchange=${0}></slot>
+          </div>
+
+          <div class="${0}-tile__content" part="content">
+            <div
+              class="${0}-tile__pictogram"
+              part="pictogram"
+              ?hidden=${0}>
+              <slot name="pictogram" @slotchange="${0}"></slot>
+            </div>
+
+            ${0}
+
+            <div class="${0}-tile__text" part="text">
+              <slot></slot>
+            </div>
+
+            <a
+              href=${0}
+              @click="${0}"
+              class="${0} cds--link cds--link--lg cds--link-with-icon cds--link-with-icon__icon-right cds--link-with-icon--inline-icon"
+              part="cta">
+              <slot name="cta"></slot>
+              ${0}
+            </a>
+          </div>
+        </div>
+      </div>
+    `), c4dPrefix, c4dPrefix, imgClasses, !slottedImages, handleSlotChange, c4dPrefix, c4dPrefix, !slottedPictogram, handleSlotChange, label ? html(_t2 || (_t2 = _`
+                  <span class="${0}-tile__label" part="label"
+                    >${0}</span
+                  >
+                `), c4dPrefix, label) : '', c4dPrefix, ifDefined(href), handleClick, ctaClasses, this._renderIcon());
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, VideoCTAMixin(CTAMixin(LitElement)));
+export default C4DTile;
+//# sourceMappingURL=tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","names":["LitElement","html","property","state","query","classMap","carbonElement","customElement","settings","ifDefined","CTAMixin","VideoCTAMixin","CTA_TYPE","styles","stablePrefix","c4dPrefix","C4DTile","_decorate","_initialize","_VideoCTAMixin","constructor","args","F","d","kind","decorators","attribute","key","value","reflect","type","Boolean","_handleSlotChange","event","target","slotName","name","slotContent","assignedElements","length","slottedImages","slottedPictogram","render","label","href","handleSlotChange","_handleClick","handleClick","alignWithContent","doubleTile","ctaClasses","imgClasses","_t","_","_t2","_renderIcon","static"],"sources":["components/tile/tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2024\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, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport { CTA_TYPE } from '../cta/defs';\n\nimport styles from './tile.scss';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * The Tile component.\n *\n * @element c4d-tile\n */\n@customElement(`${c4dPrefix}-tile`)\nclass C4DTile extends VideoCTAMixin(CTAMixin(LitElement)) {\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label' })\n  label?: string;\n\n  @property({ attribute: 'cta-type', reflect: true })\n  ctaType = CTA_TYPE['LOCAL'];\n\n  @property({ attribute: 'href' })\n  href?: string;\n\n  @state()\n  slottedImages = false;\n\n  @state()\n  slottedPictogram = false;\n\n  @state()\n  slotName = '';\n\n  @state()\n  slotContent: Element[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: 'align-with-content' })\n  alignWithContent = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'double-tile' })\n  doubleTile = false;\n\n  @property({ attribute: 'target', reflect: true })\n  target?: string | undefined;\n\n  @query(`.${c4dPrefix}-tile__action`)\n  _linkNode!: HTMLAnchorElement;\n\n  _handleSlotChange(event: Event) {\n    const { target } = event;\n    this.slotName = (target as HTMLSlotElement).name;\n    this.slotContent = (target as HTMLSlotElement).assignedElements();\n\n    if (this.slotName === 'image' && this.slotContent.length === 1) {\n      this.slottedImages = true;\n    } else if (this.slotName === 'image' && this.slotContent.length === 0) {\n      this.slottedImages = false;\n    }\n\n    if (this.slotName === 'pictogram' && this.slotContent.length === 1) {\n      this.slottedPictogram = true;\n    } else if (this.slotName === 'pictogram' && this.slotContent.length === 0) {\n      this.slottedPictogram = false;\n    }\n  }\n\n  render() {\n    const {\n      label,\n      href,\n      _handleSlotChange: handleSlotChange,\n      _handleClick: handleClick,\n      slottedPictogram,\n      slottedImages,\n      alignWithContent,\n      doubleTile,\n    } = this;\n\n    const ctaClasses = classMap({\n      [`${c4dPrefix}-tile__footer-placement`]: alignWithContent,\n      [`${c4dPrefix}-tile__action`]: true,\n    });\n\n    const imgClasses = classMap({\n      [`${c4dPrefix}-tile__image-double`]: doubleTile,\n      [`${c4dPrefix}-tile__image`]: true,\n    });\n\n    return html`\n      <div class=\"${c4dPrefix}-tile__outer\" part=\"outer\">\n        <div class=\"${c4dPrefix}-tile__wrapper\" part=\"wrapper\">\n          <div class=\"${imgClasses}\" part=\"image\" ?hidden=${!slottedImages}>\n            <slot name=\"image\" @slotchange=${handleSlotChange}></slot>\n          </div>\n\n          <div class=\"${c4dPrefix}-tile__content\" part=\"content\">\n            <div\n              class=\"${c4dPrefix}-tile__pictogram\"\n              part=\"pictogram\"\n              ?hidden=${!slottedPictogram}>\n              <slot name=\"pictogram\" @slotchange=\"${handleSlotChange}\"></slot>\n            </div>\n\n            ${label\n              ? html`\n                  <span class=\"${c4dPrefix}-tile__label\" part=\"label\"\n                    >${label}</span\n                  >\n                `\n              : ''}\n\n            <div class=\"${c4dPrefix}-tile__text\" part=\"text\">\n              <slot></slot>\n            </div>\n\n            <a\n              href=${ifDefined(href)}\n              @click=\"${handleClick}\"\n              class=\"${ctaClasses} cds--link cds--link--lg cds--link-with-icon cds--link-with-icon__icon-right cds--link-with-icon--inline-icon\"\n              part=\"cta\">\n              <slot name=\"cta\"></slot>\n              ${this._renderIcon()}\n            </a>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n  static styles = styles;\n}\n\nexport default C4DTile;\n"],"mappings":"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","ignoreList":[]}

package/es/globals/internal/storybook-decorators.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Wraps provided Storybook story in Carbon grid with no columns.
+ *
+ * @param story Storybook story
+ * @returns {TemplateResult}
+ */
+export declare const gridNoCol: (story: any) => import("lit-html").TemplateResult<1>;
+/**
+ * Wraps provided Storybook story in Carbon grid with a single full-width column.
+ *
+ * @param story Storybook story
+ * @returns {TemplateResult}
+ */
+export declare const grid16Col: (story: any) => import("lit-html").TemplateResult<1>;
+/**
+ * Wraps provided Storybook story in Carbon grid with a half-width, centered column.
+ *
+ * @param story Storybook story
+ * @returns {TemplateResult}
+ */
+export declare const grid8ColCentered: (story: any) => import("lit-html").TemplateResult<1>;
+
+//# sourceMappingURL=storybook-decorators.d.ts.map

package/es/globals/internal/storybook-decorators.js

@@ -0,0 +1,43 @@
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+
+/**
+ * Wraps provided Storybook story in Carbon grid with no columns.
+ *
+ * @param story Storybook story
+ * @returns {TemplateResult}
+ */
+export const gridNoCol = story => html(_t || (_t = _`
+  <div class="cds--grid c4d-story-padding">
+    <div class="cds--row">${0}</div>
+  </div>
+`), story instanceof Function ? story() : story);
+
+/**
+ * Wraps provided Storybook story in Carbon grid with a single full-width column.
+ *
+ * @param story Storybook story
+ * @returns {TemplateResult}
+ */
+export const grid16Col = story => gridNoCol(html(_t2 || (_t2 = _` <div class="cds--col-lg-16">${0}</div> `), story()));
+
+/**
+ * Wraps provided Storybook story in Carbon grid with a half-width, centered column.
+ *
+ * @param story Storybook story
+ * @returns {TemplateResult}
+ */
+export const grid8ColCentered = story => gridNoCol(html(_t3 || (_t3 = _` <div class="cds--offset-lg-4 cds--col-lg-8">${0}</div> `), story()));
+//# sourceMappingURL=storybook-decorators.js.map

package/es/globals/internal/storybook-decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook-decorators.js","names":["html","gridNoCol","story","_t","_","Function","grid16Col","_t2","grid8ColCentered","_t3"],"sources":["globals/internal/storybook-decorators.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2024\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';\n\n/**\n * Wraps provided Storybook story in Carbon grid with no columns.\n *\n * @param story Storybook story\n * @returns {TemplateResult}\n */\nexport const gridNoCol = (story) => html`\n  <div class=\"cds--grid c4d-story-padding\">\n    <div class=\"cds--row\">${story instanceof Function ? story() : story}</div>\n  </div>\n`;\n\n/**\n * Wraps provided Storybook story in Carbon grid with a single full-width column.\n *\n * @param story Storybook story\n * @returns {TemplateResult}\n */\nexport const grid16Col = (story) =>\n  gridNoCol(html` <div class=\"cds--col-lg-16\">${story()}</div> `);\n\n/**\n * Wraps provided Storybook story in Carbon grid with a half-width, centered column.\n *\n * @param story Storybook story\n * @returns {TemplateResult}\n */\nexport const grid8ColCentered = (story) =>\n  gridNoCol(\n    html` <div class=\"cds--offset-lg-4 cds--col-lg-8\">${story()}</div> `\n  );\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,KAAK;;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAIC,KAAK,IAAKF,IAAI,CAAAG,EAAA,KAAAA,EAAA,GAAAC,CAAA;AACxC;AACA,4BAFwC;AACxC;AACA,CAFwC,GAEZF,KAAK,YAAYG,QAAQ,GAAGH,KAAK,CAAC,CAAC,GAAGA,KAAK,CAEtE;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,SAAS,GAAIJ,KAAK,IAC7BD,SAAS,CAACD,IAAI,CAAAO,GAAA,KAAAA,GAAA,GAAAH,CAAA,6CAAgCF,KAAK,CAAC,CAAC,CAAS,CAAC;;AAEjE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,gBAAgB,GAAIN,KAAK,IACpCD,SAAS,CACPD,IAAI,CAAAS,GAAA,KAAAA,GAAA,GAAAL,CAAA,6DAAgDF,KAAK,CAAC,CAAC,CAC7D,CAAC","ignoreList":[]}

package/es/globals/mixins/throttled-input.js

@@ -30,10 +30,6 @@ const ThrottledInputMixin = Base => {
        * @private
        */
       _defineProperty(this, "_throttledHandleInput", null);
-      /**
-       * The throttle timeout to run query upon user input.
-       */
-      _defineProperty(this, "inputTimeout", 200);
     }
     /**
      * Handles the throttled `input` event.
@@ -64,6 +60,11 @@ const ThrottledInputMixin = Base => {
       }
       this._throttledHandleInput = throttle(this._handleThrottledInput, this.inputTimeout);
     }
+
+    /**
+     * The throttle timeout to run query upon user input.
+     */
+
     connectedCallback() {
       // TS seems to miss `HTMLElement.prototype.connectedCallback()` definition
       // @ts-ignore

package/es/globals/mixins/throttled-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"throttled-input.js","names":["throttle","on","ThrottledInputMixin","Base","ThrottledInputMixinImpl","constructor","args","_defineProperty","_invokeHandleThrottledInput","event","_this$_throttledHandl","_throttledHandleInput","call","_updateThrottledHandleInput","cancel","_handleThrottledInput","inputTimeout","connectedCallback","eventInput","_hInputToBeThrottled","disconnectedCallback","release","updated","changedProperties","has"],"sources":["globals/mixins/throttled-input.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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 throttle from 'lodash-es/throttle';\nimport on from '@carbon/web-components/es/globals/mixins/on.js';\nimport Handle from '../internal/handle';\n\nimport { Constructor } from '../defs';\n\n/**\n * @param Base The base class.\n * @returns A mix-in that handles `input` event and makes throtted calls to `_handleThrottledInput`.\n */\nconst ThrottledInputMixin = <T extends Constructor<HTMLElement>>(Base: T) => {\n  abstract class ThrottledInputMixinImpl extends Base {\n    /**\n     * Handles the throttled `input` event.\n     *\n     * @param event The event.\n     * @protected\n     */\n    abstract _handleThrottledInput(event: InputEvent): void;\n\n    /**\n     * The handle for the listener of `input` event.\n     *\n     * @private\n     */\n    _hInputToBeThrottled: Handle | null = null;\n\n    /**\n     * The throttled listener of `input` event.\n     *\n     * @private\n     */\n    _throttledHandleInput:\n      | (((event: InputEvent) => void) & { cancel(): void })\n      | null = null;\n\n    /**\n     * Handles `input` event on the search box.\n     *\n     * @param event The event.\n     * @private\n     */\n    _invokeHandleThrottledInput(event: InputEvent) {\n      this._throttledHandleInput?.(event);\n    }\n\n    /**\n     * Updates the throttled listener of `input` event upon change in `inputTimeout`.\n     *\n     * @private\n     */\n    _updateThrottledHandleInput() {\n      if (this._throttledHandleInput) {\n        this._throttledHandleInput.cancel();\n        this._throttledHandleInput = null;\n      }\n      this._throttledHandleInput = throttle(\n        this._handleThrottledInput,\n        this.inputTimeout\n      );\n    }\n\n    /**\n     * The throttle timeout to run query upon user input.\n     */\n    inputTimeout = 200;\n\n    connectedCallback() {\n      // TS seems to miss `HTMLElement.prototype.connectedCallback()` definition\n      // @ts-ignore\n      super.connectedCallback();\n      const { eventInput } = this.constructor as typeof ThrottledInputMixinImpl;\n      this._hInputToBeThrottled = on(\n        this,\n        eventInput,\n        this._invokeHandleThrottledInput as EventListener\n      );\n      this._updateThrottledHandleInput();\n    }\n\n    disconnectedCallback() {\n      if (this._throttledHandleInput) {\n        this._throttledHandleInput.cancel();\n        this._throttledHandleInput = null;\n      }\n      if (this._hInputToBeThrottled) {\n        this._hInputToBeThrottled = this._hInputToBeThrottled.release();\n      }\n      // TS seems to miss `HTMLElement.prototype.disconnectedCallback()` definition\n      // @ts-ignore\n      super.disconnectedCallback();\n    }\n\n    updated(changedProperties) {\n      if (changedProperties.has('inputTimeout')) {\n        this._updateThrottledHandleInput();\n      }\n    }\n\n    /**\n     * The event that represents the user input gesture.\n     */\n    static eventInput = 'input';\n  }\n  return ThrottledInputMixinImpl;\n};\n\nexport default ThrottledInputMixin;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,oBAAoB;AACzC,OAAOC,EAAE,MAAM,gDAAgD;AAK/D;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAwCC,IAAO,IAAK;EAC3E,MAAeC,uBAAuB,SAASD,IAAI,CAAC;IAAAE,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MASlD;AACJ;AACA;AACA;AACA;MAJIC,eAAA,+BAKsC,IAAI;MAE1C;AACJ;AACA;AACA;AACA;MAJIA,eAAA,gCAOW,IAAI;MA4Bf;AACJ;AACA;MAFIA,eAAA,uBAGe,GAAG;IAAA;IArDlB;AACJ;AACA;AACA;AACA;AACA;IAmBI;AACJ;AACA;AACA;AACA;AACA;IACIC,2BAA2BA,CAACC,KAAiB,EAAE;MAAA,IAAAC,qBAAA;MAC7C,CAAAA,qBAAA,OAAI,CAACC,qBAAqB,cAAAD,qBAAA,eAA1BA,qBAAA,CAAAE,IAAA,KAAI,EAAyBH,KAAK,CAAC;IACrC;;IAEA;AACJ;AACA;AACA;AACA;IACII,2BAA2BA,CAAA,EAAG;MAC5B,IAAI,IAAI,CAACF,qBAAqB,EAAE;QAC9B,IAAI,CAACA,qBAAqB,CAACG,MAAM,CAAC,CAAC;QACnC,IAAI,CAACH,qBAAqB,GAAG,IAAI;MACnC;MACA,IAAI,CAACA,qBAAqB,GAAGX,QAAQ,CACnC,IAAI,CAACe,qBAAqB,EAC1B,IAAI,CAACC,YACP,CAAC;IACH;IAOAC,iBAAiBA,CAAA,EAAG;MAClB;MACA;MACA,KAAK,CAACA,iBAAiB,CAAC,CAAC;MACzB,MAAM;QAAEC;MAAW,CAAC,GAAG,IAAI,CAACb,WAA6C;MACzE,IAAI,CAACc,oBAAoB,GAAGlB,EAAE,CAC5B,IAAI,EACJiB,UAAU,EACV,IAAI,CAACV,2BACP,CAAC;MACD,IAAI,CAACK,2BAA2B,CAAC,CAAC;IACpC;IAEAO,oBAAoBA,CAAA,EAAG;MACrB,IAAI,IAAI,CAACT,qBAAqB,EAAE;QAC9B,IAAI,CAACA,qBAAqB,CAACG,MAAM,CAAC,CAAC;QACnC,IAAI,CAACH,qBAAqB,GAAG,IAAI;MACnC;MACA,IAAI,IAAI,CAACQ,oBAAoB,EAAE;QAC7B,IAAI,CAACA,oBAAoB,GAAG,IAAI,CAACA,oBAAoB,CAACE,OAAO,CAAC,CAAC;MACjE;MACA;MACA;MACA,KAAK,CAACD,oBAAoB,CAAC,CAAC;IAC9B;IAEAE,OAAOA,CAACC,iBAAiB,EAAE;MACzB,IAAIA,iBAAiB,CAACC,GAAG,CAAC,cAAc,CAAC,EAAE;QACzC,IAAI,CAACX,2BAA2B,CAAC,CAAC;MACpC;IACF;;IAEA;AACJ;AACA;EAEE;EAACN,eAAA,CA5FcH,uBAAuB,gBA2FhB,OAAO;EAE7B,OAAOA,uBAAuB;AAChC,CAAC;AAED,eAAeF,mBAAmB","ignoreList":[]}
+{"version":3,"file":"throttled-input.js","names":["throttle","on","ThrottledInputMixin","Base","ThrottledInputMixinImpl","constructor","args","_defineProperty","_invokeHandleThrottledInput","event","_this$_throttledHandl","_throttledHandleInput","call","_updateThrottledHandleInput","cancel","_handleThrottledInput","inputTimeout","connectedCallback","eventInput","_hInputToBeThrottled","disconnectedCallback","release","updated","changedProperties","has"],"sources":["globals/mixins/throttled-input.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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 throttle from 'lodash-es/throttle';\nimport on from '@carbon/web-components/es/globals/mixins/on.js';\nimport Handle from '../internal/handle';\n\nimport { Constructor } from '../defs';\n\n/**\n * @param Base The base class.\n * @returns A mix-in that handles `input` event and makes throtted calls to `_handleThrottledInput`.\n */\nconst ThrottledInputMixin = <T extends Constructor<HTMLElement>>(Base: T) => {\n  abstract class ThrottledInputMixinImpl extends Base {\n    /**\n     * Handles the throttled `input` event.\n     *\n     * @param event The event.\n     * @protected\n     */\n    abstract _handleThrottledInput(event: InputEvent): void;\n\n    /**\n     * The handle for the listener of `input` event.\n     *\n     * @private\n     */\n    _hInputToBeThrottled: Handle | null = null;\n\n    /**\n     * The throttled listener of `input` event.\n     *\n     * @private\n     */\n    _throttledHandleInput:\n      | (((event: InputEvent) => void) & { cancel(): void })\n      | null = null;\n\n    /**\n     * Handles `input` event on the search box.\n     *\n     * @param event The event.\n     * @private\n     */\n    _invokeHandleThrottledInput(event: InputEvent) {\n      this._throttledHandleInput?.(event);\n    }\n\n    /**\n     * Updates the throttled listener of `input` event upon change in `inputTimeout`.\n     *\n     * @private\n     */\n    _updateThrottledHandleInput() {\n      if (this._throttledHandleInput) {\n        this._throttledHandleInput.cancel();\n        this._throttledHandleInput = null;\n      }\n      this._throttledHandleInput = throttle(\n        this._handleThrottledInput,\n        this.inputTimeout\n      );\n    }\n\n    /**\n     * The throttle timeout to run query upon user input.\n     */\n    abstract inputTimeout: number;\n\n    connectedCallback() {\n      // TS seems to miss `HTMLElement.prototype.connectedCallback()` definition\n      // @ts-ignore\n      super.connectedCallback();\n      const { eventInput } = this.constructor as typeof ThrottledInputMixinImpl;\n      this._hInputToBeThrottled = on(\n        this,\n        eventInput,\n        this._invokeHandleThrottledInput as EventListener\n      );\n      this._updateThrottledHandleInput();\n    }\n\n    disconnectedCallback() {\n      if (this._throttledHandleInput) {\n        this._throttledHandleInput.cancel();\n        this._throttledHandleInput = null;\n      }\n      if (this._hInputToBeThrottled) {\n        this._hInputToBeThrottled = this._hInputToBeThrottled.release();\n      }\n      // TS seems to miss `HTMLElement.prototype.disconnectedCallback()` definition\n      // @ts-ignore\n      super.disconnectedCallback();\n    }\n\n    updated(changedProperties) {\n      if (changedProperties.has('inputTimeout')) {\n        this._updateThrottledHandleInput();\n      }\n    }\n\n    /**\n     * The event that represents the user input gesture.\n     */\n    static eventInput = 'input';\n  }\n  return ThrottledInputMixinImpl;\n};\n\nexport default ThrottledInputMixin;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,QAAQ,MAAM,oBAAoB;AACzC,OAAOC,EAAE,MAAM,gDAAgD;AAK/D;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAwCC,IAAO,IAAK;EAC3E,MAAeC,uBAAuB,SAASD,IAAI,CAAC;IAAAE,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MASlD;AACJ;AACA;AACA;AACA;MAJIC,eAAA,+BAKsC,IAAI;MAE1C;AACJ;AACA;AACA;AACA;MAJIA,eAAA,gCAOW,IAAI;IAAA;IAtBf;AACJ;AACA;AACA;AACA;AACA;IAmBI;AACJ;AACA;AACA;AACA;AACA;IACIC,2BAA2BA,CAACC,KAAiB,EAAE;MAAA,IAAAC,qBAAA;MAC7C,CAAAA,qBAAA,OAAI,CAACC,qBAAqB,cAAAD,qBAAA,eAA1BA,qBAAA,CAAAE,IAAA,KAAI,EAAyBH,KAAK,CAAC;IACrC;;IAEA;AACJ;AACA;AACA;AACA;IACII,2BAA2BA,CAAA,EAAG;MAC5B,IAAI,IAAI,CAACF,qBAAqB,EAAE;QAC9B,IAAI,CAACA,qBAAqB,CAACG,MAAM,CAAC,CAAC;QACnC,IAAI,CAACH,qBAAqB,GAAG,IAAI;MACnC;MACA,IAAI,CAACA,qBAAqB,GAAGX,QAAQ,CACnC,IAAI,CAACe,qBAAqB,EAC1B,IAAI,CAACC,YACP,CAAC;IACH;;IAEA;AACJ;AACA;;IAGIC,iBAAiBA,CAAA,EAAG;MAClB;MACA;MACA,KAAK,CAACA,iBAAiB,CAAC,CAAC;MACzB,MAAM;QAAEC;MAAW,CAAC,GAAG,IAAI,CAACb,WAA6C;MACzE,IAAI,CAACc,oBAAoB,GAAGlB,EAAE,CAC5B,IAAI,EACJiB,UAAU,EACV,IAAI,CAACV,2BACP,CAAC;MACD,IAAI,CAACK,2BAA2B,CAAC,CAAC;IACpC;IAEAO,oBAAoBA,CAAA,EAAG;MACrB,IAAI,IAAI,CAACT,qBAAqB,EAAE;QAC9B,IAAI,CAACA,qBAAqB,CAACG,MAAM,CAAC,CAAC;QACnC,IAAI,CAACH,qBAAqB,GAAG,IAAI;MACnC;MACA,IAAI,IAAI,CAACQ,oBAAoB,EAAE;QAC7B,IAAI,CAACA,oBAAoB,GAAG,IAAI,CAACA,oBAAoB,CAACE,OAAO,CAAC,CAAC;MACjE;MACA;MACA;MACA,KAAK,CAACD,oBAAoB,CAAC,CAAC;IAC9B;IAEAE,OAAOA,CAACC,iBAAiB,EAAE;MACzB,IAAIA,iBAAiB,CAACC,GAAG,CAAC,cAAc,CAAC,EAAE;QACzC,IAAI,CAACX,2BAA2B,CAAC,CAAC;MACpC;IACF;;IAEA;AACJ;AACA;EAEE;EAACN,eAAA,CA5FcH,uBAAuB,gBA2FhB,OAAO;EAE7B,OAAOA,uBAAuB;AAChC,CAAC;AAED,eAAeF,mBAAmB","ignoreList":[]}

package/es/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -12,10 +12,10 @@
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.15.1',
+ * Carbon for IBM.com v2.16.0',
  */
 var settings = {
-  version: 'Carbon for IBM.com v2.15.1',
+  version: 'Carbon for IBM.com v2.16.0',
   stablePrefix: 'c4d',
   prefix: 'cds'
 };

package/lib/internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js

@@ -18,10 +18,10 @@ exports.default = void 0;
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.15.1',
+ * Carbon for IBM.com v2.16.0',
  */
 var settings = {
-  version: 'Carbon for IBM.com v2.15.1',
+  version: 'Carbon for IBM.com v2.16.0',
   stablePrefix: 'c4d',
   prefix: 'cds'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.15.1",
+  "version": "2.16.0-rc.0",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -88,12 +88,13 @@
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "upgrade-carbon": "yarn upgrade-interactive @carbon/web-components @carbon/icon-helpers @carbon/icons --latest --exact",
     "visual-snapshot": "yarn percy storybook:start ./storybook-static",
-    "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
+    "wca": "web-component-analyzer analyze src --outFile custom-elements.json",
+    "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.15.1",
-    "@carbon/ibmdotcom-styles": "2.15.1",
-    "@carbon/ibmdotcom-utilities": "2.15.1",
+    "@carbon/ibmdotcom-services": "2.16.0-rc.0",
+    "@carbon/ibmdotcom-styles": "2.16.0-rc.0",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.0",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",
@@ -242,5 +243,5 @@
     "web-component-analyzer": "1.2.0-next.0",
     "webpack": "^4.46.0"
   },
-  "gitHead": "2d8af2dbc0642bec988921e9ed8b2bbaafca60ec"
+  "gitHead": "850b531f80c907c8818579e78dbf318ba2769b64"
 }

package/scss/components/promo-banner/promo-banner.scss

@@ -0,0 +1,163 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/grid' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
+
+$css--plex: true !default;
+$half-gutter: $grid-gutter / 2;
+
+$md-breakpoint-width: map-get(map-get($grid-breakpoints, md), width);
+$lg-breakpoint-width: map-get(map-get($grid-breakpoints, lg), width);
+$xlg-breakpoint-width: map-get(map-get($grid-breakpoints, xlg), width);
+$max-breakpoint-width: map-get(map-get($grid-breakpoints, max), width);
+
+// TODO: Move these calculations to a single importable file.
+//
+// We need lower and upper bounds for a container occupying 12 / 16 columns at
+// the lg and xlg breakpoints. For the lower bound we take the breakpoint
+// size, less the 2rem of outer padding, multiplied by 12 / 16, less 2rem of
+// column padding. For the upper bound we take the next breakpoint size and
+// do a similar calculation with a slight tweak of subtracting 0.02 from the
+// breakpoint size as a starting point, similar to how the
+// breakpoint-between mixin works. Note that this approach my not work
+// cleanly for the narrow or condensed grid due to the necessary assumptions
+// made for padding widths.
+$lg-12-column-lower-bound: ($lg-breakpoint-width * (12 / 16)) - 2rem;
+$lg-12-column-upper-bound: ($xlg-breakpoint-width - 0.02) * (12 / 16);
+$xlg-12-column-lower-bound: $xlg-breakpoint-width * (12 / 16);
+$xlg-12-column-upper-bound: ($max-breakpoint-width - 0.02) * (12 / 16);
+
+:host(#{$c4d-prefix}-promo-banner) {
+  display: block;
+  /* stylelint-disable-next-line property-no-unknown */
+  container: promo-banner / inline-size;
+
+  [hidden] {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+
+  .banner-wrapper {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    background-color: $layer;
+    color: $text-primary;
+
+    @include breakpoint-down(lg) {
+      &:not(.no-cta) {
+        /* stylelint-disable-next-line c4d/require-color-with-bg */
+        &:hover {
+          background-color: $layer-hover;
+        }
+
+        &:focus-within {
+          outline: $spacing-01 solid $focus;
+          outline-offset: calc(-1 * #{$spacing-01});
+        }
+      }
+    }
+  }
+
+  .banner-image {
+    position: relative;
+    align-self: stretch;
+
+    @include make-col(4, 16);
+    @include breakpoint(lg) {
+      /* stylelint-disable-next-line scss/at-rule-no-unknown */
+      @container promo-banner (inline-size <= #{$lg-12-column-upper-bound}) {
+        display: none;
+      }
+    }
+
+    @include breakpoint(xlg) {
+      /* stylelint-disable-next-line scss/at-rule-no-unknown */
+      @container promo-banner (inline-size <= #{$xlg-12-column-upper-bound}) {
+        display: none;
+      }
+    }
+  }
+
+  ::slotted([slot='image']) {
+    /* stylelint-disable-next-line property-no-unknown */
+    position: absolute;
+    aspect-ratio: auto;
+    block-size: 100%;
+    inline-size: 100%;
+    padding-block: 0;
+  }
+
+  .banner-content {
+    flex-grow: 1;
+    padding-block: $spacing-05;
+    padding-inline: $half-gutter;
+
+    @include breakpoint(md) {
+      padding-block: $spacing-07;
+    }
+  }
+
+  .banner-cta {
+    padding-block: $spacing-05;
+    padding-inline: $half-gutter;
+    text-align: end;
+
+    @include make-col(1, 4);
+
+    @include breakpoint-down(lg) {
+      &:focus {
+        outline: none;
+      }
+
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        inset: 0;
+      }
+    }
+
+    @include breakpoint(md) {
+      @include make-col(1, 8);
+
+      padding-block: $spacing-07;
+    }
+
+    @include breakpoint(lg) {
+      text-align: start;
+
+      @include make-col(4, 16);
+      @include make-col-offset(2, 16);
+
+      /* stylelint-disable-next-line scss/at-rule-no-unknown */
+      @container promo-banner (inline-size <= #{$lg-12-column-upper-bound}) {
+        @include make-col(4, 12);
+      }
+    }
+
+    @include breakpoint(xlg) {
+      /* stylelint-disable-next-line scss/at-rule-no-unknown */
+      @container promo-banner (inline-size <= #{$xlg-12-column-upper-bound}) {
+        @include make-col(4, 12);
+      }
+    }
+  }
+
+  ::slotted([slot='cta']) {
+    inline-size: 100%;
+  }
+}