@siemens/ix 2.0.0 → 2.0.1

package/components/ix-message-bar.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const messageBarCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}:host ix-icon{margin-top:0.25rem}";
+
+const MessageBar = /*@__PURE__*/ proxyCustomElement(class MessageBar extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closedChange = createEvent(this, "closedChange", 7);
+    this.type = 'info';
+    this.dismissible = true;
+    this.icon = undefined;
+    this.color = undefined;
+  }
+  componentWillRender() {
+    if (this.type === 'danger') {
+      this.icon = 'error';
+      this.color = 'color-alarm';
+    }
+    if (this.type === 'info') {
+      this.icon = 'info';
+      this.color = 'color-info';
+    }
+    if (this.type === 'warning') {
+      this.icon = 'warning';
+      this.color = 'color-warning';
+    }
+  }
+  closeAlert(el) {
+    anime({
+      targets: el,
+      duration: MessageBar.duration,
+      opacity: [1, 0],
+      easing: 'easeOutSine',
+      complete: () => {
+        el.classList.add('d-none');
+      },
+    });
+    this.closedChange.emit();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { color: this.color, name: this.icon }), h("div", { class: "message-content" }, h("slot", null)), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        this.closeAlert(this.divElement);
+      }, "data-testid": "close-btn" })) : (''))));
+  }
+  static get style() { return messageBarCss; }
+}, [1, "ix-message-bar", {
+    "type": [1],
+    "dismissible": [4],
+    "icon": [32],
+    "color": [32]
+  }]);
+MessageBar.duration = 300;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-message-bar", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-message-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MessageBar);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMessageBar = MessageBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMessageBar, defineCustomElement };
+
+//# sourceMappingURL=ix-message-bar.js.map

package/components/ix-message-bar.js.map

@@ -0,0 +1 @@
+{"file":"ix-message-bar.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,kgDAAkgD;;MC0B3gD,UAAU;;;;;;gBAIyB,MAAM;uBAK9B,IAAI;;;;EAe1B,mBAAmB;IACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;MACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;MACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;MACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;KAC9B;GACF;EAEO,UAAU,CAAC,EAAe;IAChC,KAAK,CAAC;MACJ,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;MAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,QAAQ,EAAE;QACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC5B;KACF,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAElD,eAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACvD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,EACL,IAAI,CAAC,WAAW,IACf,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;OAClC,iBACW,WAAW,GACP,KAElB,EAAE,CACH,CACG,CACD,EACP;GACH;;;;;;;;AA9DuB,mBAAQ,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","./src/components/message-bar/message-bar.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .message-container {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    min-height: 3.375rem;\n    margin: $small-space $small-space 0rem $small-space;\n    padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $medium-space\n      calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $default-space;\n    border-radius: var(--theme-message-bar--border-radius);\n    background-color: var(--theme-messagebar--background);\n  }\n\n  .danger {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-alarm);\n  }\n\n  .warning {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-warning);\n  }\n\n  .info {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-info);\n  }\n\n  .message-content {\n    @include ellipsis;\n    flex-grow: 1;\n    align-self: center;\n    min-height: 1.25rem;\n    padding: 0 $default-space;\n    font-weight: bold;\n    white-space: normal;\n  }\n\n  ix-icon {\n    margin-top: $tiny-space;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxModalContent extends Components.IxModalContent, HTMLElement {}
+export const IxModalContent: {
+  prototype: IxModalContent;
+  new (): IxModalContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-modal-content.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const modalContentCss = ":host{display:block;position:relative;overflow:auto;padding:0.125rem 0.625rem 0.125rem 0.625rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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}";
+
+const ModalContent = /*@__PURE__*/ proxyCustomElement(class ModalContent extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return modalContentCss; }
+}, [1, "ix-modal-content"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalContent);
+      }
+      break;
+  } });
+}
+
+const IxModalContent = ModalContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalContent, defineCustomElement };
+
+//# sourceMappingURL=ix-modal-content.js.map

package/components/ix-modal-content.js.map

@@ -0,0 +1 @@
+{"file":"ix-modal-content.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8rBAA8rB;;MCmBzsB,YAAY;;;;;;EACvB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","./src/components/modal-content/modal-content.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\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0.125rem 0.625rem 0.125rem 0.625rem;\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 } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal-example.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxModalExample extends Components.IxModalExample, HTMLElement {}
+export const IxModalExample: {
+  prototype: IxModalExample;
+  new (): IxModalExample;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-modal-example.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './animation.js';
+import { d as dismissModal, c as closeModal } from './modal.js';
+import { d as defineCustomElement$4 } from './button.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const ModalExample = /*@__PURE__*/ proxyCustomElement(class ModalExample extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  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")))));
+  }
+  get host() { return this; }
+}, [0, "ix-modal-example"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-example", "ix-button", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-example":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalExample);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxModalExample = ModalExample;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalExample, defineCustomElement };
+
+//# sourceMappingURL=ix-modal-example.js.map

package/components/ix-modal-example.js.map

@@ -0,0 +1 @@
+{"file":"ix-modal-example.js","mappings":";;;;;;;MAea,YAAY;;;;;EAGf,OAAO;IACb,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACzB;EAEO,KAAK;IACX,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,WAAK,KAAK,EAAC,cAAc,wBAEvB,iDAEE,KAAK,QACL,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,GACb,CACd,EACN,WAAK,KAAK,EAAC,YAAY,+BAA+B,EACtD,WAAK,KAAK,EAAC,cAAc,IACvB,iBAAW,OAAO,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,aAEpC,EACZ,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,SAAgB,CAClD,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/my-component/example-modal.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\nimport { Component, Element, h, Host } from '@stencil/core';\nimport { closeModal, dismissModal } from '../utils/modal';\n\n@Component({\n  tag: 'ix-modal-example',\n})\nexport class ModalExample {\n  @Element() host!: HTMLIxModalExampleElement;\n\n  private dismiss() {\n    dismissModal(this.host);\n  }\n\n  private close() {\n    closeModal(this.host, 'Done!');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div class=\"modal-header\">\n            Message headline\n            <ix-icon-button\n              data-close-button\n              ghost\n              icon={'close'}\n              onClick={() => this.dismiss()}\n            ></ix-icon-button>\n          </div>\n          <div class=\"modal-body\">Message text lorem ipsum</div>\n          <div class=\"modal-footer\">\n            <ix-button outline onClick={() => this.dismiss()}>\n              Cancel\n            </ix-button>\n            <ix-button onClick={() => this.close()}>OK</ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal-footer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxModalFooter extends Components.IxModalFooter, HTMLElement {}
+export const IxModalFooter: {
+  prototype: IxModalFooter;
+  new (): IxModalFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-modal-footer.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const modalFooterCss = ":host{display:flex;padding:0.625rem;padding-top:1.5rem;justify-content:flex-end;align-items:center;gap:0.5rem;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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}";
+
+const ModalFooter = /*@__PURE__*/ proxyCustomElement(class ModalFooter extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return modalFooterCss; }
+}, [1, "ix-modal-footer"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalFooter);
+      }
+      break;
+  } });
+}
+
+const IxModalFooter = ModalFooter;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalFooter, defineCustomElement };
+
+//# sourceMappingURL=ix-modal-footer.js.map

package/components/ix-modal-footer.js.map

@@ -0,0 +1 @@
+{"file":"ix-modal-footer.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+tBAA+tB;;MCmBzuB,WAAW;;;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/modal-footer/modal-footer.scss?tag=ix-modal-footer&encapsulation=shadow","./src/components/modal-footer/modal-footer.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\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.625rem;\n  padding-top: 1.5rem;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\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 } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-footer',\n  styleUrl: 'modal-footer.scss',\n  shadow: true,\n})\nexport class ModalFooter {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxModalHeader extends Components.IxModalHeader, HTMLElement {}
+export const IxModalHeader: {
+  prototype: IxModalHeader;
+  new (): IxModalHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-modal-header.js

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './spinner.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const modalHeaderCss = ":host{display:flex;padding:2px 16px 16px 10px;align-items:center;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .modal-close{margin-left:auto;margin-right:-20px}:host .modal-icon{margin-right:1rem}";
+
+const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closeClick = createEvent(this, "closeClick", 7);
+    this.hideClose = false;
+    this.icon = undefined;
+    this.iconColor = undefined;
+  }
+  onIconChange(icon) {
+    if (icon) {
+      this.parentDialog.classList.add('with-icon');
+    }
+    else {
+      this.parentDialog.classList.remove('with-icon');
+    }
+  }
+  componentDidLoad() {
+    this.parentDialog = this.hostElement.closest('ix-modal');
+    this.onIconChange(this.icon);
+  }
+  onCloseClick(event) {
+    const ce = this.closeClick.emit(event);
+    if (ce.defaultPrevented || event.defaultPrevented) {
+      return;
+    }
+    this.parentDialog.dismissModal();
+  }
+  render() {
+    return (h(Host, null, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { variant: 'default-title' }, h("slot", null)), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "icon": ["onIconChange"]
+  }; }
+  static get style() { return modalHeaderCss; }
+}, [1, "ix-modal-header", {
+    "hideClose": [4, "hide-close"],
+    "icon": [1],
+    "iconColor": [1, "icon-color"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-header", "ix-icon-button", "ix-spinner", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalHeader);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxModalHeader = ModalHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalHeader, defineCustomElement };
+
+//# sourceMappingURL=ix-modal-header.js.map

package/components/ix-modal-header.js.map

@@ -0,0 +1 @@
+{"file":"ix-modal-header.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,6wBAA6wB;;MC4BvxB,WAAW;;;;;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACjD;GACF;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,IAAI,IACR,eACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,IACT,IAAI,EACR,qBAAe,OAAO,EAAE,eAAe,IACrC,eAAa,CACC,EACf,CAAC,IAAI,CAAC,SAAS,IACd,sBACE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,IAChB,IAAI,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","./src/components/modal-header/modal-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\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 2px 16px 16px 10px;\n  align-items: center;\n  align-self: stretch;\n\n  .modal-close {\n    margin-left: auto;\n    margin-right: -20px;\n  }\n\n  .modal-icon {\n    margin-right: 1rem;\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  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (icon) {\n      this.parentDialog.classList.add('with-icon');\n    } else {\n      this.parentDialog.classList.remove('with-icon');\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Close icon is clicked\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = this.hostElement.closest('ix-modal');\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal-loading.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxModalLoading extends Components.IxModalLoading, HTMLElement {}
+export const IxModalLoading: {
+  prototype: IxModalLoading;
+  new (): IxModalLoading;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-modal-loading.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const modalLoadingCss = ":host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
+
+const ModalLoading = /*@__PURE__*/ proxyCustomElement(class ModalLoading extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("ix-spinner", { variant: "primary" }), h("span", { class: 'loading-text' }, h("slot", null))));
+  }
+  static get style() { return modalLoadingCss; }
+}, [1, "ix-modal-loading"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal-loading", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal-loading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalLoading);
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxModalLoading = ModalLoading;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModalLoading, defineCustomElement };
+
+//# sourceMappingURL=ix-modal-loading.js.map

package/components/ix-modal-loading.js.map

@@ -0,0 +1 @@
+{"file":"ix-modal-loading.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,4MAA4M;;MCmBvN,YAAY;;;;;;EACvB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,kBAAY,OAAO,EAAC,SAAS,GAAc,EAC3C,YAAM,KAAK,EAAE,cAAc,IACzB,eAAa,CACR,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/modal-loading/modal-loading.scss?tag=ix-modal-loading&encapsulation=shadow","./src/components/modal-loading/modal-loading.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:host {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  overflow: hidden;\n\n  .loading-text {\n    display: block;\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\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 { Component, h, Host } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-modal-loading',\n  styleUrl: 'modal-loading.scss',\n  shadow: true,\n})\nexport class ModalLoading {\n  render() {\n    return (\n      <Host>\n        <ix-spinner variant=\"primary\"></ix-spinner>\n        <span class={'loading-text'}>\n          <slot></slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxModal extends Components.IxModal, HTMLElement {}
+export const IxModal: {
+  prototype: IxModal;
+  new (): IxModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-modal.js

@@ -0,0 +1,156 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y.js';
+import { A as Animation } from './animation.js';
+
+const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host dialog{margin:0;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0px !important;top:0px !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0px;left:0px;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";
+
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dialogClose = createEvent(this, "dialogClose", 7);
+    this.dialogDismiss = createEvent(this, "dialogDismiss", 7);
+    this.ariaAttributes = {};
+    this.size = '360';
+    this.animation = true;
+    this.backdrop = true;
+    this.closeOnBackdropClick = false;
+    this.beforeDismiss = undefined;
+    this.centered = false;
+    this.keyboard = true;
+  }
+  get dialog() {
+    return this.hostElement.shadowRoot.querySelector('dialog');
+  }
+  slideInModal() {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    let transformY = this.centered ? '-50' : 40;
+    anime({
+      targets: this.dialog,
+      duration,
+      opacity: [0, 1],
+      translateY: [0, transformY],
+      translateX: ['-50%', '-50%'],
+      easing: 'easeOutSine',
+    });
+  }
+  slideOutModal(completeCallback) {
+    const duration = this.animation ? Animation.mediumTime : 0;
+    let transformY = this.centered ? '-50' : 40;
+    anime({
+      targets: this.dialog,
+      duration,
+      opacity: [1, 0],
+      translateY: [transformY, 0],
+      translateX: ['-50%', '-50%'],
+      easing: 'easeInSine',
+      complete: () => {
+        if (completeCallback) {
+          completeCallback();
+        }
+      },
+    });
+  }
+  onModalClick(event) {
+    const rect = this.dialog.getBoundingClientRect();
+    const isClickOutside = rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width;
+    if (!isClickOutside && this.closeOnBackdropClick) {
+      this.dismissModal();
+    }
+  }
+  /**
+   * Show the dialog
+   */
+  async showModal() {
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
+  }
+  /**
+   * Dismiss the dialog
+   */
+  async dismissModal(reason) {
+    let allowDismiss = true;
+    if (this.beforeDismiss !== undefined) {
+      allowDismiss = await this.beforeDismiss(reason);
+    }
+    if (!allowDismiss) {
+      return;
+    }
+    this.slideOutModal(() => {
+      this.dialog.close(JSON.stringify({
+        type: 'dismiss',
+        reason,
+      }, null, 2));
+      this.dialogDismiss.emit(reason);
+    });
+  }
+  /**
+   * Close the dialog
+   */
+  async closeModal(reason) {
+    this.slideOutModal(() => {
+      this.dialog.close(JSON.stringify({
+        type: 'close',
+        reason,
+      }, null, 2));
+      this.dialogClose.emit(reason);
+    });
+  }
+  componentDidLoad() {
+    this.slideInModal();
+  }
+  componentWillLoad() {
+    this.ariaAttributes = a11yHostAttributes(this.hostElement);
+  }
+  render() {
+    return (h(Host, { class: {
+        'no-backdrop': this.backdrop === false,
+        'align-center': this.centered,
+      } }, h("div", { class: "dialog-backdrop" }, h("dialog", { "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: `modal modal-size-${this.size}`, onKeyDown: (e) => {
+        if (e.key === 'Escape' && this.keyboard === false) {
+          e.preventDefault();
+        }
+      }, onClick: (event) => this.onModalClick(event), onCancel: (e) => {
+        e.preventDefault();
+        this.dismissModal();
+      } }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return modalCss; }
+}, [1, "ix-modal", {
+    "size": [1],
+    "animation": [4],
+    "backdrop": [4],
+    "closeOnBackdropClick": [4, "close-on-backdrop-click"],
+    "beforeDismiss": [16],
+    "centered": [4],
+    "keyboard": [4],
+    "showModal": [64],
+    "dismissModal": [64],
+    "closeModal": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Modal);
+      }
+      break;
+  } });
+}
+
+const IxModal = Modal;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxModal, defineCustomElement };
+
+//# sourceMappingURL=ix-modal.js.map