@cbpds/web-components/dist/cjs/cbp-code-snippet.cjs.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.js');

const cbpCodeSnippetCss = ":root{--cbp-code-snippet-max-height:auto;--cbp-code-snippet-pre-padding:0 var(--cbp-space-1x);--cbp-code-snippet-color:var(--cbp-color-text-darkest);--cbp-code-snippet-color-dark:var(--cbp-color-text-lightest);--cbp-code-snippet-color-bg:var(--cbp-color-gray-cool-10);--cbp-code-snippet-color-bg-dark:var(--cbp-color-gray-cool-70)}[data-cbp-theme=light] cbp-code-snippet[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-code-snippet:not([context=dark-inverts]):not([context=light-always]){--cbp-code-snippet-color:var(--cbp-code-snippet-color-dark);--cbp-code-snippet-color-bg:var(--cbp-code-snippet-color-bg-dark)}cbp-code-snippet{color:var(--cbp-code-snippet-color);background-color:var(--cbp-code-snippet-color-bg);border-radius:var(--cbp-border-radius-soft)}cbp-code-snippet pre{margin:0;white-space:pre-wrap;display:inline;font-family:var(--cbp-font-family-roboto);scrollbar-width:thin}cbp-code-snippet pre code{padding:var(--cbp-code-snippet-pre-padding);font-family:var(--cbp-font-family-roboto-mono)}cbp-code-snippet[variant=block]{display:block;padding:var(--cbp-space-2x)}cbp-code-snippet[variant=block] pre{display:flex;--cbp-code-snippet-pre-padding:var(--cbp-space-2x);overflow:auto;max-height:var(--cbp-code-snippet-max-height)}cbp-code-snippet[variant=block] pre cbp-button{margin-left:auto}cbp-code-snippet[variant=block]>cbp-button{margin:var(--cbp-space-2x)}";
const CbpCodeSnippetStyle0 = cbpCodeSnippetCss;

const CbpCodeSnippet = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.copyTextClick = index.createEvent(this, "copyTextClick", 7);
        this.toggleShowAllClick = index.createEvent(this, "toggleShowAllClick", 7);
        this.toggleButtonText = 'Show More';
        this.toggleButtonRotate = 90;
        this.variant = 'inline';
        this.height = undefined;
        this.context = undefined;
        this.sx = {};
        this.expanded = false;
        this.codeContainerHeight = undefined;
        this.codeBlockHeight = undefined;
    }
    copyText() {
        navigator.clipboard.writeText(this.codeBlock);
        this.copyTextClick.emit({
            host: this.host,
        });
    }
    toggleShowAll() {
        this.expanded = !this.expanded;
        this.toggleShowAllClick.emit({
            host: this.host,
            expanded: this.expanded,
        });
    }
    componentWillLoad() {
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        utils.setCSSProps(this.host, Object.assign({}, this.sx));
    }
    componentDidLoad() {
        if (this.height != null && !this.expanded) {
            this.host.style.setProperty('--cbp-code-snippet-max-height', this.height);
        }
        this.codeBlock = this.host.querySelector('div').innerHTML.trim();
        this.host.querySelector('code').innerHTML = this.codeBlock.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        setTimeout(() => {
            this.codeContainerHeight = this.host.offsetHeight;
            this.codeBlockHeight = this.host.querySelector('pre').scrollHeight;
        }, 100);
    }
    render() {
        if (this.variant == "block" && !!this.height) {
            if (this.expanded) {
                this.host.style.setProperty('--cbp-code-snippet-max-height', 'auto');
                this.toggleButtonRotate = 270;
                this.toggleButtonText = 'Show Less';
            }
            else {
                this.host.style.setProperty('--cbp-code-snippet-max-height', this.height);
                this.toggleButtonRotate = 90;
                this.toggleButtonText = 'Show More';
            }
        }
        return (index.h(index.Host, { key: 'e0d90a998aab2be673a32bc9059c3c35bb2fc1cb' }, index.h("div", { key: 'f91a4fa6b295eb77eedd4c577fb0bf5bce37a221', hidden: true }, index.h("slot", { key: 'efc136b91dbc712714f19a42cdc2326c2f2b268b' })), index.h("pre", { key: '2c0643779000eb13742292ef873898555ba143cc' }, index.h("code", { key: '1ee0b39453cd8346bd72654cc9c087a1f5e601e9' }), this.variant == 'block' &&
            index.h("cbp-button", { key: '932b3e2a44da8c8d5c64ef70de561bbdc9ab581e', type: "button", fill: "ghost", color: "secondary", variant: 'square', accessibilityText: 'Copy', onClick: () => this.copyText(), context: this.context }, index.h("cbp-icon", { key: '398505c4dde003e85c6f45352f8a1b9e826e2afa', name: "clone" }))), (this.expanded || this.height && this.codeContainerHeight < this.codeBlockHeight) &&
            index.h("cbp-button", { key: '1f236234d6c7d1d06bfa9e8801a23480db884b63', fill: "ghost", color: "secondary", expanded: `${this.expanded}`, context: this.context, onClick: () => this.toggleShowAll() }, index.h("cbp-icon", { key: 'ed310d51bc4d04e7f6ec35e8eba27b75b289569b', name: "chevron-right", rotate: this.toggleButtonRotate }), this.toggleButtonText)));
    }
    get host() { return index.getElement(this); }
};
CbpCodeSnippet.style = CbpCodeSnippetStyle0;

exports.cbp_code_snippet = CbpCodeSnippet;

//# sourceMappingURL=cbp-code-snippet.cjs.entry.js.map