import{r as t,c as o,h as a,a as e,g as i}from"./p-7c16486e.js";import{c as s}from"./p-c608c6dc.js";import{e as n}from"./p-3bc9966d.js";function r(t,o,a,e=20,i=0){const s=[];if(i>=e)return s;const n=t=>{const s=t.assignedNodes().filter((t=>1===t.nodeType));return s.length>0?r(s[0].parentElement,o,a,e,i+1):[]},l=Array.from(t.children||[]);for(const t of l)o(t)||(a(t)&&s.push(t),null!=t.shadowRoot?s.push(...r(t.shadowRoot,o,a,e,i+1)):"SLOT"===t.tagName?s.push(...n(t)):s.push(...r(t,o,a,e,i+1)));return s}function l(t){return t.hasAttribute("hidden")||t.hasAttribute("aria-hidden")&&"false"!==t.getAttribute("aria-hidden")||"none"===t.style.display||"0"===t.style.opacity||"hidden"===t.style.visibility||"collapse"===t.style.visibility}function d(t){return"-1"!==t.getAttribute("tabindex")&&!l(t)&&!function(t){return t.hasAttribute("disabled")||t.hasAttribute("aria-disabled")&&"false"!==t.getAttribute("aria-disabled")}(t)&&(t.hasAttribute("tabindex")||(t instanceof HTMLAnchorElement||t instanceof HTMLAreaElement)&&t.hasAttribute("href")||t instanceof HTMLButtonElement||t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||t 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 c(t,o,a){const e=t.animate(o,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,u=class{constructor(a){t(this,a),this.scaleOpen=o(this,"scale-open",7),this.scaleOpenLegacy=o(this,"scaleOpen",7),this.scaleBeforeClose=o(this,"scale-before-close",7),this.scaleBeforeCloseLegacy=o(this,"scaleBeforeClose",7),this.scaleClose=o(this,"scale-close",7),this.scaleCloseLegacy=o(this,"scaleClose",7),this.customClass="",this.size="default",this.opened=!1,this.duration=200,this.closeButtonLabel="Close Pop-up",this.closeButtonTitle="Close",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=t=>{this.isOpen&&"Escape"===t.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 t=this.hostElement.querySelectorAll('[slot="action"]'),o=Array.from(this.hostElement.shadowRoot.querySelectorAll("slot")).find((t=>!t.name));this.hasActionsSlot=t.length>0,null!=o&&(this.hasBody=o.assignedElements().length>0)}emitBeforeClose(t){n(this,"scaleBeforeClose",{trigger:t}).some((t=>t.defaultPrevented))||(this.opened=!1)}componentDidLoad(){this.focusableElements=r(this.hostElement.shadowRoot,(t=>l(t)||t.matches("[data-focus-trap-edge]")),d),p&&(this.resizeObserver=new ResizeObserver((()=>{this.setHasScroll()})),this.resizeObserver.observe(this.modalBody)),this.setHasScroll()}setHasScroll(){const t=this.modalBody;this.hasScroll=t.scrollHeight>t.clientHeight}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(t){null!=t?t.focus():this.closeButton.focus()}openedChanged(t){!0===t?(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{c(this.modalWindow,m.fadeInTop,{duration:this.duration,delay:.5*this.duration}),c(this.modalContainer,m.fadeIn,{duration:this.duration}).addEventListener("finish",(()=>{this.attemptFocus(this.getFirstFocusableElement()),n(this,"scaleOpen")})),this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(t){n(this,"scaleOpen")}}close(){try{c(this.modalContainer,m.fadeOut,{duration:this.duration}).addEventListener("finish",(()=>{this.isOpen=!1,n(this,"scaleClose")})),this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(t){this.isOpen=!1,n(this,"scaleClose")}}render(){return a(e,null,this.styles&&a("style",null,this.styles),a("div",{ref:t=>this.modalContainer=t,class:this.getCssClassMap(),part:s("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:s("window",this.size&&`size-${this.size}`),ref:t=>this.modalWindow=t,role:"dialog","aria-modal":"true","aria-label":this.heading},a("div",{class:"modal__header",part:s("header",this.hasScroll&&"has-scroll")},a("h2",{class:"modal__heading",part:"heading"},this.heading),a("button",{ref:t=>this.closeButton=t,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:t=>this.modalBody=t,class:"modal__body-wrapper",part:s("body-wrapper",this.hasBody&&"has-body")},a("div",{class:"modal__body",part:s("body",this.hasBody&&"has-body")},a("slot",null))),a("div",{class:"modal__actions",part:s("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 s("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 i(this)}static get watchers(){return{opened:["openedChanged"]}}};u.style=":host{--spacing-x:var(--telekom-spacing-unit-x4);--background-overlay:var(\n    --telekom-color-background-backdrop,\n    rgba(108, 108, 108, 0.7)\n  );--max-height-window:calc(100vh - (2 * var(--telekom-spacing-unit-x20)));--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-unit-x8))\n  );--size-window-default:calc(\n    (8 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (7 * var(--telekom-spacing-unit-x8))\n  );--size-window-large:calc(\n    (12 * var(--telekom-spacing-unit-x14, 3.5rem)) +\n      (11 * var(--telekom-spacing-unit-x8))\n  );--spacing-x-header:var(--telekom-spacing-unit-x6);--spacing-y-header:var(--telekom-spacing-unit-x6);--border-bottom-header-has-scroll:var(--telekom-line-weight-standard) solid\n    var(\n      --telekom-color-ui-general-subtle,\n      var(--telekom-color-ui-additional-subtle)\n    );--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-unit-x2);--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);--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-unit-x6);--spacing-y-body:var(--telekom-spacing-unit-x6);--spacing-actions:var(--telekom-spacing-unit-x6);--spacing-x-actions-slotted:var(--telekom-spacing-unit-x2);--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);border-radius:var(--radius-window);box-shadow:var(--box-shadow-window)}.modal__window .modal__body-wrapper{overflow-y:auto;flex-shrink: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-unit-x6))}}.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:var(--spacing-y-body);margin-bottom:var(--spacing-y-body)}.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{u as scale_modal}