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

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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"}