import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
import { b as CodeBlockVariation, d as CodeExampleVariation, c as CodeExampleLanguage } from './p-5a256d98.js';
import { b as ButtonVariation, B as ButtonSize } from './p-f518a4cf.js';
import { _ as _t } from './p-08cf2c0e.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { d as defineCustomElement$7 } from './p-e8fc33ed.js';
import { d as defineCustomElement$6 } from './p-03338211.js';
import { d as defineCustomElement$5 } from './p-df47eea9.js';
import { d as defineCustomElement$4 } from './p-3344671c.js';
import { d as defineCustomElement$3 } from './p-34685ea4.js';
import { d as defineCustomElement$2 } from './p-c139a46c.js';

const codeExampleCss = ".sc-digi-code-example-h{--digi--code-example--background:var(--digi--color--background--primary);--digi--code-example--controls--width:16.25rem;display:block}.digi-code-example.sc-digi-code-example{background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:var(--digi--border-width--primary) solid var(--digi--color--divider--primary--light);height:100%;display:flex;flex-direction:row;border-radius:0.3rem;position:relative}@media (max-width: 35.9375rem){.digi-code-example.sc-digi-code-example{min-width:360px}}.digi-code-example--light.sc-digi-code-example{background-color:#ffffff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%)}.digi-code-example--dark.sc-digi-code-example{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}.digi-code-example__container.sc-digi-code-example{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;position:relative}.digi-code-example--no-controls.sc-digi-code-example{flex-direction:column}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button.sc-digi-code-example{margin-top:0;align-self:flex-end;margin-bottom:0.2rem;z-index:1;position:absolute;bottom:0;right:0}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button--dark.sc-digi-code-example{--digi--button--color--text--function--default:var(--digi--color--text--secondary);--digi--button--color--text--function--hover:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--secondary);--digi--button--color--icon--function--hover:var(--digi--color--text--secondary)}.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--largest-2);overflow-x:auto}@media (max-width: 48rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--medium)}}@media (max-width: 35.9375rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--small)}}.digi-code-example__copy-button.sc-digi-code-example{align-self:start;margin-top:var(--digi--padding--large);margin-right:var(--digi--padding--small)}.digi-code-example__codeblock.sc-digi-code-example digi-code-block.sc-digi-code-example{--digi--code-block--border-radius:0;--digi--code-block--border:none}.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--medium);background:var(--digi--color--background--secondary);display:flex;flex:0 var(--digi--code-example--controls--width);flex-direction:column;align-self:stretch;flex-shrink:0;justify-content:space-between;gap:var(--digi--gutter--medium)}@media (max-width: 48rem){.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--smaller)}}.digi-code-example__controls[hidden].sc-digi-code-example{display:none}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__code.sc-digi-code-example{display:flex;flex-direction:column;flex-grow:1}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{flex-grow:1;height:64px;overflow-y:hidden;position:relative}.digi-code-example__code-expand.sc-digi-code-example{display:flex;align-items:center;justify-content:center;gap:var(--digi--gutter--icon);width:100%;padding:0.875rem 0;background:#272727;color:var(--digi--color--text--secondary);font-size:var(--digi--typography--body--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);cursor:pointer;border:none}.digi-code-example__code-expand.sc-digi-code-example:hover{background:var(--digi--grayscale--900);text-decoration:underline}.digi-code-example__code-expand.sc-digi-code-example:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-code-example--no-controls.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{height:64px}.digi-code-example__copy-button.sc-digi-code-example{--digi--button--padding--small:0;--digi--button--padding--medium:0;--digi--button--padding--large:0}.digi-code-example__code-expand-icon.sc-digi-code-example{--digi--icon--color:var(--digi--color--text--secondary);transition:ease-in-out var(--digi--animation--duration--base) all}.digi-code-example__code-expand-icon--open.sc-digi-code-example{transform:rotate(180deg)}.digi-code-example__fade.sc-digi-code-example{position:absolute;width:100%;bottom:0;height:var(--digi--padding--largest-2)}.digi-code-example__fade--light.sc-digi-code-example{background-image:linear-gradient(0deg, white, transparent)}.digi-code-example__fade--dark.sc-digi-code-example{--digi--color--background--inverted-3:#272727;background-image:linear-gradient(0deg, var(--digi--grayscale--900), transparent)}.slot__controls.sc-digi-code-example{margin-bottom:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls{display:flex;flex-direction:column;gap:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls[hidden]{display:none}.sc-digi-code-example-s .slot__controls digi-form-fieldset,.sc-digi-code-example-s .slot__controls digi-form-select,.sc-digi-code-example-s .slot__controls digi-form-fieldset+digi-form-checkbox,.sc-digi-code-example-s .slot__controls .divider{display:block;border-bottom:1px solid var(--digi--color--divider--primary--light);padding-bottom:var(--digi--padding--smaller);margin-bottom:var(--digi--padding--medium)}";
const DigiCodeExampleStyle0 = codeExampleCss;

const CodeExample = /*@__PURE__*/ proxyCustomElement(class CodeExample extends H {
    constructor() {
        super();
        this.__registerHost();
        this._id = randomIdGenerator('code');
        this.isActive = true;
        this.codeLanguage = undefined;
        this.hasControls = undefined;
        this.showMoreButton = undefined;
        this.containerElement = undefined;
        this.afCode = undefined;
        this.afCodeBlockVariation = CodeBlockVariation.DARK;
        this.afExampleVariation = CodeExampleVariation.LIGHT;
        this.afLanguage = CodeExampleLanguage.HTML;
        this.afHideControls = undefined;
        this.afHideCode = undefined;
    }
    /**
     * Försöker parsa afCode som ett objekt.
     * Returnerar antingen codeExample som sträng - antingen direkt om afCode var en sträng, annars det valda kodspråket.
     */
    get codeExample() {
        let codeString;
        if (typeof this._codeExample === 'object') {
            this.codeLanguage ||
                (this.codeLanguage = this
                    .codeExampleLanguages[0]);
            codeString = this._codeExample[this.codeLanguage];
        }
        else
            codeString = this._codeExample;
        return codeString;
    }
    set codeExample(code) {
        try {
            this._codeExample = JSON.parse(code);
        }
        catch (e) {
            // code är antagligen en sträng och inte objekt.
            this._codeExample = code;
        }
    }
    /**
     * Returnerar tomt om inget kodspråk har skickats med i afCode.
     * Dock returnerar en lista av kodspråk (t.ex. ts eller js) om detta är angett.
     */
    get codeExampleLanguages() {
        return (typeof this._codeExample === 'object' && Object.keys(this._codeExample));
    }
    /**
     * Spara kodexemplet från afCode vid uppdatering av attributet.
     * @en Save the code example from afCode on update of the attribute.
     */
    codeExampleUpdate() {
        this.codeExample = this.afCode;
    }
    componentWillLoad() {
        this.codeExampleUpdate();
        this.hasControls =
            !!this.hostElement.querySelector('[slot="controls"]') ||
                !!this.codeExampleLanguages;
    }
    componentWillUpdate() {
        this.hasControls =
            !!this.hostElement.querySelector('[slot="controls"]') ||
                !!this.codeExampleLanguages;
    }
    componentDidLoad() {
        this.updateShowMoreButton();
    }
    toggleButtonClickHandler() {
        this.isActive = !this.isActive;
    }
    copyButtonClickHandler() {
        navigator.clipboard.writeText(this.codeExample).then(() => {
            // console.log('hurra!');
        }, (err) => {
            // console.log('åh nej!', err);
            console.error(err);
        });
    }
    /**
     * Ändrar kodspråk vid val av radioknapp
     * @param e Event object of the change event.
     */
    codeLanguageChangeHandler(e) {
        this.codeLanguage = e.target.value;
        this.codeExampleUpdate();
    }
    /**
     * Visar "Visa mer" när kodblocket är högre än 180px.
     * @en Show "Visa mer" when code block is higher than 180px.
     */
    updateShowMoreButton() {
        const codeblock = this.containerElement.querySelector('.digi-code-example__codeblock');
        const controls = this.containerElement.querySelector('.digi-code-example__controls > span');
        const example = this.containerElement.querySelector('.digi-code-example__example');
        if (!this._codeHeightObserver && codeblock) {
            this._codeHeightObserver = new ResizeObserver((observable) => {
                const initSetActive = this.showMoreButton == undefined;
                this.showMoreButton =
                    observable[0].target.scrollHeight >=
                        (controls ? controls.scrollHeight - example.scrollHeight + 35 : 64);
                if (initSetActive) {
                    this.isActive = this.showMoreButton ? false : true;
                }
            });
            this._codeHeightObserver.observe(codeblock);
        }
    }
    get cssModifiers() {
        return {
            'digi-code-example--active': this.isActive,
            'digi-code-example--inactive': !this.isActive,
            [`digi-code-example--hide-controls-${!!this.afHideControls}`]: true,
            'digi-code-example--light': this.afExampleVariation === CodeExampleVariation.LIGHT,
            'digi-code-example--dark': this.afExampleVariation === CodeExampleVariation.DARK,
            'digi-code-example--no-controls': !this.hasControls && !this.codeExampleLanguages
        };
    }
    capitalize(word) {
        return word
            .toLowerCase()
            .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
    }
    render() {
        return (h("div", { key: '2ef6570a3577fc8e68971f09151dec2bd86bdc18', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '94e1dfbf94a1b7b90a770c86c4c309c02a5d682a', class: {
                'digi-code-example__container': true
            } }, h("div", { key: '2a56800cc263782d8bbbf3962eaacaa1df341067', class: "digi-code-example__example" }, h("slot", { key: 'c11c6a395e412c64291261fc9c849b22960e685b' })), !this.afHideCode && (h("div", { key: 'd230e73ee09938b258675aae499eb5d0f20cb6da', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: 'bc334ed8052f21302dc1abd9402974938d3b11ae', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: 'e1d2f3d0908f13abffdda78f83fa008af09f0cb8', class: {
                'digi-code-example__code-expand-icon': true,
                'digi-code-example__code-expand-icon--open': this.isActive
            }, "aria-hidden": "true" }))), h("div", { key: 'a7fe982261026080d861cda236a555a50aee199d', class: {
                'digi-code-example__codeblock': true,
                'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
            } }, h("digi-code-block", { key: '35e29b95fbe734f9823b39d34e91b78e338189b0', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
                'digi-code-example__fade': true,
                'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'
            }, onClick: () => this.toggleButtonClickHandler() })) : (''))))), this.hasControls || !!this.codeExampleLanguages ? (h("div", { class: {
                'digi-code-example__controls': true
            }, hidden: !!this.afHideControls }, h("span", null, h("slot", { name: "controls" }), h("div", { class: "slot__controls" }, this.codeExampleLanguages && (h("digi-form-fieldset", { "af-legend": _t.code.language, "af-name": 'Code-Language-' + this._id, onChange: (e) => this.codeLanguageChangeHandler(e) }, this.codeExampleLanguages.map((codeLang) => (h("digi-form-radiobutton", { afName: 'Code-Language-' + this._id, afChecked: this.codeLanguage === codeLang, afValue: codeLang, afLabel: codeLang }))))))), h("digi-button", { class: "digi-code-example__copy-button", onAfOnClick: () => this.copyButtonClickHandler(), "af-variation": ButtonVariation.FUNCTION, "af-size": ButtonSize.MEDIUM }, h("digi-icon-copy", { class: "digi-code-example__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy))) : (!this.afHideControls && (h("digi-button", { class: {
                'digi-code-example__copy-button': true,
                'digi-code-example__copy-button--dark': this.afCodeBlockVariation === 'dark'
            }, onAfOnClick: () => this.copyButtonClickHandler(), "af-variation": ButtonVariation.FUNCTION, "af-size": ButtonSize.MEDIUM }, h("digi-icon-copy", { class: "digi-code-example__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "afCode": ["codeExampleUpdate"]
    }; }
    static get style() { return DigiCodeExampleStyle0; }
}, [6, "digi-code-example", {
        "afCode": [1, "af-code"],
        "afCodeBlockVariation": [1, "af-code-block-variation"],
        "afExampleVariation": [1, "af-example-variation"],
        "afLanguage": [1, "af-language"],
        "afHideControls": [4, "af-hide-controls"],
        "afHideCode": [4, "af-hide-code"],
        "isActive": [32],
        "codeLanguage": [32],
        "hasControls": [32],
        "showMoreButton": [32],
        "containerElement": [32]
    }, undefined, {
        "afCode": ["codeExampleUpdate"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-code-example", "digi-button", "digi-code-block", "digi-form-fieldset", "digi-form-radiobutton", "digi-icon-chevron-down", "digi-icon-copy"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-code-example":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, CodeExample);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "digi-code-block":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "digi-form-fieldset":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "digi-form-radiobutton":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-icon-chevron-down":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-copy":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiCodeExample = CodeExample;
const defineCustomElement = defineCustomElement$1;

export { DigiCodeExample, defineCustomElement };
