@telekom/scale-components/dist/scale-components/p-eb40bf0a.entry.js

Scale is the digital design system for Telekom products and experiences.

import{r as t,c as a,h as i,a as o,g as n}from"./p-d52b3602.js";import{c as e}from"./p-c608c6dc.js";import{a as s}from"./p-086c9d13.js";const r={informational:"scale-icon-alert-information",warning:"scale-icon-alert-warning",success:"scale-icon-action-success",danger:"scale-icon-alert-error"},c=class{constructor(i){t(this,i),this.scaleOpen=a(this,"scale-open",7),this.scaleBeforeClose=a(this,"scale-before-close",7),this.scaleClose=a(this,"scale-close",7),this.type="inline",this.variant="informational",this.dismissible=!1,this.innerAriaLive="assertive",this.closeButtonLabel="Close",this.closeButtonTitle="Close",this.headingLevel=2,this.ariaHeading="Information",this.isOpen=this.opened||!1,this.role="alert",this.hasTextSlot=!1,this.lastCloseEventTrigger=null,this.open=()=>{this.isOpen=!0,this.role="alert",this.animationState="in",requestAnimationFrame((async()=>{await s(this.hostElement.shadowRoot),this.animationState=void 0,this.scaleOpen.emit(),void 0!==this.delay&&setTimeout(this.timeout,this.delay)}))},this.close=()=>{const t=this.scaleBeforeClose.emit({trigger:this.lastCloseEventTrigger});this.lastCloseEventTrigger=null,t.defaultPrevented?this.opened=!0:(this.animationState="out",requestAnimationFrame((async()=>{await s(this.hostElement.shadowRoot),this.animationState=void 0,this.isOpen=!1,this.scaleClose.emit()})))},this.timeout=()=>{this.lastCloseEventTrigger="TIMEOUT",this.opened=!1}}connectedCallback(){this.hostElement.hasAttribute("opened")&&(this.role=void 0,this.isOpen=!0),void 0!==this.delay&&setTimeout(this.timeout,this.delay),this.hasTextSlot=null!=this.hostElement.querySelector('[slot="text"]')}openedChanged(t){!0===t?(this.open(),this.lastCloseEventTrigger="ATTRIBUTE"):this.isOpen&&this.close()}render(){const t=r[this.variant];return i(o,null,this.styles&&i("style",null,this.styles),i("div",{part:e("base",this.animationState,`type-${this.type}`,`variant-${this.variant}`,this.isOpen&&"open"),role:this.role},i("div",{part:"icon","aria-hidden":"true"},i("slot",{name:"icon"},i(t,{size:20,selected:"toast"===this.type}))),i("div",{part:"body","aria-live":void 0===this.role?void 0:this.innerAriaLive},i("div",{part:"heading",role:"heading","aria-level":this.headingLevel,"aria-label":`${this.ariaHeading} ${this.heading}`},i("span",null,this.heading)),this.hasTextSlot&&i("div",{part:"text"},i("slot",{name:"text"}))),this.dismissible&&i("scale-button",{part:"close-button",variant:"ghost",onClick:()=>{this.lastCloseEventTrigger="CLOSE_BUTTON",this.opened=!1}},i("slot",{name:"close-icon"},i("scale-icon-action-circle-close",{"aria-label":this.closeButtonLabel,accessibilityTitle:this.closeButtonTitle,decorative:!0,size:20})))))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};c.style=":host{--width:100%;--width-toast:25rem;--radius:var(--telekom-radius-standard);--spacing-y:var(--telekom-spacing-composition-space-06);--spacing-y-inner:var(--telekom-spacing-composition-space-04);--spacing-x-aside:var(--telekom-spacing-composition-space-14);--duration-in:var(--telekom-motion-duration-transition);--duration-out:var(--telekom-motion-duration-transition);--easing-in:var(--telekom-motion-easing-enter);--easing-out:var(--telekom-motion-easing-exit);--translate-x:0;--translate-y:0;--translate-z:0;display:contents}[part~='base']{position:relative;display:none;box-sizing:border-box;border-radius:var(--radius);padding-right:var(--spacing-x-aside);width:var(--width);background:var(--_background-subtle);box-shadow:var(--_shadow);animation-duration:var(--duration)}[part~='base'][part~='open']{display:flex}@keyframes toggle{from{opacity:0;transform:translate3d(\n      var(--translate-x),\n      var(--translate-y),\n      var(--translate-z)\n    )}}[part~='in']{animation-name:toggle;animation-duration:var(--duration-in);animation-timing-function:var(--easing-in)}[part~='out']{animation-name:toggle;animation-direction:reverse;animation-duration:var(--duration-out);animation-timing-function:var(--easing-out)}[part~='variant-informational']{--_background-subtle:var(--telekom-color-functional-informational-subtle);--_background-accent:var(--telekom-color-functional-informational-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-informational)}[part~='variant-warning']{--_background-subtle:var(--telekom-color-functional-warning-subtle);--_background-accent:var(--telekom-color-functional-warning-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-warning)}[part~='variant-success']{--_background-subtle:var(--telekom-color-functional-success-subtle);--_background-accent:var(--telekom-color-functional-success-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-success)}[part~='variant-danger']{--_background-subtle:var(--telekom-color-functional-danger-subtle);--_background-accent:var(--telekom-color-functional-danger-standard);--_color-accent:var(--telekom-color-text-and-icon-functional-danger)}[part~='type-banner']{--_shadow:var(--telekom-shadow-floating-standard)}[part~='type-toast']{--translate-x:var(--telekom-spacing-composition-space-05);--_shadow:var(--telekom-shadow-top);width:var(--width-toast)}[part='icon']{display:flex;flex-shrink:0;justify-content:center;align-items:flex-start;width:var(--spacing-x-aside);padding-top:var(--spacing-y);padding-bottom:var(--spacing-y);border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);color:var(--_color-accent)}[part~='type-toast'] [part='icon']{background:var(--_background-accent);color:var(--telekom-color-text-and-icon-white-standard);align-items:center}[part~='type-toast'][part~='variant-warning'] [part='icon']{color:var(--telekom-color-text-and-icon-black-standard)}[part='body']{margin-top:var(--spacing-y);margin-bottom:var(--spacing-y)}[part~='type-toast'] [part='body']{padding-left:var(--spacing-y)}[part='heading']{font:var(--telekom-text-style-heading-6);line-height:var(--telekom-typography-line-spacing-tight)}[part='text']{margin-top:var(--spacing-y-inner)}::slotted(*){font:var(--telekom-text-style-body)}::slotted(p){margin:0;margin-top:var(--spacing-y-inner)}[part='close-button']{--color-ghost:var(--telekom-text-and-icon-standard);position:absolute;right:var(--telekom-spacing-composition-space-03);top:var(--telekom-spacing-composition-space-03)}@media screen and (forced-colors: active), (-ms-high-contrast: active){[part~='base']{border:1px solid white}[part='close-button']{--color-ghost:white}}";export{c as scale_notification}