@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
166 lines (162 loc) • 6.34 kB
JavaScript
/**
* 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 { __decorate } from 'tslib';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import Chevron20 from '@carbon/web-components/es/icons/chevron--up/20';
import ChevronDown20 from '@carbon/web-components/es/icons/chevron--down/20';
import '@carbon/web-components/es/components/button/index.js';
import { pageHeaderContext } from './context.js';
import { consume } from '@lit/context';
import CDSButton from '@carbon/web-components/es/components/button/button';
import { prefix } from '../../globals/settings.js';
import { scrollableAncestorInner } from './utils.js';
/**
* @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.
*/
/**
* Page header Scroller button
* @element c4p-page-header-scroller
*/
let PageHeaderScroller = class PageHeaderScroller extends CDSButton {
constructor() {
super(...arguments);
/**
* Specify how the trigger should align with the tooltip
*/
this.align = 'top';
/**
* Specify whether a auto align functionality should be applied
*/
this.autoalign = true;
/**
* Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
*/
this.closeOnActivation = true;
/**
* Specify the collapse text for the scroller button
*/
this.collapseText = 'Collapse';
/**
* Specify whether the tooltip should be open when it first renders
*/
this.defaultOpen = false;
/**
* Specify the duration in milliseconds to delay before displaying the tooltip
*/
this.enterDelayMs = 100;
/**
* Specify the expand text for the scroller button
*/
this.expandText = 'Expand';
/**
* Specify the duration in milliseconds to delay before hiding the tooltip
*/
this.leaveDelayMs = 300;
/**
* Specify the size of the Button. Defaults to `md`.
*/
this.size = 'md';
this._handleScroller = () => {
const { root, fullyCollapsed } = this.context;
const contentElement = root.querySelector(`${prefix}-page-header-content`);
if (!contentElement) {
return;
}
const scrollableTarget = scrollableAncestorInner(contentElement);
// Page header content is not fully collapsed
if (!fullyCollapsed) {
const pageHeaderContentHeight = contentElement.offsetHeight;
scrollableTarget === null || scrollableTarget === void 0 ? void 0 : scrollableTarget.scrollTo({
top: pageHeaderContentHeight, // headerTopValue, check if breadcrumb bar is included
behavior: 'smooth',
});
}
else {
// Page header content is fully collapsed
scrollableTarget === null || scrollableTarget === void 0 ? void 0 : scrollableTarget.scrollTo({ top: 0, behavior: 'smooth' });
}
};
}
_renderTooltipContent() {
return html `
<cds-tooltip-content>
<slot name="tooltip-content"></slot>
</cds-tooltip-content>
`;
}
render() {
const { align, closeOnActivation, defaultOpen, enterDelayMs, leaveDelayMs, disabled, isSelected, size, context, autoalign, } = this;
const iconClasses = classMap({
[`${prefix}--page-header-scroller-collapsed`]: !!(context === null || context === void 0 ? void 0 : context.fullyCollapsed),
[`${prefix}--page-header-scroller-icon`]: true,
});
return html `<cds-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=${iconClasses}
@click=${this._handleScroller}
>
${(context === null || context === void 0 ? void 0 : context.fullyCollapsed)
? html `${ChevronDown20({ slot: 'icon' })}`
: html `${Chevron20({ slot: 'icon' })}`}
<span slot="tooltip-content">
${(context === null || context === void 0 ? void 0 : context.fullyCollapsed) ? this.expandText : this.collapseText}
</span>
</cds-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(`${prefix}-page-header-scroller`)
], PageHeaderScroller);
export { PageHeaderScroller };
//# sourceMappingURL=page-header-scroller.js.map