'use strict';

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

const index = require('./index-7a477838.js');
const typographyVariation_enum = require('./typography-variation.enum-8fd8bed4.js');
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
require('./badge-notification-shape.enum-ff802554.js');
require('./badge-status-variation.enum-0a5adc21.js');
const codeExampleVariation_enum = require('./code-example-variation.enum-1611825e.js');
require('./form-input-search-variation.enum-e0e025b1.js');
const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
require('./calendar-week-view-heading-level.enum-fd0c841b.js');
require('./code-variation.enum-c4a4e6fd.js');
require('./expandable-accordion-header-level.enum-45483252.js');
require('./expandable-faq-item-variation.enum-89427195.js');
require('./expandable-faq-variation.enum-af923f49.js');
require('./footer-card-variation.enum-99555edc.js');
require('./form-checkbox-variation.enum-d2ca879e.js');
require('./form-file-upload-variation.enum-634cfae8.js');
require('./form-input-type.enum-9c8ee12a.js');
require('./form-input-variation.enum-c750520c.js');
require('./form-select-variation.enum-528c1bf0.js');
require('./form-textarea-variation.enum-9c90d40f.js');
require('./form-validation-message-variation.enum-855ae0be.js');
require('./info-card-multi-type.enum-14746572.js');
require('./info-card-variation.enum-64cef637.js');
require('./layout-block-variation.enum-f6102119.js');
require('./layout-columns-variation.enum-65675649.js');
require('./link-button-variation.enum-137785e3.js');
require('./list-type.enum-aea4d012.js');
require('./loader-skeleton-variation.enum-d52ba55e.js');
require('./loader-spinner-size.enum-db2973f0.js');
require('./logo-variation.enum-607fadb4.js');
require('./media-figure-alignment.enum-3885aba5.js');
require('./navigation-sidebar-variation.enum-1c0c3064.js');
require('./progress-indicator-variation.enum-7cf8e0e4.js');
require('./progress-list-item-variation.enum-90e4c874.js');
require('./progress-list-variation.enum-06d5ce27.js');
require('./progressbar-variation.enum-aff9fa80.js');
require('./quote-image-inner-position.enum-e64e7a6d.js');
require('./table-variation.enum-25df2ad7.js');
require('./tag-media-icon.enum-372563c5.js');
require('./tag-size.enum-387c516c.js');
require('./tools-feedback-banner-type.enum-de373ba0.js');
require('./tools-feedback-rating-variation.enum-2f71e84d.js');
require('./tools-theme-provider.brand.enum-bc855272.js');
require('./typography-heading-jumbo-variation.enum-8677e099.js');
require('./typography-meta-variation.enum-13ac3538.js');
require('./typography-time-variation.enum-bce1d87e.js');
require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.afPrimaryButtonClick = index.createEvent(this, "afPrimaryButtonClick", 7);
        this.afSecondaryButtonClick = index.createEvent(this, "afSecondaryButtonClick", 7);
        this.afOnClose = index.createEvent(this, "afOnClose", 7);
        this._focusableElementsSelectors = 'a, input, select, textarea, button, button:not(hidden), iframe, object, [tabindex="0"]';
        this.focusableElements = [];
        this.afId = randomIdGenerator_util.randomIdGenerator('digi-dialog');
        this.afVariation = typographyVariation_enum.DialogVariation.PRIMARY;
        this.afSize = typographyVariation_enum.DialogSize.MEDIUM;
        this.afShowDialog = undefined;
        this.afCloseButtonText = 'Stäng';
        this.afHeadingLevel = typographyVariation_enum.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 == typographyVariation_enum.DialogVariation.PRIMARY,
            'digi-dialog--secondary': this.afVariation == typographyVariation_enum.DialogVariation.SECONDARY,
            'digi-dialog--small': this.afSize == typographyVariation_enum.DialogSize.SMALL,
            'digi-dialog--medium': this.afSize == typographyVariation_enum.DialogSize.MEDIUM,
            'digi-dialog--large': this.afSize == typographyVariation_enum.DialogSize.LARGE
        };
    }
    render() {
        return (index.h(index.Host, { key: '081d59c8f189c983387036ce62f06b4ee2769647', ref: (el) => {
                this._host = el;
            } }, this.afShowDialog && (index.h("div", { key: 'debe37c7ada92dd174a8123ca689219d212e7424', class: Object.assign({ 'digi-dialog': true }, this.cssModifiers) }, index.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" }, index.h("div", { key: 'f2f07c84aa00a9b52a8d1a74f31607707c875870', ref: (el) => {
                this._wrapper = el;
            }, role: "dialog", "aria-modal": "true", class: "digi-dialog__content" }, index.h("digi-typography", { key: 'da283fbd5b0a912196108295202513f3052a9c02' }, this.afCloseButtonText && (index.h("digi-button", { key: '7c502ad56a21bbf0d1c04b297431c4a34fef9c7f', ref: (el) => (this._closeButton = el), class: "digi-dialog__close-button", afAriaLabel: this.afCloseButtonText, afSize: codeExampleVariation_enum.ButtonSize.MEDIUM, "af-variation": "function", onAfOnClick: (e) => this.closeDialog(e) }, this.afCloseButtonText, index.h("digi-icon-x", { key: '7bb393f9bec6ffddc1f359d55cc57e034169282a', class: "digi-dialog__close-icon", slot: "icon-secondary" }))), index.h("slot", { key: 'ff74759213789351ed6bd7b814e2c5cf213f462a', name: "over-heading" }), this.afHeadingLevel && this.afHeading && (index.h(this.afHeadingLevel, { key: '67858397ee97563fc6c72be0de618940177957af', tabindex: "-1", ref: (el) => (this._dialogHeading = el) }, this.afHeading)), index.h("slot", { key: '7e09c92b7b9b2bc2b6a7328ba28aa3c0b89e43fd' }), index.h("div", { key: '32f8cd053a1ae5c149146997a37785fbfce87875', ref: (el) => (this._buttonContainer = el), class: "digi-dialog__button-container" }, this.afSecondaryButtonText && (index.h("digi-button", { key: '85770a5546a3edfa6a8397cc3ee75e2f4aa93ae4', ref: (el) => (this._secondaryButton = el), afVariation: buttonVariation_enum.ButtonVariation.SECONDARY, onAfOnClick: (e) => this.secondaryClickHandler(e) }, this.afSecondaryButtonText)), this.afPrimaryButtonText && (index.h("digi-button", { key: 'ef5e3b1b3af175edb2efcb423640badf0cfa9e9e', ref: (el) => (this._primaryButton = el), afVariation: buttonVariation_enum.ButtonVariation.PRIMARY, onAfOnClick: (e) => this.primaryClickHandler(e) }, this.afPrimaryButtonText))))))))));
    }
    get hostElement() { return index.getElement(this); }
};
Dialog.style = DigiDialogStyle0;

exports.digi_dialog = Dialog;
