@siemens/ix 1.5.0-beta.1 → 1.5.0-beta.3

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

@@ -1 +0,0 @@
-{"version":3,"names":["groupCss","Group","dropdownItems","Array","from","this","hostElement","querySelectorAll","groupItems","groupContent","querySelector","footer","constructor","hostRef","registerInstance","selectGroup","createEvent","selectItem","collapsedChanged","suppressHeaderSelection","header","undefined","subHeader","collapsed","selected","index","expandOnHeaderClick","dropdownTriggerRef","async","event","targetElement","target","contains","code","classList","matches","groupItem","onExpandClick","wasCollapsed","setGroupSelection","emit","stopPropagation","onHeaderClick","onItemClick","selection","componentWillRender","forEach","item","remove","_a","children","length","add","childElementCount","appendChild","componentDidLoad","addEventListener","evt","detail","render","h","Host","class","expand","tabindex","onClick","e","name","title","suppressSelection","focusable","groupDropdownItemCss","GroupDropdownItem","label","icon","groupItemCss","GroupItem","clickListen","selectedChanged","size","text","secondaryText"],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=scoped","./src/components/group/group.tsx","./src/components/group-dropdown-item/group-dropdown-item.scss?tag=ix-group-dropdown-item&encapsulation=scoped","./src/components/group-dropdown-item/group-dropdown-item.tsx","./src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=scoped","./src/components/group-item/group-item.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\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: 0.25rem;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid var(--theme-group-item--border-color);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n\n    @include focus-visible {\n      border-color: var(--focus--border-color);\n      border-radius: var(--theme-group--border-radius--focus);\n      outline: none;\n    }\n\n    &.selected {\n      border: var(--theme-primary-bdr-2);\n      background-color: var(--theme-group-item--background--selected);\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header.expand {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n    width: 100%;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .footer {\n    height: auto;\n    min-height: 0;\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  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\n  }\n\n  private onExpandClick(event: Event) {\n    const wasCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n\n    if (!wasCollapsed && this.index !== undefined) {\n      this.index = undefined;\n      this.setGroupSelection(true);\n    }\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (\n        !this.footer?.children.length &&\n        index === this.groupItems.length - 1\n      ) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  componentDidLoad() {\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div class=\"group-header-selection-indicator\"></div>\n            <ix-icon\n              class=\"btn-expand-header\"\n              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n              onClick={(e) => this.onExpandClick(e)}\n            ></ix-icon>\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\n        </div>\n      </Host>\n    );\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\n:host {\n  display: contents;\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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-dropdown-item',\n  styleUrl: 'group-dropdown-item.scss',\n  scoped: true,\n})\nexport class GroupDropdownItem {\n  /**\n   * Group dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Group dropdown icon\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item label={this.label} icon={this.icon}>\n          <slot></slot>\n        </ix-dropdown-item>\n      </Host>\n    );\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\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n  align-items: center;\n  justify-content: space-between;\n  padding: $small-space $large-space $small-space 2.5rem;\n  position: relative;\n  margin-top: 0.0625rem;\n  border: 1px solid var(--theme-group-item--border-color);\n  outline: none;\n\n  background-color: var(--theme-group-item--background);\n\n  &.last {\n    border-bottom-left-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: 0;\n    height: 100%;\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include ellipsis();\n    flex-grow: 1;\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n    font-size: 0.875rem;\n  }\n\n  &:not(.suppress-selection) {\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n  }\n\n  &.selected {\n    border-top-width: 0.062rem !important;\n    border-color: var(--theme-group-item--border-color--selected);\n    background-color: var(--theme-group-item--background--selected);\n\n    .group-entry-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  @include focus-visible {\n    border-color: var(--focus--border-color) !important;\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  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  scoped: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n        tabindex={this.focusable ? 0 : -1}\n      >\n        <div class=\"group-entry-selection-indicator\"></div>\n        {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n        {this.text ? (\n          <span class=\"group-entry-text\">\n            <span title={this.text}>{this.text}</span>\n          </span>\n        ) : null}\n        {this.secondaryText ? (\n          <span class=\"group-entry-text-secondary\">\n            <span title={this.secondaryText}>{this.secondaryText}</span>\n          </span>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as o,H as s,g as a}from"./p-8fcd6f85.js";import{a as e}from"./p-810b5232.js";import{A as d}from"./p-3b97bb69.js";import{T as l}from"./p-9ee41861.js";const n=".sc-ix-modal-h{position:relative;width:100vw;height:100vh}.sc-ix-modal-h .modal.sc-ix-modal{display:flex}.sc-ix-modal-h .modal.animation.sc-ix-modal{animation:modal-fade 300ms ease-in-out}.sc-ix-modal-h .modal.backdrop.sc-ix-modal{background-color:var(--theme-color-lightbox);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:none}.sc-ix-modal-h .modal.backdrop.animation.sc-ix-modal{transition:-webkit-backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{flex-grow:1}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal{max-height:100%}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal .modal-body.sc-ix-modal{overflow-y:auto}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal{box-shadow:var(--theme-modal--box-shadow);flex-direction:row;background-color:var(--theme-modal--background);border:var(--modal--border-thickness) solid var(--theme-modal--border-color);padding:1.5rem;max-height:100vh}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .state-icon-container.sc-ix-modal{-webkit-margin-end:1rem;margin-inline-end:1rem}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .slot-container.sc-ix-modal{flex-grow:1}@media (min-width: 576px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal:not(.modal-dialog-centered){margin:2.5rem auto}}@media (max-width: 575.98px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{height:100%;margin:0}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal .modal-content.sc-ix-modal{height:100%;border-radius:0}}@keyframes modal-fade{from{opacity:0%}to{opacity:100%}}@keyframes slide-down{from{top:-100%}to{top:32px}}";const c=class{constructor(o){i(this,o);this.closed=t(this,"closed",7);this.dismissed=t(this,"dismissed",7);this.onKeydown=this.handleKeydown.bind(this);this.animation=true;this.ariaDescribedBy=undefined;this.ariaLabelledBy="modal-title";this.backdrop=true;this.backdropClass=undefined;this.beforeDismiss=undefined;this.centered=false;this.content=undefined;this.keyboard=true;this.icon=undefined;this.iconColor="color-std-text";this.modalDialogClass=undefined;this.scrollable=true;this.size="sm";this.headerTitle=undefined;this.windowClass=undefined}get modal(){return this.hostElement.querySelector(".modal")}get modalDialog(){return this.modal.querySelector(".modal-dialog")}get modalContent(){return this.modalDialog.querySelector(".modal-content")}get modalBackdrop(){return this.hostElement.querySelector(".backdrop")}slideDown(i){const t=this.animation?d.mediumTime:0;e({targets:i,duration:t,opacity:[0,1],translateY:["-100%",0],easing:"easeOutSine"})}slideUp(i,t){const o=this.animation?d.mediumTime:0;e({targets:i,duration:o,opacity:[1,0],translateY:[0,"-100%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onBackdropClick(i){const t=i.target;if(t.classList.contains("backdrop")){this.dismiss(i)}}componentDidLoad(){if(this.backdrop==="static"){this.modalBackdrop.addEventListener("click",(i=>this.onBackdropClick(i)))}if(this.backdropClass){this.modalBackdrop.classList.add(this.backdropClass)}if(this.modalDialogClass){this.modalDialog.classList.add(this.modalDialogClass)}if(this.windowClass){this.modal.classList.add(this.windowClass)}if(this.keyboard){window.addEventListener("keydown",this.onKeydown)}this.slideDown(this.modalContent)}handleKeydown(i){if(i.key==="Escape"){this.dismiss(i.key)}}disconnectedCallback(){window.removeEventListener("keydown",this.onKeydown)}async dismiss(i){if(this.beforeDismiss){const t=await this.beforeDismiss(i);if(t!==false){this.slideUp(this.modalContent,(()=>this.dismissed.emit(i)))}}else{this.slideUp(this.modalContent,(()=>this.dismissed.emit(i)))}}async close(i){this.slideUp(this.modalContent,(()=>this.closed.emit(i)))}render(){return o(s,null,o("div",{class:{animation:this.animation,modal:true,backdrop:this.backdrop==="static"||this.backdrop,"align-items-center":this.centered,scrollable:this.scrollable},"aria-describedby":this.ariaDescribedBy,"aria-labelledby":this.ariaLabelledBy},o("div",{class:{"modal-dialog":true,"modal-sm":this.size==="sm","modal-lg":this.size==="lg","modal-xl":this.size==="xl"}},o("div",{class:"modal-content"},this.icon===undefined||this.icon===""?"":o("div",{class:"state-icon-container"},o("ix-icon",{name:this.icon,size:"32",color:this.iconColor})),o("div",{class:"slot-container"},o("slot",null))))))}get hostElement(){return a(this)}};c.style=n;const m=".sc-ix-modal-container-h{position:absolute;top:0;left:0;z-index:9999}";var r=undefined&&undefined.__rest||function(i,t){var o={};for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&t.indexOf(s)<0)o[s]=i[s];if(i!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,s=Object.getOwnPropertySymbols(i);a<s.length;a++){if(t.indexOf(s[a])<0&&Object.prototype.propertyIsEnumerable.call(i,s[a]))o[s[a]]=i[s[a]]}return o};const h=class{constructor(t){i(this,t)}async showModal(i){const t=new l;const o=new l;const s=document.createElement("ix-modal");let{title:a,content:e}=i,d=r(i,["title","content"]);Object.assign(s,Object.assign({headerTitle:a},d));if(typeof e==="string"){const i=document.createElement("template");e=e.trim();i.innerHTML=e;s.appendChild(i.content.firstChild)}else{s.appendChild(e)}this.hostElement.appendChild(s);s.addEventListener("closed",(i=>{this.hostElement.removeChild(s);t.emit(i.detail)}));s.addEventListener("dismissed",(i=>{this.hostElement.removeChild(s);o.emit(i.detail)}));return{htmlElement:s,onClose:t,onDismiss:o}}render(){return o(s,null)}get hostElement(){return a(this)}};h.style=m;export{c as ix_modal,h as ix_modal_container};
-//# sourceMappingURL=p-b64e82ce.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["modalCss","Modal","this","onKeydown","handleKeydown","bind","modal","hostElement","querySelector","modalDialog","modalContent","modalBackdrop","slideDown","duration","animation","Animation","mediumTime","anime","targets","opacity","translateY","easing","slideUp","completeCallback","complete","onBackdropClick","event","target","classList","contains","dismiss","componentDidLoad","backdrop","addEventListener","backdropClass","add","modalDialogClass","windowClass","keyboard","window","ev","key","disconnectedCallback","removeEventListener","async","reason","beforeDismiss","result","dismissed","emit","closed","render","h","Host","class","centered","scrollable","ariaDescribedBy","ariaLabelledBy","size","icon","undefined","name","color","iconColor","modalContainerCss","ModalContainer","config","onClose","TypedEvent","onDismiss","document","createElement","title","content","modifiedConfig","__rest","Object","assign","headerTitle","template","trim","innerHTML","appendChild","firstChild","removeChild","detail","htmlElement"],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=scoped","./src/components/modal/modal.tsx","./src/components/modal-container/modal-container.scss?tag=ix-modal-container&encapsulation=scoped","./src/components/modal-container/modal-container.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\n@import '~bootstrap/scss/_functions';\n@import '~bootstrap/scss/mixins/_breakpoints.scss';\n@import '~bootstrap/scss/_variables.scss';\n\n@import 'common-variables';\n\n:host {\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n\n  .modal {\n    display: flex;\n\n    &.animation {\n      animation: modal-fade $medium-time ease-in-out;\n    }\n\n    &.backdrop {\n      background-color: var(--theme-color-lightbox);\n      backdrop-filter: blur(4px);\n      transition: none;\n\n      &.animation {\n        transition: backdrop-filter $short-time ease-in-out;\n      }\n    }\n\n    .modal-dialog {\n      flex-grow: 1;\n    }\n\n    &.scrollable {\n      .modal-content {\n        max-height: 100%;\n        .modal-body {\n          overflow-y: auto;\n        }\n      }\n    }\n\n    .modal-content {\n      box-shadow: var(--theme-modal--box-shadow);\n      flex-direction: row;\n      background-color: var(--theme-modal--background);\n      border: var(--modal--border-thickness) solid\n        var(--theme-modal--border-color);\n      padding: $large-space;\n      max-height: 100vh;\n\n      .state-icon-container {\n        margin-inline-end: $default-space;\n      }\n\n      .slot-container {\n        flex-grow: 1;\n      }\n    }\n\n    @include media-breakpoint-up(sm) {\n      .modal-dialog:not(.modal-dialog-centered) {\n        margin: 2.5rem auto;\n      }\n    }\n\n    @include media-breakpoint-down(sm) {\n      .modal-dialog {\n        height: 100%;\n        margin: 0;\n\n        .modal-content {\n          height: 100%;\n          border-radius: 0;\n        }\n      }\n    }\n\n    @keyframes modal-fade {\n      from {\n        opacity: 0%;\n      }\n      to {\n        opacity: 100%;\n      }\n    }\n\n    @keyframes slide-down {\n      from {\n        top: -100%;\n      }\n      to {\n        top: 32px;\n      }\n    }\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  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  scoped: true,\n})\nexport class Modal {\n  @Element() hostElement: HTMLIxModalElement;\n\n  /**\n   * Should the modal be animtated\n   */\n  @Prop() animation = true;\n\n  /**\n   *\n   */\n  @Prop() ariaDescribedBy: string;\n\n  /**\n   *\n   */\n  @Prop() ariaLabelledBy = 'modal-title';\n\n  /**\n   * Adds a dimming layer to the modal.\n   * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Backdrop class\n   */\n  @Prop() backdropClass: string;\n\n  /**\n   * BeforeDismiss callback\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Content of modal\n   */\n  @Prop() content: HTMLElement | string;\n\n  /**\n   * ESC close modal dialog\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Optional icon displayed next to the title\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of the header {@see ix-icon}\n   */\n  @Prop() iconColor: NotificationColor = 'color-std-text';\n\n  /**\n   * Modal dialog class\n   */\n  @Prop() modalDialogClass: string;\n\n  /**\n   * Modal scollable\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: 'sm' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Header title\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Window class\n   */\n  @Prop() windowClass: string;\n\n  /**\n   * Modal closed\n   */\n  @Event() closed: EventEmitter;\n\n  /**\n   * Modal dismissed\n   */\n  @Event() dismissed: EventEmitter;\n\n  private readonly onKeydown = this.handleKeydown.bind(this);\n\n  get modal() {\n    return this.hostElement.querySelector('.modal');\n  }\n\n  get modalDialog() {\n    return this.modal.querySelector('.modal-dialog');\n  }\n\n  get modalContent() {\n    return this.modalDialog.querySelector('.modal-content');\n  }\n\n  get modalBackdrop() {\n    return this.hostElement.querySelector('.backdrop');\n  }\n\n  private slideDown(modal: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [0, 1],\n      translateY: ['-100%', 0],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideUp(modal: any, completeCallback?: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [1, 0],\n      translateY: [0, '-100%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onBackdropClick(event: Event) {\n    const target = event.target as Element;\n    if (target.classList.contains('backdrop')) {\n      this.dismiss(event);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.backdrop === 'static') {\n      this.modalBackdrop.addEventListener('click', (event) =>\n        this.onBackdropClick(event)\n      );\n    }\n\n    if (this.backdropClass) {\n      this.modalBackdrop.classList.add(this.backdropClass);\n    }\n\n    if (this.modalDialogClass) {\n      this.modalDialog.classList.add(this.modalDialogClass);\n    }\n\n    if (this.windowClass) {\n      this.modal.classList.add(this.windowClass);\n    }\n\n    if (this.keyboard) {\n      window.addEventListener('keydown', this.onKeydown);\n    }\n\n    this.slideDown(this.modalContent);\n  }\n\n  private handleKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.dismiss(ev.key);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.onKeydown);\n  }\n\n  /**\n   * Dismiss modal instance\n   * @param reason\n   */\n  @Method()\n  async dismiss<T = any>(reason?: T) {\n    if (this.beforeDismiss) {\n      const result = await this.beforeDismiss(reason);\n      if (result !== false) {\n        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n      }\n    } else {\n      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n    }\n  }\n\n  /**\n   * Close modal\n   * @param result\n   */\n  @Method()\n  async close<T = any>(result: T) {\n    this.slideUp(this.modalContent, () => this.closed.emit(result));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            animation: this.animation,\n            modal: true,\n            backdrop: this.backdrop === 'static' || this.backdrop,\n            'align-items-center': this.centered,\n            scrollable: this.scrollable,\n          }}\n          aria-describedby={this.ariaDescribedBy}\n          aria-labelledby={this.ariaLabelledBy}\n        >\n          <div\n            class={{\n              'modal-dialog': true,\n              'modal-sm': this.size === 'sm',\n              'modal-lg': this.size === 'lg',\n              'modal-xl': this.size === 'xl',\n            }}\n          >\n            <div class=\"modal-content\">\n              {this.icon === undefined || this.icon === '' ? (\n                ''\n              ) : (\n                <div class=\"state-icon-container\">\n                  <ix-icon\n                    name={this.icon}\n                    size=\"32\"\n                    color={this.iconColor}\n                  ></ix-icon>\n                </div>\n              )}\n              <div class=\"slot-container\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\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\n:host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9999;\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 { Component, Element, h, Host, Method } from '@stencil/core';\nimport { ModalConfig, ModalInstance } from '../modal/modal-utils';\nimport { TypedEvent } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-modal-container',\n  styleUrl: 'modal-container.scss',\n  scoped: true,\n})\nexport class ModalContainer {\n  @Element() hostElement: HTMLIxModalContainerElement;\n\n  /**\n   * Display modal dialog\n   *\n   * @param config\n   */\n  @Method()\n  async showModal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>> {\n    const onClose = new TypedEvent<T>();\n    const onDismiss = new TypedEvent<T>();\n\n    const modal = document.createElement('ix-modal');\n    let { title, content, ...modifiedConfig } = config;\n    Object.assign(modal, { headerTitle: title, ...modifiedConfig });\n\n    if (typeof content === 'string') {\n      const template = document.createElement('template');\n      content = content.trim();\n      template.innerHTML = content;\n      modal.appendChild(template.content.firstChild);\n    } else {\n      modal.appendChild(content);\n    }\n\n    this.hostElement.appendChild(modal);\n\n    modal.addEventListener('closed', (event: CustomEvent<T>) => {\n      this.hostElement.removeChild(modal);\n      onClose.emit(event.detail);\n    });\n    modal.addEventListener('dismissed', (event: CustomEvent<T>) => {\n      this.hostElement.removeChild(modal);\n      onDismiss.emit(event.detail);\n    });\n\n    return {\n      htmlElement: modal,\n      onClose,\n      onDismiss,\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"mappings":"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"}