"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    AtomicModal: ()=>AtomicModal
});
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const ref_js_namespaceObject = require("lit/directives/ref.js");
const when_js_namespaceObject = require("lit/directives/when.js");
const boolean_converter_cjs_namespaceObject = require("../../../converters/boolean-converter.cjs");
const bindings_cjs_namespaceObject = require("../../../decorators/bindings.cjs");
const error_guard_cjs_namespaceObject = require("../../../decorators/error-guard.cjs");
const watch_cjs_namespaceObject = require("../../../decorators/watch.cjs");
const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
const multi_class_map_cjs_namespaceObject = require("../../../directives/multi-class-map.cjs");
const bindings_mixin_cjs_namespaceObject = require("../../../mixins/bindings-mixin.cjs");
const event_utils_cjs_namespaceObject = require("../../../utils/event-utils.cjs");
const replace_breakpoint_utils_cjs_namespaceObject = require("../../../utils/replace-breakpoint-utils.cjs");
const utils_cjs_namespaceObject = require("../../../utils/utils.cjs");
function _ts_decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);
    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function _ts_metadata(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
}
class AtomicModal extends (0, bindings_mixin_cjs_namespaceObject.InitializeBindingsMixin)(external_lit_namespaceObject.LitElement) {
    connectedCallback() {
        super.connectedCallback();
        document.body.addEventListener('keyup', this.handleCloseOnEscape);
        document.body.addEventListener('touchmove', this.onWindowTouchMove, {
            passive: false
        });
    }
    render() {
        this.updateBreakpoints();
        return (0, external_lit_namespaceObject.html)`
      ${(0, when_js_namespaceObject.when)(this.shouldRender, ()=>(0, external_lit_namespaceObject.html)`
          <div
            part="backdrop"
            class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)((0, multi_class_map_cjs_namespaceObject.tw)({
                'top-0 right-0 bottom-0 left-0 z-9999': true,
                fixed: 'page' === this.boundary,
                absolute: 'page' !== this.boundary,
                'grid p-6 transition-colors duration-500 ease-in-out grid-template-modal': !this.fullscreen,
                'bg-[rgba(40,40,40,0.8)]': this.isOpen && !this.fullscreen,
                'pointer-events-auto': this.isOpen,
                'pointer-events-none': !this.isOpen
            }))}
            @click="${(e)=>e.target === e.currentTarget && this.close()}"
            data-nosnippet
          >
            <atomic-focus-trap
              class="contents"
              role="dialog"
              aria-modal=${this.isOpen ? 'true' : 'false'}
              aria-labelledby=${this.headerId}
              .source=${this.source}
              .container=${this.container ?? this}
              ${(0, ref_js_namespaceObject.ref)(this.focusTrap)}
              .scope=${this.scope}
            >
              ${this.renderContent()}
            </atomic-focus-trap>
          </div>
        `)}
    `;
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.body.removeEventListener('keyup', this.handleCloseOnEscape);
        document.body.removeEventListener('touchmove', this.onWindowTouchMove);
    }
    async initialize() {
        if (this.isOpen) {
            this.shouldRender = true;
            await this.handleToggleOpen(this.isOpen);
        }
    }
    async watchToggleOpen(_prev, next) {
        await this.handleToggleOpen(next ?? this.isOpen);
    }
    addModalOpenedClasses() {
        const modalOpenedClass = 'atomic-modal-opened';
        document.body.classList.add(modalOpenedClass);
        this.bindings?.interfaceElement?.classList?.add(modalOpenedClass);
    }
    createExecutionTracker() {
        return ++this.currentWatchToggleOpenExecution;
    }
    async handleModalClose() {
        const executionId = this.createExecutionTracker();
        this.removeModalOpenedClasses();
        this.setFocusTrapActive(false);
        await this.waitForAnimationEnded();
        this.onAnimationEnded();
        if (!this.isExecutionValid(executionId)) return;
        this.shouldRender = false;
    }
    async handleModalOpen() {
        const executionId = this.createExecutionTracker();
        if (!this.shouldRender) {
            this.shouldRender = true;
            await this.updateComplete;
        }
        this.addModalOpenedClasses();
        await this.waitForAnimationEnded();
        if (!this.isExecutionValid(executionId)) return;
        this.setFocusTrapActive(true);
    }
    async handleToggleOpen(isOpen) {
        if (isOpen) await this.handleModalOpen();
        else await this.handleModalClose();
    }
    isExecutionValid(executionId) {
        return executionId === this.currentWatchToggleOpenExecution;
    }
    removeModalOpenedClasses() {
        const modalOpenedClass = 'atomic-modal-opened';
        document.body.classList.remove(modalOpenedClass);
        this.bindings?.interfaceElement?.classList?.remove(modalOpenedClass);
    }
    renderContent() {
        return (0, external_lit_namespaceObject.html)`
      <article
        part="container"
        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)((0, multi_class_map_cjs_namespaceObject.tw)({
            '[grid-area:modal] bg-background text-on-background flex flex-col justify-between overflow-hidden': true,
            'animate-open': this.isOpen,
            'animate-close': !this.isOpen,
            'absolute inset-0': this.fullscreen,
            'rounded shadow': !this.fullscreen
        }))}
        ${(0, ref_js_namespaceObject.ref)(this.animatableContainer)}
      >
        <header
          part="header-wrapper"
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)((0, multi_class_map_cjs_namespaceObject.tw)({
            'flex flex-col items-center px-6 py-6': true,
            'py-4': !this.fullscreen
        }))}
        >
          <div
            part="header"
            class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)((0, multi_class_map_cjs_namespaceObject.tw)({
            'flex justify-between w-full max-w-lg text-xl': true,
            'font-bold': this.fullscreen
        }))}
            id=${this.headerId}
          >
            <slot name="header"></slot>
          </div>
        </header>
        <hr part="header-ruler" class="border-t border-neutral" />
        <div
          part="body-wrapper"
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)((0, multi_class_map_cjs_namespaceObject.tw)({
            'flex w-full grow flex-col items-center overflow-auto [scrollbar-gutter:stable_both-edges]': true,
            'px-6 pt-8 pb-5': this.fullscreen,
            'p-6': !this.fullscreen
        }))}
        >
          <div
            part="body"
            class="w-full max-w-lg"
            @touchmove=${(e)=>this.isOpen && e.stopPropagation()}
          >
            <slot name="body"></slot>
          </div>
        </div>
        <footer
          part="footer-wrapper"
          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)((0, multi_class_map_cjs_namespaceObject.tw)({
            'z-10 flex flex-col items-center w-full border-t border-neutral bg-background': true,
            'px-6 py-4 shadow-t-lg': this.fullscreen,
            'bg-neutral-light px-4 py-4.5': !this.fullscreen
        }))}
        >
          <div part="footer" class="w-full max-w-lg">
            <slot name="footer"></slot>
          </div>
        </footer>
      </article>
    `;
    }
    setFocusTrapActive(active) {
        if (this.focusTrap.value) this.focusTrap.value.active = active;
    }
    waitForAnimationEnded() {
        return new Promise((resolve)=>{
            if (!this.animatableContainer.value) return void resolve();
            (0, event_utils_cjs_namespaceObject.listenOnce)(this.animatableContainer.value, 'animationend', ()=>resolve());
        });
    }
    constructor(...args){
        super(...args), this.boundary = 'page', this.close = ()=>{
            this.isOpen = false;
            return false;
        }, this.fullscreen = false, this.isOpen = false, this.onAnimationEnded = ()=>{}, this.animatableContainer = (0, ref_js_namespaceObject.createRef)(), this.currentWatchToggleOpenExecution = 0, this.focusTrap = (0, ref_js_namespaceObject.createRef)(), this.headerId = (0, utils_cjs_namespaceObject.randomID)('atomic-modal-header-'), this.shouldRender = false, this.updateBreakpoints = (0, utils_cjs_namespaceObject.once)(()=>(0, replace_breakpoint_utils_cjs_namespaceObject.updateBreakpoints)(this)), this.handleCloseOnEscape = (e)=>{
            if (e.key?.toLowerCase() === 'escape') {
                if (this.isOpen) this.dispatchEvent((0, event_utils_cjs_namespaceObject.buildCustomEvent)('close'));
                if (this.close) this.close();
                this.isOpen = false;
            }
        }, this.onWindowTouchMove = (e)=>{
            this.isOpen && e.preventDefault();
        };
    }
}
AtomicModal.styles = (0, external_lit_namespaceObject.css)`
    @reference '../../../utils/tailwind.global.tw.css';

    @keyframes scaleUp {
      from {
        transform: scale(0.7) translateY(150vh);
        opacity: 0;
      }
      to {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    @keyframes slideDown {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(150vh);
        opacity: 0;
      }
    }

    article.animate-open {
      @apply animate-scale-up-modal;
    }

    article.animate-close {
      @apply animate-slide-down-modal;
    }

    .grid-template-modal {
      grid-template-areas:
        '. .     .'
        '. modal .'
        '. .     .';
      grid-template-columns: 1fr min(30rem, 100%) 1fr;
      grid-template-rows: 1fr auto 3fr;
    }
  `;
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof AnyBindings ? Object : AnyBindings)
], AtomicModal.prototype, "bindings", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
], AtomicModal.prototype, "error", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: String,
        reflect: true
    }),
    _ts_metadata("design:type", String)
], AtomicModal.prototype, "boundary", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", Function)
], AtomicModal.prototype, "close", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
], AtomicModal.prototype, "container", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        reflect: true,
        converter: boolean_converter_cjs_namespaceObject.booleanConverter
    })
], AtomicModal.prototype, "fullscreen", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Boolean,
        reflect: true,
        attribute: 'is-open',
        converter: boolean_converter_cjs_namespaceObject.booleanConverter
    })
], AtomicModal.prototype, "isOpen", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", Function)
], AtomicModal.prototype, "onAnimationEnded", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
], AtomicModal.prototype, "scope", void 0);
_ts_decorate([
    (0, decorators_js_namespaceObject.property)({
        type: Object,
        attribute: false
    }),
    _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
], AtomicModal.prototype, "source", void 0);
_ts_decorate([
    (0, error_guard_cjs_namespaceObject.errorGuard)(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicModal.prototype, "render", null);
_ts_decorate([
    (0, watch_cjs_namespaceObject.watch)('isOpen', {
        waitUntilFirstUpdate: false
    }),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", [
        Boolean,
        Boolean
    ]),
    _ts_metadata("design:returntype", Promise)
], AtomicModal.prototype, "watchToggleOpen", null);
AtomicModal = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-modal'),
    (0, bindings_cjs_namespaceObject.bindings)(),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicModal);
exports.AtomicModal = __webpack_exports__.AtomicModal;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicModal"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
