@siemens/ix 1.0.0-beta.2

package/dist/collection/components/modal/modal.js

@@ -0,0 +1,540 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component, Element, Event, h, Host, Method, Prop, } from '@stencil/core';
+import anime from 'animejs';
+import Animation from '../utils/animation';
+export class Modal {
+  constructor() {
+    /**
+     * Should the modal be animtated
+     */
+    this.animation = true;
+    /**
+     *
+     */
+    this.ariaLabelledBy = 'modal-title';
+    /**
+     * Adds a dimming layer to the modal.
+     * 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).
+     */
+    this.backdrop = true;
+    /**
+     * Centered modal
+     */
+    this.centered = false;
+    /**
+     * ESC close modal dialog
+     */
+    this.keyboard = true;
+    /**
+     * Color of the header {@link icon}
+     */
+    this.iconColor = 'color-std-text';
+    /**
+     * Modal scollable
+     */
+    this.scrollable = true;
+    /**
+     * Modal size
+     */
+    this.size = 'sm';
+    this.onKeydown = this.handleKeydown.bind(this);
+  }
+  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(modal) {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    anime({
+      targets: modal,
+      duration,
+      opacity: [0, 1],
+      translateY: ['-100%', 0],
+      easing: 'easeOutSine',
+    });
+  }
+  slideUp(modal, completeCallback) {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    anime({
+      targets: modal,
+      duration,
+      opacity: [1, 0],
+      translateY: [0, '-100%'],
+      easing: 'easeInSine',
+      complete: () => {
+        if (completeCallback) {
+          completeCallback();
+        }
+      },
+    });
+  }
+  componentDidLoad() {
+    if (this.backdrop === 'static') {
+      this.modalBackdrop.addEventListener('click', this.dismiss.bind(this));
+    }
+    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(ev) {
+    if (ev.key === 'Escape') {
+      this.dismiss(ev.key);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
+  /**
+   * Dismiss modal instance
+   * @param reason
+   */
+  async dismiss(reason) {
+    if (this.beforeDismiss) {
+      const result = await this.beforeDismiss(reason);
+      if (result !== false) {
+        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
+      }
+    }
+    else {
+      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
+    }
+  }
+  /**
+   * Close modal
+   * @param result
+   */
+  async close(result) {
+    this.slideUp(this.modalContent, () => this.closed.emit(result));
+  }
+  render() {
+    return (h(Host, null,
+      h("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 },
+        h("div", { class: {
+            'modal-dialog': true,
+            'modal-sm': this.size === 'sm',
+            'modal-lg': this.size === 'lg',
+            'modal-xl': this.size === 'xl',
+          } },
+          h("div", { class: "modal-content" },
+            this.icon === undefined || this.icon === '' ? ('') : (h("div", { class: "state-icon-container" },
+              h("ix-icon", { name: this.icon, size: "32", color: this.iconColor }))),
+            h("div", { class: "slot-container" },
+              h("slot", null)))))));
+  }
+  static get is() { return "ix-modal"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal.css"]
+  }; }
+  static get properties() { return {
+    "animation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Should the modal be animtated"
+      },
+      "attribute": "animation",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "ariaDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-described-by",
+      "reflect": false
+    },
+    "ariaLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-labelled-by",
+      "reflect": false,
+      "defaultValue": "'modal-title'"
+    },
+    "backdrop": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | 'static'",
+        "resolved": "\"static\" | boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Adds a dimming layer to the modal.\nThis should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks)."
+      },
+      "attribute": "backdrop",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "backdropClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Backdrop class"
+      },
+      "attribute": "backdrop-class",
+      "reflect": false
+    },
+    "beforeDismiss": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(reason?: any) => boolean | Promise<boolean>",
+        "resolved": "(reason?: any) => boolean | Promise<boolean>",
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "BeforeDismiss callback"
+      }
+    },
+    "centered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Centered modal"
+      },
+      "attribute": "centered",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement | string",
+        "resolved": "HTMLElement | string",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Content of modal"
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "keyboard": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "ESC close modal dialog"
+      },
+      "attribute": "keyboard",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optional icon displayed next to the title"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "NotificationColor",
+        "resolved": "\"color-alarm\" | \"color-info\" | \"color-std-text\" | \"color-success\" | \"color-warning\"",
+        "references": {
+          "NotificationColor": {
+            "location": "import",
+            "path": "../utils/notification-color"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of the header {@link icon}"
+      },
+      "attribute": "icon-color",
+      "reflect": false,
+      "defaultValue": "'color-std-text'"
+    },
+    "modalDialogClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Modal dialog class"
+      },
+      "attribute": "modal-dialog-class",
+      "reflect": false
+    },
+    "scrollable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Modal scollable"
+      },
+      "attribute": "scrollable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sm' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"sm\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Modal size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'sm'"
+    },
+    "headerTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Header title"
+      },
+      "attribute": "header-title",
+      "reflect": false
+    },
+    "windowClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Window class"
+      },
+      "attribute": "window-class",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Modal closed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "dismissed",
+      "name": "dismissed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Modal dismissed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "dismiss": {
+      "complexType": {
+        "signature": "(reason?: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "reason"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Dismiss modal instance",
+        "tags": [{
+            "name": "param",
+            "text": "reason"
+          }]
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "(result: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "result"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close modal",
+        "tags": [{
+            "name": "param",
+            "text": "result"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/modal-container/modal-container.css

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}

package/dist/collection/components/modal-container/modal-container.js

@@ -0,0 +1,107 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { Component, Element, h, Host, Method } from '@stencil/core';
+import { TypedEvent } from '../utils/typed-event';
+export class ModalContainer {
+  /**
+   * Display modal dialog
+   *
+   * @param config
+   */
+  async showModal(config) {
+    const onClose = new TypedEvent();
+    const onDismiss = new TypedEvent();
+    const modal = document.createElement('ix-modal');
+    let { title, content } = config, modifiedConfig = __rest(config, ["title", "content"]);
+    Object.assign(modal, Object.assign({ headerTitle: title }, modifiedConfig));
+    if (typeof content === 'string') {
+      const template = document.createElement('template');
+      content = content.trim();
+      template.innerHTML = content;
+      modal.appendChild(template.content.firstChild);
+    }
+    else {
+      modal.appendChild(content);
+    }
+    this.hostElement.appendChild(modal);
+    modal.addEventListener('closed', (event) => {
+      this.hostElement.removeChild(modal);
+      onClose.emit(event.detail);
+    });
+    modal.addEventListener('dismissed', (event) => {
+      this.hostElement.removeChild(modal);
+      onDismiss.emit(event.detail);
+    });
+    return {
+      onClose,
+      onDismiss,
+    };
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "ix-modal-container"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-container.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-container.css"]
+  }; }
+  static get methods() { return {
+    "showModal": {
+      "complexType": {
+        "signature": "(config: ModalConfig) => Promise<{ onClose: TypedEvent<any>; onDismiss: TypedEvent<any>; }>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "config"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "TypedEvent": {
+            "location": "import",
+            "path": "../utils/typed-event"
+          },
+          "ModalConfig": {
+            "location": "import",
+            "path": "../modal/modal-utils"
+          },
+          "CustomEvent": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{ onClose: TypedEvent<any>; onDismiss: TypedEvent<any>; }>"
+      },
+      "docs": {
+        "text": "Display modal dialog",
+        "tags": [{
+            "name": "param",
+            "text": "config"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/my-component/example-modal.js

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component, Element, h, Host } from '@stencil/core';
+import { closeModal, dismissModal } from '../modal/modal-utils';
+export class ModalExample {
+  dismiss() {
+    dismissModal(this.host);
+  }
+  close() {
+    closeModal(this.host, 'Done!');
+  }
+  render() {
+    return (h(Host, null,
+      h("div", null,
+        h("div", { class: "modal-header" },
+          "Message headline",
+          h("ix-icon-button", { "data-close-button": true, ghost: true, icon: "close", onClick: () => this.dismiss() })),
+        h("div", { class: "modal-body" }, "Message text lorem ipsum"),
+        h("div", { class: "modal-footer" },
+          h("ix-button", { outline: true, onClick: () => this.dismiss() }, "Cancel"),
+          h("ix-button", { onClick: () => this.close() }, "OK")))));
+  }
+  static get is() { return "ix-modal-example"; }
+  static get elementRef() { return "host"; }
+}