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

package/dist/collection/components/time-picker/time-picker.js

@@ -1,431 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { Component, Element, Event, h, Host, Method, Prop, State, } from '@stencil/core';
-import { DateTime } from 'luxon';
-export class TimePicker {
-  constructor() {
-    /**
-     * Format of time string
-     *
-     * @since 1.1.0
-     */
-    this.format = 'TT';
-    /**
-     * Corner style
-     */
-    this.corners = 'rounded';
-    /**
-     * @deprecated - will get removed with next major release
-     */
-    this.individual = true;
-    /**
-     * Show hour input
-     */
-    this.showHour = false;
-    /**
-     * Show minutes input
-     */
-    this.showMinutes = false;
-    /**
-     * Show seconds input
-     */
-    this.showSeconds = false;
-    /**
-     * Select time with format string
-     *
-     * @since 1.1.0
-     */
-    this.time = DateTime.now().toFormat(this.format);
-    /**
-     * Show time reference input
-     *
-     * @since 1.1.0 time reference is default aligned with formt tt
-     */
-    this.showTimeReference = undefined;
-    /**
-     * Set time reference
-     */
-    this.timeReference = DateTime.fromFormat(this.time, this.format).toFormat('a');
-    /**
-     * Text of date select button
-     *
-     * @since 1.1.0
-     */
-    this.textSelectTime = 'Done';
-    this._time = DateTime.fromFormat(this.time, this.format);
-  }
-  get hour() {
-    return this._time.hour;
-  }
-  get minutes() {
-    return this._time.minute;
-  }
-  get seconds() {
-    return this._time.second;
-  }
-  updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
-    if (hours)
-      step === 'up' ? this.hourInputRef.stepUp() : this.hourInputRef.stepDown();
-    if (minutes)
-      step === 'up'
-        ? this.minuteInputRef.stepUp()
-        : this.minuteInputRef.stepDown();
-    if (seconds)
-      step === 'up'
-        ? this.secondInputRef.stepUp()
-        : this.secondInputRef.stepDown();
-    this._time = this._time.set({
-      hour: Number(this.hourInputRef.value),
-      minute: Number(this.minuteInputRef.value),
-      second: Number(this.secondInputRef.value),
-    });
-    this.emitTimeChange();
-  }
-  changeReference() {
-    this.referenceInputRef.value =
-      this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';
-    this.setHourAccordingToReference();
-    this.emitTimeChange();
-  }
-  setHourAccordingToReference() {
-    let hour = Number(this.hourInputRef.value);
-    if (this.referenceInputRef.value === 'PM')
-      hour += 12;
-    this._time = this._time.set({ hour });
-  }
-  emitTimeChange() {
-    const time = this._time.toFormat(this.format);
-    this.timeChange.emit(time);
-  }
-  componentWillLoad() {
-    if (this.showTimeReference === undefined) {
-      const matchedKeys = Object.keys(DateTime.fromFormatExplain(this.time, this.format).matches);
-      this.showTimeReference = matchedKeys.includes('a');
-    }
-  }
-  /**
-   * Get current time
-   */
-  async getCurrentTime() {
-    return this._time;
-  }
-  render() {
-    let hideHour = !this.showHour;
-    let hideMinutes = !this.showMinutes;
-    let hideSeconds = !this.showSeconds;
-    const hideTimeReference = !this.showTimeReference;
-    const hideIndividual = !this.individual;
-    if (!this.showHour && !this.showMinutes && !this.showSeconds) {
-      hideHour = false;
-      hideMinutes = false;
-      hideSeconds = false;
-    }
-    const hideHourSeperator = hideMinutes || hideHour;
-    const hideMinutesSeperator = hideSeconds || hideMinutes;
-    return (h(Host, null,
-      h("ix-date-time-card", { individual: this.individual, corners: this.corners },
-        h("div", { class: "header", slot: "header" },
-          h("div", { class: "title" }, "Time")),
-        h("div", { class: "clock" },
-          h("div", { class: { columns: true, hidden: hideHour } },
-            h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "hours", type: "number", placeholder: "00", value: this.hour, min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }),
-            h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })),
-          h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"),
-          h("div", { class: { columns: true, hidden: hideMinutes } },
-            h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "minutes", type: "number", placeholder: "00", value: this.minutes, min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }),
-            h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })),
-          h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"),
-          h("div", { class: { columns: true, hidden: hideSeconds } },
-            h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "seconds", type: "number", placeholder: "00", value: this.seconds, disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }),
-            h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })),
-          h("div", { class: {
-              columns: true,
-              'default-space': true,
-              hidden: hideTimeReference,
-            } },
-            h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: this.timeReference, disabled: true, class: "text-align" }),
-            h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))),
-        h("div", { class: { button: true, hidden: hideIndividual } },
-          h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
-  }
-  static get is() { return "ix-time-picker"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["time-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["time-picker.css"]
-  }; }
-  static get properties() { return {
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "since",
-            "text": "1.1.0"
-          }],
-        "text": "Format of time string"
-      },
-      "attribute": "format",
-      "reflect": false,
-      "defaultValue": "'TT'"
-    },
-    "corners": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DateTimeCardCorners",
-        "resolved": "\"left\" | \"right\" | \"rounded\"",
-        "references": {
-          "DateTimeCardCorners": {
-            "location": "import",
-            "path": "../date-time-card/date-time-card"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Corner style"
-      },
-      "attribute": "corners",
-      "reflect": false,
-      "defaultValue": "'rounded'"
-    },
-    "individual": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "- will get removed with next major release"
-          }],
-        "text": ""
-      },
-      "attribute": "individual",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "showHour": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show hour input"
-      },
-      "attribute": "show-hour",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showMinutes": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show minutes input"
-      },
-      "attribute": "show-minutes",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showSeconds": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show seconds input"
-      },
-      "attribute": "show-seconds",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "time": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "since",
-            "text": "1.1.0"
-          }],
-        "text": "Select time with format string"
-      },
-      "attribute": "time",
-      "reflect": false,
-      "defaultValue": "DateTime.now().toFormat(this.format)"
-    },
-    "showTimeReference": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "since",
-            "text": "1.1.0 time reference is default aligned with formt tt"
-          }],
-        "text": "Show time reference input"
-      },
-      "attribute": "show-time-reference",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "timeReference": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'AM' | 'PM'",
-        "resolved": "\"AM\" | \"PM\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set time reference"
-      },
-      "attribute": "time-reference",
-      "reflect": false,
-      "defaultValue": "DateTime.fromFormat(\n    this.time,\n    this.format\n  ).toFormat('a') as 'PM' | 'AM'"
-    },
-    "textSelectTime": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "since",
-            "text": "1.1.0"
-          }],
-        "text": "Text of date select button"
-      },
-      "attribute": "text-select-time",
-      "reflect": false,
-      "defaultValue": "'Done'"
-    }
-  }; }
-  static get states() { return {
-    "hourInputRef": {},
-    "minuteInputRef": {},
-    "secondInputRef": {},
-    "referenceInputRef": {}
-  }; }
-  static get events() { return [{
-      "method": "done",
-      "name": "done",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Time event"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "timeChange",
-      "name": "timeChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Time change event"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "getCurrentTime": {
-      "complexType": {
-        "signature": "() => Promise<DateTime>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "DateTime": {
-            "location": "import",
-            "path": "luxon"
-          }
-        },
-        "return": "Promise<DateTime>"
-      },
-      "docs": {
-        "text": "Get current time",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "hostElement"; }
-}

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

@@ -1,170 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
-import { TypedEvent } from '../utils/typed-event';
-export class ToastContainer {
-  constructor() {
-    /**
-     */
-    this.containerId = 'toast-container';
-    /**
-     */
-    this.containerClass = 'toast-container';
-    /**
-     */
-    this.position = 'bottom-right';
-  }
-  get hostContainer() {
-    return document.getElementById(this.containerId);
-  }
-  componentDidLoad() {
-    if (!document.getElementById(this.containerId)) {
-      const toastContainer = document.createElement('div');
-      toastContainer.id = this.containerId;
-      toastContainer.classList.add(this.containerClass);
-      toastContainer.classList.add(`toast-container--${this.position}`);
-      document.body.appendChild(toastContainer);
-    }
-  }
-  /**
-   * Display a toast message
-   * @param config
-   */
-  async showToast(config) {
-    const toast = document.createElement('ix-toast');
-    const onClose = new TypedEvent();
-    function removeToast(result) {
-      toast.remove();
-      onClose.emit(result);
-    }
-    toast.toastTitle = config.title;
-    toast.type = config.type;
-    toast.autoClose = config.autoClose;
-    toast.autoCloseDelay = config.autoCloseDelay;
-    toast.icon = config.icon;
-    toast.iconColor = config.iconColor;
-    toast.addEventListener('closeToast', (event) => {
-      const { detail } = event;
-      removeToast(detail);
-    });
-    if (typeof config.message === 'string') {
-      toast.innerText = config.message;
-    }
-    else {
-      toast.appendChild(config.message);
-    }
-    this.hostContainer.appendChild(toast);
-    return {
-      onClose,
-      close: (result) => {
-        removeToast(result);
-      },
-    };
-  }
-  render() {
-    return h(Host, null);
-  }
-  static get is() { return "ix-toast-container"; }
-  static get encapsulation() { return "scoped"; }
-  static get properties() { return {
-    "containerId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "container-id",
-      "reflect": false,
-      "defaultValue": "'toast-container'"
-    },
-    "containerClass": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "container-class",
-      "reflect": false,
-      "defaultValue": "'toast-container'"
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "position",
-      "reflect": false,
-      "defaultValue": "'bottom-right'"
-    }
-  }; }
-  static get methods() { return {
-    "showToast": {
-      "complexType": {
-        "signature": "(config: ToastConfig) => Promise<{ onClose: TypedEvent<any>; close: (result?: any) => void; }>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "config"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "TypedEvent": {
-            "location": "import",
-            "path": "../utils/typed-event"
-          },
-          "ToastConfig": {
-            "location": "import",
-            "path": "./toast-utils"
-          },
-          "CustomEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<{ onClose: TypedEvent<any>; close: (result?: any) => void; }>"
-      },
-      "docs": {
-        "text": "Display a toast message",
-        "tags": [{
-            "name": "param",
-            "text": "config"
-          }]
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/toast/toast-utils.js

@@ -1,40 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function getToastContainer() {
-  const containerList = Array.from(document.querySelectorAll('ix-toast-container'));
-  const [container] = containerList;
-  if (containerList.length > 1) {
-    console.warn('Multiple toast container are found. Only there first is used.');
-    return container;
-  }
-  if (!container) {
-    const toastContainer = document.createElement('ix-toast-container');
-    document.body.appendChild(toastContainer);
-    return toastContainer;
-  }
-  return container;
-}
-async function toast(config) {
-  const context = getToastContainer();
-  const toast = await context.showToast(config);
-  return toast;
-}
-toast.info = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'info' }));
-};
-toast.error = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'error' }));
-};
-toast.success = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'success' }));
-};
-toast.warning = (config) => {
-  return toast(Object.assign(Object.assign({}, config), { type: 'warning' }));
-};
-export { toast };