import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
import { f as DialogVariation, e as DialogSize, D as DialogHeadingLevel } from './p-5a256d98.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import './p-717306ef.js';
import './p-a4a001e1.js';
import { B as ButtonSize, b as ButtonVariation } from './p-f518a4cf.js';
import './p-7e32c40b.js';
import './p-dcdffb3c.js';
import './p-5d21a361.js';
import './p-ad16c7a1.js';
import './p-f40f4b2a.js';
import './p-1f68d501.js';
import './p-ee88e3f1.js';
import './p-8142cc73.js';
import './p-905ccb30.js';
import './p-bc3d2778.js';
import './p-c8429245.js';
import './p-06625463.js';
import './p-f447b984.js';
import './p-9c5a93d8.js';
import './p-7933b555.js';
import './p-0f6c0360.js';
import './p-814ca2ad.js';
import './p-d8a98b3b.js';
import './p-07303cb5.js';
import './p-5f8dc01a.js';
import './p-2a023831.js';
import './p-5ba6737a.js';
import './p-e4a9f8f0.js';
import './p-f2a6768b.js';
import './p-40657c82.js';
import './p-f600576a.js';
import './p-3b20ec86.js';
import './p-9dd5d6c8.js';
import './p-77a93845.js';
import './p-06f939ab.js';
import './p-8cd2d6dd.js';
import './p-484a1d6d.js';
import './p-0f3fbb1e.js';
import './p-820e795b.js';
import './p-46cbbcb5.js';
import './p-d74742b8.js';
import './p-6e383896.js';
import './p-4bad4fb0.js';
import './p-d1886fff.js';
import './p-a6ca40fc.js';
import './p-b0e88537.js';
import './p-cdcaf0eb.js';
import { d as defineCustomElement$5 } from './p-e8fc33ed.js';
import { d as defineCustomElement$4 } from './p-70ca6868.js';
import { d as defineCustomElement$3 } from './p-5c53d1d4.js';
import { d as defineCustomElement$2 } from './p-36cbc6fd.js';

const dialogCss = ":host{--digi--dialog--backdrop--position:fixed;--digi--dialog--backdrop--opacity:1;--digi--dialog--backdrop--z--index:999;--digi--dialog--backdrop--left:0;--digi--dialog--backdrop--top:0;--digi--dialog--backdrop--width:100vw;--digi--dialog--backdrop--height:100vh;--digi--dialog--backdrop--display:flex;--digi--dialog--backdrop--justify--content:center;--digi--dialog--backdrop--align--items:center;--digi--dialog--close--button--display:grid;--digi--dialog--close--button--justify--content:end;--digi--dialog--close--button--margin--right:-1rem;--digi--dialog--button--container--display:flex;--digi--dialog--button--container--flex-wrap:wrap;--digi--dialog--button--container--gap:var(--digi--gutter--large);--digi--dialog--button--container--padding--top:var(--digi--gutter--largest-2);--digi--dialog--button--text--align--mobile:center;--digi--dialog--content--gutter:var(--digi--gutter--largest);--digi--dialog--content--margin:var(--digi--margin--large) auto;--digi--dialog--content--padding:var(--digi--padding--large);--digi--dialog--content--width--small:28.75rem;--digi--dialog--content--width--medium:42.1875rem;--digi--dialog--content--width--large:56.25rem;--digi--dialog--content--color--primary:var(--digi--color--text--primary);--digi--dialog--content--color--background--primary:var(--digi--color--background--primary);--digi--dialog--icon--color--primary:var(--digi--color--icon--primary);--digi--dialog--icon--color--primary--hover:var(--digi--color--icon--primary)}:host .digi-dialog{background:rgba(0, 0, 0, 0.7);overflow-x:hidden;overflow-y:auto;position:var(--digi--dialog--backdrop--position);opacity:var(--digi--dialog--backdrop--opacity);z-index:var(--digi--dialog--backdrop--z--index);left:var(--digi--dialog--backdrop--left);top:var(--digi--dialog--backdrop--top);width:var(--digi--dialog--backdrop--width);height:var(--digi--dialog--backdrop--height);display:var(--digi--dialog--backdrop--display);justify-content:var(--digi--dialog--backdrop--justify--content);align-items:var(--digi--dialog--backdrop--align--items);padding:var(--digi--padding--medium);box-sizing:border-box}:host .digi-dialog--primary{--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--primary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--primary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:initial}:host .digi-dialog--secondary{--digi--dialog--content--color--secondary:var(\n    --digi--global--color--profile--white--base\n  );--digi--dialog--content--color--background--secondary:var(\n    --digi--global--color--profile--blue--base\n  );--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--secondary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--secondary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:#b7b7ff;--digi--color--text--primary:var(--digi--dialog--content--color--secondary)}:host .digi-dialog--small{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--small)}:host .digi-dialog--medium{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--medium)}:host .digi-dialog--large{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--large)}:host .digi-dialog__keydown-handler{width:100%;max-height:100%}:host .digi-dialog__content{background:var(--DIGI--DIALOG--COLOR--BACKGROUND);color:var(--DIGI--DIALOG--COLOR);max-width:var(--DIGI--DIALOG--CONTENT--WIDTH);width:100%;margin:var(--digi--dialog--content--margin);padding:var(--digi--padding--smaller) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding);box-sizing:border-box}:host .digi-dialog__close-button{--digi--button--color--text--function--default:var(--DIGI--DIALOG--COLOR);--digi--button--color--text--function--hover:var(--DIGI--DIALOG--COLOR);--digi--button--color--icon--function--default:var(--digi--dialog--icon--color--primary);--digi--button--color--icon--function--hover:var(--digi--dialog--icon--color--primary--hover);display:var(--digi--dialog--close--button--display);justify-content:var(--digi--dialog--close--button--justify--content);margin-right:var(--digi--dialog--close--button--margin--right)}:host .digi-dialog__button-container{display:var(--digi--dialog--button--container--display);flex-wrap:var(--digi--dialog--button--container--flex-wrap);gap:var(--digi--dialog--button--container--gap);padding-top:var(--digi--dialog--button--container--padding--top)}:host .digi-dialog__button-container digi-button,:host .digi-dialog__button-container .digi-button--medium{text-align:var(--digi--dialog--button--text--align--mobile)}:host .digi-dialog__button-container digi-button :first-of-type,:host .digi-dialog__button-container .digi-button--medium :first-of-type{--digi--button--color--border--primary--default:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY);--digi--button--color--border--primary--hover:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY)}";
const DigiDialogStyle0 = dialogCss;

const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.afPrimaryButtonClick = createEvent(this, "afPrimaryButtonClick", 7);
        this.afSecondaryButtonClick = createEvent(this, "afSecondaryButtonClick", 7);
        this.afOnClose = createEvent(this, "afOnClose", 7);
        this._focusableElementsSelectors = 'a, input, select, textarea, button, button:not(hidden), iframe, object, [tabindex="0"]';
        this.focusableElements = [];
        this.afId = randomIdGenerator('digi-dialog');
        this.afVariation = DialogVariation.PRIMARY;
        this.afSize = DialogSize.MEDIUM;
        this.afShowDialog = undefined;
        this.afCloseButtonText = 'Stäng';
        this.afHeadingLevel = DialogHeadingLevel.H2;
        this.afHeading = undefined;
        this.afPrimaryButtonText = undefined;
        this.afSecondaryButtonText = undefined;
        this.afFallbackElementSelector = undefined;
    }
    primaryClickHandler(e) {
        this.afPrimaryButtonClick.emit(e);
    }
    secondaryClickHandler(e) {
        this.afSecondaryButtonClick.emit(e);
    }
    escHandler(e) {
        if (this._closeButton) {
            this.closeDialog(e);
        }
    }
    shiftHandler(e) {
        let el;
        if (document.activeElement.tagName === 'DIGI-DIALOG') {
            el = document.activeElement.shadowRoot.activeElement;
        }
        else {
            el = document.activeElement;
        }
        if (this.shouldUseFocusTrap) {
            if (el === this._dialogHeading && !!this.closeButtonEl) {
                e.detail.preventDefault();
                this.closeButtonEl.focus();
            }
            else if (el === this.firstFocusableEl && !!this.closeButtonEl) {
                e.detail.preventDefault();
                this.closeButtonEl.focus();
            }
            else if (el === this._dialogHeading && !this.closeButtonEl) {
                e.detail.preventDefault();
                this.lastFocusableEl.focus();
            }
            else if (el === this.firstFocusableEl && !this.closeButtonEl) {
                e.detail.preventDefault();
                this.lastFocusableEl.focus();
            }
            else if (el === this.closeButtonEl) {
                e.detail.preventDefault();
                this.lastFocusableEl.focus();
            }
        }
        else {
            e.detail.preventDefault();
        }
    }
    tabHandler(e) {
        let el;
        if (document.activeElement.tagName === 'DIGI-DIALOG') {
            el = document.activeElement.shadowRoot.activeElement;
        }
        else {
            el = document.activeElement;
        }
        if (this.shouldUseFocusTrap) {
            if (el === this.lastFocusableEl && !!this.closeButtonEl) {
                e.detail.preventDefault();
                this.closeButtonEl.focus();
            }
            else if (el === this.closeButtonEl || el === this.lastFocusableEl) {
                e.detail.preventDefault();
                this.firstFocusableEl.focus();
            }
        }
        else {
            e.detail.preventDefault();
        }
    }
    onActive() {
        document.body.style.overflow = 'hidden';
        if (!this.afCloseButtonText) {
            this._wrapper.style.paddingTop = '25px';
        }
        if (this._dialogHeading) {
            this._dialogHeading.style.marginTop = '0';
        }
        this.onResize();
        setTimeout(() => {
            this.setFallback();
            this.getFocusableItems();
            this.setFocus();
        }, 50);
    }
    buttonWidthMaxContent() {
        if (this._primaryButton) {
            this._primaryButton.style.width = 'max-content';
            this._primaryButton.querySelector('button').style.width = 'max-content';
        }
        if (this._secondaryButton) {
            this._secondaryButton.style.width = 'max-content';
            this._secondaryButton.querySelector('button').style.width = 'max-content';
        }
    }
    buttonWidth100Percent() {
        if (this._primaryButton) {
            this._primaryButton.style.width = '100%';
            this._primaryButton.querySelector('button').style.width = '100%';
        }
        if (this._secondaryButton) {
            this._secondaryButton.style.width = '100%';
            this._secondaryButton.querySelector('button').style.width = '100%';
        }
    }
    onResize() {
        this.buttonContainerObserver = new ResizeObserver(() => {
            if (this._buttonContainer.clientWidth <= 313) {
                this.buttonWidth100Percent();
            }
            else {
                this.buttonWidthMaxContent();
            }
        });
        this.buttonContainerObserver.observe(this._buttonContainer);
    }
    onInactive() {
        const el = this.fallbackElement;
        if (el) {
            el.focus();
        }
        this.buttonContainerObserver.disconnect();
        document.body.style.overflow = '';
    }
    closeDialog(e) {
        this.afShowDialog = false;
        this.afOnClose.emit(e);
    }
    setFallback() {
        if (!!this.afFallbackElementSelector &&
            !!document.querySelector(this.afFallbackElementSelector)) {
            this.fallbackElement = document.querySelector(this.afFallbackElementSelector);
            if (this.fallbackElement instanceof HTMLHeadingElement) {
                this.fallbackElement.setAttribute('tabindex', '-1');
            }
        }
        else {
            this.fallbackElement = document.activeElement;
        }
    }
    setFocus() {
        if (this.afShowDialog) {
            let el;
            if (this.afHeading) {
                el = this._dialogHeading;
                this._dialogHeading.style.outline = 'none';
            }
            else if (this.firstFocusableEl) {
                el = this.firstFocusableEl;
                if (!el.getAttribute('tabindex')) {
                    el.setAttribute('tabindex', '0');
                }
            }
            else if (this.closeButtonEl) {
                el = this.closeButtonEl;
            }
            else {
                el = this._wrapper;
                el.setAttribute('tabindex', '0');
            }
            if (el) {
                el.focus();
            }
        }
    }
    getFocusableItems() {
        let allElements;
        const slotElements = this._host.querySelectorAll(this._focusableElementsSelectors);
        const defaultElements = this._wrapper.querySelectorAll(this._focusableElementsSelectors);
        if (this._closeButton) {
            this.closeButtonEl = this._closeButton.children[0];
            const defaultElementsWithoutCloseButton = Array.prototype.slice.call(defaultElements);
            defaultElementsWithoutCloseButton.shift();
            allElements = Array.from(slotElements).concat(Array.from(defaultElementsWithoutCloseButton));
        }
        else {
            allElements = Array.from(slotElements).concat(Array.from(defaultElements));
        }
        this.focusableElements = allElements;
        if (this.focusableElements.length > 0) {
            this.firstFocusableEl = this.focusableElements[0];
            this.lastFocusableEl = this.focusableElements[this.focusableElements.length - 1];
        }
    }
    componentDidLoad() {
        if (this.afShowDialog) {
            this.onActive();
        }
    }
    componentDidUpdate() {
        if (this.afShowDialog) {
            this.onActive();
        }
        else if (!this.afShowDialog && this.fallbackElement) {
            this.onInactive();
        }
    }
    get shouldUseFocusTrap() {
        return this.afShowDialog && this.focusableElements.length > 0;
    }
    get cssModifiers() {
        return {
            'digi-dialog--primary': this.afVariation == DialogVariation.PRIMARY,
            'digi-dialog--secondary': this.afVariation == DialogVariation.SECONDARY,
            'digi-dialog--small': this.afSize == DialogSize.SMALL,
            'digi-dialog--medium': this.afSize == DialogSize.MEDIUM,
            'digi-dialog--large': this.afSize == DialogSize.LARGE
        };
    }
    render() {
        return (h(Host, { key: '081d59c8f189c983387036ce62f06b4ee2769647', ref: (el) => {
                this._host = el;
            } }, this.afShowDialog && (h("div", { key: 'debe37c7ada92dd174a8123ca689219d212e7424', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, h("digi-util-keydown-handler", { key: 'fbdcc37692c3c73745bc2d423e896137fd878392', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e), class: "digi-dialog__keydown-handler" }, h("div", { key: 'f2f07c84aa00a9b52a8d1a74f31607707c875870', ref: (el) => {
                this._wrapper = el;
            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, h("digi-typography", { key: 'da283fbd5b0a912196108295202513f3052a9c02' }, this.afCloseButtonText && (h("digi-button", { key: '7c502ad56a21bbf0d1c04b297431c4a34fef9c7f', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, h("digi-icon-x", { key: '7bb393f9bec6ffddc1f359d55cc57e034169282a', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), h("slot", { key: 'ff74759213789351ed6bd7b814e2c5cf213f462a', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (h(this.afHeadingLevel, { key: '67858397ee97563fc6c72be0de618940177957af', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), h("slot", { key: '7e09c92b7b9b2bc2b6a7328ba28aa3c0b89e43fd' }), h("div", { key: '32f8cd053a1ae5c149146997a37785fbfce87875', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (h("digi-button", { key: '85770a5546a3edfa6a8397cc3ee75e2f4aa93ae4', ref: (el) => (this._secondaryButton = el), afVariation: ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (h("digi-button", { key: 'ef5e3b1b3af175edb2efcb423640badf0cfa9e9e', ref: (el) => (this._primaryButton = el), afVariation: ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
    }
    get hostElement() { return this; }
    static get style() { return DigiDialogStyle0; }
}, [1, "digi-dialog", {
        "afId": [1, "af-id"],
        "afVariation": [1, "af-variation"],
        "afSize": [1025, "af-size"],
        "afShowDialog": [1028, "af-show-dialog"],
        "afCloseButtonText": [1, "af-close-button-text"],
        "afHeadingLevel": [1, "af-heading-level"],
        "afHeading": [1, "af-heading"],
        "afPrimaryButtonText": [1, "af-primary-button-text"],
        "afSecondaryButtonText": [1, "af-secondary-button-text"],
        "afFallbackElementSelector": [1, "af-fallback-element-selector"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-dialog", "digi-button", "digi-icon-x", "digi-typography", "digi-util-keydown-handler"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-dialog":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Dialog);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "digi-icon-x":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-util-keydown-handler":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiDialog = Dialog;
const defineCustomElement = defineCustomElement$1;

export { DigiDialog, defineCustomElement };
