@carbon/ibmdotcom-web-components 2.23.0 → 2.25.0

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

@@ -20,6 +20,8 @@ import { GRID_MODE } from "./defs.js";
 import styles from "././card-group.css.js";
 import StableSelectorMixin from "../../globals/mixins/stable-selector.js";
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import MediaQueryMixin, { MQBreakpoints, MQDirs } from "../../component-mixins/media-query/media-query.js";
 export { GRID_MODE };
 const {
   stablePrefix: c4dPrefix
@@ -30,8 +32,8 @@ const {
  *
  * @element c4d-card-group
  */
-let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], function (_initialize, _StableSelectorMixin) {
-  class C4DCardGroup extends _StableSelectorMixin {
+let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], function (_initialize, _MediaQueryMixin) {
+  class C4DCardGroup extends _MediaQueryMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
@@ -94,21 +96,35 @@ let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], functio
         return 3;
       }
     }, {
-      kind: "get",
-      decorators: [property({
-        type: Number,
-        attribute: 'cards-per-row'
-      })],
-      key: "cardsPerRow",
+      kind: "field",
+      decorators: [state()],
+      key: "_isMediumOrGreater",
+      value() {
+        return this.carbonBreakpoints.md.matches;
+      }
+    }, {
+      kind: "method",
+      key: "mediaQueryCallbackMD",
       value:
       /**
        * Default number of cards per row. Applies to >=`lg` breakpoint only.
        */
+      function mediaQueryCallbackMD() {
+        this._isMediumOrGreater = this.carbonBreakpoints.md.matches;
+      }
+
       /**
        * Number of cards per column.
        * If `--c4d--card-group--cards-in-row` CSS custom property is set to `<c4d-card-group>`.
        */
-      function () {
+    }, {
+      kind: "get",
+      decorators: [property({
+        type: Number,
+        attribute: 'cards-per-row'
+      })],
+      key: "cardsPerRow",
+      value: function () {
         const {
           _cardsPerRow: cardsPerRow,
           _cardsPerRowAuto: cardsPerRowAuto
@@ -149,13 +165,24 @@ let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], functio
       }
     }, {
       kind: "method",
-      key: "firstUpdated",
+      key: "isInsideBlockCards",
       value:
       /**
        * If using cards with pictogram.
        */
       // necessary to avoid using sameHeight utility
-      function firstUpdated() {
+      // Adding a class that will identify that c4d-card-group is inside c4d-content-block-cards for special treatment.
+      function isInsideBlockCards() {
+        const cardGroupParentEl = this.parentElement;
+        console.log(cardGroupParentEl);
+        if ((cardGroupParentEl === null || cardGroupParentEl === void 0 ? void 0 : cardGroupParentEl.tagName.toLowerCase()) === `${c4dPrefix}-content-block-cards`) {
+          this.classList.add('inside-block-cards');
+        }
+      }
+    }, {
+      kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated() {
         var _this$previousElement, _this$previousElement2;
         _superPropGet(C4DCardGroup, "connectedCallback", this, 3)([]);
         if ((_this$previousElement = this.previousElementSibling) !== null && _this$previousElement !== void 0 && (_this$previousElement2 = _this$previousElement.matches) !== null && _this$previousElement2 !== void 0 && _this$previousElement2.call(_this$previousElement, this.constructor.selectorCardInCard)) {
@@ -166,6 +193,7 @@ let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], functio
         const isFullWidthTemplate = document.body.getAttribute('data-fullwidthtemplate') === 'true';
         //Adds a class if true, for better css treatment in mobile for FW pages.
         this.classList.toggle('is-full-width-template', isFullWidthTemplate);
+        this.isInsideBlockCards();
       }
     }, {
       kind: "method",
@@ -175,6 +203,11 @@ let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], functio
         if (changedProperties.has('gridMode')) {
           this._childItems.forEach(e => e.gridMode = this.gridMode);
         }
+
+        //Setting grid mode to condensed in mobile in favor of scroll snap behavior
+        if (!this._isMediumOrGreater) {
+          this.gridMode = GRID_MODE.CONDENSED;
+        }
       }
     }, {
       kind: "method",
@@ -286,7 +319,9 @@ let C4DCardGroup = _decorate([customElement(`${c4dPrefix}-card-group`)], functio
       }
     }]
   };
-}, StableSelectorMixin(LitElement));
+}, MediaQueryMixin(HostListenerMixin(StableSelectorMixin(LitElement)), {
+  [MQBreakpoints.MD]: MQDirs.MIN
+}));
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default C4DCardGroup;
 //# sourceMappingURL=card-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card-group.js","names":["LitElement","html","property","state","settings","GRID_MODE","styles","StableSelectorMixin","carbonElement","customElement","stablePrefix","c4dPrefix","C4DCardGroup","_decorate","_initialize","_StableSelectorMixin","constructor","args","F","d","kind","key","value","_handleSlotChange","event","_childItems","target","assignedNodes","filter","elem","_matches","_ref","matches","call","selectorItem","forEach","e","hasAttribute","gridMode","CONDENSED","DEFAULT","customPropertyCardsPerRow","style","setProperty","String","cardsPerRow","decorators","type","Number","attribute","_cardsPerRow","_cardsPerRowAuto","cardsPerRowAuto","reflect","Boolean","firstUpdated","_this$previousElement","_this$previousElement2","_superPropGet","previousElementSibling","selectorCardInCard","setAttribute","isFullWidthTemplate","document","body","getAttribute","classList","toggle","updated","changedProperties","has","render","_t","_","static"],"sources":["components/card-group/card-group.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2025\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 } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport { GRID_MODE } from './defs';\nimport styles from './card-group.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nexport { GRID_MODE };\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Card Group.\n *\n * @element c4d-card-group\n */\n@customElement(`${c4dPrefix}-card-group`)\nclass C4DCardGroup extends StableSelectorMixin(LitElement) {\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItems: any[] = [];\n\n  /**\n   * Handler for @slotchange, set the height of all headings to the tallest height.\n   *\n   * @private\n   */\n  private _handleSlotChange(event: Event) {\n    this._childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches?.(\n          (this.constructor as typeof C4DCardGroup).selectorItem\n        )\n      );\n\n    // Retrieve item heading, eyebrows, and footers to set same height.\n    if (this._childItems) {\n      this._childItems.forEach((e) => {\n        if (!e.hasAttribute('href') && this.gridMode === GRID_MODE.CONDENSED) {\n          this.gridMode = GRID_MODE.DEFAULT;\n        }\n      });\n\n      const { customPropertyCardsPerRow } = this\n        .constructor as typeof C4DCardGroup;\n      this.style.setProperty(\n        customPropertyCardsPerRow,\n        String(this.cardsPerRow)\n      );\n    }\n  }\n\n  /**\n   * The number of columns per row. Min 2, max 4, default 3. Applies to >=`lg` breakpoint only.\n   */\n  @state()\n  private _cardsPerRow?: number;\n\n  /**\n   * Default number of cards per row. Applies to >=`lg` breakpoint only.\n   */\n  @state()\n  private _cardsPerRowAuto = 3;\n\n  /**\n   * Number of cards per column.\n   * If `--c4d--card-group--cards-in-row` CSS custom property is set to `<c4d-card-group>`.\n   */\n  @property({ type: Number, attribute: 'cards-per-row' })\n  get cardsPerRow() {\n    const { _cardsPerRow: cardsPerRow, _cardsPerRowAuto: cardsPerRowAuto } =\n      this;\n    return cardsPerRow ?? cardsPerRowAuto;\n  }\n\n  set cardsPerRow(value: number) {\n    this._cardsPerRow = value;\n    // Don't call `.requestUpdate()` here given we track updates via `_cardsPerRow` and `_cardsPerRowAuto`\n  }\n\n  /**\n   * The Grid Mode for the component layout.\n   * Condensed (1px) | Narrow (16px) | Default(32px).\n   */\n  @property({ attribute: 'grid-mode', reflect: true })\n  gridMode = GRID_MODE.DEFAULT;\n\n  /**\n   * If using cards with pictogram.\n   */\n  // necessary to avoid using sameHeight utility\n  @property({ type: Boolean, reflect: true })\n  pictograms = false;\n\n  firstUpdated() {\n    super.connectedCallback();\n\n    if (\n      this.previousElementSibling?.matches?.(\n        (this.constructor as typeof C4DCardGroup).selectorCardInCard\n      )\n    ) {\n      this.setAttribute('with-card-in-card', '');\n    }\n\n    // Check if the component is living in a Full Width or Table of Contents template.\n    const isFullWidthTemplate =\n      document.body.getAttribute('data-fullwidthtemplate') === 'true';\n    //Adds a class if true, for better css treatment in mobile for FW pages.\n    this.classList.toggle('is-full-width-template', isFullWidthTemplate);\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('gridMode')) {\n      this._childItems.forEach((e) => (e.gridMode = this.gridMode));\n    }\n  }\n\n  render() {\n    return html` <slot @slotchange=\"${this._handleSlotChange}\"></slot> `;\n  }\n\n  /**\n   * The CSS custom property name for the live button group item cout.\n   */\n  static get customPropertyCardsPerRow() {\n    return `--${c4dPrefix}--card-group--cards-in-row`;\n  }\n\n  static get stableSelector() {\n    return `${c4dPrefix}--card-group`;\n  }\n\n  /**\n   * A selector that will return the card-in-card selector\n   */\n  static get selectorCardInCard() {\n    return `${c4dPrefix}-card-in-card`;\n  }\n\n  /**\n   * A selector that will return the card item.\n   */\n  static get selectorItem() {\n    return `${c4dPrefix}-card-group-item`;\n  }\n\n  /**\n   * A selector that will return the card item's eyebrow\n   */\n  static get selectorItemEyebrow() {\n    return `${c4dPrefix}-card-eyebrow`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemTagGroup() {\n    return `div`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemParagraph() {\n    return `p`;\n  }\n\n  /**\n   * A selector that will return the card item's heading\n   */\n  static get selectorItemHeading() {\n    return `${c4dPrefix}-card-heading`;\n  }\n\n  /**\n   * A selector that will return the card item's footer\n   */\n  static get selectorItemFooter() {\n    return `${c4dPrefix}-card-cta-footer`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DCardGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"card-group.js","names":["LitElement","html","property","state","settings","GRID_MODE","styles","StableSelectorMixin","carbonElement","customElement","HostListenerMixin","MediaQueryMixin","MQBreakpoints","MQDirs","stablePrefix","c4dPrefix","C4DCardGroup","_decorate","_initialize","_MediaQueryMixin","constructor","args","F","d","kind","key","value","_handleSlotChange","event","_childItems","target","assignedNodes","filter","elem","_matches","_ref","matches","call","selectorItem","forEach","e","hasAttribute","gridMode","CONDENSED","DEFAULT","customPropertyCardsPerRow","style","setProperty","String","cardsPerRow","decorators","carbonBreakpoints","md","mediaQueryCallbackMD","_isMediumOrGreater","type","Number","attribute","_cardsPerRow","_cardsPerRowAuto","cardsPerRowAuto","reflect","Boolean","isInsideBlockCards","cardGroupParentEl","parentElement","console","log","tagName","toLowerCase","classList","add","firstUpdated","_this$previousElement","_this$previousElement2","_superPropGet","previousElementSibling","selectorCardInCard","setAttribute","isFullWidthTemplate","document","body","getAttribute","toggle","updated","changedProperties","has","render","_t","_","static","MD","MIN"],"sources":["components/card-group/card-group.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2025\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 } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport { GRID_MODE } from './defs';\nimport styles from './card-group.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport MediaQueryMixin, {\n  MQBreakpoints,\n  MQDirs,\n} from '../../component-mixins/media-query/media-query';\n\nexport { GRID_MODE };\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Card Group.\n *\n * @element c4d-card-group\n */\n@customElement(`${c4dPrefix}-card-group`)\nclass C4DCardGroup extends MediaQueryMixin(\n  HostListenerMixin(StableSelectorMixin(LitElement)),\n  { [MQBreakpoints.MD]: MQDirs.MIN }\n) {\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItems: any[] = [];\n\n  /**\n   * Handler for @slotchange, set the height of all headings to the tallest height.\n   *\n   * @private\n   */\n  private _handleSlotChange(event: Event) {\n    this._childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches?.(\n          (this.constructor as typeof C4DCardGroup).selectorItem\n        )\n      );\n\n    // Retrieve item heading, eyebrows, and footers to set same height.\n    if (this._childItems) {\n      this._childItems.forEach((e) => {\n        if (!e.hasAttribute('href') && this.gridMode === GRID_MODE.CONDENSED) {\n          this.gridMode = GRID_MODE.DEFAULT;\n        }\n      });\n\n      const { customPropertyCardsPerRow } = this\n        .constructor as typeof C4DCardGroup;\n      this.style.setProperty(\n        customPropertyCardsPerRow,\n        String(this.cardsPerRow)\n      );\n    }\n  }\n\n  /**\n   * The number of columns per row. Min 2, max 4, default 3. Applies to >=`lg` breakpoint only.\n   */\n  @state()\n  private _cardsPerRow?: number;\n\n  /**\n   * Default number of cards per row. Applies to >=`lg` breakpoint only.\n   */\n  @state()\n  private _cardsPerRowAuto = 3;\n\n  @state()\n  private _isMediumOrGreater = this.carbonBreakpoints.md.matches;\n\n  protected mediaQueryCallbackMD() {\n    this._isMediumOrGreater = this.carbonBreakpoints.md.matches;\n  }\n\n  /**\n   * Number of cards per column.\n   * If `--c4d--card-group--cards-in-row` CSS custom property is set to `<c4d-card-group>`.\n   */\n  @property({ type: Number, attribute: 'cards-per-row' })\n  get cardsPerRow() {\n    const { _cardsPerRow: cardsPerRow, _cardsPerRowAuto: cardsPerRowAuto } =\n      this;\n    return cardsPerRow ?? cardsPerRowAuto;\n  }\n\n  set cardsPerRow(value: number) {\n    this._cardsPerRow = value;\n    // Don't call `.requestUpdate()` here given we track updates via `_cardsPerRow` and `_cardsPerRowAuto`\n  }\n\n  /**\n   * The Grid Mode for the component layout.\n   * Condensed (1px) | Narrow (16px) | Default(32px).\n   */\n  @property({ attribute: 'grid-mode', reflect: true })\n  gridMode = GRID_MODE.DEFAULT;\n\n  /**\n   * If using cards with pictogram.\n   */\n  // necessary to avoid using sameHeight utility\n  @property({ type: Boolean, reflect: true })\n  pictograms = false;\n\n  // Adding a class that will identify that c4d-card-group is inside c4d-content-block-cards for special treatment.\n  private isInsideBlockCards() {\n    const cardGroupParentEl = this.parentElement;\n    console.log(cardGroupParentEl);\n\n    if (\n      cardGroupParentEl?.tagName.toLowerCase() ===\n      `${c4dPrefix}-content-block-cards`\n    ) {\n      this.classList.add('inside-block-cards');\n    }\n  }\n\n  firstUpdated() {\n    super.connectedCallback();\n\n    if (\n      this.previousElementSibling?.matches?.(\n        (this.constructor as typeof C4DCardGroup).selectorCardInCard\n      )\n    ) {\n      this.setAttribute('with-card-in-card', '');\n    }\n\n    // Check if the component is living in a Full Width or Table of Contents template.\n    const isFullWidthTemplate =\n      document.body.getAttribute('data-fullwidthtemplate') === 'true';\n    //Adds a class if true, for better css treatment in mobile for FW pages.\n    this.classList.toggle('is-full-width-template', isFullWidthTemplate);\n\n    this.isInsideBlockCards();\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('gridMode')) {\n      this._childItems.forEach((e) => (e.gridMode = this.gridMode));\n    }\n\n    //Setting grid mode to condensed in mobile in favor of scroll snap behavior\n    if (!this._isMediumOrGreater) {\n      this.gridMode = GRID_MODE.CONDENSED;\n    }\n  }\n\n  render() {\n    return html` <slot @slotchange=\"${this._handleSlotChange}\"></slot> `;\n  }\n\n  /**\n   * The CSS custom property name for the live button group item cout.\n   */\n  static get customPropertyCardsPerRow() {\n    return `--${c4dPrefix}--card-group--cards-in-row`;\n  }\n\n  static get stableSelector() {\n    return `${c4dPrefix}--card-group`;\n  }\n\n  /**\n   * A selector that will return the card-in-card selector\n   */\n  static get selectorCardInCard() {\n    return `${c4dPrefix}-card-in-card`;\n  }\n\n  /**\n   * A selector that will return the card item.\n   */\n  static get selectorItem() {\n    return `${c4dPrefix}-card-group-item`;\n  }\n\n  /**\n   * A selector that will return the card item's eyebrow\n   */\n  static get selectorItemEyebrow() {\n    return `${c4dPrefix}-card-eyebrow`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemTagGroup() {\n    return `div`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemParagraph() {\n    return `p`;\n  }\n\n  /**\n   * A selector that will return the card item's heading\n   */\n  static get selectorItemHeading() {\n    return `${c4dPrefix}-card-heading`;\n  }\n\n  /**\n   * A selector that will return the card item's footer\n   */\n  static get selectorItemFooter() {\n    return `${c4dPrefix}-card-cta-footer`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DCardGroup;\n"],"mappings":"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","ignoreList":[]}