import{r as o,c as t,h as a,a as e,g as s}from"./p-d52b3602.js";import{c as i}from"./p-c608c6dc.js";import{e as n}from"./p-086c9d13.js";function r(o,t,a,e=20,s=0){const i=[];if(s>=e)return i;const n=o=>{const i=o.assignedNodes().filter((o=>1===o.nodeType));return i.length>0?r(i[0].parentElement,t,a,e,s+1):[]},l=Array.from(o.children||[]);for(const o of l)t(o)||(a(o)&&i.push(o),null!=o.shadowRoot?i.push(...r(o.shadowRoot,t,a,e,s+1)):"SLOT"===o.tagName?i.push(...n(o)):i.push(...r(o,t,a,e,s+1)));return i}function l(o){return o.hasAttribute("hidden")||o.hasAttribute("aria-hidden")&&"false"!==o.getAttribute("aria-hidden")||"none"===o.style.display||"0"===o.style.opacity||"hidden"===o.style.visibility||"collapse"===o.style.visibility}function c(o){return"-1"!==o.getAttribute("tabindex")&&!l(o)&&!function(o){return o.hasAttribute("disabled")||o.hasAttribute("aria-disabled")&&"false"!==o.getAttribute("aria-disabled")}(o)&&(o.hasAttribute("tabindex")||(o instanceof HTMLAnchorElement||o instanceof HTMLAreaElement)&&o.hasAttribute("href")||o instanceof HTMLButtonElement||o instanceof HTMLInputElement||o instanceof HTMLTextAreaElement||o instanceof HTMLSelectElement||o instanceof HTMLIFrameElement)}
/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */function d(o,t,a){const e=o.animate(t,Object.assign(Object.assign({},a),{fill:"both"}));return e.addEventListener("finish",(()=>{e.commitStyles(),e.cancel()})),e}const h={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"},m={fadeIn:[Object.assign(Object.assign({offset:0},h),{opacity:0}),Object.assign(Object.assign({offset:1},h),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},h),{opacity:1}),Object.assign(Object.assign({offset:1},h),{opacity:0})],fadeInTop:[Object.assign(Object.assign({offset:0},h),{opacity:0,top:"-3rem"}),Object.assign(Object.assign({offset:1},h),{opacity:1,top:0})]},p="ResizeObserver"in window,b=class{constructor(a){o(this,a),this.scaleOpen=t(this,"scale-open",7),this.scaleOpenLegacy=t(this,"scaleOpen",7),this.scaleBeforeClose=t(this,"scale-before-close",7),this.scaleBeforeCloseLegacy=t(this,"scaleBeforeClose",7),this.scaleClose=t(this,"scale-close",7),this.scaleCloseLegacy=t(this,"scaleClose",7),this.size="default",this.opened=!1,this.duration=200,this.closeButtonLabel="Close",this.closeButtonTitle="Close",this.omitCloseButton=!1,this.alignActions="right",this.allowInjectingStyleToBody=!1,this.isOpen=this.opened||!1,this.hasActionsSlot=!1,this.hasBody=!1,this.hasScroll=!1,this.bodyOverflowValue="",this.focusableElements=[],this.handleKeypress=o=>{this.isOpen&&"Escape"===o.key&&this.emitBeforeClose("ESCAPE_KEY")},this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())},this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())}}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}componentWillRender(){const o=this.hostElement.querySelectorAll('[slot="action"]'),t=Array.from(this.hostElement.shadowRoot.querySelectorAll("slot")).find((o=>!o.name));this.hasActionsSlot=o.length>0,null!=t&&(this.hasBody=t.assignedElements().length>0)}emitBeforeClose(o){n(this,"scaleBeforeClose",{trigger:o}).some((o=>o.defaultPrevented))||(this.opened=!1)}componentDidLoad(){this.focusableElements=r(this.hostElement.shadowRoot,(o=>l(o)||o.matches("[data-focus-trap-edge]")),c),p&&(this.resizeObserver=new ResizeObserver((()=>{this.setHasScroll()})),this.resizeObserver.observe(this.modalBody)),this.setHasScroll()}setHasScroll(){const o=this.modalBody;this.hasScroll=o.scrollHeight>o.clientHeight}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(o){null!=o?o.focus():this.closeButton.focus()}openedChanged(o){!0===o?(this.open(),this.allowInjectingStyleToBody&&(this.bodyOverflowValue=document.body.style.overflow,document.body.style.setProperty("overflow","hidden"))):(this.close(),this.allowInjectingStyleToBody&&document.body.style.setProperty("overflow",this.bodyOverflowValue))}open(){this.isOpen=!0;try{d(this.modalWindow,m.fadeInTop,{duration:this.duration,delay:.5*this.duration}),d(this.modalContainer,m.fadeIn,{duration:this.duration}).addEventListener("finish",(()=>{this.attemptFocus(this.getFirstFocusableElement()),n(this,"scaleOpen")})),this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(o){n(this,"scaleOpen")}}close(){try{d(this.modalContainer,m.fadeOut,{duration:this.duration}).addEventListener("finish",(()=>{this.isOpen=!1,n(this,"scaleClose")})),this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(o){this.isOpen=!1,n(this,"scaleClose")}}render(){return a(e,null,this.styles&&a("style",null,this.styles),a("div",{ref:o=>this.modalContainer=o,class:this.getCssClassMap(),part:i("base",this.isOpen&&"open")},a("div",{class:"modal__backdrop",part:"backdrop",onClick:()=>this.emitBeforeClose("BACKDROP")}),a("div",{"data-focus-trap-edge":!0,onFocus:this.handleTopFocus,tabindex:"0"}),a("div",{class:"modal__window",part:i("window",this.size&&`size-${this.size}`),ref:o=>this.modalWindow=o,role:"dialog","aria-modal":"true","aria-label":this.heading},a("div",{class:"modal__header",part:i("header",this.hasScroll&&"has-scroll")},a("h2",{class:"modal__heading",part:"heading"},this.heading),!this.omitCloseButton&&a("button",{ref:o=>this.closeButton=o,class:"modal__close-button",part:"close-button",onClick:()=>this.emitBeforeClose("CLOSE_BUTTON"),"aria-label":this.closeButtonLabel,title:this.closeButtonTitle},a("slot",{name:"close-icon"},a("scale-icon-action-circle-close",{decorative:!0})))),a("div",{ref:o=>this.modalBody=o,class:"modal__body-wrapper",part:i("body-wrapper",this.hasBody&&"has-body")},a("div",{class:"modal__body",part:i("body",this.hasBody&&"has-body")},a("slot",null))),a("div",{class:"modal__actions",part:i("actions",`align-${this.alignActions}`,this.hasActionsSlot&&"has-actions",this.hasScroll&&"has-scroll")},a("slot",{name:"action"}))),a("div",{"data-focus-trap-edge":!0,onFocus:this.handleBottomFocus,tabindex:"0"})))}getCssClassMap(){return i("modal",this.isOpen&&"modal--is-open",this.hasActionsSlot&&"modal--has-actions",`modal--align-actions-${this.alignActions}`,this.hasScroll&&"modal--has-scroll",this.hasBody&&"modal--has-body",this.size&&`modal--size-${this.size}`)}get hostElement(){return s(this)}static get watchers(){return{opened:["openedChanged"]}}};b.style=":host{--spacing-x:var(--telekom-spacing-composition-space-06);--background-overlay:var(\n    --telekom-color-background-backdrop,\n    rgba(108, 108, 108, 0.7)\n  );--max-height-window:calc(\n    100vh - (2 * var(--telekom-spacing-composition-space-19))\n  );--radius-window:var(--telekom-radius-large);--box-shadow-window:var(--telekom-shadow-top);--background-window:var(--telekom-color-background-surface);--color-window:var(--telekom-color-text-and-icon-standard);--size-window-small:calc(\n    (6 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (5 * var(--telekom-spacing-composition-space-10))\n  );--size-window-default:calc(\n    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (7 * var(--telekom-spacing-composition-space-10))\n  );--size-window-large:calc(\n    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (11 * var(--telekom-spacing-composition-space-10))\n  );--spacing-x-header:var(--telekom-spacing-composition-space-08);--spacing-y-header:var(--telekom-spacing-composition-space-08);--border-bottom-header-has-scroll:var(--telekom-line-weight-standard) solid\n    var(--telekom-color-ui-subtle);--font-family-heading:var(--telekom-typography-font-family-sans);--font-size-heading:var(--telekom-typography-font-size-callout);--font-weight-heading:var(--telekom-typography-font-weight-extra-bold);--spacing-close-button:var(--telekom-spacing-composition-space-04);--radius-close-button:var(--telekom-radius-standard);--transition-close-button:all var(--telekom-motion-duration-transition)\n    var(--telekom-motion-easing-standard);--box-shadow-close-button-focus:0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus-standard);--color-close-button:var(--telekom-color-text-and-icon-standard);--color-close-button-hover:var(--telekom-color-primary-hovered);--color-close-button-active:var(--telekom-color-primary-pressed);--spacing-x-body-wrapper:var(--telekom-spacing-composition-space-08);--spacing-y-body:var(--telekom-spacing-composition-space-08);--spacing-actions:var(--telekom-spacing-composition-space-06)\n    var(--telekom-spacing-composition-space-08)\n    var(--telekom-spacing-composition-space-08);--spacing-x-actions-slotted:var(--telekom-spacing-composition-space-04);--background-actions-has-scroll:var(\n    --telekom-color-background-surface-subtle\n  )}.modal{top:0;left:0;width:100%;bottom:0;display:none;z-index:100;position:fixed;background:var(--background-overlay);box-sizing:border-box;align-items:center;justify-content:center;padding-left:var(--spacing-x);padding-right:var(--spacing-x)}.modal.modal--is-open{display:flex}.modal__backdrop{top:0;left:0;width:100%;height:100%;z-index:0;position:absolute}.modal__window{width:100%;height:auto;display:flex;z-index:1;position:relative;overflow-y:auto;flex-direction:column;background-color:var(--background-window);color:var(--color-window);max-height:var(--max-height-window);min-height:var(--min-height-window);border-radius:var(--radius-window);box-shadow:var(--box-shadow-window)}.modal__window .modal__body-wrapper{overflow-y:auto;flex-shrink:1;flex-grow:1}.modal--size-small .modal__window{max-width:var(--size-window-small)}.modal--size-default .modal__window{max-width:var(--size-window-default)}.modal--size-large .modal__window{max-width:var(--size-window-large)}@media (max-height: 30em){.modal__window{max-height:calc(100vh - var(--telekom-spacing-composition-space-08))}}.modal__window:after{top:0;left:0;width:100%;border:1px solid transparent;height:100%;content:'';display:block;position:absolute;box-sizing:border-box;pointer-events:none;border-radius:var(--radius-window)}.modal__header{display:flex;align-items:flex-start;flex-shrink:0;justify-content:space-between;margin-left:var(--spacing-x-header);margin-right:var(--spacing-x-header);padding-top:var(--spacing-y-header);padding-bottom:var(--spacing-y-header)}.modal--has-scroll .modal__header{border-bottom:var(--border-bottom-header-has-scroll)}.modal__heading{margin:0;font-family:var(--font-family-heading);font-size:var(--font-size-heading);font-weight:var(--font-weight-heading)}.modal__close-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-close-button);margin-bottom:calc(-2 * var(--spacing-close-button));border:0;border-radius:var(--radius-close-button);outline:none;color:var(--color-close-button);background:transparent;transition:var(--transition-close-button);transform:translate(\n    var(--spacing-close-button),\n    calc(-1 * var(--spacing-close-button))\n  );appearance:none;cursor:pointer;user-select:none}.modal__close-button:focus{box-shadow:var(--box-shadow-close-button-focus)}.modal__close-button:hover{color:var(--color-close-button-hover)}.modal__close-button:active{color:var(--color-close-button-active)}.modal__body-wrapper{padding-left:var(--spacing-x-body-wrapper);padding-right:var(--spacing-x-body-wrapper)}.modal--has-body .modal__body-wrapper{min-height:var(--telekom-spacing-related-lg)}.modal--has-body .modal__body{margin-top:0;margin-bottom:0}.modal--has-body:not(.modal--has-actions) .modal__body{margin-bottom:var(--spacing-y-body)}.modal--has-scroll.modal--has-body .modal__body{margin-top:var(--spacing-y-body);margin-bottom:var(--spacing-y-body)}.modal--has-body .modal__body ::slotted(*){font:var(--telekom-text-style-body)}.modal--has-body .modal__body ::slotted(*:not([slot]):first-child){margin-top:0}.modal--has-body .modal__body ::slotted(*:not([slot]):last-of-type){margin-bottom:0}.modal__actions{display:none;flex-shrink:0;justify-content:flex-end;padding:var(--spacing-actions)}.modal__actions ::slotted(*){margin-left:var(--spacing-x-actions-slotted)}.modal--has-actions .modal__actions{display:flex}.modal--align-actions-left .modal__actions{justify-content:flex-start}.modal--has-scroll .modal__actions{background-color:var(--background-actions-has-scroll)}";export{b as scale_modal}