@carbon/ibm-products-web-components 0.49.0 → 0.50.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/es/components/guide-banner/guide-banner.d.ts.map +1 -1
  2. package/es/components/guide-banner/guide-banner.js +2 -3
  3. package/es/components/guide-banner/guide-banner.js.map +1 -1
  4. package/es/components/page-header/page-header-scroller.d.ts.map +1 -1
  5. package/es/components/page-header/page-header-scroller.js +2 -2
  6. package/es/components/page-header/page-header-scroller.js.map +1 -1
  7. package/es/components/tearsheet/tearsheet.scss.js +1 -1
  8. package/es/components/tearsheet-preview/tearsheet-header-content.d.ts +8 -0
  9. package/es/components/tearsheet-preview/tearsheet-header-content.d.ts.map +1 -1
  10. package/es/components/tearsheet-preview/tearsheet-header-content.js +72 -15
  11. package/es/components/tearsheet-preview/tearsheet-header-content.js.map +1 -1
  12. package/es/components/tearsheet-preview/tearsheet-header-content.scss.js +1 -1
  13. package/es/components/tearsheet-preview/tearsheet-header-content.scss.js.map +1 -1
  14. package/es/components/tearsheet-preview/tearsheet-header.scss.js +1 -1
  15. package/es/components/tearsheet-preview/tearsheet-navigation-bar.scss.js +1 -1
  16. package/es/components/tearsheet-preview/tearsheet.scss.js +1 -1
  17. package/es/ibm-products-web-components/package.js +1 -1
  18. package/es-custom/components/guide-banner/guide-banner.js +2 -3
  19. package/es-custom/components/guide-banner/guide-banner.js.map +1 -1
  20. package/es-custom/components/page-header/page-header-scroller.js +2 -2
  21. package/es-custom/components/page-header/page-header-scroller.js.map +1 -1
  22. package/es-custom/components/tearsheet/tearsheet.scss.js +1 -1
  23. package/es-custom/components/tearsheet-preview/tearsheet-header-content.js +72 -15
  24. package/es-custom/components/tearsheet-preview/tearsheet-header-content.js.map +1 -1
  25. package/es-custom/components/tearsheet-preview/tearsheet-header-content.scss.js +1 -1
  26. package/es-custom/components/tearsheet-preview/tearsheet-header-content.scss.js.map +1 -1
  27. package/es-custom/components/tearsheet-preview/tearsheet-header.scss.js +1 -1
  28. package/es-custom/components/tearsheet-preview/tearsheet-navigation-bar.scss.js +1 -1
  29. package/es-custom/components/tearsheet-preview/tearsheet.scss.js +1 -1
  30. package/es-custom/ibm-products-web-components/package.js +1 -1
  31. package/lib/components/guide-banner/guide-banner.d.ts.map +1 -1
  32. package/lib/components/page-header/page-header-scroller.d.ts.map +1 -1
  33. package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts +8 -0
  34. package/lib/components/tearsheet-preview/tearsheet-header-content.d.ts.map +1 -1
  35. package/package.json +4 -4
  36. package/scss/components/tearsheet-preview/tearsheet-header-content.scss +9 -0
@@ -1 +1 @@
1
- {"version":3,"file":"guide-banner.d.ts","sourceRoot":"","sources":["../../../src/components/guide-banner/guide-banner.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,sDAAsD,CAAC;AAK9D,eAAO,MAAM,UAAU,qBAA2B,CAAC;;;;;;;;;;uBALG,CAAC;;;;;AAQvD;;;;;;;KAOK;AAEL,cACM,cAAe,SAAQ,mBAA6B;IAExD,YAAY,CAAC,EAAE,MAAM,CAAM;IAG3B,UAAU,CAAC,EAAE,MAAM,CAAM;IAGzB,IAAI,EAAE,OAAO,CAAS;IAGtB,SAAS,CAAC,EAAE,MAAM,CAAM;IAExB,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,KAAK,YAAY,WAEtB;IAED,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAYlB,MAAM;IA4CN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"guide-banner.d.ts","sourceRoot":"","sources":["../../../src/components/guide-banner/guide-banner.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,sDAAsD,CAAC;AAK9D,eAAO,MAAM,UAAU,qBAA2B,CAAC;;;;;;;;;;uBAJnD,CAAC;;;;;AAOD;;;;;;;KAOK;AAEL,cACM,cAAe,SAAQ,mBAA6B;IAExD,YAAY,CAAC,EAAE,MAAM,CAAM;IAG3B,UAAU,CAAC,EAAE,MAAM,CAAM;IAGzB,IAAI,EAAE,OAAO,CAAS;IAGtB,SAAS,CAAC,EAAE,MAAM,CAAM;IAExB,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,KAAK,YAAY,WAEtB;IAED,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU;IAYlB,MAAM;IA4CN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC"}
@@ -9,7 +9,7 @@ import "../../globals/settings.js";
9
9
  import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
10
10
  import guide_banner_default$1 from "./guide-banner.scss.js";
11
11
  import { classMap } from "lit/directives/class-map.js";
12
- import { LitElement, html, nothing } from "lit";
12
+ import { LitElement, html } from "lit";
13
13
  import { property } from "lit/decorators.js";
14
14
  import "@carbon/web-components/es/components/button/index.js";
15
15
  import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
@@ -67,8 +67,7 @@ let CDSGuideBanner = class CDSGuideBanner extends HostListenerMixin(LitElement)
67
67
  this.dispatchEvent(new CustomEvent(this.constructor.eventToggle, init));
68
68
  }
69
69
  _getTitle() {
70
- if (this.titleText) return html`<div class="${blockClass}__title">${this.titleText}</div>`;
71
- return nothing;
70
+ return html`<div class="${blockClass}__title">${this.titleText}</div>`;
72
71
  }
73
72
  _getButton() {
74
73
  const buttonText = this.open ? this.collapseText : this.expandText;
@@ -1 +1 @@
1
- {"version":3,"file":"guide-banner.js","names":["styles","customElement"],"sources":["../../../src/components/guide-banner/guide-banner.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport styles from './guide-banner.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/button/index.js';\nimport Close16 from '@carbon/icons/es/close/16';\nimport Idea20 from '@carbon/icons/es/idea/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\n\nexport const blockClass = `${prefix}--guidebanner`;\nconst blockEvent = `${prefix}-guidebanner`;\n\n/**\n * GuideBanner.\n *\n * @element c4p-guide-banner\n * @csspart guide-banner\n * @fires c4p-guide-banner-toggle Custom event fired when banner is opened\n * @fires c4p-guide-banner-close Custom event fired when banner is closed\n * */\n\n@customElement(`${prefix}-guide-banner`)\nclass CDSGuideBanner extends HostListenerMixin(LitElement) {\n @property({ type: String, reflect: true })\n collapseText?: string = '';\n\n @property({ type: String, reflect: true })\n expandText?: string = '';\n\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n @property({ type: String, reflect: true })\n titleText?: string = '';\n\n static get eventToggle() {\n return `${blockEvent}-toggle`;\n }\n\n static get eventOnClose() {\n return `${blockEvent}-close`;\n }\n\n private _handleClose() {\n const init = {\n bubbles: true,\n composed: true,\n detail: {},\n };\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSGuideBanner).eventOnClose,\n init\n )\n );\n }\n\n private _handleToggle() {\n this.open = !this.open;\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n open: this.open,\n },\n };\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSGuideBanner).eventToggle,\n init\n )\n );\n }\n\n private _getTitle() {\n if (this.titleText) {\n return html`<div class=\"${blockClass}__title\">${this.titleText}</div>`;\n }\n return nothing;\n }\n\n private _getButton() {\n const buttonText = this.open ? this.collapseText : this.expandText;\n return html`<cds-button\n kind=\"ghost\"\n size=\"md\"\n class=\"${blockClass}__toggle-button\"\n @click=${this._handleToggle}\n >\n ${buttonText}\n </cds-button>`;\n }\n\n render() {\n const classes = classMap({\n [`${blockClass}`]: true,\n [`${blockClass}__collapsible-collapsed`]: !this.open,\n });\n return html`\n <div class=\"${classes}\">\n <div class=\"${blockClass}__header\">\n <div class=\"${blockClass}__icon-idea\">\n <slot name=\"icon\">\n ${iconLoader(Idea20, {\n slot: 'icon',\n })}\n </slot>\n </div>\n ${this._getTitle()}\n <slot name=\"header\"></slot>\n <cds-button\n align=\"bottom-end\"\n class=\"${blockClass}__close-button\"\n kind=\"ghost\"\n size=\"md\"\n @click=\"${this._handleClose}\"\n >\n ${iconLoader(Close16, { slot: 'icon' })}\n </cds-button>\n </div>\n <details ?open=${this.open}>\n <slot name=\"body\"></slot>\n <summary\n tabindex=\"-1\"\n @click=${(evt: MouseEvent) => {\n evt.preventDefault();\n }}\n >\n <div class=\"${blockClass}__navigation\">\n <slot name=\"footer\">${this._getButton()}</slot>\n </div>\n </summary>\n </details>\n </div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSGuideBanner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,aAAa;AAC1B,MAAM,aAAa;;;;;;;;;AAWnB,IAAA,iBAAA,MACM,uBAAuB,kBAAkB,WAAW,CAAC;;;sBAEjC;oBAGF;cAGN;mBAGK;;CAErB,WAAW,cAAc;AACvB,SAAO,GAAG,WAAW;;CAGvB,WAAW,eAAe;AACxB,SAAO,GAAG,WAAW;;CAGvB,eAAuB;AAMrB,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,cAC5C;GAPF,SAAS;GACT,UAAU;GACV,QAAQ,EAAE;GAKJ,CACL,CACF;;CAGH,gBAAwB;AACtB,OAAK,OAAO,CAAC,KAAK;EAClB,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,MAAM,KAAK,MACZ;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,aAC5C,KACD,CACF;;CAGH,YAAoB;AAClB,MAAI,KAAK,UACP,QAAO,IAAI,eAAe,WAAW,WAAW,KAAK,UAAU;AAEjE,SAAO;;CAGT,aAAqB;EACnB,MAAM,aAAa,KAAK,OAAO,KAAK,eAAe,KAAK;AACxD,SAAO,IAAI;;;eAGA,WAAW;eACX,KAAK,cAAc;;QAE1B,WAAW;;;CAIjB,SAAS;AAKP,SAAO,IAAI;oBAJK,SAAS;IACtB,GAAG,eAAe;IAClB,GAAG,WAAW,2BAA2B,CAAC,KAAK;GACjD,CAEsB,CAAC;sBACN,WAAW;wBACT,WAAW;;gBAEnB,WAAW,QAAQ,EACnB,MAAM,QACP,CAAC,CAAC;;;YAGL,KAAK,WAAW,CAAC;;;;qBAIR,WAAW;;;sBAGV,KAAK,aAAa;;cAE1B,WAAW,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAC;;;yBAG3B,KAAK,KAAK;;;;sBAIb,QAAoB;AAC5B,OAAI,gBAAgB;IACpB;;0BAEY,WAAW;oCACD,KAAK,YAAY,CAAC;;;;;;;;gBAQpCA;;;YAlHf,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAGzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAGzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;6BAX3CC,cAAc,mBAAyB,CAAA,EAAA,eAAA;AAuHxC,IAAA,uBAAe"}
1
+ {"version":3,"file":"guide-banner.js","names":["styles","customElement"],"sources":["../../../src/components/guide-banner/guide-banner.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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 } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport styles from './guide-banner.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/button/index.js';\nimport Close16 from '@carbon/icons/es/close/16';\nimport Idea20 from '@carbon/icons/es/idea/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\n\nexport const blockClass = `${prefix}--guidebanner`;\nconst blockEvent = `${prefix}-guidebanner`;\n\n/**\n * GuideBanner.\n *\n * @element c4p-guide-banner\n * @csspart guide-banner\n * @fires c4p-guide-banner-toggle Custom event fired when banner is opened\n * @fires c4p-guide-banner-close Custom event fired when banner is closed\n * */\n\n@customElement(`${prefix}-guide-banner`)\nclass CDSGuideBanner extends HostListenerMixin(LitElement) {\n @property({ type: String, reflect: true })\n collapseText?: string = '';\n\n @property({ type: String, reflect: true })\n expandText?: string = '';\n\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n @property({ type: String, reflect: true })\n titleText?: string = '';\n\n static get eventToggle() {\n return `${blockEvent}-toggle`;\n }\n\n static get eventOnClose() {\n return `${blockEvent}-close`;\n }\n\n private _handleClose() {\n const init = {\n bubbles: true,\n composed: true,\n detail: {},\n };\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSGuideBanner).eventOnClose,\n init\n )\n );\n }\n\n private _handleToggle() {\n this.open = !this.open;\n const init = {\n bubbles: true,\n composed: true,\n detail: {\n open: this.open,\n },\n };\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSGuideBanner).eventToggle,\n init\n )\n );\n }\n\n private _getTitle() {\n return html`<div class=\"${blockClass}__title\">${this.titleText}</div>`;\n }\n\n private _getButton() {\n const buttonText = this.open ? this.collapseText : this.expandText;\n return html`<cds-button\n kind=\"ghost\"\n size=\"md\"\n class=\"${blockClass}__toggle-button\"\n @click=${this._handleToggle}\n >\n ${buttonText}\n </cds-button>`;\n }\n\n render() {\n const classes = classMap({\n [`${blockClass}`]: true,\n [`${blockClass}__collapsible-collapsed`]: !this.open,\n });\n return html`\n <div class=\"${classes}\">\n <div class=\"${blockClass}__header\">\n <div class=\"${blockClass}__icon-idea\">\n <slot name=\"icon\">\n ${iconLoader(Idea20, {\n slot: 'icon',\n })}\n </slot>\n </div>\n ${this._getTitle()}\n <slot name=\"header\"></slot>\n <cds-button\n align=\"bottom-end\"\n class=\"${blockClass}__close-button\"\n kind=\"ghost\"\n size=\"md\"\n @click=\"${this._handleClose}\"\n >\n ${iconLoader(Close16, { slot: 'icon' })}\n </cds-button>\n </div>\n <details ?open=${this.open}>\n <slot name=\"body\"></slot>\n <summary\n tabindex=\"-1\"\n @click=${(evt: MouseEvent) => {\n evt.preventDefault();\n }}\n >\n <div class=\"${blockClass}__navigation\">\n <slot name=\"footer\">${this._getButton()}</slot>\n </div>\n </summary>\n </details>\n </div>\n `;\n }\n\n static styles = styles;\n}\n\nexport default CDSGuideBanner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,aAAa;AAC1B,MAAM,aAAa;;;;;;;;;AAWnB,IAAA,iBAAA,MACM,uBAAuB,kBAAkB,WAAW,CAAC;;;sBAEjC;oBAGF;cAGN;mBAGK;;CAErB,WAAW,cAAc;AACvB,SAAO,GAAG,WAAW;;CAGvB,WAAW,eAAe;AACxB,SAAO,GAAG,WAAW;;CAGvB,eAAuB;AAMrB,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,cAC5C;GAPF,SAAS;GACT,UAAU;GACV,QAAQ,EAAE;GAKJ,CACL,CACF;;CAGH,gBAAwB;AACtB,OAAK,OAAO,CAAC,KAAK;EAClB,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,MAAM,KAAK,MACZ;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,aAC5C,KACD,CACF;;CAGH,YAAoB;AAClB,SAAO,IAAI,eAAe,WAAW,WAAW,KAAK,UAAU;;CAGjE,aAAqB;EACnB,MAAM,aAAa,KAAK,OAAO,KAAK,eAAe,KAAK;AACxD,SAAO,IAAI;;;eAGA,WAAW;eACX,KAAK,cAAc;;QAE1B,WAAW;;;CAIjB,SAAS;AAKP,SAAO,IAAI;oBAJK,SAAS;IACtB,GAAG,eAAe;IAClB,GAAG,WAAW,2BAA2B,CAAC,KAAK;GACjD,CAEsB,CAAC;sBACN,WAAW;wBACT,WAAW;;gBAEnB,WAAW,QAAQ,EACnB,MAAM,QACP,CAAC,CAAC;;;YAGL,KAAK,WAAW,CAAC;;;;qBAIR,WAAW;;;sBAGV,KAAK,aAAa;;cAE1B,WAAW,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAC;;;yBAG3B,KAAK,KAAK;;;;sBAIb,QAAoB;AAC5B,OAAI,gBAAgB;IACpB;;0BAEY,WAAW;oCACD,KAAK,YAAY,CAAC;;;;;;;;gBAQpCA;;;YA/Gf,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAGzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAGzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;6BAX3CC,cAAc,mBAAyB,CAAA,EAAA,eAAA;AAoHxC,IAAA,uBAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"page-header-scroller.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header-scroller.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,sDAAsD,CAAC;AAG9D,OAAO,SAAS,MAAM,oDAAoD,CAAC;AAI3E;;;GAGG;AACH,qBACa,kBAAmB,SAAQ,SAAS;IAC/C;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,SAAS,UAAQ;IAEjB;;OAEG;IAEH,iBAAiB,UAAQ;IAEzB;;OAEG;IAEH,YAAY,SAAc;IAE1B;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,UAAU,SAAY;IAEtB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,IAAI,SAAQ;IAIZ,OAAO,MAAC;IAER,SAAS,CAAC,qBAAqB;IAQ/B,OAAO,CAAC,eAAe,CAqBrB;IAEF,MAAM;IAyCN,MAAM,CAAC,MAAM,MAAU;CACxB"}
1
+ {"version":3,"file":"page-header-scroller.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header-scroller.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,sDAAsD,CAAC;AAG9D,OAAO,SAAS,MAAM,oDAAoD,CAAC;AAI3E;;;GAGG;AACH,qBACa,kBAAmB,SAAQ,SAAS;IAC/C;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,SAAS,UAAQ;IAEjB;;OAEG;IAEH,iBAAiB,UAAQ;IAEzB;;OAEG;IAEH,YAAY,SAAc;IAE1B;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,UAAU,SAAY;IAEtB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,IAAI,SAAQ;IAIZ,OAAO,MAAC;IAER,SAAS,CAAC,qBAAqB;IAQ/B,OAAO,CAAC,eAAe,CAyBrB;IAEF,MAAM;IAyCN,MAAM,CAAC,MAAM,MAAU;CACxB"}
@@ -42,8 +42,8 @@ let PageHeaderScroller = class PageHeaderScroller extends CDSButton {
42
42
  this.leaveDelayMs = 300;
43
43
  this.size = "md";
44
44
  this._handleScroller = () => {
45
- const { root, fullyCollapsed } = this.context;
46
- const contentElement = root.querySelector(`c4p-page-header-content`);
45
+ const { root, fullyCollapsed } = this.context ?? {};
46
+ const contentElement = (root ?? this.closest(`c4p-page-header`))?.querySelector(`c4p-page-header-content`);
47
47
  if (!contentElement) return;
48
48
  const scrollableTarget = scrollableAncestorInner(contentElement);
49
49
  if (!fullyCollapsed) {
@@ -1 +1 @@
1
- {"version":3,"file":"page-header-scroller.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-scroller.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { html } from 'lit';\nimport styles from './page-header.scss?lit';\nimport { property, state } 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 Chevron20 from '@carbon/icons/es/chevron--up/20';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '@carbon/web-components/es/components/button/index.js';\nimport { pageHeaderContext } from './context';\nimport { consume } from '@lit/context';\nimport CDSButton from '@carbon/web-components/es/components/button/button';\nimport { prefix } from '../../globals/settings';\nimport { scrollableAncestorInner } from './utils';\n\n/**\n * Page header Scroller button\n * @element c4p-page-header-scroller\n */\n@customElement(`${prefix}-page-header-scroller`)\nexport class PageHeaderScroller extends CDSButton {\n /**\n * Specify how the trigger should align with the tooltip\n */\n @property({ reflect: true, type: String })\n align = 'top';\n\n /**\n * Specify whether a auto align functionality should be applied\n */\n @property({ type: Boolean, reflect: true })\n autoalign = true;\n\n /**\n * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)\n */\n @property({ attribute: 'close-on-activation', reflect: true, type: Boolean })\n closeOnActivation = true;\n\n /**\n * Specify the collapse text for the scroller button\n */\n @property({ reflect: true, type: String })\n collapseText = 'Collapse';\n\n /**\n * Specify whether the tooltip should be open when it first renders\n */\n @property({ reflect: true, type: Boolean })\n defaultOpen = false;\n\n /**\n * Specify the duration in milliseconds to delay before displaying the tooltip\n */\n @property({ attribute: 'enter-delay-ms', type: Number })\n enterDelayMs = 100;\n\n /**\n * Specify the expand text for the scroller button\n */\n @property({ reflect: true, type: String })\n expandText = 'Expand';\n\n /**\n * Specify the duration in milliseconds to delay before hiding the tooltip\n */\n @property({ attribute: 'leave-delay-ms', type: Number })\n leaveDelayMs = 300;\n\n /**\n * Specify the size of the Button. Defaults to `md`.\n */\n @property({ reflect: true })\n size = 'md';\n\n @consume({ context: pageHeaderContext, subscribe: true })\n @state()\n context;\n\n protected _renderTooltipContent() {\n return html`\n <cds-tooltip-content>\n <slot name=\"tooltip-content\"></slot>\n </cds-tooltip-content>\n `;\n }\n\n private _handleScroller = () => {\n const { root, fullyCollapsed } = this.context;\n const contentElement = root.querySelector(`${prefix}-page-header-content`);\n if (!contentElement) {\n return;\n }\n const scrollableTarget = scrollableAncestorInner(\n contentElement\n ) as HTMLElement;\n\n // Page header content is not fully collapsed\n if (!fullyCollapsed) {\n const pageHeaderContentHeight = contentElement.offsetHeight;\n scrollableTarget?.scrollTo({\n top: pageHeaderContentHeight, // headerTopValue, check if breadcrumb bar is included\n behavior: 'smooth',\n });\n } else {\n // Page header content is fully collapsed\n scrollableTarget?.scrollTo({ top: 0, behavior: 'smooth' });\n }\n };\n\n render() {\n const {\n align,\n closeOnActivation,\n defaultOpen,\n enterDelayMs,\n leaveDelayMs,\n disabled,\n isSelected,\n size,\n context,\n autoalign,\n } = this;\n\n const iconClasses = classMap({\n [`${prefix}--page-header-scroller-collapsed`]: !!context?.fullyCollapsed,\n [`${prefix}--page-header-scroller-icon`]: true,\n });\n return html`<cds-icon-button\n align=${align}\n ?close-on-activation=${closeOnActivation}\n ?defaultOpen=${defaultOpen}\n ?disabled=${disabled}\n enter-delay-ms=${enterDelayMs}\n ?isSelected=${isSelected}\n kind=\"ghost\"\n leave-delay-ms=${leaveDelayMs}\n size=${size}\n ?autoalign=${autoalign}\n class=${iconClasses}\n label=${context?.fullyCollapsed ? this.expandText : this.collapseText}\n @click=${this._handleScroller}\n >\n ${context?.fullyCollapsed\n ? html`${iconLoader(ChevronDown20, { slot: 'icon' })}`\n : html`${iconLoader(Chevron20, { slot: 'icon' })}`}\n <span slot=\"tooltip-content\">\n ${context?.fullyCollapsed ? this.expandText : this.collapseText}\n </span>\n </cds-icon-button>`;\n }\n static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,IAAA,qBAAA,MAAM,2BAA2B,UAAU;;;eAKxC;mBAMI;2BAMQ;sBAML;qBAMD;sBAMC;oBAMF;sBAME;cAMR;+BAcyB;GAC9B,MAAM,EAAE,MAAM,mBAAmB,KAAK;GACtC,MAAM,iBAAiB,KAAK,cAAc,0BAAgC;AAC1E,OAAI,CAAC,eACH;GAEF,MAAM,mBAAmB,wBACvB,eACD;AAGD,OAAI,CAAC,gBAAgB;IACnB,MAAM,0BAA0B,eAAe;AAC/C,sBAAkB,SAAS;KACzB,KAAK;KACL,UAAU;KACX,CAAC;SAGF,mBAAkB,SAAS;IAAE,KAAK;IAAG,UAAU;IAAU,CAAC;;;CA3B9D,wBAAkC;AAChC,SAAO,IAAI;;;;;;CA8Bb,SAAS;EACP,MAAM,EACJ,OACA,mBACA,aACA,cACA,cACA,UACA,YACA,MACA,SACA,cACE;AAMJ,SAAO,IAAI;cACD,MAAM;6BACS,kBAAkB;qBAC1B,YAAY;kBACf,SAAS;uBACJ,aAAa;oBAChB,WAAW;;uBAER,aAAa;aACvB,KAAK;mBACC,UAAU;cAdL,SAAS;IAC1B,wCAA8C,CAAC,CAAC,SAAS;IACzD,mCAAyC;GAC3C,CAYoB,CAAC;cACZ,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;eAC7D,KAAK,gBAAgB;;QAE5B,SAAS,iBACP,IAAI,GAAG,WAAW,eAAe,EAAE,MAAM,QAAQ,CAAC,KAClD,IAAI,GAAG,WAAW,WAAW,EAAE,MAAM,QAAQ,CAAC,GAAG;;UAEjD,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;;;;;gBAItDA;;;YA/Hf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAuB,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,qBAAA,KAAA,EAAA;YAM5E,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,cAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;iCAzDTC,cAAc,2BAAiC,CAAA,EAAA,mBAAA"}
1
+ {"version":3,"file":"page-header-scroller.js","names":["styles","customElement"],"sources":["../../../src/components/page-header/page-header-scroller.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { html } from 'lit';\nimport styles from './page-header.scss?lit';\nimport { property, state } 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 Chevron20 from '@carbon/icons/es/chevron--up/20';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '@carbon/web-components/es/components/button/index.js';\nimport { pageHeaderContext } from './context';\nimport { consume } from '@lit/context';\nimport CDSButton from '@carbon/web-components/es/components/button/button';\nimport { prefix } from '../../globals/settings';\nimport { scrollableAncestorInner } from './utils';\n\n/**\n * Page header Scroller button\n * @element c4p-page-header-scroller\n */\n@customElement(`${prefix}-page-header-scroller`)\nexport class PageHeaderScroller extends CDSButton {\n /**\n * Specify how the trigger should align with the tooltip\n */\n @property({ reflect: true, type: String })\n align = 'top';\n\n /**\n * Specify whether a auto align functionality should be applied\n */\n @property({ type: Boolean, reflect: true })\n autoalign = true;\n\n /**\n * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)\n */\n @property({ attribute: 'close-on-activation', reflect: true, type: Boolean })\n closeOnActivation = true;\n\n /**\n * Specify the collapse text for the scroller button\n */\n @property({ reflect: true, type: String })\n collapseText = 'Collapse';\n\n /**\n * Specify whether the tooltip should be open when it first renders\n */\n @property({ reflect: true, type: Boolean })\n defaultOpen = false;\n\n /**\n * Specify the duration in milliseconds to delay before displaying the tooltip\n */\n @property({ attribute: 'enter-delay-ms', type: Number })\n enterDelayMs = 100;\n\n /**\n * Specify the expand text for the scroller button\n */\n @property({ reflect: true, type: String })\n expandText = 'Expand';\n\n /**\n * Specify the duration in milliseconds to delay before hiding the tooltip\n */\n @property({ attribute: 'leave-delay-ms', type: Number })\n leaveDelayMs = 300;\n\n /**\n * Specify the size of the Button. Defaults to `md`.\n */\n @property({ reflect: true })\n size = 'md';\n\n @consume({ context: pageHeaderContext, subscribe: true })\n @state()\n context;\n\n protected _renderTooltipContent() {\n return html`\n <cds-tooltip-content>\n <slot name=\"tooltip-content\"></slot>\n </cds-tooltip-content>\n `;\n }\n\n private _handleScroller = () => {\n const { root, fullyCollapsed } = this.context ?? {};\n const searchRoot: Element | null =\n root ?? this.closest(`${prefix}-page-header`);\n const contentElement = searchRoot?.querySelector<HTMLElement>(\n `${prefix}-page-header-content`\n );\n if (!contentElement) {\n return;\n }\n const scrollableTarget = scrollableAncestorInner(\n contentElement\n ) as HTMLElement;\n\n // Page header content is not fully collapsed\n if (!fullyCollapsed) {\n const pageHeaderContentHeight = contentElement.offsetHeight;\n scrollableTarget?.scrollTo({\n top: pageHeaderContentHeight, // headerTopValue, check if breadcrumb bar is included\n behavior: 'smooth',\n });\n } else {\n // Page header content is fully collapsed\n scrollableTarget?.scrollTo({ top: 0, behavior: 'smooth' });\n }\n };\n\n render() {\n const {\n align,\n closeOnActivation,\n defaultOpen,\n enterDelayMs,\n leaveDelayMs,\n disabled,\n isSelected,\n size,\n context,\n autoalign,\n } = this;\n\n const iconClasses = classMap({\n [`${prefix}--page-header-scroller-collapsed`]: !!context?.fullyCollapsed,\n [`${prefix}--page-header-scroller-icon`]: true,\n });\n return html`<cds-icon-button\n align=${align}\n ?close-on-activation=${closeOnActivation}\n ?defaultOpen=${defaultOpen}\n ?disabled=${disabled}\n enter-delay-ms=${enterDelayMs}\n ?isSelected=${isSelected}\n kind=\"ghost\"\n leave-delay-ms=${leaveDelayMs}\n size=${size}\n ?autoalign=${autoalign}\n class=${iconClasses}\n label=${context?.fullyCollapsed ? this.expandText : this.collapseText}\n @click=${this._handleScroller}\n >\n ${context?.fullyCollapsed\n ? html`${iconLoader(ChevronDown20, { slot: 'icon' })}`\n : html`${iconLoader(Chevron20, { slot: 'icon' })}`}\n <span slot=\"tooltip-content\">\n ${context?.fullyCollapsed ? this.expandText : this.collapseText}\n </span>\n </cds-icon-button>`;\n }\n static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,IAAA,qBAAA,MAAM,2BAA2B,UAAU;;;eAKxC;mBAMI;2BAMQ;sBAML;qBAMD;sBAMC;oBAMF;sBAME;cAMR;+BAcyB;GAC9B,MAAM,EAAE,MAAM,mBAAmB,KAAK,WAAW,EAAE;GAGnD,MAAM,kBADJ,QAAQ,KAAK,QAAQ,kBAAwB,GACZ,cACjC,0BACD;AACD,OAAI,CAAC,eACH;GAEF,MAAM,mBAAmB,wBACvB,eACD;AAGD,OAAI,CAAC,gBAAgB;IACnB,MAAM,0BAA0B,eAAe;AAC/C,sBAAkB,SAAS;KACzB,KAAK;KACL,UAAU;KACX,CAAC;SAGF,mBAAkB,SAAS;IAAE,KAAK;IAAG,UAAU;IAAU,CAAC;;;CA/B9D,wBAAkC;AAChC,SAAO,IAAI;;;;;;CAkCb,SAAS;EACP,MAAM,EACJ,OACA,mBACA,aACA,cACA,cACA,UACA,YACA,MACA,SACA,cACE;AAMJ,SAAO,IAAI;cACD,MAAM;6BACS,kBAAkB;qBAC1B,YAAY;kBACf,SAAS;uBACJ,aAAa;oBAChB,WAAW;;uBAER,aAAa;aACvB,KAAK;mBACC,UAAU;cAdL,SAAS;IAC1B,wCAA8C,CAAC,CAAC,SAAS;IACzD,mCAAyC;GAC3C,CAYoB,CAAC;cACZ,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;eAC7D,KAAK,gBAAgB;;QAE5B,SAAS,iBACP,IAAI,GAAG,WAAW,eAAe,EAAE,MAAM,QAAQ,CAAC,KAClD,IAAI,GAAG,WAAW,WAAW,EAAE,MAAM,QAAQ,CAAC,GAAG;;UAEjD,SAAS,iBAAiB,KAAK,aAAa,KAAK,aAAa;;;;;gBAItDA;;;YAnIf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,aAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAuB,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,qBAAA,KAAA,EAAA;YAM5E,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,SAAS;CAAM,MAAM;CAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,cAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;YAMvD,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,QAAQ;CAAE,SAAS;CAAmB,WAAW;CAAM,CAAC,EACxD,OAAO,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;iCAzDTC,cAAc,2BAAiC,CAAA,EAAA,mBAAA"}