@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
136 lines (134 loc) • 4.77 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* 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 "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { pageHeaderContext } from "./context.js";
import { scrollableAncestorInner } from "./utils.js";
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { property } from "lit/decorators.js";
import '@carbon/web-components/es-custom/components/button/index.js';
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
import Chevron20 from "@carbon/icons/es/chevron--up/20";
import CDSButton from "@carbon/web-components/es/components/button/button";
import { consume } from "@lit/context";
import ChevronDown20 from "@carbon/icons/es/chevron--down/20";
//#region src/components/page-header/page-header-scroller.ts
/**
* @license
*
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
let PageHeaderScroller = class PageHeaderScroller extends CDSButton {
constructor(..._args) {
super(..._args);
this.align = "top";
this.autoalign = true;
this.closeOnActivation = true;
this.collapseText = "Collapse";
this.defaultOpen = false;
this.enterDelayMs = 100;
this.expandText = "Expand";
this.leaveDelayMs = 300;
this.size = "md";
this._handleScroller = () => {
const { root, fullyCollapsed } = this.context;
const contentElement = root.querySelector(`c4p-page-header-content`);
if (!contentElement) return;
const scrollableTarget = scrollableAncestorInner(contentElement);
if (!fullyCollapsed) {
const pageHeaderContentHeight = contentElement.offsetHeight;
scrollableTarget?.scrollTo({
top: pageHeaderContentHeight,
behavior: "smooth"
});
} else scrollableTarget?.scrollTo({
top: 0,
behavior: "smooth"
});
};
}
_renderTooltipContent() {
return html`
<cds-custom-tooltip-content>
<slot name="tooltip-content"></slot>
</cds-custom-tooltip-content>
`;
}
render() {
const { align, closeOnActivation, defaultOpen, enterDelayMs, leaveDelayMs, disabled, isSelected, size, context, autoalign } = this;
return html`<cds-custom-icon-button
align=${align}
?close-on-activation=${closeOnActivation}
?defaultOpen=${defaultOpen}
?disabled=${disabled}
enter-delay-ms=${enterDelayMs}
?isSelected=${isSelected}
kind="ghost"
leave-delay-ms=${leaveDelayMs}
size=${size}
?autoalign=${autoalign}
class=${classMap({
[`c4p--page-header-scroller-collapsed`]: !!context?.fullyCollapsed,
[`c4p--page-header-scroller-icon`]: true
})}
aria-label=${context?.fullyCollapsed ? this.expandText : this.collapseText}
@click=${this._handleScroller}
>
${context?.fullyCollapsed ? html`${iconLoader(ChevronDown20, { slot: "icon" })}` : html`${iconLoader(Chevron20, { slot: "icon" })}`}
<span slot="tooltip-content">
${context?.fullyCollapsed ? this.expandText : this.collapseText}
</span>
</cds-custom-icon-button>`;
}
};
__decorate([property({
reflect: true,
type: String
})], PageHeaderScroller.prototype, "align", void 0);
__decorate([property({
type: Boolean,
reflect: true
})], PageHeaderScroller.prototype, "autoalign", void 0);
__decorate([property({
attribute: "close-on-activation",
reflect: true,
type: Boolean
})], PageHeaderScroller.prototype, "closeOnActivation", void 0);
__decorate([property({
reflect: true,
type: String
})], PageHeaderScroller.prototype, "collapseText", void 0);
__decorate([property({
reflect: true,
type: Boolean
})], PageHeaderScroller.prototype, "defaultOpen", void 0);
__decorate([property({
attribute: "enter-delay-ms",
type: Number
})], PageHeaderScroller.prototype, "enterDelayMs", void 0);
__decorate([property({
reflect: true,
type: String
})], PageHeaderScroller.prototype, "expandText", void 0);
__decorate([property({
attribute: "leave-delay-ms",
type: Number
})], PageHeaderScroller.prototype, "leaveDelayMs", void 0);
__decorate([property({ reflect: true })], PageHeaderScroller.prototype, "size", void 0);
__decorate([consume({
context: pageHeaderContext,
subscribe: true
})], PageHeaderScroller.prototype, "context", void 0);
PageHeaderScroller = __decorate([carbonElement(`c4p-page-header-scroller`)], PageHeaderScroller);
//#endregion
export { PageHeaderScroller };
//# sourceMappingURL=page-header-scroller.js.map