@siemens/ix 1.4.2 → 1.5.0-beta.1

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -836,8 +892,8 @@ export declare namespace JSXBase {
         accept?: string;
         allowdirs?: boolean;
         alt?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
         autoFocus?: boolean;
@@ -1161,8 +1217,8 @@ export declare namespace JSXBase {
         resource?: string;
         typeof?: string;
         vocab?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoCorrect?: string;
         autocorrect?: string;
         autoSave?: string;
@@ -1453,12 +1509,12 @@ export declare namespace JSXBase {
         onCutCapture?: (event: ClipboardEvent) => void;
         onPaste?: (event: ClipboardEvent) => void;
         onPasteCapture?: (event: ClipboardEvent) => void;
-        onCompositionEnd?: (event: CompositionEvent) => void;
-        onCompositionEndCapture?: (event: CompositionEvent) => void;
-        onCompositionStart?: (event: CompositionEvent) => void;
-        onCompositionStartCapture?: (event: CompositionEvent) => void;
-        onCompositionUpdate?: (event: CompositionEvent) => void;
-        onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+        onCompositionend?: (event: CompositionEvent) => void;
+        onCompositionendCapture?: (event: CompositionEvent) => void;
+        onCompositionstart?: (event: CompositionEvent) => void;
+        onCompositionstartCapture?: (event: CompositionEvent) => void;
+        onCompositionupdate?: (event: CompositionEvent) => void;
+        onCompositionupdateCapture?: (event: CompositionEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1469,8 +1525,8 @@ export declare namespace JSXBase {
         onBlurCapture?: (event: FocusEvent) => void;
         onChange?: (event: Event) => void;
         onChangeCapture?: (event: Event) => void;
-        onInput?: (event: Event) => void;
-        onInputCapture?: (event: Event) => void;
+        onInput?: (event: InputEvent) => void;
+        onInputCapture?: (event: InputEvent) => void;
         onReset?: (event: Event) => void;
         onResetCapture?: (event: Event) => void;
         onSubmit?: (event: Event) => void;

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.4.2",
+  "version": "1.5.0-beta.1",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -43,44 +43,45 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
-    "@stencil/core": "~2.19.2",
+    "@stencil/core": "^3.1.0",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
-    "luxon": "^3.0.1"
+    "luxon": "^3.0.1",
+    "@types/luxon": "^3.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.24.1",
     "@siemens/ix-icons": "~1.0.0",
-    "@stencil/angular-output-target": "^0.4.0",
-    "@stencil/eslint-plugin": "^0.4.0",
-    "@stencil/postcss": "^2.0.0",
-    "@stencil/react-output-target": "^0.3.1",
-    "@stencil/sass": "~2.0.0",
+    "@stencil/vue-output-target": "^0.7.0",
+    "@stencil-community/eslint-plugin": "^0.5.0",
+    "@stencil-community/postcss": "^2.1.0",
+    "@stencil/angular-output-target": "^0.5.0",
+    "@stencil/react-output-target": "^0.4.0",
+    "@stencil/sass": "~3.0.0",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/animejs": "^3.1.4",
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^27.5.2",
     "@types/luxon": "^3.0.0",
     "@types/mustache": "^4.1.1",
-    "@types/puppeteer": "^5.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "animate.css": "~4.1.1",
     "autoprefixer": "10.4.5",
     "bootstrap": "^5.2.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-ix": "*",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react": "^7.32.2",
     "fs-extra": "^10.0.0",
     "http-server": "^14.1.1",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "mustache": "^4.2.0",
-    "puppeteer": "^10.0.0",
-    "sass": "^1.54.0",
+    "puppeteer": "^19.5.2",
+    "sass": "^1.58.3",
     "start-server-and-test": "^1.14.0",
     "ts-node": "^10.0.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",

package/scss/components/_forms.scss

@@ -56,7 +56,7 @@
   &::-webkit-inner-spin-button {
     margin-right: -2px;
     margin-left: 2px;
-    //   display: none;
+    display: none;
   }
 
   text-align: right;

package/dist/cjs/modal-a93045dd.js

@@ -1,211 +0,0 @@
-'use strict';
-
-const index = require('./index-f4b8e6ee.js');
-const typedEvent = require('./typed-event-f0f051da.js');
-const anime_es = require('./anime.es-8822f296.js');
-const animation = require('./animation-d5cc0bec.js');
-
-const modalContainerCss = ".sc-ix-modal-container-h{position:absolute;top:0;left:0;z-index:9999}";
-
-/*
- * 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.
- */
-var __rest = (undefined && undefined.__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;
-};
-const ModalContainer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  /**
-   * Display modal dialog
-   *
-   * @param config
-   */
-  async showModal(config) {
-    const onClose = new typedEvent.TypedEvent();
-    const onDismiss = new typedEvent.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 {
-      htmlElement: modal,
-      onClose,
-      onDismiss,
-    };
-  }
-  render() {
-    return index.h(index.Host, null);
-  }
-  get hostElement() { return index.getElement(this); }
-};
-ModalContainer.style = modalContainerCss;
-
-const modalCss = ".sc-ix-modal-h{position:relative;width:100vw;height:100vh}.sc-ix-modal-h .modal.sc-ix-modal{display:flex}.sc-ix-modal-h .modal.animation.sc-ix-modal{animation:modal-fade 300ms ease-in-out}.sc-ix-modal-h .modal.backdrop.sc-ix-modal{background-color:var(--theme-color-lightbox);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:none}.sc-ix-modal-h .modal.backdrop.animation.sc-ix-modal{transition:-webkit-backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{flex-grow:1}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal{max-height:100%}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal .modal-body.sc-ix-modal{overflow-y:auto}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal{box-shadow:var(--theme-modal--box-shadow);flex-direction:row;background-color:var(--theme-modal--background);border:var(--modal--border-thickness) solid var(--theme-modal--border-color);padding:1.5rem;max-height:100vh}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .state-icon-container.sc-ix-modal{-webkit-margin-end:1rem;margin-inline-end:1rem}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .slot-container.sc-ix-modal{flex-grow:1}@media (min-width: 576px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal:not(.modal-dialog-centered){margin:2.5rem auto}}@media (max-width: 575.98px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{height:100%;margin:0}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal .modal-content.sc-ix-modal{height:100%;border-radius:0}}@keyframes modal-fade{from{opacity:0%}to{opacity:100%}}@keyframes slide-down{from{top:-100%}to{top:32px}}";
-
-const Modal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closed = index.createEvent(this, "closed", 7);
-    this.dismissed = index.createEvent(this, "dismissed", 7);
-    this.onKeydown = this.handleKeydown.bind(this);
-    this.animation = true;
-    this.ariaDescribedBy = undefined;
-    this.ariaLabelledBy = 'modal-title';
-    this.backdrop = true;
-    this.backdropClass = undefined;
-    this.beforeDismiss = undefined;
-    this.centered = false;
-    this.content = undefined;
-    this.keyboard = true;
-    this.icon = undefined;
-    this.iconColor = 'color-std-text';
-    this.modalDialogClass = undefined;
-    this.scrollable = true;
-    this.size = 'sm';
-    this.headerTitle = undefined;
-    this.windowClass = undefined;
-  }
-  get modal() {
-    return this.hostElement.querySelector('.modal');
-  }
-  get modalDialog() {
-    return this.modal.querySelector('.modal-dialog');
-  }
-  get modalContent() {
-    return this.modalDialog.querySelector('.modal-content');
-  }
-  get modalBackdrop() {
-    return this.hostElement.querySelector('.backdrop');
-  }
-  slideDown(modal) {
-    const duration = this.animation ? animation.Animation.mediumTime : 0;
-    anime_es.anime({
-      targets: modal,
-      duration,
-      opacity: [0, 1],
-      translateY: ['-100%', 0],
-      easing: 'easeOutSine',
-    });
-  }
-  slideUp(modal, completeCallback) {
-    const duration = this.animation ? animation.Animation.mediumTime : 0;
-    anime_es.anime({
-      targets: modal,
-      duration,
-      opacity: [1, 0],
-      translateY: [0, '-100%'],
-      easing: 'easeInSine',
-      complete: () => {
-        if (completeCallback) {
-          completeCallback();
-        }
-      },
-    });
-  }
-  onBackdropClick(event) {
-    const target = event.target;
-    if (target.classList.contains('backdrop')) {
-      this.dismiss(event);
-    }
-  }
-  componentDidLoad() {
-    if (this.backdrop === 'static') {
-      this.modalBackdrop.addEventListener('click', (event) => this.onBackdropClick(event));
-    }
-    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 (index.h(index.Host, null, index.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 }, index.h("div", { class: {
-        'modal-dialog': true,
-        'modal-sm': this.size === 'sm',
-        'modal-lg': this.size === 'lg',
-        'modal-xl': this.size === 'xl',
-      } }, index.h("div", { class: "modal-content" }, this.icon === undefined || this.icon === '' ? ('') : (index.h("div", { class: "state-icon-container" }, index.h("ix-icon", { name: this.icon, size: "32", color: this.iconColor }))), index.h("div", { class: "slot-container" }, index.h("slot", null)))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-Modal.style = modalCss;
-
-exports.Modal = Modal;
-exports.ModalContainer = ModalContainer;

package/dist/collection/components/button/button-variants.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/components/date-picker/events.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/components/datetime-picker/event.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/components/dropdown/dropdown-trigger-event.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/env.js

@@ -1,9 +0,0 @@
-/*
- * 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.
- */
-export const version = '1.0.0-beta.1';

package/dist/collection/exports.js

@@ -1,17 +0,0 @@
-/*
- * 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.
- */
-export * from './components/date-picker/events';
-export * from './components/datetime-picker/event';
-export * from './components/dropdown/dropdown-trigger-event';
-export * from './components/modal/modal-utils';
-export * from './components/toast/toast-utils';
-export * from './components/tree-item/default-tree-item';
-export * from './components/tree/tree-model';
-export * from './components/upload/upload-file-state';
-export * from './components/utils/theme-switcher';