@jupyter/web-components/dist/esm/disclosure/index.js

A component library for building extensions in Jupyter frontends.

// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.
import { __decorate } from "tslib";
import { attr } from '@microsoft/fast-element';
import { Disclosure, disclosureTemplate as template } from '@microsoft/fast-foundation';
import { disclosureStyles as styles } from './disclosure.styles.js';
/**
 * Disclosure class
 *
 * @public
 * @tagname jp-disclosure
 */
class JupyterDisclosure extends Disclosure {
    constructor() {
        super(...arguments);
        /**
         * Disclosure default height
         */
        this.height = 0;
        /**
         * Disclosure height after it's expanded
         */
        this.totalHeight = 0;
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.appearance) {
            this.appearance = 'accent';
        }
    }
    appearanceChanged(oldValue, newValue) {
        if (oldValue !== newValue) {
            this.classList.add(newValue);
            this.classList.remove(oldValue);
        }
    }
    /**
     * Set disclosure height while transitioning
     * @override
     */
    onToggle() {
        super.onToggle();
        this.details.style.setProperty('height', `${this.disclosureHeight}px`);
    }
    /**
     * Calculate disclosure height before and after expanded
     * @override
     */
    setup() {
        super.setup();
        const getCurrentHeight = () => this.details.getBoundingClientRect().height;
        this.show();
        this.totalHeight = getCurrentHeight();
        this.hide();
        this.height = getCurrentHeight();
        if (this.expanded) {
            this.show();
        }
    }
    get disclosureHeight() {
        return this.expanded ? this.totalHeight : this.height;
    }
}
__decorate([
    attr
], JupyterDisclosure.prototype, "appearance", void 0);
/**
 * A function that returns a {@link @microsoft/fast-foundation#Disclosure} registration for configuring the component with a DesignSystem.
 * Implements {@link @microsoft/fast-foundation#disclosureTemplate}
 *
 *
 * @public
 * @remarks
 * Generates HTML Element: `<jp-Disclosure>`
 *
 */
export const jpDisclosure = JupyterDisclosure.compose({
    baseName: 'disclosure',
    baseClass: Disclosure,
    template,
    styles
});
export { JupyterDisclosure as Disclosure, styles as disclosureStyles };