@siemens/ix 0.0.0-pr-1724-20250228145306 → 0.0.0-pr-1724-20250305102750

package/dist/siemens-ix/p-3b98cd89.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["applicationHeaderCss","IxApplicationHeaderStyle0","ApplicationHeader","constructor","hostRef","this","showMenu","breakpoint","menuExpanded","suppressResponsive","hasSlottedElements","contentBackground","hostElement","shadowRoot","querySelector","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","host","applicationLayoutService","applicationLayoutContext","tryUpdateAppSwitch","menuDisposable","menuController","expandChange","on","show","modeDisposable","onChange","mode","updateIsSlottedContent","componentDidLoad","attachSiemensLogoIfLoaded","disconnectedCallback","_a","dispose","_b","watchApplicationLayoutContext","watchSuppressResponsive","isLogoSlotted","slotElement","nodes","assignedNodes","flatten","length","window","customElements","whenDefined","logoElement","document","createElement","appendChild","onMenuClick","toggle","menuToggle","emit","resolveContextMenuButton","Promise","resolve","readTask","callbackUpdateAppSwitchModal","appSwitchConfig","showAppSwitch","defaultPrevented","openAppSwitch","onContentBgClick","e","target","preventDefault","render","hasApplicationContextAvailable","showMenuByApplicationFrame","showApplicationSwitch","h","Host","key","class","slot","onClick","expanded","icon","ghost","logo","name","format","Fragment","discoverAllSubmenus","trigger","onSlotchange"],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: flex-end;\n  flex-wrap: nowrap;\n  position: relative;\n  width: 100%;\n  height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  min-height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  padding-top: 0;\n  padding-right: calc(1rem + var(--ix-safe-area-inset-right, 0rem));\n  padding-bottom: 0.3rem;\n  padding-left: calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    margin-bottom: 0.25rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .logo {\n    margin-left: 0.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   *\n   * @since 2.5.0\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   *\n   * @since 2.5.0\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the app switch button is clicked\n   *\n   * @since 3.0.0\n   */\n  @Event() openAppSwitch!: EventEmitter<void>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext?: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement\n        .shadowRoot!.querySelector('.logo')\n        ?.appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot!.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (\n      !this.callbackUpdateAppSwitchModal ||\n      !this.applicationLayoutContext?.appSwitchConfig\n    ) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    const { defaultPrevented } = this.openAppSwitch.emit();\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (!this.applicationLayoutContext?.appSwitchConfig) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot!.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"application-header\"\n      >\n        {(this.showMenu || showMenuByApplicationFrame) && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {showApplicationSwitch && (\n          <ix-icon-button\n            onClick={() => this.showAppSwitch()}\n            icon=\"apps\"\n            ghost\n            class=\"app-switch\"\n          ></ix-icon-button>\n        )}\n        <div class={{ logo: true }}>\n          <slot name=\"logo\"></slot>\n        </div>\n        <ix-typography format=\"body-lg\" class=\"name\">\n          {this.name}\n        </ix-typography>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                icon=\"more-menu\"\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-4b4437ec.js

@@ -1,2 +0,0 @@
-import{h as e}from"./p-1fa2fc36.js";import{a as n}from"./p-5fe87e71.js";import{s as t}from"./p-2afe3e27.js";import{c as a}from"./p-e898862b.js";import{a as i}from"./p-360b158e.js";import{a as r}from"./p-71206084.js";function s(n){return e("textarea",Object.assign({readOnly:n.readonly,disabled:n.disabled,maxLength:n.maxLength,minLength:n.minLength,cols:n.textareaCols,rows:n.textareaRows,ref:n.textAreaRef,class:{"is-invalid":n.isInvalid},required:n.required,value:n.value,placeholder:n.placeholder,onInput:e=>{const t=e.target;n.updateFormInternalValue(t.value);n.valueChange(t.value)},onBlur:()=>n.onBlur(),style:{resize:n.resizeBehavior,height:n.textareaHeight,width:n.textareaWidth}},n.ariaAttributes))}function o(n){return e("input",Object.assign({id:n.id,autoComplete:"off",readOnly:n.readonly,disabled:n.disabled,min:n.min,max:n.max,maxLength:n.maxLength?Number(n.maxLength):undefined,minLength:n.maxLength?Number(n.minLength):undefined,ref:n.inputRef,pattern:n.pattern,type:n.type,class:{"is-invalid":n.isInvalid},required:n.required,value:n.value,placeholder:n.placeholder,onKeyPress:e=>n.onKeyPress(e),onInput:e=>{const t=e.target;n.updateFormInternalValue(t.value);n.valueChange(t.value)},onBlur:()=>n.onBlur()},n.ariaAttributes))}const u=(n,t)=>e("div",{class:"end-container",ref:n.slotEndRef},e("slot",{name:"end",onSlotchange:n.onSlotChange}),t);const c=n=>e("div",{class:"start-container",ref:n.slotStartRef},e("slot",{name:"start",onSlotchange:n.onSlotChange}));function l(e){const n=5;r({targets:e,duration:200,easing:"easeInOutSine",loop:2,translateX:[{value:n*-1},{value:n},{value:n/-2},{value:n/2},{value:0}]})}function f(e,n){e.isInvalid=n.isInvalid||n.isInvalidByRequired;e.isValid=n.isValid;e.isInfo=n.isInfo;e.isWarning=n.isWarning}function d(e,n){if(e.allowedCharactersPattern){const t=new RegExp(e.allowedCharactersPattern);if(!t.test(n.key)){n.preventDefault();l(e.inputRef.current)}}}async function m(e,n){const a=n.validity;const i=e.validityStateChange.emit(a);if(i.defaultPrevented){return}if(!e.value){return}const r=await t(e);if(r){return}const{valid:s}=a;e.hostElement.classList.toggle("ix-invalid--validity-invalid",!s)}function p(e,n){e.ixBlur.emit();if(!n){throw new Error("Input element is not available")}n.setAttribute("data-ix-touched","true");m(e,n)}function v(e,n,t){var a;if(!e){return}const r=16;const s=i(n+r/2);if(t.slotEnd){e.style.paddingRight=`calc(${s} + ${(a=t.additionalPaddingRight)!==null&&a!==void 0?a:"0rem"})`}else{e.style.paddingLeft=s}}function b(e,n,t){requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(e){const n=e.getBoundingClientRect();if(n){v(t,n.width,{slotEnd:false})}}if(n){const e=n.getBoundingClientRect();if(e){v(t,e.width,{slotEnd:true})}}}))}))}function h(e){const t={"aria-invalid":`${n(e.isInvalid)}`,"aria-required":`${n(e.required)}`};if(e.isInvalid&&e.invalidText){t["aria-errormessage"]=e.invalidText}return t}const g=(e,n)=>{const t=j(e,n);const i=a(n);i.observe(e,{subtree:true,attributes:true});return()=>{t.disconnect();i.disconnect()}};function j(e,n){const t=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){n()}}))}));t.observe(e);return t}export{o as I,u as S,s as T,g as a,b,c,d,m as e,h as g,f as m,p as o};
-//# sourceMappingURL=p-4b4437ec.js.map

package/dist/siemens-ix/p-e5a2d990.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,H as i}from"./p-1fa2fc36.js";import{a as o}from"./p-71206084.js";const r=":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);display:block;position:absolute;justify-content:flex-start;align-items:center;opacity:0;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all var(--theme-medium-time) ease-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .drawer-container{z-index:100}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.display-none){display:none}";const a=r;const h=class{constructor(s){t(this,s);this.open=e(this,"open",7);this.drawerClose=e(this,"drawerClose",7);this.show=false;this.closeOnClickOutside=true;this.fullHeight=false;this.minWidth=16;this.maxWidth=28;this.width=this.minWidth;this.toggle=false;this.callback=this.clickedOutside.bind(this);this.showContent=true}onShowChanged(t,e){if(t===e){return}this.toggleDrawer(t)}async toggleDrawer(t){t=t!==null&&t!==void 0?t:!this.show;if(t){const{defaultPrevented:t}=this.open.emit();if(t){return}this.show=true;if(!this.toggle&&this.divElement){this.slideInRight(this.divElement);setTimeout((()=>{window.addEventListener("mousedown",this.callback)}),h.duration)}}else{const{defaultPrevented:t}=this.drawerClose.emit();if(t){return}this.show=false;if(this.toggle&&this.divElement){this.slideOutRight(this.divElement)}window.removeEventListener("mousedown",this.callback)}this.toggle=this.show;return Promise.resolve()}onCloseClicked(){this.toggleDrawer(false)}clickedOutside(t){if(!this.closeOnClickOutside){return}const e=t.target;const s=e.closest("#div-container");const i=e.closest("#drawer-btn");if(t.target.type!=="button"&&s!==this.divElement&&e!==i){this.show=false}}getConstrainedWidth(t){return Math.min(Math.max(t,this.minWidth),this.maxWidth)}slideOutRight(t){const e=`${this.getConstrainedWidth(this.width==="auto"?this.minWidth:this.width)}rem`;o({targets:t,duration:h.duration,width:[e,0],opacity:[1,0],easing:"easeInSine",complete:()=>{t.classList.add("display-none")}})}slideInRight(t){const e=`${this.getConstrainedWidth(this.width==="auto"?this.minWidth:this.width)}rem`;o({targets:t,duration:h.duration,width:[0,e],opacity:[0,1],easing:"easeOutSine",begin:()=>{t.classList.remove("display-none")},complete:()=>{this.showContent=true}})}componentDidLoad(){this.toggleDrawer(this.show)}render(){return s(i,{key:"0c10ccb28487567aa41631b7be232cb414179543",class:{"drawer-container":true,"display-none":true},style:{width:"0","max-width":`${this.maxWidth}rem`,height:this.fullHeight?"100%":"auto",overflow:"hidden"},ref:t=>this.divElement=t,"data-testid":"container",id:"div-container"},s("div",{key:"eebf338302eb79cf6fc629482c00e0e2b604dd82",style:{width:this.width==="auto"?"auto":`${this.getConstrainedWidth(this.width)}rem`}},s("div",{key:"760aaf500053e7ca2b5f6b7e779c94374aff72d5",class:"header"},s("div",{key:"b80f818741af2ce216755a0d6d7225ca2631f014",class:"header-content"},s("slot",{key:"c857802b22474a49ba69eccad59808abcdeba1ce",name:"header"})),s("ix-icon-button",{key:"1bbb45bdecf08467861b34c9e14e4dd55ecf2a0c",class:"close-button",style:{display:this.showContent?"block":"none"},icon:"close",size:"24",ghost:true,onClick:()=>this.onCloseClicked(),"data-testid":"close-button"})),s("div",{key:"dcd3b762cdf589b69faf2ecab8864f135021c1eb",class:"content",style:{display:this.showContent?"block":"none"}},s("slot",{key:"720230bd94c2d60eeba59aaf8964af407531e130"}))))}static get watchers(){return{show:["onShowChanged"]}}};h.duration=300;h.style=a;export{h as ix_drawer};
-//# sourceMappingURL=p-e5a2d990.entry.js.map

package/dist/siemens-ix/p-e5a2d990.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["drawerCss","IxDrawerStyle0","Drawer","constructor","hostRef","this","show","closeOnClickOutside","fullHeight","minWidth","maxWidth","width","toggle","callback","clickedOutside","bind","showContent","onShowChanged","newValue","oldValue","toggleDrawer","defaultPrevented","open","emit","divElement","slideInRight","setTimeout","window","addEventListener","duration","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","target","closestElement","closest","btn","type","getConstrainedWidth","Math","min","max","el","initialWidth","anime","targets","opacity","easing","complete","classList","add","targetWidth","begin","remove","componentDidLoad","render","h","Host","key","class","style","height","overflow","ref","id","name","display","icon","size","ghost","onClick"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  display: block;\n  position: absolute;\n  justify-content: flex-start;\n  align-items: center;\n  opacity: 0;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all var(--theme-medium-time) ease-out;\n\n  .drawer-container {\n    z-index: 100;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open!: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose!: EventEmitter;\n\n  toggle = false;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @State() showContent = true;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean, oldValue?: boolean) {\n    if (newValue === oldValue) {\n      return;\n    }\n\n    this.toggleDrawer(newValue);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    show = show ?? !this.show;\n\n    if (show) {\n      const { defaultPrevented } = this.open.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = true;\n      if (!this.toggle && this.divElement) {\n        this.slideInRight(this.divElement);\n        setTimeout(() => {\n          window.addEventListener('mousedown', this.callback);\n        }, Drawer.duration);\n      }\n    } else {\n      const { defaultPrevented } = this.drawerClose.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = false;\n\n      if (this.toggle && this.divElement) {\n        this.slideOutRight(this.divElement);\n      }\n\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    this.toggle = this.show;\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.toggleDrawer(false);\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private getConstrainedWidth(width: number) {\n    return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    const initialWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      width: [initialWidth, 0],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('display-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    const targetWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      width: [0, targetWidth],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('display-none');\n      },\n      complete: () => {\n        this.showContent = true;\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.toggleDrawer(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          'display-none': true,\n        }}\n        style={{\n          width: '0',\n          'max-width': `${this.maxWidth}rem`,\n          height: this.fullHeight ? '100%' : 'auto',\n          overflow: 'hidden',\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div\n          style={{\n            width:\n              this.width === 'auto'\n                ? 'auto'\n                : `${this.getConstrainedWidth(this.width)}rem`,\n          }}\n        >\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              class=\"close-button\"\n              style={{\n                display: this.showContent ? 'block' : 'none',\n              }}\n              icon={'close'}\n              size=\"24\"\n              ghost\n              onClick={() => this.onCloseClicked()}\n              data-testid=\"close-button\"\n            ></ix-icon-button>\n          </div>\n          <div\n            class=\"content\"\n            style={{\n              display: this.showContent ? 'block' : 'none',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}