@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/collection/components/typography/typography.css

@@ -1,3 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -18,7 +26,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host .text-xs {
+/*
+ * SPDX-FileCopyrightText: 2023 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 {
+  display: block;
+  position: relative;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+
+:host(.text-xs) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -27,7 +53,8 @@
   line-height: 1.4em;
   color: var(--theme-color-std-text);
 }
-:host .text-s {
+
+:host(.text-s) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -36,7 +63,8 @@
   line-height: 1.5em;
   color: var(--theme-color-std-text);
 }
-:host .text-caption {
+
+:host(.text-caption) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -45,7 +73,8 @@
   line-height: 1.5em;
   color: var(--theme-color-std-text);
 }
-:host .text-caption-single {
+
+:host(.text-caption-single) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -54,7 +83,8 @@
   line-height: 1em;
   color: var(--theme-color-std-text);
 }
-:host .text-default {
+
+:host(.text-default) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -63,7 +93,8 @@
   line-height: 1.429em;
   color: var(--theme-color-std-text);
 }
-:host .text-default-single {
+
+:host(.text-default-single) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -72,7 +103,8 @@
   line-height: 1.143em;
   color: var(--theme-color-std-text);
 }
-:host .text-default-title {
+
+:host(.text-default-title) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -81,7 +113,8 @@
   line-height: 1.429em;
   color: var(--theme-color-std-text);
 }
-:host .text-default-title-single {
+
+:host(.text-default-title-single) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -90,7 +123,8 @@
   line-height: 1.143em;
   color: var(--theme-color-std-text);
 }
-:host .text-l {
+
+:host(.text-l) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -99,7 +133,8 @@
   line-height: 1.5em;
   color: var(--theme-color-std-text);
 }
-:host .text-l-single {
+
+:host(.text-l-single) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -108,7 +143,8 @@
   line-height: 1.25em;
   color: var(--theme-color-std-text);
 }
-:host .text-l-title {
+
+:host(.text-l-title) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -117,7 +153,8 @@
   line-height: 1.5em;
   color: var(--theme-color-std-text);
 }
-:host .text-l-title-single {
+
+:host(.text-l-title-single) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -126,7 +163,8 @@
   line-height: 1.25em;
   color: var(--theme-color-std-text);
 }
-:host .text-h2 {
+
+:host(.text-h2) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -135,7 +173,8 @@
   line-height: 1.455em;
   color: var(--theme-color-std-text);
 }
-:host .text-xl {
+
+:host(.text-xl) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;

package/dist/collection/components/typography/typography.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { VariantsMapping } from './type-mapping';
 /**
  * @internal
@@ -23,7 +23,7 @@ export class IxTypography {
     const fontColor = this.color !== undefined
       ? `var(--theme-color-${this.color}-text)`
       : 'inherit';
-    return (h("div", { class: typographyClass, style: {
+    return (h(Host, { class: typographyClass, style: {
         color: fontColor,
       } }, h("slot", null)));
   }

package/dist/collection/components/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA6BjD;;GAEG;AAMH,MAAM,OAAO,YAAY;;mBAIe,SAAS;;;EAO/C,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI;KACtC,CAAC;IAEF,MAAM,SAAS,GACb,IAAI,CAAC,KAAK,KAAK,SAAS;MACtB,CAAC,CAAC,qBAAqB,IAAI,CAAC,KAAK,QAAQ;MACzC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,WACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;OACjB;MAED,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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, h, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';\n\nexport type TypographyColors =\n  | 'contrast'\n  | 'std'\n  | 'soft'\n  | 'weak'\n  | 'inv-contrast'\n  | 'inv-std'\n  | 'inv-soft'\n  | 'inv-weak'\n  | 'alarm';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-typography',\n  styleUrl: 'typography.scss',\n  shadow: true,\n})\nexport class IxTypography {\n  /**\n   * Font variant based on theme variables\n   */\n  @Prop() variant: TypographyVariants = 'default';\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() color: TypographyColors;\n\n  render() {\n    const typographyClass = {\n      [VariantsMapping[this.variant]]: true,\n    };\n\n    const fontColor =\n      this.color !== undefined\n        ? `var(--theme-color-${this.color}-text)`\n        : 'inherit';\n\n    return (\n      <div\n        class={typographyClass}\n        style={{\n          color: fontColor,\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA6BjD;;GAEG;AAMH,MAAM,OAAO,YAAY;;mBAIe,SAAS;;;EAO/C,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI;KACtC,CAAC;IAEF,MAAM,SAAS,GACb,IAAI,CAAC,KAAK,KAAK,SAAS;MACtB,CAAC,CAAC,qBAAqB,IAAI,CAAC,KAAK,QAAQ;MACzC,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;OACjB;MAED,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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, h, Host, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';\n\nexport type TypographyColors =\n  | 'contrast'\n  | 'std'\n  | 'soft'\n  | 'weak'\n  | 'inv-contrast'\n  | 'inv-std'\n  | 'inv-soft'\n  | 'inv-weak'\n  | 'alarm';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-typography',\n  styleUrl: 'typography.scss',\n  shadow: true,\n})\nexport class IxTypography {\n  /**\n   * Font variant based on theme variables\n   */\n  @Prop() variant: TypographyVariants = 'default';\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() color: TypographyColors;\n\n  render() {\n    const typographyClass = {\n      [VariantsMapping[this.variant]]: true,\n    };\n\n    const fontColor =\n      this.color !== undefined\n        ? `var(--theme-color-${this.color}-text)`\n        : 'inherit';\n\n    return (\n      <Host\n        class={typographyClass}\n        style={{\n          color: fontColor,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/upload/upload.css

@@ -18,6 +18,14 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -31,6 +39,11 @@
   min-height: 4rem;
   height: 4rem;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
 :host .file-upload-area {
   display: flex;
   flex-direction: row;
@@ -62,7 +75,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:host .file-upload-area.file-over {
+:host .file-upload-area:not(.disabled).file-over {
   border-color: var(--theme-upload--border-color--dragover);
   border-style: solid;
 }
@@ -79,10 +92,14 @@
           margin-inline-start: 1rem;
 }
 :host .file-upload-area .upload-browser {
-  opacity: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
   overflow: hidden;
+  padding: 0;
   position: absolute;
-  z-index: -1;
+  width: 1px;
 }
 :host .file-upload-area .loader {
   margin: 2.187rem auto;
@@ -117,4 +134,8 @@
 }
 :host .file-upload-area .state > i.glyph-success {
   color: var(--theme-color-success);
+}
+
+:host(.disabled) {
+  pointer-events: none;
 }

package/dist/collection/components/upload/upload.js

@@ -10,19 +10,24 @@ import { h, Host, } from '@stencil/core';
 import { UploadFileState } from './upload-file-state';
 export class Upload {
   get inputElement() {
-    return this.hostElement.querySelector('#upload-browser');
+    return this.hostElement.shadowRoot.querySelector('#upload-browser');
   }
   constructor() { this.accept = undefined; this.multiple = false; this.multiline = false; this.disabled = false; this.state = UploadFileState.SELECT_FILE; this.selectFileText = '+ Drag files here or…'; this.loadingText = 'Checking files…'; this.uploadFailedText = 'Upload failed. Please try again.'; this.uploadSuccessText = 'Upload successful'; this.i18nUploadFile = 'Upload file…'; this.i18nUploadDisabled = 'File upload currently not possible.'; this.isFileOver = false; }
   fileDropped(evt) {
     evt.preventDefault();
+    if (this.disabled) {
+      return;
+    }
     const file = evt.dataTransfer.files;
     this.isFileOver = false;
     this.filesToUpload = this.convertToFileArray(file);
     this.filesChanged.emit(this.filesToUpload);
   }
   fileOver(event) {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
+    if (this.state !== UploadFileState.LOADING) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    }
     if (!this.multiple && event.dataTransfer.items.length > 1) {
       event.preventDefault();
       event.stopPropagation();
@@ -37,6 +42,9 @@ export class Upload {
     this.isFileOver = false;
   }
   fileChangeEvent(event) {
+    if (this.disabled) {
+      return;
+    }
     this.filesToUpload = this.convertToFileArray(event.target.files);
     this.filesChanged.emit(this.filesToUpload);
     // Workaround for bug in native input element, that prevents the user from uploading
@@ -81,16 +89,20 @@ export class Upload {
   render() {
     return (h(Host, null, h("div", { class: {
         'file-upload-area': true,
-        'file-over': this.isFileOver,
+        'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
         checking: this.state === UploadFileState.LOADING,
         disabled: this.disabled,
         multiline: this.multiline,
-      }, onDrop: (e) => this.fileDropped(e), onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", null, h("input", { multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+      }, onDrop: (e) => {
+        if (this.state !== UploadFileState.LOADING) {
+          this.fileDropped(e);
+        }
+      }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", null, h("input", { multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
         this.fileChangeEvent(e);
       }, accept: this.accept }), h("ix-button", { tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
   }
   static get is() { return "ix-upload"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["upload.scss"]

package/dist/collection/components/upload/upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../src/components/upload/upload.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\n\n@Component({\n  tag: 'ix-upload',\n  styleUrl: 'upload.scss',\n  scoped: true,\n})\nexport class Upload {\n  /**\n   * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n   * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n   */\n  @Prop() accept: string;\n\n  /**\n   * If multiple is true the user can drop or select multiple files\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Whether the text should wrap to more than one line\n   */\n  @Prop() multiline = false;\n\n  /**\n   * Disable all input events\n   */\n  @Prop() disabled = false;\n\n  /**\n   * After a file is uploaded you can set the upload component to a defined state\n   */\n  @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n  /**\n   * Will be used by state = UploadFileState.SELECT_FILE\n   */\n  @Prop() selectFileText = '+ Drag files here or…';\n\n  /**\n   * Will be used by state = UploadFileState.LOADING\n   */\n  @Prop() loadingText = 'Checking files…';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_FAILED\n   */\n  @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n   */\n  @Prop() uploadSuccessText = 'Upload successful';\n\n  /**\n   * Label for upload file button\n   */\n  @Prop() i18nUploadFile = 'Upload file…';\n\n  /**\n   * Text for disabled state\n   */\n  @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n  /**\n   * You get an array of Files after drop-action or browse action is finished\n   */\n  @Event() filesChanged: EventEmitter<Array<File>>;\n\n  @Element() hostElement!: HTMLIxUploadElement;\n\n  get inputElement(): HTMLInputElement {\n    return this.hostElement.querySelector('#upload-browser');\n  }\n\n  @State() isFileOver = false;\n\n  private filesToUpload: Array<File>;\n\n  constructor() {}\n\n  private fileDropped(evt: DragEvent) {\n    evt.preventDefault();\n\n    const file: File | FileList = evt.dataTransfer.files;\n    this.isFileOver = false;\n\n    this.filesToUpload = this.convertToFileArray(file);\n\n    this.filesChanged.emit(this.filesToUpload);\n  }\n\n  private fileOver(event: DragEvent) {\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'move';\n\n    if (!this.multiple && event.dataTransfer.items.length > 1) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.effectAllowed = 'none';\n      event.dataTransfer.dropEffect = 'none';\n    } else {\n      this.isFileOver = true;\n    }\n  }\n\n  private fileLeave() {\n    this.isFileOver = false;\n  }\n\n  private fileChangeEvent(event: any) {\n    this.filesToUpload = this.convertToFileArray(event.target.files);\n\n    this.filesChanged.emit(this.filesToUpload);\n\n    // Workaround for bug in native input element, that prevents the user from uploading\n    // a file with the same name as the most recent one, but with changed content.\n    this.inputElement.type = '';\n    this.inputElement.type = 'file';\n  }\n\n  private convertToFileArray(filesFromEvent: FileList | File): File[] {\n    let files = [];\n    if (filesFromEvent instanceof FileList) {\n      files = Array.from(filesFromEvent);\n    } else {\n      files = [filesFromEvent];\n    }\n    return files;\n  }\n\n  private renderUploadState() {\n    if (this.disabled) {\n      return (\n        <span class=\"state\">\n          <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n        </span>\n      );\n    }\n\n    switch (this.state) {\n      case UploadFileState.SELECT_FILE:\n        return (\n          <span class=\"state\">\n            <span class=\"upload-text\">{this.selectFileText}</span>\n          </span>\n        );\n      case UploadFileState.LOADING:\n        return (\n          <span class=\"state\">\n            <ix-spinner variant=\"primary\"></ix-spinner>\n            <span class=\"upload-text\">{this.loadingText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_FAILED:\n        return (\n          <span class=\"state\">\n            <i class=\"glyph glyph-error\"></i>\n            <span class=\"upload-text\">{this.uploadFailedText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_SUCCESSED:\n        return (\n          <span class=\"state\">\n            <i class=\"glyph glyph-success\"></i>\n            <span class=\"upload-text\">{this.uploadSuccessText}</span>\n          </span>\n        );\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Set files\n   * @param obj\n   */\n  @Method()\n  async setFilesToUpload(obj: any) {\n    this.filesToUpload = obj;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload-area': true,\n            'file-over': this.isFileOver,\n            checking: this.state === UploadFileState.LOADING,\n            disabled: this.disabled,\n            multiline: this.multiline,\n          }}\n          onDrop={(e) => this.fileDropped(e)}\n          onDragOver={(e) => this.fileOver(e)}\n          onDragLeave={() => this.fileLeave()}\n          draggable={!this.disabled}\n        >\n          {this.renderUploadState()}\n          <div>\n            <input\n              multiple={this.multiple}\n              type=\"file\"\n              class=\"upload-browser\"\n              id=\"upload-browser\"\n              onChange={(e) => {\n                this.fileChangeEvent(e);\n              }}\n              accept={this.accept}\n            />\n            <ix-button\n              tabindex=\"-1\"\n              outline\n              onClick={() => this.inputElement.click()}\n              disabled={this.disabled || this.state === UploadFileState.LOADING}\n            >\n              {this.i18nUploadFile}\n            </ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../src/components/upload/upload.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\n\n@Component({\n  tag: 'ix-upload',\n  styleUrl: 'upload.scss',\n  shadow: true,\n})\nexport class Upload {\n  /**\n   * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n   * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n   */\n  @Prop() accept: string;\n\n  /**\n   * If multiple is true the user can drop or select multiple files\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Whether the text should wrap to more than one line\n   */\n  @Prop() multiline = false;\n\n  /**\n   * Disable all input events\n   */\n  @Prop() disabled = false;\n\n  /**\n   * After a file is uploaded you can set the upload component to a defined state\n   */\n  @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n  /**\n   * Will be used by state = UploadFileState.SELECT_FILE\n   */\n  @Prop() selectFileText = '+ Drag files here or…';\n\n  /**\n   * Will be used by state = UploadFileState.LOADING\n   */\n  @Prop() loadingText = 'Checking files…';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_FAILED\n   */\n  @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n   */\n  @Prop() uploadSuccessText = 'Upload successful';\n\n  /**\n   * Label for upload file button\n   */\n  @Prop() i18nUploadFile = 'Upload file…';\n\n  /**\n   * Text for disabled state\n   */\n  @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n  /**\n   * You get an array of Files after drop-action or browse action is finished\n   */\n  @Event() filesChanged: EventEmitter<Array<File>>;\n\n  @Element() hostElement!: HTMLIxUploadElement;\n\n  get inputElement(): HTMLInputElement {\n    return this.hostElement.shadowRoot.querySelector('#upload-browser');\n  }\n\n  @State() isFileOver = false;\n\n  private filesToUpload: Array<File>;\n\n  constructor() {}\n\n  private fileDropped(evt: DragEvent) {\n    evt.preventDefault();\n    if (this.disabled) {\n      return;\n    }\n\n    const file: File | FileList = evt.dataTransfer.files;\n    this.isFileOver = false;\n\n    this.filesToUpload = this.convertToFileArray(file);\n    this.filesChanged.emit(this.filesToUpload);\n  }\n\n  private fileOver(event: DragEvent) {\n    if (this.state !== UploadFileState.LOADING) {\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    if (!this.multiple && event.dataTransfer.items.length > 1) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.effectAllowed = 'none';\n      event.dataTransfer.dropEffect = 'none';\n    } else {\n      this.isFileOver = true;\n    }\n  }\n\n  private fileLeave() {\n    this.isFileOver = false;\n  }\n\n  private fileChangeEvent(event: any) {\n    if (this.disabled) {\n      return;\n    }\n    this.filesToUpload = this.convertToFileArray(event.target.files);\n\n    this.filesChanged.emit(this.filesToUpload);\n\n    // Workaround for bug in native input element, that prevents the user from uploading\n    // a file with the same name as the most recent one, but with changed content.\n    this.inputElement.type = '';\n    this.inputElement.type = 'file';\n  }\n\n  private convertToFileArray(filesFromEvent: FileList | File): File[] {\n    let files = [];\n    if (filesFromEvent instanceof FileList) {\n      files = Array.from(filesFromEvent);\n    } else {\n      files = [filesFromEvent];\n    }\n    return files;\n  }\n\n  private renderUploadState() {\n    if (this.disabled) {\n      return (\n        <span class=\"state\">\n          <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n        </span>\n      );\n    }\n\n    switch (this.state) {\n      case UploadFileState.SELECT_FILE:\n        return (\n          <span class=\"state\">\n            <span class=\"upload-text\">{this.selectFileText}</span>\n          </span>\n        );\n      case UploadFileState.LOADING:\n        return (\n          <span class=\"state\">\n            <ix-spinner variant=\"primary\"></ix-spinner>\n            <span class=\"upload-text\">{this.loadingText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_FAILED:\n        return (\n          <span class=\"state\">\n            <i class=\"glyph glyph-error\"></i>\n            <span class=\"upload-text\">{this.uploadFailedText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_SUCCESSED:\n        return (\n          <span class=\"state\">\n            <i class=\"glyph glyph-success\"></i>\n            <span class=\"upload-text\">{this.uploadSuccessText}</span>\n          </span>\n        );\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Set files\n   * @param obj\n   */\n  @Method()\n  async setFilesToUpload(obj: any) {\n    this.filesToUpload = obj;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload-area': true,\n            'file-over':\n              this.state !== UploadFileState.LOADING && this.isFileOver,\n            checking: this.state === UploadFileState.LOADING,\n            disabled: this.disabled,\n            multiline: this.multiline,\n          }}\n          onDrop={(e) => {\n            if (this.state !== UploadFileState.LOADING) {\n              this.fileDropped(e);\n            }\n          }}\n          onDragOver={(e) => this.fileOver(e)}\n          onDragLeave={() => this.fileLeave()}\n          draggable={!this.disabled}\n        >\n          {this.renderUploadState()}\n          <div>\n            <input\n              multiple={this.multiple}\n              type=\"file\"\n              class=\"upload-browser\"\n              id=\"upload-browser\"\n              onChange={(e) => {\n                this.fileChangeEvent(e);\n              }}\n              accept={this.accept}\n            />\n            <ix-button\n              tabindex=\"-1\"\n              outline\n              onClick={() => this.inputElement.click()}\n              disabled={this.disabled || this.state === UploadFileState.LOADING}\n            >\n              {this.i18nUploadFile}\n            </ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/utils/a11y.js

@@ -7,4 +7,70 @@
  * LICENSE file in the root directory of this source tree.
  */
 export const a11yBoolean = (value) => (value ? 'true' : 'false');
+export const a11yHostAttributes = (hostElement) => {
+  const attributeObject = {};
+  a11yAttributes.forEach((attr) => {
+    if (hostElement.hasAttribute(attr)) {
+      const value = hostElement.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = hostElement.getAttribute(attr);
+      }
+      hostElement.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+const a11yAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
 //# sourceMappingURL=a11y.js.map

package/dist/collection/components/utils/a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"a11y.js","sourceRoot":"","sources":["../../../src/components/utils/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC","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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n"]}
+{"version":3,"file":"a11y.js","sourceRoot":"","sources":["../../../src/components/utils/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,WAAwB,EACQ,EAAE;EAClC,MAAM,eAAe,GAAwB,EAAE,CAAC;EAChD,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;IAC9B,IAAI,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;MAClC,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MAC7C,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,eAAe,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;OACxD;MACD,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;KACnC;EACH,CAAC,CAAC,CAAC;EAEH,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AA4DF,MAAM,cAAc,GAAwB;EAC1C,MAAM;EACN,uBAAuB;EACvB,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,cAAc;EACd,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;EACd,eAAe;EACf,mBAAmB;EACnB,eAAe;EACf,aAAa;EACb,eAAe;EACf,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,sBAAsB;EACtB,kBAAkB;EAClB,WAAW;EACX,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,eAAe;EACf,eAAe;EACf,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,WAAW;EACX,eAAe;EACf,eAAe;EACf,eAAe;EACf,gBAAgB;CACjB,CAAC","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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n\nexport const a11yHostAttributes = (\n  hostElement: HTMLElement\n): Record<A11yAttributeName, any> => {\n  const attributeObject: Record<string, any> = {};\n  a11yAttributes.forEach((attr) => {\n    if (hostElement.hasAttribute(attr)) {\n      const value = hostElement.getAttribute(attr);\n      if (value !== null) {\n        attributeObject[attr] = hostElement.getAttribute(attr);\n      }\n      hostElement.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\ntype PartialRecord<K extends keyof any, T> = {\n  [P in K]?: T;\n};\nexport type A11yAttributes = PartialRecord<A11yAttributeName, any>;\n\nexport type A11yAttributeName =\n  | 'role'\n  | 'aria-activedescendant'\n  | 'aria-atomic'\n  | 'aria-autocomplete'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-colcount'\n  | 'aria-colindex'\n  | 'aria-colindextext'\n  | 'aria-colspan'\n  | 'aria-controls'\n  | 'aria-current'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-disabled'\n  | 'aria-errormessage'\n  | 'aria-expanded'\n  | 'aria-flowto'\n  | 'aria-haspopup'\n  | 'aria-hidden'\n  | 'aria-invalid'\n  | 'aria-keyshortcuts'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-level'\n  | 'aria-live'\n  | 'aria-multiline'\n  | 'aria-multiselectable'\n  | 'aria-orientation'\n  | 'aria-owns'\n  | 'aria-placeholder'\n  | 'aria-posinset'\n  | 'aria-pressed'\n  | 'aria-readonly'\n  | 'aria-relevant'\n  | 'aria-required'\n  | 'aria-roledescription'\n  | 'aria-rowcount'\n  | 'aria-rowindex'\n  | 'aria-rowindextext'\n  | 'aria-rowspan'\n  | 'aria-selected'\n  | 'aria-setsize'\n  | 'aria-sort'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n"]}

package/dist/collection/components/utils/delegate.js

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+class DefaultFrameworkDelegate {
+  async attachView(view, config) {
+    var _a;
+    const attachToElement = (_a = config === null || config === void 0 ? void 0 : config.parentElement) !== null && _a !== void 0 ? _a : document.body;
+    attachToElement.appendChild(view);
+    return view;
+  }
+  async removeView(view) {
+    view.remove();
+  }
+}
+const coreDelegate = new DefaultFrameworkDelegate();
+let currentDelegate = coreDelegate;
+export function registerFrameworkDelegate(delegate) {
+  currentDelegate = delegate;
+}
+export const resolveDelegate = () => {
+  return currentDelegate;
+};
+export const getCoreDelegate = () => coreDelegate;
+//# sourceMappingURL=delegate.js.map

package/dist/collection/components/utils/delegate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delegate.js","sourceRoot":"","sources":["../../../src/components/utils/delegate.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,MAAM,wBAAwB;EAC5B,KAAK,CAAC,UAAU,CACd,IAAS,EACT,MAAuB;;IAEvB,MAAM,eAAe,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,mCAAI,QAAQ,CAAC,IAAI,CAAC;IAC/D,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;EACd,CAAC;EAED,KAAK,CAAC,UAAU,CAAC,IAAS;IACxB,IAAI,CAAC,MAAM,EAAE,CAAC;EAChB,CAAC;CACF;AAED,MAAM,YAAY,GAAG,IAAI,wBAAwB,EAAE,CAAC;AACpD,IAAI,eAAe,GAAsB,YAAY,CAAC;AAEtD,MAAM,UAAU,yBAAyB,CAAC,QAA2B;EACnE,eAAe,GAAG,QAAQ,CAAC;AAC7B,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;EAClC,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC","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\nexport type DelegateConfig = {\n  parentElement?: Element;\n};\n\nexport interface FrameworkDelegate {\n  attachView<R = HTMLElement>(view: any, config?: DelegateConfig): Promise<R>;\n  removeView(view: any): Promise<void>;\n}\n\nclass DefaultFrameworkDelegate implements FrameworkDelegate {\n  async attachView<R = HTMLElement>(\n    view: any,\n    config?: DelegateConfig\n  ): Promise<R> {\n    const attachToElement = config?.parentElement ?? document.body;\n    attachToElement.appendChild(view);\n    return view;\n  }\n\n  async removeView(view: any) {\n    view.remove();\n  }\n}\n\nconst coreDelegate = new DefaultFrameworkDelegate();\nlet currentDelegate: FrameworkDelegate = coreDelegate;\n\nexport function registerFrameworkDelegate(delegate: FrameworkDelegate) {\n  currentDelegate = delegate;\n}\n\nexport const resolveDelegate = () => {\n  return currentDelegate;\n};\n\nexport const getCoreDelegate = () => coreDelegate;\n"]}

package/dist/collection/components/utils/menu-service/menu-service.js

@@ -6,11 +6,29 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MenuService_isPinned;
 import { TypedEvent } from '../typed-event';
 class MenuService {
   constructor() {
     this.menuElement = null;
     this.menuExpandChange = new TypedEvent();
+    _MenuService_isPinned.set(this, false);
   }
   register(menuElement) {
     if (this.menuElement) {
@@ -22,6 +40,9 @@ class MenuService {
       this.menuExpandChange.emit(event.detail);
     });
   }
+  setIsPinned(pinned) {
+    __classPrivateFieldSet(this, _MenuService_isPinned, pinned, "f");
+  }
   async open() {
     if (this.menuElement) {
       this.menuElement.toggleMenu(true);
@@ -49,6 +70,10 @@ class MenuService {
   get expandChange() {
     return this.menuExpandChange;
   }
+  get isPinned() {
+    return __classPrivateFieldGet(this, _MenuService_isPinned, "f");
+  }
 }
+_MenuService_isPinned = new WeakMap();
 export const menuController = new MenuService();
 //# sourceMappingURL=menu-service.js.map

package/dist/collection/components/utils/menu-service/menu-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-service.js","sourceRoot":"","sources":["../../../../src/components/utils/menu-service/menu-service.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;EAkD/C,CAAC;EAhDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B,EAAE,EAAE;MAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CACF,CAAC;EACJ,CAAC;EAEM,KAAK,CAAC,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;EAC1B,CAAC;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;EAC/B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,WAAW,EAAE,CAAC","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 { TypedEvent } from '../typed-event';\n\nclass MenuService {\n  menuElement: HTMLIxMenuElement | null = null;\n  menuExpandChange = new TypedEvent<boolean>();\n\n  register(menuElement: HTMLIxMenuElement) {\n    if (this.menuElement) {\n      console.warn('Menu already defined');\n      return;\n    }\n    this.menuElement = menuElement;\n    this.menuElement.addEventListener(\n      'expandChange',\n      (event: CustomEvent<boolean>) => {\n        this.menuExpandChange.emit(event.detail);\n      }\n    );\n  }\n\n  public async open() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(true);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async close() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(false);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async toggle() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu();\n      return true;\n    }\n\n    return false;\n  }\n\n  get nativeElement() {\n    return this.menuElement;\n  }\n\n  get expandChange() {\n    return this.menuExpandChange;\n  }\n}\n\nexport const menuController = new MenuService();\n"]}
+{"version":3,"file":"menu-service.js","sourceRoot":"","sources":["../../../../src/components/utils/menu-service/menu-service.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;IAC7C,gCAAY,KAAK,EAAC;EA0DpB,CAAC;EAxDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B,EAAE,EAAE;MAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CACF,CAAC;EACJ,CAAC;EAEM,WAAW,CAAC,MAAe;IAChC,uBAAA,IAAI,yBAAa,MAAM,MAAA,CAAC;EAC1B,CAAC;EAEM,KAAK,CAAC,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;EAC1B,CAAC;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;EAC/B,CAAC;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,6BAAU,CAAC;EACxB,CAAC;CACF;;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,WAAW,EAAE,CAAC","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 { TypedEvent } from '../typed-event';\n\nclass MenuService {\n  menuElement: HTMLIxMenuElement | null = null;\n  menuExpandChange = new TypedEvent<boolean>();\n  #isPinned = false;\n\n  register(menuElement: HTMLIxMenuElement) {\n    if (this.menuElement) {\n      console.warn('Menu already defined');\n      return;\n    }\n    this.menuElement = menuElement;\n    this.menuElement.addEventListener(\n      'expandChange',\n      (event: CustomEvent<boolean>) => {\n        this.menuExpandChange.emit(event.detail);\n      }\n    );\n  }\n\n  public setIsPinned(pinned: boolean) {\n    this.#isPinned = pinned;\n  }\n\n  public async open() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(true);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async close() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(false);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async toggle() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu();\n      return true;\n    }\n\n    return false;\n  }\n\n  get nativeElement() {\n    return this.menuElement;\n  }\n\n  get expandChange() {\n    return this.menuExpandChange;\n  }\n\n  get isPinned() {\n    return this.#isPinned;\n  }\n}\n\nexport const menuController = new MenuService();\n"]}

package/dist/collection/components/{modal-container/modal-container.css → utils/modal/index.js}

@@ -6,9 +6,7 @@
  * 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;
-}
+export { showModalLoading } from './loading';
+export { showMessage } from './message';
+export { closeModal, dismissModal, showModal, } from './modal';
+//# sourceMappingURL=index.js.map

package/dist/collection/components/utils/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/utils/modal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EACL,UAAU,EACV,YAAY,EAGZ,SAAS,GACV,MAAM,SAAS,CAAC","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\nexport { showModalLoading } from './loading';\nexport { showMessage } from './message';\nexport {\n  closeModal,\n  dismissModal,\n  ModalConfig,\n  ModalInstance,\n  showModal,\n} from './modal';\n"]}

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

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 Animation from '../animation';
+import { getCoreDelegate } from '../delegate';
+export function showModalLoading(message) {
+  const modal = document.createElement('ix-modal');
+  modal.keyboard = false;
+  const loading = document.createElement('ix-modal-loading');
+  loading.innerText = message;
+  modal.appendChild(loading);
+  getCoreDelegate().attachView(modal);
+  modal.showModal();
+  return {
+    update: (text) => (loading.innerHTML = text),
+    finish: (text, timeout = 250) => {
+      if (text !== undefined) {
+        loading.innerText = text;
+      }
+      else {
+        timeout = 0;
+      }
+      setTimeout(() => {
+        modal.closeModal(null);
+        setTimeout(async () => await getCoreDelegate().removeView(modal), Animation.mediumTime);
+      }, timeout);
+    },
+  };
+}
+//# sourceMappingURL=loading.js.map

package/dist/collection/components/utils/modal/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../../src/components/utils/modal/loading.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,UAAU,gBAAgB,CAAC,OAAe;EAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;EACjD,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;EAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;EAC5B,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;EAE3B,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;EACpC,KAAK,CAAC,SAAS,EAAE,CAAC;EAElB,OAAO;IACL,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG,EAAE,EAAE;MAC/C,IAAI,IAAI,KAAK,SAAS,EAAE;QACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;OAC1B;WAAM;QACL,OAAO,GAAG,CAAC,CAAC;OACb;MACD,UAAU,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACvB,UAAU,CACR,KAAK,IAAI,EAAE,CAAC,MAAM,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACrD,SAAS,CAAC,UAAU,CACrB,CAAC;MACJ,CAAC,EAAE,OAAO,CAAC,CAAC;IACd,CAAC;GACF,CAAC;AACJ,CAAC","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 Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n  const modal = document.createElement('ix-modal');\n  modal.keyboard = false;\n\n  const loading = document.createElement('ix-modal-loading');\n  loading.innerText = message;\n  modal.appendChild(loading);\n\n  getCoreDelegate().attachView(modal);\n  modal.showModal();\n\n  return {\n    update: (text: string) => (loading.innerHTML = text),\n    finish: (text?: string, timeout: number = 250) => {\n      if (text !== undefined) {\n        loading.innerText = text;\n      } else {\n        timeout = 0;\n      }\n      setTimeout(() => {\n        modal.closeModal(null);\n        setTimeout(\n          async () => await getCoreDelegate().removeView(modal),\n          Animation.mediumTime\n        );\n      }, timeout);\n    },\n  };\n}\n"]}